@heymantle/litho 0.0.1

package/dist/cjs/components/Card.js

@@ -0,0 +1,593 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _tailwindvariants = require("tailwind-variants");
+var _AppProvider = require("../components/AppProvider");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var styles = (0, _tailwindvariants.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 = (0, _tailwindvariants.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 = (0, _tailwindvariants.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 = (0, _react.useContext)(_AppProvider.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.default.isValidElement(child)) {
+                if (child.type.displayName === "Card.Section" && !firstSectionDetected) {
+                    firstSectionDetected = true;
+                    return /*#__PURE__*/ _react.default.cloneElement(child, {
+                        isFirst: true,
+                        cardHasHeader: showHeader
+                    });
+                }
+                if (child.props.children) {
+                    var nestedChildren = _react.default.Children.toArray(child.props.children).map(process);
+                    return /*#__PURE__*/ _react.default.cloneElement(child, {
+                        children: nestedChildren
+                    });
+                }
+            }
+            return child;
+        }
+        return _react.default.Children.toArray(children).map(process);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        onClick: isClickable ? onClick : undefined,
+        children: [
+            showHeader && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "".concat(headerClasses).concat(headerClassName ? " ".concat(headerClassName) : ""),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "w-full flex gap-2 justify-between items-center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "Litho-Card__HeaderTitle flex items-center gap-2",
+                                children: [
+                                    loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                                        size: "small"
+                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                        children: [
+                                            icon && typeof icon === "function" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                                source: icon,
+                                                color: "subdued"
+                                            }),
+                                            icon && (typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        children: [
+                                            title && typeof title === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: titleVariant,
+                                                children: title
+                                            }) : title,
+                                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                color: "subdued",
+                                                children: description
+                                            })
+                                        ]
+                                    }),
+                                    tooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                                        content: tooltip,
+                                        preferredPosition: tooltipPreferredPosition
+                                    })
+                                ]
+                            }),
+                            action && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "Litho-Card__HeaderAction self-start",
+                                children: action.content ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    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__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "Litho-Card__HeaderAccessory pr-2",
+                        children: accessory
+                    })
+                ]
+            }),
+            emptyState.showIf ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: bodyStyles({
+                    padding: "full",
+                    showHeader: showHeader,
+                    fullHeight: fullHeightBody
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    color: "subdued",
+                    children: emptyState.text
+                })
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: bodyStyles({
+                    padding: padded ? "full" : paddedHalf ? "half" : "none",
+                    showHeader: showHeader,
+                    fullHeight: fullHeightBody
+                }),
+                children: processCardChildren(children)
+            })
+        ]
+    });
+};
+var sectionStyles = (0, _tailwindvariants.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 = (0, _tailwindvariants.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 = (0, _tailwindvariants.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__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
+        children: [
+            showHeader && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: sectionHeaderClasses,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex items-center justify-between gap-1",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "flex items-center gap-2 min-h-8",
+                                children: [
+                                    icon && typeof icon === "function" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                        source: icon,
+                                        color: "subdued"
+                                    }),
+                                    icon && (typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon,
+                                    title && typeof title === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: titleVariant,
+                                        children: title
+                                    }) : title,
+                                    tooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+                                        content: tooltip,
+                                        preferredPosition: "above"
+                                    })
+                                ]
+                            }),
+                            accessory && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "Litho-CardSection__HeaderAccessory pr-2",
+                                children: accessory
+                            }),
+                            action && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "Litho-CardSection__HeaderAction",
+                                children: action.content ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    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__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        color: "subdued",
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: sectionBodyClasses,
+                children: [
+                    emptyState.showIf && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: paddedHalf ? "px-2 @md:px-2.5 pb-2" : !padded ? "px-4 @md:px-5 pb-4" : "",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            color: "subdued",
+                            children: emptyState.text
+                        })
+                    }),
+                    children
+                ]
+            })
+        ]
+    });
+};
+Card.Section.displayName = "Card.Section";
+var clickableRowStyles = (0, _tailwindvariants.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__*/ (0, _jsxruntime.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";
+var _default = Card;