@televet/kibble-ui 4.0.1 → 5.0.0-beta.hotfix.1

package/dist/types/components/Icon/generated/Globe.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/InputAlt.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/LightBulb.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/SelectDropDown.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/TextArea.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/TextBlock.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface SVGRProps {
+    color?: string;
+    height?: string;
+    width?: string;
+    title?: string;
+    titleId?: string;
+}
+declare const ForwardRef: React.ForwardRefExoticComponent<SVGRProps & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/types/components/Icon/generated/index.d.ts

@@ -1,2 +1,2 @@
-export type IconName = 'aiMicrophone' | 'alertCircle' | 'animalBird' | 'animalCat' | 'animalCow' | 'animalDog' | 'animalHorse' | 'animalMouse' | 'animalPig' | 'animalSnake' | 'archive' | 'arrowCircle' | 'arrowDownRight' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowsIn' | 'arrowsOut' | 'article' | 'award' | 'bank' | 'bellCancel' | 'bell' | 'bone' | 'bookmark' | 'bulkSelect' | 'buttons' | 'calendarCheck' | 'calendarDate' | 'calendarInfo' | 'calendarPen' | 'calendarPlus' | 'cameraOff' | 'camera' | 'cancel' | 'caretDown' | 'caretUp' | 'cellphoneCancel' | 'cellphone' | 'chainLink' | 'chatBubble' | 'checkmarkBox' | 'checkmarkCircle' | 'checkmark' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'clinic' | 'clock' | 'closeCircleSolid' | 'closeCircle' | 'close' | 'code' | 'creditCardLogoAmex' | 'creditCardLogoDiners' | 'creditCardLogoDiscover' | 'creditCardLogoGeneric' | 'creditCardLogoJcb' | 'creditCardLogoMastercard' | 'creditCardLogoUnionpay' | 'creditCardLogoVisa' | 'creditCard' | 'cut' | 'dollarCircle' | 'dollar' | 'dotsHorizontal' | 'dotsVertical' | 'doubleArrowCircle' | 'download' | 'emailSend' | 'envelopeCancel' | 'envelope' | 'externalLink' | 'eyeOpen' | 'eyeSlash' | 'eyedropper' | 'fileHealth' | 'filter' | 'form' | 'gear' | 'gif' | 'grid' | 'hashtag' | 'health' | 'heartSolid' | 'heart' | 'house' | 'image' | 'infoCircle' | 'input' | 'invoice' | 'kanbanBoard' | 'list' | 'liveagent' | 'loader' | 'locationMarker' | 'lock' | 'logo' | 'loudspeaker' | 'magic' | 'magnifyingGlass' | 'mailbox' | 'menu' | 'messageDetail' | 'messageWarning' | 'message' | 'messages' | 'microphoneMute' | 'microphone' | 'minus' | 'moveDown' | 'moveLeft' | 'moveRight' | 'moveUp' | 'notification' | 'package' | 'paperclip' | 'pause' | 'paw' | 'penSquare' | 'pen' | 'personAdd' | 'personCircle' | 'person' | 'phoneButtons' | 'phoneCancel' | 'phone' | 'pill' | 'pinCancel' | 'pin' | 'play' | 'plus' | 'popup' | 'printer' | 'questionMarkCircleSolid' | 'questionMarkCircle' | 'questionMark' | 'record' | 'report' | 'ribbon' | 'robot' | 'send' | 'sliders' | 'smileyFace' | 'sort' | 'starCircle' | 'starSolid' | 'star' | 'stopRecording' | 'stop' | 'support' | 'table' | 'tag' | 'targetSolid' | 'target' | 'taskList' | 'team' | 'thumbsDown' | 'thumbsUp' | 'transfer' | 'trashcan' | 'twoSquares' | 'upload' | 'videoCamera' | 'warningSign' | 'website' | 'wrench';
+export type IconName = 'aiMicrophone' | 'alertCircle' | 'animalBird' | 'animalCat' | 'animalCow' | 'animalDog' | 'animalHorse' | 'animalMouse' | 'animalPig' | 'animalSnake' | 'archive' | 'arrowCircle' | 'arrowDownRight' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowsIn' | 'arrowsOut' | 'article' | 'award' | 'backspace' | 'bank' | 'bellCancel' | 'bell' | 'bone' | 'bookmark' | 'bulkSelect' | 'buttons' | 'calendarCheck' | 'calendarDate' | 'calendarInfo' | 'calendarPen' | 'calendarPlus' | 'cameraOff' | 'camera' | 'cancel' | 'caretDown' | 'caretLeft' | 'caretUp' | 'cellphoneCancel' | 'cellphone' | 'chainLink' | 'chatBubble' | 'checkList' | 'checkmarkBox' | 'checkmarkCircle' | 'checkmark' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'clinic' | 'clock' | 'closeCircleSolid' | 'closeCircle' | 'close' | 'code' | 'creditCardLogoAmex' | 'creditCardLogoDiners' | 'creditCardLogoDiscover' | 'creditCardLogoGeneric' | 'creditCardLogoJcb' | 'creditCardLogoMastercard' | 'creditCardLogoUnionpay' | 'creditCardLogoVisa' | 'creditCard' | 'cut' | 'dollarCircle' | 'dollar' | 'dotsHorizontal' | 'dotsVertical' | 'doubleArrowCircle' | 'download' | 'emailSend' | 'envelopeCancel' | 'envelope' | 'externalLink' | 'eyeOpen' | 'eyeSlash' | 'eyedropper' | 'fileHealth' | 'filter' | 'form' | 'gear' | 'gif' | 'globe' | 'grid' | 'hashtag' | 'health' | 'heartSolid' | 'heart' | 'house' | 'image' | 'infoCircle' | 'inputAlt' | 'input' | 'invoice' | 'kanbanBoard' | 'lightBulb' | 'list' | 'liveagent' | 'loader' | 'locationMarker' | 'lock' | 'logo' | 'loudspeaker' | 'magic' | 'magnifyingGlass' | 'mailbox' | 'menu' | 'messageDetail' | 'messageWarning' | 'message' | 'messages' | 'microphoneMute' | 'microphone' | 'minus' | 'moveDown' | 'moveLeft' | 'moveRight' | 'moveUp' | 'notification' | 'package' | 'paperclip' | 'pause' | 'paw' | 'penSquare' | 'pen' | 'personAdd' | 'personCircle' | 'person' | 'phoneButtons' | 'phoneCancel' | 'phone' | 'pill' | 'pinCancel' | 'pin' | 'play' | 'plus' | 'popup' | 'printer' | 'questionMarkCircleSolid' | 'questionMarkCircle' | 'questionMark' | 'record' | 'report' | 'ribbon' | 'robot' | 'selectDropDown' | 'send' | 'sliders' | 'smileyFace' | 'sort' | 'starCircle' | 'starSolid' | 'star' | 'stopRecording' | 'stop' | 'support' | 'table' | 'tag' | 'targetSolid' | 'target' | 'taskList' | 'team' | 'textArea' | 'textBlock' | 'thumbsDown' | 'thumbsUp' | 'transfer' | 'trashcan' | 'twoSquares' | 'upload' | 'videoCamera' | 'warningSign' | 'website' | 'wrench';
 export declare const IconMap: Record<IconName, any>;

