fix: flexboxes containers

src/primitive-components/badge/badge.tsx

@@ -18,7 +18,7 @@ const Badge = forwardRef<SVGSVGElement, BadgeProps>(
             >
                 {children && (
                     <text x={'50%'} y={'50%'}>
-                        {children}
+                        {parseInt(children) > 999 ? '999+' : children}
                     </text>
                 )}
             </svg>

src/primitive-components/card/card.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'outlined' | 'filled' | 'elevated';
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+    ({ variant = 'filled', ...props }, ref) => {
+        const classes =
+            `m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
+
+        return (
+            <div {...props} className={classes} ref={ref}>
+                {props.children}
+            </div>
+        );
+    },
+);
+
+export default Card;