@ultraviolet/ui 3.0.0-beta.25 → 3.0.0-beta.27

package/dist/components/PieChart/Legends.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Tooltip } from "../Tooltip/index.js";
 import { listPie, listItemPie, toggleBoxPie, bulletPie, colorBullet, labelPie, textPie, linePie, progressiveLinePie, valuePie } from "./styles.css.js";
-import Tooltip$1 from "./Tooltip.js";
+import { Tooltip as Tooltip$1 } from "./Tooltip.js";
 const Legends = ({
   focused,
   data,
@@ -33,5 +33,5 @@ const Legends = ({
   ] }) }, item.id);
 }) });
 export {
-  Legends as default
+  Legends
 };

package/dist/components/PieChart/Tooltip.d.ts

@@ -8,5 +8,5 @@ type TooltipProps = {
         }[] | null;
     };
 };
-declare const Tooltip: ({ data }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default Tooltip;
+export declare const Tooltip: ({ data }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PieChart/Tooltip.js

@@ -15,5 +15,5 @@ const Tooltip = ({
   ] }, detail.name))
 ] }) });
 export {
-  Tooltip as default
+  Tooltip
 };

package/dist/components/PieChart/index.js

@@ -7,7 +7,7 @@ import { useState, useCallback } from "react";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";
 import { Text } from "../Text/index.js";