package/dist/types/components/Icon/icon.component.d.ts

@@ -3,8 +3,18 @@ import { IconName, IconSize } from './icon.types';
 import { BoxProps } from '@chakra-ui/react/box';
 import { TypographyVariant } from '../../shared/types/typography';
 export interface IconProps extends BoxProps {
+    /** Name of the icon. */
     name: IconName;
+    /**
+     * Size of the icon.
+     * @default lg
+     */
     size?: IconSize;
+    /** Color variant of the icon. If you want to use a custom color, the variant prop should be omitted and the color prop should be used instead. */
     variant?: TypographyVariant;
+    /** Data test id for the icon.
+     * @default kibble-icon
+     */
+    'data-testid'?: string;
 }
 export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconProps>>;

package/dist/types/components/Link/components/LinkIcon/linkIcon.component.d.ts

@@ -1,7 +1,14 @@
 import { default as React } from 'react';
 import { IconProps } from '../../../Icon';
 export interface LinkIconProps extends Pick<IconProps, 'name'> {
+    /** Position of the icon.
+     * @default start
+     */
     position?: 'start' | 'end';
+    /** Data test id for the link.
+     * @default kibble-link-icon
+     */
+    'data-testid'?: string;
 }
 type InternalLinkIconProps = Pick<IconProps, 'name' | 'variant' | 'size'>;
 export declare const LinkIcon: ({ variant, ...rest }: InternalLinkIconProps) => React.JSX.Element;

