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

package/artifacts/dist/types/components/header/general-bar/search/default-search.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { SearchRelatedLinksProps } from './search-related-links';
 import { SearchTitleProps } from './search-title';
 import { SearchInputContainerProps } from './search-input-container';
-export interface DefaultSearchProps extends ComponentPropsWithoutRef<'div'> {
+export interface DefaultSearchProps extends ComponentProps<'div'> {
     children: ReactElement<SearchTitleProps | SearchInputContainerProps | SearchRelatedLinksProps> | ReactElement<SearchTitleProps | SearchInputContainerProps | SearchRelatedLinksProps>[];
 }
 export declare const DefaultSearch: FC<DefaultSearchProps>;

package/artifacts/dist/types/components/header/general-bar/search/search-input-container.d.ts

@@ -1,6 +1,6 @@
 import { InputSearchBarProps } from '../../../../components/input-search-bar';
-import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
-export interface SearchInputContainerProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentProps, FC, ReactElement, ReactNode } from 'react';
+export interface SearchInputContainerProps extends ComponentProps<'div'> {
     children: ReactElement<InputSearchBarProps> | ReactNode;
 }
 export declare const SearchInputContainer: FC<SearchInputContainerProps>;

package/artifacts/dist/types/components/header/general-bar/search/search-related-links-title.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
-export interface SearchRelatedLinksTitleProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentProps, FC } from 'react';
+export interface SearchRelatedLinksTitleProps extends ComponentProps<'div'> {
 }
 export declare const SearchRelatedLinksTitle: FC<SearchRelatedLinksTitleProps>;

package/artifacts/dist/types/components/header/general-bar/search/search-related-links.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { SearchRelatedLinkProps } from './search-related-link';
 import { SearchRelatedLinksTitleProps } from './search-related-links-title';
-export interface SearchRelatedLinksProps extends ComponentPropsWithoutRef<'div'> {
+export interface SearchRelatedLinksProps extends ComponentProps<'div'> {
     children: ReactElement<SearchRelatedLinksTitleProps | SearchRelatedLinkProps> | ReactElement<SearchRelatedLinksTitleProps | SearchRelatedLinkProps>[];
 }
 export declare const SearchRelatedLinks: FC<SearchRelatedLinksProps>;

package/artifacts/dist/types/components/header/general-bar/search/search-title.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
-export interface SearchTitleProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentProps, FC } from 'react';
+export interface SearchTitleProps extends ComponentProps<'div'> {
 }
 export declare const SearchTitle: FC<SearchTitleProps>;

package/artifacts/dist/types/components/header/general-bar/search/search.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { CustomSearchProps } from './custom-search';
 import { DefaultSearchProps } from './default-search';
