@innovaccer/design-system 2.28.3 → 2.29.0

package/dist/core/common.type.d.ts

@@ -14,3 +14,10 @@ export declare type TextColor = 'white' | 'primary' | 'secondary' | 'success' |
 export declare type AvatarSize = 'regular' | 'tiny';
 export declare type AvatarShape = 'round' | 'square';
 export declare type IconType = 'rounded' | 'outlined';
+export declare type PositionType = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+export declare type OptionType = {
+    label: string;
+    value: any;
+    isSelectedOption?: boolean;
+};
+export declare type TListboxSize = 'standard' | 'compressed' | 'tight';

package/dist/core/components/atoms/avatar/Avatar.d.ts

@@ -11,6 +11,7 @@ export interface AvatarProps extends BaseProps {
     tooltipPosition: TooltipProps['position'];
     size: AvatarSize;
     shape: AvatarShape;
+    role?: string;
 }
 export declare const Avatar: {
     (props: AvatarProps): JSX.Element;

package/dist/core/components/atoms/avatar/avatarIcon/AvatarIcon.d.ts

@@ -1,11 +1,7 @@
-import * as React from 'react';
 import { BaseProps } from "../../../../utils/types";
 export interface AvatarIconProps extends BaseProps {
     name?: string;
     type?: 'outlined' | 'rounded';
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
-    tabIndex?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>['tabIndex'];
 }
 export declare const AvatarIcon: (props: AvatarIconProps) => JSX.Element;
 export default AvatarIcon;

package/dist/core/components/atoms/avatarSelection/AvatarSelection.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { BaseProps } from "../../../utils/types";
+import { AvatarProps, TooltipProps } from "../../../index.type";
+import { AvatarSize } from "../../../common.type";
+export interface AvatarData extends Record<string, any> {
+    firstName?: string;
+    lastName?: string;
+    appearance?: AvatarProps['appearance'];
+    icon?: React.ReactNode;
+    image?: React.ReactNode;
+    selected?: boolean;
+}
+export interface AvatarSelectionProps extends BaseProps {
+    list: AvatarData[];
+    max: number;
+    borderColor: string;
+    size: AvatarSize;
+    tooltipPosition: TooltipProps['position'];
+    avatarRenderer?: (data: AvatarData) => JSX.Element;
+    onSelect?: (data?: AvatarData) => void;
+    width?: number;
+    maxHeight?: number;
+    minHeight?: number;
+    withSearch?: boolean;
+    searchPlaceholder?: string;
+    searchComparator?: (searchValue: string, avatarData: AvatarData) => boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const AvatarSelection: {
+    (props: AvatarSelectionProps): JSX.Element;
+    displayName: string;
+    defaultProps: {
+        max: number;
+        tooltipPosition: string;
+        borderColor: string;
+        size: string;
+        width: number;
+        maxHeight: number;
+    };
+    Input: (props: import("../input/Input").InputProps) => JSX.Element;
+    List: {
+        (props: import("./avatarPopover").SelectionListProps): JSX.Element;
+        defaultProps: {
+            type: string;
+            showDivider: boolean;
+            size: string;
+            tagName: string;
+        };
+    };
+    Option: {
+        (props: import("./avatarPopover").SelectionOptionProps): JSX.Element;
+        defaultProps: {
+            tagName: string;
+        };
+    };
+    EmptyState: (props: import("./avatarPopover").AvatarEmptyStateProps) => JSX.Element;
+};
+export default AvatarSelection;

package/dist/core/components/atoms/avatarSelection/AvatarSelectionContext.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AvatarData } from "./AvatarSelection";
+export declare type ContextProps = {
+    listRef?: React.RefObject<HTMLDivElement>;
+    onSelect?: (data?: AvatarData) => void;
+    withSearch?: boolean;
+    triggerRef?: React.LegacyRef<HTMLDivElement>;
+    selectedItems: AvatarData[];
+    focusedOption?: HTMLElement;
+    setSelectedItems?: React.Dispatch<React.SetStateAction<AvatarData[]>>;
+    setFocusedOption?: React.Dispatch<React.SetStateAction<HTMLElement | undefined>>;
+    setHighlightFirstItem?: React.Dispatch<React.SetStateAction<boolean>>;
+    setHighlightLastItem?: React.Dispatch<React.SetStateAction<boolean>>;
+    setOpenPopover?: React.Dispatch<React.SetStateAction<boolean>>;
+    openPopover?: boolean;
+    popoverId?: string;
+};
+export declare const AvatarSelectionContext: React.Context<Partial<ContextProps>>;
+export default AvatarSelectionContext;

package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionEmptyState.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface AvatarEmptyStateProps {
+    height?: number;
+    title?: React.ReactText;
+    description?: string;
+}
+export declare const AvatarSelectionEmptyState: (props: AvatarEmptyStateProps) => JSX.Element;
+export default AvatarSelectionEmptyState;

package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionInput.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from "../../../../index.type";
+export declare const AvatarSelectionInput: (props: InputProps) => JSX.Element;
+export default AvatarSelectionInput;

package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionList.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { TListboxSize } from "../../../../common.type";
+import { BaseProps } from "../../../../utils/types";
+declare type TagType = 'ul' | 'ol' | 'div' | 'nav';
+export interface SelectionListProps extends BaseProps {
+    children: React.ReactNode;
+    size: TListboxSize;
+    tagName: TagType;
+    showDivider: boolean;
+}
+export declare const AvatarSelectionList: {
+    (props: SelectionListProps): JSX.Element;
+    defaultProps: {
+        type: string;
+        showDivider: boolean;
+        size: string;
+        tagName: string;
+    };
+};
+export default AvatarSelectionList;

package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionOption.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { BaseProps } from "../../../../utils/types";
+export declare type ItemTagType = 'li' | 'div';
+export interface SelectionOptionProps extends BaseProps {
+    children: React.ReactNode;
+    value?: any;
+    tagName: ItemTagType;
+}
+export declare const AvatarSelectionOption: {
+    (props: SelectionOptionProps): JSX.Element;
+    defaultProps: {
+        tagName: string;
+    };
+};
+export default AvatarSelectionOption;

package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionPopover.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { AvatarData } from "../AvatarSelection";
+interface AvatarPopoverProps {
+    hiddenAvatarList: AvatarData[];
+    searchPlaceholder?: string;
+    searchComparator?: (searchValue: string, avatarData: AvatarData) => boolean;
+    children?: React.ReactNode;
+    customStyle: {
+        width?: number;
+        minHeight?: number;
+        maxHeight?: number;
+    };
+}
+export declare const AvatarSelectionPopover: (props: AvatarPopoverProps) => JSX.Element;
+export default AvatarSelectionPopover;

package/dist/core/components/atoms/avatarSelection/avatarPopover/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./AvatarSelectionPopover";
+export * from "./AvatarSelectionEmptyState";
+export * from "./AvatarSelectionInput";
+export * from "./AvatarSelectionList";
+export * from "./AvatarSelectionOption";

package/dist/core/components/atoms/avatarSelection/avatarPopover/utils.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const handleKeyDown: (event: React.KeyboardEvent, focusedOption: Element | undefined, setFocusedOption?: React.Dispatch<React.SetStateAction<HTMLElement | undefined>> | undefined, setHighlightFirstItem?: React.Dispatch<React.SetStateAction<boolean>> | undefined, setHighlightLastItem?: React.Dispatch<React.SetStateAction<boolean>> | undefined, listRef?: any, withSearch?: boolean | undefined, setOpenPopover?: React.Dispatch<React.SetStateAction<boolean>> | undefined, triggerRef?: any) => void;
+export declare const handleInputKeyDown: (event: React.KeyboardEvent, listRef: any, setFocusedOption?: React.Dispatch<React.SetStateAction<HTMLElement | undefined>> | undefined, setOpenPopover?: React.Dispatch<React.SetStateAction<boolean>> | undefined, triggerRef?: any) => void;

package/dist/core/components/atoms/avatarSelection/avatarsSelection/AvatarSelectionCount.d.ts

@@ -0,0 +1,13 @@
+import { AvatarData } from "../AvatarSelection";
+import { AvatarSize } from "../../../../common.type";
+interface CountAvatarProp {
+    size?: AvatarSize;
+    hiddenAvatarCount?: number;
+    hiddenAvatarList: AvatarData[];
+    avatarStyle?: {
+        backgroundColor?: string;
+        boxShadow?: string;
+    };
+}
+export declare const AvatarSelectionCount: (props: CountAvatarProp) => JSX.Element;
+export default AvatarSelectionCount;

package/dist/core/components/atoms/avatarSelection/avatarsSelection/SelectionAvatar.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { AvatarSize } from "../../../../common.type";
+import { AvatarProps, TooltipProps } from "../../../../index.type";
+interface SelectionAvatarProps {
+    size?: AvatarSize;
+    appearance?: AvatarProps['appearance'];
+    firstName?: string;
+    lastName?: string;
+    withTooltip?: boolean;
+    icon?: React.ReactNode;
+    image?: React.ReactNode;
+    tooltipPosition?: TooltipProps['position'];
+}
+export declare const SelectionAvatar: (props: SelectionAvatarProps) => JSX.Element;
+export default SelectionAvatar;

package/dist/core/components/atoms/avatarSelection/avatarsSelection/SelectionAvatarsWrapper.d.ts

@@ -0,0 +1,15 @@
+import { AvatarData } from "../AvatarSelection";
+import { AvatarSize } from "../../../../common.type";
+import { TooltipProps } from "../../../../index.type";
+interface SelectionAvatarsWrapperProps {
+    size?: AvatarSize;
+    avatarList: AvatarData[];
+    avatarRenderer?: (data: AvatarData) => JSX.Element;
+    tooltipPosition?: TooltipProps['position'];
+    avatarStyle?: {
+        backgroundColor?: string;
+        boxShadow?: string;
+    };
+}
+export declare const SelectionAvatarsWrapper: (props: SelectionAvatarsWrapperProps) => JSX.Element;
+export default SelectionAvatarsWrapper;

package/dist/core/components/atoms/avatarSelection/avatarsSelection/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SelectionAvatarsWrapper";
+export * from "./AvatarSelectionCount";

package/dist/core/components/atoms/avatarSelection/avatarsSelection/utils.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const handleKeyDown: (event: React.KeyboardEvent, setOpenPopover?: React.Dispatch<React.SetStateAction<boolean>> | undefined, setHighlightFirstItem?: React.Dispatch<React.SetStateAction<boolean>> | undefined, setHighlightLastItem?: React.Dispatch<React.SetStateAction<boolean>> | undefined) => void;
+export declare const focusListItem: (position: string, setFocusedOption?: React.Dispatch<React.SetStateAction<HTMLElement | undefined>> | undefined, listRef?: any, withSearch?: boolean | undefined) => void;

package/dist/core/components/atoms/avatarSelection/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./AvatarSelection";
+export * from "./AvatarSelection";

package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type PositionType = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+import { PositionType } from "../../../common.type";
 declare type ActionType = 'click' | 'hover';
 declare type Offset = 'small' | 'medium' | 'large';
 declare type PopperChildrenProps = {
@@ -144,12 +144,12 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         boxDecorationBreak?: "slice" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "clone" | undefined;
         boxShadow?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
         boxSizing?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "border-box" | "content-box" | undefined;
-        breakAfter?: "region" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "page" | "all" | "always" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "recto" | "verso" | undefined;
-        breakBefore?: "region" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "page" | "all" | "always" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "recto" | "verso" | undefined;
+        breakAfter?: "region" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "page" | "all" | "always" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "recto" | "verso" | undefined;
+        breakBefore?: "region" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "page" | "all" | "always" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "recto" | "verso" | undefined;
         breakInside?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | undefined;
         captionSide?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "top" | "bottom" | "block-end" | "block-start" | "inline-end" | "inline-start" | undefined;
         caretColor?: (string & {}) | "white" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined;
-        clear?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "both" | "inline-end" | "inline-start" | undefined;
+        clear?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "both" | "inline-end" | "inline-start" | undefined;
         clipPath?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "border-box" | "content-box" | "padding-box" | "fill-box" | "margin-box" | "stroke-box" | "view-box" | undefined;
         color?: (string & {}) | "white" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined;
         colorAdjust?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "economy" | "exact" | undefined;
@@ -178,7 +178,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         flexGrow?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         flexShrink?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         flexWrap?: "wrap" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap-reverse" | undefined;
-        float?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "inline-end" | "inline-start" | undefined;
+        float?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "inline-end" | "inline-start" | undefined;
         fontFamily?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "cursive" | "fantasy" | "monospace" | "sans-serif" | "serif" | undefined;
         fontFeatureSettings?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | undefined;
         fontKerning?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "normal" | undefined;
@@ -225,10 +225,10 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         insetInlineEnd?: string | number | (string & {}) | undefined;
         insetInlineStart?: string | number | (string & {}) | undefined;
         isolation?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "isolate" | undefined;
-        justifyContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
-        justifyItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "legacy" | undefined;
-        justifySelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
-        justifyTracks?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
+        justifyContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
+        justifyItems?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "legacy" | undefined;
+        justifySelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        justifyTracks?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
         left?: string | number | (string & {}) | undefined;
         letterSpacing?: string | number | undefined;
         lineBreak?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "normal" | "strict" | "anywhere" | "loose" | undefined;
@@ -312,8 +312,8 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         paddingLeft?: string | number | (string & {}) | undefined;
         paddingRight?: string | number | (string & {}) | undefined;
         paddingTop?: string | number | (string & {}) | undefined;
-        pageBreakAfter?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "always" | "avoid" | "recto" | "verso" | undefined;
-        pageBreakBefore?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "always" | "avoid" | "recto" | "verso" | undefined;
+        pageBreakAfter?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "always" | "avoid" | "recto" | "verso" | undefined;
+        pageBreakBefore?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "always" | "avoid" | "recto" | "verso" | undefined;
         pageBreakInside?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "avoid" | undefined;
         paintOrder?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "fill" | "markers" | "stroke" | undefined;
         perspective?: string | number | undefined;
@@ -369,8 +369,8 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         shapeOutside?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "border-box" | "content-box" | "padding-box" | "margin-box" | undefined;
         tabSize?: string | number | (string & {}) | (number & {}) | undefined;
         tableLayout?: "fixed" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
-        textAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "center" | "end" | "justify" | "match-parent" | undefined;
-        textAlignLast?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "center" | "end" | "justify" | undefined;
+        textAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "center" | "end" | "justify" | "match-parent" | undefined;
+        textAlignLast?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "center" | "end" | "justify" | undefined;
         textCombineUpright?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "all" | undefined;
         textDecorationColor?: (string & {}) | "white" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined;
         textDecorationLine?: "blink" | "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | undefined;
@@ -391,7 +391,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         textSizeAdjust?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
         textTransform?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase" | undefined;
         textUnderlineOffset?: string | number | (string & {}) | undefined;
-        textUnderlinePosition?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "from-font" | "under" | undefined;
+        textUnderlinePosition?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "from-font" | "under" | undefined;
         top?: string | number | (string & {}) | undefined;
         touchAction?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "-ms-manipulation" | "-ms-none" | "-ms-pinch-zoom" | "manipulation" | "pan-down" | "pan-left" | "pan-right" | "pan-up" | "pan-x" | "pan-y" | "pinch-zoom" | undefined;
         transform?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
@@ -541,7 +541,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         msHyphenateLimitZone?: string | number | (string & {}) | undefined;
         msHyphens?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "manual" | undefined;
         msImeAlign?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "after" | undefined;
-        msJustifySelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+        msJustifySelf?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "center" | "end" | "stretch" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
         msLineBreak?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "normal" | "strict" | "anywhere" | "loose" | undefined;
         msOrder?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         msOverflowStyle?: "none" | "scrollbar" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "-ms-autohiding-scrollbar" | undefined;
@@ -631,7 +631,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         WebkitFontVariantLigatures?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "common-ligatures" | "contextual" | "discretionary-ligatures" | "historical-ligatures" | "no-common-ligatures" | "no-contextual" | "no-discretionary-ligatures" | "no-historical-ligatures" | undefined;
         WebkitHyphens?: "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "manual" | undefined;
         WebkitInitialLetter?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | "normal" | undefined;
-        WebkitJustifyContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
+        WebkitJustifyContent?: "start" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "center" | "end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "normal" | undefined;
         WebkitLineBreak?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "normal" | "strict" | "anywhere" | "loose" | undefined;
         WebkitLineClamp?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
         WebkitMarginEnd?: string | number | (string & {}) | undefined;
@@ -678,7 +678,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         WebkitTextSizeAdjust?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
         WebkitTextStrokeColor?: (string & {}) | "white" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined;
         WebkitTextStrokeWidth?: string | number | undefined;
-        WebkitTextUnderlinePosition?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "from-font" | "under" | undefined;
+        WebkitTextUnderlinePosition?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "from-font" | "under" | undefined;
         WebkitTouchCallout?: "default" | "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
         WebkitTransform?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined;
         WebkitTransformOrigin?: string | number | (string & {}) | undefined;
@@ -715,7 +715,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         WebkitTextEmphasis?: "open" | "none" | (string & {}) | "filled" | "white" | "circle" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | "dot" | "double-circle" | "sesame" | "triangle" | undefined;
         WebkitTextStroke?: string | number | (string & {}) | undefined;
         WebkitTransition?: "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "all" | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear" | undefined;
-        azimuth?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "left" | "right" | "center" | "behind" | "center-left" | "center-right" | "far-left" | "far-right" | "left-side" | "leftwards" | "right-side" | "rightwards" | undefined;
+        azimuth?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "right" | "left" | "center" | "behind" | "center-left" | "center-right" | "far-left" | "far-right" | "left-side" | "leftwards" | "right-side" | "rightwards" | undefined;
         boxAlign?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "stretch" | "baseline" | undefined;
         boxDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "normal" | "reverse" | undefined;
         boxFlex?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | (number & {}) | undefined;
@@ -783,7 +783,7 @@ export declare class PopperWrapper extends React.Component<PopperWrapperProps, P
         MozOutlineRadiusTopright?: string | number | (string & {}) | undefined;
         MozOutlineStyle?: "hidden" | "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "dashed" | "dotted" | "double" | "groove" | "inset" | "outset" | "ridge" | "solid" | undefined;
         MozOutlineWidth?: string | number | undefined;
-        MozTextAlignLast?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "left" | "right" | "center" | "end" | "justify" | undefined;
+        MozTextAlignLast?: "start" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "right" | "left" | "center" | "end" | "justify" | undefined;
         MozTextDecorationColor?: (string & {}) | "white" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "transparent" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined;
         MozTextDecorationLine?: "blink" | "none" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "grammar-error" | "line-through" | "overline" | "spelling-error" | "underline" | undefined;
         MozTextDecorationStyle?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "dashed" | "dotted" | "double" | "solid" | "wavy" | undefined;

package/dist/core/components/molecules/popover/Popover.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PopperWrapperProps } from "../../atoms/popperWrapper";
 import { BaseProps } from "../../../utils/types";
-declare type Position = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+import { PositionType as Position } from "../../../common.type";
 export interface CustomStyle {
     height?: number | string;
     minHeight?: number | string;

package/dist/core/components/molecules/tooltip/Tooltip.d.ts

@@ -1,11 +1,13 @@
 import { PopoverProps } from "../../../index.type";
 import { BaseProps } from "../../../utils/types";
+declare type Position = 'top-start' | 'top' | 'top-end' | 'right' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left';
 declare const tooltipPropsList: readonly ["trigger", "on", "open", "offset", "onToggle", "dark", "customStyle", "closeOnBackdropClick", "hideOnReferenceEscape", "closeOnScroll"];
 declare type TooltipPopperProps = typeof tooltipPropsList[number];
 export interface TooltipProps extends Omit<PopoverProps, TooltipPopperProps>, BaseProps {
     tooltip: string;
     showTooltip?: boolean;
     children: PopoverProps['trigger'];
+    position: Position;
 }
 export declare const Tooltip: {
     (props: TooltipProps): JSX.Element;

package/dist/core/components/organisms/combobox/Combobox.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { BaseProps } from "../../../utils/types";
+import { OptionType, IconType } from "../../../common.type";
+import { ContextProps } from "./ComboboxContext";
+export declare type ComboboxInputSize = 'tiny' | 'regular' | 'large';
+export interface ComboboxProps extends BaseProps {
+    multiSelect?: boolean;
+    children: React.ReactNode | ((contextProp: ContextProps) => React.ReactNode);
+    maxHeight?: number;
+    width?: number;
+    onChange?: (option?: OptionType | OptionType[]) => void;
+    onSearch?: (value?: string) => void;
+    value?: OptionType;
+    chipValue?: OptionType[];
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onClear?: (event: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => void;
+    icon?: string;
+    iconType?: IconType;
+    size?: ComboboxInputSize;
+    clearButton?: boolean;
+    className?: string;
+}
+export declare const Combobox: {
+    (props: ComboboxProps): JSX.Element;
+    List: {
+        (props: import("./ComboboxList").ComboboxListProps): JSX.Element;
+        defaultProps: {
+            type: string;
+            showDivider: boolean;
+            tagName: string;
+            size: string;
+        };
+    };
+    Option: {
+        (props: import("./ComboboxOption").ComboboxOptionProps): JSX.Element;
+        defaultProps: {
+            tagName: string;
+        };
+    };
+};
+export default Combobox;

package/dist/core/components/organisms/combobox/ComboboxContext.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { OptionType } from "../../../common.type";
+export declare type ContextProps = {
+    inputValue?: OptionType;
+    openPopover?: boolean;
+    chipInputValue?: OptionType[];
+    focusedOption?: Element;
+    chipInputText?: string;
+    onOptionClick?: (option: OptionType) => void;
+    setInputValue?: React.Dispatch<React.SetStateAction<OptionType | undefined>>;
+    setChipInputText?: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setOpenPopover?: React.Dispatch<React.SetStateAction<boolean>>;
+    setChipInputValue?: React.Dispatch<React.SetStateAction<OptionType[] | undefined>>;
+    setFocusedOption?: React.Dispatch<React.SetStateAction<HTMLElement | undefined>>;
+    setHighlightFirstItem?: React.Dispatch<React.SetStateAction<boolean>>;
+    setHighlightLastItem?: React.Dispatch<React.SetStateAction<boolean>>;
+    inputTriggerRef?: any;
+    listRef?: React.RefObject<HTMLDivElement>;
+    multiSelect?: boolean;
+    popoverId?: string;
+};
+export declare const ComboboxContext: React.Context<ContextProps>;
+export default ComboboxContext;

package/dist/core/components/organisms/combobox/ComboboxList.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BaseProps } from "../../../utils/types";
+import { TListboxSize } from "../../../common.type";
+declare type TagType = 'ul' | 'ol' | 'div' | 'nav';
+export interface ComboboxListProps extends BaseProps {
+    children: React.ReactNode;
+    size: TListboxSize;
+    tagName: TagType;
+    showDivider: boolean;
+}
+export declare const ComboboxList: {
+    (props: ComboboxListProps): JSX.Element;
+    defaultProps: {
+        type: string;
+        showDivider: boolean;
+        tagName: string;
+        size: string;
+    };
+};
+export default ComboboxList;

package/dist/core/components/organisms/combobox/ComboboxOption.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { BaseProps } from "../../../utils/types";
+import { OptionType } from "../../../common.type";
+declare type ItemTagType = 'li' | 'div';
+export interface ComboboxOptionProps extends BaseProps {
+    children: React.ReactNode;
+    option: OptionType;
+    tagName: ItemTagType;
+    selected?: boolean;
+    onClick?: (option: OptionType) => void;
+}
+export declare const ComboboxOption: {
+    (props: ComboboxOptionProps): JSX.Element;
+    defaultProps: {
+        tagName: string;
+    };
+};
+export default ComboboxOption;

package/dist/core/components/organisms/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Combobox";
+export * from "./Combobox";

package/dist/core/components/organisms/combobox/trigger/ChipInputBox.d.ts

@@ -0,0 +1,3 @@
+import { MultiSelectTriggerProps } from "./MultiselectTrigger";
+export declare const ChipInputBox: (props: MultiSelectTriggerProps) => JSX.Element;
+export default ChipInputBox;