@ballistix.digital/react-components 8.6.0 → 8.6.1-rc-311.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode, RefObject, MouseEvent, ReactElement, ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, MouseEventHandler, ChangeEvent, Dispatch, SetStateAction, ElementType } from "react";
 import { IconName } from "@fortawesome/fontawesome-svg-core";
+import React, { FC, ReactNode, RefObject, MouseEvent, ReactElement, ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, MouseEventHandler, ChangeEvent, Dispatch, SetStateAction, ElementType } from "react";
 import { Placement } from "@floating-ui/react";
 import { Menu, MenuItemsProps } from "@headlessui/react";
 import { Option, SelectValue } from "react-tailwindcss-select/dist/components/type";
@@ -17,7 +17,7 @@ import { DateType } from "@ballistix.digital/react-tailwindcss-datepicker";
  * @example
  *  toClassName("btn", false, "btn-primary"); // => "btn btn-primary"
  */
-export const toClassName: (...values: Array<boolean | string | undefined>) => string;
+export const toClassName: (...values: (boolean | string | undefined)[]) => string;
 /**
  * Converts a file size in bytes to a human-readable string (e.g. "1.23 MB").
  *
@@ -84,7 +84,7 @@ export const toUserName: (user?: TUser) => string;
  *  toUserInitials({ email: 'test@example.com' });             // => "t"
  */
 export const toUserInitials: (user?: TUser) => string;
