@ama-pt/agora-design-system 2.2.8 → 3.0.0

package/artifacts/dist/types/components/input-time/time-text/time-text.d.ts

@@ -1,10 +1,10 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from 'react';
+import { ComponentProps, FC } from 'react';
 import './time-text.scss';
-export interface TimeTextProps extends ComponentPropsWithRef<'input'> {
+export interface TimeTextProps extends ComponentProps<'input'> {
     setInputTextValue: (selectedTime: string) => void;
     hourInputPlaceholder?: string;
     minuteInputPlaceholder?: string;
     periodInputPlaceholder?: string;
 }
-export declare const InnerComponent: ForwardRefRenderFunction<HTMLInputElement, TimeTextProps>;
-export declare const TimeText: React.ForwardRefExoticComponent<Omit<TimeTextProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const TimeText: FC<TimeTextProps>;
+export { TimeText };

package/artifacts/dist/types/components/link-wrapper/link-wrapper.d.ts

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp } from '../../models';
 import './link-wrapper.scss';
 export type LinkWrapperAppearance = 'link' | 'text';
 export type LinkWrapperVariant = 'primary' | 'informative' | 'neutral' | 'success' | 'warning' | 'danger';
-export interface LinkWrapperProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+export interface LinkWrapperProps extends Omit<ComponentProps<'span'>, 'children'> {
     /**
      * The flag to set Dark mode.
      */
@@ -33,4 +33,5 @@ export interface LinkWrapperProps extends Omit<ComponentPropsWithRef<'span'>, 'c
      */
     [dataAttribute: `data-${string}`]: string;
 }
-export declare const LinkWrapper: React.ForwardRefExoticComponent<Omit<LinkWrapperProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const LinkWrapper: FC<LinkWrapperProps>;
+export { LinkWrapper };

package/artifacts/dist/types/components/modal-dialog/modal-dialog.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithRef, FC, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { ModalConfiguration } from './modal-config.model';
 import './modal-dialog.scss';