package/dist/types/components/Link/link.component.d.ts

@@ -4,10 +4,29 @@ import { TypographyVariant } from '../../shared/types';
 import { TextSize } from '../Text/text.types';
 import { LinkIconProps } from './components/LinkIcon/linkIcon.component';
 export interface LinkProps extends CLinkProps {
+    /** Props to customize the link icon. */
     iconProps?: LinkIconProps;
+    /**
+     * If `true`, `target="_blank"` and `rel="noopener"` will be set, which will open the link in a new window
+     * @default false
+     */
     external?: boolean;
+    /**
+     * Size of the link.
+     * @default md
+     */
     size?: TextSize;
+    /** This property is only for use when the React Router Link component is used in conjunction with the `as` prop. */
     to?: any;
+    /**
+     * Color variant of the link.
+     * @default interactive
+     */
     variant?: TypographyVariant;
+    /**
+     * Data test id for the link.
+     * @default kibble-link
+     */
+    'data-testid'?: string;
 }
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types/components/Logo/logo.component.d.ts

@@ -2,8 +2,21 @@ import { default as React } from 'react';
 import { BoxProps } from '@chakra-ui/react/box';
 import { LogoType, LogoVariant } from './logo.types';
 export interface LogoProps extends Omit<BoxProps, 'color'> {
+    /** Callback function for when the logo is clicked */
     onClick?: () => void;
+    /**
+     * The type of logo to be displayed
+     * @default full
+     */
     type?: LogoType;
+    /**
+     * The color variant of the logo
+     * @default default
+     */
     variant?: LogoVariant;
+    /** Data test id for the logo.
+     * @default kibble-logo
+     */
+    'data-testid'?: string;
 }
-export declare const Logo: ({ onClick, type, variant, ...rest }: LogoProps) => React.JSX.Element;
+export declare const Logo: ({ onClick, type, variant, ["data-testid"]: dataTestId, ...rest }: LogoProps) => React.JSX.Element;

package/dist/types/components/Menu/components/MenuButton/menuButton.component.d.ts

@@ -0,0 +1,22 @@
+import { ButtonProps } from '../../../Button/button.component';
+import { TextProps } from '../../../Text/text.component';
+import { TooltipProps } from '../../../Tooltip/tooltip.component';
+import { default as React } from 'react';
+export interface MenuButtonProps extends Omit<ButtonProps, 'children'> {
+    /** If true, the caret will be hidden.
+     * @default false
+     */
+    hideCaret?: boolean;
+    /** Text to display in the menu button. */
+    text?: string;
+    /** Props to customize the text. */
+    textProps?: TextProps;
+    /** Props to customize the tooltip. */
+    tooltipProps?: Omit<TooltipProps, 'children' | 'label' | 'isOpen' | 'onClose'>;
+    /** If true, the tooltip will be shown. */
+    showTooltip?: boolean;
+    /** Determines if the menu is open. */
+    isMenuOpen?: boolean;
+}
+export declare const MenuButton: ({ hideCaret, size, text, textProps, variant, onClick, ["data-testid"]: dataTestId, ...rest }: MenuButtonProps) => React.JSX.Element;
+export declare const MenuButtonTooltip: ({ tooltipProps, isMenuOpen, ...rest }: MenuButtonProps) => React.JSX.Element;

package/dist/types/components/Menu/components/MenuItem/menuItem.component.d.ts

