@ultraviolet/ui 3.0.0-beta.19 → 3.0.0-beta.20

package/dist/components/Alert/styles.css.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                                    */
 ;/* empty css                            */
 const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var alert = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_1b838gx0", variantClassNames: { sentiment: { danger: "uv_1b838gx1", info: "uv_1b838gx2", success: "uv_1b838gx3", warning: "uv_1b838gx4", neutral: "uv_1b838gx5" } }, defaultVariants: { sentiment: "danger" }, compoundVariants: [] });

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

@@ -1,4 +1,3 @@
-/* empty css                                                  */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var alert = createRuntimeFn({ defaultClassName: "uv_1b838gx0", variantClassNames: { sentiment: { danger: "uv_1b838gx1", info: "uv_1b838gx2", success: "uv_1b838gx3", warning: "uv_1b838gx4", neutral: "uv_1b838gx5" } }, defaultVariants: { sentiment: "danger" }, compoundVariants: [] });

package/dist/components/Avatar/styles.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                               */
 ;/* empty css                            */
 const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var containerAvatar = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_19x8y1k0", variantClassNames: { shape: { circle: "uv_19x8y1k1", square: "uv_19x8y1k2" }, size: { large: "uv_19x8y1k3", medium: "uv_19x8y1k4", small: "uv_19x8y1k5", xsmall: "uv_19x8y1k6" }, sentiment: { primary: "uv_19x8y1k7", neutral: "uv_19x8y1k8" } }, defaultVariants: {}, compoundVariants: [[{ size: "large", shape: "square" }, "uv_19x8y1k9"], [{ size: "medium", shape: "square" }, "uv_19x8y1ka"], [{ size: "small", shape: "square" }, "uv_19x8y1kb"], [{ size: "xsmall", shape: "square" }, "uv_19x8y1kc"]] });

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

@@ -1,3 +1,4 @@
+/* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var containerAvatar = createRuntimeFn({ defaultClassName: "uv_19x8y1k0", variantClassNames: { shape: { circle: "uv_19x8y1k1", square: "uv_19x8y1k2" }, size: { large: "uv_19x8y1k3", medium: "uv_19x8y1k4", small: "uv_19x8y1k5", xsmall: "uv_19x8y1k6" }, sentiment: { primary: "uv_19x8y1k7", neutral: "uv_19x8y1k8" } }, defaultVariants: {}, compoundVariants: [[{ size: "large", shape: "square" }, "uv_19x8y1k9"], [{ size: "medium", shape: "square" }, "uv_19x8y1ka"], [{ size: "small", shape: "square" }, "uv_19x8y1kb"], [{ size: "xsmall", shape: "square" }, "uv_19x8y1kc"]] });

package/dist/components/Avatar/variables.css.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                               */
 var finalSizeAvatar = "var(--uv_18799yd0)";
 var finalColorAvatar = "var(--uv_18799yd1)";
 var halvedColorAvatar = "var(--uv_18799yd2)";

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

@@ -1,4 +1,3 @@
-/* empty css                             */
 var finalSizeAvatar = "var(--uv_18799yd0)";
 var finalColorAvatar = "var(--uv_18799yd1)";
 var halvedColorAvatar = "var(--uv_18799yd2)";

package/dist/components/Banner/index.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Icon = require("@ultraviolet/icons");
+const themes = require("@ultraviolet/themes");
 const react = require("react");
-require("../../theme/index.cjs");
 const index$2 = require("../Button/index.cjs");
 const index$3 = require("../Link/index.cjs");
 const index = require("../Stack/index.cjs");
@@ -12,7 +12,6 @@ const index$1 = require("../Text/index.cjs");
 const defaultImage = require("./assets/default-image.svg.cjs");
 const defaultImageSmall = require("./assets/default-image-small.svg.cjs");
 const styles_css = require("./styles.css.cjs");