-type _TAddressInputGroupFormValue1 = {
+type TAddressInputGroupFormValue = {
     street?: string;
     houseNumber?: string;
     busNumber?: string;
@@ -104,7 +104,7 @@ type _TAddressInputGroupFormValue1 = {
  *  toAddressString({ street: 'Main', houseNumber: '10', zipCode: '1000', city: 'Brussels', country: 'BE' })
  *  // => "Main 10, 1000 Brussels, BE"
  */
-export const toAddressString: (value?: Partial<_TAddressInputGroupFormValue1> | null) => string;
+export const toAddressString: (value?: Partial<TAddressInputGroupFormValue> | null) => string;
 /**
  * Generates a Google Maps search URL from an address object, using lat/lng if provided.
  * Otherwise falls back to a text query of the address fields.
@@ -119,7 +119,13 @@ export const toAddressString: (value?: Partial<_TAddressInputGroupFormValue1> |
  *  toAddressUrl({ street: 'Main', houseNumber: '10', zipCode: '1000', city: 'Brussels', country: 'BE' });
  *  // => "https://www.google.com/maps/search/?api=1&query=Main%2010%201000%20Brussels%20BE"
  */
-export const toAddressUrl: (value?: Partial<_TAddressInputGroupFormValue1> | null) => string | undefined;
+export const toAddressUrl: (value?: Partial<TAddressInputGroupFormValue> | null) => string | undefined;
+type TProps = {
+    accessor: IconName;
+    type?: 'brands' | 'light' | 'regular' | 'solid' | 'thin';
+    className?: string;
+};
+export const Icon: FC<TProps>;
 type DeepPartialType<T> = {
     [P in keyof T]?: DeepPartialType<T[P]>;
 };
@@ -131,8 +137,8 @@ declare const base: {
     container: string;
     indicator: string;
 };
-type TAvatarElementStyles = DeepPartialType<typeof base>;
-type TAvatarElementProps = {
+type TAvatarStyles = DeepPartialType<typeof base>;
+type TAvatarProps = {
     src?: string | undefined;
     placeholder?: string | undefined;
     children?: ReactNode | ReactNode[] | string;
@@ -142,15 +148,9 @@ type TAvatarElementProps = {
     status?: 'offline' | 'online' | 'blocked';
     isDisabled?: boolean;
     isLoading?: boolean;
-    styles?: TAvatarElementStyles;
+    styles?: TAvatarStyles;
 };
-export const AvatarElement: FC<TAvatarElementProps>;
-type TProps = {
-    accessor: IconName;
-    type?: 'brands' | 'light' | 'regular' | 'solid' | 'thin';
-    className?: string;
-};
-export const IconElement: FC<TProps>;
+export const Avatar: FC<TAvatarProps>;
 declare const _base1: {
     container: string;
     icon: string;
@@ -164,8 +164,8 @@ declare const _base1: {
         inverted: string;
     };
 };
-type TAlertElementStyles = DeepPartialType<typeof _base1>;
-type TAlertElementProps = {
+type TAlertStyles = DeepPartialType<typeof _base1>;
+type TAlertProps = {
     title?: ReactNode;
     message?: ReactNode;
     iconAccessor?: IconName;
@@ -173,20 +173,20 @@ type TAlertElementProps = {
     isCollapsible?: boolean;
     onClose?: () => void;
     onCollapse?: () => void;
-    styles?: TAlertElementStyles;
+    styles?: TAlertStyles;
 };
-export const AlertElement: FC<TAlertElementProps>;
+export const Alert: FC<TAlertProps>;
 declare const _base2: {
     container: string;
     indicator: string;
     button: string;
     closeIcon: string;
 };
-type TBadgeElementStyles = DeepPartialType<typeof _base2>;
-type TBadgeElementColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
-type TBadgeElementProps = {
+type TBadgeStyles = DeepPartialType<typeof _base2>;
+type TBadgeColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
+type TBadgeProps = {
     children: ReactNode;
-    color?: TBadgeElementColor;
+    color?: TBadgeColor;
     type?: 'normal' | 'indicator' | 'close';
     size?: 'sm' | 'lg';
     figure?: 'block' | 'rounded';
@@ -194,10 +194,10 @@ type TBadgeElementProps = {
     isLoading?: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onClose?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    styles?: TBadgeElementStyles;
+    styles?: TBadgeStyles;
     dataCy?: string;
 };
-export const BadgeElement: FC<TBadgeElementProps>;
+export const Badge: FC<TBadgeProps>;
 declare const _base3: {
     container: string;
     content: string;
@@ -207,25 +207,25 @@ declare const _base3: {
         strokeWidth: string;
     };
 };
-type TTooltipElementStyles = DeepPartialType<typeof _base3>;
+type TTooltipStyles = DeepPartialType<typeof _base3>;
 type _TProps1 = {
     children: ReactNode;
     content: ReactNode;
     placement?: Placement;
     isPointing?: boolean;
     isHidden?: boolean;
-    styles?: TTooltipElementStyles;
+    styles?: TTooltipStyles;
     dataCy?: string;
 };
-export const TooltipElement: FC<_TProps1>;
+export const Tooltip: FC<_TProps1>;
 declare const _base4: {
     container: string;
     content: string;
     icon: string;
     spinner: string;
 };
-type TButtonElementStyles = DeepPartialType<typeof _base4>;
-export type TButtonElementProps = {
+type TButtonStyles = DeepPartialType<typeof _base4>;
+export type TButtonProps = {
     children: ReactNode;
     innerRef?: RefObject<HTMLButtonElement | null>;
     htmlType?: 'button' | 'submit';
@@ -235,22 +235,22 @@ export type TButtonElementProps = {
     status?: 'idle' | 'loading' | 'success' | 'error';
     isDisabled?: boolean;
     dataCy?: string;
-    styles?: TButtonElementStyles;
+    styles?: TButtonStyles;
     onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
 };
-export const ButtonElement: FC<TButtonElementProps>;
+export const Button: FC<TButtonProps>;
 declare const _base5: {
     container: string;
     firstButton: string;
     button: string;
     lastButton: string;
 };
-type TButtonGroupElementStyles = DeepPartialType<typeof _base5>;
+type TButtonGroupStyles = DeepPartialType<typeof _base5>;
 type _TProps2 = {
     children: ReactElement[];
-    styles?: TButtonGroupElementStyles;
+    styles?: TButtonGroupStyles;
 };
-export const ButtonGroupElement: FC<_TProps2>;
+export const ButtonGroup: FC<_TProps2>;
 declare const _base6: {
     container: string;
     button: string;
@@ -258,7 +258,7 @@ declare const _base6: {
     dots: string;
     items: string;
 };
-type TDropdownElementStyles = DeepPartialType<typeof _base6>;
+type TDropdownStyles = DeepPartialType<typeof _base6>;
 type _TProps3 = {
     children: ReactElement | ReactElement[];
     label?: ReactNode;
@@ -268,9 +268,9 @@ type _TProps3 = {
     direction?: MenuItemsProps['anchor'];
     isDisabled?: boolean;
     isEscapingOverflow?: boolean;
-    styles?: TDropdownElementStyles;
+    styles?: TDropdownStyles;
 };
-export const DropdownElement: {
+export const Dropdown: {
     Container: FC<_TProps3>;
     Item: typeof Menu.Item;
 };
@@ -282,18 +282,18 @@ declare const styles: {
         svg: string;
     };
 };
-type _TDropdownElementStyles1 = DeepPartialType<typeof styles>;
+type TCollapsibleStyles = DeepPartialType<typeof styles>;
 type _TProps4 = {
     children: ReactNode;
     isDefaultOpen?: boolean;
-    styles?: _TDropdownElementStyles1;
+    styles?: TCollapsibleStyles;
     trigger: (props: {
         handleToggle: () => void;
         rotatingIcon: ReactNode;
         isVisible: boolean;
     }) => ReactNode;
 };
-export const CollapsibleElement: FC<_TProps4>;
+export const Collapsible: FC<_TProps4>;
 declare const _base7: {
     container: string;
     icon: string;
@@ -358,7 +358,7 @@ declare const _base10: {
     error: string;
 };
 export type TInputGroupStyles = DeepPartialType<typeof _base10 & TInputHeaderStyles & TInputFooterStyles>;
-export type TInputGroupFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
+export type TInputGroupProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
     name: string;
     placeholder?: string;
     leading?: ReactNode;
@@ -403,18 +403,18 @@ export type TInputGroupFormProps = TInputHeaderSharedProps & TInputFooterSharedP
     onClear?: never;
     trailing?: ReactNode;
 });
-export const InputGroupForm: FC<TInputGroupFormProps>;
+export const InputGroup: FC<TInputGroupProps>;
 declare const _base11: {
     container: string;
     content: string;
 };
-type TContainerLayoutStyles = DeepPartialType<typeof _base11>;
+type TContainerStyles = DeepPartialType<typeof _base11>;
 type _TProps5 = {
     children: ReactNode;
     type?: 'break' | 'center' | 'fill';
-    styles?: TContainerLayoutStyles;
+    styles?: TContainerStyles;
 };
-export const ContainerLayout: FC<_TProps5>;
+export const Container: FC<_TProps5>;
 declare const _base12: {
     container: string;
     head: string;
@@ -422,25 +422,25 @@ declare const _base12: {
     body: string;
     content: string;
 };
-type TDividerLayoutStyles = DeepPartialType<typeof _base12>;
+type TDividerStyles = DeepPartialType<typeof _base12>;
 type _TProps6 = {
     children?: ReactNode;
     type?: 'left' | 'center' | 'right';
-    styles?: TDividerLayoutStyles;
+    styles?: TDividerStyles;
 };
-export const DividerLayout: FC<_TProps6>;
+export const Divider: FC<_TProps6>;
 declare const _base13: {
     container: string;
     list: string;
     item: string;
 };
-type TListContainerLayoutStyles = DeepPartialType<typeof _base13>;
+type TListContainerStyles = DeepPartialType<typeof _base13>;
 type _TProps7 = {
     children: ReactElement | ReactElement[];
     type?: 'fill' | 'fill-sticky' | 'center' | 'center-sticky' | 'card' | 'card-sticky';
-    styles?: TListContainerLayoutStyles;
+    styles?: TListContainerStyles;
 };
-export const ListContainerLayout: FC<_TProps7>;
+export const ListContainer: FC<_TProps7>;
 declare const _base14: {
     container: string;
     figure: string;
@@ -448,24 +448,24 @@ declare const _base14: {
     title: string;
     paragraph: string;
 };
-type TMediaObjectLayoutStyles = DeepPartialType<typeof _base14>;
+type TMediaObjectStyles = DeepPartialType<typeof _base14>;
 type _TProps8 = {
     title: string;
     paragraph: string;
     figure?: ReactNode;
     type?: 'top' | 'top-reversed' | 'center' | 'center-reversed' | 'bottom' | 'bottom-reversed' | 'stretch' | 'stretch-reversed' | 'responsive' | 'responsive-reversed' | 'wide' | 'wide-reversed';
-    styles?: TMediaObjectLayoutStyles;
+    styles?: TMediaObjectStyles;
 };
-export const MediaObjectLayout: FC<_TProps8>;
+export const MediaObject: FC<_TProps8>;
 declare const _base15: {
     container: string;
     section: string;
 };
-type TPanelLayoutStyles = DeepPartialType<typeof _base15>;
+type TPanelStyles = DeepPartialType<typeof _base15>;
 type TContainerProps = {
     children: ReactNode;
     type?: 'normal' | 'sticky';
-    styles?: TPanelLayoutStyles;
+    styles?: TPanelStyles;
 };
 type TSectionProps = {
     children: ReactNode;
@@ -473,7 +473,7 @@ type TSectionProps = {
         section: string;
     };
 };
-export const PanelLayout: {
+export const Panel: {
     Container: React.FC<TContainerProps>;
     Section: React.FC<TSectionProps>;
 };
@@ -554,8 +554,8 @@ declare const _base18: {
     emptyState: string;
     trailing: string;
 };
-export type TSelectMenuFormStyles = DeepPartialType<typeof _base18 & TInputHeaderStyles & TInputFooterStyles>;
-export type TSelectMenuFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
+export type TSelectMenuStyles = DeepPartialType<typeof _base18 & TInputHeaderStyles & TInputFooterStyles>;
+export type TSelectMenuProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
     name: string;
     iconAccessor?: IconName;
     description?: string;
@@ -568,7 +568,7 @@ export type TSelectMenuFormProps = TInputHeaderSharedProps & TInputFooterSharedP
         value: string;
         label: string;
     }[];
-    value: {
+    value?: {
         label: string;
         value: string;
         disabled?: boolean;
@@ -585,9 +585,9 @@ export type TSelectMenuFormProps = TInputHeaderSharedProps & TInputFooterSharedP
     onSearchInputChange?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
     onClear: (name: string) => void;
     onBlur?: any;
-    styles?: TSelectMenuFormStyles;
+    styles?: TSelectMenuStyles;
 };
-export const SelectMenuForm: FC<TSelectMenuFormProps>;
+export const SelectMenu: FC<TSelectMenuProps>;
 type _TProps10 = {
     current?: number;
     min?: number;
@@ -708,8 +708,8 @@ export type TTableListProps<TData> = {
     areControlsVisible?: boolean;
     styles?: TTableListStyles & {
         components: {
-            buttonElement: TButtonElementStyles;
-            dropdownElement: TDropdownElementStyles;
+            buttonElement: TButtonStyles;
+            dropdownElement: TDropdownStyles;
             panelPaginationNavigation: TPagePaginationNavigationStyles;
         };
     };
@@ -773,6 +773,7 @@ declare const _base20: {
                 };
                 cell: string;
                 sticky: string;
+                groupedRow: string;
                 groupedCell: string;
                 groupedRowIcon: {
                     expand: string;
@@ -1124,8 +1125,8 @@ declare const _styles1: {
             input: string;
             label: string;
             actions: string;
-            upIcon: string;
-            downIcon: string;
+            upIconContainer: string;
+            downIconContainer: string;
         };
     };
     label: string;
@@ -1342,14 +1343,14 @@ export const toTimeValue: TTimeFormatFunction;
  * @example
  *  latestDateString(["2025-01-06", undefined, "2025-01-07"]); // => "2025-01-07"
  */
-export const latestDateString: (dates?: Array<string | undefined>) => string;
+export const latestDateString: (dates?: (string | undefined)[]) => string;
 declare const _base25: {
     container: string;
     inputWrapper: string;
     input: string;
 };
-export type TDateMenuFormStyles = DeepPartialType<typeof _base25 & TInputHeaderStyles & TInputFooterStyles>;
-export type TDateRangeMenuFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
+export type TDateMenuStyles = DeepPartialType<typeof _base25 & TInputHeaderStyles & TInputFooterStyles>;
+export type TDateRangeMenuProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
     name: string;
     type?: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     size?: 'compact' | 'expanded';
@@ -1369,7 +1370,7 @@ export type TDateRangeMenuFormProps = TInputHeaderSharedProps & TInputFooterShar
     required?: ({ isRequired }: {
         isRequired: boolean;
     }) => ReactNode;
-    value: {
+    value?: {
         startDate: DateType;
         endDate: DateType;
     };
@@ -1386,14 +1387,14 @@ export type TDateRangeMenuFormProps = TInputHeaderSharedProps & TInputFooterShar
     onClear?: (name: string) => void;
     onBlur?: () => void;
     onClick?: MouseEventHandler<HTMLDivElement>;
-    styles?: TDateMenuFormStyles;
+    styles?: TDateMenuStyles;
 };
-export const DateRangeMenuForm: FC<TDateRangeMenuFormProps>;
-export type TDateMenuFormProps = Omit<TDateRangeMenuFormProps, 'value' | 'isRanged' | 'onChange'> & {
-    value: DateType;
+export const DateRangeMenu: FC<TDateRangeMenuProps>;
+export type TDateMenuProps = Omit<TDateRangeMenuProps, 'value' | 'isRanged' | 'onChange'> & {
+    value?: DateType;
     onChange?: (value: DateType) => void;
 };
-export const DateMenuForm: FC<TDateMenuFormProps>;
+export const DateMenu: FC<TDateMenuProps>;
 declare const _base26: {
     container: string;
     head: string;
@@ -1404,29 +1405,27 @@ declare const _base26: {
     label: string;
     description: string;
 };
-export type TCheckboxInputFormStyles = DeepPartialType<typeof _base26>;
-export type TCheckboxInputFormProps = {
+export type TCheckboxInputStyles = DeepPartialType<typeof _base26>;
+export type TCheckboxInputProps = {
     name: string;
     title?: string;
     description?: string;
     isDisabled?: boolean;
-    styles?: TCheckboxInputFormStyles;
-} & ({
-    value: boolean;
-    onChange: (value: boolean) => void;
+    styles?: TCheckboxInputStyles;
     checkedElement?: ReactNode;
     uncheckedElement?: ReactNode;
+} & ({
+    value?: boolean;
+    onChange?: (value: boolean) => void;
     indeterminableElement?: never;
     isIndeterminable?: false;
 } | {
-    value: boolean | null;
-    onChange: (value: boolean | null) => void;
-    checkedElement?: ReactNode;
-    uncheckedElement?: ReactNode;
+    value?: boolean | null;
+    onChange?: (value: boolean | null) => void;
     indeterminableElement?: ReactNode;
     isIndeterminable?: true;
 });
-export const CheckboxInput: FC<TCheckboxInputFormProps>;
+export const CheckboxInput: FC<TCheckboxInputProps>;
 declare const _base27: {
     container: string;
     foot: string;
@@ -1450,18 +1449,18 @@ declare const _base27: {
         icon: string;
     };
 };
-export type TSwitchStylesForm = DeepPartialType<typeof _base27 & TInputHeaderStyles & TInputFooterStyles>;
-export type TSwitchFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
+export type TSwitchStyles = DeepPartialType<typeof _base27 & TInputHeaderStyles & TInputFooterStyles>;
+export type TSwitchProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
     name: string;
     isDisabled?: boolean;
-    value: boolean;
-    onChange: (value: boolean) => void;
-    styles?: TSwitchStylesForm;
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    styles?: TSwitchStyles;
     size?: 'sm' | 'md';
     iconAccessorChecked?: IconName;
     iconAccessorUnchecked?: IconName;
 };
-export const SwitchForm: (props: TSwitchFormProps) => JSX.Element;
+export const Switch: (props: TSwitchProps) => JSX.Element;
 declare const _base28: {
     container: string;
     textAreaWrapper: string;
@@ -1504,7 +1503,7 @@ declare const _base28: {
         container: string;
     };
 };
-export type TRichTextAreaStylesForm = DeepPartialType<typeof _base28 & TInputHeaderStyles & TInputFooterStyles>;
+export type TRichTextAreaStyles = DeepPartialType<typeof _base28 & TInputHeaderStyles & TInputFooterStyles>;
 type TRichTextToolbarItem = 'bold' | 'italic' | 'underline' | 'code' | 'heading-one' | 'heading-two' | 'block-quote' | 'numbered-list' | 'bulleted-list' | 'left' | 'center' | 'right' | 'justify';
 export type TRichTextAreaProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
     name?: string;
@@ -1512,7 +1511,7 @@ export type TRichTextAreaProps = TInputHeaderSharedProps & TInputFooterSharedPro
     onChange?: (value: string) => void;
     placeholder?: string;
     className?: string;
-    styles?: TRichTextAreaStylesForm;
+    styles?: TRichTextAreaStyles;
     isReadOnly?: boolean;
     toolbarConfig?: TRichTextToolbarItem[];
 };
@@ -1531,7 +1530,7 @@ declare const _base29: {
     description: string;
     error: string;
 };
-export type TFileInputGroupFormStyles = DeepPartialType<typeof _base29>;
+export type TFileInputGroupStyles = DeepPartialType<typeof _base29>;
 type TFileType = {
     name: string;
     size: number;
@@ -1539,7 +1538,7 @@ type TFileType = {
     blob: string | ArrayBuffer | null;
     file: File;
 };
-export type TFileInputGroupFormProps = {
+export type TFileInputGroupProps = {
     name: string;
     label?: ReactNode;
     description?: string;
@@ -1559,11 +1558,11 @@ export type TFileInputGroupFormProps = {
         value?: TFileType;
         isDragging: boolean;
     }) => ReactNode;
-    onChange: (files: TFileType[]) => void;
+    onChange?: (files: TFileType[]) => void;
     onBlur: FocusEventHandler<HTMLInputElement>;
-    styles?: TFileInputGroupFormStyles;
+    styles?: TFileInputGroupStyles;
 };
-export const FileInputGroupForm: FC<TFileInputGroupFormProps>;
+export const FileInputGroup: FC<TFileInputGroupProps>;
 declare const _base30: {
     container: string;
     head: string;
@@ -1582,8 +1581,8 @@ declare const _base30: {
         suggestsHiddenClassName: string;
     };
 };
-export type TAddressInputGroupFormStyles = DeepPartialType<typeof _base30>;
-export type TAddressInputGroupFormValue = {
+export type TAddressInputGroupStyles = DeepPartialType<typeof _base30>;
+export type TAddressInputGroupValue = {
     country: string;
     city: string;
     street: string;
@@ -1594,7 +1593,7 @@ export type TAddressInputGroupFormValue = {
     lng: number;
     info?: string;
 } | null;
-export type TAddressInputGroupFormProps = {
+export type TAddressInputGroupProps = {
     name: string;
     label?: ReactNode;
     description?: string;
@@ -1609,17 +1608,17 @@ export type TAddressInputGroupFormProps = {
     isDisabled?: boolean;
     isRequired?: boolean;
     isTouched?: boolean;
-    onChange: any;
-    onBlur: any;
-    onFocus: any;
-    styles?: TAddressInputGroupFormStyles;
+    onChange?: any;
+    onBlur?: any;
+    onFocus?: any;
+    styles?: TAddressInputGroupStyles;
 };
-export const AddressInputGroupForm: FC<TAddressInputGroupFormProps>;
+export const AddressInputGroup: FC<TAddressInputGroupProps>;
 export type StringColumn = string | undefined | null;
 export type BadgeColumn = {
     value: string;
     label: ReactNode;
-    color?: TBadgeElementColor;
+    color?: TBadgeColor;
 } | undefined | null;
 export type LinkColumn = {
     label: ReactNode;