@ultraviolet/ui 3.0.0 → 3.1.0

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" }, size: { medium: "uv_1b838gx6", small: "uv_1b838gx7" } }, defaultVariants: { sentiment: "danger", size: "medium" }, compoundVariants: [] });

package/dist/components/Badge/constant.d.ts

@@ -2,6 +2,7 @@ export declare const SIZES: {
     readonly large: "400";
     readonly medium: "300";
     readonly small: "200";
+    readonly xsmall: "175";
 };
 export declare const PROMINENCES: {
     default: string;
@@ -11,4 +12,5 @@ export declare const TEXT_VARIANT: {
     readonly large: "bodySmall";
     readonly medium: "caption";
     readonly small: "captionSmall";
+    readonly xsmall: "captionSmall";
 };

package/dist/components/Badge/constant.js

@@ -1,7 +1,8 @@
 const TEXT_VARIANT = {
   large: "bodySmall",
   medium: "caption",
-  small: "captionSmall"
+  small: "captionSmall",
+  xsmall: "captionSmall"
 };
 export {
   TEXT_VARIANT

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

@@ -3,17 +3,18 @@ export declare const badge: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         small: {
             padding: `0 var(--${string})`;
-            gap: `var(--${string})`;
             height: `var(--${string})`;
         };
         medium: {
             padding: `0 var(--${string})`;
-            gap: `var(--${string})`;
             height: `var(--${string})`;
         };
         large: {
             padding: `0 var(--${string})`;
-            gap: `var(--${string})`;
+            height: `var(--${string})`;
+        };
+        xsmall: {
+            padding: `0 var(--${string})`;
             height: `var(--${string})`;
         };
     };

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

@@ -1,6 +1,6 @@
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var badge = createRuntimeFn({ defaultClassName: "uv_1yf71jy0", variantClassNames: { size: { small: "uv_1yf71jy1", medium: "uv_1yf71jy2", large: "uv_1yf71jy3" }, sentiment: { primary: "uv_1yf71jy4", secondary: "uv_1yf71jy5", danger: "uv_1yf71jy6", info: "uv_1yf71jy7", success: "uv_1yf71jy8", warning: "uv_1yf71jy9", neutral: "uv_1yf71jya", black: "uv_1yf71jyb", white: "uv_1yf71jyc" }, prominence: { "default": "uv_1yf71jyd", strong: "uv_1yf71jye" }, disabled: { true: "uv_1yf71jyf" } }, defaultVariants: { size: "medium", prominence: "default", sentiment: "neutral", disabled: false }, compoundVariants: [[{ prominence: "default", sentiment: "primary", disabled: false }, "uv_1yf71jyg"], [{ prominence: "default", sentiment: "secondary", disabled: false }, "uv_1yf71jyh"], [{ prominence: "default", sentiment: "danger", disabled: false }, "uv_1yf71jyi"], [{ prominence: "default", sentiment: "info", disabled: false }, "uv_1yf71jyj"], [{ prominence: "default", sentiment: "success", disabled: false }, "uv_1yf71jyk"], [{ prominence: "default", sentiment: "warning", disabled: false }, "uv_1yf71jyl"], [{ prominence: "default", sentiment: "neutral", disabled: false }, "uv_1yf71jym"], [{ prominence: "strong", sentiment: "primary", disabled: false }, "uv_1yf71jyn"], [{ prominence: "strong", sentiment: "secondary", disabled: false }, "uv_1yf71jyo"], [{ prominence: "strong", sentiment: "danger", disabled: false }, "uv_1yf71jyp"], [{ prominence: "strong", sentiment: "info", disabled: false }, "uv_1yf71jyq"], [{ prominence: "strong", sentiment: "success", disabled: false }, "uv_1yf71jyr"], [{ prominence: "strong", sentiment: "warning", disabled: false }, "uv_1yf71jys"], [{ prominence: "strong", sentiment: "neutral", disabled: false }, "uv_1yf71jyt"]] });
+var badge = createRuntimeFn({ defaultClassName: "uv_1yf71jy0", variantClassNames: { size: { small: "uv_1yf71jy1", medium: "uv_1yf71jy2", large: "uv_1yf71jy3", xsmall: "uv_1yf71jy4" }, sentiment: { primary: "uv_1yf71jy5", secondary: "uv_1yf71jy6", danger: "uv_1yf71jy7", info: "uv_1yf71jy8", success: "uv_1yf71jy9", warning: "uv_1yf71jya", neutral: "uv_1yf71jyb", black: "uv_1yf71jyc", white: "uv_1yf71jyd" }, prominence: { "default": "uv_1yf71jye", strong: "uv_1yf71jyf" }, disabled: { true: "uv_1yf71jyg" } }, defaultVariants: { size: "medium", prominence: "default", sentiment: "neutral", disabled: false }, compoundVariants: [[{ prominence: "default", sentiment: "primary", disabled: false }, "uv_1yf71jyh"], [{ prominence: "default", sentiment: "secondary", disabled: false }, "uv_1yf71jyi"], [{ prominence: "default", sentiment: "danger", disabled: false }, "uv_1yf71jyj"], [{ prominence: "default", sentiment: "info", disabled: false }, "uv_1yf71jyk"], [{ prominence: "default", sentiment: "success", disabled: false }, "uv_1yf71jyl"], [{ prominence: "default", sentiment: "warning", disabled: false }, "uv_1yf71jym"], [{ prominence: "default", sentiment: "neutral", disabled: false }, "uv_1yf71jyn"], [{ prominence: "strong", sentiment: "primary", disabled: false }, "uv_1yf71jyo"], [{ prominence: "strong", sentiment: "secondary", disabled: false }, "uv_1yf71jyp"], [{ prominence: "strong", sentiment: "danger", disabled: false }, "uv_1yf71jyq"], [{ prominence: "strong", sentiment: "info", disabled: false }, "uv_1yf71jyr"], [{ prominence: "strong", sentiment: "success", disabled: false }, "uv_1yf71jys"], [{ prominence: "strong", sentiment: "warning", disabled: false }, "uv_1yf71jyt"], [{ prominence: "strong", sentiment: "neutral", disabled: false }, "uv_1yf71jyu"]] });
 export {
   badge
 };

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

@@ -29,10 +29,17 @@ type BarStackProps = {
     total?: number;
     className?: string;
     'data-testid'?: string;
+    label?: string;
+    labelInformation?: ReactNode;
     style?: CSSProperties;
+    /**
+     * Whether to add a legend inside or outside the chart
+     */
+    legend?: 'inside' | 'outside';
+    size?: 'large' | 'medium' | 'small' | 'xsmall';
 };
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, }: BarStackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, label, labelInformation, legend, size, }: BarStackProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarStack/index.js