@@ -1,31 +1,60 @@
 import { Menu as CMenu } from '@chakra-ui/react/menu';
 import { default as React } from 'react';
 import { MenuItemType } from './menuItem.types';
-import { MenuListProps } from '../..';
+import { MenuProps } from '../..';
 import { TypographyVariant } from '../../../../shared/types/typography';
 interface BaseMenuItemProps {
+    /** Label to display in the menu item. */
     label?: React.ReactNode;
+    /** Left element to display in the menu item. */
     leftElement?: React.ReactNode;
+    /** Group label to display in the menu item. */
     groupLabel?: string;
+    /** Callback function to be called when the menu item is selected. */
     onSelect?: (value: string) => void;
+    /** If true, the text will be truncated. */
     shouldTruncateText?: boolean;
+    /** Type of the menu item.
+     * @default default
+     */
     type?: MenuItemType;
+    /** Value of the menu item. */
     value: string;
+    /** Variant of the menu item. */
     variant?: TypographyVariant;
+    /** Data test id for the menu item.
+     * @default kibble-menu-item
+     */
+    'data-testid'?: string;
 }
-interface DefaultMenuItemProps extends Omit<CMenu.ItemProps, 'onSelect'> {
+interface DefaultMenuItemProps extends Omit<CMenu.ItemProps, 'onSelect' | 'isDisabled'> {
+    /** Type of the menu item.
+     * @default default
+     */
     type?: 'default';
+    /** If true, the menu item will be selected. */
     selected?: boolean;
+    /** Tooltip label to display in the menu item. */
+    tooltipLabel?: string;
 }
 interface CheckboxMenuItemProps extends Omit<CMenu.CheckboxItemProps, 'onSelect'> {
+    /** Type of the menu item.
+     * @default checkbox
+     */
     type: 'checkbox';
+    /** If true, the checkbox will be checked. */
     checked: boolean;
+    /** Tooltip label to display in the menu item. */
+    tooltipLabel?: string;
 }
-interface SubmenuMenuItemProps {
+interface SubmenuMenuItemProps extends Omit<MenuProps, 'children' | 'buttonProps'> {
+    /** Type of the menu item.
+     * @default submenu
+     */
     type: 'submenu';
+    /** Value text for keyboard navigation. */
     valueText?: string;
-    listProps?: MenuListProps;
 }
 export type MenuItemProps = BaseMenuItemProps & (DefaultMenuItemProps | CheckboxMenuItemProps | SubmenuMenuItemProps);
-export declare const MenuItem: ({ label, leftElement, onSelect, shouldTruncateText, type, variant, ...rest }: MenuItemProps) => React.JSX.Element;
+export declare const MenuItem: ({ label, leftElement, onSelect, shouldTruncateText, type, variant, ["data-testid"]: dataTestId, ...rest }: MenuItemProps) => React.JSX.Element;
 export {};

package/dist/types/components/Menu/components/MenuList/menuList.types.d.ts

@@ -0,0 +1,18 @@
+import { MenuListOnSelect, MenuListOnSelectAll } from '../../menu.types';
+import { MenuItemProps } from '../MenuItem/menuItem.component';
+import { Menu as CMenu } from '@chakra-ui/react/menu';
+export interface MenuListProps extends Omit<CMenu.ContentProps, 'onSelect' | 'onOpenChange'> {
+    canSelectAll?: boolean;
+    canSelectGroups?: boolean;
+    emptyState?: React.ReactNode;
+    groupSortOrder?: string[];
+    loading?: boolean;
+    menuItems?: MenuItemProps[];
+    onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onSelect?: MenuListOnSelect;
+    onSelectAll?: MenuListOnSelectAll;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    shouldTruncateText?: boolean;
+    'data-testid'?: string;
+}

package/dist/types/components/Menu/components/MenuToggleButtons/menuToggleButtons.component.d.ts

@@ -0,0 +1,17 @@
+interface MenuToggleButtonsProps {
+    /** Determines if there are selected items. */
+    hasSelectedItems?: boolean;
+    /** Name of the group. */
+    groupName?: string;
+    /** Callback function to toggle the selected items. */
+    onToggle: ({ groupName, clear }: {
+        clear: boolean;
+        groupName?: string;
+    }) => void;
+    /** Data test id for the menu toggle buttons.
+     * @default kibble-menu-toggle-buttons
+     */
+    'data-testid'?: string;
+}
+export declare const MenuToggleButtons: ({ groupName, hasSelectedItems, onToggle, ["data-testid"]: dataTestId, }: MenuToggleButtonsProps) => React.JSX.Element;
+export {};

package/dist/types/components/Menu/index.d.ts

@@ -1,2 +1,6 @@
 export { type MenuItemProps } from './components/MenuItem/menuItem.component';
+export { type MenuItemType } from './components/MenuItem/menuItem.types';
+export { type MenuButtonProps } from './components/MenuButton/menuButton.component';
+export { type MenuListProps } from './components/MenuList/menuList.types';
 export * from './menu.component';
+export * from './menu.types';

package/dist/types/components/Menu/menu.component.d.ts

@@ -1,29 +1,32 @@
 import { default as React } from 'react';
 import { Menu as CMenu } from '@chakra-ui/react/menu';
-import { MenuButtonProps } from './components/MenuButton/menuButton.components';
-import { MenuItemProps } from './components/MenuItem/menuItem.component';
-export type MenuListOnSelect = ((selectedItem: string | undefined, allSelectedItems?: string[]) => void) | ((selectedItem: string | undefined, allSelectedItems?: string[]) => Promise<void>);
-export type MenuListOnSelectAll = ((selectedItems: string[]) => void) | ((selectedItems: string[]) => Promise<void>);
-export interface MenuListProps extends Omit<CMenu.ContentProps, 'onSelect'> {
-    canSelectAll?: boolean;
-    canSelectGroups?: boolean;
-    emptyStateText?: string;
-    loading?: boolean;
-    menuItems?: MenuItemProps[];
-    onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onSelect?: MenuListOnSelect;
-    onSelectAll?: MenuListOnSelectAll;
-    searchable?: boolean;
-    searchPlaceholder?: string;
-    shouldTruncateText?: boolean;
-}
-export interface MenuProps extends Omit<CMenu.RootProps, 'children' | 'onSelect'> {
+import { MenuButtonProps } from './components/MenuButton/menuButton.component';
+import { MenuListOnOpenChangeProps } from './menu.types';
+import { MenuListProps } from './components/MenuList/menuList.types';
+export interface MenuProps extends Omit<CMenu.RootProps, 'children' | 'onSelect' | 'onOpenChange'> {
+    /** Props to customize the menu button trigger. */
     buttonProps?: MenuButtonProps;
+    /** Props to customize the menu list. */
     listProps?: MenuListProps;
+    /** Props to customize the positioner of the menu. */
+    positionerProps?: CMenu.PositionerProps;
+    /**
+     * If true, the menu will be rendered in a Portal.
+     * @default false
+     */
     portalled?: boolean;
+    /** Callback function to be called when the menu is opened or closed. */
+    onOpenChange?: ({ open, allSelectedItems }: MenuListOnOpenChangeProps) => void;
+    /** Data test id for the menu.
+     * @default kibble-menu
+     */
+    'data-testid'?: string;
 }
 interface InternalMenuProps extends MenuProps {
+    /** React element to be used as the trigger for the submenu.
+     * @internal
+     */
     submenuTrigger?: React.ReactNode;
 }
-export declare const Menu: ({ buttonProps, listProps, portalled, submenuTrigger, ...rest }: InternalMenuProps) => React.JSX.Element;
+export declare const Menu: ({ buttonProps, listProps, positionerProps, portalled, submenuTrigger, lazyMount, onOpenChange, ["data-testid"]: dataTestId, ...rest }: InternalMenuProps) => React.JSX.Element;
 export {};

package/dist/types/components/Menu/menu.recipe.d.ts

@@ -1 +1 @@
-export declare const menuRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"trigger" | "content" | "checkboxItem" | "item" | "itemGroupLabel" | "triggerItem", import('@chakra-ui/react').SlotRecipeVariantRecord<"trigger" | "content" | "checkboxItem" | "item" | "itemGroupLabel" | "triggerItem">>;
+export declare const menuRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "arrow" | "arrowTip" | "trigger" | "positioner" | "separator" | "indicator" | "contextTrigger" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "triggerItem" | "itemCommand" | "checkboxItem", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "arrow" | "arrowTip" | "trigger" | "positioner" | "separator" | "indicator" | "contextTrigger" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "triggerItem" | "itemCommand" | "checkboxItem">>;

package/dist/types/components/Menu/menu.types.d.ts

@@ -0,0 +1,17 @@
+import { MenuItemProps } from './components/MenuItem/menuItem.component';
+export type MenuListOnCloseProps = {
+    allSelectedItems?: MenuItemProps[];
+};
+export type MenuListOnSelectProps = {
+    item: MenuItemProps;
+    allSelectedItems: MenuItemProps[];
+};
+export type MenuListOnSelectAllProps = {
+    allSelectedItems: MenuItemProps[];
+};
+export type MenuListOnSelect = ((props: MenuListOnSelectProps) => void) | ((props: MenuListOnSelectProps) => Promise<void>);
+export type MenuListOnSelectAll = ((props: MenuListOnSelectAllProps) => void) | ((props: MenuListOnSelectAllProps) => Promise<void>);
+export type MenuListOnOpenChangeProps = {
+    open: boolean;
+    allSelectedItems: MenuItemProps[];
+};

package/dist/types/components/Modal/components/ModalFooter/modalFooter.component.d.ts

@@ -1,14 +1,37 @@
 import { default as React } from 'react';
 import { Dialog } from '@chakra-ui/react/dialog';
 export interface ModalFooterProps extends Dialog.FooterProps {
+    /** Content to be rendered in the footer. */
     children?: React.ReactNode;
+    /** If true, the submit button will be displayed as a destructive button.
+     * @default false
+     */
     destructive?: boolean;
+    /** If true, the footer will be disabled. */
     disabled?: boolean;
+    /** If true, the cancel button will not be displayed.
+     * @default false
+     */
     hideCancel?: boolean;
+    /** If true, the submit button will be displayed with a loading state. */
     loading?: boolean;
+    /** Text to display in the loading state. */
     loadingText?: string;
+    /** Text to display in the cancel button. */
+    cancelText?: string;
+    /** Callback function to be called when the cancel button is clicked. */
     onCancel?: () => void;
+    /** Callback function to be called when the submit button is clicked. */
     onSubmit?: () => void | Promise<void>;
+    /** Text to display in the submit button. */
     submitText?: string;
+    /** Position of the buttons.
+     * @default space-between
+     */
+    buttonPosition?: 'start' | 'end' | 'space-between';
+    /** Data test id for the footer.
+     * @default kibble-modal-footer
+     */
+    'data-testid'?: string;
 }
-export declare const ModalFooter: ({ children, destructive, disabled, hideCancel, loading, loadingText, onCancel, onSubmit, submitText, ...rest }: ModalFooterProps) => React.JSX.Element;
+export declare const ModalFooter: ({ children, destructive, disabled, hideCancel, loading, loadingText, onCancel, onSubmit, submitText, cancelText, buttonPosition, ["data-testid"]: dataTestId, ...rest }: ModalFooterProps) => React.JSX.Element;

package/dist/types/components/Modal/modal.component.d.ts

@@ -4,17 +4,62 @@ import { ConditionalValue } from '@chakra-ui/react/styled-system';
 import { ModalFooterProps } from './components/ModalFooter/modalFooter.component';
 import { HeadingProps } from '../Heading/heading.component';
 import { ModalMotionPreset, ModalPlacement, ModalSize } from './modal.types';
+import { ButtonProps } from '../Button/button.component';
 export interface ModalProps extends Dialog.RootProps {
+    /** Props to customize the default footer. If a custom footer is needed, you can use the `children` prop to build your own. */
     footerProps?: ModalFooterProps;
+    /**
+     * Whether to use full screen on mobile devices.
+     * @default true
+     */
     fullScreenMobile?: boolean;
+    /** The header of the modal. */
     header?: React.ReactNode;
+    /** Props to customize the header when passed as a string. */
     headerProps?: HeadingProps;
+    /**
+     * Whether to hide the close button.
+     * @default false
+     */
     hideCloseButton?: boolean;
+    /** Props to customize the close button. */
+    closeButtonProps?: Omit<ButtonProps, 'iconName' | 'onClick'>;
+    /**
+     * Whether to hide the modal footer.
+     * @default false
+     */
     hideFooter?: boolean;
+    /** The animation preset for the modal.
+     * @default slide-in-bottom
+     */
     motionPreset?: ModalMotionPreset;
+    /** The placement of the modal.
+     * @default center
+     */
     placement?: ModalPlacement;
+    /**
+     * Whether to show the expand button.
+     * @default false
+     */
     showExpandButton?: boolean;
+    /** The size of the modal.
+     * @default md
+     */
     size?: ConditionalValue<ModalSize>;
+    /** The element used to open the modal. If no trigger is provided, the modal will need to be controlled with the `open` and `onOpenChange` props. */
     trigger?: React.ReactNode;
+    /**
+     * Whether to render the modal in a portal. Set to false if this modal is nested inside another modal.
+     * @default true
+     */
+    portalled?: boolean;
+    /** Props to customize the content of the modal. */
+    contentProps?: Dialog.ContentProps;
+    /** Props to customize the positioner of the modal. */
+    positionerProps?: Dialog.PositionerProps;
+    /** Data test id for the modal.
+     * @default kibble-modal
+     */
+    'data-testid'?: string;
 }
-export declare const Modal: ({ children, footerProps, fullScreenMobile, header, headerProps, hideCloseButton, hideFooter, motionPreset, placement, showExpandButton, size, trigger, ...rest }: ModalProps) => React.JSX.Element;
+export declare const Modal: ({ children, footerProps, fullScreenMobile, header, headerProps, hideCloseButton, closeButtonProps, hideFooter, motionPreset, placement, showExpandButton, size, trigger, ["data-testid"]: dataTestId, portalled, contentProps, positionerProps, ...rest }: ModalProps) => React.JSX.Element;

package/dist/types/components/Modal/modal.recipe.d.ts

@@ -1,8 +1,8 @@
-export declare const modalRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "root" | "content" | "positioner" | "footer" | "header" | "title" | "closeTrigger" | "backdrop" | "actionTrigger", {
+export declare const modalRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "content" | "trigger" | "positioner" | "description" | "footer" | "header" | "title" | "closeTrigger" | "backdrop", {
     expanded: {
         true: {
             backdrop: {
-                background: "{colors.neutral.100}";
+                background: "background.subtle";
             };
             content: {
                 borderRadius: "none";

package/dist/types/components/NotificationCounter/notificationCounter.component.d.ts

@@ -2,9 +2,27 @@ import { default as React } from 'react';
 import { FlexProps } from '@chakra-ui/react/flex';
 import { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';
 export interface NotificationCounterProps extends FlexProps {
+    /** Value of the notification counter. If count is greater than 99, the count will be hidden and a special indicator will take its place. */
     count?: number;
+    /** If true, the notification counter will show a spinner.
+     * @default false
+     */
+    loading?: boolean;
+    /** Whether or not to show the counter label. If the size is xs, by default the count label won't be shown.
+     * @default true
+     */
     showCount?: boolean;
+    /** Size of the notification counter
+     * @default md
+     */
     size?: NotificationCounterSize;
+    /** Color variant for the notification counter
+     * @default red
+     */
     variant?: NotificationCounterVariant;
+    /** Data test id for the notification counter.
+     * @default kibble-notification-counter
+     */
+    'data-testid'?: string;
 }
-export declare const NotificationCounter: ({ count, showCount, size, variant, }: NotificationCounterProps) => React.JSX.Element;
+export declare const NotificationCounter: ({ count, loading, showCount, size, variant, ["data-testid"]: dataTestId, ...rest }: NotificationCounterProps) => React.JSX.Element;

package/dist/types/components/NotificationCounter/notificationCounter.records.d.ts

@@ -1 +1,6 @@
+import { SpinnerSize } from '../Spinner/spinner.types';
+import { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';
+import { TypographyVariant } from '../../shared/types';
 export declare const MAX_COUNT = 99;
+export declare const notificationCounterSpinnerSize: Record<NotificationCounterSize, SpinnerSize | null>;
+export declare const spinnerVariantToNotificationCounterVariant: Record<NotificationCounterVariant, TypographyVariant>;

package/dist/types/components/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './numberInput.component';
+export * from './numberInput.types';

package/dist/types/components/NumberInput/numberInput.component.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
+import { NumberInputRootProps as CNumberInputRootProps, NumberInputValueChangeDetails } from '@chakra-ui/react/number-input';
+import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
+export interface NumberInputProps extends WithFormControlProps, CNumberInputRootProps {
+    /** Ref to the number input element. */
+    inputRef?: React.Ref<HTMLInputElement | null>;
+    /** Left addon element. */
+    leftAddon?: React.ReactNode;
+    /** Left element inside the input. */
+    leftElement?: React.ReactNode;
+    /**
+     * If true, the input will render a contrasting variant.
+     * @default false
+     */
+    onContrast?: boolean;
+    /** Placeholder text for the number input field. */
+    placeholder?: string;
+    /** Right addon element. */
+    rightAddon?: React.ReactNode;
+    /** Right element inside the input. */
+    rightElement?: React.ReactNode;
+    /**
+     * If true, the input will show the increment and decrement buttons.
+     * @default false
+     */
+    showControls?: boolean;
+    /** Size of the number input.
+     * @default md
+     */
+    size?: FormControlSize;
+    /** Data test id for the number input.
+     * @default kibble-number-input
+     */
+    'data-testid'?: string;
+    /** Callback function when the input value changes. */
+    onValueChange?: (details: NumberInputValueChangeDetails) => void;
+}
+declare const WrappedNumberInput: React.FC<NumberInputProps>;
+export { WrappedNumberInput as NumberInput };

package/dist/types/components/NumberInput/numberInput.recipe.d.ts

@@ -0,0 +1,21 @@
+export declare const numberInputRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "input" | "root" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
+    size: {
+        sm: {
+            root: import('@chakra-ui/react').SystemStyleObject;
+        };
+        md: {
+            root: import('@chakra-ui/react').SystemStyleObject;
+        };
+        lg: {
+            root: import('@chakra-ui/react').SystemStyleObject;
+        };
+    };
+    variant: {
+        default: {
+            input: import('@chakra-ui/react').SystemStyleObject;
+        };
+        onContrast: {
+            input: import('@chakra-ui/react').SystemStyleObject;
+        };
+    };
+}>;

package/dist/types/components/NumberInput/numberInput.types.d.ts

@@ -0,0 +1,4 @@
+export interface NumberInputValueChangeDetails {
+    value: string;
+    valueAsNumber: number;
+}

package/dist/types/components/Picture/picture.component.d.ts

@@ -1,7 +1,15 @@
 import { default as React } from 'react';
 import { ImageProps } from '@chakra-ui/react/image';
 export interface PictureProps extends ImageProps {
+    /** A webp file source. If no webp source is provided, the src file will be used. */
     webpSrc?: string;
+    /** A jpg/png file source. */
     src: string;
+    /** Data test id for the picture.
+     * @default kibble-picture
+     */
+    'data-testid'?: string;
+    /** Ref to the image element. */
+    ref?: React.RefObject<HTMLImageElement | null>;
 }
-export declare const Picture: ({ src, webpSrc, ...rest }: PictureProps) => React.JSX.Element;
+export declare const Picture: ({ src, webpSrc, ["data-testid"]: dataTestId, ref, ...rest }: PictureProps) => React.JSX.Element;