@kroo-web/design-system 1.0.39 → 1.0.41

package/dist/esm/product/components/Button/button.stories.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react';
 import { Button } from '.';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").IButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;
 export default _default;
 type Story = StoryObj<typeof Button>;
+export declare const GeneralUsage: Story;
+export declare const PolymorphicButton: Story;
+export declare const OnlyIcon: Story;
 export declare const DefaultVariants: Story;
 export declare const ActionVariants: Story;
+export declare const TextVariants: Story;
 export declare const DefaultOnlyIcons: Story;
 export declare const ActionOnlyIcons: Story;
 export declare const IconsAndText: Story;

package/dist/esm/product/components/Button/index.d.ts

@@ -6,15 +6,36 @@ export type TButtonDefaultProps = {
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
 };
 export type TActionButtonProps = {
+    /**
+    * The size changing variant of the button.
+    */
     visualType?: "action";
+    /**
+     * The colour changing variant of the button.
+     */
     variant?: "standard" | "secondary" | "tertiary" | "ghost" | "danger";
 };
-type ConditionalProps = TButtonDefaultProps | TActionButtonProps;
+export type TTextButtonProps = {
+    visualType?: "text";
+    variant?: "primary" | "secondary";
+};
+type ConditionalProps = TButtonDefaultProps | TActionButtonProps | TTextButtonProps;
 export interface IButtonOwnProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+    /**
+     * Polymorphic prop to define the element type of the button, currently
+     * we only support 2 types: button and span.
+     */
     as?: "button" | "span";
+    /**
+     * Appends the className to the button element.
+     */
     className?: string;
+    /**
+     * To be used when the contents of the button is only an icon this props
+     * will correct the padding as the padding is different to a button that includes text.
+     */
     onlyIcon?: boolean;
 }
-export type IButtonProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<IButtonOwnProps, T> & ConditionalProps;
-export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, variant, className, visualType, onlyIcon, ...rest }: IButtonProps<T>): React.JSX.Element;
+export type TButtonProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<IButtonOwnProps, T> & ConditionalProps;
+export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, variant, className, visualType, onlyIcon, ...rest }: TButtonProps<T>): React.JSX.Element;
 export {};

package/dist/esm/product/components/Callout/Callout.stories.d.ts

@@ -6,5 +6,5 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 }>;
 export default _default;
 type Story = StoryObj<typeof Callout.Root>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Types: Story;

package/dist/esm/product/components/Columns/Columns.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { Columns } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TColumnsProps>;
+export default _default;
+type Story = StoryObj<typeof Columns>;
+export declare const GeneralUsage: Story;

package/dist/esm/product/components/DatePicker/DatePicker.stories.d.ts

@@ -3,6 +3,6 @@ import { DatePicker } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TDatePicker<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof DatePicker>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Helper: Story;
 export declare const Error: Story;

package/dist/esm/product/components/Disclosure/Disclosure.stories.d.ts

@@ -3,4 +3,4 @@ import { Disclosure } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TDisclosureProps>;
 export default _default;
 type Story = StoryObj<typeof Disclosure>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;

package/dist/esm/product/components/Form/Form.stories.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { Form } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, React.HTMLProps<HTMLFormElement> & {
+    children?: React.ReactNode;
+} & {
+    methods: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues>;
+    onSubmit: (values: import("react-hook-form").FieldValues) => void;
+}>;
+export default _default;
+type Story = StoryObj<typeof Form>;
+export declare const GeneralUsage: Story;

package/dist/esm/product/components/Loading/Loading.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Loading } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TLoadingProps>;
+export default _default;
+type Story = StoryObj<typeof Loading>;
+export declare const GeneralUsage: Story;
+export declare const Sizes: Story;

package/dist/esm/product/components/Loading/Loading.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/product/components/Loading/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare const sizes: {
+    small: string;
+    medium: string;
+    large: string;
+    full: string;
+};
+export type TLoadingProps = {
+    size?: keyof typeof sizes;
+};
+export declare const Loading: ({ size }: TLoadingProps) => React.JSX.Element;
+export {};

package/dist/esm/product/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Modal } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TModalControlProps>;
+export default _default;
+type Story = StoryObj<typeof Modal.Control>;
+export declare const GeneralUsage: Story;
+export declare const MultipleModals: Story;

