@heymantle/litho 0.0.1

package/dist/esm/components/ButtonGroup.js

@@ -0,0 +1,137 @@
+"use client";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext } from "react";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-ButtonGroup flex flex-row",
+    variants: {
+        segmented: {
+            true: "Litho-ButtonGroup--Segmented",
+            false: "gap-2"
+        },
+        noWrap: {
+            true: "flex-nowrap"
+        },
+        fullWidth: {
+            true: "Litho-ButtonGroup--FullWidth"
+        }
+    }
+});
+export var ButtonGroupContext = /*#__PURE__*/ createContext(false);
+/**
+ * ButtonGroup Component
+ *
+ * @param {object} props - The properties object.
+ * @param {React.ReactNode} [props.children] - The child components to be rendered inside the button group.
+ * @param {boolean} [props.segmented=false] - Determines whether the button group has segmented styling.
+ * @param {string} [props.id] - The unique identifier for the button group.
+ * @param {string} [props.className] - Additional class names to be added to the button group.
+ * @param {boolean} [props.fullWidth=false] - Determines if the button group spans the full width of the container.
+ * @param {boolean} [props.noWrap=false] - Determines if the buttons inside the group do not wrap.
+ * @param {object} [props.restProps] - Additional props to be spread onto the container element.
+ * @returns {JSX.Element} The rendered ButtonGroup component.
+ */ function ButtonGroup() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, _props_segmented = props.segmented, segmented = _props_segmented === void 0 ? false : _props_segmented, id = props.id, className = props.className, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth, _props_noWrap = props.noWrap, noWrap = _props_noWrap === void 0 ? false : _props_noWrap, restProps = _object_without_properties(props, [
+        "children",
+        "segmented",
+        "id",
+        "className",
+        "fullWidth",
+        "noWrap"
+    ]);
+    var classes = styles({
+        segmented: segmented,
+        noWrap: noWrap,
+        fullWidth: fullWidth
+    });
+    return /*#__PURE__*/ _jsx(ButtonGroupContext.Provider, {
+        value: segmented,
+        children: /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
+            id: id,
+            className: "".concat(classes).concat(className ? " ".concat(className) : "")
+        }, restProps), {
+            children: children
+        }))
+    });
+}
+export default ButtonGroup;

package/dist/esm/components/Card.js