-export interface ModalDialogProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+export interface ModalDialogProps extends Omit<ComponentProps<'div'>, 'title'> {
     /**
      *  Modal configurations
      */

package/artifacts/dist/types/components/panel-switcher/desktop/panel-switcher-desktop.d.ts

@@ -1,13 +1,13 @@
 import { TabBodyProps, TabHeaderProps } from '../../../components/tabs';
 import { BooleanProp } from '../../../models';
-import React, { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import React, { ComponentProps, FC, ReactElement } from 'react';
 import './panel-switcher-desktop.scss';
-export interface PanelSwitcherDesktopProps extends ComponentPropsWithoutRef<'div'> {
+export interface PanelSwitcherDesktopProps extends ComponentProps<'div'> {
     leadingIcon?: string;
     leadingIconHover?: string;
     withIcon?: BooleanProp;
-    buttonListRef: React.RefObject<HTMLDivElement>;
-    panelRef: React.RefObject<HTMLDivElement>;
+    buttonListRef: React.RefObject<HTMLDivElement | null>;
+    panelRef: React.RefObject<HTMLDivElement | null>;
     activeButton: number;
     activateButton: (index: number) => void;
     buttonsHeaderData: Array<ReactElement<TabHeaderProps>>;

package/artifacts/dist/types/components/panel-switcher/mobile/panel-switcher-mobile.d.ts

@@ -1,12 +1,12 @@
+import React, { FC, ReactElement, RefObject } from 'react';
 import { TabBodyProps, TabHeaderProps } from '../../../components/tabs';
 import { BooleanProp } from '../../../models';
-import React, { FC, ReactElement } from 'react';
 import './panel-switcher-mobile.scss';
 export interface PanelSwitcherMobileProps {
     modalCloseButtonLabel: string;
     leadingIcon?: string;
     leadingIconHover?: string;
-    buttonListRef: React.RefObject<HTMLDivElement>;
+    buttonListRef: RefObject<HTMLDivElement | null>;
     buttonsHeaderData: Array<ReactElement<TabHeaderProps>>;
     buttonsBodyData: Array<ReactElement<TabBodyProps>>;
     activeButton?: number;

package/artifacts/dist/types/components/pill/pill.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, FC, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp } from '../../models';
 import './pill.scss';
 /**
@@ -13,7 +13,7 @@ export type PillAppearance = 'solid' | 'outline';
  * The available pill size. Defines the pill size.
  */
 export type PillSize = 'default' | 'large';
-export interface PillProps extends ComponentPropsWithRef<'div'> {
+export interface PillProps extends ComponentProps<'div'> {
     /**
      * The pill appearance. Define the pill Shape.
      */

package/artifacts/dist/types/components/progress-bar/progress-bar.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import { BooleanProp } from '../../models';
 import './progress-bar.scss';
-export interface ProgressBarProps extends ComponentPropsWithRef<'div'> {
+export interface ProgressBarProps extends ComponentProps<'div'> {
     /**
      * The current value of the progress.
      */
@@ -30,5 +30,17 @@ export interface ProgressBarProps extends ComponentPropsWithRef<'div'> {
      * Whether the progress has error or not.
      */
     hasError?: BooleanProp;
+    /**
+     * Whether the progress bar is the first or not.
+     */
+    isFirst: boolean;
+    /**
+     * Whether the progress bar is the last or not.
+     */
+    isLast: boolean;
+    /**
+     * Whether the progress bass is in the middle or not.
+     */
+    isMiddle?: boolean;
 }
 export declare const ProgressBar: FC<ProgressBarProps>;

package/artifacts/dist/types/components/radio/radio.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState } from '../../models';
 import './radio.scss';
-export interface RadioButtonProps extends ComponentPropsWithRef<'input'> {
+export interface RadioButtonProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -35,5 +35,5 @@ export interface RadioButtonProps extends ComponentPropsWithRef<'input'> {
      */
     darkMode?: BooleanProp;
 }
-export declare const InnerRadio: ForwardRefRenderFunction<HTMLInputElement, RadioButtonProps>;
-export declare const RadioButton: React.ForwardRefExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const RadioButton: FC<RadioButtonProps>;
+export { RadioButton };

package/artifacts/dist/types/components/ratings/rating-buttons/rating-buttons.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithRef } from 'react';
+import { ComponentProps, FC } from 'react';
 import { BooleanProp } from '../../../models';
 import { ButtonProps, ButtonVariant } from '../../../components/button';
 import './rating-buttons.scss';
@@ -6,7 +6,7 @@ export type RatingStatus = 'like' | 'dislike' | 'neutral';
 export interface RatingButtonsElement extends HTMLDivElement {
     status: RatingStatus;
 }
-export interface RatingButtonsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'ref'> {
+export interface RatingButtonsProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
      * Like button definition.
      */
@@ -32,4 +32,5 @@ export interface RatingButtonsProps extends Omit<ComponentPropsWithRef<'div'>, '
      */
     onChange?: (status: RatingStatus) => void;
 }
-export declare const RatingButtons: React.ForwardRefExoticComponent<RatingButtonsProps & React.RefAttributes<RatingButtonsElement>>;
+declare const RatingButtons: FC<RatingButtonsProps>;
+export { RatingButtons };

package/artifacts/dist/types/components/ratings/rating-icons/rating-icons.d.ts

@@ -1,11 +1,11 @@
-import React, { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { ComponentProps, FC, ReactElement, ReactNode } from 'react';
 import { IconProps } from '../../../components/icon';
 import { BooleanProp, FeedbackState } from '../../../models';
 import './rating-icons.scss';
 export interface RatingIconsElement extends HTMLDivElement {
     rating: number;
 }
-export interface RatingIconsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'ref'> {
+export interface RatingIconsProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
      * Label of the rating icons.
      */
@@ -51,4 +51,5 @@ export interface RatingIconsProps extends Omit<ComponentPropsWithRef<'div'>, 'on
      */
     children?: ReactElement<IconProps> | ReactElement<IconProps>[];
 }
-export declare const RatingIcons: React.ForwardRefExoticComponent<RatingIconsProps & React.RefAttributes<RatingIconsElement>>;
+declare const RatingIcons: FC<RatingIconsProps>;
+export { RatingIcons };

package/artifacts/dist/types/components/search-pagination/search-page.d.ts

@@ -1,6 +1,6 @@
-import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
+import { ComponentProps, FC } from 'react';
 import { BooleanProp } from '../../models';
-export interface SearchPageProps extends ComponentPropsWithoutRef<'div'> {
+export interface SearchPageProps extends ComponentProps<'div'> {
     /**
      * Current page.
      */
@@ -10,5 +10,5 @@ export interface SearchPageProps extends ComponentPropsWithoutRef<'div'> {
      */
     pageNumber?: number;
 }
-export declare const InnerSearchPage: ForwardRefRenderFunction<HTMLDivElement, SearchPageProps>;
-export declare const SearchPage: React.ForwardRefExoticComponent<SearchPageProps & React.RefAttributes<HTMLDivElement>>;
+declare const SearchPage: FC<SearchPageProps>;
+export { SearchPage };

package/artifacts/dist/types/components/search-pagination/search-pagination-number-overlay.d.ts

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
-export interface SearchPaginationNumberOverlayProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentProps, FC } from 'react';
+export interface SearchPaginationNumberOverlayProps extends ComponentProps<'div'> {
     /**
      * Dots value.
      */
     value?: string;
 }
-export declare const InnerSearchPaginationNumberOverlayProps: ForwardRefRenderFunction<HTMLDivElement, SearchPaginationNumberOverlayProps>;
-export declare const SearchPaginationNumberOverlay: React.ForwardRefExoticComponent<SearchPaginationNumberOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const SearchPaginationNumberOverlay: FC<SearchPaginationNumberOverlayProps>;
+export { SearchPaginationNumberOverlay };

package/artifacts/dist/types/components/search-pagination/search-pagination.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
+import { ComponentProps, FC } from 'react';
 import { BooleanProp } from '../../models';
 import './search-pagination.scss';
-export interface SearchPaginationProps extends Omit<ComponentPropsWithoutRef<'nav'>, 'onChange'> {
+export interface SearchPaginationProps extends Omit<ComponentProps<'nav'>, 'onChange'> {
     /**
      * Define the total number of pages.
      */
@@ -39,5 +39,5 @@ export interface SearchPaginationProps extends Omit<ComponentPropsWithoutRef<'na
      */
     onChange?: (page: number) => void;
 }
-export declare const InnerSearchPagination: ForwardRefRenderFunction<HTMLDivElement, SearchPaginationProps>;
-export declare const SearchPagination: React.ForwardRefExoticComponent<SearchPaginationProps & React.RefAttributes<HTMLDivElement>>;
+declare const SearchPagination: FC<SearchPaginationProps>;
+export { SearchPagination };

package/artifacts/dist/types/components/shared/feedback/feedback.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState } from '../../../models';
 import './feedback.scss';
-export interface FeedbackProps extends ComponentPropsWithoutRef<'div'> {
+export interface FeedbackProps extends ComponentProps<'div'> {
     /**
      * Defines the state of the feedback text. This param will change the feedback icon and dye it.
      */
@@ -15,5 +15,5 @@ export interface FeedbackProps extends ComponentPropsWithoutRef<'div'> {
      */
     darkMode?: BooleanProp;
 }
-export declare const InnerFeedback: ForwardRefRenderFunction<HTMLDivElement, FeedbackProps>;
-export declare const Feedback: React.ForwardRefExoticComponent<FeedbackProps & React.RefAttributes<HTMLDivElement>>;
+declare const Feedback: FC<FeedbackProps>;
+export { Feedback };

package/artifacts/dist/types/components/shared/icon-set/icon-set.d.ts

@@ -1,13 +1,13 @@
-import React, { ComponentPropsWithRef, FC, ForwardRefRenderFunction, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { IconProps } from '../../icon/icon';
 export type IconSetState = 'default' | 'hover' | 'focused' | 'active' | 'checked';
 export interface IconItemProps extends IconProps {
     state?: IconSetState;
 }
 export declare const IconItem: FC<IconItemProps>;
-export interface IconSetProps extends ComponentPropsWithRef<'div'> {
+export interface IconSetProps extends ComponentProps<'div'> {
     state?: IconSetState;
     children?: ReactElement<IconItemProps> | Array<ReactElement<IconItemProps>>;
 }
-export declare const InnerIconSet: ForwardRefRenderFunction<HTMLDivElement, IconSetProps>;
-export declare const IconSet: React.ForwardRefExoticComponent<Omit<IconSetProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const IconSet: FC<IconSetProps>;
+export { IconSet };

package/artifacts/dist/types/components/sidebar/sidebar-filter/sidebar-item-filter.d.ts

@@ -1,5 +1,4 @@
-import React, { ForwardRefRenderFunction } from 'react';
-import { SidebarItemRef } from '../models';
+import { FC } from 'react';
 import { SidebarItemProps } from '../sidebar-item';
-export declare const InnerSidebarItemFilter: ForwardRefRenderFunction<SidebarItemRef, SidebarItemProps>;
-export declare const SidebarItemFilter: React.ForwardRefExoticComponent<Omit<SidebarItemProps, "ref"> & React.RefAttributes<SidebarItemRef>>;
+declare const SidebarItemFilter: FC<SidebarItemProps>;
+export { SidebarItemFilter };

package/artifacts/dist/types/components/sidebar/sidebar-item.d.ts

@@ -1,9 +1,9 @@
+import { ComponentProps, FC } from 'react';
 import { BooleanProp } from '../../models';
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from 'react';
-import { ButtonItemProps, LinkItemProps, SidebarItemRef } from './models';
+import { ButtonItemProps, LinkItemProps } from './models';
 import { SidebarVariantType } from './models/sidebar-variant.type';
 import './sidebar-item.scss';
-export interface SidebarItemProps extends ComponentPropsWithRef<'li'> {
+export interface SidebarItemProps extends ComponentProps<'li'> {
     /**
      * Item of sidebar
      */
@@ -32,6 +32,10 @@ export interface SidebarItemProps extends ComponentPropsWithRef<'li'> {
      * Sets the pill value
      */
     pillValue?: number;
+    /**
+     * Sets the pill aria-label
+     */
+    pillAriaLabel?: string;
 }
-export declare const InnerSidebarItem: ForwardRefRenderFunction<SidebarItemRef, SidebarItemProps>;
-export declare const SidebarItem: React.ForwardRefExoticComponent<Omit<SidebarItemProps, "ref"> & React.RefAttributes<SidebarItemRef>>;
+declare const SidebarItem: FC<SidebarItemProps>;
+export { SidebarItem };

package/artifacts/dist/types/components/sidebar/utils/keyboardSidebarItemHandlers.d.ts

@@ -2,7 +2,7 @@ import { KeyboardEvent } from 'react';
 import { BooleanProp } from '../../../models';
 import { TreeItemsArray, TreeItemsType } from './treeItemsType';
 export declare const navigationEnterSpace: (event: KeyboardEvent<TreeItemsType>) => void;
-export declare const getAllVisibleItems: (treeItems: TreeItemsArray) => (HTMLButtonElement | HTMLAnchorElement | HTMLDivElement)[];
+export declare const getAllVisibleItems: (treeItems: TreeItemsArray) => (HTMLDivElement | HTMLButtonElement | HTMLAnchorElement)[];
 export declare const navigationUp: (event: KeyboardEvent<TreeItemsType>, treeItems: TreeItemsArray) => void;
 export declare const navigationDown: (event: KeyboardEvent<TreeItemsType>, treeItems: TreeItemsArray) => void;
 export declare const navigationRight: (event: KeyboardEvent<TreeItemsType>, treeItems: TreeItemsArray) => void;

package/artifacts/dist/types/components/skip-navigation/skip-navigation-multiple.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithRef, FC, RefObject } from 'react';
+import { ComponentProps, FC, RefObject } from 'react';
 import { MultipleLinksProps } from './skip-navigation';
-export interface SkipNavigationMultipleProps extends ComponentPropsWithRef<'div'> {
+export interface SkipNavigationMultipleProps extends ComponentProps<'div'> {
     className: string | undefined;
     containerSkipNavRef: RefObject<HTMLDivElement>;
     multipleLinks: MultipleLinksProps;

package/artifacts/dist/types/components/skip-navigation/skip-navigation-single.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef, FC, ReactElement, RefObject } from 'react';
-export interface SkipNavigationSingleProps extends ComponentPropsWithRef<'div'> {
+import { ComponentProps, FC, ReactElement, RefObject } from 'react';
+export interface SkipNavigationSingleProps extends ComponentProps<'div'> {
     className: string | undefined;
     containerSkipNavRef: RefObject<HTMLDivElement>;
     singleLink: ReactElement;

package/artifacts/dist/types/components/skip-navigation/skip-navigation.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react';
+import { ComponentProps, FC, ReactElement, ReactNode } from 'react';
 import { BooleanProp } from '../../models';
 import { ButtonProps } from '../../components/button';
 import './skip-navigation.scss';
@@ -22,7 +22,7 @@ export interface MultipleLinksProps {
     skipAriaLabel: string;
     skipList: SkipListProps[];
 }
-export interface SkipNavigationProps extends ComponentPropsWithRef<'div'> {
+export interface SkipNavigationProps extends ComponentProps<'div'> {
     /**
      * Skip navigation multiple links or single link
      */
@@ -36,5 +36,5 @@ export interface SkipNavigationProps extends ComponentPropsWithRef<'div'> {
      */
     multipleLinks?: MultipleLinksProps;
 }
-export declare const InnerSkipNavigation: ForwardRefRenderFunction<HTMLDivElement, SkipNavigationProps>;
-export declare const SkipNavigation: React.ForwardRefExoticComponent<Omit<SkipNavigationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SkipNavigation: FC<SkipNavigationProps>;
+export { SkipNavigation };

package/artifacts/dist/types/components/status-card/interactive-status-card.d.ts

@@ -1,11 +1,11 @@
-import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { StatusCardType } from './status-card';
-export interface InteractiveStatusCardProps extends ComponentPropsWithoutRef<'div'> {
+export interface InteractiveStatusCardProps extends ComponentProps<'div'> {
     className?: string;
     interactive?: boolean;
     children?: ReactNode;
     type?: StatusCardType;
     onActivate?: () => void;
 }
-export declare const InnerInteractiveStatusCard: ForwardRefRenderFunction<HTMLDivElement, InteractiveStatusCardProps>;
-export declare const InteractiveStatusCard: React.ForwardRefExoticComponent<InteractiveStatusCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const InteractiveStatusCard: FC<InteractiveStatusCardProps>;
+export { InteractiveStatusCard };

package/artifacts/dist/types/components/status-card/non-interactive-status-card.d.ts

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { StatusCardType } from './status-card';
-export interface NonInteractiveStatusCardProps extends ComponentPropsWithoutRef<'div'> {
+export interface NonInteractiveStatusCardProps extends ComponentProps<'div'> {
     className?: string;
     children?: ReactNode;
     type?: StatusCardType;
 }
-export declare const InnerNonInteractiveStatusCard: ForwardRefRenderFunction<HTMLDivElement, NonInteractiveStatusCardProps>;
-export declare const NonInteractiveStatusCard: React.ForwardRefExoticComponent<NonInteractiveStatusCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const NonInteractiveStatusCard: FC<NonInteractiveStatusCardProps>;
+export { NonInteractiveStatusCard };

package/artifacts/dist/types/components/status-card/status-card.d.ts

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithoutRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp } from '../../models';
 import './status-card.scss';
 export type StatusCardType = 'info' | 'success' | 'warning' | 'danger';
-export interface StatusCardProps extends ComponentPropsWithoutRef<'div'> {
+export interface StatusCardProps extends ComponentProps<'div'> {
     /**
      * Status card description content
      */
@@ -21,5 +21,5 @@ export interface StatusCardProps extends ComponentPropsWithoutRef<'div'> {
      */
     onActivate?: () => void;
 }
-export declare const InnerStatusCard: ForwardRefRenderFunction<HTMLDivElement, StatusCardProps>;
-export declare const StatusCard: React.ForwardRefExoticComponent<StatusCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatusCard: FC<StatusCardProps>;
+export { StatusCard };

package/artifacts/dist/types/components/stepper/step.d.ts

@@ -1,11 +1,11 @@
-import { ComponentPropsWithRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import { BooleanProp } from '../../models';
 import './step.scss';
 /**
  * Available step status.
  */
 export type StepStatusType = 'done' | 'error' | 'current' | 'draft' | 'disabled' | 'default';
-export interface StepProps extends ComponentPropsWithRef<'button'> {
+export interface StepProps extends ComponentProps<'button'> {
     /**
      * Defines if the step is interactive. If the parent stepper have interactive prop defined, it will override this prop.
      */

package/artifacts/dist/types/components/stepper/stepper.d.ts

@@ -1,8 +1,8 @@
 import { BooleanProp } from '../../models';
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { StepProps } from './step';
 import './stepper.scss';
-export interface StepperProps extends ComponentPropsWithRef<'div'> {
+export interface StepperProps extends ComponentProps<'div'> {
     /**
      * Defines if the stepper is interactive or not.
      */
@@ -12,5 +12,5 @@ export interface StepperProps extends ComponentPropsWithRef<'div'> {
      */
     children?: ReactElement<StepProps> | ReactElement<StepProps>[];
 }
-export declare const InnerStepper: ForwardRefRenderFunction<HTMLDivElement, StepperProps>;
-export declare const Stepper: React.ForwardRefExoticComponent<Omit<StepperProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Stepper: FC<StepperProps>;
+export { Stepper };

package/artifacts/dist/types/components/switch/switch.d.ts

@@ -1,8 +1,8 @@
 import { BooleanProp, FeedbackState } from '../../models';
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import './switch.scss';
 export type SwitchPosition = 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-export interface SwitchProps extends ComponentPropsWithRef<'input'> {
+export interface SwitchProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -40,5 +40,5 @@ export interface SwitchProps extends ComponentPropsWithRef<'input'> {
      */
     hasError?: BooleanProp;
 }
-export declare const InnerSwitch: ForwardRefRenderFunction<HTMLInputElement, SwitchProps>;
-export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: FC<SwitchProps>;
+export { Switch };

package/artifacts/dist/types/components/table/table-pagination.d.ts

@@ -1,6 +1,6 @@
-import React, { ComponentPropsWithRef } from 'react';
+import { ComponentProps, FC } from 'react';
 import './table-pagination.scss';
-export interface TablePaginationProps extends ComponentPropsWithRef<'div'> {
+export interface TablePaginationProps extends ComponentProps<'div'> {
     /**
      * Defines the label for the items per page
      */
@@ -46,5 +46,5 @@ export interface TablePaginationProps extends ComponentPropsWithRef<'div'> {
      */
     onPageSizeChange?: (newPageSize: number) => void;
 }
-declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TablePagination: FC<TablePaginationProps>;
 export { TablePagination };

package/artifacts/dist/types/components/table/table.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithRef, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { TableLayout } from './models/table-layout.type';
 import { TableBodyProps } from './table-body';
 import { TableCaptionProps } from './table-caption';
@@ -6,7 +6,7 @@ import { TableFooterProps } from './table-footer';
 import { TableHeaderProps } from './table-header';
 import { TablePaginationProps } from './table-pagination';
 import './table.scss';
-export interface TableProps extends ComponentPropsWithRef<'table'> {
+export interface TableProps extends ComponentProps<'table'> {
     /**
      * Table children content
      */
@@ -32,5 +32,5 @@ export interface TableProps extends ComponentPropsWithRef<'table'> {
      */
     sortDescription?: string;
 }
-declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: FC<TableProps>;
 export { Table };

package/artifacts/dist/types/components/tabs/desktop/tabs-desktop.d.ts

@@ -1,5 +1,5 @@
 import { BooleanProp } from '../../../models';
-import React, { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, FC, ReactElement, RefObject } from 'react';
 import { TabBodyProps } from '../tab-body';
 import { TabHeaderProps } from '../tab-header';
 import { TabCurrentType } from '../tabs';
@@ -7,8 +7,8 @@ import './tabs-desktop.scss';
 export interface TabsDesktopProps extends ComponentPropsWithoutRef<'div'> {
     fullWidth: BooleanProp;
     vertically?: BooleanProp;
-    tabListRef: React.RefObject<HTMLDivElement>;
-    tabPanelRef: React.RefObject<HTMLDivElement>;
+    tabListRef: RefObject<HTMLDivElement | null>;
+    tabPanelRef: RefObject<HTMLDivElement | null>;
     activeTab: number;
     activateTab: (index: number) => void;
     currentType: TabCurrentType;

package/artifacts/dist/types/components/tabs/mobile/tabs-mobile.d.ts

@@ -1,12 +1,12 @@
 import { BooleanProp } from '../../../models';
-import React, { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, FC, ReactElement, RefObject } from 'react';
 import { TabBodyProps } from '../tab-body';
 import { TabHeaderProps } from '../tab-header';
 import { TabCurrentType } from '../tabs';
 import './tabs-mobile.scss';
 interface TabsMobileProps extends ComponentPropsWithoutRef<'div'> {
     fullWidth: BooleanProp;
-    tabListRef: React.RefObject<HTMLDivElement>;
+    tabListRef: RefObject<HTMLDivElement | null>;
     activeTab: number;
     activateTab: (index: number) => void;
     currentType: TabCurrentType;

package/artifacts/dist/types/components/tag/tag.d.ts

@@ -1,8 +1,7 @@
-import { ButtonElement } from '../../components/button';
 import { BooleanProp } from '../../models';
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import './tag.scss';
-export interface TagProps extends Omit<ComponentPropsWithRef<'button'>, 'ref'> {
+export interface TagProps extends ComponentProps<'button'> {
     /**
      * Defines if the button uses an icon.
      */
@@ -24,5 +23,5 @@ export interface TagProps extends Omit<ComponentPropsWithRef<'button'>, 'ref'> {
      */
     darkMode?: BooleanProp;
 }
-export declare const InnerTag: ForwardRefRenderFunction<ButtonElement, TagProps>;
-export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<ButtonElement>>;
+declare const Tag: FC<TagProps>;
+export { Tag };

package/artifacts/dist/types/components/toggle/toggle.d.ts

@@ -1,5 +1,5 @@
 import { BooleanProp } from '../../models';
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from 'react';
+import { ComponentProps, FC } from 'react';
 import './toggle.scss';
 /**
  * The available toggle button appearances. Defines the button layout shape,
@@ -9,7 +9,7 @@ export type ToggleAppearance = 'button' | 'icon';
  * The available variants of the toggle button. This variants will define the background and border color of the button.
  */
 export type ToggleVariant = 'primary' | 'neutral';
-export interface ToggleProps extends ComponentPropsWithRef<'input'> {
+export interface ToggleProps extends ComponentProps<'input'> {
     /**
      * Defines if the toggle takes the container full width.
      */
@@ -56,5 +56,5 @@ export interface ToggleProps extends ComponentPropsWithRef<'input'> {
      */
     trailingIconHover?: string;
 }
-export declare const InnerToggle: ForwardRefRenderFunction<HTMLInputElement, ToggleProps>;
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Toggle: FC<ToggleProps>;
+export { Toggle };

package/artifacts/dist/types/components/toggle-group/toggle-group.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement, Ref } from 'react';
+import { ComponentProps, FC, ReactElement, Ref } from 'react';
 import { ToggleAppearance, ToggleProps, ToggleVariant } from '../../components/toggle';
 import { BooleanProp } from '../../models';
 import './toggle-group.scss';
@@ -9,7 +9,7 @@ export interface ToggleGroupElement extends HTMLDivElement {
      */
     value: string[];
 }
-export interface ToggleGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+export interface ToggleGroupProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
      * Defines the appearance of the children toggles.
      */
@@ -55,5 +55,5 @@ export interface ToggleGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'on
      */
     ref?: Ref<ToggleGroupElement>;
 }
-export declare const InnerToggleGroup: ForwardRefRenderFunction<ToggleGroupElement, ToggleGroupProps>;
-export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<ToggleGroupElement>>;
+declare const ToggleGroup: FC<ToggleGroupProps>;
+export { ToggleGroup };