@moises.ai/design-system 4.14.6 → 4.14.7

package/package.json

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

package/src/components/Callout/Callout.jsx

@@ -7,6 +7,7 @@ import styles from './Callout.module.css'
 import { Text } from '../Text/Text'
 import { Button } from '../Button/Button'
 import { IconButton } from '../IconButton/IconButton'
+import { Theme } from '../theme/Theme'
 
 const buttonSizeForCallout = (size) => (size === '3' ? '2' : '1')
 const iconButtonSizeForCallout = (size) => (size === '3' ? '2' : '1')
@@ -73,22 +74,23 @@ export const Callout = ({
   }
 
   return (
-    <CalloutPrimitive.Root
-      size={size}
-      color={color}
-      variant="soft"
-      highContrast={highContrast}
-      className={classNames(
-        styles.Callout,
-        className,
-        styles[color],
-        highContrast && styles[`${color}-highContrast`],
-        styles[`size${size}`],
-        hasButton && !hasIconButton && styles.onlyButton,
-        hasIconButton && !hasButton && styles.onlyIconButton,
-      )}
-      {...props}
-    >
+    <Theme asChild>
+      <CalloutPrimitive.Root
+        size={size}
+        color={color}
+        variant="soft"
+        highContrast={highContrast}
+        className={classNames(
+          styles.Callout,
+          className,
+          styles[color],
+          highContrast && styles[`${color}-highContrast`],
+          styles[`size${size}`],
+          hasButton && !hasIconButton && styles.onlyButton,
+          hasIconButton && !hasButton && styles.onlyIconButton,
+        )}
+        {...props}
+      >
       <Flex justify="between" gap="3" width="100%" align={outerAlign}>
         <Flex
           direction="row"
@@ -129,6 +131,7 @@ export const Callout = ({
         )}
       </Flex>
     </CalloutPrimitive.Root>
+    </Theme>
   )
 }
 

package/src/components/EmptyState/EmptyState.jsx

@@ -3,6 +3,7 @@ import { Button } from '../Button/Button'
 import styles from './EmptyState.module.css'
 import classNames from 'classnames'
 import { Text } from '../Text/Text'
+import { Theme } from '../theme/Theme'
 
 // Emphasis: Low  High
 // Size:  Medium  Large
@@ -21,13 +22,14 @@ export const EmptyState = ({
 }) => {
   const hasButtonContent = children != null || buttonLabel != null
   return (
-    <Flex
-      className={classNames(className)}
-      direction="column"
-      align="center"
-      justify="center"
-      {...props}
-    >
+    <Theme asChild>
+      <Flex
+        className={classNames(className)}
+        direction="column"
+        align="center"
+        justify="center"
+        {...props}
+      >
       <Flex direction="column" align="center" justify="center" className={styles.content} gap="5" py="6">
         {icon && (
           <div className={classNames(styles.iconWrapper, {
@@ -79,6 +81,7 @@ export const EmptyState = ({
 
       </Flex>
     </Flex>
+    </Theme>
   )
 }