@@ -0,0 +1,537 @@
+"use client";
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from "react";
+import { tv } from "tailwind-variants";
+import { FrameContext } from "./AppProvider.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
+var styles = tv({
+    base: "Litho-Card relative",
+    variants: {
+        hideOnPrint: {
+            true: "print:hidden",
+            false: ""
+        },
+        allowOverflow: {
+            true: "overflow-visible",
+            false: "overflow-hidden"
+        },
+        subdued: {
+            true: "bg-surface-higher",
+            false: ""
+        },
+        alternate: {
+            true: "bg-surface-lower",
+            false: ""
+        },
+        isClickable: {
+            true: "cursor-pointer hover:ring hover:ring-form-focus hover:outline-form-border-focus",
+            false: ""
+        },
+        fullWidthOnMobile: {
+            true: "-left-4 w-full-plus-8",
+            false: ""
+        },
+        roundedOnMobile: {
+            true: "rounded-md",
+            false: "rounded-none @md:rounded-md"
+        },
+        outlined: {
+            true: "outline outline-tint-3",
+            false: ""
+        },
+        highlighted: {
+            true: "cursor-pointer ring ring-form-focus outline outline-form-border-focus",
+            false: ""
+        },
+        shadow: {
+            default: "shadow-card",
+            strong: "shadow-card-strong",
+            none: ""
+        },
+        embedded: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            embedded: false,
+            fullWidthOnMobile: true,
+            className: "@md:left-0 @md:rounded-md @md:w-auto"
+        },
+        {
+            embedded: true,
+            fullWidthOnMobile: true,
+            className: "@md-embed:left-0 @md-embed:w-auto @md-embed:rounded-md"
+        },
+        {
+            subdued: false,
+            alternate: false,
+            highlighted: false,
+            className: "bg-surface-highest outline outline-tint-2 @md:outline-tint-1 dark:outline-hidden dark:border-t dark:border-tint-alt-2"
+        },
+        {
+            subdued: false,
+            alternate: false,
+            highlighted: true,
+            className: "bg-surface-highest dark:border-t dark:border-tint-alt-2"
+        }
+    ],
+    defaultVariants: {
+        isClickable: false,
+        subdued: false,
+        alternate: false,
+        outlined: false,
+        highlighted: false,
+        shadow: "default",
+        embedded: false
+    }
+});
+var headerStyles = tv({
+    base: "Litho-Card__Header p-2 pl-4 @md:p-3 @md:pl-5 flex flex-col justify-center items-stretch gap-1",
+    variants: {
+        removeHeaderBottomPadding: {
+            true: "pb-1 @md:pb-1 min-h-11 @md:min-h-12",
+            false: "min-h-12 @md:min-h-14"
+        }
+    }
+});
+var bodyStyles = tv({
+    base: "Litho-Card__Body",
+    variants: {
+        padding: {
+            none: "p-0",
+            half: "pr-2 pb-4 pl-2 @md:pr-2.5 @md:pl-2.5 @md:pb-2.5",
+            full: "pr-4 pb-4 pl-4 @md:pr-5 @md:pl-5 @md:pb-5"
+        },
+        fullHeight: {
+            true: "h-full"
+        }
+    },
+    compoundVariants: [
+        {
+            showHeader: false,
+            padding: "full",
+            className: "pt-4 @md:pt-5"
+        },
+        {
+            showHeader: true,
+            padding: "full",
+            className: "pt-0 @md:pt-0"
+        },
+        {
+            showHeader: false,
+            padding: "half",
+            className: "pt-2 @md:pt-2.5"
+        },
+        {
+            showHeader: true,
+            padding: "half",
+            className: "pt-0 @md:pt-0"
+        }
+    ]
+});
+/**
+ * Card component for creating styled containers with optional headers, actions, and children.
+ *
+ * @component
+ * @param {Object} props - Props for the Card component.
+ * @param {boolean} [props.allowOverflow=false] - Allows content to overflow the Card boundaries.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the Card.
+ * @param {boolean} [props.hideOnPrint] - Hides the Card when printing.
+ * @param {string|React.ReactNode} [props.title] - Title of the Card.
+ * @param {string} [props.titleVariant='headingMd'] - Typography variant for the Card title.
+ * @param {string} [props.description] - Description of the Card.
+ * @param {React.ElementType|Object} [props.icon] - Icon to render alongside the title.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} [props.tooltip] - Tooltip content for the title.
+ * @param {string} [props.tooltipPreferredPosition='above'] - Preferred position for the tooltip.
+ * @param {boolean} [props.outlined=false] - Applies outlined styling to the Card.
+ * @param {string} [props.shadow='default'] - Applies a shadow to the Card. Can be 'default', or 'none'.
+ * @param {boolean} [props.highlighted=false] - Applies highlighted styling to the Card.
+ * @param {boolean} [props.subdued=false] - Applies subdued styling to the Card.
+ * @param {boolean} [props.alternate=false] - Applies alternate styling to the Card.
+ * @param {boolean} [props.padded=false] - Adds padding to the Card body.
+ * @param {boolean} [props.loading=false] - Shows a loading spinner in place of the title.
+ * @param {boolean} [props.paddedHalf=false] - Adds half padding to the Card body.
+ * @param {boolean} [props.removeHeaderBottomPadding=false] - Removes bottom padding from the header.
+ * @param {Function} [props.onClick] - Click handler for the Card, making it clickable.
+ * @param {Object} [props.emptyState={}] - Configures the empty state of the Card.
+ * @param {Object} [props.action] - Action button or configuration to render in the Card header.
+ * @param {string} [props.className] - Additional classes to apply to the Card.
+ * @param {string} [props.headerClassName] - Additional classes to apply to the Card header.
+ * @param {React.ReactNode} [props.accessory] - Accessory element to render in the header.
+ * @param {boolean} [props.fullWidthOnMobile=true] - Makes the Card full width on mobile.
+ * @param {boolean} [props.roundedOnMobile=false] - Makes the Card rounded on mobile.
+ * @returns {React.ReactElement} The rendered Card component.
+ */ var Card = function(param) {
+    var _param_allowOverflow = param.allowOverflow, allowOverflow = _param_allowOverflow === void 0 ? false : _param_allowOverflow, _param_roundedOnMobile = param.roundedOnMobile, roundedOnMobile = _param_roundedOnMobile === void 0 ? false : _param_roundedOnMobile, children = param.children, hideOnPrint = param.hideOnPrint, title = param.title, _param_titleVariant = param.titleVariant, titleVariant = _param_titleVariant === void 0 ? "headingMd" : _param_titleVariant, description = param.description, icon = param.icon, tooltip = param.tooltip, _param_tooltipPreferredPosition = param.tooltipPreferredPosition, tooltipPreferredPosition = _param_tooltipPreferredPosition === void 0 ? "above" : _param_tooltipPreferredPosition, _param_outlined = param.outlined, outlined = _param_outlined === void 0 ? false : _param_outlined, _param_highlighted = param.highlighted, highlighted = _param_highlighted === void 0 ? false : _param_highlighted, _param_subdued = param.subdued, subdued = _param_subdued === void 0 ? false : _param_subdued, _param_alternate = param.alternate, alternate = _param_alternate === void 0 ? false : _param_alternate, _param_padded = param.padded, padded = _param_padded === void 0 ? false : _param_padded, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf, _param_removeHeaderBottomPadding = param.removeHeaderBottomPadding, removeHeaderBottomPadding = _param_removeHeaderBottomPadding === void 0 ? false : _param_removeHeaderBottomPadding, onClick = param.onClick, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, action = param.action, className = param.className, headerClassName = param.headerClassName, accessory = param.accessory, _param_fullHeightBody = param.fullHeightBody, fullHeightBody = _param_fullHeightBody === void 0 ? false : _param_fullHeightBody, _param_fullWidthOnMobile = param.fullWidthOnMobile, fullWidthOnMobile = _param_fullWidthOnMobile === void 0 ? true : _param_fullWidthOnMobile, _param_shadow = param.shadow, shadow = _param_shadow === void 0 ? "default" : _param_shadow;
+    var embedded = useContext(FrameContext).embedded;
+    var showHeader = !!(title || action);
+    var isClickable = !!onClick;
+    var classes = styles({
+        hideOnPrint: hideOnPrint,
+        subdued: subdued,
+        alternate: alternate,
+        allowOverflow: allowOverflow,
+        isClickable: isClickable,
+        fullWidthOnMobile: fullWidthOnMobile,
+        roundedOnMobile: roundedOnMobile,
+        outlined: outlined,
+        shadow: shadow,
+        highlighted: highlighted,
+        embedded: embedded
+    });
+    var headerClasses = headerStyles({
+        padded: padded,
+        removeHeaderBottomPadding: removeHeaderBottomPadding
+    });
+    var processCardChildren = function(children) {
+        if (!children) return null;
+        var firstSectionDetected = false;
+        function process(child) {
+            if (/*#__PURE__*/ React.isValidElement(child)) {
+                if (child.type.displayName === "Card.Section" && !firstSectionDetected) {
+                    firstSectionDetected = true;
+                    return /*#__PURE__*/ React.cloneElement(child, {
+                        isFirst: true,
+                        cardHasHeader: showHeader
+                    });
+                }
+                if (child.props.children) {
+                    var nestedChildren = React.Children.toArray(child.props.children).map(process);
+                    return /*#__PURE__*/ React.cloneElement(child, {
+                        children: nestedChildren
+                    });
+                }
+            }
+            return child;
+        }
+        return React.Children.toArray(children).map(process);
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        onClick: isClickable ? onClick : undefined,
+        children: [
+            showHeader && /*#__PURE__*/ _jsxs("div", {
+                className: "".concat(headerClasses).concat(headerClassName ? " ".concat(headerClassName) : ""),
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "w-full flex gap-2 justify-between items-center",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "Litho-Card__HeaderTitle flex items-center gap-2",
+                                children: [
+                                    loading ? /*#__PURE__*/ _jsx(Spinner, {
+                                        size: "small"
+                                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            icon && typeof icon === "function" && /*#__PURE__*/ _jsx(Icon, {
+                                                source: icon,
+                                                color: "subdued"
+                                            }),
+                                            icon && (typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            title && typeof title === "string" ? /*#__PURE__*/ _jsx(Text, {
+                                                variant: titleVariant,
+                                                children: title
+                                            }) : title,
+                                            description && /*#__PURE__*/ _jsx(Text, {
+                                                color: "subdued",
+                                                children: description
+                                            })
+                                        ]
+                                    }),
+                                    tooltip && /*#__PURE__*/ _jsx(Tooltip, {
+                                        content: tooltip,
+                                        preferredPosition: tooltipPreferredPosition
+                                    })
+                                ]
+                            }),
+                            action && /*#__PURE__*/ _jsx("div", {
+                                className: "Litho-Card__HeaderAction self-start",
+                                children: action.content ? /*#__PURE__*/ _jsx(Button, {
+                                    link: true,
+                                    onClick: action.onAction || action.onClick,
+                                    primary: action.primary,
+                                    destructive: action.destructive,
+                                    icon: action.icon,
+                                    loading: action.loading,
+                                    disabled: action.disabled,
+                                    connectedDisclosure: action.connectedDisclosure,
+                                    children: action.content
+                                }) : action
+                            })
+                        ]
+                    }),
+                    accessory && /*#__PURE__*/ _jsx("div", {
+                        className: "Litho-Card__HeaderAccessory pr-2",
+                        children: accessory
+                    })
+                ]
+            }),
+            emptyState.showIf ? /*#__PURE__*/ _jsx("div", {
+                className: bodyStyles({
+                    padding: "full",
+                    showHeader: showHeader,
+                    fullHeight: fullHeightBody
+                }),
+                children: /*#__PURE__*/ _jsx(Text, {
+                    color: "subdued",
+                    children: emptyState.text
+                })
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: bodyStyles({
+                    padding: padded ? "full" : paddedHalf ? "half" : "none",
+                    showHeader: showHeader,
+                    fullHeight: fullHeightBody
+                }),
+                children: processCardChildren(children)
+            })
+        ]
+    });
+};
+var sectionStyles = tv({
+    base: "Litho-Card__Section flex flex-col",
+    variants: {
+        headerGap: {
+            1: "gap-1",
+            2: "gap-2",
+            3: "gap-3",
+            4: "gap-4"
+        },
+        borderBottom: {
+            true: "border-b border-edge-default last:border-b-0",
+            false: ""
+        },
+        borderTop: {
+            true: "border-t border-edge-default",
+            false: ""
+        },
+        subdued: {
+            true: "bg-surface-higher",
+            false: ""
+        }
+    }
+});
+var sectionHeaderStyles = tv({
+    base: "Litho-Card__SectionHeader pr-2 pt-2 pl-4 @md:pr-3 @md:pt-3 @md:pl-5 min-h-9 @md:min-h-10"
+});
+var sectionBodyStyles = tv({
+    base: "Litho-Card__SectionBody flex flex-col",
+    variants: {
+        gap: {
+            1: "gap-1",
+            2: "gap-2",
+            3: "gap-3",
+            4: "gap-4"
+        },
+        padding: {
+            none: "p-0",
+            half: "",
+            full: ""
+        },
+        isFirst: {
+            true: "",
+            false: ""
+        },
+        showHeader: {
+            true: "",
+            false: ""
+        },
+        cardHasHeader: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            showHeader: true,
+            isFirst: true,
+            className: "pt-0!"
+        },
+        {
+            cardHasHeader: true,
+            isFirst: true,
+            className: "pt-0!"
+        },
+        {
+            showHeader: false,
+            padding: "full",
+            className: "p-4 @md:p-5"
+        },
+        {
+            showHeader: false,
+            padding: "half",
+            className: "p-2 @md:p-2.5"
+        },
+        {
+            showHeader: true,
+            padding: "full",
+            className: "p-4 pt-1 @md:p-5 @md:pt-1"
+        },
+        {
+            showHeader: true,
+            padding: "half",
+            className: "p-2 pt-1 @md:p-2.5 @md:pt-1"
+        }
+    ]
+});
+/**
+ * Section component for dividing the Card into segments.
+ *
+ * @component
+ * @param {Object} props - Props for the Section component.
+ * @param {string|React.ReactNode} [props.title] - Title of the Section.
+ * @param {string} [props.titleVariant='headingSm'] - Typography variant for the Section title.
+ * @param {Object} [props.action] - Action button or configuration to render in the Section header.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the Section.
+ * @param {boolean} [props.padded=true] - Adds padding to the Section body.
+ * @param {boolean} [props.paddedHalf=false] - Adds half padding to the Section body.
+ * @param {boolean} [props.isFirst=false] - Indicates whether this is the first Section in the Card.
+ * @param {boolean} [props.cardHasHeader=false] - Indicates whether the Card has a header.
+ * @param {boolean} [props.borderBottom=true] - Adds a bottom border to the Section.
+ * @param {boolean} [props.borderTop=false] - Adds a top border to the Section.
+ * @param {boolean} [props.subdued=false] - Applies subdued styling to the Section.
+ * @param {string} [props.headerGap='0'] - Gap between items in the Section header.
+ * @param {string} [props.gap='0'] - Gap between items in the Section body.
+ * @param {React.ElementType|Object} [props.icon] - Icon to render alongside the title.
+ * @param {string} [props.tooltip] - Tooltip content for the title.
+ * @param {string} [props.description] - Description text for the Section.
+ * @param {React.ReactNode} [props.accessory] - Accessory element to render in the Section header.
+ * @param {Object} [props.emptyState={}] - Configures the empty state of the Section.
+ *
+ * @returns {React.ReactElement} The rendered Section component.
+ */ Card.Section = function(param) {
+    var title = param.title, _param_titleVariant = param.titleVariant, titleVariant = _param_titleVariant === void 0 ? "headingSm" : _param_titleVariant, action = param.action, children = param.children, _param_padded = param.padded, padded = _param_padded === void 0 ? true : _param_padded, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf, _param_isFirst = param.isFirst, isFirst = _param_isFirst === void 0 ? false : _param_isFirst, _param_cardHasHeader = param.cardHasHeader, cardHasHeader = _param_cardHasHeader === void 0 ? false : _param_cardHasHeader, _param_borderBottom = param.borderBottom, borderBottom = _param_borderBottom === void 0 ? true : _param_borderBottom, _param_borderTop = param.borderTop, borderTop = _param_borderTop === void 0 ? false : _param_borderTop, _param_subdued = param.subdued, subdued = _param_subdued === void 0 ? false : _param_subdued, _param_headerGap = param.headerGap, headerGap = _param_headerGap === void 0 ? "0" : _param_headerGap, _param_gap = param.gap, gap = _param_gap === void 0 ? "0" : _param_gap, icon = param.icon, tooltip = param.tooltip, description = param.description, accessory = param.accessory, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, className = param.className;
+    var showHeader = !!(title || action);
+    var sectionClasses = sectionStyles({
+        borderBottom: borderBottom,
+        borderTop: borderTop,
+        subdued: subdued,
+        headerGap: headerGap
+    });
+    var sectionHeaderClasses = sectionHeaderStyles();
+    var sectionBodyClasses = sectionBodyStyles({
+        padding: paddedHalf ? "half" : padded ? "full" : "none",
+        showHeader: showHeader,
+        cardHasHeader: cardHasHeader,
+        isFirst: isFirst,
+        gap: gap
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
+        children: [
+            showHeader && /*#__PURE__*/ _jsxs("div", {
+                className: sectionHeaderClasses,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-2 min-h-8",
+                                children: [
+                                    icon && typeof icon === "function" && /*#__PURE__*/ _jsx(Icon, {
+                                        source: icon,
+                                        color: "subdued"
+                                    }),
+                                    icon && (typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon,
+                                    title && typeof title === "string" ? /*#__PURE__*/ _jsx(Text, {
+                                        variant: titleVariant,
+                                        children: title
+                                    }) : title,
+                                    tooltip && /*#__PURE__*/ _jsx(Tooltip, {
+                                        content: tooltip,
+                                        preferredPosition: "above"
+                                    })
+                                ]
+                            }),
+                            accessory && /*#__PURE__*/ _jsx("div", {
+                                className: "Litho-CardSection__HeaderAccessory pr-2",
+                                children: accessory
+                            }),
+                            action && /*#__PURE__*/ _jsx("div", {
+                                className: "Litho-CardSection__HeaderAction",
+                                children: action.content ? /*#__PURE__*/ _jsx(Button, {
+                                    link: true,
+                                    onClick: action.onAction,
+                                    primary: action.primary,
+                                    destructive: action.destructive,
+                                    icon: action.icon,
+                                    loading: action.loading,
+                                    disabled: action.disabled,
+                                    connectedDisclosure: action.connectedDisclosure,
+                                    children: action.content
+                                }) : action
+                            })
+                        ]
+                    }),
+                    description && /*#__PURE__*/ _jsx(Text, {
+                        color: "subdued",
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: sectionBodyClasses,
+                children: [
+                    emptyState.showIf && /*#__PURE__*/ _jsx("div", {
+                        className: paddedHalf ? "px-2 @md:px-2.5 pb-2" : !padded ? "px-4 @md:px-5 pb-4" : "",
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            children: emptyState.text
+                        })
+                    }),
+                    children
+                ]
+            })
+        ]
+    });
+};
+Card.Section.displayName = "Card.Section";
+var clickableRowStyles = tv({
+    base: "Litho-Card__ClickableRow flex py-1.5 px-2.5 cursor-pointer rounded-md hover:bg-tint-2 active:bg-tint-3",
+    variants: {
+        disabled: {
+            true: "opacity-50 cursor-not-allowed pointer-events-none"
+        }
+    }
+});
+/**
+ * ClickableRow component for creating clickable rows inside the Card.
+ *
+ * @component
+ * @param {Object} props - Props for the ClickableRow component.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the row.
+ * @param {Function} [props.onClick] - Click handler for the row.
+ * @param {string} [props.id] - ID to apply to the row element.
+ * @param {string} [props.url] - URL to open when the row is clicked.
+ * @param {boolean} [props.disabled=false] - Disables interaction with the row.
+ *
+ * @returns {React.ReactElement} The rendered ClickableRow component.
+ */ Card.ClickableRow = function(param) {
+    var children = param.children, onClick = param.onClick, id = param.id, url = param.url, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, className = param.className;
+    var classes = clickableRowStyles({
+        disabled: disabled
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        id: id,
+        onClick: url ? function() {
+            return window.open(url, "_blank");
+        } : onClick,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+};
+Card.ClickableRow.displayName = "Card.ClickableRow";
+export default Card;