jup

docs/registry/index.tsx

@@ -4,16 +4,6 @@
 import dynamic from 'next/dynamic';
 
 export const registry = {
-  rightside: {
-    name: 'rightside',
-    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
-    file: 'content/components/aside/rightside.demo.tsx',
-  },
-  space: {
-    name: 'space',
-    demo: dynamic(() => import('@/content/components/aside/space.demo')),
-    file: 'content/components/aside/space.demo.tsx',
-  },
   'basic-accordion': {
     name: 'basic-accordion',
     demo: dynamic(
@@ -49,4 +39,14 @@ export const registry = {
     ),
     file: 'content/components/button/button-variant.demo.tsx',
   },
+  rightside: {
+    name: 'rightside',
+    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
+    file: 'content/components/aside/rightside.demo.tsx',
+  },
+  space: {
+    name: 'space',
+    demo: dynamic(() => import('@/content/components/aside/space.demo')),
+    file: 'content/components/aside/space.demo.tsx',
+  },
 } as const;

docs/theme/components/Message.styles.ts

@@ -1,15 +1,15 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const Message: ThemeComponent<'Message'> = {
-  container: cva('not-prose relative w-full rounded-lg p-4 pl-11', {
+  container: cva('not-prose rounded-lg p-4', {
     variants: {
       variant: {
         info: 'bg-bg-info text-text-info',
         warning: 'bg-bg-warning text-text-warning',
       },
     },
   }),
-  icon: cva('absolute left-3 top-3 block h-6 w-6'),
-  title: cva('mb-1 font-bold leading-none tracking-tight'),
+  icon: cva(''),
+  title: cva('font-bold tracking-tight'),
   content: cva('text-sm [&_p]:leading-relaxed'),
 };

packages/components/src/Message/Message.tsx

@@ -43,13 +43,17 @@ export const Message = ({
   return (
     <div
       className={cn(
-        'grid auto-cols-auto auto-rows-min gap-1',
+        'grid auto-rows-min grid-cols-[min-content_auto] gap-1',
         classNames.container
       )}
       {...props}
     >
-      <div className={cn('col-span-1 h-6 w-6', classNames.icon)}>{icon}</div>
-      <div className={cn('col-start-2 row-start-1', classNames.title)}>
+      <div className={cn('col-span-1 h-6 w-6 self-center', classNames.icon)}>
+        {icon}
+      </div>
+      <div
+        className={cn('col-start-2 row-start-1 self-center', classNames.title)}
+      >
         {messageTitle}
       </div>
       <div className={cn('col-start-2', classNames.content)}>{children}</div>