Merge branch 'develop' into feature/MED-129

packages/ui/src/shadcn/card.tsx

@@ -34,19 +34,24 @@ const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex flex-col space-y-1.5 p-4 sm:p-6', className)} {...props} />
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
-  className,
-  ...props
-}) => (
-  <h3
-    className={cn('leading-none font-semibold tracking-tight', className)}
+  <div
+    className={cn('flex flex-col space-y-1.5 p-4 sm:p-6', className)}
     {...props}
   />
 );
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle: React.FC<
+  React.HTMLAttributes<HTMLHeadingElement> & { size?: 'h3' | 'h4' | 'h5' }
+> = ({ className, size = 'h3', ...props }) => {
+  const Component = size;
+  return (
+    <Component
+      className={cn('leading-none font-semibold tracking-tight', className)}
+      {...props}
+    />
+  );
+};
 CardTitle.displayName = 'CardTitle';
 
 const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
@@ -60,14 +65,17 @@ CardDescription.displayName = 'CardDescription';
 const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
-}) => <div className={cn('p-4 sm:p-6 pt-0', className)} {...props} />;
+}) => <div className={cn('p-4 pt-0 sm:p-6', className)} {...props} />;
 CardContent.displayName = 'CardContent';
 
 const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex items-center p-4 sm:p-6 pt-0', className)} {...props} />
+  <div
+    className={cn('flex items-center p-4 pt-0 sm:p-6', className)}
+    {...props}
+  />
 );
 CardFooter.displayName = 'CardFooter';
 

packages/ui/src/shadcn/skeleton.tsx

@@ -2,13 +2,23 @@ import { cn } from '../lib/utils';
 
 function Skeleton({
   className,
+  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+      className={cn('relative inline-block align-top', className)}
       {...props}
-    />
+    >
+      <div className="invisible">
+        {children ?? <span className="block h-4 w-24" />}
+      </div>
+
+      <div
+        aria-hidden
+        className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
+      />
+    </div>
   );
 }