diff --git a/packages/react/package.json b/packages/react/package.json
index 97f358eb6a..f5d5326886 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -2,7 +2,7 @@
   "name": "@naturacosmeticos/natds-react",
   "displayName": "NatDS-React",
   "description": "A collection of components from Natura Design System for React",
-  "version": "2.54.0",
+  "version": "2.55.0-alpha.DSY-3779.1.0",
   "private": false,
   "keywords": [
     "design-system",
diff --git a/packages/react/src/components/AccordionGroup/AccordionGroup.stories.tsx b/packages/react/src/components/AccordionGroup/AccordionGroup.stories.tsx
index f9dd794080..ce97f06ad8 100644
--- a/packages/react/src/components/AccordionGroup/AccordionGroup.stories.tsx
+++ b/packages/react/src/components/AccordionGroup/AccordionGroup.stories.tsx
@@ -5,13 +5,15 @@ import StoryContainer from '../../helpers/StoryContainer'
 import { AccordionGroup, AccordionGroupProps } from '.'
 
 const componentStatus = `
-- - -
+> AccordionGroup allows groups of several accordion components, allowing collective management and control of multiple expandable panels..
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property         | Values             |    Status           |
+|---               |                 ---|                  ---|
+| **variant**      | standard           | ✅ Available        |
 
-  - ✅ Standard
 
-- - -
+## Technical Usages Examples
 `
 
 const Item = () => {
diff --git a/packages/react/src/components/AccordionGroup/AccordionGroup.tsx b/packages/react/src/components/AccordionGroup/AccordionGroup.tsx
index a9d2b69f12..f7e2c91cdc 100644
--- a/packages/react/src/components/AccordionGroup/AccordionGroup.tsx
+++ b/packages/react/src/components/AccordionGroup/AccordionGroup.tsx
@@ -12,7 +12,7 @@ const AccordionGroup = React.forwardRef<HTMLDivElement, AccordionGroupProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} AccordionGroup-gaya`}
         ref={ref}
         {...rest}
       >
diff --git a/packages/react/src/components/AccordionGroup/__snapshots__/AccordionGroup.test.tsx.snap b/packages/react/src/components/AccordionGroup/__snapshots__/AccordionGroup.test.tsx.snap
index b3824a7524..cf9b1fa114 100644
--- a/packages/react/src/components/AccordionGroup/__snapshots__/AccordionGroup.test.tsx.snap
+++ b/packages/react/src/components/AccordionGroup/__snapshots__/AccordionGroup.test.tsx.snap
@@ -9,7 +9,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1"
+      class=" wrapper-0-2-1 AccordionGroup-gaya"
     />
   </div>,
 ]
diff --git a/packages/react/src/components/AccordionItem/AccordionItem.stories.tsx b/packages/react/src/components/AccordionItem/AccordionItem.stories.tsx
index 2898347435..2b62f11193 100644
--- a/packages/react/src/components/AccordionItem/AccordionItem.stories.tsx
+++ b/packages/react/src/components/AccordionItem/AccordionItem.stories.tsx
@@ -5,23 +5,22 @@ import StoryContainer from '../../helpers/StoryContainer'
 import { AccordionItem, AccordionItemProps } from '.'
 
 const componentStatus = `
-- - -
-
-**NOTE FOR UXs**: This component is available in the following variants:
-
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-    - ✅ Title
-    - ✅ Legend
-    - ✅ Color
-    - ✅ IsActive
-    - ✅ IsDisabled
-    - ✅ OnClick
-    
-- - -
+> AccordionItem representing an individual item that can be expanded or collapsed in response to user interaction.
+
+## Properties
+| Property         | Values                |    Status           |
+|---               |                    ---|                  ---|
+| **variant**      | standard              | ✅ Available        |
+| **title**        | string                | ✅ Available        |
+| **legend**       | string                | ✅ Available        |
+| **color**        | regular, primary'     | ✅ Available        |
+| **isActive**     | true/false            | ✅ Available        |
+| **isDisabled**   | true/false            | ✅ Available        |
+| **onClick**      | function              | ✅ Available        |
+| **brand**        | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo              | ✅ Available        |
+
+
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/AccordionItem/AccordionItem.tsx b/packages/react/src/components/AccordionItem/AccordionItem.tsx
index eb379c867f..70399ff04f 100644
--- a/packages/react/src/components/AccordionItem/AccordionItem.tsx
+++ b/packages/react/src/components/AccordionItem/AccordionItem.tsx
@@ -34,7 +34,7 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} AccordionItem-gaya`}
         ref={ref}
         {...rest}
       >
diff --git a/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap b/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap
index 717503d1ae..5839844a8e 100644
--- a/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap
+++ b/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap
@@ -77,7 +77,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1 wrapper-d0-0-2-5"
+      class=" wrapper-0-2-1 wrapper-d0-0-2-5 AccordionItem-gaya"
     >
       <div
         class="header-0-2-2 header-d1-0-2-6"
@@ -86,7 +86,7 @@ Array [
           Lorem
           <i
             aria-hidden="true"
-            class=" icon-0-2-8 icon-d0-0-2-9 natds-icons natds-icons-outlined-navigation-arrowbottom"
+            class=" icon-0-2-8 icon-d0-0-2-9 natds-icons natds-icons-outlined-navigation-arrowbottom Icon-gaya"
             data-testid="icon-outlined-navigation-arrowbottom"
             role="img"
           />
diff --git a/packages/react/src/components/Alert/Alert.stories.tsx b/packages/react/src/components/Alert/Alert.stories.tsx
index eb19c66413..09eb995cb7 100644
--- a/packages/react/src/components/Alert/Alert.stories.tsx
+++ b/packages/react/src/components/Alert/Alert.stories.tsx
@@ -3,26 +3,25 @@ import { Story, Meta } from '@storybook/react'
 import { Alert, AlertProps } from '.'
 
 const componentStatus = `
-- - -
+> Alert allows you to display notification or warning messages on the user interface
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                 |    Status           |
+|---                            |                                     ---|                  ---|
+| **variant**                   | standard                               | ✅ Available        |
+| **type**                      | contained, outlined                    | ✅ Available        |
+| **color**                     | info, success, error, warning, custom  | ✅ Available        |
+| **title**                     | string                                 | ✅ Available        |
+| **customIcon**                | icon-name                              | ✅ Available        |
+| **showIcon**                  | true/false                             | ✅ Available        |
+| **customBackgroundColor**     | string                                 | ✅ Available        |
+| **customTextColor**           | string                                 | ✅ Available        |
+| **customIconColor**           | string                                 | ✅ Available        |
+| **customBorderColor**         | string                                 | ✅ Available        |
 
-  - ✅ Standard
 
-With the following attribute statuses:
+## Technical Usages Examples
 
-  - **Attributes:**
-    - ✅ Color
-    - ✅ Type
-    - ✅ Title
-    - ✅ CustomIcon
-    - ✅ ShowIcon
-    - ✅ CustomBackgroundColor
-    - ✅ CustomTextColor
-    - ✅ CustomIconColor
-    - ✅ CustomBorderColor
-
-- - -
 `
 
 export default {
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index f16a911593..1a20963527 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -56,7 +56,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} Alert-gaya`}
         ref={ref}
         {...rest}
       >
diff --git a/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 193150837d..56c75ff033 100644
--- a/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -31,11 +31,11 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1 wrapper-d0-0-2-3"
+      class=" wrapper-0-2-1 wrapper-d0-0-2-3 Alert-gaya"
     >
       <i
         aria-hidden="true"
-        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-outlined-alert-info"
+        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-outlined-alert-info Icon-gaya"
         data-testid="icon-outlined-alert-info"
         role="img"
       />
diff --git a/packages/react/src/components/AppBarTop/AppBarTop.stories.tsx b/packages/react/src/components/AppBarTop/AppBarTop.stories.tsx
index a63c13f8a0..4f04815ee2 100644
--- a/packages/react/src/components/AppBarTop/AppBarTop.stories.tsx
+++ b/packages/react/src/components/AppBarTop/AppBarTop.stories.tsx
@@ -8,39 +8,29 @@ import { AppBarTop, AppBarProps } from '.'
 import { Logo } from '../Logo'
 
 const componentStatus = `
----
-
-**NOTE FOR UX**: This component is available in the following variants:
-
-  - ✅ \`base\`
-  - ✅ \`standard\`
-
-With the following attribute status:
-
-  - **Color**
-      - ✅ \`default\`
-      - ✅ \`primary\`
-      - ✅ \`inverse\`
-      - ✅ \`none\`
-  - ✅ **Elevation**
-  - ✅ **Content Position** (available but with alternative composition)
-  - ✅ **Content Type** (available but with alternative composition)
-  - ✅ **Content Proeminent** (available but with alternative composition)
-  - **Behaviour**
-      - ✅  \`fixed\`
-      - ✅  \`scroll\`
-  - **Action**
-      - ✅ \`left\` (available but with alternative composition)
-      - ✅ \`right\` (available but with alternative composition)
-
----
+> The App Bar Top displays information and actions relating to the current screen.
+
+## Properties
+| Property                      | Values                                 |    Status           |
+|---                            |                                     ---|                  ---|
+| **variant(no prop)**                   | base/standard                 | ✅ Available        |
+| **color**                     | default, primary, inverse, none        | ✅ Available        |
+| **elevation**                 | true/false                             | ✅ Available        |
+| **behaviour**                 | fixed, scroll, absolute                | ✅ Available        |
+| **action**                    | left, right                            | ✅ (available but with alternative composition)        |
+| **Content Position**          | (available but with alternative composition) | ✅ (available but with alternative composition)        |
+| **Content Type**              | (available but with alternative composition) | ✅ (available but with alternative composition)        |
+| **Content Proeminent**        | (available but with alternative composition) | ✅ (available but with alternative composition)        |
+
+
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/AppBarTop',
   component: AppBarTop,
   parameters: {
-    componentSubtitle: 'The App Bar Top displays information and actions relating to the current screen.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/AppBarTop/AppBarTop.tsx b/packages/react/src/components/AppBarTop/AppBarTop.tsx
index b1828cf194..74058dd73f 100644
--- a/packages/react/src/components/AppBarTop/AppBarTop.tsx
+++ b/packages/react/src/components/AppBarTop/AppBarTop.tsx
@@ -47,7 +47,7 @@ const AppBarTop = React.forwardRef<HTMLElement, AppBarProps>(
     })
 
     return (
-      <header ref={ref} className={`${className} ${container}`} {...props} role={role} data-testid={testID}>
+      <header ref={ref} className={`${className} ${container} AppBarTop-gaya`} {...props} role={role} data-testid={testID}>
         <div className={appBar}>
           {children}
         </div>
diff --git a/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap b/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap
index 6d40831fd6..f11c97025e 100644
--- a/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap
+++ b/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap
@@ -33,7 +33,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -78,7 +78,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -123,7 +123,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -168,7 +168,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -213,7 +213,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/components/Autocomplete/Autocomplete.stories.tsx
index a7897d0bc1..77661c73d7 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -6,31 +6,31 @@ import { Autocomplete, AutocompleteProps } from '.'
 import { OptionProps } from './Autocomplete.props'
 
 const componentStatus = `
-- - -
-
-**NOTE FOR UXs**: This component is available in the following variants:
-
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-    - ✅ Label
-    - ✅ Name
-    - ✅ Placeholder
-    - ✅ Options
-    - ✅ Size
-    - ✅ HelperText
-    - ✅ Feedback
-    - ✅ Required
-    - ✅ Disabled
-    - ✅ Readonly
-    - ✅ Position
-    - ✅ handleSelect
-    - ✅ NotFound
-    - ✅ Placeholder
-
-- - -
+> Autocomplete offers an interactive text box that suggests options as the user types
+
+## Properties
+| Property                      | Values                                 |    Status           |
+|---                            |                                     ---|                  ---|
+| **variant**                   | standard                               | ✅ Available        |
+| **label**                     | string                                 | ✅ Available        |
+| **name**                      | string                                 | ✅ Available        |
+| **placeholder**               | string                                 | ✅ Available        |
+| **options**                   | [{value: string, label: string}]       | ✅ Available        |
+| **size**                      | medium, mediumX                        | ✅ Available        |
+| **helperText**                | string                                 | ✅ Available        |
+| **feedback**                  | success, error                         | ✅ Available        |
+| **required**                  | true/false                             | ✅ Available        |
+| **disabled**                  | true/false                             | ✅ Available        |
+| **readonly**                  | true/false                             | ✅ Available        |
+| **Position**                  | bottom, top                            | ✅ Available        |
+| **handleSelect**              | function                               | ✅ Available        |
+| **notFound**                  | string                                 | ✅ Available        |
+| **onChange**                  | function                               | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
+
+
+
+## Technical Usages Examples
 `
 
 const options: OptionProps[] = [{
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
index 445155f80a..354fb5401f 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -53,7 +53,7 @@ const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} Autocomplete-gaya`}
         data-testid={testID}
         {...rest}
       >
diff --git a/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
index ea3d0d799d..8519efedba 100644
--- a/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -122,7 +122,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1"
+      class=" wrapper-0-2-1 Autocomplete-gaya"
     >
       <label
         class="labelText-0-2-2 labelText-d0-0-2-9"
