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;

src/styles/divider.sass

@@ -1,26 +1,26 @@
 hr.m3.m3-divider
     border: none
     outline: 0.5px solid var(--md-sys-color-outline-variant)
-    margin-inline: 4px
     position: relative
+    margin: 0
 
     &.vertical
-        height: 100%
+        height: auto
+        writing-mode: vertical-lr
 
         &.inset
-            margin-top: 16px
+            margin-inline-start: 16px
 
         &.middle-inset
-            margin-bottom: 16px
-            margin-top: 16px
+            margin-inline: 16px
 
 
     &.horizontal
-        width: 100%
+        width: auto
+        writing-mode: horizontal-tb
 
         &.inset
-            margin-left: 16px
+            margin-inline-start: 16px
 
         &.middle-inset
-            margin-left: 16px
-            margin-right: 16px
+            margin-inline: 16px

src/styles/generics.sass

@@ -25,7 +25,6 @@ html
     user-select: none
 
 .m3.m3-wrapper
-    width: 100%
     position: relative
     display: block
     background-color: var(--md-sys-color-surface)