package/dist/esm/product/components/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/product/components/Modal/index.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { TButtonProps } from "../Button";
+export type TUseModalProps = {
+    activeModal: string;
+    isOpen: boolean;
+    open: (value: string) => void;
+    close: () => void;
+};
+export declare const useModal: import("zustand").UseBoundStore<import("zustand").StoreApi<TUseModalProps>>;
+export type TModalContentProps = {
+    children: React.ReactNode;
+    value: string;
+};
+export type TModalControlProps = {
+    children: React.ReactNode;
+    value: string;
+} & TButtonProps;
+export type TModalHeaderProps = {
+    title: string;
+};
+export declare const Modal: {
+    Content: ({ value, children }: TModalContentProps) => React.ReactPortal;
+    Control: ({ value, children, ...rest }: TModalControlProps) => React.JSX.Element;
+    Header: ({ title }: TModalHeaderProps) => React.JSX.Element;
+};

package/dist/esm/product/components/NumberField/numberField.stories.d.ts

@@ -4,7 +4,7 @@ import { NumberField } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TNumberFieldProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof NumberField>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Error: {
     render: () => React.JSX.Element;
 };

package/dist/esm/product/components/ProgressIndicator/ProgressIndicator.stories.d.ts

@@ -3,5 +3,5 @@ import { ProgressIndicator } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TProgressIndicatorProps>;
 export default _default;
 type Story = StoryObj<typeof ProgressIndicator>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Size: Story;

package/dist/esm/product/components/ProgressIndicator/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export type TProgressIndicatorProps = {
     label?: string;
     size?: "small" | "medium" | "full-width";
-    current: number;
-    max: number;
+    current?: number;
+    max?: number;
 };
 export declare const ProgressIndicator: ({ label, size, current, max, }: TProgressIndicatorProps) => React.JSX.Element;

package/dist/esm/product/components/RadioGroup/radioGroup.stories.d.ts

@@ -7,5 +7,5 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 } & Omit<import("@radix-ui/react-radio-group").RadioGroupProps, "name">>;
 export default _default;
 type Story = StoryObj<typeof RadioGroup.Root>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Error: Story;

package/dist/esm/product/components/Range/range.stories.d.ts

@@ -3,6 +3,6 @@ import { Range } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TRangeProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof Range>;
-export declare const Default: Story;
-export declare const Error: Story;
+export declare const GeneralUsage: Story;
+export declare const Labels: Story;
 export declare const Helper: Story;

package/dist/esm/product/components/Select/select.stories.d.ts

@@ -3,5 +3,5 @@ import { Select } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TSelectProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof Select>;
-export declare const Default: Story;
-export declare const Error: Story;
+export declare const GeneralUsage: Story;
+export declare const Labeling: Story;

package/dist/esm/product/components/TextField/textField.stories.d.ts

@@ -3,7 +3,7 @@ import { TextField } from ".";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TTextFieldProps<import("react-hook-form").FieldValues>>;
 export default _default;
 type Story = StoryObj<typeof TextField>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Error: Story;
 export declare const HelperText: Story;
 export declare const RightContent: Story;

package/dist/esm/product/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Toast } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").TToastRootProps>;
+export default _default;
+type Story = StoryObj<typeof Toast>;
+export declare const GeneralUsage: Story;
+export declare const Variants: Story;

package/dist/esm/product/components/Toast/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type TToastRootProps = {
+    children: React.ReactNode;
+};
+export type TToastTitleProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+export type TToastDescriptionProps = {
+    children: React.ReactNode;
+};
+export declare const Toast: {
+    Root: ({ children }: TToastRootProps) => React.JSX.Element;
+    Title: ({ className, children }: TToastTitleProps) => React.JSX.Element;
+    Description: ({ children }: TToastDescriptionProps) => React.JSX.Element;
+};

package/dist/esm/product/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { Tooltip } from ".";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@radix-ui/react-tooltip").TooltipProps>;
+export default _default;
+type Story = StoryObj<typeof Tooltip>;
+export declare const GeneralUsage: Story;
+export declare const OpenByDefault: Story;

package/dist/esm/product/components/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/product/components/Tooltip/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+export type TTooltipRootProps = React.ComponentProps<typeof RadixTooltip.Root>;
+export type TTooltipTriggerProps = React.ComponentProps<typeof RadixTooltip.Trigger>;
+export type TTooltipContentProps = React.ComponentProps<typeof RadixTooltip.Content>;
+export declare const Tooltip: {
+    Root: ({ children, ...rest }: TTooltipRootProps) => React.JSX.Element;
+    Trigger: ({ className, children, ...rest }: TTooltipTriggerProps) => React.JSX.Element;
+    Content: ({ className, children, ...rest }: TTooltipContentProps) => React.JSX.Element;
+};

