From 052f081226132d6df12062641f9eb6f2810d0162 Mon Sep 17 00:00:00 2001
From: Fernando <fermoraeslima10@gmail.com>
Date: Mon, 12 Sep 2022 09:40:51 -0300
Subject: [PATCH 1/5] feat(apps-menu): update tokens

---
 .../Layout/Topbar/Apps/Dropdown/index.tsx     | 38 +++++++++----------
 .../ui-components/Layout/Topbar/index.tsx     |  5 ++-
 src/pages/ui-components/Layout/context.ts     |  2 +-
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx b/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx
index ee7ca5299..ba3937c62 100644
--- a/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx
@@ -41,7 +41,7 @@ const AppsDropdown = React.memo<AppsDropdownProps>(
     return (
       <div className={cx(className, { '--opened': opened, '--expanded': expanded })}>
         <div className='houston-topbar-apps-dropdown__header'>
-          <Typography weight='bold'>Lista de Apps</Typography>
+          <Typography weight='bold'>Menu de Apps</Typography>
 
           <IconButton onClick={toggleExpanded}>
             <CancelIcon />
@@ -54,6 +54,7 @@ const AppsDropdown = React.memo<AppsDropdownProps>(
               <Spinner size={40} />
             </div>
           )}
+
           {applications?.map(app => {
             const isCurrent = app.application === currentApplication;
 
@@ -110,12 +111,11 @@ const descriptionAnimation = keyframes`
 
 export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
   ({ theme }) => css`
-    width: ${TOPBAR_DROPDOWN_WIDTH}px;
+    width: ${theme.pxToRem(TOPBAR_DROPDOWN_WIDTH)}rem;
     position: fixed;
-
     background: #fff;
     box-shadow: ${theme.shadow.level[2]};
-    top: ${TOPBAR_HEIGHT}px;
+    top: ${theme.pxToRem(TOPBAR_HEIGHT)}rem;
     left: ${theme.spacing.inline.nano};
     border-radius: ${theme.border.radius.sm};
     z-index: 105;
@@ -146,11 +146,11 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
     .houston-topbar-apps-dropdown__list-apps {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      grid-gap: ${theme.spacing.nano};
+      grid-gap: ${theme.spacing.stack.nano} ${theme.spacing.inline.nano};
       flex-wrap: wrap;
       justify-items: center;
       box-sizing: border-box;
-      padding: ${theme.spacing.xxxs};
+      padding: ${theme.spacing.inset.xs};
 
       .houston-topbar-apps-dropdown__loader {
         display: flex;
@@ -173,8 +173,8 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
         display: block;
 
         .houston-topbar-apps-dropdown__icon {
-          max-width: 40px;
-          max-height: 40px;
+          max-width: ${theme.pxToRem(40)}rem;
+          max-height: ${theme.pxToRem(40)}rem;
           margin-bottom: ${theme.spacing.nano};
         }
 
@@ -200,7 +200,7 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
     }
 
     .houston-topbar-apps-dropdown__expand .houston-topbar-apps-dropdown__expand-button {
-      margin: ${theme.spacing.nano};
+      margin: ${theme.spacing.inset.xs};
     }
 
     &.--expanded {
@@ -216,7 +216,7 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        padding: 0 ${theme.spacing.nano} 0 ${theme.spacing.xxxs};
+        padding: ${theme.spacing.nano} ${theme.spacing.inset.md};
         border-bottom: ${theme.border.width.xs} solid
           ${theme.hexToRgba(theme.neutralColor.low.pure, theme.opacity.level[3])};
       }
@@ -233,8 +233,8 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
         .houston-topbar-apps-dropdown__item {
           height: 100%;
           display: grid;
-          grid-template-columns: 25px 1fr;
-          grid-template-rows: 25px auto;
+          grid-template-columns: ${theme.pxToRem(25)}rem 1fr;
+          grid-template-rows: ${theme.pxToRem(25)}rem auto;
           grid-gap: ${theme.spacing.nano};
           text-align: left;
           padding: ${theme.spacing.xxs};
@@ -243,8 +243,8 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
           align-items: center;
 
           .houston-topbar-apps-dropdown__icon {
-            max-width: 25px;
-            max-height: 25px;
+            max-width: ${theme.pxToRem(25)}rem;
+            max-height: ${theme.pxToRem(25)}rem;
             grid-column: 1;
             grid-row: 1;
             margin-bottom: 0;
@@ -264,7 +264,7 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
         }
 
         ${theme.breakpoints.up('md')} {
-          padding: ${theme.spacing.xxs};
+          padding: ${theme.spacing.inset.md};
           grid-template-columns: repeat(2, 1fr);
           grid-gap: ${theme.spacing.xxs};
 
@@ -272,17 +272,17 @@ export default styled(AppsDropdown, { label: 'houston-topbar-apps-dropdown' })(
             margin: auto;
             border: ${theme.border.width.xs} solid
               ${theme.hexToRgba(theme.neutralColor.low.pure, theme.opacity.level[3])};
-            grid-template-columns: 60px 1fr;
+            grid-template-columns: ${theme.pxToRem(60)} 1fr;
             grid-template-rows: 20px auto;
-            padding: ${theme.spacing.xxxs};
+            padding: ${theme.spacing.inset.xs};
             grid-gap: ${theme.spacing.quarck};
             align-items: start;
 
             .houston-topbar-apps-dropdown__icon {
               grid-row-start: 1;
               grid-row-end: 3;
-              max-width: 50px;
-              max-height: 50px;
+              max-width: ${theme.pxToRem(50)}rem;
+              max-height: ${theme.pxToRem(50)}rem;
             }
 
             .houston-topbar-apps-dropdown__description {
diff --git a/src/pages/ui-components/Layout/Topbar/index.tsx b/src/pages/ui-components/Layout/Topbar/index.tsx
index 8daa66b76..c47502505 100644
--- a/src/pages/ui-components/Layout/Topbar/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/index.tsx
@@ -24,6 +24,7 @@ import UserMenuGroup from './UserMenu/ItemGroup';
 
 export interface TopbarProps extends StyledProp {
   children?: React.ReactNode;
+  disableApps?: boolean;
   logo?: string;
   logoMobile?: string;
   currentApplication?: string;
@@ -41,7 +42,7 @@ export interface TopbarProps extends StyledProp {
 }
 
 const Topbar = React.memo<TopbarProps>(
-  ({ children, currentApplication, logo, logoMobile, className, blackMode, user }) => {
+  ({ children, currentApplication, logo, logoMobile, className, blackMode, user, disableApps }) => {
     const theme = useHoustonTheme();
     const register = useContextSelector(LayoutContext, context => context.topbar.register);
     const sidebarToogleOpened = useContextSelector(LayoutContext, context => context.sidebar.toogleOpened);
@@ -76,7 +77,7 @@ const Topbar = React.memo<TopbarProps>(
                 onClick={sidebarToogleOpened}
               />
 
-              <Apps />
+              {!disableApps && <Apps />}
 
               <div className='houston-topbar__logo'>
                 <img
diff --git a/src/pages/ui-components/Layout/context.ts b/src/pages/ui-components/Layout/context.ts
index 23929e765..6b1061072 100644
--- a/src/pages/ui-components/Layout/context.ts
+++ b/src/pages/ui-components/Layout/context.ts
@@ -1,7 +1,7 @@
 import { createContext } from 'use-context-selector';
 
 export const TOPBAR_HEIGHT = 64;
-export const TOPBAR_DROPDOWN_WIDTH = 340;
+export const TOPBAR_DROPDOWN_WIDTH = 336;
 export const TOPBAR_MENU_MIN_WIDTH_IN_PX = 260;
 
 export const MENU_WIDTH = 248;

From f966b63ffa1878f3ce54ce38985d28804f800eac Mon Sep 17 00:00:00 2001
From: Michel Klein <michel.silva@eduzz.com>
Date: Mon, 12 Sep 2022 10:13:43 -0300
Subject: [PATCH 2/5] fix: add icons to documentation

---
 src/pages/icons/index.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/pages/icons/index.tsx b/src/pages/icons/index.tsx
index 7824d3b0a..f03ccaa4a 100644
--- a/src/pages/icons/index.tsx
+++ b/src/pages/icons/index.tsx
@@ -9,13 +9,12 @@ export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowUp } from './ArrowUp';
 export { default as AvatarOutline } from './AvatarOutline';
 export { default as AvatarSolid } from './AvatarSolid';
-export { default as Banksplip } from './Bankslip';
+export { default as Bankslip } from './Bankslip';
 export { default as Belt } from './Belt';
 export { default as BetaTester } from './BetaTester';
 export { default as BoxOutline } from './BoxOutline';
 export { default as BoxSolid } from './BoxSolid';
 export { default as Bullet } from './Bullet';
-export { default as CadsSolid } from './CardsSolid';
 export { default as Calendar } from './Calendar';
 export { default as CameraFrontOutline } from './CameraFrontOutline';
 export { default as CameraFrontSolid } from './CameraFrontSolid';
@@ -23,13 +22,16 @@ export { default as CameraOutline } from './CameraOutline';
 export { default as CameraSolid } from './CameraSolid';
 export { default as Cancel } from './Cancel';
 export { default as CardOutline } from './CardOutline';
+export { default as CardSolid } from './CardSolid';
 export { default as CardsOutline } from './CardsOutline';
+export { default as CardsSolid } from './CardsSolid';
 export { default as CartOutline } from './CartOutline';
+export { default as CartSolid } from './CartSolid';
+export { default as ChevronDoubleLeft } from './ChevronDoubleLeft';
+export { default as ChevronDoubleRight } from './ChevronDoubleRight';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
-export { default as ChevronDoubleLeft } from './ChevronDoubleLeft';
 export { default as ChevronRight } from './ChevronRight';
-export { default as ChevronDoubleRight } from './ChevronDoubleRight';
 export { default as ChevronUp } from './ChevronUp';
 export { default as CopyOutline } from './CopyOutline';
 export { default as CopySolid } from './CopySolid';
@@ -61,12 +63,12 @@ export { default as EyeOffOutline } from './EyeOffOutline';
 export { default as EyeOffSolid } from './EyeOffSolid';
 export { default as EyeOnOutline } from './EyeOnOutline';
 export { default as EyeOnSolid } from './EyeOnSolid';
-export { default as FacebookOutline } from './FacebookOutline';
-export { default as FacebookSolid } from './FacebookSolid';
 export { default as FaceHappyOutline } from './FaceHappyOutline';
 export { default as FaceHappySolid } from './FaceHappySolid';
 export { default as FaceSadOutline } from './FaceSadOutline';
 export { default as FaceSadSolid } from './FaceSadSolid';
+export { default as FacebookOutline } from './FacebookOutline';
+export { default as FacebookSolid } from './FacebookSolid';
 export { default as FileOutline } from './FileOutline';
 export { default as FileSolid } from './FileSolid';
 export { default as FilterOutline } from './FilterOutline';
@@ -113,6 +115,7 @@ export { default as MenuRight } from './MenuRight';
 export { default as MessageOutline } from './MessageOutline';
 export { default as MessageRoundOutline } from './MessageRoundOutline';
 export { default as MessageRoundSolid } from './MessageRoundSolid';
+export { default as MessageSolid } from './MessageSolid';
 export { default as MicrophoneOutline } from './MicrophoneOutline';
 export { default as MicrophoneSolid } from './MicrophoneSolid';
 export { default as Mobile } from './Mobile';
@@ -145,6 +148,9 @@ export { default as SearchSolid } from './SearchSolid';
 export { default as SettingsOutline } from './SettingsOutline';
 export { default as SettingsSolid } from './SettingsSolid';
 export { default as Share } from './Share';
+export { default as StarOutline } from './StarOutline';
+export { default as StarSolid } from './StarSolid';
+export { default as Store } from './Store';
 export { default as TagOutline } from './TagOutline';
 export { default as TagSolid } from './TagSolid';
 export { default as Telegram } from './Telegram';

From 3289b94b77164a9eb2303cbd92acee451c5c6d09 Mon Sep 17 00:00:00 2001
From: Miguel <miguelaugl@outlook.com>
Date: Tue, 13 Sep 2022 14:20:03 -0300
Subject: [PATCH 3/5] feat: date picker now handle typing

---
 .../ui-components/Forms/DatePicker/index.tsx  | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/pages/ui-components/Forms/DatePicker/index.tsx b/src/pages/ui-components/Forms/DatePicker/index.tsx
index 0596c673d..f2d15b910 100644
--- a/src/pages/ui-components/Forms/DatePicker/index.tsx
+++ b/src/pages/ui-components/Forms/DatePicker/index.tsx
@@ -2,6 +2,7 @@ import 'rc-picker/assets/index.css';
 
 import * as React from 'react';
 
+import isValid from 'date-fns/isValid';
 import Picker from 'rc-picker';
 import generateConfig from 'rc-picker/lib/generate/dateFns';
 import locale from 'rc-picker/lib/locale/pt_BR';
@@ -80,6 +81,26 @@ const DatePicker = ({
   fullWidth = true,
   ...inputProps
 }: DatePickerProps) => {
+  const disableDate = React.useCallback(
+    (date: Date | null) => {
+      if (!date) return true;
+      if (minDate) return date < minDate;
+      if (maxDate) return date > maxDate;
+      return false;
+    },
+    [maxDate, minDate]
+  );
+
+  const internalInputOnBlur = React.useCallback(
+    (value: string) => {
+      const [day, month, year] = value.split('/');
+      const date = new Date(+year, +month - 1, +day);
+      if (disableDate(date) || !isValid(date)) return;
+      onChange && onChange(date);
+    },
+    [disableDate, onChange]
+  );
+
   const inputRender = React.useCallback(
     (props: React.InputHTMLAttributes<HTMLInputElement>) => {
       return (
@@ -88,33 +109,16 @@ const DatePicker = ({
           {...props}
           id={id}
           size='default'
+          onBlur={internalInputOnBlur}
           fullWidth={fullWidth}
           disabled={disabled}
           nativeChangeEvent
-          readOnly
           name={undefined}
           endAdornment={<Calendar />}
         />
       );
     },
-    [id, disabled, inputProps, fullWidth]
-  );
-
-  const disableDate = React.useCallback(
-    (date: Date | undefined) => {
-      if (!date) return true;
-
-      if (minDate) {
-        return date < minDate;
-      }
-
-      if (maxDate) {
-        return date > maxDate;
-      }
-
-      return false;
-    },
-    [maxDate, minDate]
+    [id, disabled, inputProps, fullWidth, internalInputOnBlur]
   );
 
   return (

From 478d62fb2ea880ec1890260d3465721e26a7de6c Mon Sep 17 00:00:00 2001
From: Miguel <miguelaugl@outlook.com>
Date: Tue, 13 Sep 2022 17:57:07 -0300
Subject: [PATCH 4/5] feat: add id to components

---
 .../ui-components/Breadcrumb/Item/index.tsx   |  5 ++-
 .../ui-components/Breadcrumb/Link/index.tsx   |  1 +
 src/pages/ui-components/Breadcrumb/index.tsx  |  6 +--
 src/pages/ui-components/Collapse/index.tsx    |  5 ++-
 src/pages/ui-components/Divider/index.tsx     |  6 +--
 .../ui-components/Forms/Checkbox/Group.tsx    | 14 +++++--
 .../Forms/ErrorMessage/index.tsx              |  9 ++++-
 src/pages/ui-components/Forms/Radio/Group.tsx |  7 ++--
 src/pages/ui-components/Grid/Column/index.tsx | 11 ++++--
 .../ui-components/Grid/Container/index.tsx    | 14 ++++---
 src/pages/ui-components/Grid/Row/index.tsx    | 25 ++++++++-----
 src/pages/ui-components/Layout/Layout.tsx     | 13 ++++---
 .../Layout/Topbar/Action/index.tsx            | 23 ++++++------
 .../Layout/Topbar/Apps/Dropdown/index.tsx     | 17 +++++----
 .../Layout/Topbar/Apps/index.tsx              | 26 ++++++-------
 .../Layout/Topbar/UserMenu/Divider/index.tsx  |  8 ++--
 .../Layout/Topbar/UserMenu/Item/index.tsx     | 18 ++++++++-
 .../Topbar/UserMenu/ItemGroup/index.tsx       | 13 ++++---
 .../Layout/Topbar/UserMenu/index.tsx          | 13 ++++---
 .../ui-components/Layout/Topbar/index.tsx     | 37 ++++++++++---------
 .../ui-components/Loaders/Line/index.tsx      | 19 +++++-----
 .../ui-components/Loaders/Spinner/index.tsx   | 19 +++++++---
 src/pages/ui-components/Overlay/index.tsx     |  4 +-
 .../ui-components/Progress/Bar/index.tsx      | 10 +++--
 .../Showcase/ControlDots/index.tsx            |  6 ++-
 .../ui-components/Showcase/Text/index.tsx     |  6 +--
 .../ui-components/Showcase/Title/index.tsx    |  6 +--
 .../ui-components/Table/Action/index.tsx      | 10 ++++-
 src/pages/ui-components/Table/Body/index.tsx  |  9 +++--
 .../ui-components/Table/Collapse/index.tsx    |  3 ++
 .../Table/Column/SortLabel/index.tsx          |  4 +-
 .../ui-components/Table/Column/index.tsx      |  1 +
 .../ui-components/Table/Header/index.tsx      |  5 ++-
 src/pages/ui-components/Tabs/index.tsx        |  3 ++
 34 files changed, 229 insertions(+), 147 deletions(-)

diff --git a/src/pages/ui-components/Breadcrumb/Item/index.tsx b/src/pages/ui-components/Breadcrumb/Item/index.tsx
index 65785da33..69181bda1 100644
--- a/src/pages/ui-components/Breadcrumb/Item/index.tsx
+++ b/src/pages/ui-components/Breadcrumb/Item/index.tsx
@@ -6,6 +6,7 @@ import { useBreadcrumb } from '../context';
 import LongTextToolTip from '../internals/LongTextToolTip';
 
 export interface BreadcrumbItemProps extends StyledProp {
+  id?: string;
   isActive?: boolean;
   onClick?: () => void;
   children?: React.ReactNode;
@@ -17,11 +18,11 @@ const SeparatorIcon = () => (
   </svg>
 );
 
-const BreadcrumbItem = ({ children, className, isActive }: BreadcrumbItemProps) => {
+const BreadcrumbItem = ({ id, children, className, isActive }: BreadcrumbItemProps) => {
   const { separator } = useBreadcrumb();
 
   return (
-    <li className={cx(className, isActive && '--active')}>
+    <li id={id} className={cx(className, isActive && '--active')}>
       <span className='__content' {...(isActive && { 'aria-current': 'page' })}>
         <LongTextToolTip>{children}</LongTextToolTip>
       </span>
diff --git a/src/pages/ui-components/Breadcrumb/Link/index.tsx b/src/pages/ui-components/Breadcrumb/Link/index.tsx
index a3cf47da7..710e91330 100644
--- a/src/pages/ui-components/Breadcrumb/Link/index.tsx
+++ b/src/pages/ui-components/Breadcrumb/Link/index.tsx
@@ -19,6 +19,7 @@ type BreadcrumbLinkProps = {
    * Redirect path.
    */
   href?: string;
+  id?: string;
   icon?: React.ReactNode;
   children?: React.ReactNode;
 };
diff --git a/src/pages/ui-components/Breadcrumb/index.tsx b/src/pages/ui-components/Breadcrumb/index.tsx
index 431be0496..922c08290 100644
--- a/src/pages/ui-components/Breadcrumb/index.tsx
+++ b/src/pages/ui-components/Breadcrumb/index.tsx
@@ -7,15 +7,15 @@ import { BreadcrumbProvider } from './context';
 import Item from './Item';
 import Link from './Link';
 
-export interface BreadcrumbProps extends StyledProp {
+export interface BreadcrumbProps extends StyledProp, React.HTMLAttributes<HTMLElement> {
   separator?: React.ReactNode;
   children: React.ReactNode;
 }
 
-const Breadcrumb = ({ children, className, separator }: BreadcrumbProps) => {
+const Breadcrumb = ({ children, className, separator, ...rest }: BreadcrumbProps) => {
   return (
     <BreadcrumbProvider separator={separator}>
-      <nav aria-label='breadcrumb' className={className}>
+      <nav aria-label='breadcrumb' className={className} {...rest}>
         <ol className='__list'>{children}</ol>
       </nav>
     </BreadcrumbProvider>
diff --git a/src/pages/ui-components/Collapse/index.tsx b/src/pages/ui-components/Collapse/index.tsx
index dadf1fd34..a897fdd5c 100644
--- a/src/pages/ui-components/Collapse/index.tsx
+++ b/src/pages/ui-components/Collapse/index.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import CollapseMUI from '@mui/material/Collapse';
 
 export interface CollapseProps {
+  id?: string;
   visibled: boolean;
   children?: React.ReactNode;
   onEnter?: () => void;
@@ -19,10 +20,12 @@ const Collapse = ({
   onEnter,
   onClose,
   mountOnEnter = false,
-  timeout = 500
+  timeout = 500,
+  id
 }: CollapseProps) => {
   return (
     <CollapseMUI
+      id={id}
       in={visibled}
       timeout={timeout}
       unmountOnExit={destroyOnClose}
diff --git a/src/pages/ui-components/Divider/index.tsx b/src/pages/ui-components/Divider/index.tsx
index 1b5d271b3..c9a3d1bbf 100644
--- a/src/pages/ui-components/Divider/index.tsx
+++ b/src/pages/ui-components/Divider/index.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import styled, { css, cx, StyledProp } from '@eduzz/houston-styles';
 
-export interface Divider extends StyledProp {
+export interface DividerProps extends StyledProp, React.HTMLAttributes<HTMLHRElement> {
   vertical?: boolean;
 }
 
-const Divider = ({ className, vertical }: Divider) => {
+const Divider = ({ className, vertical, ...rest }: DividerProps) => {
   const ref = React.useRef<HTMLHRElement>(null);
 
   React.useEffect(() => {
@@ -15,7 +15,7 @@ const Divider = ({ className, vertical }: Divider) => {
     }
   }, [vertical]);
 
-  return <hr ref={ref} className={cx(className, `--${vertical ? 'vertical' : 'horizontal'}`)} />;
+  return <hr ref={ref} className={cx(className, `--${vertical ? 'vertical' : 'horizontal'}`)} {...rest} />;
 };
 
 export default React.memo(styled(Divider, { label: 'houston-divider' })`
diff --git a/src/pages/ui-components/Forms/Checkbox/Group.tsx b/src/pages/ui-components/Forms/Checkbox/Group.tsx
index 0d843fc41..46f1fd94b 100644
--- a/src/pages/ui-components/Forms/Checkbox/Group.tsx
+++ b/src/pages/ui-components/Forms/Checkbox/Group.tsx
@@ -8,7 +8,8 @@ import error from '../../utils/error';
 import withForm, { WithFormProps } from '../Form/withForm';
 
 export type CheckboxGroupProps = StyledProp &
-  WithFormProps<never> & {
+  WithFormProps<never> &
+  React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactElement<CheckboxRadioProps>[];
     name?: string;
     value?: any[];
@@ -21,7 +22,14 @@ export type CheckboxGroupProps = StyledProp &
     spacing?: keyof Omit<Spacing, 'fn'>;
   };
 
-const CheckboxGroup = ({ children, value: groupValue = [], onChange, className, errorMessage }: CheckboxGroupProps) => {
+const CheckboxGroup = ({
+  children,
+  value: groupValue = [],
+  onChange,
+  className,
+  errorMessage,
+  ...rest
+}: CheckboxGroupProps) => {
   React.useEffect(() => {
     if (!Array.isArray(groupValue)) {
       error(
@@ -50,7 +58,7 @@ const CheckboxGroup = ({ children, value: groupValue = [], onChange, className,
   });
 
   return (
-    <div className={className}>
+    <div className={className} {...rest}>
       <div className='hst-checkbox-group-checkboxes'>{mappedChildren}</div>
       <span className='hst-checkbox-group-error-message'>{errorMessage}</span>
     </div>
diff --git a/src/pages/ui-components/Forms/ErrorMessage/index.tsx b/src/pages/ui-components/Forms/ErrorMessage/index.tsx
index f2f321ae1..0cb3b966b 100644
--- a/src/pages/ui-components/Forms/ErrorMessage/index.tsx
+++ b/src/pages/ui-components/Forms/ErrorMessage/index.tsx
@@ -6,18 +6,23 @@ import { useFormState } from 'react-hook-form';
 import Typography from '../../Typography';
 
 export interface ErrorMessageProps {
+  id?: string;
   name: string;
   className?: string;
 }
 
-const ErrorMessage = ({ name, className }: ErrorMessageProps) => {
+const ErrorMessage = ({ id, name, className }: ErrorMessageProps) => {
   const formState = useFormState({ name, exact: true });
 
   return (
     <ErrorMessageHook
       errors={formState.errors}
       name={name}
-      render={({ message }) => <Typography className={className}>{message}</Typography>}
+      render={({ message }) => (
+        <Typography id={id} className={className}>
+          {message}
+        </Typography>
+      )}
     />
   );
 };
diff --git a/src/pages/ui-components/Forms/Radio/Group.tsx b/src/pages/ui-components/Forms/Radio/Group.tsx
index 599e7258d..b4181b193 100644
--- a/src/pages/ui-components/Forms/Radio/Group.tsx
+++ b/src/pages/ui-components/Forms/Radio/Group.tsx
@@ -7,7 +7,8 @@ import withForm, { WithFormProps } from '../Form/withForm';
 import { RadioProps } from './Item';
 
 export type RadioGroupProps = StyledProp &
-  WithFormProps<never> & {
+  WithFormProps<never> &
+  React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactElement<RadioProps>[];
     name?: string;
     value?: any;
@@ -20,7 +21,7 @@ export type RadioGroupProps = StyledProp &
     spacing?: keyof Omit<Spacing, 'fn'>;
   };
 
-const RadioGroup = ({ children, value, onChange, className, errorMessage }: RadioGroupProps) => {
+const RadioGroup = ({ children, value, onChange, className, errorMessage, ...rest }: RadioGroupProps) => {
   const handleChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, value: any) => {
       onChange && onChange(value, e);
@@ -37,7 +38,7 @@ const RadioGroup = ({ children, value, onChange, className, errorMessage }: Radi
   });
 
   return (
-    <div className={className}>
+    <div className={className} {...rest}>
       <div className='hst-radio-group-radios'>{mappedChildren}</div>
       <span className='hst-radio-group-error-message'>{errorMessage}</span>
     </div>
diff --git a/src/pages/ui-components/Grid/Column/index.tsx b/src/pages/ui-components/Grid/Column/index.tsx
index 902ce6769..65775038d 100644
--- a/src/pages/ui-components/Grid/Column/index.tsx
+++ b/src/pages/ui-components/Grid/Column/index.tsx
@@ -9,12 +9,14 @@ const breakpoints = ['xs', 'sm', 'md', 'lg', 'xlg'] as const;
 type ColumnSize = typeof columnSizes[number];
 export type ColumnBreakPoints = typeof breakpoints[number];
 
-export interface ColumnProps extends StyledProp, Partial<Record<ColumnBreakPoints, ColumnSize>> {
-  children?: React.ReactNode;
-}
+export type ColumnProps = StyledProp &
+  Partial<Record<ColumnBreakPoints, ColumnSize>> &
+  React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+  };
 
 const Column = React.forwardRef<HTMLDivElement, ColumnProps>(
-  ({ className, children, xs = 'fill', sm, md, lg, xlg }, ref) => {
+  ({ className, children, xs = 'fill', sm, md, lg, xlg, ...rest }, ref) => {
     return (
       <div
         ref={ref}
@@ -27,6 +29,7 @@ const Column = React.forwardRef<HTMLDivElement, ColumnProps>(
           lg && `--lg-${lg}`,
           xlg && `--xlg-${xlg}`
         )}
+        {...rest}
       >
         {children}
       </div>
diff --git a/src/pages/ui-components/Grid/Container/index.tsx b/src/pages/ui-components/Grid/Container/index.tsx
index 9bf6756e6..88183dae2 100644
--- a/src/pages/ui-components/Grid/Container/index.tsx
+++ b/src/pages/ui-components/Grid/Container/index.tsx
@@ -3,13 +3,15 @@ import * as React from 'react';
 import styled, { css, cx, StyledProp } from '@eduzz/houston-styles';
 
 export type ContainerLayout = 'fluid' | 'solid';
-export interface ContainerProps extends StyledProp {
-  children: React.ReactNode;
-  layout?: ContainerLayout;
-}
 
-const Container = React.forwardRef<HTMLDivElement, ContainerProps>(({ className, children, layout }, ref) => (
-  <div ref={ref} className={cx(className, `--layout-${layout ?? 'solid'}`)}>
+export type ContainerProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    layout?: ContainerLayout;
+  };
+
+const Container = React.forwardRef<HTMLDivElement, ContainerProps>(({ className, children, layout, ...rest }, ref) => (
+  <div ref={ref} className={cx(className, `--layout-${layout ?? 'solid'}`)} {...rest}>
     {children}
   </div>
 ));
diff --git a/src/pages/ui-components/Grid/Row/index.tsx b/src/pages/ui-components/Grid/Row/index.tsx
index 32c17a216..a3b29314b 100644
--- a/src/pages/ui-components/Grid/Row/index.tsx
+++ b/src/pages/ui-components/Grid/Row/index.tsx
@@ -10,18 +10,22 @@ export type AlignItemsRow = typeof alignItems[number];
 export type JustifyContentRow = typeof justifyContent[number];
 export type Spacing = typeof spacing[number];
 
-export interface RowProps extends StyledProp {
-  children: React.ReactNode;
-  /**
-   * Defaults to 'xxxs'
-   */
-  spacing?: Spacing;
-  alignItems?: AlignItemsRow;
-  justifyContent?: JustifyContentRow;
-}
+export type RowProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    /**
+     * Defaults to 'xxxs'
+     */
+    spacing?: Spacing;
+    alignItems?: AlignItemsRow;
+    justifyContent?: JustifyContentRow;
+  };
 
 const Row = React.forwardRef<HTMLDivElement, RowProps>(
-  ({ className, children, spacing = 'xxxs', justifyContent = 'flex-start', alignItems = 'flex-start' }, ref) => {
+  (
+    { className, children, spacing = 'xxxs', justifyContent = 'flex-start', alignItems = 'flex-start', ...rest },
+    ref
+  ) => {
     return (
       <div
         ref={ref}
@@ -31,6 +35,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>(
           `--justify-content-${justifyContent}`,
           `--align-items-${alignItems}`
         )}
+        {...rest}
       >
         {children}
       </div>
diff --git a/src/pages/ui-components/Layout/Layout.tsx b/src/pages/ui-components/Layout/Layout.tsx
index 365858d18..dc7f2b31a 100644
--- a/src/pages/ui-components/Layout/Layout.tsx
+++ b/src/pages/ui-components/Layout/Layout.tsx
@@ -11,11 +11,12 @@ import LayoutContext, { LayoutContextType, TOPBAR_HEIGHT } from './context';
 import Sidebar from './Sidebar';
 import Topbar from './Topbar';
 
-export interface LayoutProps extends StyledProp {
-  children?: React.ReactNode;
-}
+export type LayoutProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+  };
 
-const Layout = ({ className, children }: LayoutProps) => {
+const Layout = ({ className, children, ...rest }: LayoutProps) => {
   const [hasTopbar, setHasTopbar] = React.useState(false);
   const [hasSidebar, setHasSidebar] = React.useState(false);
   const [hasUserMenu, setHasUserMenu] = React.useState(false);
@@ -90,7 +91,9 @@ const Layout = ({ className, children }: LayoutProps) => {
 
   return (
     <LayoutContext.Provider value={contextValue}>
-      <div className={cx(className, { '--hasTopbar': hasTopbar })}>{children}</div>
+      <div className={cx(className, { '--hasTopbar': hasTopbar })} {...rest}>
+        {children}
+      </div>
     </LayoutContext.Provider>
   );
 };
diff --git a/src/pages/ui-components/Layout/Topbar/Action/index.tsx b/src/pages/ui-components/Layout/Topbar/Action/index.tsx
index dbf967ada..450d57793 100644
--- a/src/pages/ui-components/Layout/Topbar/Action/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/Action/index.tsx
@@ -3,19 +3,20 @@ import styled, { StyledProp, css, cx } from '@eduzz/houston-styles';
 import Button from '../../../Button';
 import IconButton from '../../../IconButton';
 
-export interface ActionProps extends StyledProp {
-  /**
-   * If `true`, the item will be highlighted.
-   */
-  active?: boolean;
-  icon: React.ReactNode;
-  label?: React.ReactNode;
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-}
+export type ActionProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * If `true`, the item will be highlighted.
+     */
+    active?: boolean;
+    icon: React.ReactNode;
+    label?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  };
 
-const Action: React.FC<ActionProps> = ({ active, icon, label, onClick, className }) => {
+const Action: React.FC<ActionProps> = ({ active, icon, label, onClick, className, ...rest }) => {
   return (
-    <div className={cx(className, { '--has-label': !!label })} onClick={onClick}>
+    <div className={cx(className, { '--has-label': !!label })} onClick={onClick} {...rest}>
       {!!label && (
         <Button
           startIcon={icon}
diff --git a/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx b/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx
index ee7ca5299..a11351498 100644
--- a/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx
@@ -13,15 +13,16 @@ import Spinner from '../../../../Loaders/Spinner';
 import Typography from '../../../../Typography';
 import { TOPBAR_DROPDOWN_WIDTH, TOPBAR_HEIGHT } from '../../../context';
 
-export interface AppsDropdownProps extends StyledProp {
-  currentApplication: string | undefined;
-  applications: TopbarApplication[] | undefined;
-  opened: boolean;
-  onClose: () => void;
-}
+export type AppsDropdownProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    currentApplication: string | undefined;
+    applications: TopbarApplication[] | undefined;
+    opened: boolean;
+    onClose: () => void;
+  };
 
 const AppsDropdown = React.memo<AppsDropdownProps>(
-  ({ currentApplication, applications, className, opened, onClose }) => {
+  ({ currentApplication, applications, className, opened, onClose, ...rest }) => {
     const [expanded, toggleExpanded, , closeExpanded] = useBoolean();
 
     React.useEffect(() => {
@@ -39,7 +40,7 @@ const AppsDropdown = React.memo<AppsDropdownProps>(
     }, [opened]);
 
     return (
-      <div className={cx(className, { '--opened': opened, '--expanded': expanded })}>
+      <div className={cx(className, { '--opened': opened, '--expanded': expanded })} {...rest}>
         <div className='houston-topbar-apps-dropdown__header'>
           <Typography weight='bold'>Lista de Apps</Typography>
 
diff --git a/src/pages/ui-components/Layout/Topbar/Apps/index.tsx b/src/pages/ui-components/Layout/Topbar/Apps/index.tsx
index dce3eb506..2d883f0e6 100644
--- a/src/pages/ui-components/Layout/Topbar/Apps/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/Apps/index.tsx
@@ -13,16 +13,16 @@ import Action from '../Action';
 import TopbarContext from '../context';
 import Dropdown from './Dropdown';
 
-export interface TopbarApplication {
+export type TopbarApplication = React.HTMLAttributes<HTMLDivElement> & {
   application: string;
   label: string;
   icon: string;
   beta?: boolean;
   description?: string;
   url: string;
-}
+};
 
-const TopbarApps = React.memo<StyledProp>(({ className }) => {
+const TopbarApps = React.memo<StyledProp>(({ className, ...rest }) => {
   const isSupport = useContextSelector(TopbarContext, context => context.user?.isSupport ?? false);
   const currentApplication = useContextSelector(TopbarContext, context => context.currentApplication);
 
@@ -48,18 +48,16 @@ const TopbarApps = React.memo<StyledProp>(({ className }) => {
   }, [openedDropdown]);
 
   return (
-    <>
-      <div ref={wrapperDropdownRef} className={className}>
-        <Action icon={<AppsIcon />} active={openedDropdown} onClick={toogleDropdown} />
+    <div ref={wrapperDropdownRef} className={className} {...rest}>
+      <Action icon={<AppsIcon />} active={openedDropdown} onClick={toogleDropdown} />
 
-        <Dropdown
-          applications={applications}
-          currentApplication={currentApplication}
-          opened={openedDropdown}
-          onClose={closeDropdown}
-        />
-      </div>
-    </>
+      <Dropdown
+        applications={applications}
+        currentApplication={currentApplication}
+        opened={openedDropdown}
+        onClose={closeDropdown}
+      />
+    </div>
   );
 });
 
diff --git a/src/pages/ui-components/Layout/Topbar/UserMenu/Divider/index.tsx b/src/pages/ui-components/Layout/Topbar/UserMenu/Divider/index.tsx
index 1e25112b8..8a0c82fa0 100644
--- a/src/pages/ui-components/Layout/Topbar/UserMenu/Divider/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/UserMenu/Divider/index.tsx
@@ -1,9 +1,11 @@
 import styled, { StyledProp, css } from '@eduzz/houston-styles';
 
-import Divider from '../../../../Divider';
+import Divider, { DividerProps } from '../../../../Divider';
 
-const UserMenuDivider: React.FC<StyledProp> = ({ className }) => {
-  return <Divider className={className} />;
+type UserMenuDividerProps = StyledProp & DividerProps;
+
+const UserMenuDivider: React.FC<StyledProp> = (props: UserMenuDividerProps) => {
+  return <Divider {...props} />;
 };
 
 export default styled(UserMenuDivider, { label: 'houston-topbar-user-menu-divider' })(
diff --git a/src/pages/ui-components/Layout/Topbar/UserMenu/Item/index.tsx b/src/pages/ui-components/Layout/Topbar/UserMenu/Item/index.tsx
index 10668d86d..b34b51c84 100644
--- a/src/pages/ui-components/Layout/Topbar/UserMenu/Item/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/UserMenu/Item/index.tsx
@@ -21,10 +21,12 @@ export interface UserMenuItemProps extends StyledProp {
   icon?: React.ReactNode;
   onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   disabled?: boolean;
+  id?: string;
   children: string;
 }
 
 const UserMenuItem: React.FC<UserMenuItemProps> = ({
+  id,
   className,
   icon,
   disabled,
@@ -44,13 +46,25 @@ const UserMenuItem: React.FC<UserMenuItemProps> = ({
   );
 
   let content = (
-    <Button startIcon={icon} fullWidth variant='text' onClick={handleClick} className={className} disabled={disabled}>
+    <Button
+      id={id}
+      startIcon={icon}
+      fullWidth
+      variant='text'
+      onClick={handleClick}
+      className={className}
+      disabled={disabled}
+    >
       <Typography color='inherit'>{children}</Typography>
     </Button>
   );
 
   if (Tag) {
-    content = <Tag {...rest}>{content}</Tag>;
+    content = (
+      <Tag id={id} {...rest}>
+        {content}
+      </Tag>
+    );
   }
 
   return <>{content}</>;
diff --git a/src/pages/ui-components/Layout/Topbar/UserMenu/ItemGroup/index.tsx b/src/pages/ui-components/Layout/Topbar/UserMenu/ItemGroup/index.tsx
index 50734f12f..7251d1d30 100644
--- a/src/pages/ui-components/Layout/Topbar/UserMenu/ItemGroup/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/UserMenu/ItemGroup/index.tsx
@@ -2,14 +2,15 @@ import styled, { StyledProp, css } from '@eduzz/houston-styles';
 
 import Typography from '../../../../Typography';
 
-export interface UserMenuGroupProps extends StyledProp {
-  label: string;
-  children: React.ReactNode;
-}
+export type UserMenuGroupProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    label: string;
+    children: React.ReactNode;
+  };
 
-const UserMenuGroup: React.FC<UserMenuGroupProps> = ({ label, className, children }) => {
+const UserMenuGroup = ({ label, className, children, ...rest }: UserMenuGroupProps) => {
   return (
-    <div className={className}>
+    <div className={className} {...rest}>
       <Typography size='xxs' weight='semibold' className='houston-topbar-user-menu-group__label'>
         {label}
       </Typography>
diff --git a/src/pages/ui-components/Layout/Topbar/UserMenu/index.tsx b/src/pages/ui-components/Layout/Topbar/UserMenu/index.tsx
index 2d5e14dab..2b29763f5 100644
--- a/src/pages/ui-components/Layout/Topbar/UserMenu/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/UserMenu/index.tsx
@@ -7,11 +7,12 @@ import styled, { css, cx, StyledProp } from '@eduzz/houston-styles';
 import Portal from '../../../Portal';
 import LayoutContext, { TOPBAR_HEIGHT, TOPBAR_MENU_MIN_WIDTH_IN_PX } from '../../context';
 
-export interface UserMenuProps extends StyledProp {
-  children: React.ReactNode;
-}
+export type UserMenuProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+  };
 
-const UserMenu: React.FC<UserMenuProps> = ({ className, children }) => {
+const UserMenu = ({ className, children, ...rest }: UserMenuProps) => {
   const opened = useContextSelector(LayoutContext, context => context.userMenu.opened);
   const register = useContextSelector(LayoutContext, context => context.userMenu.register);
   const container = useContextSelector(LayoutContext, context => context.userMenu.container);
@@ -25,7 +26,9 @@ const UserMenu: React.FC<UserMenuProps> = ({ className, children }) => {
 
   return (
     <Portal target={container}>
-      <div className={cx(className, opened && '--opened')}>{children}</div>
+      <div className={cx(className, opened && '--opened')} {...rest}>
+        {children}
+      </div>
     </Portal>
   );
 };
diff --git a/src/pages/ui-components/Layout/Topbar/index.tsx b/src/pages/ui-components/Layout/Topbar/index.tsx
index 8daa66b76..7a5e64546 100644
--- a/src/pages/ui-components/Layout/Topbar/index.tsx
+++ b/src/pages/ui-components/Layout/Topbar/index.tsx
@@ -22,26 +22,27 @@ import UserMenuDivider from './UserMenu/Divider';
 import UserMenuItem from './UserMenu/Item';
 import UserMenuGroup from './UserMenu/ItemGroup';
 
-export interface TopbarProps extends StyledProp {
-  children?: React.ReactNode;
-  logo?: string;
-  logoMobile?: string;
-  currentApplication?: string;
-  blackMode?: boolean;
-  user?: {
-    id?: number;
-    name: string;
-    email?: string;
-    avatar?: string;
-    belt?: string;
-    tag?: 'lite' | 'pro' | 'unity' | 'partner';
-    isSupport?: boolean;
-    supportId?: number;
+export type TopbarProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+    logo?: string;
+    logoMobile?: string;
+    currentApplication?: string;
+    blackMode?: boolean;
+    user?: {
+      id?: number;
+      name: string;
+      email?: string;
+      avatar?: string;
+      belt?: string;
+      tag?: 'lite' | 'pro' | 'unity' | 'partner';
+      isSupport?: boolean;
+      supportId?: number;
+    };
   };
-}
 
 const Topbar = React.memo<TopbarProps>(
-  ({ children, currentApplication, logo, logoMobile, className, blackMode, user }) => {
+  ({ children, currentApplication, logo, logoMobile, className, blackMode, user, ...rest }) => {
     const theme = useHoustonTheme();
     const register = useContextSelector(LayoutContext, context => context.topbar.register);
     const sidebarToogleOpened = useContextSelector(LayoutContext, context => context.sidebar.toogleOpened);
@@ -67,7 +68,7 @@ const Topbar = React.memo<TopbarProps>(
 
     return (
       <TopbarContext.Provider value={contextValue}>
-        <div className={cx(className, { '--black-mode': blackMode })}>
+        <div className={cx(className, { '--black-mode': blackMode })} {...rest}>
           <header className='houston-topbar__header'>
             <div className='houston-topbar__start'>
               <Action
diff --git a/src/pages/ui-components/Loaders/Line/index.tsx b/src/pages/ui-components/Loaders/Line/index.tsx
index 338dd092f..6d0bcee6f 100644
--- a/src/pages/ui-components/Loaders/Line/index.tsx
+++ b/src/pages/ui-components/Loaders/Line/index.tsx
@@ -2,19 +2,20 @@ import { useMemo } from 'react';
 
 import styled, { css, cx, keyframes, StyledProp } from '@eduzz/houston-styles';
 
-export interface LineLoaderProps extends StyledProp {
-  mode?: 'determinate' | 'indeterminate';
-  /**
-   * 0 to 1. Ex: 0.2 = 20%
-   */
-  value?: number;
-}
+export type LineLoaderProps = StyledProp &
+  React.HTMLAttributes<HTMLDivElement> & {
+    mode?: 'determinate' | 'indeterminate';
+    /**
+     * 0 to 1. Ex: 0.2 = 20%
+     */
+    value?: number;
+  };
 
-const LineLoader = ({ className, mode = 'indeterminate', value }: LineLoaderProps) => {
+const LineLoader = ({ className, mode = 'indeterminate', value, ...rest }: LineLoaderProps) => {
   const style = useMemo(() => (mode === 'determinate' ? { width: `${(value ?? 0) * 100}%` } : {}), [value, mode]);
 
   return (
-    <div className={cx(className, `--hts-line-loader-mode-${mode}`)}>
+    <div className={cx(className, `--hts-line-loader-mode-${mode}`)} {...rest}>
       <div style={style} />
     </div>
   );
diff --git a/src/pages/ui-components/Loaders/Spinner/index.tsx b/src/pages/ui-components/Loaders/Spinner/index.tsx
index 82723a0b4..f6e7730f8 100644
--- a/src/pages/ui-components/Loaders/Spinner/index.tsx
+++ b/src/pages/ui-components/Loaders/Spinner/index.tsx
@@ -2,19 +2,26 @@ import styled, { StyledProp, keyframes, css } from '@eduzz/houston-styles';
 
 import getColorFallback from '../../utils/getColorFallback';
 
-export interface LoaderProps extends StyledProp {
-  size?: number;
-  color?: 'positive' | 'negative' | 'warning' | 'informative' | 'primary' | 'inherit';
-}
+export type SpinnerProps = StyledProp &
+  React.HTMLAttributes<HTMLOrSVGElement> & {
+    size?: number;
+    color?: 'positive' | 'negative' | 'warning' | 'informative' | 'primary' | 'inherit';
+  };
 
 const SIZE_BASE = 65;
 const CIRCLE_SIZE_BASE = 30;
 
-const Spinner = ({ className, size = SIZE_BASE }: LoaderProps) => {
+const Spinner = ({ className, size = SIZE_BASE, ...rest }: SpinnerProps) => {
   const round = (size / SIZE_BASE) * CIRCLE_SIZE_BASE;
 
   return (
-    <svg className={className} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size + 1} ${size + 1}`}>
+    <svg
+      className={className}
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox={`0 0 ${size + 1} ${size + 1}`}
+      {...rest}
+    >
       <circle fill='none' strokeLinecap='round' cx={round + round * 0.1} cy={round + round * 0.1} r={round}></circle>
     </svg>
   );
diff --git a/src/pages/ui-components/Overlay/index.tsx b/src/pages/ui-components/Overlay/index.tsx
index 3a749881a..44b58cef2 100644
--- a/src/pages/ui-components/Overlay/index.tsx
+++ b/src/pages/ui-components/Overlay/index.tsx
@@ -6,7 +6,7 @@ import useScrollBlock from '../hooks/useScrollBlock';
 
 export type OverlayColor = 'low' | 'high';
 
-export interface OverlayProps {
+export type OverlayProps = React.HTMLAttributes<HTMLDivElement> & {
   children?: React.ReactNode;
   visible: boolean;
   /**
@@ -15,7 +15,7 @@ export interface OverlayProps {
   color?: OverlayColor;
   underTopbar?: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
-}
+};
 
 const Overlay = ({ className, visible, color = 'low', children, underTopbar, ...rest }: OverlayProps & StyledProp) => {
   const { disableScroll, enableScroll } = useScrollBlock();
diff --git a/src/pages/ui-components/Progress/Bar/index.tsx b/src/pages/ui-components/Progress/Bar/index.tsx
index da61e4089..5a5fbf7b2 100644
--- a/src/pages/ui-components/Progress/Bar/index.tsx
+++ b/src/pages/ui-components/Progress/Bar/index.tsx
@@ -1,14 +1,16 @@
+import * as React from 'react';
+
 import styled, { css, cx, StyledProp } from '@eduzz/houston-styles';
 
-export interface ProgressBarProps {
+export type ProgressBarProps = React.HTMLAttributes<HTMLDivElement> & {
   value: number;
   max: number;
   min: number;
-}
+};
 
-const ProgressBar = ({ className, value, min, max }: ProgressBarProps & StyledProp) => {
+const ProgressBar = ({ className, value, min, max, ...rest }: ProgressBarProps & StyledProp) => {
   return (
-    <div className={cx(className, 'hst-progress__bar')}>
+    <div className={cx(className, 'hst-progress__bar')} {...rest}>
       <span
         className='hst-progress-bar__filled'
         style={{ width: `${value > 0 ? value : 0}%` }}
diff --git a/src/pages/ui-components/Showcase/ControlDots/index.tsx b/src/pages/ui-components/Showcase/ControlDots/index.tsx
index c25f43dc3..3c85667c1 100644
--- a/src/pages/ui-components/Showcase/ControlDots/index.tsx
+++ b/src/pages/ui-components/Showcase/ControlDots/index.tsx
@@ -6,7 +6,9 @@ import { ShowcaseContext } from '../context';
 
 const DOTS_DIMENSION_SIZE = 10;
 
-const ControlDots = ({ className }: StyledProp) => {
+type ControlDotsProps = StyledProp & React.HTMLAttributes<HTMLDivElement>;
+
+const ControlDots = (props: ControlDotsProps) => {
   const currentStep = useContextSelector(ShowcaseContext, context => context.currentStep);
   const controlDots = useContextSelector(ShowcaseContext, context => context.controlDots);
   const totalSteps = useContextSelector(ShowcaseContext, context => context.totalSteps);
@@ -16,7 +18,7 @@ const ControlDots = ({ className }: StyledProp) => {
   const dots = Array(totalSteps).fill(0);
 
   return (
-    <div className={className}>
+    <div {...props}>
       {dots.map((_, index) => {
         const activeDot = currentStep - 1 === index;
 
diff --git a/src/pages/ui-components/Showcase/Text/index.tsx b/src/pages/ui-components/Showcase/Text/index.tsx
index c3703de0b..d3c150327 100644
--- a/src/pages/ui-components/Showcase/Text/index.tsx
+++ b/src/pages/ui-components/Showcase/Text/index.tsx
@@ -1,9 +1,9 @@
 import styled, { css, StyledProp } from '@eduzz/houston-styles';
-import Paragraph from '@eduzz/houston-ui/Typography/Paragraph';
+import Paragraph, { ParagraphProps } from '@eduzz/houston-ui/Typography/Paragraph';
 
-const Text = ({ children, className }: React.HTMLAttributes<HTMLDivElement> & StyledProp) => {
+const Text = ({ children, className, ...rest }: Omit<ParagraphProps, 'size' | 'color'> & StyledProp) => {
   return (
-    <Paragraph className={className} size='sm' color='neutralColor.low.medium'>
+    <Paragraph className={className} size='sm' color='neutralColor.low.medium' {...rest}>
       {children}
     </Paragraph>
   );
diff --git a/src/pages/ui-components/Showcase/Title/index.tsx b/src/pages/ui-components/Showcase/Title/index.tsx
index fcfb614d6..6bacaf8ba 100644
--- a/src/pages/ui-components/Showcase/Title/index.tsx
+++ b/src/pages/ui-components/Showcase/Title/index.tsx
@@ -1,9 +1,9 @@
 import styled, { css, StyledProp } from '@eduzz/houston-styles';
-import Heading from '@eduzz/houston-ui/Typography/Heading';
+import Heading, { HeadingProps } from '@eduzz/houston-ui/Typography/Heading';
 
-const Title = ({ children, className }: React.HTMLAttributes<HTMLDivElement> & StyledProp) => {
+const Title = ({ children, className, ...rest }: Omit<HeadingProps, 'size' | 'as'> & StyledProp) => {
   return (
-    <Heading size='sm' as='h6' className={className} color='neutralColor.low.dark'>
+    <Heading size='sm' as='h6' className={className} color='neutralColor.low.dark' {...rest}>
       {children}
     </Heading>
   );
diff --git a/src/pages/ui-components/Table/Action/index.tsx b/src/pages/ui-components/Table/Action/index.tsx
index 7b82dc95f..2c52dda6a 100644
--- a/src/pages/ui-components/Table/Action/index.tsx
+++ b/src/pages/ui-components/Table/Action/index.tsx
@@ -23,10 +23,12 @@ export interface TableActionOptionProp {
   icon?: React.ReactNode;
   disabled?: boolean;
   onClick: (data: unknown, index: number, event?: React.MouseEvent<HTMLButtonElement>) => any | Promise<any>;
+  id?: string;
   children: string;
 }
 
 const TableActionOption = ({
+  id,
   as: Tag,
   children,
   disabled,
@@ -65,13 +67,17 @@ const TableActionOption = ({
   );
 
   let content = (
-    <Button startIcon={icon} variant='text' onClick={handleClick} className={className} disabled={disabled}>
+    <Button id={id} startIcon={icon} variant='text' onClick={handleClick} className={className} disabled={disabled}>
       <Typography color='inherit'>{children}</Typography>
     </Button>
   );
 
   if (Tag) {
-    content = <Tag {...rest}>{content}</Tag>;
+    content = (
+      <Tag id={id} {...rest}>
+        {content}
+      </Tag>
+    );
   }
 
   return <Portal target={portal}>{content}</Portal>;
diff --git a/src/pages/ui-components/Table/Body/index.tsx b/src/pages/ui-components/Table/Body/index.tsx
index 1507f77b9..28589ad91 100644
--- a/src/pages/ui-components/Table/Body/index.tsx
+++ b/src/pages/ui-components/Table/Body/index.tsx
@@ -9,10 +9,11 @@ import TableCell from '../Cell';
 import TableContext from '../context';
 
 export interface TableBodyProps {
+  id?: string;
   children: React.ReactNode;
 }
 
-const TableBody = ({ children }: TableBodyProps) => {
+const TableBody = ({ id, children }: TableBodyProps) => {
   const loading = useContextSelector(TableContext, context => context.loading);
   const loadingText = useContextSelector(TableContext, context => context.loadingText);
   const error = useContextSelector(TableContext, context => context.error);
@@ -33,7 +34,7 @@ const TableBody = ({ children }: TableBodyProps) => {
 
   if (loading) {
     return (
-      <tbody>
+      <tbody id={id}>
         <tr>
           <td align='center' colSpan={1000}>
             <LineLoader />
@@ -46,7 +47,7 @@ const TableBody = ({ children }: TableBodyProps) => {
 
   if (error) {
     return (
-      <tbody>
+      <tbody id={id}>
         <tr>
           <TableCell align='center' colSpan={1000}>
             <Typography marginBottom='xxxs' weight='regular' lineHeight='xl' className='__text'>
@@ -66,7 +67,7 @@ const TableBody = ({ children }: TableBodyProps) => {
 
   if (total === 0) {
     return (
-      <tbody>
+      <tbody id={id}>
         <tr>
           <TableCell align='center' colSpan={1000}>
             {emptyText}
diff --git a/src/pages/ui-components/Table/Collapse/index.tsx b/src/pages/ui-components/Table/Collapse/index.tsx
index abaa2ae02..b83aa184d 100644
--- a/src/pages/ui-components/Table/Collapse/index.tsx
+++ b/src/pages/ui-components/Table/Collapse/index.tsx
@@ -9,6 +9,7 @@ import Portal from '../../Portal';
 import TableRowContext from '../Row/context';
 
 export interface TableCollapseContentProps {
+  id?: string;
   onOpen?: (data: unknown, index: number) => void;
   onClose?: (data: unknown, index: number) => void;
   disabled?: boolean;
@@ -19,6 +20,7 @@ export interface TableCollapseContentProps {
 }
 
 const CollapseContent = ({
+  id,
   onOpen,
   onClose,
   keepMounted,
@@ -44,6 +46,7 @@ const CollapseContent = ({
   return (
     <Portal target={portal}>
       <td
+        id={id}
         colSpan={1000}
         className={cx(
           'hts-table__collapse',
diff --git a/src/pages/ui-components/Table/Column/SortLabel/index.tsx b/src/pages/ui-components/Table/Column/SortLabel/index.tsx
index 590b17749..a84291d78 100644
--- a/src/pages/ui-components/Table/Column/SortLabel/index.tsx
+++ b/src/pages/ui-components/Table/Column/SortLabel/index.tsx
@@ -4,6 +4,7 @@ import IconArrowUp from '@eduzz/houston-icons/ArrowUp';
 import { cx } from '@eduzz/houston-styles';
 
 interface SortLabelProps {
+  id?: string;
   sortable?: boolean;
   active?: boolean;
   disabled?: boolean;
@@ -12,13 +13,14 @@ interface SortLabelProps {
   children?: React.ReactNode;
 }
 
-const SortLabel: React.FC<SortLabelProps> = ({ children, sortable, active, direction, disabled, onClick }) => {
+const SortLabel = ({ id, children, sortable, active, direction, disabled, onClick }: SortLabelProps) => {
   if (!sortable) {
     return <>{children}</>;
   }
 
   return (
     <div
+      id={id}
       className={cx('hts-table__column-sort', { '--hts-sort-rev': direction === 'desc' })}
       onClick={disabled ? undefined : onClick}
     >
diff --git a/src/pages/ui-components/Table/Column/index.tsx b/src/pages/ui-components/Table/Column/index.tsx
index 1ac552f1b..e32bef30d 100644
--- a/src/pages/ui-components/Table/Column/index.tsx
+++ b/src/pages/ui-components/Table/Column/index.tsx
@@ -14,6 +14,7 @@ export interface TableColumnProps extends StyledProp, React.ThHTMLAttributes<HTM
   children?: React.ReactNode;
   sortableField?: string;
 }
+
 const TableColumn = ({ sortableField, children, className, ...rest }: TableColumnProps) => {
   const onSort = useContextSelector(TableHeaderContext, context => context.onSort);
   const sortField = useContextSelector(TableHeaderContext, context => context.sortField);
diff --git a/src/pages/ui-components/Table/Header/index.tsx b/src/pages/ui-components/Table/Header/index.tsx
index 4043d4778..c6707aeb0 100644
--- a/src/pages/ui-components/Table/Header/index.tsx
+++ b/src/pages/ui-components/Table/Header/index.tsx
@@ -8,12 +8,13 @@ import TableContext from '../context';
 import TableHeaderContext, { TableHeaderContextProps } from './context';
 
 export interface TableHeadProps extends TableHeaderContextProps {
+  id?: string;
   children: React.ReactNode;
   columnActionTitle?: string;
   disabledActionsColumn?: boolean;
 }
 
-const TableHeader = ({ children, disabledActionsColumn, columnActionTitle, ...contextValue }: TableHeadProps) => {
+const TableHeader = ({ id, children, disabledActionsColumn, columnActionTitle, ...contextValue }: TableHeadProps) => {
   const loading = useContextSelector(TableContext, context => context.loading);
   const hasActionsContext = useContextSelector(TableContext, context => context.rows.some(r => r.hasActions));
   const hasCollapseContext = useContextSelector(TableContext, context => context.rows.some(r => r.hasCollapse));
@@ -27,7 +28,7 @@ const TableHeader = ({ children, disabledActionsColumn, columnActionTitle, ...co
 
   return (
     <TableHeaderContext.Provider value={contextValue}>
-      <thead className={columnActionHidden ? '--hts-action-column-hidden' : undefined}>
+      <thead id={id} className={columnActionHidden ? '--hts-action-column-hidden' : undefined}>
         <tr>
           {children}
 
diff --git a/src/pages/ui-components/Tabs/index.tsx b/src/pages/ui-components/Tabs/index.tsx
index 26963a8ac..d19ada0d9 100644
--- a/src/pages/ui-components/Tabs/index.tsx
+++ b/src/pages/ui-components/Tabs/index.tsx
@@ -128,6 +128,7 @@ const Tabs = ({ children, value, onChange, selectOnMobile, destroyOnClose, mount
     return (
       <>
         <Select
+          id={rest.id}
           renderValue={value => (
             <StyledOption>
               {tabs[value].props.icon}
@@ -148,6 +149,7 @@ const Tabs = ({ children, value, onChange, selectOnMobile, destroyOnClose, mount
         </Select>
         {tabs?.map((tab, index) => (
           <Collapse
+            id={tab.props.id}
             key={index}
             timeout={0}
             visibled={activeTabValue === index}
@@ -220,6 +222,7 @@ const Tabs = ({ children, value, onChange, selectOnMobile, destroyOnClose, mount
 
       {tabs?.map((tab, index) => (
         <Collapse
+          id={tab.props.id}
           key={index}
           timeout={0}
           visibled={activeTabValue === index}

From 9206c256cf0a97f323d598a4a76f2a36c3324d48 Mon Sep 17 00:00:00 2001
From: Fernando <fermoraeslima10@gmail.com>
Date: Wed, 14 Sep 2022 15:19:01 -0300
Subject: [PATCH 5/5] build(version): 0.64.0

---
 package.json                         |  2 +-
 src/dev/package.json                 | 10 +++++-----
 src/package.json                     | 10 +++++-----
 src/pages/eslint-config/package.json |  2 +-
 src/pages/forms/package.json         |  4 ++--
 src/pages/hooks/package.json         |  2 +-
 src/pages/icons/package.json         |  2 +-
 src/pages/styles/package.json        |  4 ++--
 src/pages/tokens/package.json        |  2 +-
 src/pages/ui-components/package.json | 10 +++++-----
 10 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 8b1760467..310781d05 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@eduzz/houston-workspaces",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "workspaces": [
     "src/pages/*",
     "src/dev",
diff --git a/src/dev/package.json b/src/dev/package.json
index 348e7e53e..8cf3bd407 100644
--- a/src/dev/package.json
+++ b/src/dev/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@eduzz/houston-dev",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "private": true,
   "dependencies": {
-    "@eduzz/houston-forms": "0.63.4",
-    "@eduzz/houston-hooks": "0.63.4",
-    "@eduzz/houston-icons": "0.63.4",
-    "@eduzz/houston-ui": "0.63.4",
+    "@eduzz/houston-forms": "0.64.0",
+    "@eduzz/houston-hooks": "0.64.0",
+    "@eduzz/houston-icons": "0.64.0",
+    "@eduzz/houston-ui": "0.64.0",
     "react-dom": "^18",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
diff --git a/src/package.json b/src/package.json
index 96178c1cf..f4bfbc202 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eduzz/docs",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "private": true,
   "scripts": {
     "start": "next dev",
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^1.8.8",
-    "@eduzz/houston-forms": "0.63.4",
-    "@eduzz/houston-hooks": "0.63.4",
-    "@eduzz/houston-icons": "0.63.4",
-    "@eduzz/houston-ui": "0.63.4",
+    "@eduzz/houston-forms": "0.64.0",
+    "@eduzz/houston-hooks": "0.64.0",
+    "@eduzz/houston-icons": "0.64.0",
+    "@eduzz/houston-ui": "0.64.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "dokz": "2.0.9",
diff --git a/src/pages/eslint-config/package.json b/src/pages/eslint-config/package.json
index 9d86da506..7b6c56f0c 100644
--- a/src/pages/eslint-config/package.json
+++ b/src/pages/eslint-config/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/eslint-config-houston",
   "private": false,
-  "version": "0.63.4",
+  "version": "0.64.0",
   "description": "Eduzz Houston Eslint Config",
   "author": "Eduzz Team",
   "license": "MIT",
diff --git a/src/pages/forms/package.json b/src/pages/forms/package.json
index ad232273a..796312933 100644
--- a/src/pages/forms/package.json
+++ b/src/pages/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eduzz/houston-forms",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "description": "Houston Forms",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -19,7 +19,7 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@eduzz/houston-hooks": "0.63.4",
+    "@eduzz/houston-hooks": "0.64.0",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2",
     "formik": "^2.2.9",
diff --git a/src/pages/hooks/package.json b/src/pages/hooks/package.json
index bc6ac7f0e..32cfdb4e6 100644
--- a/src/pages/hooks/package.json
+++ b/src/pages/hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-hooks",
   "description": "Eduzz Houston Hooks",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",
diff --git a/src/pages/icons/package.json b/src/pages/icons/package.json
index 4a197a52c..9f9958021 100644
--- a/src/pages/icons/package.json
+++ b/src/pages/icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-icons",
   "description": "Eduzz Houston Icons",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",
diff --git a/src/pages/styles/package.json b/src/pages/styles/package.json
index 6f65a8349..0e8f9b0c0 100644
--- a/src/pages/styles/package.json
+++ b/src/pages/styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-styles",
   "description": "Eduzz Houston Style",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",
@@ -19,7 +19,7 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@eduzz/houston-tokens": "0.63.4",
+    "@eduzz/houston-tokens": "0.64.0",
     "@emotion/cache": "^11",
     "@emotion/css": "^11",
     "@emotion/react": "^11",
diff --git a/src/pages/tokens/package.json b/src/pages/tokens/package.json
index 2c9f80e9a..84f83793e 100644
--- a/src/pages/tokens/package.json
+++ b/src/pages/tokens/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-tokens",
   "description": "Eduzz Houston Tokens",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",
diff --git a/src/pages/ui-components/package.json b/src/pages/ui-components/package.json
index 1afed2c42..13fd061d9 100644
--- a/src/pages/ui-components/package.json
+++ b/src/pages/ui-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-ui",
   "description": "Eduzz Houston Components UI",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",
@@ -19,10 +19,10 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@eduzz/houston-forms": "0.63.4",
-    "@eduzz/houston-hooks": "0.63.4",
-    "@eduzz/houston-icons": "0.63.4",
-    "@eduzz/houston-styles": "0.63.4",
+    "@eduzz/houston-forms": "0.64.0",
+    "@eduzz/houston-hooks": "0.64.0",
+    "@eduzz/houston-icons": "0.64.0",
+    "@eduzz/houston-styles": "0.64.0",
     "@emotion/cache": "^11",
     "@emotion/css": "^11",
     "@emotion/react": "^11",