@moises.ai/design-system 3.9.28 → 3.9.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.28",
+  "version": "3.9.30",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/Callout/Callout.jsx

@@ -2,6 +2,7 @@ import { Flex, Callout as CalloutPrimitive } from '@radix-ui/themes'
 import { InfoCircledIcon } from '@radix-ui/react-icons'
 import styles from './Callout.module.css'
 import classNames from 'classnames'
+import { Text } from '../Text/Text'
 
 export const Callout = ({
   children,
@@ -11,6 +12,7 @@ export const Callout = ({
   highContrast = false,
   Icon,
   text,
+  title,
   hideIcon,
   ...props
 }) => {
@@ -39,7 +41,14 @@ export const Callout = ({
         </CalloutPrimitive.Icon>
       )}
 
-      <CalloutPrimitive.Text>{text || children}</CalloutPrimitive.Text>
+
+
+      <Flex direction="column" gap="0">
+        {title && (
+          <Text size={size} weight="bold">{title}</Text>
+        )}
+        <Text size={size} weight="regular">{text || children}</Text>
+      </Flex>
     </CalloutPrimitive.Root>
   )
 }

package/src/components/Callout/Callout.stories.jsx

@@ -70,6 +70,10 @@ import { Callout, Link } from '@moises.ai/design-system'
       control: { type: 'text' },
       description: 'Callout text (use either text or children)',
     },
+    title: {
+      control: { type: 'text' },
+      description: 'Callout title (optional)',
+    },
   },
 }
 
@@ -294,3 +298,26 @@ export const WithoutIcon = {
     },
   },
 }
+
+// With title
+export const WithTitle = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Callout title="Callout with title" text="This is a callout with a title" color="neutral" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates callouts with titles using the title prop.',
+      },
+    },
+  },
+}

package/src/components/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames'
-import lyrics from './Patterns/thumb-song-lyrics.jpg'
-import mastering from './Patterns/thumb-song-master.jpg'
-import stems from './Patterns/thumb-song-stems.jpg'
-import studio from './Patterns/thumb-song-studio.jpg'
-import voice from './Patterns/thumb-song-voice.jpg'
+import lyrics from './Patterns/lyrics.png'
+import mastering from './Patterns/master.png'
+import stems from './Patterns/stems.png'
+import studio from './Patterns/studio.png'
+import voice from './Patterns/voice.png'
 
 export const ProductsBrandPattern = ({
   className,

package/src/icons/Play1Icon.jsx

@@ -0,0 +1,8 @@
+export const Play1Icon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M19.7586 11.5824C20.0805 11.768 20.0805 12.232 19.7586 12.4176L6.72414 19.9347C6.4023 20.1203 6 19.8883 6 19.5171L6 4.48294C6 4.11173 6.4023 3.87972 6.72414 4.06532L19.7586 11.5824Z"
+      stroke="currentColor" strokeWidth="1.5" />
+  </svg>
+)
+
+Play1Icon.displayName = 'Play1Icon'

package/src/icons.jsx

@@ -346,3 +346,4 @@ export { UnlockIcon } from './icons/UnlockIcon'
 export { EmailIcon } from './icons/EmailIcon'
 export { EyeIcon } from './icons/EyeIcon'
 export { EyeOffIcon } from './icons/EyeOffIcon'
+export { Play1Icon } from './icons/Play1Icon'