glints-aries 4.1.6 → 5.0.0-alpha.1

package/es/Input/DownshiftSelect/Select.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLProps } from 'react';
+import React from 'react';
 import { UseComboboxProps } from 'downshift';
 import * as internalComponents from './SelectStyle';
 export interface Item {
@@ -11,23 +11,24 @@ export declare const defaultTransformFunction: (items: Item[], inputValue: strin
 export declare const itemToString: (item: Item) => string;
 export declare const defaultEmptyListText = "No results found. Try another keyword to search for.";
 export declare type ItemProps = {
+    children?: React.ReactNode;
     item: Item;
 };
-declare type ContainerType = HTMLProps<HTMLDivElement>;
-declare type LabelType = HTMLProps<HTMLLabelElement>;
-declare type ComboboxType = HTMLProps<HTMLDivElement>;
-declare type InputType = HTMLProps<HTMLInputElement>;
-declare type IndicatorsContainerType = HTMLProps<HTMLDivElement>;
-declare type LoadingIndicatorType = HTMLProps<HTMLDivElement>;
-declare type ClearButtonType = HTMLProps<HTMLButtonElement>;
-declare type ToggleButtonType = HTMLProps<HTMLButtonElement>;
-declare type MenuType = HTMLProps<HTMLUListElement>;
-declare type ItemType = ItemProps & HTMLProps<HTMLLIElement>;
-declare type EmptyListType = HTMLProps<HTMLLIElement>;
-declare type HelperTextType = HTMLProps<HTMLSpanElement>;
-declare type GroupContainerType = HTMLProps<HTMLLIElement>;
-declare type GroupType = HTMLProps<HTMLUListElement>;
-declare type GroupHeadingType = HTMLProps<HTMLLIElement>;
+declare type ContainerType = React.ComponentProps<'div'>;
+declare type LabelType = React.ComponentProps<'label'>;
+declare type ComboboxType = React.ComponentProps<'div'>;
+declare type InputType = React.ComponentProps<'input'>;
+declare type IndicatorsContainerType = React.ComponentProps<'div'>;
+declare type LoadingIndicatorType = React.ComponentProps<'div'>;
+declare type ClearButtonType = React.ComponentProps<'button'>;
+declare type ToggleButtonType = React.ComponentProps<'button'>;
+declare type MenuType = React.ComponentProps<'ul'>;
+declare type ItemType = ItemProps & React.ComponentProps<'li'>;
+declare type EmptyListType = React.ComponentProps<'li'>;
+declare type HelperTextType = React.ComponentProps<'span'>;
+declare type GroupContainerType = React.ComponentProps<'li'>;
+declare type GroupType = React.ComponentProps<'ul'>;
+declare type GroupHeadingType = React.ComponentProps<'li'>;
 export interface Components {
     Container: React.ComponentType<ContainerType>;
     Label: React.ComponentType<LabelType>;

package/es/Input/DownshiftSelect/Select.js

@@ -82,6 +82,9 @@ export var Select = function Select(_ref) {
   var displayItems = transformFunction(items, inputValue);
   var _useCombobox = useCombobox(_extends({
       items: displayItems,
+      isItemDisabled: function isItemDisabled(item) {
+        return item.disabled;
+      },
       inputValue: inputValue,
       onInputValueChange: function onInputValueChange(_ref2) {
         var inputValue = _ref2.inputValue;
@@ -107,7 +110,6 @@ export var Select = function Select(_ref) {
     selectedItem = _useCombobox.selectedItem,
     isOpen = _useCombobox.isOpen,
     getLabelProps = _useCombobox.getLabelProps,
-    getComboboxProps = _useCombobox.getComboboxProps,
     getInputProps = _useCombobox.getInputProps,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     getMenuProps = _useCombobox.getMenuProps,
@@ -157,13 +159,13 @@ export var Select = function Select(_ref) {
     "data-disabled": disabled,
     "data-invalid": invalid,
     "data-testid": "label"
-  }), label), /*#__PURE__*/React.createElement(Combobox, _extends({}, getComboboxProps(), {
+  }), label), /*#__PURE__*/React.createElement(Combobox, {
     "data-disabled": disabled,
     "data-invalid": invalid,
     "data-active": isFocused,
     onClick: disabled ? noop : openMenu,
     "data-testid": "combobox"
-  }), /*#__PURE__*/React.createElement(Input, _extends({}, getInputProps(_extends({
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, getInputProps(_extends({
     disabled: disabled,
     readOnly: disableTyping,
     placeholder: placeholder,
@@ -200,13 +202,13 @@ export var Select = function Select(_ref) {
     ,
     ref: undefined
   }), isOpen ? /*#__PURE__*/React.createElement(ArrowUpIcon, null) : /*#__PURE__*/React.createElement(ArrowDownIcon, null)))), /*#__PURE__*/React.createElement(Menu, _extends({}, getMenuProps(), {
+    className: !isOpen && 'hidden',
     "data-testid": "menu"
   }), function () {
     var renderItem = function renderItem(item) {
       return /*#__PURE__*/React.createElement(Item, _extends({}, getItemProps({
         item: item,
-        index: indexOf(displayItems, item),
-        disabled: disabled || item.disabled
+        index: indexOf(displayItems, item)
       }), {
         key: item.value,
         item: item,
@@ -222,7 +224,6 @@ export var Select = function Select(_ref) {
           return /*#__PURE__*/React.createElement(GroupContainer, {
             key: groupKey
           }, /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(GroupHeading, {
-            disabled: true,
             "data-testid": "group-heading"
           }, groupKey), groups[groupKey].map(renderItem)));
         });

package/es/Input/DownshiftSelect/SelectStyle.js

@@ -41,7 +41,7 @@ export var LoadingIndicator = styled(Loading).withConfig({
 export var Menu = styled.ul.withConfig({
   displayName: "SelectStyle__Menu",
   componentId: "sc-qr1jv6-9"
-})(["margin-top:4px;position:absolute;width:100%;padding:0.5em 0 0.5em 0;border:1px solid #eeeeee;border-radius:0.5em;box-shadow:", ";background-color:white;z-index:1;[aria-expanded='false'] + &{visibility:hidden;}"], Shadow.down3);
+})(["margin-top:4px;position:absolute;width:100%;padding:0.5em 0 0.5em 0;border:1px solid #eeeeee;border-radius:0.5em;box-shadow:", ";background-color:white;z-index:1;&.hidden{visibility:hidden;}"], Shadow.down3);
 export var Item = styled.li.withConfig({
   displayName: "SelectStyle__Item",
   componentId: "sc-qr1jv6-10"

package/es/Input/NumberInput/NumberInput.d.ts

@@ -7,7 +7,7 @@ import { TextFieldInput } from '../TextField/TextFieldStyle';
  * <br/>
  * Use small to set the size of the input field. The ...rest is passed to the
  * internal field input. */
-export declare const NumberInput: (props: Props) => JSX.Element;
+export declare const NumberInput: (props: Props) => React.JSX.Element;
 export declare type Props = React.ComponentPropsWithoutRef<typeof TextFieldInput> & {
     /** Placeholder for the text field. */
     label: string;

package/es/Input/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
+export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => React.JSX.Element;
 export interface Props {
     value: PhoneNumber;
     onChange: (value: PhoneNumber) => void;

package/es/Input/PhoneNumberInput/PhoneNumberInput.js

@@ -67,7 +67,6 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
         return option ? option.label : '';
       }
     }),
-    getComboboxProps = _useCombobox.getComboboxProps,
     getInputProps = _useCombobox.getInputProps,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     getMenuProps = _useCombobox.getMenuProps,
@@ -109,11 +108,10 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
     htmlFor: significantNumberInputId
   }, label), /*#__PURE__*/React.createElement(S.TopRowAddon, {
     "data-testid": "addon"
-  }, addon)), /*#__PURE__*/React.createElement(S.CallingCodeInput, _extends({
-    isOpen: isCallingCodeInputOpen
-  }, getComboboxProps(), {
+  }, addon)), /*#__PURE__*/React.createElement(S.CallingCodeInput, {
+    isOpen: isCallingCodeInputOpen,
     "data-testid": "calling-code-input"
-  }), /*#__PURE__*/React.createElement(S.CallingCodeFilterInputGroup, null, /*#__PURE__*/React.createElement(S.CallingCodeFilterInput, _extends({}, getInputProps({
+  }, /*#__PURE__*/React.createElement(S.CallingCodeFilterInputGroup, null, /*#__PURE__*/React.createElement(S.CallingCodeFilterInput, _extends({}, getInputProps({
     placeholder: callingCodeFilterInputPlaceholder
   }, _extends({}, refErrorFix)), {
     ref: callingCodeFilterInputRef,

package/es/Input/TextField/TextField.d.ts

@@ -31,7 +31,7 @@ export declare type Props = React.ComponentPropsWithoutRef<typeof TextFieldInput
     /** Icon at the end of the input element. */
     endIcon?: React.ReactNode;
 };
-declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
+declare const _default: React.ForwardRefExoticComponent<(Omit<Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -40,7 +40,7 @@ declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
 } & {
     as?: string | React.ComponentType<any>;
     forwardedAs?: string | React.ComponentType<any>;
-}, string | number | symbol> & {
+}, "ref"> & {
     type: textFieldType;
     /** Placeholder for the text field. */
     label: string;
@@ -60,7 +60,7 @@ declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
     startIcon?: React.ReactNode;
     /** Icon at the end of the input element. */
     endIcon?: React.ReactNode;
-}, string | number | symbol> | Pick<Pick<{
+}, "ref"> | Omit<Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -71,7 +71,7 @@ declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
 } & {
     as?: string | React.ComponentType<any>;
     forwardedAs?: string | React.ComponentType<any>;
-}, string | number | symbol> & {
+}, "ref"> & {
     type: textFieldType;
     /** Placeholder for the text field. */
     label: string;
@@ -91,5 +91,5 @@ declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
     startIcon?: React.ReactNode;
     /** Icon at the end of the input element. */
     endIcon?: React.ReactNode;
-}, string | number | symbol>) & React.RefAttributes<HTMLInputElement>>;
+}, "ref">) & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/es/Input/ToggleSwitch/ToggleSwitch.d.ts

@@ -6,8 +6,8 @@ export interface ToggleSwitchProps {
     defaultActive?: boolean;
     /** The icon components that will be used in both active and inactive states. Both icons have to be defined when opting to use this. */
     iconOptions?: {
-        active: React.ReactType;
-        inactive: React.ReactType;
+        active: React.ElementType;
+        inactive: React.ElementType;
     };
     /** Called when the state of the toggle has been changed. Called with true or false depending on whether the toggle became active or inactive. */
     onChange?: (active: boolean) => void;

package/es/Layout/Grid/Col.js

@@ -4,9 +4,12 @@ var _excluded = ["xs", "sm", "md", "xsOrder", "smOrder", "mdOrder", "children"];
 import * as React from 'react';
 import { ColumnContainer } from './GridStyle';
 export var Col = function Col(_ref) {
-  var xs = _ref.xs,
-    sm = _ref.sm,
-    md = _ref.md,
+  var _ref$xs = _ref.xs,
+    xs = _ref$xs === void 0 ? 12 : _ref$xs,
+    _ref$sm = _ref.sm,
+    sm = _ref$sm === void 0 ? 12 : _ref$sm,
+    _ref$md = _ref.md,
+    md = _ref$md === void 0 ? 12 : _ref$md,
     xsOrder = _ref.xsOrder,
     smOrder = _ref.smOrder,
     mdOrder = _ref.mdOrder,
@@ -27,9 +30,4 @@ export var Col = function Col(_ref) {
     mdOrder: mdOrder
   }, defaultProps), children);
 };
-Col.defaultProps = {
-  xs: 12,
-  sm: 12,
-  md: 12
-};
 export default Col;

package/es/Navigation/Drawer/Drawer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const Drawer: ({ children, isOpen, onClose, position, getContainerElement, ...defaultProps }: Props) => JSX.Element;
+declare const Drawer: ({ children, isOpen, onClose, position, getContainerElement, ...defaultProps }: Props) => React.JSX.Element;
 export declare type DrawerPosition = 'left' | 'right';
 export interface Props {
     children: React.ReactNode;

package/es/Navigation/Dropdown/Dropdown.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DropdownContainer, DropdownHeader, DropdownBody } from './DropdownStyle';
 import { Props as DropdownItemProps } from './DropdownItem';
 export declare const Dropdown: {
-    ({ label, showHoverLine, dropDownPlacement, noLineBreak, iconDefaultColor, showFullWidth, disabled, hoverToOpen, onChange, children, leftIcon, className, itemElement, ...defaultProps }: Props): JSX.Element;
+    ({ label, showHoverLine, dropDownPlacement, noLineBreak, iconDefaultColor, showFullWidth, disabled, hoverToOpen, onChange, children, leftIcon, className, itemElement, ...defaultProps }: Props): React.JSX.Element;
     Item: React.FunctionComponent<DropdownItemProps>;
 };
 declare type PropsFromDropdownContainer = Omit<React.ComponentPropsWithoutRef<typeof DropdownContainer>, 'onChange'>;

package/es/Utils/DelayedUnmount.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface Props {
+    children?: React.ReactNode;
     mount: boolean;
     delay?: number;
 }

package/es/Utils/Icon/IconLibrary.d.ts

@@ -1,180 +1,180 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare const ICONS: {
-    ADD: JSX.Element;
-    ADD_CIRCLE_OUTLINE: JSX.Element;
-    ADD_CIRCLE_SOLID: JSX.Element;
-    ARROW_BACK: JSX.Element;
-    ARROW_BACK_SOLID: JSX.Element;
-    ARROW_BACK_DOUBLE: JSX.Element;
-    ARROW_DOWN: JSX.Element;
-    ARROW_DOWN_CIRCLE_OUTLINE: JSX.Element;
-    ARROW_DOWN_SOLID: JSX.Element;
-    ARROW_UP_SOLID: JSX.Element;
-    ARROW_NEXT: JSX.Element;
-    ARROW_NEXT_DOUBLE: JSX.Element;
-    ARROW_NEXT_SOLID: JSX.Element;
-    ARROW_UP: JSX.Element;
-    ARROW_ROUND_BACK: JSX.Element;
-    ARROW_ROUND_FORWARD: JSX.Element;
-    ASTERISK_SOLID: JSX.Element;
-    ATTACHMENT: JSX.Element;
-    BEHANCE: JSX.Element;
-    BELL: JSX.Element;
-    BOOKMARK: JSX.Element;
-    BOOKMARK_OUTLINE: JSX.Element;
-    BOOKMARK_ROUNDED_OUTLINE: JSX.Element;
-    BOX_WITH_HANDLE_SOLID: JSX.Element;
-    BRIEFCASE_SOLID: JSX.Element;
-    BUILDING_SOLID: JSX.Element;
-    BULLET_LIST: JSX.Element;
-    CALENDAR: JSX.Element;
-    CAMERA: JSX.Element;
-    CHECKLIST: JSX.Element;
-    CHECKMARK: JSX.Element;
-    CHECKMARK_SOLID: JSX.Element;
-    CHECKMARK_THICK: JSX.Element;
-    CIRCLE: JSX.Element;
-    CIRCLE_AND_CHECK: JSX.Element;
-    CLIPBOARD: JSX.Element;
-    CLIPBOARD_CHECK_OUTLINE: JSX.Element;
-    CLOCK: JSX.Element;
-    CLOSE: JSX.Element;
-    CLOSE_CIRCLE_SOLID: JSX.Element;
-    CLOUD_DOWNLOAD: JSX.Element;
-    CLOUD_UPLOAD: JSX.Element;
-    CODEPEN: JSX.Element;
-    COMPASS: JSX.Element;
-    COMMUNITY: JSX.Element;
-    CONNECTION: JSX.Element;
-    COPY: JSX.Element;
-    COPY_OUTLINED: JSX.Element;
-    COPY_LINK: JSX.Element;
-    CURRENCY: JSX.Element;
-    DELETE: JSX.Element;
-    DISCOUNT_SOLID: JSX.Element;
-    DOCUMENT_CHECK: JSX.Element;
-    DOT: JSX.Element;
-    DOUBLE_CHECKMARK: JSX.Element;
-    DOVE: JSX.Element;
-    DOWNLOAD: JSX.Element;
-    DRAG_STRIPES: JSX.Element;
-    DRAG_ARROW: JSX.Element;
-    EDIT: JSX.Element;
-    EDIT_OUTLINE: JSX.Element;
-    EXCLAMATION: JSX.Element;
-    EXIT_FULL_SCREEN: JSX.Element;
-    EXTERNAL_LINK: JSX.Element;
-    EYE: JSX.Element;
-    EYE_SOLID: JSX.Element;
-    EYE_SLASHED: JSX.Element;
-    FACEBOOK: JSX.Element;
-    FILE: JSX.Element;
-    FILE_ALTERNATE: JSX.Element;
-    FILE_PREVIEW: JSX.Element;
-    FILE_SOLID: JSX.Element;
-    FILTER: JSX.Element;
-    FLAG: JSX.Element;
-    FOLDER: JSX.Element;
-    FULL_SCREEN: JSX.Element;
-    GLOBE: JSX.Element;
-    GRADUATION_HAT: JSX.Element;
-    GROUP: JSX.Element;
-    GUARANTEE: JSX.Element;
-    GITHUB: JSX.Element;
-    HAND: JSX.Element;
-    HAND_SHAKE: JSX.Element;
-    HEART_SOLID: JSX.Element;
-    HEART: JSX.Element;
-    HELP: JSX.Element;
-    HOME: JSX.Element;
-    HOURGLASS: JSX.Element;
-    JOB_SEARCH: JSX.Element;
-    JOB_OUTLINE: JSX.Element;
-    IMAGE: JSX.Element;
-    INFO: JSX.Element;
-    INFO_SOLID: JSX.Element;
-    INSTAGRAM: JSX.Element;
-    LIGHTBULB: JSX.Element;
-    LIGHTNING_OUTLINE: JSX.Element;
-    LINE: JSX.Element;
-    LINKEDIN: JSX.Element;
-    LOADING: JSX.Element;
-    LOCATION: JSX.Element;
-    LOCK_SOLID: JSX.Element;
-    MAIL: JSX.Element;
-    MAIL_SOLID: JSX.Element;
-    MEDAL: JSX.Element;
-    MENU: JSX.Element;
-    MENU_HALF: JSX.Element;
-    MESSAGE_OUTLINE: JSX.Element;
-    MESSAGE_OUTLINE_INCOMING: JSX.Element;
-    MIC: JSX.Element;
-    MIC_OFF: JSX.Element;
-    MINUS: JSX.Element;
-    MINUS_CIRCLE: JSX.Element;
-    MINUS_CIRCLE_SOLID: JSX.Element;
-    MORE: JSX.Element;
-    MORE_HORIZONTAL: JSX.Element;
-    NAME_TAG: JSX.Element;
-    NOTIFICATION: JSX.Element;
-    NUMBER_LIST: JSX.Element;
-    ONLINE: JSX.Element;
-    PDF: JSX.Element;
-    PDF_OUTLINE: JSX.Element;
-    PHONE: JSX.Element;
-    POWER: JSX.Element;
-    PUZZLE: JSX.Element;
-    QUESTION_OUTLINE: JSX.Element;
-    QUOTATION: JSX.Element;
-    REFRESH_SOLID: JSX.Element;
-    REPLY: JSX.Element;
-    RESUME_OUTLINE: JSX.Element;
-    ROTATE: JSX.Element;
-    RSS: JSX.Element;
-    SALARY: JSX.Element;
-    SAVE_SOLID: JSX.Element;
-    SEARCH: JSX.Element;
-    SEND: JSX.Element;
-    SETTING: JSX.Element;
-    SETTING_SOLID: JSX.Element;
-    SHARE: JSX.Element;
-    SHARE_OUTLINE: JSX.Element;
-    SHARE_ARROW: JSX.Element;
-    SHARE_ARROW_OUTLINE: JSX.Element;
-    SHARE_SCREEN: JSX.Element;
-    SHIELD_CHECK: JSX.Element;
-    SPEAKER: JSX.Element;
-    SPEECH_BUBBLE: JSX.Element;
-    SPEECH_BUBBLE_OUTLINE: JSX.Element;
-    SPINNER: JSX.Element;
-    STACK: JSX.Element;
-    STAR_OUTLINE: JSX.Element;
-    STAR_CIRCLE: JSX.Element;
-    STAR: JSX.Element;
-    TAG: JSX.Element;
-    TASK: JSX.Element;
-    TELEGRAM: JSX.Element;
-    THUMBS_UP: JSX.Element;
-    THUMBS_UP_OUTLINE: JSX.Element;
-    TICKET_SOLID: JSX.Element;
-    TIE: JSX.Element;
-    TRASH: JSX.Element;
-    TV_PLAY: JSX.Element;
-    TWITTER: JSX.Element;
-    UPLOAD: JSX.Element;
-    UPVOTE: JSX.Element;
-    USER: JSX.Element;
-    USER_COG: JSX.Element;
-    USER_WRENCH: JSX.Element;
-    VIDEO: JSX.Element;
-    VIDEO_OFF: JSX.Element;
-    VIEW: JSX.Element;
-    VIMEO: JSX.Element;
-    WARNING: JSX.Element;
-    WARNING_CIRCLE_SOLID: JSX.Element;
-    WARNING_OUTLINE: JSX.Element;
-    WARNING_SOLID: JSX.Element;
-    WHATSAPP: JSX.Element;
-    YOUTUBE: JSX.Element;
-    ZALO: JSX.Element;
+    ADD: React.JSX.Element;
+    ADD_CIRCLE_OUTLINE: React.JSX.Element;
+    ADD_CIRCLE_SOLID: React.JSX.Element;
+    ARROW_BACK: React.JSX.Element;
+    ARROW_BACK_SOLID: React.JSX.Element;
+    ARROW_BACK_DOUBLE: React.JSX.Element;
+    ARROW_DOWN: React.JSX.Element;
+    ARROW_DOWN_CIRCLE_OUTLINE: React.JSX.Element;
+    ARROW_DOWN_SOLID: React.JSX.Element;
+    ARROW_UP_SOLID: React.JSX.Element;
+    ARROW_NEXT: React.JSX.Element;
+    ARROW_NEXT_DOUBLE: React.JSX.Element;
+    ARROW_NEXT_SOLID: React.JSX.Element;
+    ARROW_UP: React.JSX.Element;
+    ARROW_ROUND_BACK: React.JSX.Element;
+    ARROW_ROUND_FORWARD: React.JSX.Element;
+    ASTERISK_SOLID: React.JSX.Element;
+    ATTACHMENT: React.JSX.Element;
+    BEHANCE: React.JSX.Element;
+    BELL: React.JSX.Element;
+    BOOKMARK: React.JSX.Element;
+    BOOKMARK_OUTLINE: React.JSX.Element;
+    BOOKMARK_ROUNDED_OUTLINE: React.JSX.Element;
+    BOX_WITH_HANDLE_SOLID: React.JSX.Element;
+    BRIEFCASE_SOLID: React.JSX.Element;
+    BUILDING_SOLID: React.JSX.Element;
+    BULLET_LIST: React.JSX.Element;
+    CALENDAR: React.JSX.Element;
+    CAMERA: React.JSX.Element;
+    CHECKLIST: React.JSX.Element;
+    CHECKMARK: React.JSX.Element;
+    CHECKMARK_SOLID: React.JSX.Element;
+    CHECKMARK_THICK: React.JSX.Element;
+    CIRCLE: React.JSX.Element;
+    CIRCLE_AND_CHECK: React.JSX.Element;
+    CLIPBOARD: React.JSX.Element;
+    CLIPBOARD_CHECK_OUTLINE: React.JSX.Element;
+    CLOCK: React.JSX.Element;
+    CLOSE: React.JSX.Element;
+    CLOSE_CIRCLE_SOLID: React.JSX.Element;
+    CLOUD_DOWNLOAD: React.JSX.Element;
+    CLOUD_UPLOAD: React.JSX.Element;
+    CODEPEN: React.JSX.Element;
+    COMPASS: React.JSX.Element;
+    COMMUNITY: React.JSX.Element;
+    CONNECTION: React.JSX.Element;
+    COPY: React.JSX.Element;
+    COPY_OUTLINED: React.JSX.Element;
+    COPY_LINK: React.JSX.Element;
+    CURRENCY: React.JSX.Element;
+    DELETE: React.JSX.Element;
+    DISCOUNT_SOLID: React.JSX.Element;
+    DOCUMENT_CHECK: React.JSX.Element;
+    DOT: React.JSX.Element;
+    DOUBLE_CHECKMARK: React.JSX.Element;
+    DOVE: React.JSX.Element;
+    DOWNLOAD: React.JSX.Element;
+    DRAG_STRIPES: React.JSX.Element;
+    DRAG_ARROW: React.JSX.Element;
+    EDIT: React.JSX.Element;
+    EDIT_OUTLINE: React.JSX.Element;
+    EXCLAMATION: React.JSX.Element;
+    EXIT_FULL_SCREEN: React.JSX.Element;
+    EXTERNAL_LINK: React.JSX.Element;
+    EYE: React.JSX.Element;
+    EYE_SOLID: React.JSX.Element;
+    EYE_SLASHED: React.JSX.Element;
+    FACEBOOK: React.JSX.Element;
+    FILE: React.JSX.Element;
+    FILE_ALTERNATE: React.JSX.Element;
+    FILE_PREVIEW: React.JSX.Element;
+    FILE_SOLID: React.JSX.Element;
+    FILTER: React.JSX.Element;
+    FLAG: React.JSX.Element;
+    FOLDER: React.JSX.Element;
+    FULL_SCREEN: React.JSX.Element;
+    GLOBE: React.JSX.Element;
+    GRADUATION_HAT: React.JSX.Element;
+    GROUP: React.JSX.Element;
+    GUARANTEE: React.JSX.Element;
+    GITHUB: React.JSX.Element;
+    HAND: React.JSX.Element;
+    HAND_SHAKE: React.JSX.Element;
+    HEART_SOLID: React.JSX.Element;
+    HEART: React.JSX.Element;
+    HELP: React.JSX.Element;
+    HOME: React.JSX.Element;
+    HOURGLASS: React.JSX.Element;
+    JOB_SEARCH: React.JSX.Element;
+    JOB_OUTLINE: React.JSX.Element;
+    IMAGE: React.JSX.Element;
+    INFO: React.JSX.Element;
+    INFO_SOLID: React.JSX.Element;
+    INSTAGRAM: React.JSX.Element;
+    LIGHTBULB: React.JSX.Element;
+    LIGHTNING_OUTLINE: React.JSX.Element;
+    LINE: React.JSX.Element;
+    LINKEDIN: React.JSX.Element;
+    LOADING: React.JSX.Element;
+    LOCATION: React.JSX.Element;
+    LOCK_SOLID: React.JSX.Element;
+    MAIL: React.JSX.Element;
+    MAIL_SOLID: React.JSX.Element;
+    MEDAL: React.JSX.Element;
+    MENU: React.JSX.Element;
+    MENU_HALF: React.JSX.Element;
+    MESSAGE_OUTLINE: React.JSX.Element;
+    MESSAGE_OUTLINE_INCOMING: React.JSX.Element;
+    MIC: React.JSX.Element;
+    MIC_OFF: React.JSX.Element;
+    MINUS: React.JSX.Element;
+    MINUS_CIRCLE: React.JSX.Element;
+    MINUS_CIRCLE_SOLID: React.JSX.Element;
+    MORE: React.JSX.Element;
+    MORE_HORIZONTAL: React.JSX.Element;
+    NAME_TAG: React.JSX.Element;
+    NOTIFICATION: React.JSX.Element;
+    NUMBER_LIST: React.JSX.Element;
+    ONLINE: React.JSX.Element;
+    PDF: React.JSX.Element;
+    PDF_OUTLINE: React.JSX.Element;
+    PHONE: React.JSX.Element;
+    POWER: React.JSX.Element;
+    PUZZLE: React.JSX.Element;
+    QUESTION_OUTLINE: React.JSX.Element;
+    QUOTATION: React.JSX.Element;
+    REFRESH_SOLID: React.JSX.Element;
+    REPLY: React.JSX.Element;
+    RESUME_OUTLINE: React.JSX.Element;
+    ROTATE: React.JSX.Element;
+    RSS: React.JSX.Element;
+    SALARY: React.JSX.Element;
+    SAVE_SOLID: React.JSX.Element;
+    SEARCH: React.JSX.Element;
+    SEND: React.JSX.Element;
+    SETTING: React.JSX.Element;
+    SETTING_SOLID: React.JSX.Element;
+    SHARE: React.JSX.Element;
+    SHARE_OUTLINE: React.JSX.Element;
+    SHARE_ARROW: React.JSX.Element;
+    SHARE_ARROW_OUTLINE: React.JSX.Element;
+    SHARE_SCREEN: React.JSX.Element;
+    SHIELD_CHECK: React.JSX.Element;
+    SPEAKER: React.JSX.Element;
+    SPEECH_BUBBLE: React.JSX.Element;
+    SPEECH_BUBBLE_OUTLINE: React.JSX.Element;
+    SPINNER: React.JSX.Element;
+    STACK: React.JSX.Element;
+    STAR_OUTLINE: React.JSX.Element;
+    STAR_CIRCLE: React.JSX.Element;
+    STAR: React.JSX.Element;
+    TAG: React.JSX.Element;
+    TASK: React.JSX.Element;
+    TELEGRAM: React.JSX.Element;
+    THUMBS_UP: React.JSX.Element;
+    THUMBS_UP_OUTLINE: React.JSX.Element;
+    TICKET_SOLID: React.JSX.Element;
+    TIE: React.JSX.Element;
+    TRASH: React.JSX.Element;
+    TV_PLAY: React.JSX.Element;
+    TWITTER: React.JSX.Element;
+    UPLOAD: React.JSX.Element;
+    UPVOTE: React.JSX.Element;
+    USER: React.JSX.Element;
+    USER_COG: React.JSX.Element;
+    USER_WRENCH: React.JSX.Element;
+    VIDEO: React.JSX.Element;
+    VIDEO_OFF: React.JSX.Element;
+    VIEW: React.JSX.Element;
+    VIMEO: React.JSX.Element;
+    WARNING: React.JSX.Element;
+    WARNING_CIRCLE_SOLID: React.JSX.Element;
+    WARNING_OUTLINE: React.JSX.Element;
+    WARNING_SOLID: React.JSX.Element;
+    WHATSAPP: React.JSX.Element;
+    YOUTUBE: React.JSX.Element;
+    ZALO: React.JSX.Element;
 };

package/es/stories/story-components/AriesStatus.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const AriesStatus: () => JSX.Element;
+import React from 'react';
+export declare const AriesStatus: () => React.JSX.Element;

package/lib/@next/ActionList/ActionItem.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { Item } from './ActionList';
-export declare const ActionItem: ({ content, description, icon, action, disabled, }: Item) => JSX.Element;
+export declare const ActionItem: ({ content, description, icon, action, disabled, }: Item) => React.JSX.Element;

package/lib/@next/ActionList/ActionList.d.ts

@@ -14,4 +14,4 @@ export declare type ActionListProps = {
     items?: Item[];
     sections?: Section[];
 };
-export declare const ActionList: ({ items, sections }: ActionListProps) => JSX.Element;
+export declare const ActionList: ({ items, sections }: ActionListProps) => React.JSX.Element;

package/lib/@next/Alert/AlertProvider.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const AlertProvider: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;