-import Legends from "./Legends.js";
+import { Legends } from "./Legends.js";
 import { emptyLegendPie, containerPie, contentPie, heightContainerPie } from "./styles.css.js";
 const DEFAULT_CHARTPROPS = {};
 const DEFAULT_MARGIN = {

package/dist/components/Popup/index.js

@@ -222,6 +222,14 @@ const Popup = forwardRef(({
       event.preventDefault();
     }
   }, []);
+  useEffect(() => () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+    }
+  }, []);
   const renderChildren = useCallback(() => {
     if (typeof children === "function") {
       return children({

package/dist/components/ProgressBar/styles.css.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 /* empty css                          */
 var progressContainer = "uv_1pgcd801";
 var customText = "uv_1pgcd802";

package/dist/components/ProgressBar/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var percentageValue = "var(--uv_1taqqht0)";
 export {
   percentageValue

package/dist/components/SelectInput/components/SearchBarDropdown.d.ts

@@ -1,11 +1,9 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { DataType, OptionType } from '../types';
+import type { DataType } from '../types';
 type SearchBarProps = {
     placeholder: string;
     displayedOptions: DataType;
     setSearchBarActive: Dispatch<SetStateAction<boolean>>;
 };
-export declare const getReferenceText: (option: OptionType) => string;
-export declare const searchRegex: (data: OptionType[], query: string) => OptionType[];
 export declare const SearchBarDropdown: ({ placeholder, displayedOptions, setSearchBarActive, }: SearchBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectInput/components/SearchBarDropdown.js

@@ -104,14 +104,17 @@ const SearchBarDropdown = ({
     }
   };
   useEffect(() => {
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
       searchInputRef.current?.focus();
     }, 50);
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
   }, []);
   return /* @__PURE__ */ jsx(TextInput, { "aria-label": "search-bar", className: searchBar, "data-testid": "search-bar", onBlur: () => setSearchBarActive(false), onChange: (event) => handleChange(event.target.value), onFocus: () => setSearchBarActive(true), onKeyDown: (event) => handleKeyDown(event.key, searchInput), placeholder, prefix: /* @__PURE__ */ jsx(SearchIcon, { sentiment: "neutral", size: "small" }), ref: searchInputRef, size: "medium", value: searchInput });
 };
 export {
-  SearchBarDropdown,
-  getReferenceText,
-  searchRegex
+  SearchBarDropdown
 };

package/dist/components/SelectableCard/styles.css.js

@@ -1,5 +1,4 @@
 /* empty css                                 */
-/* empty css                             */
 /* empty css                                    */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/components/SelectableCard/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var inputDisplay = "var(--uv_18vc4d30)";
 var labelDisplay = "var(--uv_18vc4d31)";
 var widthSelectable = "var(--uv_18vc4d32)";

package/dist/components/Stepper/index.js

@@ -16,7 +16,7 @@ const Stepper = ({
   separator = true,
   style
 }) => {
-  const cleanChildren = Children.toArray(children).filter(isValidElement);
+  const cleanChildren = Children.toArray(children).filter((child) => isValidElement(child));
   const lastStep = Children.count(cleanChildren) - 1;
   return /* @__PURE__ */ jsx(StepperProvider, { animated, interactive, labelPosition, selected, separator, size, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${stepperContainer({
     labelPosition,

package/dist/components/TagList/index.js

@@ -96,7 +96,7 @@ const TagList = ({
       const parentWidth = tagsContainer?.parentElement?.offsetWidth || 0;
       if (visibleTags.length > 1 && hiddenTags.length > 0 && tagsContainerWidth + newPopoverTriggerWidth > parentWidth) {
         const visibleTagsCopy = visibleTags.filter((_, index) => index < visibleTags.length - 1);
-        const tagToMove = visibleTags[visibleTags.length - 1];
+        const tagToMove = visibleTags[visibleTags.length - 1] ?? "";
         setVisibleTags(visibleTagsCopy);
         setHiddenTags([tagToMove, ...hiddenTags]);
       }

package/dist/components/Text/constants.d.ts

@@ -0,0 +1,9 @@
+import { typography } from '../../theme';
+export declare const PROMINENCES: {
+    default: string;
+    strong: string;
+    stronger: string;
+    weak: string;
+};
+export type TextVariant = keyof typeof typography;
+export declare const textVariants: TextVariant[];

package/dist/components/Text/index.d.ts

@@ -1,12 +1,9 @@
 import type { CSSProperties, ElementType, ReactNode } from 'react';
 import type { ExtendedColor } from '../../theme';
-import { typography } from '../../theme';
-import type { PROMINENCES } from './constant';
+import type { PROMINENCES, TextVariant } from './constants';
 type ProminenceProps = keyof typeof PROMINENCES;
 type PlacementProps = CSSProperties['textAlign'];
 type WhiteSpaceProps = CSSProperties['whiteSpace'];
-type TextVariant = keyof typeof typography;
-export declare const textVariants: TextVariant[];
 type TextProps = {
     className?: string;
     children: ReactNode;

package/dist/components/Text/style.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var text = createRuntimeFn({ defaultClassName: "uv_m4c9ow0", variantClassNames: { strikeThrough: { true: "uv_m4c9ow1", false: "uv_m4c9ow2" }, italic: { true: "uv_m4c9ow3", false: "uv_m4c9ow4" }, underline: { true: "uv_m4c9ow5", false: "uv_m4c9ow6" }, oneLine: { true: "uv_m4c9ow7", false: "uv_m4c9ow8" }, sentiment: { primary: "uv_m4c9ow9", secondary: "uv_m4c9owa", neutral: "uv_m4c9owb", success: "uv_m4c9owc", danger: "uv_m4c9owd", warning: "uv_m4c9owe", info: "uv_m4c9owf", black: "uv_m4c9owg", white: "uv_m4c9owh" }, prominence: { "default": "uv_m4c9owi", strong: "uv_m4c9owj", stronger: "uv_m4c9owk", weak: "uv_m4c9owl" }, variant: { body: "uv_m4c9owm", bodySmall: "uv_m4c9own", bodySmallStrong: "uv_m4c9owo", bodySmallStronger: "uv_m4c9owp", bodyStrong: "uv_m4c9owq", bodyStronger: "uv_m4c9owr", caption: "uv_m4c9ows", captionSmall: "uv_m4c9owt", captionSmallStrong: "uv_m4c9owu", captionSmallStronger: "uv_m4c9owv", captionStrong: "uv_m4c9oww", captionStronger: "uv_m4c9owx", code: "uv_m4c9owy", codeStrong: "uv_m4c9owz", codeStronger: "uv_m4c9ow10", heading: "uv_m4c9ow11", headingLarge: "uv_m4c9ow12", headingLargeStrong: "uv_m4c9ow13", headingLargeStronger: "uv_m4c9ow14", headingSmall: "uv_m4c9ow15", headingSmallStrong: "uv_m4c9ow16", headingSmallStronger: "uv_m4c9ow17", headingStrong: "uv_m4c9ow18", headingStronger: "uv_m4c9ow19" }, disabled: { true: "uv_m4c9ow1a", false: "uv_m4c9ow1b" } }, defaultVariants: { strikeThrough: false, italic: false, underline: false, oneLine: false, sentiment: void 0, prominence: "default", variant: "body", disabled: false }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_m4c9ow1c"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_m4c9ow1d"], [{ sentiment: "primary", prominence: "stronger", disabled: false }, "uv_m4c9ow1e"], [{ sentiment: "primary", prominence: "weak", disabled: false }, "uv_m4c9ow1f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_m4c9ow1g"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_m4c9ow1h"], [{ sentiment: "secondary", prominence: "stronger", disabled: false }, "uv_m4c9ow1i"], [{ sentiment: "secondary", prominence: "weak", disabled: false }, "uv_m4c9ow1j"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_m4c9ow1k"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_m4c9ow1l"], [{ sentiment: "danger", prominence: "stronger", disabled: false }, "uv_m4c9ow1m"], [{ sentiment: "danger", prominence: "weak", disabled: false }, "uv_m4c9ow1n"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_m4c9ow1o"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_m4c9ow1p"], [{ sentiment: "info", prominence: "stronger", disabled: false }, "uv_m4c9ow1q"], [{ sentiment: "info", prominence: "weak", disabled: false }, "uv_m4c9ow1r"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_m4c9ow1s"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_m4c9ow1t"], [{ sentiment: "success", prominence: "stronger", disabled: false }, "uv_m4c9ow1u"], [{ sentiment: "success", prominence: "weak", disabled: false }, "uv_m4c9ow1v"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_m4c9ow1w"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_m4c9ow1x"], [{ sentiment: "warning", prominence: "stronger", disabled: false }, "uv_m4c9ow1y"], [{ sentiment: "warning", prominence: "weak", disabled: false }, "uv_m4c9ow1z"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_m4c9ow20"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_m4c9ow21"], [{ sentiment: "neutral", prominence: "stronger", disabled: false }, "uv_m4c9ow22"], [{ sentiment: "neutral", prominence: "weak", disabled: false }, "uv_m4c9ow23"], [{ sentiment: "black", prominence: "default", disabled: false }, "uv_m4c9ow24"], [{ sentiment: "black", prominence: "strong", disabled: false }, "uv_m4c9ow25"], [{ sentiment: "black", prominence: "stronger", disabled: false }, "uv_m4c9ow26"], [{ sentiment: "black", prominence: "weak", disabled: false }, "uv_m4c9ow27"], [{ sentiment: "white", prominence: "default", disabled: false }, "uv_m4c9ow28"], [{ sentiment: "white", prominence: "strong", disabled: false }, "uv_m4c9ow29"], [{ sentiment: "white", prominence: "stronger", disabled: false }, "uv_m4c9ow2a"], [{ sentiment: "white", prominence: "weak", disabled: false }, "uv_m4c9ow2b"], [{ sentiment: "primary", prominence: "default", disabled: true }, "uv_m4c9ow2c"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_m4c9ow2d"], [{ sentiment: "primary", prominence: "stronger", disabled: true }, "uv_m4c9ow2e"], [{ sentiment: "primary", prominence: "weak", disabled: true }, "uv_m4c9ow2f"], [{ sentiment: "secondary", prominence: "default", disabled: true }, "uv_m4c9ow2g"], [{ sentiment: "secondary", prominence: "strong", disabled: true }, "uv_m4c9ow2h"], [{ sentiment: "secondary", prominence: "stronger", disabled: true }, "uv_m4c9ow2i"], [{ sentiment: "secondary", prominence: "weak", disabled: true }, "uv_m4c9ow2j"], [{ sentiment: "danger", prominence: "default", disabled: true }, "uv_m4c9ow2k"], [{ sentiment: "danger", prominence: "strong", disabled: true }, "uv_m4c9ow2l"], [{ sentiment: "danger", prominence: "stronger", disabled: true }, "uv_m4c9ow2m"], [{ sentiment: "danger", prominence: "weak", disabled: true }, "uv_m4c9ow2n"], [{ sentiment: "info", prominence: "default", disabled: true }, "uv_m4c9ow2o"], [{ sentiment: "info", prominence: "strong", disabled: true }, "uv_m4c9ow2p"], [{ sentiment: "info", prominence: "stronger", disabled: true }, "uv_m4c9ow2q"], [{ sentiment: "info", prominence: "weak", disabled: true }, "uv_m4c9ow2r"], [{ sentiment: "success", prominence: "default", disabled: true }, "uv_m4c9ow2s"], [{ sentiment: "success", prominence: "strong", disabled: true }, "uv_m4c9ow2t"], [{ sentiment: "success", prominence: "stronger", disabled: true }, "uv_m4c9ow2u"], [{ sentiment: "success", prominence: "weak", disabled: true }, "uv_m4c9ow2v"], [{ sentiment: "warning", prominence: "default", disabled: true }, "uv_m4c9ow2w"], [{ sentiment: "warning", prominence: "strong", disabled: true }, "uv_m4c9ow2x"], [{ sentiment: "warning", prominence: "stronger", disabled: true }, "uv_m4c9ow2y"], [{ sentiment: "warning", prominence: "weak", disabled: true }, "uv_m4c9ow2z"], [{ sentiment: "neutral", prominence: "default", disabled: true }, "uv_m4c9ow30"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_m4c9ow31"], [{ sentiment: "neutral", prominence: "stronger", disabled: true }, "uv_m4c9ow32"], [{ sentiment: "neutral", prominence: "weak", disabled: true }, "uv_m4c9ow33"], [{ sentiment: "black", prominence: "default", disabled: true }, "uv_m4c9ow34"], [{ sentiment: "black", prominence: "strong", disabled: true }, "uv_m4c9ow35"], [{ sentiment: "black", prominence: "stronger", disabled: true }, "uv_m4c9ow36"], [{ sentiment: "black", prominence: "weak", disabled: true }, "uv_m4c9ow37"], [{ sentiment: "white", prominence: "default", disabled: true }, "uv_m4c9ow38"], [{ sentiment: "white", prominence: "strong", disabled: true }, "uv_m4c9ow39"], [{ sentiment: "white", prominence: "stronger", disabled: true }, "uv_m4c9ow3a"], [{ sentiment: "white", prominence: "weak", disabled: true }, "uv_m4c9ow3b"], [{ prominence: "default", disabled: false }, "uv_m4c9ow3c"], [{ prominence: "strong", disabled: false }, "uv_m4c9ow3d"], [{ prominence: "stronger", disabled: false }, "uv_m4c9ow3e"], [{ prominence: "weak", disabled: false }, "uv_m4c9ow3f"]] });

package/dist/components/Text/variables.css.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 var placementText = "var(--uv_qabug40)";
 var whiteSpaceText = "var(--uv_qabug41)";
 export {

package/dist/components/Toaster/Toaster.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { ToastOptions } from 'react-toastify';
+export declare const toast: {
+    error: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
+    success: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
+    warning: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
+};

package/dist/components/Toaster/Toaster.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { toast as toast$1 } from "react-toastify";
+import { CloseButton } from "./components/CloseButton.js";
+import { Content } from "./components/Content.js";
+const toast = {
+  error: (children, options, containerId) => toast$1.error(/* @__PURE__ */ jsx(Content, { children }), {
+    ...options,
+    closeButton: /* @__PURE__ */ jsx(CloseButton, { sentiment: "danger" }),
+    containerId: containerId ?? "toaster"
+  }),
+  success: (children, options, containerId) => toast$1.success(/* @__PURE__ */ jsx(Content, { children }), {
+    ...options,
+    closeButton: /* @__PURE__ */ jsx(CloseButton, { sentiment: "success" }),
+    containerId: containerId ?? "toaster"
+  }),
+  warning: (children, options, containerId) => toast$1.warn(/* @__PURE__ */ jsx(Content, { children }), {
+    ...options,
+    closeButton: /* @__PURE__ */ jsx(CloseButton, { sentiment: "warning" }),
+    containerId: containerId ?? "toaster"
+  })
+};
+export {
+  toast
+};

package/dist/components/Toaster/ToasterContainer.d.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react';
+import type { ToastOptions } from 'react-toastify';
+type ToastContainerProps = {
+    /**
+     * Whether to display the newest toast on top.
+     * `Default: false`
+     */
+    newestOnTop?: boolean;
+    /**
+     * Limit the number of toast displayed at the same time
+     */
+    limit?: number;
+    /**
+     * Position of the toast container
+     */
+    position?: ToastOptions['position'];
+    'data-testid'?: string;
+    className?: string;
+    /**
+     * Delay before the toast is automatically closed, if not set the default value is 6000ms
+     */
+    autoClose?: number;
+    /**
+     * Set a custom containerId to be able to define multiple ToastContainers
+     */
+    containerId?: string;
+    style?: CSSProperties;
+};
+/**
+ * Display short information about an event that happen in the interface in a floating alert.
+ * Toaster is based on **react-tostify**, you can find a complete documentation
+ * [here](https://fkhadra.github.io/react-toastify/introduction/).
+ *
+ * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
+ * and second the `toast()` function which is used to display the toast.
+ */
+export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, style, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toaster/ToasterContainer.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { ToastContainer as ToastContainer$1, Slide } from "react-toastify";
+import { AUTOCLOSE_DELAY } from "./constants.js";
+import { toaster } from "./styles.css.js";
+const ToastContainer = ({
+  newestOnTop,
+  limit,
+  position = "top-right",
+  "data-testid": dataTestId,
+  className,
+  autoClose,
+  containerId = "toaster",
+  style
+}) => /* @__PURE__ */ jsx(ToastContainer$1, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, style, transition: Slide });
+export {
+  ToastContainer
+};

package/dist/components/Toaster/components/CloseButton.d.ts

@@ -0,0 +1,8 @@
+import type { SENTIMENTS } from '../../../theme';
+type SENTIMENT = (typeof SENTIMENTS)[number];
+type CloseButtonProps = {
+    closeToast?: () => void;
+    sentiment: SENTIMENT;
+};
+export declare const CloseButton: ({ closeToast, sentiment, }: CloseButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toaster/components/CloseButton.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { CloseIcon } from "@ultraviolet/icons";
+import { Button } from "../../Button/index.js";
+import { closeButtonToaster } from "../styles.css.js";
+const CloseButton = ({
+  closeToast,
+  sentiment = "success"
+}) => /* @__PURE__ */ jsx(Button, { "aria-label": "close", className: closeButtonToaster, onClick: closeToast, sentiment, size: "xsmall", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+export {
+  CloseButton
+};

package/dist/components/Toaster/components/Content.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type ContentProps = {
+    children?: ReactNode;
+};
+export declare const Content: ({ children }: ContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toaster/components/Content.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+const Content = ({
+  children
+}) => /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 2, width: "100%", children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "bodySmallStrong", children }) : children });
+export {
+  Content
+};

package/dist/components/Toaster/constants.d.ts

@@ -0,0 +1 @@
+export declare const AUTOCLOSE_DELAY = 6000;

package/dist/components/Toaster/constants.js

@@ -0,0 +1,4 @@
+const AUTOCLOSE_DELAY = 6e3;
+export {
+  AUTOCLOSE_DELAY
+};

package/dist/components/Toaster/index.d.ts

@@ -1,48 +1,6 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { ToastOptions } from 'react-toastify';
-import { Button } from '../Button';
-export declare const toast: {
-    error: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
-    success: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
-    warning: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
-};
-type ToastContainerProps = {
-    /**
-     * Whether to display the newest toast on top.
-     * `Default: false`
-     */
-    newestOnTop?: boolean;
-    /**
-     * Limit the number of toast displayed at the same time
-     */
-    limit?: number;
-    /**
-     * Position of the toast container
-     */
-    position?: ToastOptions['position'];
-    'data-testid'?: string;
-    className?: string;
-    /**
-     * Delay before the toast is automatically closed, if not set the default value is 6000ms
-     */
-    autoClose?: number;
-    /**
-     * Set a custom containerId to be able to define multiple ToastContainers
-     */
-    containerId?: string;
-    style?: CSSProperties;
-};
-/**
- * Display short information about an event that happen in the interface in a floating alert.
- * Toaster is based on **react-tostify**, you can find a complete documentation
- * [here](https://fkhadra.github.io/react-toastify/introduction/).
- *
- * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
- * and second the `toast()` function which is used to display the toast.
- */
-export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, style, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Toast: {
-    Button: ({ variant, className, ...props }: import("react").ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Button: ({ variant, className, ...props }: import("react").ComponentProps<typeof import("..").Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
     Link: ({ ...props }: import("react").ComponentProps<typeof import("..").Link>) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
-export {};
+export { toast } from './Toaster';
+export { ToastContainer } from './ToasterContainer';

package/dist/components/TreeMapChart/Tooltip.d.ts

@@ -0,0 +1,6 @@
+import type { DataType } from './types';
+type TooltipProps = Pick<DataType, 'content' | 'value'> & {
+    'data-testid'?: string;
+};
+export declare const Tooltip: ({ value, content, "data-testid": dataTestId, }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TreeMapChart/Tooltip.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Text } from "../Text/index.js";
+import { treeMapTooltipContainer } from "./styles.css.js";
+const Tooltip = ({
+  value,
+  content,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsxs("div", { className: treeMapTooltipContainer, "data-testid": dataTestId, children: [
+  /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: content }),
+  value ? /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: value }) : null
+] });
+export {
+  Tooltip
+};

package/dist/components/TreeMapChart/index.d.ts

@@ -0,0 +1,18 @@
+import type { TooltipProps, TreeMapSvgProps } from '@nivo/treemap';
+import type { ComponentProps } from 'react';
+import { Tooltip } from './Tooltip';
+import type { DataType } from './types';
+type TreeMapChartProps = {
+    height?: string | number;
+    data: DataType;
+    className?: string;
+    tooltipFunction?: (props: TooltipProps<DataType>['node']['data']) => ComponentProps<typeof Tooltip>;
+    chartProps?: Partial<TreeMapSvgProps<DataType>>;
+    'data-testid'?: string;
+};
+/**
+ * TreeMapChart component is used to display data in a TreeMap chart format. It uses the Nivo library under the hood.
+ * See https://nivo.rocks/treemap/ for more information.
+ */
+export declare const TreeMapChart: ({ height, data, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: TreeMapChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TreeMapChart/index.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { ResponsiveTreeMapHtml } from "@nivo/treemap";
+import { useTheme } from "@ultraviolet/themes";
+import { useMemo, useCallback } from "react";
+import { getDataColors } from "../../helpers/treeMap.js";
+import { Text } from "../Text/index.js";
+import { treeMapContentWrapper } from "./styles.css.js";
+import { Tooltip } from "./Tooltip.js";
+const TreeMapChart = ({
+  height = "537px",
+  // maintains aspect ratio based on standard 1074px width
+  data,
+  tooltipFunction,
+  chartProps,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const DEFAULT_COLOR = theme.colors.primary.text;
+  const colors = useMemo(() => getDataColors(data, theme), [data, theme]);
+  const tooltip = useCallback((props) => {
+    const {
+      value,
+      content
+    } = tooltipFunction ? tooltipFunction(props.node.data) : {
+      content: props.node.data.content,
+      value: props.node.data.value
+    };
+    return /* @__PURE__ */ jsx(Tooltip, { content, value });
+  }, [tooltipFunction]);
+  const nodeComponent = useCallback(({
+    node
+  }) => {
+    const backgroundColor = colors[node.data.id] || DEFAULT_COLOR;
+    const spacing = 4;
+    return /* @__PURE__ */ jsx("div", { className: treeMapContentWrapper, onMouseEnter: node.onMouseEnter, onMouseLeave: node.onMouseLeave, onMouseMove: node.onMouseMove, style: {
+      backgroundColor,
+      height: node.height - spacing,
+      left: node.x + spacing / 2,
+      top: node.y + spacing / 2,
+      width: node.width - spacing
+    }, children: /* @__PURE__ */ jsx(Text, { as: "div", oneLine: true, variant: "captionStrong", children: node.data.content }) });
+  }, [colors, DEFAULT_COLOR]);
+  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
+    height
+  }, children: /* @__PURE__ */ jsx(
+    ResponsiveTreeMapHtml,
+    {
+      animate: false,
+      data,
+      enableParentLabel: false,
+      identity: "id",
+      labelSkipSize: 0,
+      leavesOnly: true,
+      motionConfig: "none",
+      nodeComponent,
+      orientLabel: false,
+      tile: "squarify",
+      tooltip,
+      value: "value",
+      ...chartProps
+    }
+  ) });
+};
+export {
+  TreeMapChart
+};

package/dist/components/TreeMapChart/styles.css.d.ts

@@ -0,0 +1,2 @@
+export declare const treeMapTooltipContainer: string;
+export declare const treeMapContentWrapper: string;

package/dist/components/TreeMapChart/styles.css.js

@@ -0,0 +1,7 @@
+/* empty css                          */
+var treeMapTooltipContainer = "uv_1pnrimq0";
+var treeMapContentWrapper = "uv_1pnrimq1";
+export {
+  treeMapContentWrapper,
+  treeMapTooltipContainer
+};

package/dist/components/TreeMapChart/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type DataType = {
+    id: string;
+    value?: number;
+    content: string | ReactNode;
+    children?: DataType[];
+};

package/dist/components/VerificationCode/constants.d.ts

@@ -10,3 +10,4 @@ export declare const SIZE_WIDTH: {
     readonly small: "300";
     readonly xlarge: "700";
 };
+export declare const verificationCodeSizes: readonly ["small", "medium", "large", "xlarge"];

package/dist/components/VerificationCode/index.d.ts

@@ -1,6 +1,4 @@
 import type { CSSProperties, ReactNode } from 'react';
-type Size = 'small' | 'medium' | 'large' | 'xlarge';
-export declare const verificationCodeSizes: Size[];
 type VerificationCodeProps = {
     disabled?: boolean;
     error?: boolean | string;

package/dist/components/index.d.ts

@@ -70,5 +70,6 @@ export { ToastContainer, toast } from './Toaster';
 export { Toggle } from './Toggle';
 export { ToggleGroup } from './ToggleGroup';
 export { Tooltip } from './Tooltip';
+export { TreeMapChart } from './TreeMapChart';
 export { UnitInput } from './UnitInput';
 export { VerificationCode } from './VerificationCode';

package/dist/helpers/legend.d.ts

@@ -1,2 +1,2 @@
-import type { Theme } from '@emotion/react';
-export declare const getLegendColor: (theme: Theme) => string[];
+import type { theme as UVTheme } from '@ultraviolet/themes';
+export declare const getLegendColor: (theme: typeof UVTheme) => string[];

package/dist/helpers/legend.js

@@ -2,7 +2,7 @@ const getLegendColor = (theme) => {
   const {
     colors
   } = theme;
-  return Object.keys(colors.other.data.charts).filter((key) => !["success", "danger"].includes(key)).sort((a, b) => {
+  return Object.keys(colors.other.data.charts).filter((key) => !["success", "danger"].includes(key)).toSorted((a, b) => {
     if (Number(a.replace("data", "")) < Number(b.replace("data", ""))) {
       return -1;
     }

package/dist/helpers/nivoTheme.d.ts

@@ -1,4 +1,4 @@
-import type { useTheme } from '@emotion/react';
+import type { useTheme } from '@ultraviolet/themes';
 export declare const getNivoTheme: (theme: ReturnType<typeof useTheme>) => {
     axis: {
         ticks: {