@moises.ai/design-system 3.9.15 → 3.9.16

package/package.json

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

package/src/components/BannerAnnouncement/BannerAnnouncement.module.css

@@ -23,7 +23,12 @@
   position: absolute;
   top: 4px;
   right: 4px;
-  
+
+
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  background: #11111366 !important;  
 }
 
 .children {

package/src/components/BannerAnnouncement/BannerAnnouncement.stories.jsx

@@ -27,23 +27,25 @@ const withFlexContainer = (Story) => (
 
 export const FeatureAnnouncement = {
   render: (args) => (
-    <BannerAnnouncement {...args}>
-      <Flex direction="column" gap="2">
-        <Heading size="3" weight="bold">
-          Moises AI Studio
-        </Heading>
-        <Text size="2">
-          Step into the future of music creation. Record, separate, generate,
-          convert voice, mix, and master with our all-in-one essential AI tool
-          for musicians.
-        </Text>
-      </Flex>
-    </BannerAnnouncement>
+    <Flex justify="center" align="center" style={{ padding: '40px', marginTop: '100px' }}>
+      <BannerAnnouncement {...args}>
+        <Flex direction="column" gap="2">
+          <Heading size="3" weight="bold">
+            Moises AI Studio
+          </Heading>
+          <Text size="2">
+            Step into the future of music creation. Record, separate, generate,
+            convert voice, mix, and master with our all-in-one essential AI tool
+            for musicians.
+          </Text>
+        </Flex>
+      </BannerAnnouncement>
+    </Flex>
   ),
   args: {
     badge: { label: 'New', color: 'green' },
     image:
-      'https://storage.googleapis.com/moises-cms/1_day_discount_banner_2d5990f994/1_day_discount_banner_2d5990f994.png',
+      'https://storage.googleapis.com/moises-cms/image_3x_f0971a1e8e/image_3x_f0971a1e8e.png',
     link: 'https://www.google.com',
     buttonText: 'Learn More',
     buttonColor: 'gray',
@@ -92,21 +94,23 @@ export const DayOne = {
     }, [])
 
     return (
-      <BannerAnnouncement {...args}>
-        <Flex direction="column" gap="3">
-          <Text size="2">Up to 30% off any individual plan for the next:</Text>
-          <Countdown
-            show={true}
-            days={timeLeft.days}
-            hours={timeLeft.hours}
-            minutes={timeLeft.minutes}
-            seconds={timeLeft.seconds}
-            theme="default"
-            variant="lg"
-            showDays={false}
-          />
-        </Flex>
-      </BannerAnnouncement>
+      <Flex justify="center" align="center" style={{ padding: '40px', marginTop: '100px' }}>
+        <BannerAnnouncement {...args}>
+          <Flex direction="column" gap="3">
+            <Text size="2">Up to 30% off any individual plan for the next:</Text>
+            <Countdown
+              show={true}
+              days={timeLeft.days}
+              hours={timeLeft.hours}
+              minutes={timeLeft.minutes}
+              seconds={timeLeft.seconds}
+              theme="default"
+              variant="lg"
+              showDays={false}
+            />
+          </Flex>
+        </BannerAnnouncement>
+      </Flex>
     )
   },
   args: {