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

package/dist/components/ExpandableCard/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { DragIcon, ArrowDownIcon } from "@ultraviolet/icons";
 import { useTheme } from "@ultraviolet/themes";
 import { forwardRef, useRef, useState, useCallback } from "react";
@@ -7,105 +7,206 @@ import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { ExpandableCardTitle } from "./components/Title.js";
 import { stackClass, dragIconContainer, detailsClass, summaryClass, arrowIcon, content, dropableArea } from "./styles.css.js";
-const BaseExpandableCard = forwardRef(({
-  header,
-  name,
-  size = "medium",
-  children,
-  disabled,
-  expanded,
-  onToggleExpand,
-  className,
-  draggable,
-  value,
-  draggableTooltip = "Click and drag to move",
-  onDrop,
-  index,
-  onKeyDown,
-  "data-testid": dataTestId,
-  open,
-  style
-}, ref) => {
-  const headerRef = useRef(null);
-  const containerRef = useRef(null);
-  const draggableRef = useRef(null);
-  const draggableFirstRef = useRef(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const [clicking, setClicking] = useState(false);
-  const theme = useTheme();
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-  const onDragStart = useCallback((event) => {
-    event.dataTransfer.setData("text/plain", JSON.stringify({
-      value
-    }));
-  }, [value]);
-  const onDragEnd = useCallback(() => setClicking(false), []);
-  const onDrag = useCallback((event, borderColor, isFirst) => {
-    const refElement = isFirst ? draggableFirstRef : draggableRef;
-    event.preventDefault();
-    if (refElement.current) {
-      refElement.current.style.borderColor = borderColor;
-    }
-  }, []);
-  const handleDrop = useCallback((event, isFirst) => {
-    event.preventDefault();
-    if (draggableRef.current) {
-      draggableRef.current.style.borderColor = "transparent";
-    }
-    if (event?.dataTransfer) {
-      const data = JSON.parse(event.dataTransfer.getData("text"));
-      onDrop?.(isFirst ? "" : value, data.value ?? "");
-    }
-  }, [onDrop, value]);
-  return /* @__PURE__ */ jsxs(Stack, { className: stackClass, "data-draggable": draggable, "data-name": name, "data-value": value, direction: "row", draggable, gap: 2, onDragEnd, onDragStart, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: containerRef, style, width: "100%", children: [
-    draggable ? /* @__PURE__ */ jsx(Stack, { className: dragIconContainer, "data-testid": `draggable-icon-${value}`, "data-visible": isHovered, justifyContent: "center", onKeyDown: (event) => {
-      if (event.key === "Enter" || event.key === " ") {
+const BaseExpandableCard = forwardRef(
+  ({
+    header,
+    name,
+    size = "medium",
+    children,
+    disabled,
+    expanded,
+    onToggleExpand,
+    className,
+    draggable,
+    value,
+    draggableTooltip = "Click and drag to move",
+    onDrop,
+    index,
+    onKeyDown,
+    "data-testid": dataTestId,
+    open,
+    style
+  }, ref) => {
+    const headerRef = useRef(null);
+    const containerRef = useRef(null);
+    const draggableRef = useRef(null);
+    const draggableFirstRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const [clicking, setClicking] = useState(false);
+    const theme = useTheme();
+    const handleMouseEnter = () => {
+      setIsHovered(true);
+    };
+    const handleMouseLeave = () => {
+      setIsHovered(false);
+    };
+    const onDragStart = useCallback(
+      (event) => {
+        event.dataTransfer.setData("text/plain", JSON.stringify({ value }));
+      },
+      [value]
+    );
+    const onDragEnd = useCallback(() => setClicking(false), []);
+    const onDrag = useCallback(
+      (event, borderColor, isFirst) => {
+        const refElement = isFirst ? draggableFirstRef : draggableRef;
         event.preventDefault();
-        if (clicking && containerRef.current) {
-          setClicking(false);
-          setIsHovered(false);
-        } else if (containerRef.current) {
-          setClicking(true);
-          setIsHovered(true);
+        if (refElement.current) {
+          refElement.current.style.borderColor = borderColor;
         }
-      }
-      if (clicking) {
-        onKeyDown?.(event);
-      }
-    }, onMouseDown: () => setClicking(true), onMouseUp: () => setClicking(false), children: /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        text: draggableTooltip,
-        visible: clicking ? false : void 0,
-        children: /* @__PURE__ */ jsx(DragIcon, { disabled, prominence: clicking ? "strong" : "weak", sentiment: "neutral", size: "small" })
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxs("details", { className: `${className ? `${className} ` : ""}${detailsClass}`, "data-clicking": clicking, "data-testid": dataTestId, name, open: open ?? expanded, ref, tabIndex: disabled ? -1 : void 0, children: [
-      /* @__PURE__ */ jsxs("summary", { className: summaryClass, "data-disabled": !!disabled, "data-testid": dataTestId ? `${dataTestId}-summary` : void 0, onClick: (event) => {
-        if (disabled || onToggleExpand) {
-          onToggleExpand?.();
-          event.preventDefault();
+      },
+      []
+    );
+    const handleDrop = useCallback(
+      (event, isFirst) => {
+        event.preventDefault();
+        if (draggableRef.current) {
+          draggableRef.current.style.borderColor = "transparent";
         }
-      }, onKeyDown: onToggleExpand ? (event) => {
-        if (event.key === " " && event.target === headerRef.current) {
-          onToggleExpand();
-          event.preventDefault();
+        if (event?.dataTransfer) {
+          const data = JSON.parse(
+            event.dataTransfer.getData("text")
+          );
+          onDrop?.(isFirst ? "" : value, data.value ?? "");
         }
-      } : void 0, ref: headerRef, children: [
-        /* @__PURE__ */ jsx(ArrowDownIcon, { className: arrowIcon, disabled, sentiment: "neutral" }),
-        typeof header === "string" ? /* @__PURE__ */ jsx(ExpandableCardTitle, { disabled, size, children: header }) : header
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: content, children })
-    ] }, clicking ? "closed" : "open"),
-    draggable && index === 0 ? /* @__PURE__ */ jsx("div", { className: dropableArea, "data-first": true, onDragLeave: (event) => onDrag(event, "transparent", true), onDragOver: (event) => onDrag(event, theme.colors.primary.border, true), onDrop: (event) => handleDrop(event, true), ref: draggableFirstRef }) : null,
-    draggable ? /* @__PURE__ */ jsx("div", { className: dropableArea, "data-testid": `${value}-dropable-area`, onDragLeave: (event) => onDrag(event, "transparent"), onDragOver: (event) => onDrag(event, theme.colors.primary.border), onDrop: handleDrop, ref: draggableRef }) : null
-  ] });
-});
+      },
+      [onDrop, value]
+    );
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        className: stackClass,
+        "data-draggable": draggable,
+        "data-name": name,
+        "data-value": value,
+        direction: "row",
+        draggable,
+        gap: 2,
+        onDragEnd,
+        onDragStart,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ref: containerRef,
+        style,
+        width: "100%",
+        children: [
+          draggable ? /* @__PURE__ */ jsx(
+            Stack,
+            {
+              className: dragIconContainer,
+              "data-testid": `draggable-icon-${value}`,
+              "data-visible": isHovered,
+              justifyContent: "center",
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  if (clicking && containerRef.current) {
+                    setClicking(false);
+                    setIsHovered(false);
+                  } else if (containerRef.current) {
+                    setClicking(true);
+                    setIsHovered(true);
+                  }
+                }
+                if (clicking) {
+                  onKeyDown?.(event);
+                }
+              },
+              onMouseDown: () => setClicking(true),
+              onMouseUp: () => setClicking(false),
+              children: /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  text: draggableTooltip,
+                  visible: clicking ? false : void 0,
+                  children: /* @__PURE__ */ jsx(
+                    DragIcon,
+                    {
+                      disabled,
+                      prominence: clicking ? "strong" : "weak",
+                      sentiment: "neutral",
+                      size: "small"
+                    }
+                  )
+                }
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(
+            "details",
+            {
+              className: `${className ? `${className} ` : ""}${detailsClass}`,
+              "data-clicking": clicking,
+              "data-testid": dataTestId,
+              name,
+              open: open ?? expanded,
+              ref,
+              tabIndex: disabled ? -1 : void 0,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "summary",
+                  {
+                    className: summaryClass,
+                    "data-disabled": !!disabled,
+                    "data-testid": dataTestId ? `${dataTestId}-summary` : void 0,
+                    onClick: (event) => {
+                      if (disabled || onToggleExpand) {
+                        onToggleExpand?.();
+                        event.preventDefault();
+                      }
+                    },
+                    onKeyDown: onToggleExpand ? (event) => {
+                      if (event.key === " " && event.target === headerRef.current) {
+                        onToggleExpand();
+                        event.preventDefault();
+                      }
+                    } : void 0,
+                    ref: headerRef,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        ArrowDownIcon,
+                        {
+                          className: arrowIcon,
+                          disabled,
+                          sentiment: "neutral"
+                        }
+                      ),
+                      typeof header === "string" ? /* @__PURE__ */ jsx(ExpandableCardTitle, { disabled, size, children: header }) : header
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: content, children })
+              ]
+            },
+            clicking ? "closed" : "open"
+          ),
+          draggable && index === 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: dropableArea,
+              "data-first": true,
+              onDragLeave: (event) => onDrag(event, "transparent", true),
+              onDragOver: (event) => onDrag(event, theme.colors.primary.border, true),
+              onDrop: (event) => handleDrop(event, true),
+              ref: draggableFirstRef
+            }
+          ) : null,
+          draggable ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: dropableArea,
+              "data-testid": `${value}-dropable-area`,
+              onDragLeave: (event) => onDrag(event, "transparent"),
+              onDragOver: (event) => onDrag(event, theme.colors.primary.border),
+              onDrop: handleDrop,
+              ref: draggableRef
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 const ExpandableCard = Object.assign(BaseExpandableCard, {
   Title: ExpandableCardTitle
 });

package/dist/components/GlobalAlert/GlobalAlertLink.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 import { Link } from '../Link';
-export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<ComponentProps<typeof Link>, "sentiment" | "prominence" | "size">) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<ComponentProps<typeof Link>, "sentiment" | "prominence" | "size">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalAlert/GlobalAlertLink.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { Link } from "../Link/index.js";
 const GlobalAlertLink = ({
@@ -15,10 +15,26 @@ const GlobalAlertLink = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const {
-    theme
-  } = useTheme();
-  return /* @__PURE__ */ jsx(Link, { "aria-label": ariaLabel, className, "data-testid": dataTestId, download, href, onClick, oneLine, prominence: theme === "light" ? "strong" : "stronger", rel, size: "small", style, target, variant: "inline", children });
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      "aria-label": ariaLabel,
+      className,
+      "data-testid": dataTestId,
+      download,
+      href,
+      onClick,
+      oneLine,
+      prominence: theme === "light" ? "strong" : "stronger",
+      rel,
+      size: "small",
+      style,
+      target,
+      variant: "inline",
+      children
+    }
+  );
 };
 export {
   GlobalAlertLink

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

@@ -15,7 +15,7 @@ type GlobalAlertProps = {
  * It has its own internal state and can be closed by clicking on the close button.
  */
 export declare const GlobalAlert: {
-    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, style, }: GlobalAlertProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
-    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<import("react").ComponentProps<typeof import("..").Link>, "sentiment" | "prominence" | "size">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, style, }: GlobalAlertProps): import("react/jsx-runtime").JSX.Element | null;
+    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<import("react").ComponentProps<typeof import("..").Link>, "sentiment" | "prominence" | "size">) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/GlobalAlert/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { useReducer } from "react";
 import { Button } from "../Button/index.js";
@@ -22,16 +22,56 @@ const GlobalAlert = ({
   if (!opened) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: `${className ? `${className} ` : ""}${container[variant]}`, "data-testid": dataTestId, "data-variant": variant, direction: "row", justifyContent: "center", style, children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 2, justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "white", variant: "bodySmall", children }),
-      onClickButton && buttonText ? /* @__PURE__ */ jsx(Button, { onClick: onClickButton, sentiment: "white", size: "small", variant: "filled", children: buttonText }) : null
-    ] }),
-    closable ? /* @__PURE__ */ jsx(Button, { className: closeButton, onClick: () => {
-      toggleOpened();
-      onClose?.();
-    }, sentiment: "primary", size: "xsmall", variant: "filled", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      alignItems: "center",
+      className: `${className ? `${className} ` : ""}${container[variant]}`,
+      "data-testid": dataTestId,
+      "data-variant": variant,
+      direction: "row",
+      justifyContent: "center",
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: "center",
+            direction: "row",
+            gap: 2,
+            justifyContent: "center",
+            children: [
+              /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "white", variant: "bodySmall", children }),
+              onClickButton && buttonText ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: onClickButton,
+                  sentiment: "white",
+                  size: "small",
+                  variant: "filled",
+                  children: buttonText
+                }
+              ) : null
+            ]
+          }
+        ),
+        closable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: closeButton,
+            onClick: () => {
+              toggleOpened();
+              onClose?.();
+            },
+            sentiment: "primary",
+            size: "xsmall",
+            variant: "filled",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
 };
 GlobalAlert.Link = GlobalAlertLink;
 export {

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

@@ -35,5 +35,5 @@ type InfiniteScrollProps = {
  * You can add it at the end of a list of items and it will call the `onLoadMore` function when the user scrolls to the bottom of the list.
  * The component will take the first parent that has as the scroll to listen on it. In some rare cases, if you need to change the scroll listener, you can use the `scrollParentRef` prop.
  */
-export declare const InfiniteScroll: ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, style, }: InfiniteScrollProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const InfiniteScroll: ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, style, }: InfiniteScrollProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfiniteScroll/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { Loader } from "../Loader/index.js";
 const HEIGHT_THRESHOLD = 100;
