@heymantle/litho 0.0.14 → 0.0.16

package/dist/cjs/components/Card.js

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get default () {
         return _default;
+    },
+    get useCard () {
+        return useCard;
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
@@ -18,15 +26,119 @@ var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 var _Frame = require("./Frame");
+var _Modal = require("./Modal");
+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 _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: 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 _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
+/**
+ * @component Card
+ *
+ * @description A bordered container component that groups related content into a visually distinct section with optional header, sections, and actions.
+ *
+ * @usage
+ * - DO: Group related content into a visually distinct, bordered container.
+ * - DON'T: Nest Cards inside other Cards.
+ *
+ * @accessibility
+ * - Card uses semantic grouping; ensure heading props render appropriate heading levels.
+ *
+ * @alternative
+ * - If you need a plain container without borders, use `Box`.
+ * - If you need a full-page layout, use `Layout`.
+ *
+ * @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 {string} [props.descriptionVariant='bodyMd'] - Typography variant for the Card description.
+ * @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] - Makes the Card full width on mobile. Defaults to `true` for top-level cards, `false` for nested cards.
+ * @param {boolean} [props.roundedOnMobile] - Makes the Card rounded on mobile. Defaults to `false` for top-level cards, `true` for nested cards.
+ * @returns {React.ReactElement} The rendered Card component.
+ */ var CardContext = /*#__PURE__*/ _react.default.createContext({
+    nested: false
+});
+var NESTED_CONTEXT = {
+    nested: true
+};
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Card relative",
     variants: {
@@ -63,7 +175,7 @@ var styles = (0, _tailwindvariants.tv)({
             false: ""
         },
         highlighted: {
-            true: "cursor-pointer ring ring-form-focus outline outline-form-border-focus",
+            true: "cursor-pointer outline outline-form-border-focus",
             false: ""
         },
         shadow: {
@@ -74,6 +186,10 @@ var styles = (0, _tailwindvariants.tv)({
         embedded: {
             true: "",
             false: ""
+        },
+        nested: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -97,7 +213,14 @@ var styles = (0, _tailwindvariants.tv)({
             subdued: false,
             alternate: false,
             highlighted: true,
-            className: "bg-surface-highest dark:border-t dark:border-tint-alt-2"
+            className: "bg-surface-selected hover:bg-surface-selected dark:border-t dark:border-tint-alt-2"
+        },
+        {
+            nested: true,
+            subdued: false,
+            alternate: false,
+            highlighted: false,
+            className: "outline-edge-light @md:outline-edge-light"
         }
     ],
     defaultVariants: {
@@ -107,7 +230,8 @@ var styles = (0, _tailwindvariants.tv)({
         outlined: false,
         highlighted: false,
         shadow: "default",
-        embedded: false
+        embedded: false,
+        nested: false
     }
 });
 var headerStyles = (0, _tailwindvariants.tv)({
@@ -154,41 +278,14 @@ var bodyStyles = (0, _tailwindvariants.tv)({
         }
     ]
 });
-/**
- * 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 Card = function(param) {
+    var _param_allowOverflow = param.allowOverflow, allowOverflow = _param_allowOverflow === void 0 ? false : _param_allowOverflow, roundedOnMobile = 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, _param_descriptionVariant = param.descriptionVariant, descriptionVariant = _param_descriptionVariant === void 0 ? "bodyMd" : _param_descriptionVariant, 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, fullWidthOnMobile = param.fullWidthOnMobile, _param_shadow = param.shadow, shadow = _param_shadow === void 0 ? "default" : _param_shadow, nestedProp = param.nested;
     var embedded = (0, _Frame.useFrame)().embedded;
+    var _React_useContext = _react.default.useContext(CardContext), cardNested = _React_useContext.nested;
+    var isInModal = _react.default.useContext(_Modal.ModalContext);
+    var nested = nestedProp !== null && nestedProp !== void 0 ? nestedProp : cardNested || isInModal;
+    var resolvedFullWidthOnMobile = fullWidthOnMobile !== null && fullWidthOnMobile !== void 0 ? fullWidthOnMobile : nested ? false : true;
+    var resolvedRoundedOnMobile = roundedOnMobile !== null && roundedOnMobile !== void 0 ? roundedOnMobile : nested ? true : false;
     var showHeader = !!(title || action);
     var isClickable = !!onClick;
     var classes = styles({
@@ -197,12 +294,13 @@ var bodyStyles = (0, _tailwindvariants.tv)({
         alternate: alternate,
         allowOverflow: allowOverflow,
         isClickable: isClickable,
-        fullWidthOnMobile: fullWidthOnMobile,
-        roundedOnMobile: roundedOnMobile,
+        fullWidthOnMobile: resolvedFullWidthOnMobile,
+        roundedOnMobile: resolvedRoundedOnMobile,
         outlined: outlined,
-        shadow: shadow,
+        shadow: nested ? "none" : shadow,
         highlighted: highlighted,
-        embedded: embedded
+        embedded: embedded,
+        nested: nested
     });
     var headerClasses = headerStyles({
         padded: padded,
@@ -232,89 +330,103 @@ var bodyStyles = (0, _tailwindvariants.tv)({
         }
         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
-                            })
-                        ]
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(CardContext.Provider, {
+        value: NESTED_CONTEXT,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+            className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+            onClick: isClickable ? onClick : undefined
+        }, isClickable ? {
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: function(e) {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClick();
+                }
+            }
+        } : {}), {
+            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",
+                                                    variant: descriptionVariant,
+                                                    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
                     }),
-                    accessory && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "Litho-Card__HeaderAccessory pr-2",
-                        children: accessory
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        color: "subdued",
+                        children: emptyState.text
                     })
-                ]
-            }),
-            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)
                 })
-            }) : /*#__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)({
@@ -404,9 +516,12 @@ var sectionBodyStyles = (0, _tailwindvariants.tv)({
     ]
 });
 /**
- * Section component for dividing the Card into segments.
+ * @component Card.Section
+ *
+ * @usage
+ * - DO: Divide a Card into logical content segments.
+ * - DON'T: Nest sections within sections.
  *
- * @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.
@@ -424,12 +539,13 @@ var sectionBodyStyles = (0, _tailwindvariants.tv)({
  * @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 {string} [props.descriptionVariant='bodyMd'] - Typography variant for the Section description.
  * @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, sectionBodyClassName = param.sectionBodyClassName;
+    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, _param_descriptionVariant = param.descriptionVariant, descriptionVariant = _param_descriptionVariant === void 0 ? "bodyMd" : _param_descriptionVariant, accessory = param.accessory, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, className = param.className, sectionBodyClassName = param.sectionBodyClassName;
     var showHeader = !!(title || action);
     var sectionClasses = sectionStyles({
         borderBottom: borderBottom,
@@ -439,7 +555,7 @@ var sectionBodyStyles = (0, _tailwindvariants.tv)({
     });
     var sectionHeaderClasses = sectionHeaderStyles();
     var sectionBodyClasses = sectionBodyStyles({
-        padding: paddedHalf ? "half" : padded ? "full" : "none",
+        padding: paddedHalf || padded === "half" ? "half" : padded ? "full" : "none",
         showHeader: showHeader,
         cardHasHeader: cardHasHeader,
         isFirst: isFirst,
@@ -494,6 +610,7 @@ var sectionBodyStyles = (0, _tailwindvariants.tv)({
                     }),
                     description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         color: "subdued",
+                        variant: descriptionVariant,
                         children: description
                     })
                 ]
@@ -516,17 +633,28 @@ var sectionBodyStyles = (0, _tailwindvariants.tv)({
 };
 Card.Section.displayName = "Card.Section";
 var clickableRowStyles = (0, _tailwindvariants.tv)({
-    base: "Litho-Card__Row py-1.5 px-2.5 cursor-pointer rounded-md hover:bg-tint-2 active:bg-tint-3",
+    base: "Litho-Card__Row py-1.5 px-2 @md:px-2.5 rounded-md",
     variants: {
+        interactive: {
+            true: "cursor-pointer hover:bg-tint-2 active:bg-tint-3"
+        },
         disabled: {
             true: "opacity-50 cursor-not-allowed pointer-events-none"
         }
+    },
+    defaultVariants: {
+        interactive: true
     }
 });
 /**
- * ClickableRow component for creating clickable rows inside the Card.
+ * @component Card.ClickableRow
+ *
+ * @usage
+ * - DO: Use for rows that navigate or trigger actions.
+ *
+ * @accessibility
+ * - Renders as a clickable element; ensure it is keyboard accessible and has a clear action label.
  *
- * @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.
@@ -534,24 +662,43 @@ var clickableRowStyles = (0, _tailwindvariants.tv)({
  * @param {string} [props.url] - URL to open when the row is clicked.
  * @param {string} [props.className] - Additional classes to apply to the row.
  * @param {boolean} [props.disabled=false] - Disables interaction with the row.
+ * @param {string} [props.accessibilityLabel] - Accessible label for the row (aria-label).
  *
  * @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 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, accessibilityLabel = param.accessibilityLabel;
     var classes = clickableRowStyles({
         disabled: disabled
     });
+    var handleClick = url ? function() {
+        return window.open(url, "_blank");
+    } : onClick;
+    var handleKeyDown = function(e) {
+        if (disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick === null || handleClick === void 0 ? void 0 : handleClick(e);
+        }
+    };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         id: id,
-        onClick: url ? function() {
-            return window.open(url, "_blank");
-        } : onClick,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled || undefined,
+        "aria-label": accessibilityLabel,
+        onClick: disabled ? undefined : handleClick,
+        onKeyDown: handleKeyDown,
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         children: children
     });
 };
 Card.ClickableRow.displayName = "Card.ClickableRow";
-Card.Rows = function(param) {
+/**
+ * Rows container component for grouping multiple Card.Row elements.
+ *
+ * @usage
+ * - DO: Use to group multiple `Card.Row` elements with consistent spacing.
+ */ Card.Rows = function(param) {
     var children = param.children;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: "px-1.5 pb-1.5 @md:pb-2 @md:px-2",
@@ -560,9 +707,11 @@ Card.Rows = function(param) {
 };
 Card.Rows.displayName = "Card.Rows";
 /**
- * Row component for creating clickable rows inside the Card.
+ * @component Card.Row
+ *
+ * @usage
+ * - DO: Use for individual data rows within `Card.Rows`.
  *
- * @component
  * @param {Object} props - Props for the Row component.
  * @param {React.ReactNode} [props.children] - Child elements to render inside the row.
  * @param {Function} [props.onClick] - Click handler for the row.
@@ -570,21 +719,40 @@ Card.Rows.displayName = "Card.Rows";
  * @param {string} [props.url] - URL to open when the row is clicked.
  * @param {string} [props.className] - Additional classes to apply to the row.
  * @param {boolean} [props.disabled=false] - Disables interaction with the row.
+ * @param {string} [props.accessibilityLabel] - Accessible label for the row (aria-label).
  *
  * @returns {React.ReactElement} The rendered Row component.
  */ Card.Row = 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 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, accessibilityLabel = param.accessibilityLabel;
+    var isInteractive = !!(onClick || url);
     var classes = clickableRowStyles({
-        disabled: disabled
+        disabled: isInteractive ? disabled : false,
+        interactive: isInteractive
     });
+    var handleClick = url ? function() {
+        return window.open(url, "_blank");
+    } : onClick;
+    var handleKeyDown = function(e) {
+        if (!isInteractive || disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick === null || handleClick === void 0 ? void 0 : handleClick(e);
+        }
+    };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         id: id,
-        onClick: url ? function() {
-            return window.open(url, "_blank");
-        } : onClick,
+        role: isInteractive ? "button" : undefined,
+        tabIndex: isInteractive ? disabled ? -1 : 0 : undefined,
+        "aria-disabled": isInteractive && disabled ? true : undefined,
+        "aria-label": accessibilityLabel,
+        onClick: isInteractive && !disabled ? handleClick : undefined,
+        onKeyDown: isInteractive ? handleKeyDown : undefined,
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         children: children
     });
 };
 Card.Row.displayName = "Card.Row";
+var useCard = function() {
+    return _react.default.useContext(CardContext);
+};
 var _default = Card;