From 9dfa30b5e0bb20381757c28dbb296293d43a3f62 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Wed, 26 Jun 2024 12:03:20 -0300
Subject: [PATCH 01/14] feat: adjust alert component

---
 .../ocean-core/src/components/_alert.scss     | 39 ++++++++++++++++++-
 packages/ocean-react/src/Alert/Alert.tsx      |  5 ++-
 .../src/Alert/stories/Alert.stories.mdx       |  1 +
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/ocean-core/src/components/_alert.scss b/packages/ocean-core/src/components/_alert.scss
index 30ec5a3de..d107e5fe6 100644
--- a/packages/ocean-core/src/components/_alert.scss
+++ b/packages/ocean-core/src/components/_alert.scss
@@ -13,11 +13,18 @@
   padding: $spacing-stack-xs;
 
   @include media-breakpoint-up(sm) {
+    flex-direction: row;
+
     &__button--mobile {
       display: none;
     }
   }
 
+  &--with-button {
+    padding: $spacing-stack-xs $spacing-stack-xs $spacing-stack-xxs-extra
+      $spacing-stack-xs;
+  }
+
   &--error {
     background-color: $color-status-negative-up;
 
@@ -33,6 +40,15 @@
       background-color: $color-status-negative-pure;
     }
 
+    .ods-btn--primary:hover,
+    .ods-btn--primary:focus {
+      background-color: $color-status-negative-down;
+    }
+
+    .ods-btn--primary:active {
+      background-color: $color-status-negative-deep;
+    }
+
     .ods-link {
       color: $color-status-negative-pure;
     }
@@ -53,6 +69,15 @@
       background-color: $color-status-warning-deep;
     }
 
+    .ods-btn--primary:hover,
+    .ods-btn--primary:focus {
+      background-color: $color-status-warning-down;
+    }
+
+    .ods-btn--primary:active {
+      background-color: $color-status-warning-deep;
+    }
+
     .ods-link {
       color: $color-status-warning-deep;
     }
@@ -73,6 +98,15 @@
       background-color: $color-status-positive-deep;
     }
 
+    .ods-btn--primary:hover,
+    .ods-btn--primary:focus {
+      background-color: $color-status-positive-down;
+    }
+
+    .ods-btn--primary:active {
+      background-color: $color-status-positive-deep;
+    }
+
     .ods-link {
       color: $color-status-positive-deep;
     }
@@ -82,6 +116,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    gap: 2px;
   }
 
   &__icon {
@@ -96,7 +131,7 @@
     }
 
     &--mobile {
-      margin-top: $spacing-stack-xxs;
+      margin: $spacing-stack-xxs-extra 0 0 $spacing-inline-md;
     }
 
     .ods-btn {
@@ -119,6 +154,6 @@
     color: $color-brand-primary-down;
     font-size: $font-size-xxs;
     font-weight: $font-weight-bold;
-    line-height: $line-height-comfy;
+    line-height: $line-height-loose;
   }
 }
diff --git a/packages/ocean-react/src/Alert/Alert.tsx b/packages/ocean-react/src/Alert/Alert.tsx
index 301cbd79e..cae4b5e55 100644
--- a/packages/ocean-react/src/Alert/Alert.tsx
+++ b/packages/ocean-react/src/Alert/Alert.tsx
@@ -62,12 +62,13 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           'ods-alert',
           `ods-alert--${type}`,
           longSize && 'ods-alert--long',
