@aurora-ds/components 1.1.4 → 1.1.6

package/dist/esm/index.js

@@ -1236,6 +1236,12 @@ const SKELETON_VARIANTS = createVariants((theme) => ({
 const Skeleton = ({ ref, variant = 'rectangular', animation = 'shimmer', width, height, className, style, ...rest }) => (jsx("span", { ref: ref, className: SKELETON_VARIANTS({ variant, animation: animation === false ? 'none' : animation }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest }));
 Skeleton.displayName = 'Skeleton';
 
+const FORM_STYLES = createStyles(() => ({
+    root: {
+        display: 'contents',
+    },
+}));
+
 /**
  * Thin wrapper around `<form>`. Prevents the default browser submit and
  * delegates to the `onSubmit` callback.
@@ -1251,7 +1257,7 @@ const Form = ({ children, onSubmit, 'aria-label': ariaLabel, 'aria-labelledby':
         event.preventDefault();
         onSubmit(event);
     };
-    return (jsx("form", { onSubmit: handleSubmit, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, noValidate: true, children: children }));
+    return (jsx("form", { onSubmit: handleSubmit, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: FORM_STYLES.root, noValidate: true, children: children }));
 };
 Form.displayName = 'Form';
 
@@ -2272,13 +2278,13 @@ const CARD_VARIANTS = createVariants((theme) => ({
     defaultVariants: { variant: 'elevated' },
 }), { id: 'card' });
 
-const CardHeader = ({ label, icon, actions }) => {
-    return (jsxs(Stack, { alignItems: 'center', justifyContent: 'space-between', gap: 'sm', py: 'sm', px: 'md', children: [jsxs(Stack, { alignItems: 'center', gap: 'sm', flex: 1, minWidth: '0', children: [icon !== undefined && (jsx(Icon, { icon: icon, size: 'md', strokeColor: 'textSecondary' })), jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: 'semibold', color: 'textPrimary', children: label })] }), actions !== undefined && (jsx(Stack, { alignItems: 'center', gap: 'xs', flexShrink: 0, children: actions }))] }));
+const CardHeader = ({ label, icon, actions, flexDirection = 'row', gap = 'sm', alignItems = 'center', justifyContent = 'space-between', py = 'sm', px = 'md', ...rest }) => {
+    return (jsxs(Stack, { flexDirection: flexDirection, alignItems: alignItems, justifyContent: justifyContent, gap: gap, py: py, px: px, ...rest, children: [jsxs(Stack, { alignItems: 'center', gap: 'sm', flex: 1, minWidth: '0', children: [icon !== undefined && (jsx(Icon, { icon: icon, size: 'md', strokeColor: 'textSecondary' })), jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: 'semibold', color: 'textPrimary', children: label })] }), actions !== undefined && (jsx(Stack, { alignItems: 'center', gap: 'xs', flexShrink: 0, children: actions }))] }));
 };
 CardHeader.displayName = 'Card.Header';
 
-const CardBody = ({ children, py = 'md', px = 'md', }) => {
-    return (jsx(Box, { py: py, px: px, children: children }));
+const CardBody = ({ children, py = 'md', px = 'md', flexDirection = 'column', gap = 'sm', ...rest }) => {
+    return (jsx(Stack, { flexDirection: flexDirection, gap: gap, py: py, px: px, ...rest, children: children }));
 };
 CardBody.displayName = 'Card.Body';