-const ThemeProvider = require("../../theme/ThemeProvider.cjs");
 const Banner = ({
   variant = "intro",
   size = "medium",
@@ -31,7 +30,7 @@ const Banner = ({
 }) => {
   const {
     theme
-  } = ThemeProvider.useTheme();
+  } = themes.useTheme();
   const defaultImage$1 = size === "small" ? defaultImageSmall : defaultImage;
   const prominence = react.useMemo(() => {
     if (variant === "promotional") {

package/dist/components/Banner/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
+import { useTheme } from "@ultraviolet/themes";
 import { useMemo, useState } from "react";
-import "../../theme/index.js";
 import { Button } from "../Button/index.js";
 import { Link } from "../Link/index.js";
 import { Stack } from "../Stack/index.js";
@@ -10,7 +10,6 @@ import { Text } from "../Text/index.js";
 import defaultIllustration from "./assets/default-image.svg.js";
 import defaultIllustrationSmall from "./assets/default-image-small.svg.js";
 import { banner, imageStackBanner, closeButtonBanner } from "./styles.css.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Banner = ({
   variant = "intro",
   size = "medium",

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

@@ -13,6 +13,6 @@ export declare const banner: import("@vanilla-extract/recipes").RuntimeFn<{
         promotional: {};
     };
 }>;
-export declare const imageStackBanner: Record<"small" | "medium", string>;
+export declare const imageStackBanner: Record<"medium" | "small", string>;
 export declare const closeButtonBanner: string;
 export type BannerVariants = NonNullable<RecipeVariants<typeof banner>>;

package/dist/components/BarChart/index.cjs

@@ -2,9 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@emotion/react");
 const bar = require("@nivo/bar");
-const react$1 = require("react");
+const themes = require("@ultraviolet/themes");
+const react = require("react");
 const legend = require("../../helpers/legend.cjs");
 const nivoTheme = require("../../helpers/nivoTheme.cjs");
 const Tooltip = require("./Tooltip.cjs");
@@ -30,8 +30,8 @@ const BarChart = ({
   className,
   "data-testid": dataTestId
 }) => {
-  const theme = react.useTheme();
-  const tooltip = react$1.useCallback((props) => {
+  const theme = themes.useTheme();
+  const tooltip = react.useCallback((props) => {
     const {
       indexValue,
       formattedValue,

package/dist/components/BarChart/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
 import { ResponsiveBar } from "@nivo/bar";
+import { useTheme } from "@ultraviolet/themes";
 import { useCallback } from "react";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";

package/dist/components/Breadcrumbs/styles.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                                    */
 ;/* empty css                            */
 var breadcrumbs = "uv_qxa0fl0";
 exports.breadcrumbs = breadcrumbs;

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

@@ -1,3 +1,4 @@
+/* empty css                                                  */
 /* empty css                          */
 var breadcrumbs = "uv_qxa0fl0";
 export {

package/dist/components/Button/index.cjs

@@ -2,8 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const themes = require("@ultraviolet/themes");
 const react = require("react");
-const ThemeProvider = require("../../theme/ThemeProvider.cjs");
 const index$1 = require("../Loader/index.cjs");
 const index = require("../Tooltip/index.cjs");
 const styles_css = require("./styles.css.cjs");
@@ -49,7 +49,7 @@ const Button = react.forwardRef(({
   const computeIsDisabled = disabled || isLoading;
   const {
     theme
-  } = ThemeProvider.useTheme();
+  } = themes.useTheme();
   const computedSentimentLoader = react.useMemo(() => {
     if (variant === "filled" && !["black", "white"].includes(sentiment)) {
       if (theme === "light") {

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

@@ -35,9 +35,9 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     onKeyDown?: ButtonHTMLAttributes<HTMLButtonElement>["onKeyDown"];
     style?: CSSProperties;
 } & {
-    size?: "small" | "large" | "medium" | "xsmall" | undefined;
+    size?: "large" | "medium" | "small" | "xsmall" | undefined;
     fullWidth?: boolean | undefined;
-    sentiment?: "danger" | "info" | "neutral" | "success" | "primary" | "warning" | "black" | "white" | "secondary" | undefined;
+    sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info" | "white" | "black" | undefined;
     variant?: "filled" | "outlined" | "ghost" | undefined;
     disabled?: boolean | undefined;
 } & {

package/dist/components/Button/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
 import { forwardRef, useMemo } from "react";
-import { useTheme } from "../../theme/ThemeProvider.js";
 import { Loader } from "../Loader/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { button } from "./styles.css.js";

package/dist/components/Checkbox/index.cjs

@@ -2,7 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react$1 = require("@emotion/react");
+const themes = require("@ultraviolet/themes");
 const react = require("react");
 const index$1 = require("../Stack/index.cjs");
 const index$2 = require("../Text/index.cjs");
@@ -11,7 +11,7 @@ const styles_css = require("./styles.css.cjs");
 const CheckboxIconContainer = ({
   children
 }) => {
-  const theme = react$1.useTheme();
+  const theme = themes.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { className: styles_css.innerCheckbox, height: "16", rx: theme.radii.small, strokeWidth: "2", width: "16", x: "4", y: "4" }),
     children

package/dist/components/Checkbox/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
+import { useTheme } from "@ultraviolet/themes";
 import { forwardRef, useId } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";

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

@@ -14,7 +14,7 @@ type ChipType = {
 export declare const Chip: {
     ({ children, size, disabled, active, className, "data-testid": dataTestId, onClick, }: ChipType): import("@emotion/react/jsx-runtime").JSX.Element;
     Icon: ({ name, onClick, "data-testid": dataTestId, }: {
-        name: "search" | "anchor" | "bold" | "sort" | "filter" | "address" | "audio" | "video" | "italic" | "underline" | "drag" | "image" | "stop" | "view" | "id" | "pen" | "download" | "cancel" | "close" | "play" | "send" | "email" | "arrowLeft" | "upload" | "addressOutline" | "addressPlay" | "adjustmentsHorizontal" | "adjustmentsHorizontalOutline" | "alertCircle" | "alertCircleOutline" | "arrowDown" | "arrowLeftBottom" | "arrowLeftDouble" | "arrowRightBottom" | "arrowRightDouble" | "arrowRight" | "arrowUp" | "attach" | "autoFix" | "autoFixOutline" | "bookOpenOutline" | "bookOpenOutlineOutline" | "boxEssentials" | "boxEssentialsOutline" | "bullhorn" | "bullhornOutline" | "burger" | "calculator" | "calculatorOutline" | "calendarRange" | "calendarRangeOutline" | "chat" | "chatOutline" | "checkCircle" | "checkCircleOutline" | "check" | "clickhouse" | "lock" | "clock" | "lockOutline" | "clockOutline" | "closeCircleOutline" | "console" | "consoleOutline" | "copyContent" | "credential" | "credentialOutline" | "creditCard" | "creditCardOutline" | "database" | "databaseOutline" | "delete" | "deleteOutline" | "detach" | "doc" | "docOutline" | "dotsHorizontal" | "dotsVertical" | "earth" | "earthOutline" | "east" | "eastShort" | "emailOutline" | "emailRemove" | "emailRemoveOutline" | "equal" | "escape" | "expand" | "expandMore" | "eye" | "eyeOff" | "eyeOffOutline" | "eyeOutline" | "filterOutline" | "folder" | "folderOutline" | "github" | "helpCircle" | "helpCircleOutline" | "idOutline" | "imageOutline" | "information" | "informationOutline" | "instagram" | "leaf" | "leafOutline" | "leftRightArrow" | "lightBulb" | "lightBulbOutline" | "linkedin" | "listBullet" | "listNumber" | "logout" | "members" | "membersOutline" | "minus" | "moon" | "moonOutline" | "mosaic" | "mosaicOutline" | "music" | "musicOutline" | "north" | "northShort" | "notification" | "notificationOutline" | "openInNew" | "organization" | "paperclip" | "partnerSpace" | "pen2" | "pen2Outline" | "pencil" | "pencilOutline" | "penOutline" | "phone" | "phoneOutline" | "pin" | "pinOutline" | "playOutline" | "plus" | "privacy" | "privacyOutline" | "profile" | "profileOutline" | "progressCheck" | "rayEndArrow" | "rayStartArrow" | "rayStartEnd" | "rayTopArrow" | "reboot" | "restore" | "revoke" | "rocket" | "rocketOutline" | "rss" | "sendOutline" | "settings" | "settingsOutline" | "sidebar" | "sidebarOutline" | "slack" | "south" | "southShort" | "sparkles" | "sparklesOutline" | "star" | "starOutline" | "stopOutline" | "sun" | "sunOutline" | "support" | "supportOutline" | "switchOrga" | "thumbsDown" | "thumbsDownOutline" | "thumbsUp" | "thumbsUpOutline" | "twitter" | "unlock" | "unlockOutline" | "unpin" | "unpinOutline" | "videoOutline" | "weatherNight" | "weatherNightOutline" | "west" | "westShort" | "youtube";
+        name: "search" | "anchor" | "bold" | "filter" | "sort" | "italic" | "underline" | "drag" | "address" | "audio" | "video" | "image" | "stop" | "view" | "id" | "pen" | "download" | "cancel" | "close" | "play" | "send" | "email" | "arrowLeft" | "upload" | "addressOutline" | "addressPlay" | "adjustmentsHorizontal" | "adjustmentsHorizontalOutline" | "alertCircle" | "alertCircleOutline" | "arrowDown" | "arrowLeftBottom" | "arrowLeftDouble" | "arrowRightBottom" | "arrowRightDouble" | "arrowRight" | "arrowUp" | "attach" | "autoFix" | "autoFixOutline" | "bookOpenOutline" | "bookOpenOutlineOutline" | "boxEssentials" | "boxEssentialsOutline" | "bullhorn" | "bullhornOutline" | "burger" | "calculator" | "calculatorOutline" | "calendarRange" | "calendarRangeOutline" | "chat" | "chatOutline" | "checkCircle" | "checkCircleOutline" | "check" | "clickhouse" | "lock" | "clock" | "lockOutline" | "clockOutline" | "closeCircleOutline" | "console" | "consoleOutline" | "copyContent" | "credential" | "credentialOutline" | "creditCard" | "creditCardOutline" | "database" | "databaseOutline" | "delete" | "deleteOutline" | "detach" | "doc" | "docOutline" | "dotsHorizontal" | "dotsVertical" | "earth" | "earthOutline" | "east" | "eastShort" | "emailOutline" | "emailRemove" | "emailRemoveOutline" | "equal" | "escape" | "expand" | "expandMore" | "eye" | "eyeOff" | "eyeOffOutline" | "eyeOutline" | "filterOutline" | "folder" | "folderOutline" | "github" | "helpCircle" | "helpCircleOutline" | "idOutline" | "imageOutline" | "information" | "informationOutline" | "instagram" | "leaf" | "leafOutline" | "leftRightArrow" | "lightBulb" | "lightBulbOutline" | "linkedin" | "listBullet" | "listNumber" | "logout" | "members" | "membersOutline" | "minus" | "moon" | "moonOutline" | "mosaic" | "mosaicOutline" | "music" | "musicOutline" | "north" | "northShort" | "notification" | "notificationOutline" | "openInNew" | "organization" | "paperclip" | "partnerSpace" | "pen2" | "pen2Outline" | "pencil" | "pencilOutline" | "penOutline" | "phone" | "phoneOutline" | "pin" | "pinOutline" | "playOutline" | "plus" | "privacy" | "privacyOutline" | "profile" | "profileOutline" | "progressCheck" | "rayEndArrow" | "rayStartArrow" | "rayStartEnd" | "rayTopArrow" | "reboot" | "restore" | "revoke" | "rocket" | "rocketOutline" | "rss" | "sendOutline" | "settings" | "settingsOutline" | "sidebar" | "sidebarOutline" | "slack" | "south" | "southShort" | "sparkles" | "sparklesOutline" | "star" | "starOutline" | "stopOutline" | "sun" | "sunOutline" | "support" | "supportOutline" | "switchOrga" | "thumbsDown" | "thumbsDownOutline" | "thumbsUp" | "thumbsUpOutline" | "twitter" | "unlock" | "unlockOutline" | "unpin" | "unpinOutline" | "videoOutline" | "weatherNight" | "weatherNightOutline" | "west" | "westShort" | "youtube";
         onClick?: () => void;
         'data-testid'?: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-export declare const DIALOG_SENTIMENTS: ("danger" | "success" | "primary" | "warning")[];
+export declare const DIALOG_SENTIMENTS: ("primary" | "success" | "danger" | "warning")[];
 export type DialogSentiment = (typeof DIALOG_SENTIMENTS)[number];

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

@@ -42,9 +42,9 @@ export declare const Dialog: (({ ariaLabel, className, children, "data-testid":
         onKeyDown?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["onKeyDown"];
         style?: import("react").CSSProperties;
     } & {
-        size?: "small" | "large" | "medium" | "xsmall" | undefined;
+        size?: "large" | "medium" | "small" | "xsmall" | undefined;
         fullWidth?: boolean | undefined;
-        sentiment?: "danger" | "info" | "neutral" | "success" | "primary" | "warning" | "black" | "white" | "secondary" | undefined;
+        sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info" | "white" | "black" | undefined;
         variant?: "filled" | "outlined" | "ghost" | undefined;
         disabled?: boolean | undefined;
     } & {

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

@@ -25,5 +25,5 @@ export declare const emptyStateContainer: import("@vanilla-extract/recipes").Run
     };
 }>;
 export declare const paddedStack: string;
-export declare const emptyStateImage: Record<"small" | "large" | "medium", string>;
+export declare const emptyStateImage: Record<"large" | "medium" | "small", string>;
 export {};

package/dist/components/ExpandableCard/index.cjs

@@ -2,8 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react$1 = require("@emotion/react");
 const Icon = require("@ultraviolet/icons");
+const themes = require("@ultraviolet/themes");
 const react = require("react");
 const index = require("../Stack/index.cjs");
 const index$1 = require("../Tooltip/index.cjs");
@@ -33,7 +33,7 @@ const BaseExpandableCard = react.forwardRef(({
   const draggableFirstRef = react.useRef(null);
   const [isHovered, setIsHovered] = react.useState(false);
   const [clicking, setClicking] = react.useState(false);
-  const theme = react$1.useTheme();
+  const theme = themes.useTheme();
   const handleMouseEnter = () => {
     setIsHovered(true);
   };

package/dist/components/ExpandableCard/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
 import { DragIcon, ArrowDownIcon } from "@ultraviolet/icons";
+import { useTheme } from "@ultraviolet/themes";
 import { forwardRef, useRef, useState, useCallback } from "react";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";

package/dist/components/GlobalAlert/GlobalAlertLink.cjs

@@ -2,7 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@emotion/react");
+const themes = require("@ultraviolet/themes");
 const index = require("../Link/index.cjs");
 const GlobalAlertLink = ({
   children,
@@ -18,7 +18,7 @@ const GlobalAlertLink = ({
 }) => {
   const {
     theme
-  } = react.useTheme();
+  } = themes.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(index.Link, { "aria-label": ariaLabel, className, "data-testid": dataTestId, download, href, onClick, oneLine, prominence: theme === "light" ? "strong" : "stronger", rel, size: "small", target, variant: "inline", children });
 };
 exports.GlobalAlertLink = GlobalAlertLink;

package/dist/components/GlobalAlert/GlobalAlertLink.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
+import { useTheme } from "@ultraviolet/themes";
 import { Link } from "../Link/index.js";
 const GlobalAlertLink = ({
   children,

package/dist/components/LineChart/index.cjs

@@ -2,9 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@emotion/react");
 const line = require("@nivo/line");
-const react$1 = require("react");
+const themes = require("@ultraviolet/themes");
+const react = require("react");
 const legend = require("../../helpers/legend.cjs");
 const nivoTheme = require("../../helpers/nivoTheme.cjs");
 const CustomLegend = require("./CustomLegend.cjs");
@@ -41,7 +41,7 @@ const LineChart = ({
   chartProps = DEFAULT_CHARTPROPS,
   "data-testid": dataTestId
 }) => {
-  const theme = react.useTheme();
+  const theme = themes.useTheme();
   const dataset = {
     datasets: data?.map((d) => ({
       data: d.data,
@@ -49,13 +49,13 @@ const LineChart = ({
       label: d?.["label"]
     }))
   };
-  const [selected, setSelected] = react$1.useState(dataset.datasets?.map(({
+  const [selected, setSelected] = react.useState(dataset.datasets?.map(({
     id
   }, index) => `${id}${index}`));
   const finalData = dataset.datasets?.filter(({
     id
   }, index) => selected ? selected.includes(`${id}${index}`) : false);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (selected !== void 0) {
       return;
     }

package/dist/components/LineChart/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
 import { ResponsiveLine } from "@nivo/line";
+import { useTheme } from "@ultraviolet/themes";
 import { useState, useEffect } from "react";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";

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

@@ -35,7 +35,7 @@ export declare const List: import("react").ForwardRefExoticComponent<ListProps &
         expandable?: ReactNode;
         selectDisabled?: boolean | string;
         disabled?: boolean;
-        sentiment?: "danger" | "info" | "neutral" | "success" | "primary" | "warning" | "secondary";
+        sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info";
         expanded?: boolean;
         className?: string;
         expandablePadding?: "0" | "1" | "0.5" | "0.25" | "1.5" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";

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

@@ -3,4 +3,4 @@ import type { ReactNode } from 'react';
  * Search inside a children (React Element) recursively until a result is found
  */
 export declare const searchChildren: (children: ReactNode, searchString: string) => ReactNode[];
-export declare const getListItem: (listItems: Element[]) => (HTMLAnchorElement | HTMLButtonElement)[];
+export declare const getListItem: (listItems: Element[]) => (HTMLButtonElement | HTMLAnchorElement)[];

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

@@ -69,7 +69,7 @@ export declare const Menu: import("react").ForwardRefExoticComponent<{
         children: import("react").ReactNode;
         onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
         borderless?: boolean;
-        sentiment?: "danger" | "neutral" | "primary";
+        sentiment?: "primary" | "neutral" | "danger";
         active?: boolean;
         'data-testid'?: string;
         searchText?: string;

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

@@ -1,4 +1,4 @@
-export declare const numberinputSideContainer: Record<"small" | "large" | "medium", string>;
+export declare const numberinputSideContainer: Record<"large" | "medium" | "small", string>;
 export declare const inputContainer: import("@vanilla-extract/recipes").RuntimeFn<{
     controls: {
         false: {

package/dist/components/PieChart/index.cjs

@@ -2,10 +2,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@emotion/react");
 const pie = require("@nivo/pie");
+const themes = require("@ultraviolet/themes");
 const dynamic = require("@vanilla-extract/dynamic");
-const react$1 = require("react");
+const react = require("react");
 const legend = require("../../helpers/legend.cjs");
 const nivoTheme = require("../../helpers/nivoTheme.cjs");
 const index = require("../Text/index.cjs");
@@ -28,13 +28,13 @@ const PieChart = ({
   margin = DEFAULT_MARGIN,
   chartProps = DEFAULT_CHARTPROPS
 }) => {
-  const theme = react.useTheme();
-  const [currentFocusIndex, setCurrentFocusIndex] = react$1.useState();
-  const emptyTooltip = react$1.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("span", {}), []);
+  const theme = themes.useTheme();
+  const [currentFocusIndex, setCurrentFocusIndex] = react.useState();
+  const emptyTooltip = react.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("span", {}), []);
   const isEmpty = !data || data.length === 0;
-  const EmptyLegendDisplayed = react$1.useCallback(() => emptyLegend ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.emptyLegendPie, children: /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", variant: "body", children: emptyLegend }) }) : null, [emptyLegend]);
+  const EmptyLegendDisplayed = react.useCallback(() => emptyLegend ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.emptyLegendPie, children: /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", variant: "body", children: emptyLegend }) }) : null, [emptyLegend]);
   const localColors = legend.getLegendColor(theme);
-  const LegendDisplayer = react$1.useCallback(() => isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsxRuntime.jsx(Legends, { colors: localColors, data, focused: currentFocusIndex, onFocusChange: setCurrentFocusIndex }), [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]);
+  const LegendDisplayer = react.useCallback(() => isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsxRuntime.jsx(Legends, { colors: localColors, data, focused: currentFocusIndex, onFocusChange: setCurrentFocusIndex }), [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_css.containerPie, style: dynamic.assignInlineVars({
     [styles_css.heightContainerPie]: height ? `${height}px` : ""
   }), children: [

package/dist/components/PieChart/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
 import { Pie } from "@nivo/pie";
+import { useTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useState, useCallback } from "react";
 import { getLegendColor } from "../../helpers/legend.js";

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

@@ -1,4 +1,4 @@
 export declare const progressContainer: string;
 export declare const customText: string;
 export declare const progressBar: string;
-export declare const filledBarSentiments: Record<"danger" | "info" | "success" | "primary" | "warning" | "secondary", string>;
+export declare const filledBarSentiments: Record<"primary" | "secondary" | "success" | "danger" | "warning" | "info", string>;