+          button && 'ods-alert--with-button',
           className
         )}
         {...rest}
       >
         {longSize ? (
-          <>
+          <div>
             <div
               className={classNames(
                 'ods-alert__header',
@@ -82,7 +83,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
               )}
             </div>
             {title && <div className="alert__content">{children}</div>}
-          </>
+          </div>
         ) : (
           <>
             <div
diff --git a/packages/ocean-react/src/Alert/stories/Alert.stories.mdx b/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
index f48896408..f4fbbbd5e 100644
--- a/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
+++ b/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
@@ -143,6 +143,7 @@ You can set the `button` that display on the alert.
 | ---------------------------- | ------------------------------------------------------- |
 | .ods-alert                   | Styles applied to the root element.                     |
 | .ods-alert--long             | Styles applied to the root element when is long size.   |
+| .ods-alert--with-button      | Styles applied to the root element has button.          |
 | .ods-alert--error            | Styles applied to the root element with a error type.   |
 | .ods-alert--warning          | Styles applied to the root element with a warning type. |
 | .ods-alert--success          | Styles applied to the root element with a success type. |

From b6382ab4af29498e7553a85c82a9dc0bb5533d16 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Thu, 27 Jun 2024 14:17:40 -0300
Subject: [PATCH 02/14] chore: change icon link to chevron

---
 packages/ocean-react/src/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ocean-react/src/Alert/Alert.tsx b/packages/ocean-react/src/Alert/Alert.tsx
index cae4b5e55..d3d609587 100644
--- a/packages/ocean-react/src/Alert/Alert.tsx
+++ b/packages/ocean-react/src/Alert/Alert.tsx
@@ -107,7 +107,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
             </div>
             {button && (
               <div className="ods-alert__button--mobile">
-                <Link size="sm" onClick={buttonAction} icon="externalLink">
+                <Link size="sm" onClick={buttonAction} icon="linkChevron">
                   {button}
                 </Link>
               </div>

From 5ed7810927003d5e2b24deb3f4e2f9a076a1001e Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Thu, 27 Jun 2024 14:29:19 -0300
Subject: [PATCH 03/14] test: update snapshot

---
 .../src/Alert/__tests__/Alert.test.tsx        | 122 +++++++++---------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx b/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx
index d274c3c36..9fac52c5b 100644
--- a/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx
+++ b/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx
@@ -66,52 +66,20 @@ describe('Alert', () => {
     setup({ title: 'Test Title', size: 'long' });
 
     expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
-    <div
-      class="ods-alert ods-alert--default ods-alert--long"
-      role="alert"
-    >
       <div
-        class="ods-alert__header ods-alert__header--margin"
+        class="ods-alert ods-alert--default ods-alert--long"
+        role="alert"
       >
-        mock-information-circle-outline
-        <div
-          class="ods-alert__title"
-        >
-          Test Title
-        </div>
-      </div>
-      <div
-        class="alert__content"
-      >
-        <div
-          class="ods-alert__content"
-        >
-          Hello There!
-        </div>
-      </div>
-    </div>
-    `);
-  });
-
-  test('checks short description snapshot', () => {
-    setup({ title: 'Test Title', size: 'short' });
-
-    expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
-    <div
-      class="ods-alert ods-alert--default"
-      role="alert"
-    >
-      <div
-        class="ods-alert__header"
-      >
-        mock-information-circle-outline
-        <div
-          class="ods-alert__text"
-        >
+        <div>
           <div
-            class="ods-alert__title"
+            class="ods-alert__header ods-alert__header--margin"
           >
-            Test Title
+            mock-information-circle-outline
+            <div
+              class="ods-alert__title"
+            >
+              Test Title
+            </div>
           </div>
           <div
             class="alert__content"
@@ -124,37 +92,73 @@ describe('Alert', () => {
           </div>
         </div>
       </div>
-    </div>
     `);
   });
 
+  test('checks short description snapshot', () => {
+    setup({ title: 'Test Title', size: 'short' });
+
+    expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
+          <div
+            class="ods-alert ods-alert--default"
+            role="alert"
+          >
+            <div
+              class="ods-alert__header"
+            >
+              mock-information-circle-outline
+              <div
+                class="ods-alert__text"
+              >
+                <div
+                  class="ods-alert__title"
+                >
+                  Test Title
+                </div>
+                <div
+                  class="alert__content"
+                >
+                  <div
+                    class="ods-alert__content"
+                  >
+                    Hello There!
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        `);
+  });
+
   test('checks custom icon', () => {
     setup({ icon: <StarOutline /> });
 
     expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
-    <div
-      class="ods-alert ods-alert--default ods-alert--long"
-      role="alert"
-    >
       <div
-        class="ods-alert__header"
+        class="ods-alert ods-alert--default ods-alert--long"
+        role="alert"
       >
-        <div
-          class="ods-alert__icon"
-        >
-          mock-start-circle-outline
-        </div>
-        <div
-          class="alert__content"
-        >
+        <div>
           <div
-            class="ods-alert__content"
+            class="ods-alert__header"
           >
-            Hello There!
+            <div
+              class="ods-alert__icon"
+            >
+              mock-start-circle-outline
+            </div>
+            <div
+              class="alert__content"
+            >
+              <div
+                class="ods-alert__content"
+              >
+                Hello There!
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
     `);
   });
 });

From d538b5cf53d8586a6f395cefbe43bcc4ae001fd8 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Fri, 28 Jun 2024 15:47:55 -0300
Subject: [PATCH 04/14] chore: update alert text size and gap

---
 packages/ocean-core/src/components/_alert.scss | 18 ++++++++++++++----
 packages/ocean-react/src/Alert/Alert.tsx       |  9 ++++++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/ocean-core/src/components/_alert.scss b/packages/ocean-core/src/components/_alert.scss