@@ -29,40 +29,37 @@ const InfiniteScroll = ({
       }, delay);
     };
   }, []);
-  const handleScroll = useCallback((scrollableContainer) => {
-    if (!containerRef.current) {
-      return;
-    }
-    if (!onLoadMore) {
-      return;
-    }
-    const {
-      scrollTop,
-      scrollHeight,
-      clientHeight
-    } = scrollableContainer;
-    if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
-      setIsLoading(true);
-      const result = onLoadMore();
-      if (result instanceof Promise) {
-        result.then(() => {
-          setIsLoading(false);
-        }).catch((error) => {
-          setIsLoading(false);
-          throw error;
-        });
+  const handleScroll = useCallback(
+    (scrollableContainer) => {
+      if (!containerRef.current) {
+        return;
       }
-    }
-  }, [onLoadMore, heightThreshold]);
+      if (!onLoadMore) {
+        return;
+      }
+      const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+      if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
+        setIsLoading(true);
+        const result = onLoadMore();
+        if (result instanceof Promise) {
+          result.then(() => {
+            setIsLoading(false);
+          }).catch((error) => {
+            setIsLoading(false);
+            throw error;
+          });
+        }
+      }
+    },
+    [onLoadMore, heightThreshold]
+  );
   useEffect(() => {
     if (!hasMore) {
       return;
     }
     let scrollableContainer = scrollParentRef?.current || containerRef.current?.parentElement;
     while (scrollableContainer && scrollableContainer !== document.body) {
-      const {
-        overflowY
-      } = window.getComputedStyle(scrollableContainer);
+      const { overflowY } = window.getComputedStyle(scrollableContainer);
       if (overflowY === "auto" || overflowY === "scroll") {
         break;
       }
@@ -71,7 +68,10 @@ const InfiniteScroll = ({
     if (!scrollableContainer) {
       return;
     }
-    const debouncedHandleScroll = debounce(() => handleScroll(scrollableContainer), 100);
+    const debouncedHandleScroll = debounce(
+      () => handleScroll(scrollableContainer),
+      100
+    );
     scrollableContainer.addEventListener("scroll", debouncedHandleScroll);
     return () => {
       scrollableContainer.removeEventListener("scroll", debouncedHandleScroll);
@@ -81,10 +81,17 @@ const InfiniteScroll = ({
   if (isLoading) {
     return localLoader;
   }
-  return /* @__PURE__ */ jsx(Component, { className, "data-testid": dataTestId, id, ref: containerRef, role: "feed", style: {
-    height,
-    ...style
-  } });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className,
+      "data-testid": dataTestId,
+      id,
+      ref: containerRef,
+      role: "feed",
+      style: { height, ...style }
+    }
+  );
 };
 export {
   InfiniteScroll

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

@@ -13,5 +13,5 @@ type KeyProps = {
 /**
  * Key is a visual component used to display keyboard shortcuts.
  */
-export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, "data-testid": dataTestId, style, }: KeyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, "data-testid": dataTestId, style, }: KeyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Key/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Text } from "../Text/index.js";
 import { KEYS_MATCH } from "./constants.js";
@@ -15,7 +15,10 @@ const Key = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const specialKey = useMemo(() => Object.keys(KEYS_MATCH).find((key2) => key2 === children.toLowerCase()), [children]);
+  const specialKey = useMemo(
+    () => Object.keys(KEYS_MATCH).find((key2) => key2 === children.toLowerCase()),
+    [children]
+  );
   const textProminence = useMemo(() => {
     if (prominence === "default") {
       return "default";
@@ -25,12 +28,30 @@ const Key = ({
     }
     return "stronger";
   }, [sentiment, prominence]);
-  return /* @__PURE__ */ jsx("kbd", { className: `${className ? `${className} ` : ""}${key({
-    disabled,
-    prominence,
-    sentiment,
-    size
-  })}`, "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 }) });
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: `${className ? `${className} ` : ""}${key({ disabled, prominence, sentiment, size })}`,
+      "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 {
   Key

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

@@ -18,5 +18,5 @@ type LabelProps = {
 /**
  * Label is used inside all of our input components, but it can be used outside for design purposes
  */
-export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};