@hyphen/hyphen-components 4.4.2 → 4.6.0

package/dist/components/Card/components/CardHeader/CardHeader.d.ts

@@ -1,21 +1,13 @@
 import { FC, ReactNode } from 'react';
 import { BoxProps } from '../../../Box/Box';
 export interface CardHeaderProps extends BoxProps {
-    /**
-     * contents of the Header
-     */
-    children?: ReactNode;
-    /**
-     * Additional class names to add
-     */
-    className?: string;
     /**
      * The title of the card
      */
     title?: ReactNode;
     /**
-     * Additional props to be spread to rendered element
+     * Description of the card, or element below the title
      */
-    [x: string]: any;
+    description?: ReactNode;
 }
 export declare const CardHeader: FC<CardHeaderProps>;

package/dist/hyphen-components.cjs.development.js

@@ -871,33 +871,30 @@ var Heading = function Heading(_ref) {
   }, restProps), children);
 };
 
-var _excluded$F = ["childGap", "children", "className", "display", "padding", "title"];
+var _excluded$F = ["children", "title", "description"];
 var CardHeader = function CardHeader(_ref) {
-  var _ref$childGap = _ref.childGap,
-    childGap = _ref$childGap === void 0 ? '2xs' : _ref$childGap,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? undefined : _ref$className,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'block' : _ref$display,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? '2xl' : _ref$padding,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
+  var children = _ref.children,
+    title = _ref.title,
+    description = _ref.description,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
-  var renderTitle = function renderTitle() {
-    return typeof title === 'string' ? React.createElement(Heading, {
-      size: "sm",
-      as: "h4"
-    }, title) : title;
-  };
   return React.createElement(Box, _extends({
-    childGap: childGap,
-    display: display,
-    padding: padding,
-    className: className
-  }, restProps), title && renderTitle(), children);
+    padding: "2xl",
+    direction: "row",
+    gap: "2xl",
+    width: "100",
+    justifyContent: "space-between"
+  }, restProps), React.createElement(Box, {
+    gap: "2xs"
+  }, title && React.createElement(React.Fragment, null, typeof title === 'string' ? React.createElement(Heading, {
+    size: "sm",
+    as: "h4"
+  }, title) : title), description && React.createElement(React.Fragment, null, typeof description === 'string' ? React.createElement(Box, {
+    fontSize: {
+      base: 'xs',
+      tablet: 'sm'
+    },
+    color: "secondary"
+  }, description) : description)), children);
 };
 
 var styles$r = {"card-section-border":"Card-module_card-section-border__OefDX"};