index d107e5fe6..7adb7bac6 100644
--- a/packages/ocean-core/src/components/_alert.scss
+++ b/packages/ocean-core/src/components/_alert.scss
@@ -1,13 +1,13 @@
 .ods-alert {
   align-items: flex-start;
   background-color: $color-interface-light-up;
-  border-radius: $border-radius-md;
+  border-radius: $border-radius-sm;
   color: $color-interface-dark-down;
   display: flex;
   flex-direction: column;
   font-family: $font-family-base;
   font-size: $font-size-xxxs;
-  font-weight: $font-weight-regular;
+  font-weight: $font-weight-medium;
   justify-content: center;
   line-height: $line-height-comfy;
   padding: $spacing-stack-xs;
@@ -23,6 +23,10 @@
   &--with-button {
     padding: $spacing-stack-xs $spacing-stack-xs $spacing-stack-xxs-extra
       $spacing-stack-xs;
+
+    &__no-title {
+      font-size: $font-size-xxs;
+    }
   }
 
   &--error {
@@ -116,7 +120,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    gap: 2px;
+    gap: $spacing-stack-xxxs;
   }
 
   &__icon {
@@ -153,7 +157,13 @@
   &__title {
     color: $color-brand-primary-down;
     font-size: $font-size-xxs;
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-extrabold;
     line-height: $line-height-loose;
   }
+
+  &__content {
+    &--no-title {
+      padding-top: 0;
+    }
+  }
 }
diff --git a/packages/ocean-react/src/Alert/Alert.tsx b/packages/ocean-react/src/Alert/Alert.tsx
index d3d609587..6c03e608b 100644
--- a/packages/ocean-react/src/Alert/Alert.tsx
+++ b/packages/ocean-react/src/Alert/Alert.tsx
@@ -63,6 +63,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           `ods-alert--${type}`,
           longSize && 'ods-alert--long',
           button && 'ods-alert--with-button',
+          button && !title && 'ods-alert--with-button__no-title',
           className
         )}
         {...rest}
@@ -95,7 +96,13 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
               {alertIcon}
               <div className="ods-alert__text">
                 {title && <div className="ods-alert__title">{title}</div>}
