@paygreen/pgui 2.10.0 → 2.10.1

package/dist/esm/types/components/Card/index.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
+import { CardProps } from '@chakra-ui/react';
 export declare const Card: (props: CardProps) => React.JSX.Element;

package/dist/esm/types/components/ConfirmMenuItem/index.d.ts

@@ -1,4 +1,13 @@
-import { HTMLChakraProps } from '@chakra-ui/react';
+import React from 'react';
+import { HTMLChakraProps, MenuItemProps } from '@chakra-ui/react';
 export type StyledMenuItemProps = HTMLChakraProps<'button'>;
-export declare const MenuItem: any;
-export declare const ConfirmMenuItem: any;
+export declare const MenuItem: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"button", MenuItemProps>;
+type ConfirmMenuItemProps = MenuItemProps & {
+    confirmDelay?: number;
+    confirmColorScheme?: string;
+    confirmContent?: React.ReactNode;
+    confirmText?: React.ReactNode;
+    confirmIcon?: React.FC<React.PropsWithChildren<unknown>>;
+};
+export declare const ConfirmMenuItem: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"button", ConfirmMenuItemProps>;
+export {};

package/dist/esm/types/components/DayPicker/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
 export type DayPickerProps = {
-    defaultValue?: string | Date;
+    defaultValue?: string | Date | undefined;
     onChange: (e: string | undefined) => void;
     locale?: string;
     customFormat?: string;

package/dist/esm/types/components/InputDayPicker/index.d.ts

@@ -1,6 +1,6 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import { InputProps } from '@chakra-ui/react';
-export type InputDayPickerProps = {
+export type InputDayPickerProps = Omit<InputProps, 'minDate' | 'maxDate' | 'defaultValue'> & {
     name: string;
     placeholder?: string;
     onChange: Dispatch<SetStateAction<string | undefined | null>>;
@@ -13,5 +13,5 @@ export type InputDayPickerProps = {
     maxDate?: Date | null | undefined;
     calendarFunc?: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
     isDisabled?: boolean;
-} & InputProps;
+};
 export declare const InputDayPicker: ({ name, placeholder, value, onChange, locale, variant, format, withTime, minDate, maxDate, calendarFunc, isDisabled, ...inputProps }: InputDayPickerProps) => React.JSX.Element;

package/dist/esm/types/components/SearchInput/index.d.ts

@@ -1 +1,12 @@
-export declare const SearchInput: any;
+import { InputProps } from '@chakra-ui/react';
+type CustomProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?(value?: string): void;
+    delay?: number;
+    clearLabel?: string;
+    inputProps?: object;
+};
+type SearchInputProps = Overwrite<InputProps, CustomProps>;
+export declare const SearchInput: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"input", SearchInputProps>;
+export {};

package/dist/esm/types/components/Select/index.d.ts

@@ -25,26 +25,28 @@ export declare const Select: <Option, IsMulti extends boolean = false, Group ext
     defaultOptions?: unknown | boolean;
     debounceDelay?: number | undefined;
     variant?: "outline" | "filled" | undefined;
-} & Omit<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "aria-label" | "form" | "value" | "onChange" | "inputValue" | "theme" | "className" | "id" | "name" | "autoFocus" | "onFocus" | "onBlur" | "onKeyDown" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "required"> & {
-    isDisabled?: boolean | undefined;
+} & Omit<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "aria-label" | "form" | "name" | "value" | "autoFocus" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "inputValue" | "theme" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
     placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, Group>> | undefined;
+    unstyled?: boolean | undefined;
     options?: import("react-select").OptionsOrGroups<Option, Group> | undefined;
     pageSize?: number | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
     classNames?: import("react-select").ClassNamesConfig<Option, IsMulti, Group> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, Group>> | undefined;
     controlShouldRenderValue?: boolean | undefined;
     escapeClearsValue?: boolean | undefined;
     filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
     formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
     getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
     getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
-    isLoading?: boolean | undefined;
     isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
     isMulti?: IsMulti | undefined;
     isRtl?: boolean | undefined;
@@ -68,29 +70,29 @@ export declare const Select: <Option, IsMulti extends boolean = false, Group ext
         count: number;
     }) => string) | undefined;
     styles?: import("react-select").StylesConfig<Option, IsMulti, Group> | undefined;
-    tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-    unstyled?: boolean | undefined;
-} & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "aria-label" | "form" | "value" | "onChange" | "inputValue" | "theme" | "className" | "id" | "name" | "autoFocus" | "onFocus" | "onBlur" | "onKeyDown" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "required"> & {
-    isDisabled?: boolean | undefined;
+} & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<Option, IsMulti, Group>, "aria-label" | "form" | "name" | "value" | "autoFocus" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "inputValue" | "theme" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
     placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, Group>> | undefined;