@@ -140,7 +140,7 @@ Array [
         />
         <i
           aria-hidden="true"
-          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom"
+          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom Icon-gaya"
           data-testid="icon-outlined-navigation-arrowbottom"
           role="img"
         />
@@ -272,7 +272,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1"
+      class=" wrapper-0-2-1 Autocomplete-gaya"
     >
       <label
         class="labelText-0-2-2 labelText-d0-0-2-9"
@@ -289,7 +289,7 @@ Array [
         />
         <i
           aria-hidden="true"
-          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom"
+          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom Icon-gaya"
           data-testid="icon-outlined-navigation-arrowbottom"
           role="img"
         />
@@ -421,7 +421,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1"
+      class=" wrapper-0-2-1 Autocomplete-gaya"
     >
       <label
         class="labelText-0-2-2 labelText-d0-0-2-9"
@@ -438,7 +438,7 @@ Array [
         />
         <i
           aria-hidden="true"
-          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom"
+          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom Icon-gaya"
           data-testid="icon-outlined-navigation-arrowbottom"
           role="img"
         />
@@ -570,7 +570,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1"
+      class=" wrapper-0-2-1 Autocomplete-gaya"
     >
       <label
         class="labelText-0-2-2 labelText-d0-0-2-9"
@@ -587,7 +587,7 @@ Array [
         />
         <i
           aria-hidden="true"
-          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom"
+          class="icon-0-2-5 icon-d2-0-2-11 icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-navigation-arrowbottom Icon-gaya"
           data-testid="icon-outlined-navigation-arrowbottom"
           role="img"
         />
diff --git a/packages/react/src/components/Avatar/Avatar.stories.tsx b/packages/react/src/components/Avatar/Avatar.stories.tsx
index 0000090de4..e535c46733 100644
--- a/packages/react/src/components/Avatar/Avatar.stories.tsx
+++ b/packages/react/src/components/Avatar/Avatar.stories.tsx
@@ -4,33 +4,28 @@ import { Story, Meta } from '@storybook/react'
 import { Avatar, AvatarProps } from '.'
 
 const componentStatus = `
----
+> Avatar are used to identify a user
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                    |    Status           |
+|---                            |                                        ---|                  ---|
+| **variant**                   | standard                                  | ✅ Available        |
+| **type**                      | icon, label, image                        | ✅ Available        |
+| **size**                      | standard, semi, semiX, medium, largeXXX   | ✅ Available        |
+| **alt**                       | string                                    | ✅ Available        |
+| **src**                       | string                                    | ✅ Available        |
+| **onError**                   | function                                  | ✅ Available        |
+| **name**                      | icon-name                                 | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ \`standard\`
-
-With the following attribute status:
-
-- **Type**
-    - ✅ \`icon\`
-    - ✅ \`label\`
-    - ✅ \`image\`
-- **Size**
-    - ✅ \`standard\`
-    - ✅ \`semi\`
-    - ✅ \`semiX\`
-    - ✅ \`medium\`
-    - ✅ \`largeXXX\`
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Avatar',
   component: Avatar,
   parameters: {
-    componentSubtitle: 'Avatars are used to identify a user',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index e8e8841a8c..cb2c48fce7 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -30,7 +30,7 @@ const Avatar = React.forwardRef<HTMLElement, AvatarProps>(
 
     return (
       <span
-        className={`${className} ${surface}`}
+        className={`${className} ${surface} Avatar-gaya`}
         ref={ref}
         {...rest}
       >
diff --git a/packages/react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap b/packages/react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
index 9d1e6b6dad..3a4127f8ef 100644
--- a/packages/react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
+++ b/packages/react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -5,11 +5,11 @@ Array [
   "[object Object]",
   <div>
     <span
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
     >
       <i
         aria-hidden="true"
-        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-default-mockup"
+        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
         data-testid="icon-undefined"
         role="img"
       />
@@ -24,7 +24,7 @@ Array [
   <div>
     <i
       aria-hidden="true"
-      class="undefined icon-0-2-4 icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-outlined-default-mockup"
+      class="undefined icon-0-2-4 icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
       data-testid="icon-undefined"
       role="img"
     />
@@ -88,12 +88,12 @@ Array [
 }",
   <div>
     <span
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
       name="outlined-action-like"
     >
       <i
         aria-hidden="true"
-        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-action-like"
+        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-action-like Icon-gaya"
         data-testid="icon-outlined-action-like"
         role="img"
       />
@@ -150,7 +150,7 @@ Array [
   <div>
     <span
       alt="image"
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
       src="image.junk"
     >
       <img
@@ -212,7 +212,7 @@ Array [
   <div>
     <span
       alt=""
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
       src="image.jpg"
     >
       <img
@@ -317,7 +317,7 @@ Array [
 }",
   <div>
     <span
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
       label="DS"
     >
       <label
@@ -424,7 +424,7 @@ Array [
 }",
   <div>
     <span
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
     >
       <label
         class=" label-0-2-3 label-d3-0-2-8"
@@ -493,11 +493,11 @@ Array [
 }",
   <div>
     <span
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
     >
       <i
         aria-hidden="true"
-        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-default-mockup"
+        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
         data-testid="icon-undefined"
         role="img"
       />
@@ -562,11 +562,11 @@ Array [
 }",
   <div>
     <span
-      class=" surface-0-2-1 surface-d0-0-2-5"
+      class=" surface-0-2-1 surface-d0-0-2-5 Avatar-gaya"
     >
       <i
         aria-hidden="true"
-        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-default-mockup"
+        class="undefined icon-0-2-4 icon-0-2-9 icon-d0-0-2-10 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
         data-testid="icon-undefined"
         role="img"
       />
diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx
index a24a995a1e..294c6a7456 100644
--- a/packages/react/src/components/Badge/Badge.stories.tsx
+++ b/packages/react/src/components/Badge/Badge.stories.tsx
@@ -5,31 +5,27 @@ import { Theme } from '@naturacosmeticos/natds-themes'
 import { Badge, BadgeProps } from '.'
 
 const componentStatus = `
----
+> Badge The badge is used to notify the user
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                       |    Status           |
+|---                            |                                           ---|                  ---|
+| **variant**                   | dot, pulse, standard                         | ✅ Available        |
+| **color**                     | alert, primary, secondary, success           | ✅ Available        |
+| **ariaHidden**                | true/false                                   | ✅ Available        |
+| **ariaLabel**                 | string                                       | ✅ Available        |
+| **limit**                     | number (only available for Standard variant) | ✅ Available        |
+| **value**                     | number                                       | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ \`dot\`
-  - ✅ \`pulse\`
-  - ✅ \`standard\`
-
-With the following attribute status:
-
-- ✅ **Limit** (only available for Standard variant)
-- **Color**
-    - ✅ \`alert\`
-    - ✅ \`primary\`
-    - ✅ \`secondary\`
-    - ✅ \`success\`
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Badge',
   component: Badge,
   parameters: {
-    componentSubtitle: 'The badge is used to notify the user',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 7ba0d1c702..d055fb9eb1 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -23,7 +23,7 @@ const Badge = React.forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
     <div
       aria-hidden={ariaHidden}
       aria-label={ariaLabel}
-      className={`${className} ${badge}`}
+      className={`${className} ${badge} Badge-gaya`}
       data-testid={testID}
       ref={ref}
       {...rest}
diff --git a/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap b/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap
index f189ed6dde..10cc3bc546 100644
--- a/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap
+++ b/packages/react/src/components/Badge/__snapshots__/Badge.test.tsx.snap
@@ -45,7 +45,7 @@ Array [
   }",
   <div>
     <div
-      class=" badge-0-2-1 badge-d0-0-2-4"
+      class=" badge-0-2-1 badge-d0-0-2-4 Badge-gaya"
     />
   </div>,
 ]
@@ -97,7 +97,7 @@ Array [
   }",
   <div>
     <div
-      class=" badge-0-2-1 badge-d0-0-2-4"
+      class=" badge-0-2-1 badge-d0-0-2-4 Badge-gaya"
     />
   </div>,
 ]
@@ -149,7 +149,7 @@ Array [
   }",
   <div>
     <div
-      class=" badge-0-2-1 badge-d0-0-2-4"
+      class=" badge-0-2-1 badge-d0-0-2-4 Badge-gaya"
       data-testid="ds-standard-badge"
       limit="99"
       value="99"
@@ -210,7 +210,7 @@ Array [
   }",
   <div>
     <div
-      class=" badge-0-2-1 badge-d0-0-2-4"
+      class=" badge-0-2-1 badge-d0-0-2-4 Badge-gaya"
       value="99"
     >
       <span
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 7608ef71e3..d9539f75cc 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -16,7 +16,7 @@ const componentStatus = `
 | **iconName**     | 'icon_name'                                                                     | ✅ Available        |
 | **disabled**     | true, false                                                                     | ✅ Available        |
 | **fullWidth**    | true, false                                                                     | ✅ Available        |
-| **brand**        | aesop, avon, avon_v2, natura <br /> consultoriaDeBeleza, natura_v2, casaEestilo | ✅ Available        |
+| **brand**        | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
 ## Technical Usages Examples
 `
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 500164d734..e36095d66f 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -39,7 +39,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   return (
     <Ripple disabled={disabled} fullWidth={fullWidth}>
       <button
-        className={button}
+        className={`${button} Button-gaya`}
         data-testid={testID}
         disabled={disabled}
         onClick={onClick}
diff --git a/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap
index e0cdc97fd4..6d4c8f332e 100644
--- a/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -66,7 +66,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -150,7 +150,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -234,7 +234,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -318,7 +318,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         data-testid="btn-disabled"
         disabled=""
         type="button"
@@ -404,7 +404,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -488,7 +488,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         disabled=""
         type="button"
       >
@@ -573,7 +573,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -657,7 +657,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         disabled=""
         type="button"
       >
@@ -742,7 +742,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -835,7 +835,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -848,7 +848,7 @@ Array [
           </span>
           <i
             aria-hidden="true"
-            class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-filled-action-check"
+            class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-filled-action-check Icon-gaya"
             data-testid="icon-filled-action-check"
             role="img"
           />
@@ -934,7 +934,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -947,7 +947,7 @@ Array [
           </span>
           <i
             aria-hidden="true"
-            class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-outlined-default-mockup"
+            class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
             data-testid="icon-outlined-default-mockup"
             role="img"
           />
@@ -1033,7 +1033,7 @@ Array [
       data-testid="ripple"
     >
       <button
-        class="button-0-2-1 button-d0-0-2-4"
+        class="button-0-2-1 button-d0-0-2-4 Button-gaya"
         type="button"
       >
         <div
@@ -1046,7 +1046,7 @@ Array [
           </span>
           <i
             aria-hidden="true"
-            class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-outlined-default-mockup"
+            class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
             data-testid="icon-outlined-default-mockup"
             role="img"
           />
diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
index 15210c9012..5ff3dc5d78 100644
--- a/packages/react/src/components/Card/Card.stories.tsx
+++ b/packages/react/src/components/Card/Card.stories.tsx
@@ -8,21 +8,22 @@ import { Icon } from '../Icon'
 import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
----
+> Cards are surfaces that groups content and actions in the same space. Its construction must always create a visual hierarchy of the content and communicate its purposes
 
-**NOTE**: This component is available in the following attributes:
+## Properties
+| Property                     | Values            |    Status           |
+|---                           |                ---|                  ---|
+| **elevation**                | true/false        | ✅ Available        |
+| **radius**                   | true/false        | ✅ Available        |
 
-  - ✅ \`elevation\`
-  - ✅ \`radius\`
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Card',
   component: Card,
   parameters: {
-    componentSubtitle: 'Cards are surfaces that groups content and actions in the same space. Its construction must always create a visual hierarchy of the content and communicate its purposes',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
index b5f105aa28..5fe962b401 100644
--- a/packages/react/src/components/Card/Card.tsx
+++ b/packages/react/src/components/Card/Card.tsx
@@ -15,7 +15,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 
     return (
       <div
-        className={`${className} ${card}`}
+        className={`${className} ${card} Card-gaya`}
         data-testid={testID}
         ref={ref}
         {...props}
diff --git a/packages/react/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/react/src/components/Card/__snapshots__/Card.test.tsx.snap
index e77fe1ac19..6b117fb19a 100644
--- a/packages/react/src/components/Card/__snapshots__/Card.test.tsx.snap
+++ b/packages/react/src/components/Card/__snapshots__/Card.test.tsx.snap
@@ -13,7 +13,7 @@ Array [
 }",
   <div>
     <div
-      class=" card-0-2-1 card-d0-0-2-2"
+      class=" card-0-2-1 card-d0-0-2-2 Card-gaya"
     >
       some content
     </div>
@@ -34,7 +34,7 @@ Array [
 }",
   <div>
     <div
-      class=" card-0-2-1 card-d0-0-2-2"
+      class=" card-0-2-1 card-d0-0-2-2 Card-gaya"
     >
       some content
     </div>
@@ -55,7 +55,7 @@ Array [
 }",
   <div>
     <div
-      class=" card-0-2-1 card-d0-0-2-2"
+      class=" card-0-2-1 card-d0-0-2-2 Card-gaya"
     >
       some content
     </div>
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.tsx b/packages/react/src/components/Checkbox/Checkbox.stories.tsx
index 77b4653522..c3d878f5ff 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.tsx
@@ -4,21 +4,28 @@ import { Checkbox, CheckboxProps } from '.'
 import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
----
+> Checkboxes allow users to select one or more items from a set.
 
-**NOTE FOR UXs**: This component is available with the following attribute status:
+## Properties
+| Property                    | Values            |    Status           |
+|---                          |                ---|                  ---|
+| **disabled**                | true/false        | ✅ Available        |
+| **indeterminate**           | true/false        | ✅ Available        |
+| **checked**                 | true/false        | ✅ Available        |
+| **value**                   | string            | ✅ Available        |
+| **onChange**                | function          | ✅ Available        |
+| **label**                   | string            | ✅ Available        |
+| **id**                      | string            | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ **Disabled**
-  - ✅ **Indeterminate**
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Checkbox',
   component: Checkbox,
   parameters: {
-    componentSubtitle: 'Checkboxes allow users to select one or more items from a set.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index 6bca88bb3a..16b6589ed6 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -23,7 +23,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
   const getRippleColor = checked && !disabled ? 'primary' : 'highlight'
 
   return (
-    <div className={`${className} ${container}`}>
+    <div className={`${className} ${container} Checkbox-gaya`}>
       <Ripple
         isCentered
         brand={brand}
diff --git a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index e4ec0522c3..dd75c5045a 100644
--- a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -151,7 +151,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1"
+      class=" container-0-2-1 Checkbox-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -333,7 +333,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1"
+      class=" container-0-2-1 Checkbox-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -517,7 +517,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1"
+      class=" container-0-2-1 Checkbox-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -700,7 +700,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1"
+      class=" container-0-2-1 Checkbox-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -887,7 +887,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1"
+      class=" container-0-2-1 Checkbox-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
diff --git a/packages/react/src/components/Chip/Chip.stories.tsx b/packages/react/src/components/Chip/Chip.stories.tsx
index d4a6a90e81..214e29e45c 100644
--- a/packages/react/src/components/Chip/Chip.stories.tsx
+++ b/packages/react/src/components/Chip/Chip.stories.tsx
@@ -3,22 +3,28 @@ import { Story, Meta } from '@storybook/react'
 import { Chip, ChipProps } from '.'
 
 const componentStatus = `
-- - -
+> Chip used to display discrete tags or selections in user interfaces..
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                    | Values                                      |    Status           |
+|---                          |                                          ---|                  ---|
+| **variant(no prop)**        | Standard                                    | ✅ Available        |
+| **labelText**               | string                                      | ✅ Available        |
+| **leftIcon**                | icon-name                                   | ✅ Available        |
+| **rightIcon**               | icon-name                                   | ✅ Available        |
+| **leftAvatar**              | string                                      | ✅ Available        |
+| **rightAvatar**             | string                                      | ✅ Available        |
+| **color**                   | neutral, primary, secondary, custom         | ✅ Available        |
+| **disabled**                | true/false                                  | ✅ Available        |
+| **selected**                | true/false                                  | ✅ Available        |
+| **customLabelColor**        | string                                      | ✅ Available        |
+| **customBackground**        | string                                      | ✅ Available        |
+| **customBorderColor**       | string                                      | ✅ Available        |
+| **size**                    | semi, semiX, medium                         | ✅ Available        |
+| **onClick**                 | function                                    | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-    - ✅ Color
-    - ✅ Icon
-    - ✅ Avatar
-    - ✅ Disabled
-    - ✅ Size
-
-- - -
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/Chip/Chip.tsx b/packages/react/src/components/Chip/Chip.tsx
index d43bc1d088..b8bb44b872 100644
--- a/packages/react/src/components/Chip/Chip.tsx
+++ b/packages/react/src/components/Chip/Chip.tsx
@@ -46,7 +46,7 @@ const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(
         <button
           ref={ref}
           type="button"
-          className={`${className} ${wrapper}`}
+          className={`${className} ${wrapper} Chip-gaya`}
           disabled={disabled}
           onClick={onClick}
           {...rest}
diff --git a/packages/react/src/components/Counter/Counter.stories.tsx b/packages/react/src/components/Counter/Counter.stories.tsx
index 8299f1784d..930ed43d4e 100644
--- a/packages/react/src/components/Counter/Counter.stories.tsx
+++ b/packages/react/src/components/Counter/Counter.stories.tsx
@@ -5,33 +5,34 @@ import { Counter, CounterProps } from '.'
 import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
----
+> Counter Reduce input effort for fields with values that deviate little from the default by allowing users to increase or decrease the number in a single button press.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values            |    Status           |
+|---                            |                ---|                  ---|
+| **variant(no prop)**          | Standard          | ✅ Available        |
+| **ariaLabelIncrementButton**  | string            | ✅ Available        |
+| **ariaLabelDecrementButton**  | string            | ✅ Available        |
+| **disabled**                  | true/false        | ✅ Available        |
+| **readOnly**                  | true/false        | ✅ Available        |
+| **onChange**                  | function          | ✅ Available        |
+| **label**                     | string            | ✅ Available        |
+| **maxValue**                  | number            | ✅ Available        |
+| **minValue**                  | number            | ✅ Available        |
+| **onDecrement**               | function          | ✅ Available        |
+| **onIncrement**               | function          | ✅ Available        |
+| **size**                      | semiX, medium     | ✅ Available        |
+| **value**                     | number            | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ \`standard\`
-
-With the following attribute status:
-
-- ✅ **Label**
-- **Size**
-    - ✅ \`semiX\`
-    - ✅ \`medium\`
-- ✅ **Disabled**
-- ✅ **onChange**
-    - ✅ \`function\`
-- ✅ **readOnly**
-    - ✅ \`true\`
-    - ✅ \`false\`
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Counter',
   component: Counter,
   parameters: {
-    componentSubtitle: 'Reduce input effort for fields with values that deviate little from the default by allowing users to increase or decrease the number in a single button press.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/Counter/Counter.tsx b/packages/react/src/components/Counter/Counter.tsx
index 5c3c384c98..83239dfc47 100644
--- a/packages/react/src/components/Counter/Counter.tsx
+++ b/packages/react/src/components/Counter/Counter.tsx
@@ -29,7 +29,7 @@ const Counter = React.forwardRef<HTMLDivElement, CounterProps>(({
   const minReached = value <= minValue
 
   return (
-    <div data-testid={testID} ref={ref} className={className}>
+    <div data-testid={testID} ref={ref} className={`${className} Counter-gaya`}>
       {label && <Label className={labelText} label={label} />}
       <div className={buttonGroup}>
         <Button
diff --git a/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap b/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap
index 1bdf5c054e..106d9b7de4 100644
--- a/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap
+++ b/packages/react/src/components/Counter/__snapshots__/Counter.test.tsx.snap
@@ -246,7 +246,7 @@ Array [
   }",
   <div>
     <div
-      class=""
+      class=" Counter-gaya"
     >
       <div
         class="buttonGroup-0-2-1 buttonGroup-d0-0-2-6"
@@ -265,7 +265,7 @@ Array [
             />
           </div>
           <button
-            class="button-0-2-7 button-d0-0-2-10"
+            class="button-0-2-7 button-d0-0-2-10 Button-gaya"
             data-testid="onDecrement-btn"
             disabled=""
             type="button"
@@ -301,7 +301,7 @@ Array [
             />
           </div>
           <button
-            class="button-0-2-7 button-d3-0-2-23"
+            class="button-0-2-7 button-d3-0-2-23 Button-gaya"
             data-testid="onIncrement-btn"
             disabled=""
             type="button"
@@ -571,7 +571,7 @@ Array [
   }",
   <div>
     <div
-      class=""
+      class=" Counter-gaya"
     >
       <div
         class="buttonGroup-0-2-1 buttonGroup-d0-0-2-6"
@@ -590,7 +590,7 @@ Array [
             />
           </div>
           <button
-            class="button-0-2-7 button-d0-0-2-10"
+            class="button-0-2-7 button-d0-0-2-10 Button-gaya"
             data-testid="onDecrement-btn"
             disabled=""
             type="button"
@@ -626,7 +626,7 @@ Array [
             />
           </div>
           <button
-            class="button-0-2-7 button-d3-0-2-23"
+            class="button-0-2-7 button-d3-0-2-23 Button-gaya"
             data-testid="onIncrement-btn"
             type="button"
           >
@@ -899,7 +899,7 @@ Array [
   }",
   <div>
     <div
-      class=""
+      class=" Counter-gaya"
     >
       <label
         class="labelText-0-2-5 labelContainer-0-2-7"
@@ -923,7 +923,7 @@ Array [
             />
           </div>
           <button
-            class="button-0-2-8 button-d0-0-2-11"
+            class="button-0-2-8 button-d0-0-2-11 Button-gaya"
             data-testid="onDecrement-btn"
             disabled=""
             type="button"
@@ -959,7 +959,7 @@ Array [
             />
           </div>
           <button
-            class="button-0-2-8 button-d3-0-2-24"
+            class="button-0-2-8 button-d3-0-2-24 Button-gaya"
             data-testid="onIncrement-btn"
             type="button"
           >
diff --git a/packages/react/src/components/Dialog/Dialog.stories.tsx b/packages/react/src/components/Dialog/Dialog.stories.tsx
index e5b2a11062..d2f2b5cf24 100644
--- a/packages/react/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/react/src/components/Dialog/Dialog.stories.tsx
@@ -10,22 +10,22 @@ import { DialogFooter } from './DialogFooter'
 import { Icon } from '../Icon'
 
 const componentStatus = `
----
+> Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
 
-**NOTES FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                                              |    Status           |
+|---                            |                                                                  ---|                  ---|
+| **variant(no prop)**          | Standard/Alert  (available but with alternative composition)        | ✅ Available        |
+| **ariaDescribedBy**           | string                                                              | ✅ Available        |
+| **ariaLabelledBy**            | string                                                              | ✅ Available        |
+| **container**                 | An HTML element or function that returns one                        | ✅ Available        |
+| **onEscapeKeyDown**           | function                                                            | ✅ Available        |
+| **role**                      | dialog, alertdialog                                                 | ✅ Available        |
+| **open**                      | true/false                                                          | ✅ Available        |
+| **size**                      | small, medium, large                                                | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo    | ✅ Available        |
 
-  - ✅ \`standard\` (available but with alternative composition)
-  - ✅ \`alert\` (available but with alternative composition)
-
-With the following attribute status:
-
-- ✅ **Divider**
-- **Size**
-    - ✅  \`small\`
-    - ✅  \`medium\`
-    - ✅  \`large\`
-
----
+## Technical Usages Examples
 `
 
 export default {
@@ -33,7 +33,7 @@ export default {
   component: Dialog,
   subcomponents: { DialogHeader, DialogBody, DialogFooter },
   parameters: {
-    componentSubtitle: 'Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
index 9d50c50702..b347942170 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -35,7 +35,7 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(({
             aria-describedby={ariaDescribedBy}
             aria-labelledby={ariaLabelledBy}
             aria-modal
-            className={`${className} ${dialog}`}
+            className={`${className} ${dialog} Dialog-gaya`}
             data-testid={testID}
             onKeyDown={handleOnKeyDown}
             role={role}
diff --git a/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index 33fb619c17..dd66a670a6 100644
--- a/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -268,7 +268,7 @@ Array [
         aria-describedby="description"
         aria-labelledby="title"
         aria-modal="true"
-        class=" dialog-0-2-1 dialog-d0-0-2-3"
+        class=" dialog-0-2-1 dialog-d0-0-2-3 Dialog-gaya"
         role="dialog"
         tabindex="0"
       >
@@ -283,7 +283,7 @@ Array [
           </h2>
         </div>
         <hr
-          class=" divider-0-2-8 divider-d0-0-2-9"
+          class=" divider-0-2-8 divider-d0-0-2-9 Divider-gaya"
         />
         <div
           class=" content-0-2-7"
@@ -295,7 +295,7 @@ Array [
           </p>
         </div>
         <hr
-          class=" divider-0-2-8 divider-d1-0-2-10"
+          class=" divider-0-2-8 divider-d1-0-2-10 Divider-gaya"
         />
         <div
           class=" footer-0-2-11"
@@ -314,7 +314,7 @@ Array [
               />
             </div>
             <button
-              class="button-0-2-12 button-d0-0-2-15"
+              class="button-0-2-12 button-d0-0-2-15 Button-gaya"
               type="button"
             >
               <div
@@ -570,7 +570,7 @@ Array [
         aria-describedby="description"
         aria-labelledby="title"
         aria-modal="true"
-        class=" dialog-0-2-1 dialog-d0-0-2-3"
+        class=" dialog-0-2-1 dialog-d0-0-2-3 Dialog-gaya"
         role="dialog"
         tabindex="0"
       >
@@ -585,7 +585,7 @@ Array [
           </h2>
         </div>
         <hr
-          class=" divider-0-2-8 divider-d0-0-2-9"
+          class=" divider-0-2-8 divider-d0-0-2-9 Divider-gaya"
         />
         <div
           class=" content-0-2-7"
@@ -597,7 +597,7 @@ Array [
           </p>
         </div>
         <hr
-          class=" divider-0-2-8 divider-d1-0-2-10"
+          class=" divider-0-2-8 divider-d1-0-2-10 Divider-gaya"
         />
         <div
           class=" footer-0-2-11"
@@ -616,7 +616,7 @@ Array [
               />
             </div>
             <button
-              class="button-0-2-12 button-d0-0-2-15"
+              class="button-0-2-12 button-d0-0-2-15 Button-gaya"
               type="button"
             >
               <div
@@ -840,7 +840,7 @@ Array [
       <div
         aria-describedby="description"
         aria-modal="true"
-        class=" dialog-0-2-1 dialog-d0-0-2-3"
+        class=" dialog-0-2-1 dialog-d0-0-2-3 Dialog-gaya"
         role="alertdialog"
         tabindex="0"
       >
@@ -870,7 +870,7 @@ Array [
               />
             </div>
             <button
-              class="button-0-2-7 button-d0-0-2-10"
+              class="button-0-2-7 button-d0-0-2-10 Button-gaya"
               type="button"
             >
               <div
@@ -1111,7 +1111,7 @@ Array [
         aria-describedby="description"
         aria-labelledby="title"
         aria-modal="true"
-        class=" dialog-0-2-1 dialog-d0-0-2-3"
+        class=" dialog-0-2-1 dialog-d0-0-2-3 Dialog-gaya"
         role="dialog"
         tabindex="0"
       >
@@ -1151,7 +1151,7 @@ Array [
               />
             </div>
             <button
-              class="button-0-2-9 button-d0-0-2-12"
+              class="button-0-2-9 button-d0-0-2-12 Button-gaya"
               type="button"
             >
               <div
@@ -1407,7 +1407,7 @@ Array [
         aria-describedby="description"
         aria-labelledby="title"
         aria-modal="true"
-        class=" dialog-0-2-1 dialog-d0-0-2-3"
+        class=" dialog-0-2-1 dialog-d0-0-2-3 Dialog-gaya"
         role="dialog"
         tabindex="0"
       >
@@ -1422,7 +1422,7 @@ Array [
           </h2>
         </div>
         <hr
-          class=" divider-0-2-8 divider-d0-0-2-9"
+          class=" divider-0-2-8 divider-d0-0-2-9 Divider-gaya"
         />
         <div
           class=" content-0-2-7"
@@ -1434,7 +1434,7 @@ Array [
           </p>
         </div>
         <hr
-          class=" divider-0-2-8 divider-d1-0-2-10"
+          class=" divider-0-2-8 divider-d1-0-2-10 Divider-gaya"
         />
         <div
           class=" footer-0-2-11"
@@ -1453,7 +1453,7 @@ Array [
               />
             </div>
             <button
-              class="button-0-2-12 button-d0-0-2-15"
+              class="button-0-2-12 button-d0-0-2-15 Button-gaya"
               type="button"
             >
               <div
diff --git a/packages/react/src/components/Divider/Divider.stories.tsx b/packages/react/src/components/Divider/Divider.stories.tsx
index 3599f179d7..2c4ea0772e 100644
--- a/packages/react/src/components/Divider/Divider.stories.tsx
+++ b/packages/react/src/components/Divider/Divider.stories.tsx
@@ -3,22 +3,20 @@ import { Story, Meta } from '@storybook/react'
 import { Divider, DividerProps } from '.'
 
 const componentStatus = `
----
+> A divider is a thin line that groups content in lists and layouts.
 
-**NOTE**: This component is available in the following variants:
-
-  - ✅ \`full-bleed\`
-  - ✅ \`inset\`
-  - ✅ \`middle\`
-
----
+## Properties
+| Property             | Values                       |    Status           |
+|---                   |                           ---|                  ---|
+| **variant**          | full-bleed, inset, middle    | ✅ Available        |
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Divider',
   component: Divider,
   parameters: {
-    componentSubtitle: 'A divider is a thin line that groups content in lists and layouts',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index c8d2f98461..89bb716838 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -13,7 +13,7 @@ const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
 
     return (
       <hr
-        className={`${className} ${divider}`}
+        className={`${className} ${divider} Divider-gaya`}
         data-testid={testID}
         ref={ref}
         {...props}
diff --git a/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap
index 677ca5a674..7adb446db1 100644
--- a/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap
+++ b/packages/react/src/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -15,7 +15,7 @@ Array [
 }",
   <div>
     <hr
-      class=" divider-0-2-1 divider-d0-0-2-2"
+      class=" divider-0-2-1 divider-d0-0-2-2 Divider-gaya"
     />
   </div>,
 ]
@@ -36,7 +36,7 @@ Array [
 }",
   <div>
     <hr
-      class=" divider-0-2-1 divider-d0-0-2-2"
+      class=" divider-0-2-1 divider-d0-0-2-2 Divider-gaya"
     />
   </div>,
 ]
@@ -57,7 +57,7 @@ Array [
 }",
   <div>
     <hr
-      class=" divider-0-2-1 divider-d0-0-2-2"
+      class=" divider-0-2-1 divider-d0-0-2-2 Divider-gaya"
     />
   </div>,
 ]
diff --git a/packages/react/src/components/Drawer/Drawer.stories.tsx b/packages/react/src/components/Drawer/Drawer.stories.tsx
index 4483a96474..ddb50fa077 100644
--- a/packages/react/src/components/Drawer/Drawer.stories.tsx
+++ b/packages/react/src/components/Drawer/Drawer.stories.tsx
@@ -17,35 +17,25 @@ import { ListItem } from '../ListItem'
 import { Badge } from '../Badge'
 
 const componentStatus = `
----
+> A Drawer is a thin line that groups content in lists and layouts.
 
-**NOTE FOR UX**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                |    Status           |
+|---                            |                                    ---|                  ---|
+| **variant(no prop)**          | Base                                  | ✅ Available        |
+| **open**                      | true/false                            | ✅ Available        |
+| **handleClick**               | function                              | ✅ Available        |
+| **size**                      | small, medium, large                  | ✅ Available        |
+| **position**                  | left, right, top, bottom              | ✅ Available        |
 
-  - ✅ \`Base\`
-
-With the following attribute status:
-
-  - **Position**
-      - ✅ \`left\`
-      - ✅ \`right\`
-      - ✅ \`bottom\`
-      - ✅ \`top\`
-  - **Size**
-      - ✅ \`small\`
-      - ✅ \`medium\`
-      - ✅ \`large\`
-  - **handleClick**
-      - ✅ \`function\`
-
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Drawer',
   component: Drawer,
   parameters: {
-    componentSubtitle: 'A Drawer is a thin line that groups content in lists and layouts',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx
index 136ef69f5d..e12f48a799 100644
--- a/packages/react/src/components/Drawer/Drawer.tsx
+++ b/packages/react/src/components/Drawer/Drawer.tsx
@@ -12,7 +12,7 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(({
   return (
     <>
       <div
-        className={`${className} ${drawer}`}
+        className={`${className} ${drawer} Drawer-gaya`}
         data-testid={testID}
         ref={ref}
         {...props}
diff --git a/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
index 66f0aa168b..5de8188d11 100644
--- a/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/react/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
@@ -34,7 +34,7 @@ Array [
 }",
   <div>
     <div
-      class=" drawer-0-2-2 drawer-d1-0-2-4"
+      class=" drawer-0-2-2 drawer-d1-0-2-4 Drawer-gaya"
       open=""
     >
       something
@@ -80,7 +80,7 @@ Array [
 }",
   <div>
     <div
-      class=" drawer-0-2-2 drawer-d1-0-2-4"
+      class=" drawer-0-2-2 drawer-d1-0-2-4 Drawer-gaya"
       open=""
     >
       something
@@ -126,7 +126,7 @@ Array [
 }",
   <div>
     <div
-      class=" drawer-0-2-2 drawer-d1-0-2-4"
+      class=" drawer-0-2-2 drawer-d1-0-2-4 Drawer-gaya"
       open=""
     >
       something
diff --git a/packages/react/src/components/Icon/Icon.stories.tsx b/packages/react/src/components/Icon/Icon.stories.tsx
index ffd706e8c6..e779579fb8 100644
--- a/packages/react/src/components/Icon/Icon.stories.tsx
+++ b/packages/react/src/components/Icon/Icon.stories.tsx
@@ -3,25 +3,27 @@ import { Story, Meta } from '@storybook/react'
 import { Icon, IconProps } from '.'
 
 const componentStatus = `
----
+> A helper component to display icons from @naturacosmeticos/natds-icons package.
 
-**NOTE**: This component is available with the following attribute status:
+## Properties
+| Property                      | Values                                       |    Status           |
+|---                            |                                           ---|                  ---|
+| **ariaHidden**                | true/false                                   | ✅ Available        |
+| **ariaLabel**                 | string                                       | ✅ Available        |
+| **color**                     | color-name (Support Color tokens from theme) | ✅ Available        |
+| **name**                      | icon-name                                    | ✅ Available        |
+| **role**                      | img, button                                  | ✅ Available        |
+| **size**                      | (Support Size tokens from theme)             | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-- ✅ **Color**
-    - Support Color tokens from theme
-- ✅  **Size**
-    - Support Size tokens from theme
-- ✅  **Name**
-    - Check all Icon names in [Icon Library](https://ds.natura.design/28db352be/p/94367e-icon-library/b/6154b9)
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Icon',
   component: Icon,
   parameters: {
-    componentSubtitle: 'A helper component to display icons from @naturacosmeticos/natds-icons package',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx
index 9947a7a78f..252f1165bc 100644
--- a/packages/react/src/components/Icon/Icon.tsx
+++ b/packages/react/src/components/Icon/Icon.tsx
@@ -25,7 +25,7 @@ const Icon = React.forwardRef<HTMLElement, IconProps>(({
     <i
       aria-hidden={ariaHidden}
       aria-label={ariaLabel}
-      className={`${className} ${icon} natds-icons ${iconName}`}
+      className={`${className} ${icon} natds-icons ${iconName} Icon-gaya`}
       data-testid={testID}
       ref={ref}
       role={role}
diff --git a/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
index adeb749c4f..5f01a14b5f 100644
--- a/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
+++ b/packages/react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -13,7 +13,7 @@ Array [
 }",
   <i
     aria-hidden="true"
-    class=" icon-0-2-1 icon-d0-0-2-2 natds-icons natds-icons-outlined-default-mockup"
+    class=" icon-0-2-1 icon-d0-0-2-2 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
     data-testid="icon-outlined-default-mockup"
     role="img"
   />,
@@ -33,7 +33,7 @@ Array [
 }",
   <i
     aria-hidden="true"
-    class=" icon-0-2-1 icon-d0-0-2-2 natds-icons natds-icons-outlined-default-mockup"
+    class=" icon-0-2-1 icon-d0-0-2-2 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
     data-testid="icon-outlined-default-mockup"
     role="img"
   />,
@@ -53,7 +53,7 @@ Array [
 }",
   <i
     aria-hidden="true"
-    class=" icon-0-2-1 icon-d0-0-2-2 natds-icons natds-icons-outlined-default-mockup"
+    class=" icon-0-2-1 icon-d0-0-2-2 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
     data-testid="icon-outlined-default-mockup"
     role="img"
   />,
diff --git a/packages/react/src/components/IconButton/IconButton.stories.tsx b/packages/react/src/components/IconButton/IconButton.stories.tsx
index 4a42038e97..4bc9192ef8 100644
--- a/packages/react/src/components/IconButton/IconButton.stories.tsx
+++ b/packages/react/src/components/IconButton/IconButton.stories.tsx
@@ -9,31 +9,26 @@ import Autocomplete from '../Autocomplete/Autocomplete'
 import { OptionProps } from '../Autocomplete/Autocomplete.props'
 
 const componentStatus = `
----
-
-**NOTE**: This component is available with the following attribute status:
-
-- **Color**
-  - ✅ \`primary\`
-  - ✅ \`highEmphasis\`
-- **Size**
-  - ✅ \`semi\`
-  - ✅ \`semiX\`
-  - ✅ \`medium\`
-- **Background Style**
-  - ✅ \`none\`
-  - ✅ \`float\`
-  - ✅ \`overlay\`
-- ✅  **Disabled**
-
----
+> Icon button allow users to take actions, and make choices, with a single tap.
+
+## Properties
+| Property                      | Values                                   |    Status           |
+|---                            |                                       ---|                  ---|
+| **ariaLabel**                 | string                                   | ✅ Available        |
+| **backgroundStyle**           | none, float, overlay                     | ✅ Available        |
+| **disabled**                  | true/false                               | ✅ Available        |
+| **IconComponent**             | componente Icon                          | ✅ Available        |
+| **onClick**                   | function                                 | ✅ Available        |
+| **size**                      | semi, medium, semiX                      | ✅ Available        |
+| **color**                     | primary, highEmphasis                    | ✅ Available        |
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/IconButton',
   component: IconButton,
   parameters: {
-    componentSubtitle: 'Icon button allow users to take actions, and make choices, with a single tap.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx
index 7f6ab0009c..50de6f92fd 100644
--- a/packages/react/src/components/IconButton/IconButton.tsx
+++ b/packages/react/src/components/IconButton/IconButton.tsx
@@ -18,7 +18,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({
   return (
     <IconButtonBase
       ariaLabel={ariaLabel}
-      className={`${className} ${iconButtonContainer}`}
+      className={`${className} ${iconButtonContainer} IconButton-gaya`}
       disabled={disabled}
       onClick={onClick}
       ref={ref}
diff --git a/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
index 2acb4e28ae..8847b925e7 100644
--- a/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ b/packages/react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -153,13 +153,13 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         disabled=""
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -325,12 +325,12 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -493,13 +493,13 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         disabled=""
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -665,12 +665,12 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -834,13 +834,13 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         disabled=""
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -1005,12 +1005,12 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -1175,12 +1175,12 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -1345,12 +1345,12 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -1515,12 +1515,12 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
@@ -1685,12 +1685,12 @@ Array [
       </div>
       <button
         aria-label=""
-        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 base-0-2-3 base-d0-0-2-4"
+        class=" iconButtonContainer-0-2-1 iconButtonContainer-d0-0-2-2 IconButton-gaya base-0-2-3 base-d0-0-2-4"
         type="button"
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup"
+          class=" icon-0-2-15 icon-d0-0-2-16 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
           data-testid="icon-outlined-default-mockup"
           role="img"
         />
diff --git a/packages/react/src/components/Image/Image.stories.tsx b/packages/react/src/components/Image/Image.stories.tsx
index 027212d2f5..97928f74d4 100644
--- a/packages/react/src/components/Image/Image.stories.tsx
+++ b/packages/react/src/components/Image/Image.stories.tsx
@@ -5,18 +5,20 @@ import StoryContainer from '../../helpers/StoryContainer'
 import Typography from '../Typography'
 
 const componentStatus = `
-- - -
+> Image is used to display images in the user interface,.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                  | Values                     |    Status           |
+|---                        |                         ---|                  ---|
+| **variant(no prop)**      | Standard                   | ✅ Available        |
+| **sourceImage**           | string                     | ✅ Available        |
+| **fallbackImage**         | string                     | ✅ Available        |
+| **alternativeText**       | string                     | ✅ Available        |
+| **highlight**             | true/false                 | ✅ Available        |
+| **fade**                  | top, bottom, right, left   | ✅ Available        |
+| **border**                | medium, circle             | ✅ Available        |
 
-  - ❌ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-    - ❌ \`Types\`
-
-- - -
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx
index 9bbe10a9f1..ba87ea9e44 100644
--- a/packages/react/src/components/Image/Image.tsx
+++ b/packages/react/src/components/Image/Image.tsx
@@ -25,7 +25,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
     }
 
     return (
-      <div className={`${className} ${wrapper}`}>
+      <div className={`${className} ${wrapper} Image-gaya`}>
         <img
           {...rest}
           ref={ref}
diff --git a/packages/react/src/components/Image/__snapshots__/Image.test.tsx.snap b/packages/react/src/components/Image/__snapshots__/Image.test.tsx.snap
index 6906ec0944..cffc386655 100644
--- a/packages/react/src/components/Image/__snapshots__/Image.test.tsx.snap
+++ b/packages/react/src/components/Image/__snapshots__/Image.test.tsx.snap
@@ -29,7 +29,7 @@ Array [
     "baseElement": <body>
       <div>
         <div
-          class=" wrapper-0-2-1 wrapper-d0-0-2-3"
+          class=" wrapper-0-2-1 wrapper-d0-0-2-3 Image-gaya"
         >
           <img
             alt=""
@@ -40,7 +40,7 @@ Array [
     </body>,
     "container": <div>
       <div
-        class=" wrapper-0-2-1 wrapper-d0-0-2-3"
+        class=" wrapper-0-2-1 wrapper-d0-0-2-3 Image-gaya"
       >
         <img
           alt=""
diff --git a/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap b/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap
index 6c0bc1f02e..0f4f648451 100644
--- a/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap
+++ b/packages/react/src/components/Input/InputAction/__snapshots__/InputAction.test.tsx.snap
@@ -174,13 +174,13 @@ Array [
         </div>
         <button
           aria-label="some rating icon button"
-          class=" iconButtonContainer-0-2-6 iconButtonContainer-d0-0-2-7 base-0-2-8 base-d0-0-2-9"
+          class=" iconButtonContainer-0-2-6 iconButtonContainer-d0-0-2-7 IconButton-gaya base-0-2-8 base-d0-0-2-9"
           data-testid="ds-input-action-icon"
           type="button"
         >
           <i
             aria-hidden="true"
-            class=" icon-0-2-20 icon-d0-0-2-21 natds-icons natds-icons-filled-action-rating"
+            class=" icon-0-2-20 icon-d0-0-2-21 natds-icons natds-icons-filled-action-rating Icon-gaya"
             data-testid="icon-filled-action-rating"
             role="img"
           />
diff --git a/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap b/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap
index 347a156d52..4cb123c953 100644
--- a/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap
+++ b/packages/react/src/components/Input/InputHelperText/__snapshots__/InputHelperText.test.tsx.snap
@@ -63,7 +63,7 @@ Array [
     >
       <i
         aria-hidden="true"
-        class=" icon-0-2-3 icon-d0-0-2-4 natds-icons natds-icons-outlined-action-cancel"
+        class=" icon-0-2-3 icon-d0-0-2-4 natds-icons natds-icons-outlined-action-cancel Icon-gaya"
         data-testid="icon-outlined-action-cancel"
         role="img"
       />
@@ -108,7 +108,7 @@ Array [
     >
       <i
         aria-hidden="true"
-        class=" icon-0-2-3 icon-d0-0-2-4 natds-icons natds-icons-outlined-action-check"
+        class=" icon-0-2-3 icon-d0-0-2-4 natds-icons natds-icons-outlined-action-check Icon-gaya"
         data-testid="icon-outlined-action-check"
         role="img"
       />
diff --git a/packages/react/src/components/Link/Link.stories.tsx b/packages/react/src/components/Link/Link.stories.tsx
index 1f5b02f32a..42320f44b6 100644
--- a/packages/react/src/components/Link/Link.stories.tsx
+++ b/packages/react/src/components/Link/Link.stories.tsx
@@ -4,30 +4,29 @@ import { Link, LinkProps } from '.'
 import { Icon } from '../Icon'
 
 const componentStatus = `
----
+> The link component allows you to have a pattern for anchor text.
 
-**NOTE FOR UX**: This component is available in the following variants:
+## Properties
+| Property                  | Values                     |    Status           |
+|---                        |                         ---|                  ---|
+| **variant**               | regular, underline         | ✅ Available        |
+| **href**                  | string href                | ✅ Available        |
+| **hrefLang**              | string hrefLang            | ✅ Available        |
+| **text**                  | string                     | ✅ Available        |
+| **textColor**             | default, light             | ✅ Available        |
+| **target**                | target ancor               | ✅ Available        |
+| **iconPosition**          | left, right                | ✅ Available        |
+| **IconComponent**         | component Icon             | ✅ Available        |
 
-  - ✅ \`regular\`
-  - ✅ \`underline\`
 
-With the following attribute status:
-
-  - **Icon**
-      - ✅ \`left\`
-      - ✅ \`right\`
-  - **Color**
-      - ✅ \`default\`
-      - ✅ \`light\`
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Link',
   component: Link,
   parameters: {
-    componentSubtitle: 'The link component allows you to have a pattern for anchor text.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
index c76bed9e61..3a5ca548a6 100644
--- a/packages/react/src/components/Link/Link.tsx
+++ b/packages/react/src/components/Link/Link.tsx
@@ -22,7 +22,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     return (
       <span className={container}>
         <a
-          className={`${className} ${link}`}
+          className={`${className} ${link} Link-gaya`}
           data-testid={testID}
           ref={ref}
           href={href}
diff --git a/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap
index c52ddf6166..8851f14bbd 100644
--- a/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap
+++ b/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -32,7 +32,7 @@ Array [
       class="container-0-2-1 container-d0-0-2-3"
     >
       <a
-        class=" link-0-2-2 link-d1-0-2-4"
+        class=" link-0-2-2 link-d1-0-2-4 Link-gaya"
         href="https://"
       >
         Link
@@ -74,7 +74,7 @@ Array [
       class="container-0-2-1 container-d0-0-2-3"
     >
       <a
-        class=" link-0-2-2 link-d1-0-2-4"
+        class=" link-0-2-2 link-d1-0-2-4 Link-gaya"
         href="https://"
       >
         Link
@@ -125,14 +125,14 @@ Array [
       class="container-0-2-1 container-d0-0-2-3"
     >
       <a
-        class=" link-0-2-2 link-d1-0-2-4"
+        class=" link-0-2-2 link-d1-0-2-4 Link-gaya"
         href="https://"
       >
         Link
       </a>
       <i
         aria-hidden="true"
-        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-filled-default-mockup"
+        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-filled-default-mockup Icon-gaya"
         data-testid="icon-filled-default-mockup"
         role="img"
       />
@@ -182,14 +182,14 @@ Array [
       class="container-0-2-1 container-d0-0-2-3"
     >
       <a
-        class=" link-0-2-2 link-d1-0-2-4"
+        class=" link-0-2-2 link-d1-0-2-4 Link-gaya"
         href="https://"
       >
         Link
       </a>
       <i
         aria-hidden="true"
-        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-filled-default-mockup"
+        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-filled-default-mockup Icon-gaya"
         data-testid="icon-filled-default-mockup"
         role="img"
       />
@@ -230,7 +230,7 @@ Array [
       class="container-0-2-1 container-d0-0-2-3"
     >
       <a
-        class=" link-0-2-2 link-d1-0-2-4"
+        class=" link-0-2-2 link-d1-0-2-4 Link-gaya"
         href="https://"
       >
         Link
diff --git a/packages/react/src/components/ListItem/ListItem.stories.tsx b/packages/react/src/components/ListItem/ListItem.stories.tsx
index 8ad09f14aa..58be456333 100644
--- a/packages/react/src/components/ListItem/ListItem.stories.tsx
+++ b/packages/react/src/components/ListItem/ListItem.stories.tsx
@@ -6,21 +6,19 @@ import { ListItem, ListItemProps } from '.'
 import { Divider as DividerComponent } from '../Divider'
 
 const componentStatus = `
----
+> Lists are continuous, vertical indexes of content such as text and images.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                  | Values                     |    Status           |
+|---                        |                         ---|                  ---|
+| **variant (no prop)**     | base                       | ✅ Available        |
+| **interaction**           | none, action, selectable   | ✅ Available        |
+| **key**                   | string, number             | ✅ Available        |
+| **onClick**               | function                   | ✅ Available        |
+| **selected**              | true/false                 | ✅ Available        |
+| **SeparatorComponent**    | component                  | ✅ Available        |
 
-  - ✅ \`base\`
-
-With the following attribute status:
-
-- **Interaction**
-    - ✅ \`none\`
-    - ✅ \`action\`
-    - ✅ \`selectable\`
-- ✅ **Divider**
-
----
+## Technical Usages Examples
 `
 
 export default {
@@ -28,7 +26,7 @@ export default {
   component: ListItem,
   parameters: {
     componentSubtitle:
-      'Lists are continuous, vertical indexes of content such as text and images.',
+      '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx
index f64839957a..832c7c1ff7 100644
--- a/packages/react/src/components/ListItem/ListItem.tsx
+++ b/packages/react/src/components/ListItem/ListItem.tsx
@@ -17,7 +17,7 @@ const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(({
   return (
     <Ripple disabled={interaction !== 'action'} fullWidth>
       <li
-        className={`${className} ${listItem}`}
+        className={`${className} ${listItem} ListItem-gaya`}
         onClick={onClick}
         data-testid={testID}
         ref={ref}
diff --git a/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap b/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
index d39283aed2..a1b73e20a8 100644
--- a/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
+++ b/packages/react/src/components/ListItem/__snapshots__/ListItem.test.tsx.snap
@@ -137,7 +137,7 @@ Array [
         />
       </div>
       <li
-        class=" listItem-0-2-1 listItem-d0-0-2-2"
+        class=" listItem-0-2-1 listItem-d0-0-2-2 ListItem-gaya"
         tabindex="0"
       >
         some item here
@@ -286,7 +286,7 @@ Array [
         />
       </div>
       <li
-        class=" listItem-0-2-1 listItem-d0-0-2-2"
+        class=" listItem-0-2-1 listItem-d0-0-2-2 ListItem-gaya"
         tabindex="0"
       >
         some item here
@@ -444,13 +444,13 @@ Array [
         />
       </div>
       <li
-        class=" listItem-0-2-1 listItem-d0-0-2-2"
+        class=" listItem-0-2-1 listItem-d0-0-2-2 ListItem-gaya"
         tabindex="0"
       >
         some item here
       </li>
       <hr
-        class=" divider-0-2-13 divider-d0-0-2-14"
+        class=" divider-0-2-13 divider-d0-0-2-14 Divider-gaya"
       />
     </div>
   </div>,
diff --git a/packages/react/src/components/Logo/Logo.stories.tsx b/packages/react/src/components/Logo/Logo.stories.tsx
index 5e01867278..1342786c46 100644
--- a/packages/react/src/components/Logo/Logo.stories.tsx
+++ b/packages/react/src/components/Logo/Logo.stories.tsx
@@ -4,49 +4,21 @@ import { Logo, LogoProps } from '.'
 import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
----
+> Logo adapted as brand standards for each company
 
-Attribute status:
+## Properties
+| Property                      | Values                                            |    Status           |
+|---                            |                                                ---|                  ---|
+| **variant (no prop)**         | standard                                          | ✅ Available        |
+| **arialabel**                 | string                                            | ✅ Available        |
+| **color**                     | neutral, primary, secondary, highlight, surface   | ✅ Available        |
+| **model**                     | a, b                                              | ✅ Available        |
+| **languages**                 | default, pt, es                                   | ✅ Available        |
+| **mode**                      | light, dark                                       | ✅ Available        |
+| **size**                      | medium, mediumX, large, largeX, largeXX, <br /> largeXXX, huge, hugeX, hugeXX, hugeXXX, veryHuge       | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-- **Size**
-    - ✅ \`medium\`
-    - ✅ \`mediumx\`
-    - ✅ \`large\`
-    - ✅ \`largex\`
-    - ✅ \`largexx\`
-    - ✅ \`largexxx\`
-    - ✅ \`huge\`
-    - ✅ \`hugex\`
-    - ✅ \`hugexx\`
-    - ✅ \`hugexxx\`
-    - ✅ \`veryhuge\`
-- **Color**
-    - ✅ \`neutral\`
-    - ✅ \`primary\`
-    - ✅ \`secondary\`
-    - ✅ \`highlight\`
-    - ✅ \`surface\`
-- **Model**
-    - ✅ \`primary\`
-    - ✅ \`secondary\`
-- **Language**
-    - ✅ \`default\`
-    - ✅ \`es\`
-    - ✅ \`pt\`
-- **Brand**
-    - ✅ \`avon\`
-    - ✅ \`avon_v2\`
-    - ✅ \`natura\`
-    - ✅ \`natura_v2\`
-    - ✅ \`theBodyShop\`
-    - ✅ \`consultoriaDeBeleza\`
-    - ✅ \`casaEestilo\`
-    - ✅ \`biome\`
-- **Model**
-    - ✅ \`light\`
-    - ✅ \`dark\`
-
----
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/Logo/Logo.tsx b/packages/react/src/components/Logo/Logo.tsx
index c2ff172a38..f5ff40b014 100644
--- a/packages/react/src/components/Logo/Logo.tsx
+++ b/packages/react/src/components/Logo/Logo.tsx
@@ -30,7 +30,7 @@ const Logo = React.forwardRef<HTMLDivElement, LogoProps>(
     return (
       <div
         aria-label={arialabel}
-        className={`${className} ${root}`}
+        className={`${className} ${root} Logo-gaya`}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: logo }}
         ref={ref}
diff --git a/packages/react/src/components/Logo/__snapshots__/Logo.test.tsx.snap b/packages/react/src/components/Logo/__snapshots__/Logo.test.tsx.snap
index 496118749a..8737044414 100644
--- a/packages/react/src/components/Logo/__snapshots__/Logo.test.tsx.snap
+++ b/packages/react/src/components/Logo/__snapshots__/Logo.test.tsx.snap
@@ -21,7 +21,7 @@ Array [
   <div>
     <div
       aria-label="logo"
-      class=" root-0-2-1 root-d0-0-2-2"
+      class=" root-0-2-1 root-d0-0-2-2 Logo-gaya"
       role="img"
     >
       <svg
@@ -60,7 +60,7 @@ Array [
   <div>
     <div
       aria-label="logo"
-      class=" root-0-2-1 root-d0-0-2-2"
+      class=" root-0-2-1 root-d0-0-2-2 Logo-gaya"
       role="img"
     >
       <svg
@@ -123,7 +123,7 @@ Array [
   <div>
     <div
       aria-label="logo"
-      class=" root-0-2-1 root-d0-0-2-2"
+      class=" root-0-2-1 root-d0-0-2-2 Logo-gaya"
       role="img"
     >
       <svg
@@ -186,7 +186,7 @@ Array [
   <div>
     <div
       aria-label="logo"
-      class=" root-0-2-1 root-d0-0-2-2"
+      class=" root-0-2-1 root-d0-0-2-2 Logo-gaya"
       role="img"
     >
       <svg
@@ -249,7 +249,7 @@ Array [
   <div>
     <div
       aria-label="logo"
-      class=" root-0-2-1 root-d0-0-2-2"
+      class=" root-0-2-1 root-d0-0-2-2 Logo-gaya"
       role="img"
     >
       <svg
diff --git a/packages/react/src/components/MenuItem/MenuItem.stories.tsx b/packages/react/src/components/MenuItem/MenuItem.stories.tsx
index 346b7d331c..82a579ef46 100644
--- a/packages/react/src/components/MenuItem/MenuItem.stories.tsx
+++ b/packages/react/src/components/MenuItem/MenuItem.stories.tsx
@@ -5,24 +5,23 @@ import { MenuItem, MenuItemProps } from '.'
 import Badge from '../Badge'
 
 const componentStatus = `
----
+> MenuItem represents a menu item in a user interface, used in conjunction with menus and lists.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                                    |    Status           |
+|---                            |                                                        ---|                  ---|
+| **variant (no prop)**         | standard                                                  | ✅ Available        |
+| **onClick**                   | function                                                  | ✅ Available        |
+| **disabled**                  | true/false                                                | ✅ Available        |
+| **selected**                  | true/false                                                | ✅ Available        |
+| **activated**                 | true/false                                                | ✅ Available        |
+| **type**                      | submenu, title, regular                                   | ✅ Available        |
+| **href**                      | href                                                      | ✅ Available        |
+| **hrefLang**                  | hrefLang                                                  | ✅ Available        |
+| **add**                       | (available but with alternative composition)              | ✅ Available        |
+| **Action**                    | left, right (available but with alternative composition)  | ✅ Available        |
 
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - ✅ **Submenu**
-  - ✅ **Actived**
-  - ✅ **Selected**
-  - ✅ **Disabled**
-  - ✅ **Add** (available but with alternative composition)
-  - **Action**
-      - ✅ \`left\` (available but with alternative composition)
-      - ✅ \`right\` (available but with alternative composition)
-
----
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/MenuItem/MenuItem.tsx b/packages/react/src/components/MenuItem/MenuItem.tsx
index be3c3d662e..46b74b46fd 100644
--- a/packages/react/src/components/MenuItem/MenuItem.tsx
+++ b/packages/react/src/components/MenuItem/MenuItem.tsx
@@ -20,7 +20,7 @@ const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>(({
   return (
     <li
       data-testid={testID}
-      className={`${className} ${listItem}`}
+      className={`${className} ${listItem} MenuItem-gaya`}
       ref={ref}
       tabIndex={0}
       onClick={onClick}
diff --git a/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
index bf0a59668f..4fbd14056e 100644
--- a/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
+++ b/packages/react/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
@@ -119,7 +119,7 @@ Array [
   <div>
     <li
       aria-disabled="false"
-      class=" listItem-0-2-1"
+      class=" listItem-0-2-1 MenuItem-gaya"
       tabindex="0"
     >
       <div
@@ -265,7 +265,7 @@ Array [
   <div>
     <li
       aria-disabled="false"
-      class=" listItem-0-2-1"
+      class=" listItem-0-2-1 MenuItem-gaya"
       tabindex="0"
     >
       <div
@@ -411,7 +411,7 @@ Array [
   <div>
     <li
       aria-disabled="true"
-      class=" listItem-0-2-1"
+      class=" listItem-0-2-1 MenuItem-gaya"
       tabindex="0"
     >
       <div
@@ -557,7 +557,7 @@ Array [
   <div>
     <li
       aria-disabled="false"
-      class=" listItem-0-2-1"
+      class=" listItem-0-2-1 MenuItem-gaya"
       tabindex="0"
     >
       <div
@@ -703,7 +703,7 @@ Array [
   <div>
     <li
       aria-disabled="false"
-      class=" listItem-0-2-1"
+      class=" listItem-0-2-1 MenuItem-gaya"
       tabindex="0"
     >
       <div
@@ -849,7 +849,7 @@ Array [
   <div>
     <li
       aria-disabled="false"
-      class=" listItem-0-2-1"
+      class=" listItem-0-2-1 MenuItem-gaya"
       tabindex="0"
     >
       <div
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.tsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.tsx
index 8e0fbb84fb..26e354b390 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.tsx
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.tsx
@@ -5,30 +5,26 @@ import StoryContainer from '../../helpers/StoryContainer'
 import { ProgressIndicator, ProgressIndicatorProps } from '.'
 
 const componentStatus = `
----
-
-**NOTE**: This component is available in the following variant:
-
-  - ✅ \`circular\`
-  - ❌ \`linear \`
-
-With the following attribute status:
-
-- **Size**
-  - ✅  \`standard\`
-  - ✅  \`semi\`
-  - ✅  \`medium\`
-  - ✅  \`large\`
-- ✅ **Layer**
-
----
+> Progress indicators express an unspecified wait time.
+
+## Properties
+| Property                      | Values                           |    Status           |
+|---                            |                               ---|                  ---|
+| **variant(no prop)**          | circular                         | ✅ Available        |
+| **ariaLabel**                 | string                           | ✅ Available        |
+| **showBackdrop**              | true/false                       | ✅ Available        |
+| **size**                      | standard, semi, medium, large    | ✅ Available        |
+| **Layer**                     | (available but with alternative composition)    | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
+
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/ProgressIndicator',
   component: ProgressIndicator,
   parameters: {
-    componentSubtitle: 'Progress indicators express an unspecified wait time.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx
index 11210f23e4..045aa0e8a7 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx
@@ -14,7 +14,7 @@ const ProgressIndicator = React.forwardRef<HTMLDivElement, ProgressIndicatorProp
 
   return (
     <div ref={ref} className={backdrop} role="progressbar" aria-label={ariaLabel} data-testid={testID}>
-      <div className={`${className} ${loader}`}>
+      <div className={`${className} ${loader} ProgressIndicator-gaya`}>
         <svg viewBox="25 25 50 50">
           <circle cx="50" cy="50" r="20" />
         </svg>
diff --git a/packages/react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.props.test.tsx.snap b/packages/react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.props.test.tsx.snap
index 71832a6f18..d66de5ffe4 100644
--- a/packages/react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.props.test.tsx.snap
+++ b/packages/react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.props.test.tsx.snap
@@ -65,7 +65,7 @@ Array [
       role="progressbar"
     >
       <div
-        class=" loader-0-2-2 loader-d1-0-2-6"
+        class=" loader-0-2-2 loader-d1-0-2-6 ProgressIndicator-gaya"
       >
         <svg
           viewBox="25 25 50 50"
@@ -146,7 +146,7 @@ Array [
       role="progressbar"
     >
       <div
-        class=" loader-0-2-2 loader-d1-0-2-6"
+        class=" loader-0-2-2 loader-d1-0-2-6 ProgressIndicator-gaya"
       >
         <svg
           viewBox="25 25 50 50"
@@ -227,7 +227,7 @@ Array [
       role="progressbar"
     >
       <div
-        class=" loader-0-2-2 loader-d1-0-2-6"
+        class=" loader-0-2-2 loader-d1-0-2-6 ProgressIndicator-gaya"
       >
         <svg
           viewBox="25 25 50 50"
diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.tsx b/packages/react/src/components/RadioButton/RadioButton.stories.tsx
index 6467d08328..cb3e7a62d9 100644
--- a/packages/react/src/components/RadioButton/RadioButton.stories.tsx
+++ b/packages/react/src/components/RadioButton/RadioButton.stories.tsx
@@ -3,20 +3,31 @@ import { Story, Meta } from '@storybook/react'
 import { RadioButton, RadioButtonProps } from '.'
 
 const componentStatus = `
----
-
-**NOTE FOR UXs**: This component is available with the following attribute status:
-
-  - ✅ **Disabled**
-
----
+> RadioButton allow users to select one option from a set.
+
+## Properties
+| Property                      | Values                           |    Status           |
+|---                            |                               ---|                  ---|
+| **variant(no prop)**          | Standard                         | ✅ Available        |
+| **disabled**                  | true/false                       | ✅ Available        |
+| **id**                        | string                           | ✅ Available        |
+| **label**                     | string                           | ✅ Available        |
+| **name**                      | string                           | ✅ Available        |
+| **onBlur**                    | function                         | ✅ Available        |
+| **onChange**                  | function                         | ✅ Available        |
+| **onFocus**                   | function                         | ✅ Available        |
+| **required**                  | true/false                       | ✅ Available        |
+| **value**                     | string                           | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
+
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/RadioButton',
   component: RadioButton,
   parameters: {
-    componentSubtitle: 'RadioButton buttons allow users to select one option from a set.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/RadioButton/RadioButton.tsx b/packages/react/src/components/RadioButton/RadioButton.tsx
index f49560e4b8..f96880b583 100644
--- a/packages/react/src/components/RadioButton/RadioButton.tsx
+++ b/packages/react/src/components/RadioButton/RadioButton.tsx
@@ -27,7 +27,7 @@ const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(({
   const getRippleColor = checked && !disabled ? 'primary' : 'highlight'
 
   return (
-    <div className={`${className} ${container}`}>
+    <div className={`${className} ${container} RadioButton-gaya`}>
       <Ripple
         brand={brand}
         isCentered
diff --git a/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 040df6dd85..41ca9d20b5 100644
--- a/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/packages/react/src/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -155,7 +155,7 @@ Array [
     "baseElement": <body>
       <div>
         <div
-          class=" container-0-2-3"
+          class=" container-0-2-3 RadioButton-gaya"
         >
           <div
             class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -188,7 +188,7 @@ Array [
     </body>,
     "container": <div>
       <div
-        class=" container-0-2-3"
+        class=" container-0-2-3 RadioButton-gaya"
       >
         <div
           class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -423,7 +423,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-3"
+      class=" container-0-2-3 RadioButton-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -608,7 +608,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-3"
+      class=" container-0-2-3 RadioButton-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
@@ -796,7 +796,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-3"
+      class=" container-0-2-3 RadioButton-gaya"
     >
       <div
         class="wrapper-0-2-8 wrapper-d0-0-2-13"
diff --git a/packages/react/src/components/Rating/Rating.stories.tsx b/packages/react/src/components/Rating/Rating.stories.tsx
index 8076dafd2b..c9614cc5cf 100644
--- a/packages/react/src/components/Rating/Rating.stories.tsx
+++ b/packages/react/src/components/Rating/Rating.stories.tsx
@@ -7,37 +7,30 @@ import {
 } from './Rating.props'
 
 const componentStatus = `
----
+> Provides a user interactive stars for rating or checking something’s rating.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                        |    Status           |
+|---                            |                                            ---|                  ---|
+| **variant**                   | counter, input, read-only                     | ✅ Available        |
+| **ariaLabel**                 | string                                        | ✅ Available        |
+| **ariaLabelGroup**            | string                                        | ✅ Available        |
+| **align**                     | left, right (only for Counter variant)        | ✅ Available        |
+| **label**                     | string (only for Input and Counter variant)   | ✅ Available        |
+| **size**                      | small:(Read-Only and Counter variants), <br /> standard, semi, semiX, <br />medium:(only for Input variant)  | ✅ Available        |
+| **disabled**                  | true/false  (only for Input variant)          | ✅ Available        |
+| **onClick**                   | function                                      | ✅ Available        |
+| **rate**                      | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5  (only for Read-Only variant)                                     | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ \`counter\`
-  - ✅ \`input\`
-  - ✅ \`read-only\`
-
-With the following attribute status:
-
-- ✅ **Label** (only for Input and Counter variant)
-- ✅ **Disabled** (only for Input variant)
-- ✅ **Rate** (only for Read-Only variant)
-- **Size**
-    - ✅ \`small\` (only for Read-Only and Counter variants)
-    - ✅ \`standard\`
-    - ✅ \`semi\`
-    - ✅ \`semiX\`
-    - ✅ \`medium\` (only for Input variant)
-- **Align** (only for Counter variant)
-    - ✅ \`left\`
-    - ✅ \`right\`
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Rating',
   component: Rating,
   parameters: {
-    componentSubtitle: 'Provides a user interactive stars for rating or checking something’s rating.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/Rating/Rating.tsx b/packages/react/src/components/Rating/Rating.tsx
index 0bccc720ce..f22c6af5b7 100644
--- a/packages/react/src/components/Rating/Rating.tsx
+++ b/packages/react/src/components/Rating/Rating.tsx
@@ -21,7 +21,7 @@ const Rating = ({ className = '', ...props }: RatingProps) => {
   const { container } = useContainerStyles(props)
 
   return (
-    <div className={`${className} ${container}`}>
+    <div className={`${className} ${container} Rating-gaya`}>
       {renderVariant({ ...props })}
     </div>
   )
diff --git a/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap b/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
index 03f44a6230..57cbe5dea8 100644
--- a/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
+++ b/packages/react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
@@ -171,7 +171,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-5 rating-d0-0-2-6"
@@ -203,7 +203,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -392,7 +392,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-5 rating-d0-0-2-6"
@@ -424,7 +424,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -770,7 +770,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-5 rating-d0-0-2-6"
@@ -801,7 +801,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -834,7 +834,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -867,7 +867,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -900,7 +900,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -933,7 +933,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1264,7 +1264,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-5 rating-d0-0-2-6"
@@ -1296,7 +1296,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1330,7 +1330,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1364,7 +1364,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1398,7 +1398,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1432,7 +1432,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1778,7 +1778,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-5 rating-d0-0-2-6"
@@ -1809,7 +1809,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1842,7 +1842,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1875,7 +1875,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1908,7 +1908,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -1941,7 +1941,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -2287,7 +2287,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-5 rating-d0-0-2-6"
@@ -2318,7 +2318,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d0-0-2-23 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -2351,7 +2351,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d1-0-2-30 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -2384,7 +2384,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d2-0-2-37 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -2417,7 +2417,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d3-0-2-44 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -2450,7 +2450,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating"
+                class=" icon-0-2-22 icon-d4-0-2-51 natds-icons natds-icons-outlined-action-rating Icon-gaya"
                 data-testid="icon-outlined-action-rating"
                 role="button"
               />
@@ -2768,7 +2768,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-3 rating-d0-0-2-4"
@@ -2800,7 +2800,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d0-0-2-21 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d0-0-2-21 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -2834,7 +2834,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d1-0-2-28 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d1-0-2-28 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -2868,7 +2868,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d2-0-2-35 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d2-0-2-35 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -2902,7 +2902,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d3-0-2-42 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d3-0-2-42 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -2936,7 +2936,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d4-0-2-49 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d4-0-2-49 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -3249,7 +3249,7 @@ Array [
   }",
   <div>
     <div
-      class=" container-0-2-1 container-d0-0-2-2"
+      class=" container-0-2-1 container-d0-0-2-2 Rating-gaya"
     >
       <div
         class="rating-0-2-3 rating-d0-0-2-4"
@@ -3281,7 +3281,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d0-0-2-21 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d0-0-2-21 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -3315,7 +3315,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d1-0-2-28 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d1-0-2-28 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -3349,7 +3349,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d2-0-2-35 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d2-0-2-35 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -3383,7 +3383,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d3-0-2-42 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d3-0-2-42 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -3417,7 +3417,7 @@ Array [
               <i
                 aria-hidden="true"
                 aria-label=""
-                class=" icon-0-2-20 icon-d4-0-2-49 natds-icons natds-icons-filled-action-rating"
+                class=" icon-0-2-20 icon-d4-0-2-49 natds-icons natds-icons-filled-action-rating Icon-gaya"
                 data-testid="icon-filled-action-rating"
                 role="button"
               />
@@ -3594,7 +3594,7 @@ Array [
           <i
             aria-hidden="true"
             aria-label="rating"
-            class=" icon-0-2-16 icon-d0-0-2-17 natds-icons natds-icons-filled-action-rating"
+            class=" icon-0-2-16 icon-d0-0-2-17 natds-icons natds-icons-filled-action-rating Icon-gaya"
             data-testid="icon-filled-action-rating"
             role="button"
           />
@@ -3769,7 +3769,7 @@ Array [
           <i
             aria-hidden="true"
             aria-label="rating"
-            class=" icon-0-2-16 icon-d0-0-2-17 natds-icons natds-icons-outlined-action-rating"
+            class=" icon-0-2-16 icon-d0-0-2-17 natds-icons natds-icons-outlined-action-rating Icon-gaya"
             data-testid="icon-outlined-action-rating"
             role="button"
           />
@@ -3944,7 +3944,7 @@ Array [
           <i
             aria-hidden="true"
             aria-label="rating"
-            class=" icon-0-2-16 icon-d0-0-2-17 natds-icons natds-icons-filled-action-rating"
+            class=" icon-0-2-16 icon-d0-0-2-17 natds-icons natds-icons-filled-action-rating Icon-gaya"
             data-testid="icon-filled-action-rating"
             role="button"
           />
diff --git a/packages/react/src/components/Select/Select.stories.tsx b/packages/react/src/components/Select/Select.stories.tsx
index f8d9296f22..f493e686fe 100644
--- a/packages/react/src/components/Select/Select.stories.tsx
+++ b/packages/react/src/components/Select/Select.stories.tsx
@@ -3,26 +3,26 @@ import { Story, Meta } from '@storybook/react'
 import { Select, SelectProps, OptionProps } from '.'
 
 const componentStatus = `
-- - -
+> Allow users to choose an option from a predefined list.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                        |    Status           |
+|---                            |                                            ---|                  ---|
+| **variant (no prop)**         | Standard                                      | ✅ Available        |
+| **label**                     | string                                        | ✅ Available        |
+| **name**                      | string                                        | ✅ Available        |
+| **placeholder**               | string                                        | ✅ Available        |
+| **options**                   | [{value: string, label: string}]              | ✅ Available        |
+| **size**                      | medium, mediumX                               | ✅ Available        |
+| **value**                     | string                                        | ✅ Available        |
+| **helperText**                | string                                        | ✅ Available        |
+| **feedback**                  | success, error                                | ✅ Available        |
+| **required**                  | true/false                                    | ✅ Available        |
+| **disabled**                  | true/false                                    | ✅ Available        |
+| **onChange**                  | function                                      | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-    - ✅ Label
-    - ✅ Name
-    - ✅ Placeholder
-    - ✅ Options
-    - ✅ Size
-    - ✅ HelperText
-    - ✅ Feedback
-    - ✅ Required
-    - ✅ Disabled
-
-- - -
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index f522f77c4e..115d4c4b3a 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -29,7 +29,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     })
 
     return (
-      <div data-testid={testID} ref={ref} className={wrapper}>
+      <div data-testid={testID} ref={ref} className={`${wrapper} Select-gaya`}>
         <Label htmlFor={name} label={label} className={labelText} required={required} />
 
         <div className={inputWrapper}>
diff --git a/packages/react/src/components/Select/__snapshots__/Select.test.tsx.snap b/packages/react/src/components/Select/__snapshots__/Select.test.tsx.snap
index 9fc09112e8..eafde5e597 100644
--- a/packages/react/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/packages/react/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Select component should render correctly with default props 1`] = `
 <div>
   <div
-    class="wrapper-0-2-1"
+    class="wrapper-0-2-1 Select-gaya"
   >
     <label
       class="labelText-0-2-2 labelText-d0-0-2-6 labelContainer-0-2-9"
@@ -33,7 +33,7 @@ exports[`Select component should render correctly with default props 1`] = `
       </select>
       <i
         aria-hidden="true"
-        class="icon-0-2-5 icon-d2-0-2-8 icon-0-2-10 icon-d0-0-2-11 natds-icons natds-icons-outlined-navigation-arrowbottom"
+        class="icon-0-2-5 icon-d2-0-2-8 icon-0-2-10 icon-d0-0-2-11 natds-icons natds-icons-outlined-navigation-arrowbottom Icon-gaya"
         data-testid="icon-outlined-navigation-arrowbottom"
         role="img"
       />
diff --git a/packages/react/src/components/Shortcut/Shortcut.stories.tsx b/packages/react/src/components/Shortcut/Shortcut.stories.tsx
index b67ea07f62..7abdd883b9 100644
--- a/packages/react/src/components/Shortcut/Shortcut.stories.tsx
+++ b/packages/react/src/components/Shortcut/Shortcut.stories.tsx
@@ -6,29 +6,32 @@ import StoryContainer from '../../helpers/StoryContainer'
 import Badge from '../Badge'
 
 const componentStatus = `
-- - -
+> Used for quick access to a page and facilitate navigation.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                        |    Status           |
+|---                            |                                            ---|                  ---|
+| **variant**                   | contained , outlined                          | ✅ Available        |
+| **ariaLabel**                 | string                                        | ✅ Available        |
+| **disabled**                  | true/false                                    | ✅ Available        |
+| **onClick**                   | function                                      | ✅ Available        |
+| **id**                        | string                                        | ✅ Available        |
+| **color**                     | primary, neutral                              | ✅ Available        |
+| **IconComponent**             | component Icon                                | ✅ Available        |
+| **label**                     | string                                        | ✅ Available        |
+| **BadgeComponent**            | component Badge                               | ✅ Available        |
+| **breakLine**                 | true/false                                    | ✅ Available        |
+| **Notify (no prop)**          | when aply component Badge                     | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
 
-  - ✅ \`contained\`
-  - ✅ \`outlined\`
-
-With the following attribute statuses:
-
-  - ✅  **Notify**
-  - **Color:**
-    - ✅ \`primary\`
-    - ✅ \`neutral\`
-  - ✅  **Disabled**
-
-- - -
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Shortcut',
   component: Shortcut,
   parameters: {
-    componentSubtitle: 'Used for quick access to a page and facilitate navigation.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Shortcut/Shortcut.tsx b/packages/react/src/components/Shortcut/Shortcut.tsx
index db69a69aa7..e27b7cd228 100644
--- a/packages/react/src/components/Shortcut/Shortcut.tsx
+++ b/packages/react/src/components/Shortcut/Shortcut.tsx
@@ -28,7 +28,7 @@ const Shortcut = React.forwardRef<HTMLButtonElement, ShortcutProps>(
     })
 
     return (
-      <div className={wrapper}>
+      <div className={`${wrapper} Shortcut-gaya`}>
         <div className={container}>
           <IconButtonBase
             className={`${className} ${content}`}
diff --git a/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap b/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap
index bbfefedc86..0eae1ee07b 100644
--- a/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap
+++ b/packages/react/src/components/Shortcut/__snapshots__/Shortcut.test.tsx.snap
@@ -168,7 +168,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Shortcut-gaya"
     >
       <div
         class="container-0-2-2"
@@ -420,7 +420,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Shortcut-gaya"
     >
       <div
         class="container-0-2-2"
@@ -450,7 +450,7 @@ Array [
           class="badgeContainer-0-2-5"
         >
           <div
-            class=" badge-0-2-20 badge-d0-0-2-23"
+            class=" badge-0-2-20 badge-d0-0-2-23 Badge-gaya"
             limit="99"
             value="99"
           >
@@ -646,7 +646,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Shortcut-gaya"
     >
       <div
         class="container-0-2-2"
@@ -855,7 +855,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Shortcut-gaya"
     >
       <div
         class="container-0-2-2"
diff --git a/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap b/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
index e154e76597..c517171fbe 100644
--- a/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
+++ b/packages/react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
@@ -699,7 +699,7 @@ Array [
                 />
               </div>
               <button
-                class="button-0-2-23 button-d0-0-2-26"
+                class="button-0-2-23 button-d0-0-2-26 Button-gaya"
                 data-testid="btn-include-component"
                 type="button"
               >
diff --git a/packages/react/src/components/Switch/Switch.stories.tsx b/packages/react/src/components/Switch/Switch.stories.tsx
index 9593573402..c73411304d 100644
--- a/packages/react/src/components/Switch/Switch.stories.tsx
+++ b/packages/react/src/components/Switch/Switch.stories.tsx
@@ -4,25 +4,27 @@ import { Switch, SwitchProps } from '.'
 import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
-- - -
-
-**NOTE FOR UXs**: This component is available in the following variants:
-
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - ✅  **Disabled**
-  UPDATE
-
-- - -
+> Switches allow users to enable or disable an option.
+
+## Properties
+| Property                      | Values                                        |    Status           |
+|---                            |                                            ---|                  ---|
+| **variant (no prop)**         | Standard                                      | ✅ Available        |
+| **checked**                   | true/false                                    | ✅ Available        |
+| **value**                     | string                                        | ✅ Available        |
+| **id**                        | string                                        | ✅ Available        |
+| **onChange**                  | function                                      | ✅ Available        |
+| **disabled**                  | true/false                                    | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
+
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Switch',
   component: Switch,
   parameters: {
-    componentSubtitle: 'Switches allow users to enable or disable an option.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx
index 03036d7e9f..f07ee0ca8b 100644
--- a/packages/react/src/components/Switch/Switch.tsx
+++ b/packages/react/src/components/Switch/Switch.tsx
@@ -25,7 +25,7 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
     }
 
     return (
-      <span className={`${className} ${switchContainer}`}>
+      <span className={`${className} ${switchContainer} Switch-gaya`}>
         <input
           ref={ref}
           id={id}
diff --git a/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap b/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap
index d7b202003e..48ab6d9c26 100644
--- a/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap
+++ b/packages/react/src/components/Switch/__snapshots__/Switch.test.tsx.snap
@@ -71,7 +71,7 @@ Array [
 }",
   <div>
     <span
-      class=" switchContainer-0-2-1"
+      class=" switchContainer-0-2-1 Switch-gaya"
     >
       <input
         class="switchInput-0-2-3 switchInput-d1-0-2-8"
@@ -169,7 +169,7 @@ Array [
 }",
   <div>
     <span
-      class=" switchContainer-0-2-1"
+      class=" switchContainer-0-2-1 Switch-gaya"
     >
       <input
         checked=""
@@ -268,7 +268,7 @@ Array [
 }",
   <div>
     <span
-      class=" switchContainer-0-2-1"
+      class=" switchContainer-0-2-1 Switch-gaya"
     >
       <input
         class="switchInput-0-2-3 switchInput-d1-0-2-8"
@@ -367,7 +367,7 @@ Array [
 }",
   <div>
     <span
-      class=" switchContainer-0-2-1"
+      class=" switchContainer-0-2-1 Switch-gaya"
     >
       <input
         checked=""
diff --git a/packages/react/src/components/Tab/Tab.stories.tsx b/packages/react/src/components/Tab/Tab.stories.tsx
index 44af5315aa..cb53b59725 100644
--- a/packages/react/src/components/Tab/Tab.stories.tsx
+++ b/packages/react/src/components/Tab/Tab.stories.tsx
@@ -5,30 +5,21 @@ import { Tab, TabProps } from '.'
 import Icon from '../Icon'
 
 const componentStatus = `
-- - -
+> used to create tabs in a user interface.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                        |    Status           |
+|---                            |                                            ---|                  ---|
+| **variant (no prop)**         | Standard                                      | ✅ Available        |
+| **icon**                      | left, top,  [icon (available but with alternative composition)]                         | ✅ Available        |
+| **align**                     | left, center, right                           | ✅ Available        |
+| **position**                  | fixed, scrollable                             | ✅ Available        |
+| **elevation**                 | true/false                                    | ✅ Available        |
+| **color**                     | true/false                                    | ✅ Available        |
+| **disabled**                  | (available but with alternative composition)  | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo | ✅ Available        |
 
-  - ✅ Standard (available but with alternative composition)
-
-With the following attribute statuses:
-
-  - **Icon:** 
-    - ✅ \`left\`
-    - ✅ \`top\`
-    - ✅ \`icon\` (available but with alternative composition)
-  - **Align:**
-    - ✅ \`left\`
-    - ✅ \`center\`
-    - ✅ \`right\`
-  - **Position:**
-    - ✅ \`fixed\`
-    - ✅ \`scrollable\`
-  - ✅ \`elevation\`
-  - ✅ \`color\`
-  - ✅ \`disabled\` (available but with alternative composition)
-
-- - -
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx
index 73c16265d8..0a349a97bd 100644
--- a/packages/react/src/components/Tab/Tab.tsx
+++ b/packages/react/src/components/Tab/Tab.tsx
@@ -50,7 +50,7 @@ const Tab = React.forwardRef<HTMLDivElement, TabProps>(
     }
 
     return (
-      <div className={wrapper} ref={ref}>
+      <div className={`${wrapper} Tab-gaya`} ref={ref}>
         {showNavigation && (
         <button type="button" className={`${navigation} ${navigationPrev}`} onClick={handlePrev} data-testid="btn-prev">
           <Icon name="filled-navigation-arrowleft" />
diff --git a/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap
index 3d125caa18..c58d7b21fc 100644
--- a/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap
+++ b/packages/react/src/components/Tab/__snapshots__/Tab.test.tsx.snap
@@ -237,7 +237,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Tab-gaya"
     >
       <ul
         class="container-0-2-2 container-d0-0-2-6"
@@ -557,7 +557,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Tab-gaya"
     >
       <ul
         class="container-0-2-2 container-d0-0-2-6"
@@ -877,7 +877,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Tab-gaya"
     >
       <ul
         class="container-0-2-2 container-d0-0-2-6"
@@ -1197,7 +1197,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Tab-gaya"
     >
       <ul
         class="container-0-2-2 container-d0-0-2-6"
@@ -1517,7 +1517,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Tab-gaya"
     >
       <ul
         class="container-0-2-2 container-d0-0-2-6"
@@ -1850,7 +1850,7 @@ Array [
   }",
   <div>
     <div
-      class="wrapper-0-2-1"
+      class="wrapper-0-2-1 Tab-gaya"
     >
       <button
         class="navigation-0-2-3 navigationPrev-0-2-4"
@@ -1859,7 +1859,7 @@ Array [
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-filled-navigation-arrowleft"
+          class=" icon-0-2-7 icon-d0-0-2-8 natds-icons natds-icons-filled-navigation-arrowleft Icon-gaya"
           data-testid="icon-filled-navigation-arrowleft"
           role="img"
         />
@@ -1947,7 +1947,7 @@ Array [
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-7 icon-d1-0-2-35 natds-icons natds-icons-filled-navigation-arrowright"
+          class=" icon-0-2-7 icon-d1-0-2-35 natds-icons natds-icons-filled-navigation-arrowright Icon-gaya"
           data-testid="icon-filled-navigation-arrowright"
           role="img"
         />
diff --git a/packages/react/src/components/Tag/Tag.stories.tsx b/packages/react/src/components/Tag/Tag.stories.tsx
index ed5a0e37f7..12364a12c3 100644
--- a/packages/react/src/components/Tag/Tag.stories.tsx
+++ b/packages/react/src/components/Tag/Tag.stories.tsx
@@ -5,40 +5,28 @@ import { Icon as IconElement } from '../Icon'
 import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
-- - -
+> Tags are used to label, categorize, or organize items using keywords that describe them.
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                                 |    Status           |
+|---                            |                                                     ---|                  ---|
+| **variant (no prop)**         | Standard                                               | ✅ Available        |
+| **position**                  | center, left, right                                    | ✅ Available        |
+| **size**                      | small, ,standard                                       | ✅ Available        |
+| **color**                     | primary, secondary, success, alert, warning, link,     | ✅ Available        |
+| **customBackgroundColor**     | string                                                 | ✅ Available        |
+| **customLabelColor**          | string                                                 | ✅ Available        |
+| **IconComponent**             | IconComponent                                          | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo | ✅ Available        |
 
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-  - **Position**
-    - ✅ \`center\`
-    - ✅ \`right\`
-    - ✅ \`left\`
-  - **Color**
-    - ✅ \`primary\`
-    - ✅ \`secondary\`
-    - ✅ \`success\`
-    - ✅ \`alert\`
-    - ✅ \`warning\`
-    - ✅ \`link\`
-    - ✅ \`custom\`
-  - **Size**
-    - ✅ \`small\`
-    - ✅ \`standard\`
-  - ✅ **Icon**
-
-- - -
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Tag',
   component: Tag,
   parameters: {
-    componentSubtitle: 'Tags are used to label, categorize, or organize items using keywords that describe them.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 40671eaeb8..c5ab653420 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -24,7 +24,7 @@ const Tag = React.forwardRef<HTMLDivElement, TagProps>((props, ref) => {
   return (
     <div className={wrapper}>
       <div
-        className={`${className} ${container}`}
+        className={`${className} ${container} Tag-gaya`}
         data-testid={testID}
         ref={ref}
         {...rest}
diff --git a/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap b/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap
index 8960814b5f..4f391a4518 100644
--- a/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap
+++ b/packages/react/src/components/Tag/__snapshots__/Tag.test.tsx.snap
@@ -41,12 +41,12 @@ Array [
   font-size: 16px;
 }",
   <div
-    class=" container-0-2-2 container-d0-0-2-4"
+    class=" container-0-2-2 container-d0-0-2-4 Tag-gaya"
     data-testid="icon-render"
   >
     <i
       aria-hidden="true"
-      class=" icon-0-2-6 icon-d0-0-2-7 natds-icons natds-icons-outlined-default-mockup"
+      class=" icon-0-2-6 icon-d0-0-2-7 natds-icons natds-icons-outlined-default-mockup Icon-gaya"
       data-testid="icon-outlined-default-mockup"
       role="img"
     />
@@ -95,7 +95,7 @@ Array [
       class="wrapper-0-2-1"
     >
       <div
-        class=" container-0-2-2 container-d0-0-2-4"
+        class=" container-0-2-2 container-d0-0-2-4 Tag-gaya"
       >
         <span
           class="content-0-2-3 content-d1-0-2-5"
@@ -144,7 +144,7 @@ Array [
       class="wrapper-0-2-1"
     >
       <div
-        class=" container-0-2-2 container-d0-0-2-4"
+        class=" container-0-2-2 container-d0-0-2-4 Tag-gaya"
       >
         <span
           class="content-0-2-3 content-d1-0-2-5"
@@ -193,7 +193,7 @@ Array [
       class="wrapper-0-2-1"
     >
       <div
-        class=" container-0-2-2 container-d0-0-2-4"
+        class=" container-0-2-2 container-d0-0-2-4 Tag-gaya"
       >
         <span
           class="content-0-2-3 content-d1-0-2-5"
@@ -238,7 +238,7 @@ Array [
   color: #ffffff;
 }",
   <div
-    class=" container-0-2-2 container-d0-0-2-4"
+    class=" container-0-2-2 container-d0-0-2-4 Tag-gaya"
     data-testid="success-color"
   >
     <span
@@ -282,7 +282,7 @@ Array [
   color: #333333;
 }",
   <div
-    class=" container-0-2-2 container-d0-0-2-4"
+    class=" container-0-2-2 container-d0-0-2-4 Tag-gaya"
     data-testid="standard-size"
   >
     <span
diff --git a/packages/react/src/components/TextField/TextField.stories.tsx b/packages/react/src/components/TextField/TextField.stories.tsx
index 685f12da29..3863f95f62 100644
--- a/packages/react/src/components/TextField/TextField.stories.tsx
+++ b/packages/react/src/components/TextField/TextField.stories.tsx
@@ -8,29 +8,39 @@ import StoryContainer from '../../helpers/StoryContainer'
 import { Icon } from '../Icon'
 
 const componentStatus = `
----
-
-**NOTE**: This component is available with the following attribute status:
-
-- **Size**
-  - ✅  \`medium\`
-  - ✅  \`mediumX\`
-- **Feedback**
-  - ✅  \`error\`
-  - ✅  \`success\`
-- ✅ **Required**
-- ✅ **Disabled**
-- ✅ **ReadOnly**
-- ✅ **HelperText**
-- **Action**
-  - ✅  \`icon \`
-  - ✅  \`image \`
-- **Type**
-  - ✅  \`password \`
-  - ✅  \`multiline \`
-  - ✅  \`text \`
-
----
+> Text fields let users enter and edit text
+
+## Properties
+| Property                      | Values                                                 |    Status           |
+|---                            |                                                     ---|                  ---|
+| **variant (no prop)**         | Standard                                               | ✅ Available        |
+| **disabled**                  | true/false                                             | ✅ Available        |
+| **feedback**                  | success, error                                         | ✅ Available        |
+| **id**                        | string                                                 | ✅ Available        |
+| **helperText**                | string                                                 | ✅ Available        |
+| **label**                     | string                                                 | ✅ Available        |
+| **minRows**                   | number                                                 | ✅ Available        |
+| **onBlur**                    | function                                               | ✅ Available        |
+| **onClick**                   | function                                               | ✅ Available        |
+| **onChange**                  | function                                               | ✅ Available        |
+| **onFocus**                   | function                                               | ✅ Available        |
+| **onKeyDown**                 | function                                               | ✅ Available        |
+| **onKeyUp**                   | function                                               | ✅ Available        |
+| **placeholder**               | string                                                 | ✅ Available        |
+| **required**                  | true/false                                             | ✅ Available        |
+| **readOnly**                  | true/false                                             | ✅ Available        |
+| **isResizable**               | true/false                                             | ✅ Available        |
+| **size**                      | medium, mediumX                                        | ✅ Available        |
+| **type**                      | text, password, multiline                              | ✅ Available        |
+| **value**                     | string                                                 | ✅ Available        |
+| **iconLeading**               | component Icon                                         | ✅ Available        |
+| **action**                    | icon, image                                            | ✅ Available        |
+| **ariaLabel**                 | string                                                 | ✅ Available        |
+| **alt**                       | string                                                 | ✅ Available        |
+| **src**                       | string                                                 | ✅ Available        |
+| **brand**                     | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo | ✅ Available        |
+
+## Technical Usages Examples
 `
 
 export default {
@@ -38,7 +48,7 @@ export default {
   component: TextField,
   subcomponents: { Label, InputHelperText, Input },
   parameters: {
-    componentSubtitle: 'Text fields let users enter and edit text',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }
diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
index 0d1bd29300..d286a16756 100644
--- a/packages/react/src/components/TextField/TextField.tsx
+++ b/packages/react/src/components/TextField/TextField.tsx
@@ -31,7 +31,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({
   const { labelText } = styles({ feedback, disabled, label })
 
   return (
-    <div data-testid={testID} className={className}>
+    <div data-testid={testID} className={`${className} TextField-gaya`}>
       <Label htmlFor={id} required={required} label={label} className={labelText} />
       <Input
         brand={brand}
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 105d97604b..25539c00a9 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -154,7 +154,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -335,7 +335,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -514,7 +514,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -693,7 +693,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -872,7 +872,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -1062,7 +1062,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -1084,7 +1084,7 @@ Array [
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-action-check"
+          class=" icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-action-check Icon-gaya"
           data-testid="icon-outlined-action-check"
           role="img"
         />
@@ -1257,7 +1257,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -1279,7 +1279,7 @@ Array [
       >
         <i
           aria-hidden="true"
-          class=" icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-action-cancel"
+          class=" icon-0-2-14 icon-d0-0-2-15 natds-icons natds-icons-outlined-action-cancel Icon-gaya"
           data-testid="icon-outlined-action-cancel"
           role="img"
         />
@@ -1600,7 +1600,7 @@ Array [
   }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -1634,13 +1634,13 @@ Array [
             </div>
             <button
               aria-label="any label"
-              class=" iconButtonContainer-0-2-17 iconButtonContainer-d0-0-2-18 base-0-2-19 base-d0-0-2-20"
+              class=" iconButtonContainer-0-2-17 iconButtonContainer-d0-0-2-18 IconButton-gaya base-0-2-19 base-d0-0-2-20"
               data-testid="ds-input-action-icon"
               type="button"
             >
               <i
                 aria-hidden="true"
-                class=" icon-0-2-31 icon-d0-0-2-32 natds-icons natds-icons-filled-action-love"
+                class=" icon-0-2-31 icon-d0-0-2-32 natds-icons natds-icons-filled-action-love Icon-gaya"
                 data-testid="icon-filled-action-love"
                 role="img"
               />
@@ -1828,7 +1828,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -2021,7 +2021,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -2199,7 +2199,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -2378,7 +2378,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
@@ -2557,7 +2557,7 @@ Array [
 }",
   <div>
     <div
-      class=""
+      class=" TextField-gaya"
     >
       <label
         class="labelText-0-2-1 labelText-d0-0-2-2 labelContainer-0-2-3"
diff --git a/packages/react/src/components/Typography/Typography.stories.tsx b/packages/react/src/components/Typography/Typography.stories.tsx
index 5fbf8645e3..d17f6d84f6 100644
--- a/packages/react/src/components/Typography/Typography.stories.tsx
+++ b/packages/react/src/components/Typography/Typography.stories.tsx
@@ -3,29 +3,14 @@ import { Story, Meta } from '@storybook/react'
 import { Typography, TypographyProps } from '.'
 
 const componentStatus = `
-- - -
+> used to control and display text styles consistently across an application
 
-The component of Text is rendered inside a DIV. This happen because the component has dynamic behavior depending of variant value.
+## Properties
+| Property                      | Values                                                 |    Status           |
+|---                            |                                                     ---|                  ---|
+| **variant**         | heading1, heading2, heading3, heading4, heading5, <br /> heading6, subtitle1, subtitle2, body1, body2, caption, overline  | ✅ Available        |
 
-- - -
-
-**NOTE FOR UXs**: This component is available in the following variants:
-
-  - ✅ Heading1
-  - ✅ Heading2
-  - ✅ Heading3
-  - ✅ Heading4
-  - ✅ Heading5
-  - ✅ Heading6
-  - ✅ Subtitle1
-  - ✅ Subtitle2
-  - ✅ Subtitle2
-  - ✅ Body1
-  - ✅ Body2
-  - ✅ Caption
-  - ✅ Overline
-
-- - -
+## Technical Usages Examples
 `
 
 export default {
diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx
index b393911c51..21be2b8200 100644
--- a/packages/react/src/components/Typography/Typography.tsx
+++ b/packages/react/src/components/Typography/Typography.tsx
@@ -29,7 +29,7 @@ const Typography = React.forwardRef<HTMLDivElement, TypographyProps>(
 
     return (
       <div ref={ref} {...rest}>
-        <CustomTag className={text}>{props.children}</CustomTag>
+        <CustomTag className={`${text} Typography-gaya`}>{props.children}</CustomTag>
       </div>
     )
   }
diff --git a/packages/react/src/components/Typography/__snapshots__/Typography.test.tsx.snap b/packages/react/src/components/Typography/__snapshots__/Typography.test.tsx.snap
index f09d0b7404..e2b52e2044 100644
--- a/packages/react/src/components/Typography/__snapshots__/Typography.test.tsx.snap
+++ b/packages/react/src/components/Typography/__snapshots__/Typography.test.tsx.snap
@@ -16,7 +16,7 @@ Array [
   <div>
     <div>
       <p
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </p>
@@ -41,7 +41,7 @@ Array [
   <div>
     <div>
       <p
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </p>
@@ -66,7 +66,7 @@ Array [
   <div>
     <div>
       <span
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </span>
@@ -91,7 +91,7 @@ Array [
   <div>
     <div>
       <h1
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </h1>
@@ -116,7 +116,7 @@ Array [
   <div>
     <div>
       <h2
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </h2>
@@ -141,7 +141,7 @@ Array [
   <div>
     <div>
       <h3
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </h3>
@@ -166,7 +166,7 @@ Array [
   <div>
     <div>
       <h4
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </h4>
@@ -191,7 +191,7 @@ Array [
   <div>
     <div>
       <h5
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </h5>
@@ -216,7 +216,7 @@ Array [
   <div>
     <div>
       <h6
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </h6>
@@ -241,7 +241,7 @@ Array [
   <div>
     <div>
       <span
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </span>
@@ -266,7 +266,7 @@ Array [
   <div>
     <div>
       <p
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </p>
@@ -291,7 +291,7 @@ Array [
   <div>
     <div>
       <p
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </p>
@@ -316,7 +316,7 @@ Array [
   <div>
     <div>
       <p
-        class="text-0-2-1 text-d0-0-2-2"
+        class="text-0-2-1 text-d0-0-2-2 Typography-gaya"
       >
         hello
       </p>