@@ -1,79 +1,155 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { Label } from "../Label/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { containerBarStack, wrapperBarStack, barStack, wrapperWidth } from "./styles.css.js";
+import { containerBarStack, wrapperBarStack, barStack, barStackText, wrapperWidth, barStackLegendCircle } from "./styles.css.js";
 const BarStack = ({
   data,
   total,
   className,
   "data-testid": dataTestId,
-  style
+  style,
+  label,
+  labelInformation,
+  legend = "inside",
+  size
 }) => {
   const computedTotal = useMemo(
     () => total ?? data.reduce((acc, { value }) => acc + value, 0),
     [total, data]
   );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `${className ? `${className} ` : ""}${containerBarStack}`,
-      "data-testid": dataTestId,
-      style,
-      children: data.map(
-        ({
-          id,
-          value,
-          text,
-          onClick,
-          onDoubleClick,
-          onKeyDown,
-          onMouseEnter,
-          onMouseLeave,
-          onMouseDown,
-          onMouseUp,
-          tooltip
-        }) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: wrapperBarStack,
-            style: assignInlineVars({
-              [wrapperWidth]: `${value / computedTotal * 100}%`
-            }),
-            children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx(
+  const [hoveredBarId, setHoveredBarId] = useState(null);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 0.25, children: [
+      labelInformation ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "body", children: labelInformation })
+      ] }) : /* @__PURE__ */ jsx(Label, { children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${className ? `${className} ` : ""}${containerBarStack}`,
+          "data-testid": dataTestId,
+          style,
+          children: data.map(
+            ({
+              id,
+              value,
+              text,
+              onClick,
+              onDoubleClick,
+              onKeyDown,
+              onMouseEnter,
+              onMouseLeave,
+              onMouseDown,
+              onMouseUp,
+              tooltip
+            }) => /* @__PURE__ */ jsx(
               "div",
               {
-                className: barStack,
-                onClick,
-                onDoubleClick,
-                onKeyDown,
-                onMouseDown,
-                onMouseEnter,
-                onMouseLeave,
-                onMouseUp,
-                children: text
-              }
-            ) }) : /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: barStack,
-                onClick,
-                onDoubleClick,
-                onKeyDown,
-                onMouseDown,
-                onMouseEnter,
-                onMouseLeave,
-                onMouseUp,
-                children: text
-              }
+                className: wrapperBarStack,
+                style: assignInlineVars({
+                  [wrapperWidth]: `${value / computedTotal * 100}%`
+                }),
+                children: /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    text: legend === "outside" ? text : void 0,
+                    visible: hoveredBarId === id,
+                    children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip ?? text, children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: barStack({ size }),
+                        "data-testid": `content-${id}`,
+                        onClick,
+                        onDoubleClick,
+                        onKeyDown,
+                        onMouseDown,
+                        onMouseEnter: (event) => {
+                          onMouseEnter?.(event);
+                        },
+                        onMouseLeave: (event) => {
+                          onMouseLeave?.(event);
+                        },
+                        onMouseUp,
+                        children: /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            as: "span",
+                            className: barStackText,
+                            prominence: "stronger",
+                            sentiment: "neutral",
+                            variant: size === "small" || size === "xsmall" ? "captionSmallStrong" : "captionStrong",
+                            whiteSpace: "nowrap",
+                            children: legend === "outside" ? "" : text
+                          }
+                        )
+                      }
+                    ) }) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: barStack({ size }),
+                        "data-testid": `content-${id}`,
+                        onClick,
+                        onDoubleClick,
+                        onKeyDown,
+                        onMouseDown,
+                        onMouseEnter,
+                        onMouseLeave,
+                        onMouseUp,
+                        children: /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            as: "span",
+                            className: barStackText,
+                            prominence: "stronger",
+                            sentiment: "neutral",
+                            variant: size === "small" || size === "xsmall" ? "captionSmallStrong" : "captionStrong",
+                            whiteSpace: "nowrap",
+                            children: legend === "outside" ? "" : text
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              },
+              id
             )
-          },
-          id
-        )
+          )
+        }
       )
-    }
-  );
+    ] }),
+    legend === "outside" ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 2, children: data.map(({ text, id }, index) => /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        alignItems: "center",
+        "data-testid": `legend-${id}`,
+        direction: "row",
+        gap: "0.5",
+        onMouseEnter: () => {
+          setHoveredBarId(id);
+        },
+        onMouseLeave: () => setHoveredBarId(null),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: barStackLegendCircle({
+                child: index % 6
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "caption", children: text })
+        ]
+      },
+      id
+    )) }) : null
+  ] });
 };
 export {
   BarStack

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

@@ -1,4 +1,47 @@
 export declare const wrapperWidth: `var(--${string})`;
 export declare const wrapperBarStack: string;
-export declare const barStack: string;
+export declare const barStack: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        xsmall: {
+            height: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        small: {
+            height: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        medium: {
+            fontSize: `var(--${string})`;
+            height: `var(--${string})`;
+        };
+        fontSize: `var(--${string})`;
+        large: {
+            height: `var(--${string})`;
+        };
+    };
+}>;
+export declare const barStackText: string;
 export declare const containerBarStack: string;
+export declare const barStackLabel: string;
+export declare const barStackLegendCircle: import("@vanilla-extract/recipes").RuntimeFn<{
+    child: {
+        0: {
+            backgroundColor: `var(--${string})`;
+        };
+        1: {
+            backgroundColor: `var(--${string})`;
+        };
+        2: {
+            backgroundColor: `var(--${string})`;
+        };
+        3: {
+            backgroundColor: `var(--${string})`;
+        };
+        4: {
+            backgroundColor: `var(--${string})`;
+        };
+        5: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+}>;

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

@@ -1,10 +1,15 @@
 /* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var wrapperWidth = "var(--uv_1s3oplf0)";
 var wrapperBarStack = "uv_1s3oplf1";
-var barStack = "uv_1s3oplf2";
-var containerBarStack = "uv_1s3oplf3";
+var barStack = createRuntimeFn({ defaultClassName: "uv_1s3oplf2", variantClassNames: { size: { xsmall: "uv_1s3oplf3", small: "uv_1s3oplf4", medium: "uv_1s3oplf5", fontSize: "uv_1s3oplf6 var(--rwwhslcr)", large: "uv_1s3oplf7" } }, defaultVariants: { size: "medium" }, compoundVariants: [] });
+var barStackText = "uv_1s3oplf8";
+var containerBarStack = "uv_1s3oplf9";
+var barStackLegendCircle = createRuntimeFn({ defaultClassName: "uv_1s3oplfb", variantClassNames: { child: { "0": "uv_1s3oplfc", "1": "uv_1s3oplfd", "2": "uv_1s3oplfe", "3": "uv_1s3oplff", "4": "uv_1s3oplfg", "5": "uv_1s3oplfh" } }, defaultVariants: { child: 0 }, compoundVariants: [] });
 export {
   barStack,
+  barStackLegendCircle,
+  barStackText,
   containerBarStack,
   wrapperBarStack,
   wrapperWidth

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

@@ -15,7 +15,7 @@ type ChipType = {
 export declare const Chip: {
     ({ children, size, disabled, active, className, "data-testid": dataTestId, onClick, style, }: ChipType): import("react/jsx-runtime").JSX.Element;
     Icon: ({ name, onClick, "data-testid": dataTestId, }: {
-        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" | "closeCircle" | "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" | "closeCircle" | "closeCircleOutline" | "console" | "consoleOutline" | "copyContent" | "credential" | "credentialOutline" | "creditCard" | "creditCardOutline" | "database" | "databaseOutline" | "delete" | "deleteOutline" | "detach" | "doc" | "docOutline" | "docPaper" | "docPaperOutline" | "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("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+/* empty css                                                  */
 /* empty css                                                     */
 /* empty css                                 */
 /* empty css                          */

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

@@ -30,5 +30,5 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<{
     onChange?: (newValue: number | null) => void;
     min?: number;
     max?: number;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoFocus" | "aria-label" | "onFocus" | "onBlur" | "name" | "step" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoFocus" | "aria-label" | "onFocus" | "onBlur" | "name" | "step" | "required" | "placeholder" | "readOnly"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Popup/index.js

@@ -12,7 +12,7 @@ const DEFAULT_DEBOUNCE_DURATION = 200;
 const noop = () => {
 };
 const stopClickPropagation = (event) => {
-  event.nativeEvent.stopImmediatePropagation();
+  event.stopPropagation();
 };
 const getPopupPortalTarget = ({
   node,

package/dist/components/SelectInput/components/DropdownOption.js

@@ -42,7 +42,7 @@ const DisplayOption = ({
                   as: "span",
                   placement: "left",
                   prominence: "weak",
-                  sentiment: "neutral",
+                  sentiment: option.disabled ? void 0 : "neutral",
                   variant: "bodySmall",
                   children: option.description
                 }
@@ -81,17 +81,7 @@ const DisplayOption = ({
                     children: option.label
                   }
                 ),
-                option.description ? /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: "span",
-                    placement: "left",
-                    prominence: "weak",
-                    sentiment: "neutral",
-                    variant: "bodySmall",
-                    children: option.description
-                  }
-                ) : null
+                option.description ? /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: "bodySmall", children: option.description }) : null
               ]
             }
           ),
@@ -134,7 +124,7 @@ const DisplayOption = ({
                     as: "span",
                     placement: "left",
                     prominence: "weak",
-                    sentiment: "neutral",
+                    sentiment: option.disabled ? void 0 : "neutral",
                     variant: "bodySmall",
                     children: option.description
                   }
@@ -182,7 +172,7 @@ const DisplayOption = ({
             as: "span",
             placement: "left",
             prominence: "weak",
-            sentiment: "neutral",
+            sentiment: option.disabled ? void 0 : "neutral",
             variant: "bodySmall",
             children: option.description
           }

package/dist/components/SelectInput/components/selectBar.css.d.ts

@@ -7,6 +7,7 @@ export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         small: {
             height: `var(--${string})`;
+            padding: number;
             paddingLeft: `var(--${string})`;
         };
         medium: {

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/Snippet/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, CSSProperties } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { CopyButton } from '../CopyButton';
 type Prefixes = 'lines' | 'command';
 type SnippetProps = {
@@ -18,10 +18,13 @@ type SnippetProps = {
     noExpandable?: boolean;
     onCopy?: () => void;
     style?: CSSProperties;
+    helper?: string;
+    label?: string;
+    labelDescription?: ReactNode;
 } & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
 /**
  * Snippet component is used to display code snippets with the ability to copy the code.
  * It also has the ability to show/hide the code snippet if it has more than 4 lines.
  */
-export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, style, }: SnippetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, style, helper, label, labelDescription, }: SnippetProps) => import("react/jsx-runtime").JSX.Element;
 export {};