+    unstyled?: boolean | undefined;
     options?: import("react-select").OptionsOrGroups<Option, Group> | undefined;
     pageSize?: number | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
     classNames?: import("react-select").ClassNamesConfig<Option, IsMulti, Group> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, Group>> | undefined;
     controlShouldRenderValue?: boolean | undefined;
     escapeClearsValue?: boolean | undefined;
     filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
     formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
     getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
     getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
-    isLoading?: boolean | undefined;
     isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
     isMulti?: IsMulti | undefined;
     isRtl?: boolean | undefined;
@@ -114,7 +116,5 @@ export declare const Select: <Option, IsMulti extends boolean = false, Group ext
         count: number;
     }) => string) | undefined;
     styles?: import("react-select").StylesConfig<Option, IsMulti, Group> | undefined;
-    tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-    unstyled?: boolean | undefined;
 } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & Omit<BoxProps, "defaultValue"> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;

package/dist/esm/types/components/Textarea/index.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { TextareaProps } from '@chakra-ui/react';
-export declare const Textarea: ({ onFocus, onBlur, onMouseEnter, onMouseLeave, variant, borderRadius, ...rest }: any) => React.JSX.Element;
+export declare const Textarea: ({ onFocus, onBlur, onMouseEnter, onMouseLeave, variant, borderRadius, ...rest }: TextareaProps & {
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+    onMouseLeave?: (() => void) | undefined;
+}) => React.JSX.Element;

package/dist/esm/types/layout/BottomBar/index.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
+import { FlexProps } from '@chakra-ui/react';
 export declare const BottomBar: (props: FlexProps) => React.JSX.Element;

package/dist/esm/types/layout/LayoutContainer/index.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
+import { FlexProps } from '@chakra-ui/react';
 export declare const LayoutContainer: (props: FlexProps) => React.JSX.Element;