package/dist/esm/product/components/Typography/typography.stories.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 } & Omit<any, "ref">>;
 export default _default;
 type Story = StoryObj<typeof Typography>;
-export declare const Default: Story;
+export declare const GeneralUsage: Story;
 export declare const Variants: Story;
 export declare const Polymorphic: Story;
 export declare const DangerousHTML: Story;

package/dist/esm/product/components/index.d.ts

@@ -1,12 +1,17 @@
 export * from "./Button";
+export * from './Callout';
 export * from "./Columns";
 export * from "./DatePicker";
 export * from "./Disclosure";
 export * from "./Form";
+export * from "./Loading";
+export * from "./Modal";
 export * from "./NumberField";
+export * from "./ProgressIndicator";
 export * from "./RadioGroup";
 export * from "./Range";
 export * from "./Select";
 export * from './TextField';
+export * from "./Toast";
+export * from './Tooltip';
 export * from './Typography';
-export * from './Callout';

package/dist/styles/dev.global.css

@@ -1,6 +1,7 @@
 
 /* Import all tokens from each section of Design System */
 @import "./tokens/dev.tokens.css";
+@import "../product/components/Toast/toast-base.css";
 
 * {
   box-sizing: border-box;
@@ -18,3 +19,4 @@
   white-space: nowrap; 
   width: 1px;
 }
+

package/dist/styles/global.css

@@ -1,6 +1,7 @@
 
 /* Import all tokens from each section of Design System */
 @import "./tokens/index.css";
+@import "../product/components/Toast/toast-base.css";
 
 * {
   box-sizing: border-box;
@@ -18,3 +19,6 @@
   white-space: nowrap; 
   width: 1px;
 }
+
+
+

package/dist/styles/tokens/product.css

@@ -6,6 +6,7 @@
   /* Colors */
   --product-error: #D82F4A;
   --product-success: #31A465;
+  --product-info: #1274C4;
   --product-disabled: #B3B3B3;
   --product-black: #000000;
   --product-focus: #1274C4;

package/dist/types.d.ts