-export interface SearchProps extends ComponentPropsWithoutRef<'div'> {
+export interface SearchProps extends ComponentProps<'div'> {
     label: string;
     children: ReactElement<DefaultSearchProps | CustomSearchProps>;
 }

package/artifacts/dist/types/components/header/general-bar/unauthenticated/unauthenticated-link.d.ts

@@ -1,6 +1,6 @@
 import { BooleanProp } from '../../../../models';
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
-export interface UnauthenticatedLinkProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentProps, FC, ReactElement } from 'react';
+export interface UnauthenticatedLinkProps extends ComponentProps<'div'> {
     /**
      * Defines if uses an icon.
      */

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

@@ -1,9 +1,8 @@
 import { BooleanProp } from '../../models';
-import React, { ComponentPropsWithRef, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement, Ref } from 'react';
 import { BrandProps } from './brand/brand';
 import { GeneralBarProps } from './general-bar/general-bar';
-import { NavigationBarProps } from './navigation-bar/navigation-bar';
-export interface HeaderElement extends ComponentPropsWithRef<'div'> {
+export interface HeaderElement extends ComponentProps<'div'> {
     focusActiveArea: () => void;
     setActiveArea: (areaValue: string) => void;
     focusLanguages: () => void;
@@ -23,8 +22,10 @@ export interface HeaderElement extends ComponentPropsWithRef<'div'> {
     closeAll: () => void;
 }
 export interface HeaderProps {
+    ref: Ref<HeaderElement>;
     darkMode?: BooleanProp;
     maxNavigationItems?: number;
-    children?: ReactElement<BrandProps | GeneralBarProps | NavigationBarProps> | ReactElement<BrandProps | GeneralBarProps | NavigationBarProps>[];
+    children?: ReactElement<BrandProps | GeneralBarProps> | ReactElement<BrandProps | GeneralBarProps>[];
 }
-export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HeaderElement>>;
+declare const Header: FC<HeaderProps>;
+export { Header };

package/artifacts/dist/types/components/header/internals/context/menu-context/header-menu-context.d.ts

@@ -4,8 +4,9 @@ import { ModalMenuElement } from '../../../../../components/header/internals/sha
 import { PanelMenuElement } from '../../../../../components/header/internals/shared/panel-menu/panel-menu';
 import { RefObject } from 'react';
 import { MenuTypeEnum } from './menu-type.enum';
+export type HeaderMenuContextRef = PanelMenuElement | HTMLDivElement | DrawerElement | ModalMenuElement | InternalNavigationBurgerPanelElement | null;
 export interface HeaderMenuContextProps {
-    menuRefMap: Map<MenuTypeEnum | string, RefObject<PanelMenuElement | HTMLDivElement | DrawerElement | ModalMenuElement | InternalNavigationBurgerPanelElement>>;
+    menuRefMap: Map<MenuTypeEnum | string, RefObject<HeaderMenuContextRef>>;
     collapseAllMenus: () => void;
     collapseMenu: (id: MenuTypeEnum | string, focusController: boolean) => void;
     expandMenu: (id: MenuTypeEnum | string) => void;

package/artifacts/dist/types/components/header/internals/general-bar/areas/internal-areas.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import './internal-areas.scss';
-export interface InnerComponentProps extends ComponentPropsWithRef<'div'> {
+export interface InnerComponentProps extends ComponentProps<'div'> {
 }
 export declare const InternalAreas: FC<InnerComponentProps>;

package/artifacts/dist/types/components/header/internals/general-bar/authenticated/internal-authenticated.d.ts

@@ -1,9 +1,9 @@
 import { AuthenticatedBodyProps } from '../../../../../components/header/general-bar/authenticated/authenticated-body';
 import { AuthenticatedFooterProps } from '../../../../../components/header/general-bar/authenticated/authenticated-footer';
 import { AuthenticatedHeaderProps } from '../../../../../components/header/general-bar/authenticated/authenticated-header';
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import './internal-authenticated.scss';
-interface InternalAuthenticatedProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+interface InternalAuthenticatedProps extends Omit<ComponentProps<'div'>, 'children'> {
     children?: null | ReactElement<AuthenticatedHeaderProps | AuthenticatedBodyProps | AuthenticatedFooterProps> | ReactElement<AuthenticatedHeaderProps | AuthenticatedBodyProps | AuthenticatedFooterProps>[];
 }
 export declare const InternalAuthenticated: FC<InternalAuthenticatedProps>;

package/artifacts/dist/types/components/header/internals/general-bar/languages/internal-language.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import './internal-language.scss';
-export interface InternalLanguageProps extends ComponentPropsWithoutRef<'button'> {
+export interface InternalLanguageProps extends ComponentProps<'button'> {
     icon?: string;
     checked: boolean;
     label: string;

package/artifacts/dist/types/components/header/internals/general-bar/search/internal-search.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import './internal-search.scss';
-export interface InternalSearchProps extends ComponentPropsWithoutRef<'div'> {
+export interface InternalSearchProps extends ComponentProps<'div'> {
 }
 export declare const InternalSearch: FC<InternalSearchProps>;

package/artifacts/dist/types/components/header/internals/navigation-bar/logo/internal-logo.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import './internal-logo.scss';
-export interface InternalLogoProps extends ComponentPropsWithoutRef<'div'> {
+export interface InternalLogoProps extends ComponentProps<'div'> {
 }
 export declare const InternalLogo: FC<InternalLogoProps>;

package/artifacts/dist/types/components/header/internals/navigation-bar/navigation-burger/internal-navigation-burger-panel.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from '../../../../../components/button';
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentProps, FC } from 'react';
 import './internal-navigation-burger-panel.scss';
 export interface InternalNavigationBurgerPanelElement extends HTMLDivElement {
     /**
@@ -15,11 +15,12 @@ export interface InternalNavigationBurgerPanelElement extends HTMLDivElement {
      */
     isOpened: boolean;
 }
-export interface InternalNavigationBurgerPanelProps extends ComponentPropsWithoutRef<'div'> {
+export interface InternalNavigationBurgerPanelProps extends ComponentProps<'div'> {
     id: string;
     title: string;
     linksAriaLabel: string;
     relatedLinksAriaLabel: string;
     buttonProps?: ButtonProps;
 }
-export declare const InternalNavigationBurgerPanel: React.ForwardRefExoticComponent<InternalNavigationBurgerPanelProps & React.RefAttributes<InternalNavigationBurgerPanelElement>>;
+declare const InternalNavigationBurgerPanel: FC<InternalNavigationBurgerPanelProps>;
+export { InternalNavigationBurgerPanel };

package/artifacts/dist/types/components/header/internals/shared/custom-header-link/custom-header-link.d.ts

@@ -1,6 +1,6 @@
 import { LinkWrapperProps } from '../../../../../components/link-wrapper';
 import { BooleanProp } from '../../../../../models/boolean-type';
-import React, { ForwardRefRenderFunction } from 'react';
+import { FC } from 'react';
 import './custom-header-link.scss';
 export interface CustomHeaderLinkProps extends LinkWrapperProps {
     hasIcon?: BooleanProp;
@@ -10,5 +10,5 @@ export interface CustomHeaderLinkProps extends LinkWrapperProps {
     trailingIcon?: string;
     trailingIconHover?: string;
 }
-export declare const InnerCustomHeaderLink: ForwardRefRenderFunction<HTMLSpanElement, CustomHeaderLinkProps>;
-export declare const CustomHeaderLink: React.ForwardRefExoticComponent<Omit<CustomHeaderLinkProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const CustomHeaderLink: FC<CustomHeaderLinkProps>;
+export { CustomHeaderLink };

package/artifacts/dist/types/components/header/internals/shared/custom-modal/custom-modal-dialog.d.ts

@@ -1,3 +1,3 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import './custom-modal-dialog.scss';
-export declare const CustomModalDialog: FC<ComponentPropsWithoutRef<'div'>>;
+export declare const CustomModalDialog: FC<ComponentProps<'div'>>;

package/artifacts/dist/types/components/header/internals/shared/custom-modal/custom-modal-provider.d.ts

@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 export interface CustomModalConfiguration {
     closeButtonLabel: string;
     ariaLabel: string;
     onShow?: () => void;
     onHide?: () => void;
 }
-declare const CustomModalProvider: FC<ComponentPropsWithoutRef<'div'>>;
+declare const CustomModalProvider: FC<ComponentProps<'div'>>;
 export { CustomModalProvider };

package/artifacts/dist/types/components/header/internals/shared/institutional/internal-institutional.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
+import { ComponentProps, FC } from 'react';
 import './internal-institutional.scss';
-export interface InternalInstitutionalProps extends ComponentPropsWithoutRef<'div'> {
+export interface InternalInstitutionalProps extends ComponentProps<'div'> {
 }
 export declare const InternalInstitutional: FC<InternalInstitutionalProps>;

package/artifacts/dist/types/components/header/internals/shared/modal-menu/modal-menu.d.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from '../../../../../components/button';
-import React, { ReactElement, ReactNode } from 'react';
+import { FC, ReactElement, ReactNode, RefObject } from 'react';
 import './modal-menu.scss';
+import { HeaderMenuContextRef } from '../../context/menu-context/header-menu-context';
 export interface ModalMenuElement extends HTMLDivElement {
     /**
      *  Open the modal
@@ -19,11 +20,13 @@ export interface ModalMenuElement extends HTMLDivElement {
      */
     isOpen: boolean;
 }
-export interface ModalMenuProps extends ButtonProps {
+export interface ModalMenuProps extends Omit<ButtonProps, 'ref'> {
     darkMode?: boolean;
     modalAriaLabel?: string;
     openLabel?: ReactNode;
     closeLabel?: ReactNode;
     children: ReactElement<HTMLDivElement> | ReactElement<HTMLDivElement>[];
+    ref?: RefObject<HeaderMenuContextRef>;
 }
-export declare const ModalMenu: React.ForwardRefExoticComponent<ModalMenuProps & React.RefAttributes<ModalMenuElement>>;
+declare const ModalMenu: FC<ModalMenuProps>;
+export { ModalMenu };

package/artifacts/dist/types/components/header/internals/shared/panel-menu/layout.interface.d.ts

@@ -1,3 +1,3 @@
-import { ComponentPropsWithoutRef } from 'react';
-export interface LayoutProps extends ComponentPropsWithoutRef<'div'> {
+import { ComponentProps } from 'react';
+export interface LayoutProps extends ComponentProps<'div'> {
 }

package/artifacts/dist/types/components/header/internals/shared/panel-menu/panel-menu.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from '../../../../../components/button';
-import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { LayoutProps } from './layout.interface';
 import './panel-menu.scss';
 export interface PanelMenuElement extends HTMLDivElement {
@@ -20,7 +20,7 @@ export interface PanelMenuElement extends HTMLDivElement {
      */
     isExpanded: boolean;
 }
-export interface PanelMenuProps extends ComponentPropsWithoutRef<'div'> {
+export interface PanelMenuProps extends ComponentProps<'div'> {
     darkMode?: boolean;
     children: ReactElement<ButtonProps | LayoutProps> | ReactElement<ButtonProps | LayoutProps>[];
     iconsCollapsed?: {
@@ -37,4 +37,5 @@ export interface PanelMenuProps extends ComponentPropsWithoutRef<'div'> {
     };
     isDrawerPanel?: boolean;
 }
-export declare const PanelMenu: React.ForwardRefExoticComponent<PanelMenuProps & React.RefAttributes<PanelMenuElement>>;
+declare const PanelMenu: FC<PanelMenuProps>;
+export { PanelMenu };

package/artifacts/dist/types/components/header/navigation-bar/navigation-bar.d.ts

@@ -1,24 +1,12 @@
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { NavigationRootProps } from './navigation-root';
 import { NavigationLinkProps } from './navigation-link';
-export interface NavigationBarProps extends ComponentPropsWithoutRef<'div'> {
+export interface NavigationBarProps extends ComponentProps<'div'> {
     id?: string;
     responsiveMenuLabel?: string;
     responsiveMenuAriaLabel?: string;
-    /**
-     * @deprecated use responsiveMenuAriaLabel instead.
-     */
-    label?: string;
     responsiveMenuBackToRootLabel?: string;
-    /**
-     * @deprecated use responsiveMenuBackToRootLabel instead.
-     */
-    backToRootLabel?: string;
     modalMenuLabel?: string;
-    /**
-     * @deprecated use modalMenuLabel instead.
-     */
-    openMenuLabel?: string;
     modalAriaLabel?: string;
     modalCloseLabel?: string;
     children: ReactElement<NavigationRootProps | NavigationLinkProps> | ReactElement<NavigationRootProps | NavigationLinkProps>[];

package/artifacts/dist/types/components/header/navigation-bar/navigation-root.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentProps, FC, ReactElement } from 'react';
 import { RelatedNavigationLinkProps } from './related-navigation-link';
 import { NavigationLinkProps } from './navigation-link';
-export interface NavigationRootProps extends ComponentPropsWithoutRef<'div'> {
+export interface NavigationRootProps extends ComponentProps<'div'> {
     label: string;
     linksAriaLabel?: string;
     relatedLinksAriaLabel?: string;

package/artifacts/dist/types/components/input-date/contexts/date-picker-state.context.d.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { Months, WeekDays } from '../../../models';
 export type DatePickerStateContextType = {
     focusedDate: Date;
@@ -30,9 +30,4 @@ export type DatePickerStateContextType = {
         okAriaLabel?: string;
     };
 };
-export declare const DatePickerStateContext: React.Context<DatePickerStateContextType | undefined>;
-export interface DatePickerStateProviderProps {
-    children: ReactNode;
-    value: DatePickerStateContextType;
-}
-export declare const DatePickerStateProvider: FC<DatePickerStateProviderProps>;
+export declare const DatePickerStateContext: import("react").Context<DatePickerStateContextType | undefined>;

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

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from 'react';
+import { ComponentProps, FC } from 'react';
 import './date-text.scss';
-export interface DateTextProps extends ComponentPropsWithRef<'input'> {
+export interface DateTextProps extends ComponentProps<'input'> {
     dayInputPlaceholder?: string;
     monthInputPlaceholder?: string;
     yearInputPlaceholder?: string;
 }
-export declare const InnerComponent: ForwardRefRenderFunction<HTMLInputElement, DateTextProps>;
-export declare const DateText: React.ForwardRefExoticComponent<Omit<DateTextProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const DateText: FC<DateTextProps>;
+export { DateText };

package/artifacts/dist/types/components/input-date/input-date.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState, Months, WeekDays } from '../../models';
 import './input-date.scss';
-export interface InputDateProps extends ComponentPropsWithRef<'input'> {
+export interface InputDateProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -127,4 +127,5 @@ export interface InputDateProps extends ComponentPropsWithRef<'input'> {
      */
     okAriaLabel?: string;
 }
-export declare const InputDate: React.ForwardRefExoticComponent<Omit<InputDateProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputDate: FC<InputDateProps>;
+export { InputDate };

package/artifacts/dist/types/components/input-email-bar/input-email-bar.d.ts

@@ -1,8 +1,8 @@
 import { FeedbackState } from '../../models';
 import { BooleanProp } from '../../models/boolean-type';
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import './input-email-bar.scss';
-export interface InputEmailBarProps extends ComponentPropsWithRef<'input'> {
+export interface InputEmailBarProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -36,4 +36,5 @@ export interface InputEmailBarProps extends ComponentPropsWithRef<'input'> {
      */
     hasError?: BooleanProp;
 }
-export declare const InputEmailBar: React.ForwardRefExoticComponent<Omit<InputEmailBarProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputEmailBar: FC<InputEmailBarProps>;
+export { InputEmailBar };

package/artifacts/dist/types/components/input-number/input-number.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 './input-number.scss';
-export interface InputNumberProps extends ComponentPropsWithRef<'input'> {
+export interface InputNumberProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -47,5 +47,5 @@ export interface InputNumberProps extends ComponentPropsWithRef<'input'> {
      */
     decreaseButtonAltText?: string;
 }
-export declare const InnerInputNumber: ForwardRefRenderFunction<HTMLInputElement, InputNumberProps>;
-export declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputNumber: FC<InputNumberProps>;
+export { InputNumber };

package/artifacts/dist/types/components/input-password/input-password.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState } from '../../models';
 import './input-password.scss';
-export interface InputPasswordProps extends ComponentPropsWithRef<'input'> {
+export interface InputPasswordProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -50,4 +50,5 @@ export interface InputPasswordProps extends ComponentPropsWithRef<'input'> {
         hide: string;
     };
 }
-export declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputPassword: FC<InputPasswordProps>;
+export { InputPassword };

package/artifacts/dist/types/components/input-phone/input-phone.d.ts

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ComponentPropsWithRef, ReactNode } from 'react';
+import { ChangeEvent, ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState } from '../../models';
 export declare const PhoneCountryCodes: string[];
 export type PhoneCountryCode = (typeof PhoneCountryCodes)[number];
@@ -10,7 +10,7 @@ export interface InputPhoneElement extends HTMLInputElement {
     iso: PhoneCountryISO;
     code: PhoneCountryCode;
 }
-export interface InputPhoneProps extends Omit<ComponentPropsWithRef<'input'>, 'ref'> {
+export interface InputPhoneProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -79,5 +79,10 @@ export interface InputPhoneProps extends Omit<ComponentPropsWithRef<'input'>, 'r
      *  Callback to run whenever the country dropdown value changes.
      */
     onCountryChange?: (country: CountryPhoneProps) => void;
+    /**
+     *  allow you to say what is the acronym to Direct Dialing In, the default is DDI
+     */
+    acronymForDirectDialing?: string;
 }
-export declare const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps & React.RefAttributes<InputPhoneElement>>;
+declare const InputPhone: FC<InputPhoneProps>;
+export { InputPhone };

package/artifacts/dist/types/components/input-range/input-range.d.ts

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState } from '../../models';
 import './input-range.scss';
 export type RangeType = 'single' | 'double';
-export interface InputRangeProps extends Omit<ComponentPropsWithRef<'input'>, 'ref' | 'value' | 'onChange'> {
+export interface InputRangeProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange'> {
     /**
      *  Input label text.
      */
@@ -60,4 +60,5 @@ export interface InputRangeProps extends Omit<ComponentPropsWithRef<'input'>, 'r
 export interface InputRangeElement extends HTMLDivElement {
     sliders: HTMLInputElement[];
 }
-export declare const InputRange: React.ForwardRefExoticComponent<InputRangeProps & React.RefAttributes<InputRangeElement>>;
+declare const InputRange: FC<InputRangeProps>;
+export { InputRange };

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

@@ -1,7 +1,7 @@
 import { BooleanProp, FeedbackState } from '../../models';
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import './input-search.scss';
-export interface InputSearchProps extends ComponentPropsWithRef<'input'> {
+export interface InputSearchProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -39,4 +39,5 @@ export interface InputSearchProps extends ComponentPropsWithRef<'input'> {
      */
     hasError?: BooleanProp;
 }
-export declare const InputSearch: React.ForwardRefExoticComponent<Omit<InputSearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputSearch: FC<InputSearchProps>;
+export { InputSearch };

package/artifacts/dist/types/components/input-search-bar/input-search-bar.d.ts

@@ -1,18 +1,17 @@
-import { ButtonElement } from '../../components/button';
 import { BooleanProp } from '../../models';
-import React, { ComponentPropsWithRef, Ref } from 'react';
+import { ComponentProps, FC, Ref } from 'react';
 import './input-search-bar.scss';
 export interface InputSearchBarElement extends HTMLInputElement {
     /**
      * React ref object to the search action button.
      */
-    searchActionButton?: Ref<ButtonElement>;
+    searchActionButton?: Ref<HTMLButtonElement>;
     /**
      * React ref object to the voice action button.
      */
-    voiceActionButton?: Ref<ButtonElement>;
+    voiceActionButton?: Ref<HTMLButtonElement>;
 }
-export interface InputSearchBarProps extends ComponentPropsWithRef<'input'> {
+export interface InputSearchBarProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -62,4 +61,5 @@ export interface InputSearchBarProps extends ComponentPropsWithRef<'input'> {
      */
     ref?: Ref<InputSearchBarElement>;
 }
-export declare const InputSearchBar: React.ForwardRefExoticComponent<Omit<InputSearchBarProps, "ref"> & React.RefAttributes<InputSearchBarElement>>;
+declare const InputSearchBar: FC<InputSearchBarProps>;
+export { InputSearchBar };

package/artifacts/dist/types/components/input-select/input-select.d.ts

@@ -1,5 +1,5 @@
 import { BooleanProp, FeedbackState } from '../../models';
-import React, { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { ComponentProps, FC, ReactElement, ReactNode } from 'react';
 import { DropdownOptionProps, DropdownSectionProps, DropdownType } from '../../components/dropdown';
 import './input-select.scss';
 export interface InputSelectRef {
@@ -12,7 +12,7 @@ export interface InputSelectRef {
      */
     clearSelectedOptions: () => void;
 }
-export interface InputSelectProps extends Omit<ComponentPropsWithRef<'select'>, 'options' | 'onChange'> {
+export interface InputSelectProps extends Omit<ComponentProps<'select'>, 'options' | 'onChange'> {
     /**
      * Input label text.
      */
@@ -114,4 +114,5 @@ export interface InputSelectProps extends Omit<ComponentPropsWithRef<'select'>,
      */
     children?: ReactElement<DropdownSectionProps> | ReactElement<DropdownSectionProps>[];
 }
-export declare const InputSelect: React.ForwardRefExoticComponent<Omit<InputSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement | InputSelectRef>>;
+declare const InputSelect: FC<InputSelectProps>;
+export { InputSelect };

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

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState } from '../../models';
 import './input-text.scss';
-export interface InputTextProps extends ComponentPropsWithRef<'input'> {
+export interface InputTextProps extends ComponentProps<'input'> {
     /**
      * Input label text.
      */
@@ -39,4 +39,5 @@ export interface InputTextProps extends ComponentPropsWithRef<'input'> {
      */
     hasError?: BooleanProp;
 }
-export declare const InputText: React.ForwardRefExoticComponent<Omit<InputTextProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputText: FC<InputTextProps>;
+export { InputText };

package/artifacts/dist/types/components/input-textarea/input-textarea.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 './input-textarea.scss';
-export interface InputTextAreaProps extends ComponentPropsWithRef<'textarea'> {
+export interface InputTextAreaProps extends ComponentProps<'textarea'> {
     /**
      * Input label text.
      */
@@ -35,5 +35,5 @@ export interface InputTextAreaProps extends ComponentPropsWithRef<'textarea'> {
      */
     showCharCounter?: BooleanProp;
 }
-export declare const InnerInputTextArea: ForwardRefRenderFunction<HTMLTextAreaElement, InputTextAreaProps>;
-export declare const InputTextArea: React.ForwardRefExoticComponent<Omit<InputTextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const InputTextArea: FC<InputTextAreaProps>;
+export { InputTextArea };

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

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import './input-time.scss';
 import { BooleanProp, FeedbackState } from '../../models';
-export interface InputTimeProps extends ComponentPropsWithRef<'input'> {
+export interface InputTimeProps extends ComponentProps<'input'> {
     /**
      * The flag to set if the label and feedback text is in dark mode or light mode.
      */
@@ -83,4 +83,5 @@ export interface InputTimeProps extends ComponentPropsWithRef<'input'> {
      */
     timepickerMessageAriaLabel?: string;
 }
-export declare const InputTime: React.ForwardRefExoticComponent<Omit<InputTimeProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputTime: FC<InputTimeProps>;
+export { InputTime };