package/dist/esm/types/layout/TopBar/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactComponentElement } from 'react';
-import { FlexProps } from '@chakra-ui/react';
+import { FlexProps, StackProps } from '@chakra-ui/react';
 export type TopBarBackActionProps = {
     backAction?: () => void;
     rightInformation?: ReactComponentElement<any>;

package/dist/esm/types/theme/theme.d.ts

@@ -1 +1 @@
-export declare const theme: any;
+export declare const theme: Record<string, any>;

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import React, { FC, PropsWithChildren, ReactNode, Dispatch, SetStateAction, ReactComponentElement } from 'react';
-import { IconButtonProps, HTMLChakraProps, FlexProps as FlexProps$1, AccordionProps, FormControlProps, InputProps, ModalProps, DrawerProps, StackProps as StackProps$1, BoxProps, DrawerContentProps, ButtonProps, TextProps } from '@chakra-ui/react';
+import { IconButtonProps, CardProps, HTMLChakraProps, MenuItemProps, FlexProps, AccordionProps, FormControlProps, InputProps, ModalProps, DrawerProps, StackProps, BoxProps, DrawerContentProps, ButtonProps, TextProps } from '@chakra-ui/react';
+import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
 import * as react_select_dist_declarations_src_filters from 'react-select/dist/declarations/src/filters';
-import * as react_select_dist_declarations_src_components from 'react-select/dist/declarations/src/components';
 import * as react_select from 'react-select';
 import { GroupBase, Props } from 'react-select';
+import * as react_select_dist_declarations_src_components from 'react-select/dist/declarations/src/components';
 import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
 
 type ActionsButtonProps = Omit<IconButtonProps, 'aria-label'> & {
@@ -16,8 +17,15 @@ declare const ActionsButton: FC<PropsWithChildren<ActionsButtonProps>>;
 declare const Card: (props: CardProps) => React.JSX.Element;
 
 type StyledMenuItemProps = HTMLChakraProps<'button'>;
-declare const MenuItem: any;
-declare const ConfirmMenuItem: any;
+declare const MenuItem: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", MenuItemProps>;
+type ConfirmMenuItemProps = MenuItemProps & {
+    confirmDelay?: number;
+    confirmColorScheme?: string;
+    confirmContent?: React.ReactNode;
+    confirmText?: React.ReactNode;
+    confirmIcon?: React.FC<React.PropsWithChildren<unknown>>;
+};
+declare const ConfirmMenuItem: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", ConfirmMenuItemProps>;
 
 type DataListColumns = Record<string, DataListCellProps>;
 type DataListContextValue = {
@@ -27,7 +35,7 @@ type DataListContextValue = {
 };
 declare const DataListContext: React.Context<DataListContextValue>;
 declare const DataListHeaderContext: React.Context<boolean>;
-type DataListCellProps = FlexProps$1 & {
+type DataListCellProps = FlexProps & {
     colName?: string;
     colWidth?: string | number | Record<string, string | number>;
     isVisible?: boolean | boolean[] | Record<string, boolean>;
@@ -45,7 +53,7 @@ declare const DataListAccordionIcon: ({ ...rest }: {
 declare const DataListAccordionPanel: ({ ...rest }: {
     [x: string]: any;
 }) => React.JSX.Element;
-type DataListRowProps = FlexProps$1 & {
+type DataListRowProps = FlexProps & {
     isVisible?: boolean | boolean[] | Record<string, boolean>;
     isDisabled?: boolean;
 };
@@ -60,7 +68,7 @@ type DataListProps = AccordionProps & {
 declare const DataList: FC<PropsWithChildren<DataListProps>>;
 
 type DayPickerProps = {
-    defaultValue?: string | Date;
+    defaultValue?: string | Date | undefined;
     onChange: (e: string | undefined) => void;
     locale?: string;
     customFormat?: string;
@@ -83,7 +91,7 @@ type FormGroupProps = Omit<FormControlProps, 'onChange' | 'defaultValue' | 'labe
 };
 declare const FormGroup: ({ children, errorMessage, helper, id, isRequired, label, showError, ...props }: FormGroupProps) => React.JSX.Element;
 
-type InputDayPickerProps = {
+type InputDayPickerProps = Omit<InputProps, 'minDate' | 'maxDate' | 'defaultValue'> & {
     name: string;
     placeholder?: string;
     onChange: Dispatch<SetStateAction<string | undefined | null>>;
@@ -96,7 +104,7 @@ type InputDayPickerProps = {
     maxDate?: Date | null | undefined;
     calendarFunc?: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
     isDisabled?: boolean;
-} & InputProps;
+};
 declare const InputDayPicker: ({ name, placeholder, value, onChange, locale, variant, format, withTime, minDate, maxDate, calendarFunc, isDisabled, ...inputProps }: InputDayPickerProps) => React.JSX.Element;
 
 var css_248z = "/* CSS variables. */\r\n:root {\r\n\t--PhoneInput-color--focus: #03b2cb;\r\n\t--PhoneInputInternationalIconPhone-opacity: 0.8;\r\n\t--PhoneInputInternationalIconGlobe-opacity: 0.65;\r\n\t--PhoneInputCountrySelect-marginRight: 0.35em;\r\n\t--PhoneInputCountrySelectArrow-width: 0.3em;\r\n\t--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\r\n\t--PhoneInputCountrySelectArrow-borderWidth: 1px;\r\n\t--PhoneInputCountrySelectArrow-opacity: 0.45;\r\n\t--PhoneInputCountrySelectArrow-color: currentColor;\r\n\t--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountrySelectArrow-transform: rotate(45deg);\r\n\t--PhoneInputCountryFlag-aspectRatio: 1.5;\r\n\t--PhoneInputCountryFlag-height: 1em;\r\n\t--PhoneInputCountryFlag-borderWidth: 1px;\r\n\t--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\r\n\t--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\r\n}\r\n\r\n.PhoneInput {\r\n\t/* This is done to stretch the contents of this component. */\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.PhoneInputInput {\r\n\t/* The phone number input stretches to fill all empty space */\r\n\tflex: 1;\r\n\t/* The phone number input should shrink\r\n\t   to make room for the extension input */\r\n\tmin-width: 0;\r\n}\r\n\r\n.PhoneInputCountryIcon {\r\n\twidth: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\r\n\theight: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--square {\r\n\twidth: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--border {\r\n\t/* Removed `background-color` because when an `<img/>` was still loading\r\n\t   it would show a dark gray rectangle. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t   and sometime there can be seen white pixels of the background at top and bottom. */\r\n\tbackground-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\r\n\t/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t   and sometime there can be seen white pixels of the background at top and bottom,\r\n\t   so an additional \"inset\" border is added. */\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\r\n}\r\n\r\n.PhoneInputCountryIconImg {\r\n\t/* Fixes weird vertical space above the flag icon. */\r\n\t/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */\r\n\tdisplay: block;\r\n\t/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.\r\n\t   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.PhoneInputInternationalIconPhone {\r\n\topacity: var(--PhoneInputInternationalIconPhone-opacity);\r\n}\r\n\r\n.PhoneInputInternationalIconGlobe {\r\n\topacity: var(--PhoneInputInternationalIconGlobe-opacity);\r\n}\r\n\r\n/* Styling native country `<select/>`. */\r\n\r\n.PhoneInputCountry {\r\n\tposition: relative;\r\n\talign-self: stretch;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tmargin-right: var(--PhoneInputCountrySelect-marginRight);\r\n}\r\n\r\n.PhoneInputCountrySelect {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tz-index: 1;\r\n\tborder: 0;\r\n\topacity: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.PhoneInputCountrySelect[disabled],\r\n.PhoneInputCountrySelect[readonly] {\r\n\tcursor: default;\r\n}\r\n\r\n.PhoneInputCountrySelectArrow {\r\n\tdisplay: block;\r\n\tcontent: '';\r\n\twidth: var(--PhoneInputCountrySelectArrow-width);\r\n\theight: var(--PhoneInputCountrySelectArrow-width);\r\n\tmargin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\r\n\tborder-style: solid;\r\n\tborder-color: var(--PhoneInputCountrySelectArrow-color);\r\n\tborder-top-width: 0;\r\n\tborder-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\tborder-left-width: 0;\r\n\tborder-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\ttransform: var(--PhoneInputCountrySelectArrow-transform);\r\n\topacity: var(--PhoneInputCountrySelectArrow-opacity);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}";
@@ -166,7 +174,7 @@ declare const PaginationButtonNextPage: FC<PropsWithChildren<Omit<IconButtonProp
 declare const PaginationInfo: ({ ...rest }: {
     [x: string]: any;
 }) => React.JSX.Element;
-type PaginationProps = StackProps$1 & {
+type PaginationProps = StackProps & {
     setPage: (page: number) => void;
     page?: number;
     pageSize?: number;
@@ -175,7 +183,16 @@ type PaginationProps = StackProps$1 & {
 };
 declare const Pagination: ({ setPage, page, pageSize, totalItems, isLoadingPage, children, ...rest }: PaginationProps) => React.JSX.Element;
 
-declare const SearchInput: any;
+type CustomProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?(value?: string): void;
+    delay?: number;
+    clearLabel?: string;
+    inputProps?: object;
+};
+type SearchInputProps = Overwrite<InputProps, CustomProps>;
+declare const SearchInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", SearchInputProps>;
 
 declare module 'react' {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
@@ -201,26 +218,28 @@ declare const Select: <Option, IsMulti extends boolean = false, Group extends Gr
     defaultOptions?: unknown | boolean;
     debounceDelay?: number | undefined;
     variant?: "outline" | "filled" | undefined;
-} & Omit<Pick<react_select_dist_declarations_src_Select.Props<Option, IsMulti, Group>, "aria-label" | "form" | "value" | "onChange" | "inputValue" | "theme" | "className" | "id" | "name" | "autoFocus" | "onFocus" | "onBlur" | "onKeyDown" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "required"> & {
-    isDisabled?: boolean | undefined;
+} & Omit<Pick<react_select_dist_declarations_src_Select.Props<Option, IsMulti, Group>, "aria-label" | "form" | "name" | "value" | "autoFocus" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "inputValue" | "theme" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
     placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<react_select_dist_declarations_src_components.SelectComponents<Option, IsMulti, Group>> | undefined;
+    unstyled?: boolean | undefined;
     options?: react_select.OptionsOrGroups<Option, Group> | undefined;
     pageSize?: number | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
     classNames?: react_select.ClassNamesConfig<Option, IsMulti, Group> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-    components?: Partial<react_select_dist_declarations_src_components.SelectComponents<Option, IsMulti, Group>> | undefined;
     controlShouldRenderValue?: boolean | undefined;
     escapeClearsValue?: boolean | undefined;
     filterOption?: ((option: react_select_dist_declarations_src_filters.FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
     formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
     getOptionLabel?: react_select.GetOptionLabel<Option> | undefined;
     getOptionValue?: react_select.GetOptionValue<Option> | undefined;
-    isLoading?: boolean | undefined;
     isOptionDisabled?: ((option: Option, selectValue: react_select.Options<Option>) => boolean) | undefined;
     isMulti?: IsMulti | undefined;
     isRtl?: boolean | undefined;
@@ -244,29 +263,29 @@ declare const Select: <Option, IsMulti extends boolean = false, Group extends Gr
         count: number;
     }) => string) | undefined;
     styles?: react_select.StylesConfig<Option, IsMulti, Group> | undefined;
-    tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-    unstyled?: boolean | undefined;
-} & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<Option, IsMulti, Group>, "aria-label" | "form" | "value" | "onChange" | "inputValue" | "theme" | "className" | "id" | "name" | "autoFocus" | "onFocus" | "onBlur" | "onKeyDown" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "required"> & {
-    isDisabled?: boolean | undefined;
+} & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<Option, IsMulti, Group>, "aria-label" | "form" | "name" | "value" | "autoFocus" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "inputValue" | "theme" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
     placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<react_select_dist_declarations_src_components.SelectComponents<Option, IsMulti, Group>> | undefined;
+    unstyled?: boolean | undefined;
     options?: react_select.OptionsOrGroups<Option, Group> | undefined;
     pageSize?: number | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
     classNames?: react_select.ClassNamesConfig<Option, IsMulti, Group> | undefined;
     closeMenuOnSelect?: boolean | undefined;
     closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-    components?: Partial<react_select_dist_declarations_src_components.SelectComponents<Option, IsMulti, Group>> | undefined;
     controlShouldRenderValue?: boolean | undefined;
     escapeClearsValue?: boolean | undefined;
     filterOption?: ((option: react_select_dist_declarations_src_filters.FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
     formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
     getOptionLabel?: react_select.GetOptionLabel<Option> | undefined;
     getOptionValue?: react_select.GetOptionValue<Option> | undefined;
-    isLoading?: boolean | undefined;
     isOptionDisabled?: ((option: Option, selectValue: react_select.Options<Option>) => boolean) | undefined;
     isMulti?: IsMulti | undefined;
     isRtl?: boolean | undefined;
@@ -290,9 +309,7 @@ declare const Select: <Option, IsMulti extends boolean = false, Group extends Gr
         count: number;
     }) => string) | undefined;
     styles?: react_select.StylesConfig<Option, IsMulti, Group> | undefined;
-    tabIndex?: number | undefined;
     tabSelectsValue?: boolean | undefined;
-    unstyled?: boolean | undefined;
 } & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<Option> & Omit<BoxProps, "defaultValue"> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
 
 declare const BottomBar: (props: FlexProps) => React.JSX.Element;
@@ -302,31 +319,31 @@ declare const LayoutContainer: (props: FlexProps) => React.JSX.Element;
 type SideNavProps = {
     isMobileMenuOpen: boolean;
     onMobileMenuClose: () => void;
-} & FlexProps$1 & DrawerContentProps;
+} & FlexProps & DrawerContentProps;
 type SideNavMenuItemProps = {
     isActive?: boolean;
 } & ButtonProps;
 type SideNavMenuProps = {
     textProps?: TextProps;
-} & StackProps$1;
+} & StackProps;
 declare const SideNav: ({ isMobileMenuOpen, onMobileMenuClose, children, ...props }: SideNavProps) => React.JSX.Element;
-declare const SideNavContainer: (props: StackProps$1) => React.JSX.Element;
-declare const SideNavHeader: ({ children, ...rest }: FlexProps$1) => React.JSX.Element;
-declare const SideNavBody: ({ children, ...rest }: StackProps$1) => React.JSX.Element;
-declare const SideNavFooter: ({ children, ...rest }: FlexProps$1) => React.JSX.Element;
+declare const SideNavContainer: (props: StackProps) => React.JSX.Element;
+declare const SideNavHeader: ({ children, ...rest }: FlexProps) => React.JSX.Element;
+declare const SideNavBody: ({ children, ...rest }: StackProps) => React.JSX.Element;
+declare const SideNavFooter: ({ children, ...rest }: FlexProps) => React.JSX.Element;
 declare const SideNavMenu: ({ title, children, textProps, ...rest }: SideNavMenuProps) => React.JSX.Element;
 declare const SideNavMenuItem: ({ isActive, children, ...rest }: SideNavMenuItemProps) => React.JSX.Element;
 
 type TopBarBackActionProps = {
     backAction?: () => void;
     rightInformation?: ReactComponentElement<any>;
-} & FlexProps$1;
+} & FlexProps;
 declare const TopBar: (props: StackProps) => React.JSX.Element;
-declare const TopBarFirstElement: (props: FlexProps$1) => React.JSX.Element;
+declare const TopBarFirstElement: (props: FlexProps) => React.JSX.Element;
 declare const TopBarLastElement: (props: StackProps) => React.JSX.Element;
 declare const TopBarBackAction: ({ backAction, title, rightInformation, ...rest }: TopBarBackActionProps) => React.JSX.Element;
 
-declare const theme: any;
+declare const theme: Record<string, any>;
 
 declare const dateFormat = "dd/MM/yyyy";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paygreen/pgui",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "PGUI is the design system coming from Paygreen.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -49,6 +49,7 @@
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@chakra-ui/react": "^2.3.5",
     "@chakra-ui/theme-tools": "^2.0.14",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",