-                <div className="alert__content">{children}</div>
+                <div
+                  className={classNames('alert__content', {
+                    'alert__content--no-title': !title,
+                  })}
+                >
+                  {children}
+                </div>
               </div>
               {button && (
                 <div className="ods-alert__button">

From a8d2157e8d0582fe976b5e7bae2477c7fbc1a9b5 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Fri, 28 Jun 2024 15:51:43 -0300
Subject: [PATCH 05/14] chore: update ocean icons version

---
 packages/ocean-react/package.json | 2 +-
 yarn.lock                         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ocean-react/package.json b/packages/ocean-react/package.json
index 59d18c1bf..571ff44e7 100644
--- a/packages/ocean-react/package.json
+++ b/packages/ocean-react/package.json
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@reach/auto-id": "0.16.0",
-    "@useblu/ocean-icons-react": "1.4.0",
+    "@useblu/ocean-icons-react": "1.23.1",
     "chart.js": "^3.9.1",
     "classnames": "2.3.1",
     "date-fns": "^2.29.1",
diff --git a/yarn.lock b/yarn.lock
index 973eca5f8..fc370148c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4486,10 +4486,10 @@
     "@typescript-eslint/types" "5.14.0"
     eslint-visitor-keys "^3.0.0"
 
-"@useblu/ocean-icons-react@1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@useblu/ocean-icons-react/-/ocean-icons-react-1.4.0.tgz#dab6b0fb82013759a8aa10224aee9dd563be6162"
-  integrity sha512-EG2ugojIyVUW3Njyyp4jE5o4RV3DArmz2PKACMWnKiaX/ZYCpveF9snyolNuNRnQ9zjn0NAMctkzhtq1NM6ojA==
+"@useblu/ocean-icons-react@1.23.1":
+  version "1.23.1"
+  resolved "https://registry.yarnpkg.com/@useblu/ocean-icons-react/-/ocean-icons-react-1.23.1.tgz#f893fe6a84ac1eec091424b81963108fba724adb"
+  integrity sha512-ZEJqimv8bXpx22CNGCGvu3SDLYnvXRi4CTlhvfA5Hx5jGGS3c5lA9r7exEE2cCQ5YVmrq5aShAO2zy+c11nc9w==
 
 "@useblu/ocean-tokens@3.8.0":
   version "3.8.0"

From 55ce6d5b414b055db2bdce2b73365795dd4550fd Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Fri, 28 Jun 2024 15:58:07 -0300
Subject: [PATCH 06/14] test: update snapshot

---
 .../Accordion/__tests__/Accordion.test.tsx    |  4 +-
 .../Breadcrumb/__tests__/Breadcrumb.test.tsx  |  4 +-
 .../CrossSellCard/__tests__/CrossSellCard.tsx |  4 +-
 .../src/Date/__tests__/DatePicker.test.tsx    |  2 +-
 .../src/Date/__tests__/DateRange.test.tsx     |  4 +-
 .../__tests__/FormControl.test.tsx            |  2 +-
 .../src/Search/__tests__/Search.test.tsx      |  2 +-
 .../src/Select/__tests__/Select.test.tsx      |  2 +-
 .../src/Snackbar/__tests__/Snackbar.test.tsx  |  2 +-
 .../src/TopBar/__tests__/TopBar.test.tsx      | 68 +++++++++----------
 .../HTMLDivElement.test.tsx.snap              |  6 +-
 11 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
index b2e12e207..f42b4a758 100644
--- a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
+++ b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
@@ -35,7 +35,7 @@ test('renders element properly', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
             fill-rule="evenodd"
           />
         </svg>
@@ -81,7 +81,7 @@ test('render element opened', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
index b0bbec7bf..1cd268575 100644
--- a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -41,7 +41,7 @@ test('renders breadcrumb with array elements', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
             fill-rule="evenodd"
           />
         </svg>
@@ -83,7 +83,7 @@ test('renders breadcrumb with array string', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
index 3ec02c4a8..08297fdba 100644
--- a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
+++ b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
@@ -65,7 +65,7 @@ test('renders element properly', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
               fill-rule="evenodd"
             />
           </svg>
@@ -151,7 +151,7 @@ test('renders component with custom icon', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+              d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
index 7253750b5..e7a4422d7 100644
--- a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
@@ -74,7 +74,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
index 8b6c3b830..435bf2953 100644
--- a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
@@ -87,7 +87,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
@@ -140,7 +140,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
index c24130ff9..a1c384de1 100644
--- a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
+++ b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
@@ -90,7 +90,7 @@ test('renders a Hello World tooltip', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+              d="M17.391 6.939a7.999 7.999 0 1 1-14.78 6.122 7.999 7.999 0 0 1 14.78-6.122zM11 13.333a1 1 0 1 1-2 0V10a1 1 0 0 1 2 0v3.333zm-1-5.666a1 1 0 1 1 0-2h.008a1 1 0 1 1 0 2H10z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Search/__tests__/Search.test.tsx b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
index 90fc0dea6..29bb03bc7 100644
--- a/packages/ocean-react/src/Search/__tests__/Search.test.tsx
+++ b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
@@ -30,7 +30,7 @@ test('renders element properly', () => {
             >
               <path
                 clip-rule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM2 8a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 2 8z"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/ocean-react/src/Select/__tests__/Select.test.tsx b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
index f355ab14d..252783d97 100644
--- a/packages/ocean-react/src/Select/__tests__/Select.test.tsx
+++ b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
@@ -106,7 +106,7 @@ test('renders element properly', () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M19 9l-7 7-7-7"
+                  d="m19 9-7 7-7-7"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="2"
diff --git a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
index 8518107e1..c15d89b38 100644
--- a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
+++ b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
@@ -32,7 +32,7 @@ test('renders element properly', () => {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 10-18 0 9 9 0 0018 0z"
+              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 1 0-18 0 9 9 0 0 0 18 0z"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
diff --git a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
index e3d3f908b..0dad97fc2 100644
--- a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
+++ b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
@@ -17,44 +17,44 @@ test('renders element properly', () => {
   );
 
   expect(container.firstChild).toMatchInlineSnapshot(`
-<div
-  class="ods-topbar ods-topbar-extend ods-topbar-default"
->
-  <div
-    class="ods-topbar-actions"
-  >
     <div
-      class="ods-topbar-left"
+      class="ods-topbar ods-topbar-extend ods-topbar-default"
     >
-      <span>
-        <svg
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="ods-topbar-actions"
+      >
+        <div
+          class="ods-topbar-left"
         >
-          <path
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
-        </svg>
-      </span>
+          <span>
+            <svg
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m10 19-7-7m0 0 7-7m-7 7h18"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+      <div
+        class="ods-topbar-title"
+      >
+        Title
+        <span>
+          Description
+        </span>
+      </div>
     </div>
-  </div>
-  <div
-    class="ods-topbar-title"
-  >
-    Title
-    <span>
-      Description
-    </span>
-  </div>
-</div>
-`);
+  `);
 });
 test('should render the buttons and Click', () => {
   const { container } = render(
diff --git a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
index 4fca4a5a2..0bde71dcd 100644
--- a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
+++ b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`renders default element properly:
     >
       <path
         clip-rule="evenodd"
-        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
         fill-rule="evenodd"
       />
     </svg>
@@ -167,7 +167,7 @@ exports[`renders outline element properly with all possible information:
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      d="M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
@@ -263,7 +263,7 @@ exports[`renders solid element properly with all possible information:
   >
     <path
       clip-rule="evenodd"
-      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+      d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1z"
       fill-rule="evenodd"
     />
   </svg>

From ad28aaf21542aac9899354ef52b1d7f10967733f Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Fri, 28 Jun 2024 16:20:56 -0300
Subject: [PATCH 07/14] test: update breadcrumbs test

---
 .../Breadcrumb/__tests__/Breadcrumb.test.tsx  | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
index 1cd268575..4e08ca9f8 100644
--- a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -94,3 +94,50 @@ test('renders breadcrumb with array string', () => {
     </div>
   `);
 });
+
+test('renders mobile breadcrumb with array string', () => {
+  window.matchMedia = jest.fn().mockImplementation((query) => ({
+    matches: query === '(max-width: 576px)',
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    isMobile: query === '(max-width: 576px)',
+  }));
+
+  render(
+    <Breadcrumb
+      data-testid="breadcrumb-test"
+      className="custom-class"
+      key="test23"
+      items={['item 1', 'item 2', 'item 3']}
+    />
+  );
+
+  expect(screen.getByTestId('breadcrumb-test')).toMatchInlineSnapshot(`
+    <div
+      class="ods-breadcrumb custom-class"
+      data-testid="breadcrumb-test"
+    >
+      <button
+        class="ods-breadcrumb__item"
+        type="button"
+      >
+        <svg
+          fill="currentColor"
+          height="12"
+          viewBox="0 0 20 20"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
+            fill-rule="evenodd"
+          />
+        </svg>
+        <span>
+          item 3
+        </span>
+      </button>
+    </div>
+  `);
+});

From 3d8bd63a4a5d8525636a17cd2e6b17b7c5578df7 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Mon, 1 Jul 2024 11:18:31 -0300
Subject: [PATCH 08/14] chore: update snapshot

---
 packages/ocean-core/src/components/_alert.scss              | 3 ---
 .../ocean-react/src/Accordion/__tests__/Accordion.test.tsx  | 4 ++--
 .../src/Breadcrumb/__tests__/Breadcrumb.test.tsx            | 6 +++---
 .../src/CrossSellCard/__tests__/CrossSellCard.tsx           | 4 ++--
 packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx | 2 +-
 packages/ocean-react/src/Date/__tests__/DateRange.test.tsx  | 4 ++--
 .../src/FormControl/__tests__/FormControl.test.tsx          | 2 +-
 packages/ocean-react/src/Search/__tests__/Search.test.tsx   | 2 +-
 packages/ocean-react/src/Select/__tests__/Select.test.tsx   | 2 +-
 .../ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx    | 2 +-
 packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx   | 2 +-
 .../__tests__/__snapshots__/HTMLDivElement.test.tsx.snap    | 6 +++---
 12 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/ocean-core/src/components/_alert.scss b/packages/ocean-core/src/components/_alert.scss
index 7adb7bac6..fdefd3c46 100644
--- a/packages/ocean-core/src/components/_alert.scss
+++ b/packages/ocean-core/src/components/_alert.scss
@@ -21,9 +21,6 @@
   }
 
   &--with-button {
-    padding: $spacing-stack-xs $spacing-stack-xs $spacing-stack-xxs-extra
-      $spacing-stack-xs;
-
     &__no-title {
       font-size: $font-size-xxs;
     }
diff --git a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
index f42b4a758..b2e12e207 100644
--- a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
+++ b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
@@ -35,7 +35,7 @@ test('renders element properly', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
             fill-rule="evenodd"
           />
         </svg>
@@ -81,7 +81,7 @@ test('render element opened', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
index 4e08ca9f8..e644a716e 100644
--- a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -41,7 +41,7 @@ test('renders breadcrumb with array elements', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
+            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
             fill-rule="evenodd"
           />
         </svg>
@@ -83,7 +83,7 @@ test('renders breadcrumb with array string', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
+            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
             fill-rule="evenodd"
           />
         </svg>
@@ -130,7 +130,7 @@ test('renders mobile breadcrumb with array string', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
+            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
index 08297fdba..3ec02c4a8 100644
--- a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
+++ b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
@@ -65,7 +65,7 @@ test('renders element properly', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
               fill-rule="evenodd"
             />
           </svg>
@@ -151,7 +151,7 @@ test('renders component with custom icon', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
+              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
index e7a4422d7..7253750b5 100644
--- a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
@@ -74,7 +74,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
index 435bf2953..8b6c3b830 100644
--- a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
@@ -87,7 +87,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
@@ -140,7 +140,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
index a1c384de1..c24130ff9 100644
--- a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
+++ b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
@@ -90,7 +90,7 @@ test('renders a Hello World tooltip', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M17.391 6.939a7.999 7.999 0 1 1-14.78 6.122 7.999 7.999 0 0 1 14.78-6.122zM11 13.333a1 1 0 1 1-2 0V10a1 1 0 0 1 2 0v3.333zm-1-5.666a1 1 0 1 1 0-2h.008a1 1 0 1 1 0 2H10z"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Search/__tests__/Search.test.tsx b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
index 29bb03bc7..90fc0dea6 100644
--- a/packages/ocean-react/src/Search/__tests__/Search.test.tsx
+++ b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
@@ -30,7 +30,7 @@ test('renders element properly', () => {
             >
               <path
                 clip-rule="evenodd"
-                d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM2 8a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 2 8z"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/ocean-react/src/Select/__tests__/Select.test.tsx b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
index 252783d97..f355ab14d 100644
--- a/packages/ocean-react/src/Select/__tests__/Select.test.tsx
+++ b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
@@ -106,7 +106,7 @@ test('renders element properly', () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="m19 9-7 7-7-7"
+                  d="M19 9l-7 7-7-7"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="2"
diff --git a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
index c15d89b38..8518107e1 100644
--- a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
+++ b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
@@ -32,7 +32,7 @@ test('renders element properly', () => {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 1 0-18 0 9 9 0 0 0 18 0z"
+              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 10-18 0 9 9 0 0018 0z"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
diff --git a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
index 0dad97fc2..d97a55803 100644
--- a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
+++ b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
@@ -36,7 +36,7 @@ test('renders element properly', () => {
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="m10 19-7-7m0 0 7-7m-7 7h18"
+                d="M10 19l-7-7m0 0l7-7m-7 7h18"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-width="2"
diff --git a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
index 0bde71dcd..4fca4a5a2 100644
--- a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
+++ b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`renders default element properly:
     >
       <path
         clip-rule="evenodd"
-        d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
+        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
         fill-rule="evenodd"
       />
     </svg>
@@ -167,7 +167,7 @@ exports[`renders outline element properly with all possible information:
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
+      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
@@ -263,7 +263,7 @@ exports[`renders solid element properly with all possible information:
   >
     <path
       clip-rule="evenodd"
-      d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1z"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
       fill-rule="evenodd"
     />
   </svg>

From ba0174c057d9b7b5a3f7f573862c831f8e79e942 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Mon, 1 Jul 2024 11:32:28 -0300
Subject: [PATCH 09/14] chore: update snapshot

---
 .../ocean-react/src/Accordion/__tests__/Accordion.test.tsx  | 4 ++--
 .../src/Breadcrumb/__tests__/Breadcrumb.test.tsx            | 6 +++---
 .../src/CrossSellCard/__tests__/CrossSellCard.tsx           | 4 ++--
 packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx | 2 +-
 packages/ocean-react/src/Date/__tests__/DateRange.test.tsx  | 4 ++--
 .../src/FormControl/__tests__/FormControl.test.tsx          | 2 +-
 packages/ocean-react/src/Search/__tests__/Search.test.tsx   | 2 +-
 packages/ocean-react/src/Select/__tests__/Select.test.tsx   | 2 +-
 .../ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx    | 2 +-
 packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx   | 2 +-
 .../__tests__/__snapshots__/HTMLDivElement.test.tsx.snap    | 6 +++---
 11 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
index b2e12e207..f42b4a758 100644
--- a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
+++ b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
@@ -35,7 +35,7 @@ test('renders element properly', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
             fill-rule="evenodd"
           />
         </svg>
@@ -81,7 +81,7 @@ test('render element opened', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
index e644a716e..4e08ca9f8 100644
--- a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -41,7 +41,7 @@ test('renders breadcrumb with array elements', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
             fill-rule="evenodd"
           />
         </svg>
@@ -83,7 +83,7 @@ test('renders breadcrumb with array string', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
             fill-rule="evenodd"
           />
         </svg>
@@ -130,7 +130,7 @@ test('renders mobile breadcrumb with array string', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
index 3ec02c4a8..08297fdba 100644
--- a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
+++ b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
@@ -65,7 +65,7 @@ test('renders element properly', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
               fill-rule="evenodd"
             />
           </svg>
@@ -151,7 +151,7 @@ test('renders component with custom icon', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+              d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
index 7253750b5..e7a4422d7 100644
--- a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
@@ -74,7 +74,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
index 8b6c3b830..435bf2953 100644
--- a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
@@ -87,7 +87,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
@@ -140,7 +140,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
index c24130ff9..a1c384de1 100644
--- a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
+++ b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
@@ -90,7 +90,7 @@ test('renders a Hello World tooltip', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+              d="M17.391 6.939a7.999 7.999 0 1 1-14.78 6.122 7.999 7.999 0 0 1 14.78-6.122zM11 13.333a1 1 0 1 1-2 0V10a1 1 0 0 1 2 0v3.333zm-1-5.666a1 1 0 1 1 0-2h.008a1 1 0 1 1 0 2H10z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Search/__tests__/Search.test.tsx b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
index 90fc0dea6..29bb03bc7 100644
--- a/packages/ocean-react/src/Search/__tests__/Search.test.tsx
+++ b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
@@ -30,7 +30,7 @@ test('renders element properly', () => {
             >
               <path
                 clip-rule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM2 8a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 2 8z"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/ocean-react/src/Select/__tests__/Select.test.tsx b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
index f355ab14d..252783d97 100644
--- a/packages/ocean-react/src/Select/__tests__/Select.test.tsx
+++ b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
@@ -106,7 +106,7 @@ test('renders element properly', () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M19 9l-7 7-7-7"
+                  d="m19 9-7 7-7-7"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="2"
diff --git a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
index 8518107e1..c15d89b38 100644
--- a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
+++ b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
@@ -32,7 +32,7 @@ test('renders element properly', () => {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 10-18 0 9 9 0 0018 0z"
+              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 1 0-18 0 9 9 0 0 0 18 0z"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
diff --git a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
index d97a55803..0dad97fc2 100644
--- a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
+++ b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
@@ -36,7 +36,7 @@ test('renders element properly', () => {
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10 19l-7-7m0 0l7-7m-7 7h18"
+                d="m10 19-7-7m0 0 7-7m-7 7h18"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-width="2"
diff --git a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
index 4fca4a5a2..0bde71dcd 100644
--- a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
+++ b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`renders default element properly:
     >
       <path
         clip-rule="evenodd"
-        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
         fill-rule="evenodd"
       />
     </svg>
@@ -167,7 +167,7 @@ exports[`renders outline element properly with all possible information:
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      d="M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
@@ -263,7 +263,7 @@ exports[`renders solid element properly with all possible information:
   >
     <path
       clip-rule="evenodd"
-      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+      d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1z"
       fill-rule="evenodd"
     />
   </svg>

From 3ea981e1e2f65f57aa2ec3d9e3706cdd5b736b5e Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Mon, 1 Jul 2024 14:28:15 -0300
Subject: [PATCH 10/14] style: update alert caption font weight

---
 packages/ocean-core/src/components/_alert.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ocean-core/src/components/_alert.scss b/packages/ocean-core/src/components/_alert.scss
index fdefd3c46..75ce7caa7 100644
--- a/packages/ocean-core/src/components/_alert.scss
+++ b/packages/ocean-core/src/components/_alert.scss
@@ -7,7 +7,7 @@
   flex-direction: column;
   font-family: $font-family-base;
   font-size: $font-size-xxxs;
-  font-weight: $font-weight-medium;
+  font-weight: $font-weight-regular;
   justify-content: center;
   line-height: $line-height-comfy;
   padding: $spacing-stack-xs;

From 09d3bfd6547db2ff1464f0b56d0999050f1470c3 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Mon, 1 Jul 2024 14:55:01 -0300
Subject: [PATCH 11/14] feat: update button alert caption

---
 packages/ocean-core/src/components/_alert.scss | 4 ++--
 packages/ocean-react/src/Alert/Alert.tsx       | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/ocean-core/src/components/_alert.scss b/packages/ocean-core/src/components/_alert.scss
index 75ce7caa7..d8837d09f 100644
--- a/packages/ocean-core/src/components/_alert.scss
+++ b/packages/ocean-core/src/components/_alert.scss
@@ -20,8 +20,8 @@
     }
   }
 
-  &--with-button {
-    &__no-title {
+  &--with-button-no-title {
+    @include media-breakpoint-up(sm) {
       font-size: $font-size-xxs;
     }
   }
diff --git a/packages/ocean-react/src/Alert/Alert.tsx b/packages/ocean-react/src/Alert/Alert.tsx
index 6c03e608b..5d64e5437 100644
--- a/packages/ocean-react/src/Alert/Alert.tsx
+++ b/packages/ocean-react/src/Alert/Alert.tsx
@@ -62,8 +62,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           'ods-alert',
           `ods-alert--${type}`,
           longSize && 'ods-alert--long',
-          button && 'ods-alert--with-button',
-          button && !title && 'ods-alert--with-button__no-title',
+          button && !title && 'ods-alert--with-button-no-title',
           className
         )}
         {...rest}

From 87dbba614b1a57a0eeca371cb1f2e2fcab3a0eda Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Mon, 1 Jul 2024 16:26:40 -0300
Subject: [PATCH 12/14] chore: update alert documentation

---
 .../src/Alert/stories/Alert.stories.mdx       | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/ocean-react/src/Alert/stories/Alert.stories.mdx b/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
index f4fbbbd5e..d84dd9f2c 100644
--- a/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
+++ b/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
@@ -139,21 +139,21 @@ You can set the `button` that display on the alert.
 
 ## CSS
 
-| Global class                 | Description                                             |
-| ---------------------------- | ------------------------------------------------------- |
-| .ods-alert                   | Styles applied to the root element.                     |
-| .ods-alert--long             | Styles applied to the root element when is long size.   |
-| .ods-alert--with-button      | Styles applied to the root element has button.          |
-| .ods-alert--error            | Styles applied to the root element with a error type.   |
-| .ods-alert--warning          | Styles applied to the root element with a warning type. |
-| .ods-alert--success          | Styles applied to the root element with a success type. |
-| .ods-alert\_\_header         | Styles applied to the header element.                   |
-| .ods-alert\_\_header--margin | Styles applied to the header element with bottom margin |
-| .ods-alert\_\_icon           | Styles applied to the icon element.                     |
-| .ods-alert\_\_title          | Styles applied to the title element.                    |
-| .ods-alert\_\_content        | Styles applied to the content element.                  |
-| .ods-alert\_\_button         | Styles applied to the button element.                   |
-| .ods-alert\_\_button--mobile | Styles applied to the button element in mobile view.    |
+| Global class                     | Description                                                      |
+| -------------------------------- | ---------------------------------------------------------------- |
+| .ods-alert                       | Styles applied to the root element.                              |
+| .ods-alert--long                 | Styles applied to the root element when is long size.            |
+| .ods-alert--with-button-no-title | Styles applied to the root element has button and without title. |
+| .ods-alert--error                | Styles applied to the root element with a error type.            |
+| .ods-alert--warning              | Styles applied to the root element with a warning type.          |
+| .ods-alert--success              | Styles applied to the root element with a success type.          |
+| .ods-alert\_\_header             | Styles applied to the header element.                            |
+| .ods-alert\_\_header--margin     | Styles applied to the header element with bottom margin          |
+| .ods-alert\_\_icon               | Styles applied to the icon element.                              |
+| .ods-alert\_\_title              | Styles applied to the title element.                             |
+| .ods-alert\_\_content            | Styles applied to the content element.                           |
+| .ods-alert\_\_button             | Styles applied to the button element.                            |
+| .ods-alert\_\_button--mobile     | Styles applied to the button element in mobile view.             |
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Alert/Alert.tsx) for more detail.
 

From 76ed6b9c2409d617530dd503bdb228bc35095205 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Tue, 2 Jul 2024 09:06:33 -0300
Subject: [PATCH 13/14] chore: update responsive link hover color in alert
 variants

---
 packages/ocean-core/src/components/_alert.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/ocean-core/src/components/_alert.scss b/packages/ocean-core/src/components/_alert.scss
index d8837d09f..4953a0a86 100644
--- a/packages/ocean-core/src/components/_alert.scss
+++ b/packages/ocean-core/src/components/_alert.scss
@@ -53,6 +53,11 @@
     .ods-link {
       color: $color-status-negative-pure;
     }
+
+    .ods-link:hover,
+    .ods-link:focus {
+      color: $color-status-negative-down;
+    }
   }
 
   &--warning {
@@ -82,6 +87,11 @@
     .ods-link {
       color: $color-status-warning-deep;
     }
+
+    .ods-link:hover,
+    .ods-link:focus {
+      color: $color-status-warning-down;
+    }
   }
 
   &--success {
@@ -111,6 +121,11 @@
     .ods-link {
       color: $color-status-positive-deep;
     }
+
+    .ods-link:hover,
+    .ods-link:focus {
+      color: $color-status-positive-down;
+    }
   }
 
   &__text {

From 64c3ee9a6aca99bda80d6e7898c50c1e7de2b094 Mon Sep 17 00:00:00 2001
From: Daniela Muller <danielamuller20@gmail.com>
Date: Tue, 2 Jul 2024 10:12:10 -0300
Subject: [PATCH 14/14] feat: update link size in alert component

---
 packages/ocean-react/src/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ocean-react/src/Alert/Alert.tsx b/packages/ocean-react/src/Alert/Alert.tsx
index 5d64e5437..5315465bd 100644
--- a/packages/ocean-react/src/Alert/Alert.tsx
+++ b/packages/ocean-react/src/Alert/Alert.tsx
@@ -113,7 +113,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
             </div>
             {button && (
               <div className="ods-alert__button--mobile">
-                <Link size="sm" onClick={buttonAction} icon="linkChevron">
+                <Link size="tiny" onClick={buttonAction} icon="linkChevron">
                   {button}
                 </Link>
               </div>