@taikai/rocket-kit 3.0.1 → 3.0.3

package/dist/atoms/avatar-image/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 export interface AvatarProps {
     style?: CSSProperties;
     className?: string;
@@ -9,5 +9,5 @@ export interface AvatarProps {
     boringType?: 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus';
     square?: boolean;
 }
-declare const AvatarImage: (props: AvatarProps) => React.JSX.Element;
+declare const AvatarImage: (props: AvatarProps) => JSX.Element;
 export default AvatarImage;

package/dist/atoms/button/index.d.ts

@@ -19,5 +19,5 @@ export interface ButtonProps {
     eventId?: string;
     disabled?: boolean;
 }
-declare const Button: (props: ButtonProps) => React.JSX.Element;
+declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/dist/atoms/button-dropdown/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { ButtonColor, ButtonVariant } from '../button/types';
 import { ActionMenu } from './types';
 export interface ActionsMenuInterface<T> {
@@ -19,5 +19,5 @@ export interface ActionsMenuInterface<T> {
     startsOpen?: boolean;
     disabled?: boolean;
 }
-declare const ButtonDropdown: <T>(props: ActionsMenuInterface<T>) => React.JSX.Element;
+declare const ButtonDropdown: <T>(props: ActionsMenuInterface<T>) => JSX.Element;
 export default ButtonDropdown;

package/dist/atoms/button-link/index.d.ts

@@ -19,5 +19,5 @@ export interface ButtonLinkProps {
     ariaLabel?: string;
     ariaHidden?: boolean;
 }
-declare const ButtonLink: (props: ButtonLinkProps) => React.JSX.Element;
+declare const ButtonLink: (props: ButtonLinkProps) => JSX.Element;
 export default ButtonLink;

package/dist/atoms/checkbox/index.d.ts

@@ -11,5 +11,5 @@ interface Props {
     dataTestId?: string;
     required?: boolean;
 }
-declare const Checkbox: ({ label, value, checked, onChange, error, disabled, className, style, dataTestId, required, }: Props) => React.JSX.Element;
+declare const Checkbox: ({ label, value, checked, onChange, error, disabled, className, style, dataTestId, required, }: Props) => JSX.Element;
 export default Checkbox;

package/dist/atoms/checkbox-button/index.d.ts

@@ -10,5 +10,5 @@ export interface CheckboxButtonProps {
     dataTestId?: string;
     required?: boolean;
 }
-declare const CheckboxButton: (props: CheckboxButtonProps) => React.JSX.Element;
+declare const CheckboxButton: (props: CheckboxButtonProps) => JSX.Element;
 export default CheckboxButton;

package/dist/atoms/error-field/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { ErrorFieldColor } from './types';
 interface ErrorFieldProps {
     color?: ErrorFieldColor;
@@ -6,5 +6,5 @@ interface ErrorFieldProps {
     className?: string;
     style?: CSSProperties;
 }
-declare const ErrorField: (props: ErrorFieldProps) => React.JSX.Element;
+declare const ErrorField: (props: ErrorFieldProps) => JSX.Element;
 export default ErrorField;

package/dist/atoms/file-picker/index.d.ts

@@ -12,5 +12,5 @@ export interface FilePickerProps {
     buttonText?: string;
     disabled?: boolean;
 }
-declare const FilePicker: (props: FilePickerProps) => React.JSX.Element;
+declare const FilePicker: (props: FilePickerProps) => JSX.Element;
 export default FilePicker;

package/dist/atoms/icon/index.d.ts

@@ -1,9 +1,9 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 export interface IconProps {
     fill?: string;
     icon: string;
     className?: string;
     style?: CSSProperties;
 }
-declare const Icon: (props: IconProps) => React.JSX.Element;
+declare const Icon: (props: IconProps) => JSX.Element;
 export default Icon;

package/dist/atoms/label/index.d.ts

@@ -5,5 +5,5 @@ export interface LabelProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const Label: (props: LabelProps) => React.JSX.Element;
+declare const Label: (props: LabelProps) => JSX.Element;
 export default Label;

package/dist/atoms/progress-bar/index.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 export interface ProgressBarProps {
     progress: number;
     value?: string;
 }
-declare const ProgressBar: (props: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: (props: ProgressBarProps) => JSX.Element;
 export default ProgressBar;

package/dist/atoms/select/index.d.ts

@@ -12,5 +12,5 @@ export interface SelectProps {
     className?: string;
     style?: CSSProperties;
 }
-declare const Select: (props: SelectProps) => React.JSX.Element;
+declare const Select: (props: SelectProps) => JSX.Element;
 export default Select;

package/dist/atoms/select-interactive/components/index.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import { TCustomOptions, TSelectInteractiveOption } from '../types';
 export interface GroupBase {
     options: readonly TSelectInteractiveOption[];
     label?: string;
 }
-export declare const FormatGroupLabel: (props: GroupBase) => React.JSX.Element;
-export declare const CustomSelectOption: (props: TCustomOptions, commonProps: any) => React.JSX.Element;
-export declare const CustomSelectValue: (props: TCustomOptions) => React.JSX.Element;
+export declare const FormatGroupLabel: (props: GroupBase) => JSX.Element;
+export declare const CustomSelectOption: (props: TCustomOptions, commonProps: any) => JSX.Element;
+export declare const CustomSelectValue: (props: TCustomOptions) => JSX.Element;

package/dist/atoms/select-interactive/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SelectInteractiveProps, TSelectInteractiveOption } from './types';
-declare const SelectInteractive: ({ name, multi, search, placeholder, options, value, clear, error, disabled, formatGroupLabel, onChange, onInputChange, ...rest }: SelectInteractiveProps<TSelectInteractiveOption>) => React.JSX.Element;
+declare const SelectInteractive: ({ name, multi, search, placeholder, options, value, clear, error, disabled, formatGroupLabel, onChange, onInputChange, ...rest }: SelectInteractiveProps<TSelectInteractiveOption>) => JSX.Element;
 export default SelectInteractive;

package/dist/atoms/slideshow/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface SlideshowProps {
     showArrows?: boolean;
     slidesNumber: number;
@@ -9,5 +8,5 @@ export interface SlideshowProps {
     slideSelected?: number;
     children: any;
 }
-declare const Slideshow: (props: SlideshowProps) => React.JSX.Element;
+declare const Slideshow: (props: SlideshowProps) => JSX.Element;
 export default Slideshow;

package/dist/atoms/spinner/index.d.ts

@@ -1,9 +1,9 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 interface SpinnerProps {
     fill?: string;
     size?: string;
     className?: string;
     style?: CSSProperties;
 }
-declare const Spinner: (props: SpinnerProps) => React.JSX.Element;
+declare const Spinner: (props: SpinnerProps) => JSX.Element;
 export default Spinner;

package/dist/atoms/tag/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { TagVariant, TagColor } from './types';
 export interface TagProps {
     variant?: TagVariant;
@@ -8,5 +8,5 @@ export interface TagProps {
     className?: string;
     style?: CSSProperties;
 }
-declare const Tag: (props: TagProps) => React.JSX.Element;
+declare const Tag: (props: TagProps) => JSX.Element;
 export default Tag;

package/dist/atoms/tag-number/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { TagColor } from '../tag/types';
 export interface TagNumberProps {
     className?: string;
@@ -8,5 +8,5 @@ export interface TagNumberProps {
     label: string;
     value: number | string;
 }
-declare const TagNumber: (props: TagNumberProps) => React.JSX.Element;
+declare const TagNumber: (props: TagNumberProps) => JSX.Element;
 export default TagNumber;

package/dist/atoms/text-area/index.d.ts

@@ -16,5 +16,5 @@ export interface TextAreaProps {
     required?: boolean;
     dataTestId?: string;
 }
-declare const TextArea: (props: TextAreaProps) => React.JSX.Element;
+declare const TextArea: (props: TextAreaProps) => JSX.Element;
 export default TextArea;

package/dist/atoms/text-field/index.d.ts

@@ -18,5 +18,5 @@ interface TextFieldProps {
     pattern?: string;
     required?: boolean;
 }
-declare const TextField: (props: TextFieldProps) => React.JSX.Element;
+declare const TextField: (props: TextFieldProps) => JSX.Element;
 export default TextField;

package/dist/atoms/text-field-appendix/index.d.ts

@@ -18,5 +18,5 @@ export interface TextFieldAppendixProps {
     pattern?: string;
     required?: boolean;
 }
-declare const TextFieldAppendix: (props: TextFieldAppendixProps) => React.JSX.Element;
+declare const TextFieldAppendix: (props: TextFieldAppendixProps) => JSX.Element;
 export default TextFieldAppendix;

package/dist/atoms/toggle/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ToggleProps } from './types';
-declare const Toggle: ({ ariaLabelOn, ariaLabelOff, labelLeft, labelRight, checked, disabled, isLabelVisible, onClick, ...rest }: ToggleProps) => React.JSX.Element;
+declare const Toggle: ({ ariaLabelOn, ariaLabelOff, labelLeft, labelRight, checked, disabled, isLabelVisible, onClick, ...rest }: ToggleProps) => JSX.Element;
 export default Toggle;

package/dist/atoms/truncate-line/index.d.ts

@@ -1,9 +1,9 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 export interface TruncateLineProps {
     value: string;
     className?: string;
     style?: CSSProperties;
     dataTestId?: string;
 }
-declare const TruncateLine: (props: TruncateLineProps) => React.JSX.Element;
+declare const TruncateLine: (props: TruncateLineProps) => JSX.Element;
 export default TruncateLine;

package/dist/atoms/video-player/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface VideoPlayerProps {
     video: any;
     playing?: boolean;
@@ -7,6 +6,8 @@ export interface VideoPlayerProps {
     width?: string;
     height?: string;
     onEnded?: any;
+    onReady?: any;
+    onError?: any;
 }
-declare const VideoPlayer: (props: VideoPlayerProps) => React.JSX.Element;
+declare const VideoPlayer: (props: VideoPlayerProps) => JSX.Element;
 export default VideoPlayer;

package/dist/ions/icon-empty-data.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const IconEmptyData: () => React.JSX.Element;
+declare const IconEmptyData: () => JSX.Element;
 export default IconEmptyData;

package/dist/ions/icon-login-only.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const IconLoginOnly: () => React.JSX.Element;
+declare const IconLoginOnly: () => JSX.Element;
 export default IconLoginOnly;

package/dist/molecules/actions-menu/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ActionMenu } from './types';
 interface ActionsMenuListInterface<T> {
     actions: ActionMenu<T>[];
@@ -14,6 +13,6 @@ interface ActionsMenuInterface<T> {
     dataTestId?: string;
     startsOpen?: boolean;
 }
-export declare const ActionMenuList: <T>(props: ActionsMenuListInterface<T>) => React.JSX.Element;
-declare const ActionsMenu: <T>(props: ActionsMenuInterface<T>) => React.JSX.Element;
+export declare const ActionMenuList: <T>(props: ActionsMenuListInterface<T>) => JSX.Element;
+declare const ActionsMenu: <T>(props: ActionsMenuInterface<T>) => JSX.Element;
 export default ActionsMenu;

package/dist/molecules/card-value/index.d.ts

@@ -9,5 +9,5 @@ export interface CardValueProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const CardValue: (props: CardValueProps) => React.JSX.Element;
+declare const CardValue: (props: CardValueProps) => JSX.Element;
 export default CardValue;

package/dist/molecules/checkbox-group/index.d.ts

@@ -19,5 +19,5 @@ export interface CheckboxGroupProps {
     onChange?: () => {};
     disabled?: boolean;
 }
-declare const CheckboxGroup: (props: CheckboxGroupProps) => React.JSX.Element;
+declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
 export default CheckboxGroup;

package/dist/molecules/data-warning/index.d.ts

@@ -3,5 +3,5 @@ export interface DataWarningProps {
     type?: 'login' | 'data';
     children: React.ReactNode;
 }
-declare const DataWarning: (props: DataWarningProps) => React.JSX.Element;
+declare const DataWarning: (props: DataWarningProps) => JSX.Element;
 export default DataWarning;

package/dist/molecules/empty-table/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 export interface EmptyTableProps {
     border?: boolean;
     value: string;
     tableHead: string[];
 }
-declare const EmptyTable: (props: EmptyTableProps) => React.JSX.Element;
+declare const EmptyTable: (props: EmptyTableProps) => JSX.Element;
 export default EmptyTable;

package/dist/molecules/error/index.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 export interface ErrorProps {
     variant?: 'default' | 'minimal';
     value: string;
 }
-declare const Error: (props: ErrorProps) => React.JSX.Element;
+declare const Error: (props: ErrorProps) => JSX.Element;
 export default Error;

package/dist/molecules/field-with-button/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TextFieldType } from '../../atoms/text-field/types';
 export interface FieldWidthButtonProps {
     label?: string;
@@ -6,11 +5,13 @@ export interface FieldWidthButtonProps {
     name?: string;
     placeholder?: string;
     value?: string | number;
+    disabled?: boolean;
     dataTestId?: string;
     buttonIcon: string;
     buttonValue?: string;
-    buttonAction?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onChange?: (value: string | number | null) => void;
+    buttonAction?: (value: string | number | null) => void | Promise<void>;
     buttonDisabled?: boolean;
 }
-declare const FieldWidthButton: (props: FieldWidthButtonProps) => React.JSX.Element;
+declare const FieldWidthButton: (props: FieldWidthButtonProps) => JSX.Element;
 export default FieldWidthButton;

package/dist/molecules/form-group/index.d.ts

@@ -5,5 +5,5 @@ export interface FormGroupProps {
     error?: boolean;
     children: React.ReactNode;
 }
-declare const FormGroup: (props: FormGroupProps) => React.JSX.Element;
+declare const FormGroup: (props: FormGroupProps) => JSX.Element;
 export default FormGroup;

package/dist/molecules/modal-footer/index.d.ts

@@ -7,5 +7,5 @@ export interface ModalFooterProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const ModalFooter: (props: ModalFooterProps) => React.JSX.Element;
+declare const ModalFooter: (props: ModalFooterProps) => JSX.Element;
 export default ModalFooter;

package/dist/molecules/note-card/index.d.ts

@@ -8,5 +8,5 @@ interface NoteCardProps {
     className?: string;
     style?: CSSProperties;
 }
-declare const NoteCard: (props: NoteCardProps) => React.JSX.Element;
+declare const NoteCard: (props: NoteCardProps) => JSX.Element;
 export default NoteCard;

package/dist/molecules/number-input-spinner/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface NumberInputSpinnerProps {
     decreaseAriaLabel?: string;
     increaseAriaLabel?: string;
@@ -9,5 +8,5 @@ export interface NumberInputSpinnerProps {
     onChange?: (value: number) => void;
     disabled?: boolean;
 }
-declare const NumberInputSpinner: (props: NumberInputSpinnerProps) => React.JSX.Element;
+declare const NumberInputSpinner: (props: NumberInputSpinnerProps) => JSX.Element;
 export default NumberInputSpinner;

package/dist/molecules/pagination-control/index.d.ts

@@ -7,5 +7,5 @@ export interface PageControlProps {
     onPageChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     ariaLabelBuilder?: any;
 }
-declare const PaginationControl: (props: PageControlProps) => React.JSX.Element;
+declare const PaginationControl: (props: PageControlProps) => JSX.Element;
 export default PaginationControl;

package/dist/molecules/radio-group/index.d.ts

@@ -16,5 +16,5 @@ export interface RadioGroupProps {
     disabled?: boolean;
     dataTestId?: string;
 }
-declare const RadioGroup: (props: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: (props: RadioGroupProps) => JSX.Element;
 export default RadioGroup;

package/dist/molecules/table/index.d.ts

@@ -31,5 +31,5 @@ export interface TableProps<CellDataType> {
 export interface CellBaseType {
     id: string;
 }
-declare const Table: <CellData extends CellBaseType>(props: TableProps<CellData>) => React.JSX.Element;
+declare const Table: <CellData extends CellBaseType>(props: TableProps<CellData>) => JSX.Element;
 export default Table;

package/dist/molecules/table-dnd/index.d.ts

@@ -29,5 +29,5 @@ export interface TableProps<CellDataType> {
 export interface CellBaseType {
     id: string;
 }
-declare const TableDnD: <CellData extends CellBaseType>(props: TableProps<CellData>) => React.JSX.Element;
+declare const TableDnD: <CellData extends CellBaseType>(props: TableProps<CellData>) => JSX.Element;
 export default TableDnD;

package/dist/molecules/wizard-steps/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 export declare type Step = {
     active: boolean;
     value: string;
@@ -10,5 +10,5 @@ export interface WizardStepsProps {
     steps: Step[];
     dataTestId?: string;
 }
-declare const WizardSteps: (props: WizardStepsProps) => React.JSX.Element;
+declare const WizardSteps: (props: WizardStepsProps) => JSX.Element;
 export default WizardSteps;

package/dist/organisms/grid-container/grid-col.d.ts

@@ -4,5 +4,5 @@ export interface GridColProps {
     size?: number;
     children?: React.ReactNode;
 }
-declare const GridCol: (props: GridColProps) => React.JSX.Element;
+declare const GridCol: (props: GridColProps) => JSX.Element;
 export default GridCol;

package/dist/organisms/grid-container/grid-row.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { GridContainerProps } from '.';
-declare const GridRow: (props: GridContainerProps) => React.JSX.Element;
+declare const GridRow: (props: GridContainerProps) => JSX.Element;
 export default GridRow;

package/dist/organisms/grid-container/index.d.ts

@@ -3,5 +3,5 @@ export interface GridContainerProps {
     className?: string;
     children?: React.ReactNode;
 }
-declare const TabsPanel: (props: GridContainerProps) => React.JSX.Element;
+declare const TabsPanel: (props: GridContainerProps) => JSX.Element;
 export default TabsPanel;

package/dist/organisms/horizontal-nav/index.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 export interface HorizontalNavInterface {
     className?: string;
     customColor?: string;
     items: any;
     startsOpen?: boolean;
 }
-declare const HorizontalNav: (props: HorizontalNavInterface) => React.JSX.Element;
+declare const HorizontalNav: (props: HorizontalNavInterface) => JSX.Element;
 export default HorizontalNav;

package/dist/organisms/loading-state/index.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 export interface LoadingStateProps {
     type: 'text' | 'card' | 'value';
     lines?: number;
     cardsNumber?: number;
     center?: boolean;
 }
-declare const LoadingState: (props: LoadingStateProps) => React.JSX.Element;
+declare const LoadingState: (props: LoadingStateProps) => JSX.Element;
 export default LoadingState;

package/dist/organisms/modal/index.d.ts

@@ -8,5 +8,5 @@ export interface ModalProps {
     footer: boolean;
     zIndex?: number;
 }
-declare const Modal: (props: ModalProps) => React.JSX.Element;
+declare const Modal: (props: ModalProps) => JSX.Element;
 export default Modal;

package/dist/organisms/modal-drawer/index.d.ts

@@ -9,5 +9,5 @@ export interface ModalDrawerProps {
     footerHidden?: boolean;
     zIndex?: number;
 }
-declare const ModalDrawer: (props: ModalDrawerProps) => React.JSX.Element;
+declare const ModalDrawer: (props: ModalDrawerProps) => JSX.Element;
 export default ModalDrawer;

package/dist/organisms/tabs-panel/index.d.ts

@@ -10,5 +10,5 @@ export interface TabsPanelProps {
     onChange?: () => {};
     tabs: Tab[];
 }
-declare const TabsPanel: (props: TabsPanelProps) => React.JSX.Element;
+declare const TabsPanel: (props: TabsPanelProps) => JSX.Element;
 export default TabsPanel;

package/dist/rocket-kit.cjs.development.js

@@ -927,7 +927,7 @@ const Icon = props => {
 const LabelStyle = /*#__PURE__*/_styled__default.label.withConfig({
   displayName: "styles__LabelStyle",
   componentId: "sc-pbv9we-0"
-})(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";svg{margin-left:", ";width:auto;height:", ";}"], typography.fontSizeXs, typography.semiBold, colors.grey200, /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('16px'));
+})(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";svg{margin-left:", ";width:auto;height:", ";}"], typography.fontSizeXs, typography.semiBold, colors.grey500, /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('16px'));
 
 const Label = props => {
   const {
@@ -1912,7 +1912,9 @@ const VideoPlayer = props => {
     controls = false,
     width = '100%',
     height = '100%',
-    onEnded
+    onEnded,
+    onReady,
+    onError
   } = props;
   return /*#__PURE__*/React__default.createElement(Wrapper$4, null, /*#__PURE__*/React__default.createElement(ReactPlayer, {
     style: {
@@ -1926,7 +1928,9 @@ const VideoPlayer = props => {
     controls: controls,
     width: width,
     height: height,
-    onEnded: onEnded
+    onEnded: onEnded,
+    onReady: onReady,
+    onError: onError
   }));
 };
 
@@ -2832,7 +2836,7 @@ const TableDnD = props => {
 const Wrapper$8 = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-mbja2a-0"
-})(["display:inline-block;> label{margin-bottom:", ";color:", ";span{color:", ";}}&:not(:last-child){margin-bottom:", ";}"], /*#__PURE__*/polished.rem('5px'), props => props.error ? field.errorBorderColor : colors.grey200, props => props.error ? field.errorBorderColor : field.color, /*#__PURE__*/polished.rem('15px'));
+})(["display:inline-block;> label{margin-bottom:", ";color:", ";span{color:", ";}}&:not(:last-child){margin-bottom:", ";}"], /*#__PURE__*/polished.rem('5px'), props => props.error ? field.errorBorderColor : colors.grey500, props => props.error ? field.errorBorderColor : field.color, /*#__PURE__*/polished.rem('15px'));
 
 const FormGroup = props => {
   const {
@@ -5353,27 +5357,54 @@ const FieldWidthButton = props => {
     name,
     placeholder,
     value,
+    onChange,
     dataTestId,
     buttonIcon,
     buttonValue,
     buttonAction,
-    buttonDisabled
+    buttonDisabled,
+    disabled = true
   } = props;
+  const [loading, setLoading] = React.useState(false);
+  const [fieldValue, setFieldValue] = React.useState(value != null ? value : null);
+  const handleOnClickAction = async () => {
+    if ((buttonAction == null ? void 0 : buttonAction.constructor.name) !== 'AsyncFunction') {
+      buttonAction == null ? void 0 : buttonAction(fieldValue);
+      return;
+    }
+    setLoading(true);
+    await (buttonAction == null ? void 0 : buttonAction(fieldValue));
+    setLoading(false);
+  };
   return /*#__PURE__*/React__default.createElement(Wrapper$e, null, label && /*#__PURE__*/React__default.createElement(Label, {
     value: label
   }), /*#__PURE__*/React__default.createElement(Field, null, /*#__PURE__*/React__default.createElement(TextField, {
     type: type,
     name: name,
-    value: value,
+    disabled: disabled,
     placeholder: placeholder,
     dataTestId: dataTestId,
-    disabled: true
+    value: fieldValue != null ? fieldValue : undefined,
+    onChange: e => {
+      e.preventDefault();
+      if (e.target.value === '' || e.target.value === ' ') {
+        setFieldValue(null);
+        onChange == null ? void 0 : onChange(e.target.value);
+      } else {
+        setFieldValue(e.target.value);
+        onChange == null ? void 0 : onChange(e.target.value);
+      }
+    }
   }), /*#__PURE__*/React__default.createElement(Button, {
     color: "purple100",
+    loading: loading,
     icon: buttonIcon,
     value: buttonValue,
-    action: buttonAction,
-    disabled: buttonDisabled
+    disabled: buttonDisabled,
+    action: e => {
+      e.preventDefault();
+      handleOnClickAction();
+    }
   })));
 };