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

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

@@ -1,15 +1,15 @@
-import type { Theme } from '@emotion/react';
+import type { theme as UVTheme } from '@ultraviolet/themes';
 export declare const TEXT_VARIANT_BY_SIZE: {
     readonly large: "headingLarge";
     readonly medium: "headingSmall";
     readonly small: "bodySmall";
     readonly xsmall: "captionSmall";
 };
-export declare const sizes: (theme: Theme) => {
+export declare const sizes: (theme: typeof UVTheme) => {
     readonly large: "7rem";
-    readonly medium: string;
-    readonly small: string;
-    readonly xsmall: string;
+    readonly medium: `var(--${string})`;
+    readonly small: `var(--${string})`;
+    readonly xsmall: `var(--${string})`;
 };
 export declare const RADIUS_SIZES: {
     readonly large: "xxlarge";

package/dist/components/Avatar/constants.js

@@ -6,7 +6,7 @@ const TEXT_VARIANT_BY_SIZE = {
 };
 const sizes = (theme) => ({
   large: "7rem",
-  // TODO: add this value to tokens
+  // Note: add this value to tokens
   medium: theme.sizing["800"],
   small: theme.sizing["400"],
   xsmall: theme.sizing["250"]

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

@@ -7,20 +7,20 @@ export declare const containerAvatar: import("@vanilla-extract/recipes").Runtime
     };
     size: {
         large: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         medium: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         small: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         xsmall: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
     };
     sentiment: {
@@ -65,20 +65,20 @@ export declare const productIconContainer: import("@vanilla-extract/recipes").Ru
     };
     size: {
         large: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         medium: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         small: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         xsmall: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
     };
 }>;
@@ -95,20 +95,20 @@ export declare const elementContainer: import("@vanilla-extract/recipes").Runtim
 export declare const colorsAvatar: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         large: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         medium: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         small: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         xsmall: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
     };
     shape: {

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

@@ -1,9 +1,9 @@
-type BarChartToolTipProps = {
+type BarChartTooltipProps = {
     color: string;
     indexValue: string;
     formattedValue: string;
     className?: string;
     'data-testid'?: string;
 };
-declare const BarChartToolTip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartToolTipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default BarChartToolTip;
+export declare const BarChartTooltip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BarChart/Tooltip.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Text } from "../Text/index.js";
 import { barTooltipContainer, barColorSquare, colorBar } from "./styles.css.js";
-const BarChartToolTip = ({
+const BarChartTooltip = ({
   formattedValue,
   indexValue,
   color,
@@ -19,5 +19,5 @@ const BarChartToolTip = ({
   ] })
 ] });
 export {
-  BarChartToolTip as default
+  BarChartTooltip
 };

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

@@ -2,7 +2,7 @@ import type { BarDatum, BarSvgProps, BarTooltipProps } from '@nivo/bar';
 import { ResponsiveBar } from '@nivo/bar';
 import type { Box, DatumValue, ValueFormat } from '@nivo/core';
 import type { ComponentProps, CSSProperties } from 'react';
-import BarChartTooltip from './Tooltip';
+import { BarChartTooltip } from './Tooltip';
 type Formatter = ValueFormat<DatumValue>;
 type TickSpec = NonNullable<ComponentProps<typeof ResponsiveBar>['axisBottom']>['tickValues'];
 type BarChartProps = {

package/dist/components/BarChart/index.js

@@ -5,7 +5,7 @@ import { useTheme } from "@ultraviolet/themes";
 import { useCallback } from "react";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";
-import BarChartToolTip from "./Tooltip.js";
+import { BarChartTooltip } from "./Tooltip.js";
 const DEFAULT_MARGIN = {
   bottom: 50,
   left: 60,
@@ -36,7 +36,7 @@ const BarChart = ({
       formattedValue,
       color
     } = tooltipFunction ? tooltipFunction(props) : props;
-    return /* @__PURE__ */ jsx(BarChartToolTip, { color, formattedValue, indexValue: indexValue.toString() });
+    return /* @__PURE__ */ jsx(BarChartTooltip, { color, formattedValue, indexValue: indexValue.toString() });
   }, [tooltipFunction]);
   return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
     height,

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

@@ -1,3 +1,4 @@
+export declare const SIZE_KEY: readonly ["large", "medium", "small", "xsmall"];
 export declare const SIZE_HEIGHT: {
     readonly large: "600";
     readonly medium: "500";

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

@@ -1,7 +1,4 @@
 import type { AriaRole, ButtonHTMLAttributes, CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { SIZE_HEIGHT } from './constants';
-type ButtonSize = keyof typeof SIZE_HEIGHT;
-export declare const buttonSizes: ButtonSize[];
 /**
  * Button component is used to trigger an action or event, such as submitting a form, opening a dialog,
  * canceling an action, or performing a delete operation.
@@ -48,4 +45,3 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     target?: string;
     download?: string;
 } & import("react").RefAttributes<Element>>;
-export {};

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

@@ -0,0 +1 @@
+export declare const EXPANDABLE_CARD_SIZE: readonly ["medium", "large"];

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, DetailsHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
-export declare const EXPANDABLE_CARD_SIZE: readonly ["medium", "large"];
+import type { EXPANDABLE_CARD_SIZE } from './constants';
 type ExpandableCardSize = (typeof EXPANDABLE_CARD_SIZE)[number];
 type DraggableProps = {
     draggable: true;

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

@@ -1,7 +1,7 @@
 export declare const arrowIcon: string;
 export declare const dropableArea: string;
 export declare const summaryClass: string;
-export declare const content: string;
 export declare const detailsClass: string;
+export declare const content: string;
 export declare const stackClass: string;
 export declare const dragIconContainer: string;

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

@@ -2,8 +2,8 @@
 var arrowIcon = "uv_jd0jfn0";
 var dropableArea = "uv_jd0jfn1";
 var summaryClass = "uv_jd0jfn2";
-var content = "uv_jd0jfn3";
-var detailsClass = "uv_jd0jfn4";
+var detailsClass = "uv_jd0jfn3";
+var content = "uv_jd0jfn4";
 var stackClass = "uv_jd0jfn5";
 var dragIconContainer = "uv_jd0jfn6";
 export {

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

@@ -0,0 +1,8 @@
+export declare const KEYS_MATCH: {
+    readonly backspace: "⌫";
+    readonly command: "⌘";
+    readonly control: "⌃";
+    readonly enter: "↵";
+    readonly option: "⌥";
+    readonly shift: "⇧";
+};

package/dist/components/Key/constants.js

@@ -0,0 +1,11 @@
+const KEYS_MATCH = {
+  backspace: "⌫",
+  command: "⌘",
+  control: "⌃",
+  enter: "↵",
+  option: "⌥",
+  shift: "⇧"
+};
+export {
+  KEYS_MATCH
+};

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

@@ -1,12 +1,4 @@
 import type { CSSProperties } from 'react';
-export declare const KEYS_MATCH: {
-    readonly backspace: "⌫";
-    readonly command: "⌘";
-    readonly control: "⌃";
-    readonly enter: "↵";
-    readonly option: "⌥";
-    readonly shift: "⇧";
-};
 type KeyProps = {
     children: string;
     prominence?: 'strong' | 'default';

package/dist/components/Key/index.js

@@ -2,15 +2,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import { Text } from "../Text/index.js";
+import { KEYS_MATCH } from "./constants.js";
 import { key } from "./styles.css.js";
-const KEYS_MATCH = {
-  backspace: "⌫",
-  command: "⌘",
-  control: "⌃",
-  enter: "↵",
-  option: "⌥",
-  shift: "⇧"
-};
 const Key = ({
   children,
   prominence = "default",
@@ -40,6 +33,5 @@ const Key = ({
   })}`, "data-disabled": disabled, "data-prominence": prominence, "data-sentiment": sentiment, "data-size": size, "data-testid": dataTestId, id, style, children: /* @__PURE__ */ jsx(Text, { as: "span", disabled, prominence: textProminence, sentiment, variant: size === "medium" ? "caption" : "captionSmall", children: specialKey ? KEYS_MATCH[specialKey] : children }) });
 };
 export {
-  KEYS_MATCH,
   Key
 };

package/dist/components/LineChart/helpers.js

@@ -10,8 +10,8 @@ const parse = (data) => {
   }
   return 0;
 };
-const getMin = (values = []) => values.length > 0 ? Math.min(...values.map(parse)) : 0;
-const getMax = (values = []) => values.length > 0 ? Math.max(...values.map(parse)) : 0;
+const getMin = (values = []) => values.length > 0 ? Math.min(...values.map((data) => parse(data))) : 0;
+const getMax = (values = []) => values.length > 0 ? Math.max(...values.map((data) => parse(data))) : 0;
 const getAverage = (values = []) => values.length > 0 ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
 const getMaxChartValue = (preppedData) => {
   if (!preppedData?.length) {

package/dist/components/List/Row.js

@@ -87,7 +87,7 @@ const Row = forwardRef(({
       }
     } : void 0, onMouseEnter, onMouseLeave, ref: forwardedRef, role: canClickRowToExpand ? "button row" : void 0, style, tabIndex: canClickRowToExpand ? 0 : -1, children: [
       selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: listCheckboxContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select", checked: selectedRowIds[id], className: inRange?.includes(id) ? listCheckboxInRange : "", disabled: isSelectDisabled, name: "list-select-checkbox", onChange: () => handleOnChange(id, selectedRowIds[id]), ref: checkboxRef, value: id }) }) }) }) }) : null,
-      expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: disabled || !expandable, onClick: toggleRowExpand, sentiment, size: "small", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }) }) : null,
+      expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[400], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: disabled || !expandable, onClick: toggleRowExpand, sentiment, size: "small", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }) }) : null,
       Children.map(children, (child, index) => {
         const column = columns[index];
         return /* @__PURE__ */ jsx(ColumnProvider, { maxWidth: column?.maxWidth, minWidth: column?.minWidth, width: column?.width, children: child });

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

@@ -0,0 +1,8 @@
+export declare const SIZES: {
+    readonly large: "300";
+    readonly medium: "250";
+    readonly small: "200";
+    readonly xlarge: "400";
+    readonly xsmall: "150";
+    readonly xxlarge: "700";
+};

package/dist/components/Loader/constants.js

@@ -0,0 +1,11 @@
+const SIZES = {
+  large: "300",
+  medium: "250",
+  small: "200",
+  xlarge: "400",
+  xsmall: "150",
+  xxlarge: "700"
+};
+export {
+  SIZES
+};

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

@@ -1,13 +1,6 @@
 import type { CSSProperties } from 'react';
 import type { ExtendedColor } from '../../theme';
-export declare const SIZES: {
-    readonly large: "300";
-    readonly medium: "250";
-    readonly small: "200";
-    readonly xlarge: "400";
-    readonly xsmall: "150";
-    readonly xxlarge: "700";
-};
+import { SIZES } from './constants';
 type LoaderProps = {
     active?: boolean;
     sentiment?: ExtendedColor;

package/dist/components/Loader/index.js

@@ -1,30 +1,12 @@
 "use client";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
-import { loader, circle } from "./styles.css.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
+import { useTheme } from "@ultraviolet/themes";
+import { SIZES } from "./constants.js";
+import { loader, circle, loaderCircleAnimation } from "./styles.css.js";
 const VIEWBOX_WIDTH = 100;
 const VIEWBOX_HEIGHT = 100;
 const HALF_VIEWBOX_WIDTH = VIEWBOX_WIDTH / 2;
 const HALF_VIEWBOX_HEIGHT = VIEWBOX_HEIGHT / 2;
-const SIZES = {
-  large: "300",
-  medium: "250",
-  small: "200",
-  xlarge: "400",
-  xsmall: "150",
-  xxlarge: "700"
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "si0mpz",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s"
-} : {
-  name: "11f05l0-Loader",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s;label:Loader;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xvYWRlci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEVnQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Mb2FkZXIvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IGNzcywgdXNlVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB0eXBlIHsgQ1NTUHJvcGVydGllcyB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHR5cGUgeyBFeHRlbmRlZENvbG9yIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5pbXBvcnQgeyBjaXJjbGUsIGxvYWRlciB9IGZyb20gJy4vc3R5bGVzLmNzcydcblxuY29uc3QgVklFV0JPWF9XSURUSCA9IDEwMFxuY29uc3QgVklFV0JPWF9IRUlHSFQgPSAxMDBcbmNvbnN0IEhBTEZfVklFV0JPWF9XSURUSCA9IFZJRVdCT1hfV0lEVEggLyAyXG5jb25zdCBIQUxGX1ZJRVdCT1hfSEVJR0hUID0gVklFV0JPWF9IRUlHSFQgLyAyXG5cbmV4cG9ydCBjb25zdCBTSVpFUyA9IHtcbiAgbGFyZ2U6ICczMDAnLFxuICBtZWRpdW06ICcyNTAnLFxuICBzbWFsbDogJzIwMCcsXG4gIHhsYXJnZTogJzQwMCcsXG4gIHhzbWFsbDogJzE1MCcsXG4gIHh4bGFyZ2U6ICc3MDAnLFxufSBhcyBjb25zdFxuXG50eXBlIExvYWRlclByb3BzID0ge1xuICBhY3RpdmU/OiBib29sZWFuXG4gIHNlbnRpbWVudD86IEV4dGVuZGVkQ29sb3JcbiAgcGVyY2VudGFnZT86IG51bWJlclxuICBzaXplPzoga2V5b2YgdHlwZW9mIFNJWkVTXG4gIC8qKlxuICAgKiBMYWJlbCBzaG91bGQgYmUgZGVmaW5lZCBmb3IgYWNjZXNzaWJpbGl0eSwgdG8gaW5kaWNhdGUgd2hhdCBpcyBsb2FkaW5nXG4gICAqL1xuICBsYWJlbD86IHN0cmluZ1xuICBzdHlsZT86IENTU1Byb3BlcnRpZXNcbn1cblxuLyoqXG4gKiBMb2FkZXIgaXMgYSBjaXJjdWxhciBwcm9ncmVzcyBpbmRpY2F0b3IgdGhhdCBjYW4gYmUgdXNlZCB0byBpbmRpY2F0ZSB0aGF0IGFuIGFjdGlvbiBpcyBiZWluZyBwZXJmb3JtZWQuXG4gKi9cbmV4cG9ydCBjb25zdCBMb2FkZXIgPSAoe1xuICBwZXJjZW50YWdlID0gMjAsXG4gIHNpemUgPSAneGxhcmdlJyxcbiAgc2VudGltZW50ID0gJ3ByaW1hcnknLFxuICBhY3RpdmUgPSBmYWxzZSxcbiAgbGFiZWwgPSAnTG9hZGluZycsXG4gIHN0eWxlLFxufTogTG9hZGVyUHJvcHMpID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpXG5cbiAgY29uc3QgY2lyY2xlUmFkaXVzID0gSEFMRl9WSUVXQk9YX0hFSUdIVCAtIDhcbiAgY29uc3QgYm91bmRlZFBlcmNlbnRhZ2UgPSBNYXRoLm1pbihNYXRoLm1heChwZXJjZW50YWdlLCAwKSwgMTAwKSAvIDEwMFxuICBjb25zdCBjaXJjbGVEaWFtZXRlciA9IE1hdGguUEkgKiAyICogY2lyY2xlUmFkaXVzXG5cbiAgcmV0dXJuIChcbiAgICA8c3ZnXG4gICAgICBhcmlhLWxhYmVsPXtsYWJlbH1cbiAgICAgIGFyaWEtdmFsdWVtYXg9ezEwMH1cbiAgICAgIGFyaWEtdmFsdWVtaW49ezB9XG4gICAgICBhcmlhLXZhbHVlbm93PXtwZXJjZW50YWdlfVxuICAgICAgYXJpYS12YWx1ZXRleHQ9e2Ake3BlcmNlbnRhZ2V9JWB9XG4gICAgICBjbGFzc05hbWU9e2FjdGl2ZSA/IGxvYWRlciA6IHVuZGVmaW5lZH1cbiAgICAgIHJvbGU9XCJwcm9ncmVzc2JhclwiXG4gICAgICBzdHlsZT17e1xuICAgICAgICBoZWlnaHQ6IHRoZW1lLnNpemluZ1tTSVpFU1tzaXplXV0sXG4gICAgICAgIHdpZHRoOiB0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dLFxuICAgICAgICAuLi5zdHlsZSxcbiAgICAgIH19XG4gICAgICB2aWV3Qm94PXtgMCAwICR7VklFV0JPWF9XSURUSH0gJHtWSUVXQk9YX0hFSUdIVH1gfVxuICAgID5cbiAgICAgIDxjaXJjbGVcbiAgICAgICAgY2xhc3NOYW1lPXtjaXJjbGV9XG4gICAgICAgIGN4PXtIQUxGX1ZJRVdCT1hfV0lEVEh9XG4gICAgICAgIGN5PXtIQUxGX1ZJRVdCT1hfSEVJR0hUfVxuICAgICAgICBmaWxsPVwibm9uZVwiXG4gICAgICAgIHI9e2NpcmNsZVJhZGl1c31cbiAgICAgICAgc3Ryb2tlV2lkdGg9ezE2fVxuICAgICAgLz5cbiAgICAgIDxjaXJjbGVcbiAgICAgICAgLy8gb3hsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXVua25vd24tcHJvcGVydHlcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgdHJhbnNpdGlvbjogc3Ryb2tlLWRhc2hvZmZzZXQgMC41cyBlYXNlIDBzO1xuICAgICAgICBgfVxuICAgICAgICBjeD17SEFMRl9WSUVXQk9YX1dJRFRIfVxuICAgICAgICBjeT17SEFMRl9WSUVXQk9YX0hFSUdIVH1cbiAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICByPXtjaXJjbGVSYWRpdXN9XG4gICAgICAgIHN0cm9rZT17XG4gICAgICAgICAgc2VudGltZW50ID09PSAnYmxhY2snIHx8IHNlbnRpbWVudCA9PT0gJ3doaXRlJ1xuICAgICAgICAgICAgPyB0aGVtZS5jb2xvcnMub3RoZXIubW9ub2Nocm9tZVtzZW50aW1lbnRdLmJhY2tncm91bmRcbiAgICAgICAgICAgIDogdGhlbWUuY29sb3JzW3NlbnRpbWVudF0/LmJhY2tncm91bmRTdHJvbmdcbiAgICAgICAgfVxuICAgICAgICBzdHJva2VEYXNoYXJyYXk9e2NpcmNsZURpYW1ldGVyfVxuICAgICAgICBzdHJva2VEYXNob2Zmc2V0PXsoMSAtIGJvdW5kZWRQZXJjZW50YWdlKSAqIGNpcmNsZURpYW1ldGVyfVxuICAgICAgICBzdHJva2VMaW5lY2FwPVwicm91bmRcIlxuICAgICAgICBzdHJva2VXaWR0aD17MTZ9XG4gICAgICAvPlxuICAgIDwvc3ZnPlxuICApXG59XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 const Loader = ({
   percentage = 20,
   size = "xlarge",
@@ -46,7 +28,7 @@ const Loader = ({
     /* @__PURE__ */ jsx(
       "circle",
       {
-        css: _ref,
+        className: loaderCircleAnimation,
         cx: HALF_VIEWBOX_WIDTH,
         cy: HALF_VIEWBOX_HEIGHT,
         fill: "none",
@@ -61,6 +43,5 @@ const Loader = ({
   ] });
 };
 export {
-  Loader,
-  SIZES
+  Loader
 };

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

@@ -1,2 +1,3 @@
 export declare const circle: string;
 export declare const loader: string;
+export declare const loaderCircleAnimation: string;

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

@@ -1,7 +1,9 @@
 /* empty css                          */
 var circle = "uv_tkulld1";
 var loader = "uv_tkulld2";
+var loaderCircleAnimation = "uv_tkulld3";
 export {
   circle,
-  loader
+  loader,
+  loaderCircleAnimation
 };

package/dist/components/Menu/MenuContent.js

@@ -64,11 +64,17 @@ const Menu = forwardRef(({
     }
   }, [children]);
   useEffect(() => {
+    let timeout;
     if (isVisible && searchable) {
-      setTimeout(() => {
+      timeout = setTimeout(() => {
         searchInputRef.current?.focus();
       }, 50);
     }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
   }, [isVisible, searchable]);
   useEffect(() => {
     if (disclosureRef.current && triggerMethod === "hover") {

package/dist/components/Menu/components/Item.d.ts

@@ -19,5 +19,5 @@ type ItemProps = {
     searchText?: string;
     style?: CSSProperties;
 };
-declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLElement>>;
-export default Item;
+export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Menu/components/Item.js

@@ -94,5 +94,5 @@ const Item = forwardRef(({
   ] }) : children }) }) });
 });
 export {
-  Item as default
+  Item
 };

package/dist/components/Menu/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { Group } from "./components/Group.js";
-import Item from "./components/Item.js";
+import { Item } from "./components/Item.js";
 import { Menu as Menu$1 } from "./MenuContent.js";
 import { MenuProvider } from "./MenuProvider.js";
 const Component = forwardRef(({

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { Theme as ThemeToastify, ToastOptions, TypeOptions } from 'react-toastify';
+type CloseButtonProps = {
+    closeToast: (event: React.MouseEvent<HTMLElement>) => void;
+    type: TypeOptions;
+    ariaLabel?: string;
+    theme: ThemeToastify;
+};
+export declare const notification: (children: ((props: CloseButtonProps) => ReactNode) | ReactNode, title: string, icon?: ReactNode, isClosable?: boolean, containerId?: string, options?: ToastOptions) => import("react-toastify").Id;
+export {};

package/dist/components/Notification/{index.js → Notification.js}

@@ -1,11 +1,10 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
-import { toast, ToastContainer, Slide } from "react-toastify";
+import { toast } from "react-toastify";
 import { Button } from "../Button/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
-import { notification as notification$1 } from "./styles.css.js";
 const closeButton = (props) => /* @__PURE__ */ jsx(Button, { "aria-label": "close", onClick: props.closeToast, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
 const notification = (children, title, icon, isClosable, containerId, options) => toast("", {
   ...options,
@@ -19,17 +18,6 @@ const notification = (children, title, icon, isClosable, containerId, options) =
   ] }),
   containerId: containerId ?? "notification"
 });
-const NotificationContainer = ({
-  newestOnTop,
-  limit,
-  autoClose = false,
-  position = "top-right",
-  "data-testid": dataTestId,
-  className,
-  style,
-  containerId = "notification"
-}) => /* @__PURE__ */ jsx(ToastContainer, { autoClose, className: `${className ? `${className} ` : ""}${notification$1}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, position, style, transition: Slide });
 export {
-  NotificationContainer,
   notification
 };

package/dist/components/Notification/NotificationContainer.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from 'react';
+import type { ToastOptions } from 'react-toastify';
+type NotificationContainerProps = {
+    /**
+     * Delay (in ms) before the notification autocloses. To disable autoclose, set to false
+     */
+    autoClose?: false | number;
+    /**
+     * 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 on the notification container
+     */
+    position?: ToastOptions['position'];
+    'data-testid'?: string;
+    className?: string;
+    /**
+     * Give a personalized containerId in case there are multiple notifications with different styled to display
+     */
+    containerId?: string;
+    style?: CSSProperties;
+};
+export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, style, containerId, }: NotificationContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Notification/NotificationContainer.js

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

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

@@ -1,37 +1,2 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { Theme as ThemeToastify, ToastOptions, TypeOptions } from 'react-toastify';
-type CloseButtonProps = {
-    closeToast: (event: React.MouseEvent<HTMLElement>) => void;
-    type: TypeOptions;
-    ariaLabel?: string;
-    theme: ThemeToastify;
-};
-export declare const notification: (children: ((props: CloseButtonProps) => ReactNode) | ReactNode, title: string, icon?: ReactNode, isClosable?: boolean, containerId?: string, options?: ToastOptions) => import("react-toastify").Id;
-type NotificationContainerProps = {
-    /**
-     * Delay (in ms) before the notification autocloses. To disable autoclose, set to false
-     */
-    autoClose?: false | number;
-    /**
-     * 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 on the notification container
-     */
-    position?: ToastOptions['position'];
-    'data-testid'?: string;
-    className?: string;
-    /**
-     * Give a personalized containerId in case there are multiple notifications with different styled to display
-     */
-    containerId?: string;
-    style?: CSSProperties;
-};
-export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, style, containerId, }: NotificationContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export { notification } from './Notification';
+export { NotificationContainer } from './NotificationContainer';

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

@@ -5,5 +5,5 @@ type LegendsProps = {
     onFocusChange: (index?: string) => void;
     colors: string[];
 };
-declare const Legends: ({ focused, data, onFocusChange, colors }: LegendsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default Legends;
+export declare const Legends: ({ focused, data, onFocusChange, colors, }: LegendsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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
 };