@@ -1,7 +1,9 @@
 import React$1, { PropsWithChildren, HTMLProps, ReactNode, DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { MaterialSymbolProps } from 'react-material-symbols';
 import { FieldValues, Path, UseFormReturn, FieldError } from 'react-hook-form';
+import * as zustand from 'zustand';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
-import { MaterialSymbolProps } from 'react-material-symbols';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
 
 type Merge<T, U> = Omit<T, keyof U> & U;
 type PropsWithAs<P, T extends React.ElementType> = P & {
@@ -15,17 +17,62 @@ type TButtonDefaultProps = {
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
 };
 type TActionButtonProps = {
+    /**
+    * The size changing variant of the button.
+    */
     visualType?: "action";
+    /**
+     * The colour changing variant of the button.
+     */
     variant?: "standard" | "secondary" | "tertiary" | "ghost" | "danger";
 };
-type ConditionalProps = TButtonDefaultProps | TActionButtonProps;
+type TTextButtonProps = {
+    visualType?: "text";
+    variant?: "primary" | "secondary";
+};
+type ConditionalProps = TButtonDefaultProps | TActionButtonProps | TTextButtonProps;
 interface IButtonOwnProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+    /**
+     * Polymorphic prop to define the element type of the button, currently
+     * we only support 2 types: button and span.
+     */
     as?: "button" | "span";
+    /**
+     * Appends the className to the button element.
+     */
     className?: string;
+    /**
+     * To be used when the contents of the button is only an icon this props
+     * will correct the padding as the padding is different to a button that includes text.
+     */
     onlyIcon?: boolean;
 }
-type IButtonProps<T extends React$1.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<IButtonOwnProps, T> & ConditionalProps;
-declare function Button<T extends React$1.ElementType = typeof defaultElement>({ as, children, variant, className, visualType, onlyIcon, ...rest }: IButtonProps<T>): React$1.JSX.Element;
+type TButtonProps<T extends React$1.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<IButtonOwnProps, T> & ConditionalProps;
+declare function Button<T extends React$1.ElementType = typeof defaultElement>({ as, children, variant, className, visualType, onlyIcon, ...rest }: TButtonProps<T>): React$1.JSX.Element;
+
+type TIconProps = {
+    size?: "regular" | "large" | "xlarge";
+    weight?: "light" | "normal" | "medium";
+} & Omit<MaterialSymbolProps, "size" | "weight">;
+declare const Icon: ({ size, weight, ...rest }: TIconProps) => React$1.JSX.Element;
+
+type TTypographyProps<C extends React$1.ElementType = 'p'> = {
+    as?: C;
+    variant?: 'form-label' | 'form-helper' | 'form-button' | 'form-input-normal' | 'form-input-semi-bold' | 'content-regular-light' | 'content-regular' | 'content-regular-semi-bold' | 'content-large-light' | 'content-large' | 'content-large-semi-bold' | 'content-title-light' | 'content-title' | 'content-title-semi-bold';
+    children?: React$1.ReactNode;
+} & React$1.ComponentPropsWithoutRef<C>;
+declare const Typography: <C extends React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> = "p">({ as, variant, children, className, ...rest }: TTypographyProps<C>) => React$1.JSX.Element;
+
+type TCalloutRootProps = {
+    type?: "info" | "warning" | "error";
+};
+type TCalloutIconProps = TIconProps;
+type TCalloutTextProps = TTypographyProps<"p">;
+declare const Callout: {
+    Root: ({ type, children, }: PropsWithChildren<TCalloutRootProps>) => React$1.JSX.Element;
+    Icon: (props: TIconProps) => React$1.JSX.Element;
+    Text: ({ children, ...props }: PropsWithChildren<TCalloutTextProps>) => React$1.JSX.Element;
+};
 
 type TColumnsProps = {
     cols: number;
@@ -55,6 +102,41 @@ type TFormProps<T extends FieldValues> = PropsWithChildren<HTMLProps<HTMLFormEle
 };
 declare const Form: <T extends FieldValues>({ methods, children, onSubmit, ...rest }: TFormProps<T>) => React$1.JSX.Element;
 
+declare const sizes: {
+    small: string;
+    medium: string;
+    large: string;
+    full: string;
+};
+type TLoadingProps = {
+    size?: keyof typeof sizes;
+};
+declare const Loading: ({ size }: TLoadingProps) => React$1.JSX.Element;
+
+type TUseModalProps = {
+    activeModal: string;
+    isOpen: boolean;
+    open: (value: string) => void;
+    close: () => void;
+};
+declare const useModal: zustand.UseBoundStore<zustand.StoreApi<TUseModalProps>>;
+type TModalContentProps = {
+    children: React$1.ReactNode;
+    value: string;
+};
+type TModalControlProps = {
+    children: React$1.ReactNode;
+    value: string;
+} & TButtonProps;
+type TModalHeaderProps = {
+    title: string;
+};
+declare const Modal: {
+    Content: ({ value, children }: TModalContentProps) => React$1.ReactPortal;
+    Control: ({ value, children, ...rest }: TModalControlProps) => React$1.JSX.Element;
+    Header: ({ title }: TModalHeaderProps) => React$1.JSX.Element;
+};
+
 type TNumberFieldProps<T extends FieldValues> = {
     id: string;
     label: string;
@@ -68,6 +150,14 @@ type TNumberFieldProps<T extends FieldValues> = {
 };
 declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React$1.JSX.Element;
 
+type TProgressIndicatorProps = {
+    label?: string;
+    size?: "small" | "medium" | "full-width";
+    current?: number;
+    max?: number;
+};
+declare const ProgressIndicator: ({ label, size, current, max, }: TProgressIndicatorProps) => React$1.JSX.Element;
+
 type TRadioGroupProps<T extends FieldValues> = {
     name: Path<T>;
     label: string;
@@ -130,28 +220,29 @@ type TTextFieldProps<T extends FieldValues> = {
 };
 declare const TextField: <T extends FieldValues>(props: TTextFieldProps<T>) => React$1.JSX.Element;
 
-type TTypographyProps<C extends React$1.ElementType = 'p'> = {
-    as?: C;
-    variant?: 'form-label' | 'form-helper' | 'form-button' | 'form-input-normal' | 'form-input-semi-bold' | 'content-regular-light' | 'content-regular' | 'content-regular-semi-bold' | 'content-large-light' | 'content-large' | 'content-large-semi-bold' | 'content-title-light' | 'content-title' | 'content-title-semi-bold';
-    children?: React$1.ReactNode;
-} & React$1.ComponentPropsWithoutRef<C>;
-declare const Typography: <C extends React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> = "p">({ as, variant, children, className, ...rest }: TTypographyProps<C>) => React$1.JSX.Element;
-
-type TIconProps = {
-    size?: "regular" | "large" | "xlarge";
-    weight?: "light" | "normal" | "medium";
-} & Omit<MaterialSymbolProps, "size" | "weight">;
-declare const Icon: ({ size, weight, ...rest }: TIconProps) => React$1.JSX.Element;
-
-type TCalloutRootProps = {
-    type?: "info" | "warning" | "error";
+type TToastRootProps = {
+    children: React$1.ReactNode;
 };
-type TCalloutIconProps = TIconProps;
-type TCalloutTextProps = TTypographyProps<"p">;
-declare const Callout: {
-    Root: ({ type, children, }: PropsWithChildren<TCalloutRootProps>) => React$1.JSX.Element;
-    Icon: (props: TIconProps) => React$1.JSX.Element;
-    Text: ({ children, ...props }: PropsWithChildren<TCalloutTextProps>) => React$1.JSX.Element;
+type TToastTitleProps = {
+    className?: string;
+    children: React$1.ReactNode;
+};
+type TToastDescriptionProps = {
+    children: React$1.ReactNode;
+};
+declare const Toast: {
+    Root: ({ children }: TToastRootProps) => React$1.JSX.Element;
+    Title: ({ className, children }: TToastTitleProps) => React$1.JSX.Element;
+    Description: ({ children }: TToastDescriptionProps) => React$1.JSX.Element;
+};
+
+type TTooltipRootProps = React$1.ComponentProps<typeof RadixTooltip.Root>;
+type TTooltipTriggerProps = React$1.ComponentProps<typeof RadixTooltip.Trigger>;
+type TTooltipContentProps = React$1.ComponentProps<typeof RadixTooltip.Content>;
+declare const Tooltip: {
+    Root: ({ children, ...rest }: TTooltipRootProps) => React$1.JSX.Element;
+    Trigger: ({ className, children, ...rest }: TTooltipTriggerProps) => React$1.JSX.Element;
+    Content: ({ className, children, ...rest }: TTooltipContentProps) => React$1.JSX.Element;
 };
 
-export { Button, Callout, Columns, DatePicker, Disclosure, Form, type IButtonOwnProps, type IButtonProps, Icon, NumberField, RadioGroup, Range, Select, type TActionButtonProps, type TButtonDefaultProps, type TCalloutIconProps, type TCalloutRootProps, type TCalloutTextProps, type TColumnsProps, type TDatePicker, type TDisclosureProps, type TIconProps, type TItem, type TNumberFieldProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TTextFieldProps, type TTypographyProps, TextField, Typography };
+export { Button, Callout, Columns, DatePicker, Disclosure, Form, type IButtonOwnProps, Icon, Loading, Modal, NumberField, ProgressIndicator, RadioGroup, Range, Select, type TActionButtonProps, type TButtonDefaultProps, type TButtonProps, type TCalloutIconProps, type TCalloutRootProps, type TCalloutTextProps, type TColumnsProps, type TDatePicker, type TDisclosureProps, type TIconProps, type TItem, type TLoadingProps, type TModalContentProps, type TModalControlProps, type TModalHeaderProps, type TNumberFieldProps, type TProgressIndicatorProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TTextButtonProps, type TTextFieldProps, type TToastDescriptionProps, type TToastRootProps, type TToastTitleProps, type TTooltipContentProps, type TTooltipRootProps, type TTooltipTriggerProps, type TTypographyProps, type TUseModalProps, TextField, Toast, Tooltip, Typography, useModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kroo-web/design-system",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "Web design system for Kroo including the components for the marketing site and the product side.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -58,21 +58,24 @@
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.6.17",
     "typescript": "^5.4.2",
-    "vitest": "^1.3.1"
+    "vitest": "^1.3.1",
+    "zod": "^3.22.4"
   },
   "dependencies": {
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "clsx": "^2.1.0",
     "downshift": "^8.5.0",
     "framer-motion": "^11.0.8",
     "postcss": "^8.4.35",
     "react-material-symbols": "^4.4.0",
-    "zod": "^3.22.4"
+    "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "react-hook-form": "^7.51.0",
     "@hookform/resolvers": "^3.3.4",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.51.0",
+    "react-toastify": "^10.0.5"
   }
 }