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

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

@@ -4,7 +4,7 @@ type CarouselItemProps = {
     width?: string;
     style?: CSSProperties;
 };
-export declare const CarouselItem: ({ children, width, style, }: CarouselItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CarouselItem: ({ children, width, style, }: CarouselItemProps) => import("react/jsx-runtime").JSX.Element;
 type CarouselProps = {
     className?: string;
     children?: ReactNode;
@@ -14,7 +14,7 @@ type CarouselProps = {
  * Carousel component allows you to scroll horizontally through a list of items.
  */
 export declare const Carousel: {
-    ({ children, className, "data-testid": dataTestId, }: CarouselProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Item: ({ children, width, style, }: CarouselItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, className, "data-testid": dataTestId, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, width, style, }: CarouselItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/Carousel/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef, useEffect, useState } from "react";
 import { wrapper, beforeScroll, scrollableWrapper, afterScroll, borderWrapper, widthVar } from "./styles.css.js";
@@ -7,12 +7,20 @@ const CarouselItem = ({
   children,
   width = "240px",
   style
-}) => /* @__PURE__ */ jsx("div", { className: borderWrapper, draggable: "true", style: {
-  ...assignInlineVars({
-    [widthVar]: width
-  }),
-  ...style
-}, children });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: borderWrapper,
+    draggable: "true",
+    style: {
+      ...assignInlineVars({
+        [widthVar]: width
+      }),
+      ...style
+    },
+    children
+  }
+);
 const Carousel = ({
   children,
   className,
@@ -47,25 +55,63 @@ const Carousel = ({
   useEffect(() => cleanUp);
   const [dragStartX, setDragStartX] = useState(0);
   const [deltaX, setDeltaX] = useState(0);
-  return /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${wrapper}`, "data-testid": dataTestId, children: [
-    /* @__PURE__ */ jsx("span", { className: beforeScroll, "data-testid": `${dataTestId}-before`, onFocus: handleScrollRight, onMouseLeave: () => clearInterval(intervalRight), onMouseOver: handleScrollRight }),
-    /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${scrollableWrapper}`, "data-testid": `${dataTestId}-wrapper`, onDrag: () => handleScrollX(deltaX), onDragEnd: () => {
-      setDeltaX(0);
-      setDragStartX(0);
-    }, onDragOver: (e) => {
-      setDeltaX(dragStartX - e.pageX);
-      setDragStartX(e.pageX);
-    }, onDragStart: (e) => {
-      const blankImg = new Image();
-      blankImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
-      e.dataTransfer.setDragImage(blankImg, 0, 0);
-      setDragStartX(e.clientX);
-    }, onMouseUp: (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    }, ref: scrollRef, children }),
-    /* @__PURE__ */ jsx("span", { className: afterScroll, "data-testid": `${dataTestId}-after`, onFocus: handleScrollLeft, onMouseLeave: () => clearInterval(intervalLeft), onMouseOver: handleScrollLeft })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${wrapper}`,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: beforeScroll,
+            "data-testid": `${dataTestId}-before`,
+            onFocus: handleScrollRight,
+            onMouseLeave: () => clearInterval(intervalRight),
+            onMouseOver: handleScrollRight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${className ? `${className} ` : ""}${scrollableWrapper}`,
+            "data-testid": `${dataTestId}-wrapper`,
+            onDrag: () => handleScrollX(deltaX),
+            onDragEnd: () => {
+              setDeltaX(0);
+              setDragStartX(0);
+            },
+            onDragOver: (e) => {
+              setDeltaX(dragStartX - e.pageX);
+              setDragStartX(e.pageX);
+            },
+            onDragStart: (e) => {
+              const blankImg = new Image();
+              blankImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+              e.dataTransfer.setDragImage(blankImg, 0, 0);
+              setDragStartX(e.clientX);
+            },
+            onMouseUp: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            ref: scrollRef,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: afterScroll,
+            "data-testid": `${dataTestId}-after`,
+            onFocus: handleScrollLeft,
+            onMouseLeave: () => clearInterval(intervalLeft),
+            onMouseOver: handleScrollLeft
+          }
+        )
+      ]
+    }
+  );
 };
 Carousel.Item = CarouselItem;
 export {

package/dist/components/Checkbox/index.js

@@ -1,58 +1,154 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { forwardRef, useId } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { checkboxContainer, checkboxInput, icon, checkMixedMark, label, errorText, innerCheckbox } from "./styles.css.js";
-const CheckboxIconContainer = ({
-  children
-}) => {
+const CheckboxIconContainer = ({ children }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("rect", { className: innerCheckbox, height: "16", rx: theme.radii.small, strokeWidth: "2", width: "16", x: "4", y: "4" }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: innerCheckbox,
+        height: "16",
+        rx: theme.radii.small,
+        strokeWidth: "2",
+        width: "16",
+        x: "4",
+        y: "4"
+      }
+    ),
     children
   ] });
 };
-const Checkbox = forwardRef(({
-  id,
-  checked = false,
-  onChange,
-  onFocus,
-  onBlur,
-  error,
-  name,
-  helper,
-  value,
-  children,
-  disabled = false,
-  autoFocus = false,
-  className,
-  "data-visibility": dataVisibility,
-  "aria-label": ariaLabel,
-  required,
-  "data-testid": dataTestId,
-  tooltip,
-  tabIndex,
-  style
-}, ref) => {
-  const uniqId = useId();
-  const localId = id ?? uniqId;
-  const isCheck = checked === true ? checked : false;
-  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("div", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${checkboxContainer}`, "data-checked": checked, "data-error": !!error, "data-testid": dataTestId, "data-visibility": dataVisibility, children: [
-    /* @__PURE__ */ jsx("input", { "aria-checked": checked === "indeterminate" ? "mixed" : isCheck, "aria-describedby": error ? `${localId}-hint` : void 0, "aria-invalid": !!error, "aria-label": ariaLabel, autoFocus, checked: isCheck, className: checkboxInput, disabled, id: localId, name, onBlur, onChange, onFocus, ref, required, style, tabIndex, type: "checkbox", value }),
-    /* @__PURE__ */ jsx("svg", { className: icon, fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(CheckboxIconContainer, { children: checked !== "indeterminate" ? /* @__PURE__ */ jsx("path", { clipRule: "evenodd", d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z", fill: "white", fillRule: "evenodd", height: 9, width: 12, x: "5", y: "4" }) : /* @__PURE__ */ jsx("rect", { className: checkMixedMark, height: "2", rx: "1", width: "12", x: "6", y: "11" }) }) }),
-    !children && !required && !helper && !error ? null : /* @__PURE__ */ jsxs(Stack, { flex: 1, gap: 0.5, children: [
-      !children && !required ? null : /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", flex: 1, gap: 0.5, children: [
-        children ? /* @__PURE__ */ jsx(Fragment, { children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { as: "label", className: label, htmlFor: localId, prominence: "default", sentiment: "neutral", variant: "body", children }) : /* @__PURE__ */ jsx("label", { className: label, htmlFor: localId, children }) }) : null,
-        required ? /* @__PURE__ */ jsx(Text, { as: "sup", sentiment: "danger", variant: "body", children: "*" }) : null
-      ] }),
-      helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
-      error && typeof error !== "boolean" ? /* @__PURE__ */ jsx(Text, { as: "span", className: errorText, sentiment: "danger", variant: "caption", children: error }) : null
-    ] })
-  ] }) });
-});
+const Checkbox = forwardRef(
+  ({
+    id,
+    checked = false,
+    onChange,
+    onFocus,
+    onBlur,
+    error,
+    name,
+    helper,
+    value,
+    children,
+    disabled = false,
+    autoFocus = false,
+    className,
+    "data-visibility": dataVisibility,
+    "aria-label": ariaLabel,
+    required,
+    "data-testid": dataTestId,
+    tooltip,
+    tabIndex,
+    style
+  }, ref) => {
+    const uniqId = useId();
+    const localId = id ?? uniqId;
+    const isCheck = checked === true ? checked : false;
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": disabled,
+        className: `${className ? `${className} ` : ""}${checkboxContainer}`,
+        "data-checked": checked,
+        "data-error": !!error,
+        "data-testid": dataTestId,
+        "data-visibility": dataVisibility,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-checked": checked === "indeterminate" ? "mixed" : isCheck,
+              "aria-describedby": error ? `${localId}-hint` : void 0,
+              "aria-invalid": !!error,
+              "aria-label": ariaLabel,
+              autoFocus,
+              checked: isCheck,
+              className: checkboxInput,
+              disabled,
+              id: localId,
+              name,
+              onBlur,
+              onChange,
+              onFocus,
+              ref,
+              required,
+              style,
+              tabIndex,
+              type: "checkbox",
+              value
+            }
+          ),
+          /* @__PURE__ */ jsx("svg", { className: icon, fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(CheckboxIconContainer, { children: checked !== "indeterminate" ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              clipRule: "evenodd",
+              d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
+              fill: "white",
+              fillRule: "evenodd",
+              height: 9,
+              width: 12,
+              x: "5",
+              y: "4"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "rect",
+            {
+              className: checkMixedMark,
+              height: "2",
+              rx: "1",
+              width: "12",
+              x: "6",
+              y: "11"
+            }
+          ) }) }),
+          !children && !required && !helper && !error ? null : /* @__PURE__ */ jsxs(Stack, { flex: 1, gap: 0.5, children: [
+            !children && !required ? null : /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", flex: 1, gap: 0.5, children: [
+              children ? /* @__PURE__ */ jsx(Fragment, { children: typeof children === "string" ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "label",
+                  className: label,
+                  htmlFor: localId,
+                  prominence: "default",
+                  sentiment: "neutral",
+                  variant: "body",
+                  children
+                }
+              ) : /* @__PURE__ */ jsx("label", { className: label, htmlFor: localId, children }) }) : null,
+              required ? /* @__PURE__ */ jsx(Text, { as: "sup", sentiment: "danger", variant: "body", children: "*" }) : null
+            ] }),
+            helper ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                prominence: "weak",
+                sentiment: "neutral",
+                variant: "caption",
+                children: helper
+              }
+            ) : null,
+            error && typeof error !== "boolean" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                className: errorText,
+                sentiment: "danger",
+                variant: "caption",
+                children: error
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ) });
+  }
+);
 export {
   Checkbox
 };

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

@@ -3,7 +3,7 @@ import { Checkbox } from '../Checkbox';
 type CheckboxGroupCheckboxProps = Omit<ComponentProps<typeof Checkbox>, 'onChange' | 'checked'> & {
     value: string;
 };
-export declare const CheckboxGroupCheckbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, tooltip, style, }: CheckboxGroupCheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroupCheckbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, tooltip, style, }: CheckboxGroupCheckboxProps) => import("react/jsx-runtime").JSX.Element;
 type CheckboxGroupProps = {
     legend?: string;
     legendDescription?: ReactNode;
@@ -20,7 +20,7 @@ type CheckboxGroupProps = {
  * CheckboxGroup is a component that groups a set of checkboxes together with a legend and helper/error text.
  */
 export declare const CheckboxGroup: {
-    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, }: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, tooltip, style, }: CheckboxGroupCheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, tooltip, style, }: CheckboxGroupCheckboxProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/CheckboxGroup/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, createContext, useContext } from "react";
 import { Checkbox } from "../Checkbox/index.js";
 import { Label } from "../Label/index.js";
@@ -25,17 +25,34 @@ const CheckboxGroupCheckbox = ({
 }) => {
   const context = useContext(CheckboxGroupContext);
   if (!context) {
-    throw new Error("CheckboxGroup.Checkbox can only be used inside a CheckboxGroup");
+    throw new Error(
+      "CheckboxGroup.Checkbox can only be used inside a CheckboxGroup"
+    );
   }
-  const {
-    groupName,
-    onChange,
-    groupValues,
-    error: errorContext
-  } = context;
+  const { groupName, onChange, groupValues, error: errorContext } = context;
   const checkboxName = `${groupName}.${name ?? ""}`;
   const checkboxValue = `${value}`;
-  return /* @__PURE__ */ jsx(Checkbox, { autoFocus, checked: groupValues?.includes(checkboxValue), className: `${className ? `${className} ` : ""}${checkbox}`, "data-testid": dataTestId, disabled, error: error || errorContext, helper, name: checkboxName, onBlur, onChange, onFocus, required, style, tooltip, value: checkboxValue, children });
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      autoFocus,
+      checked: groupValues?.includes(checkboxValue),
+      className: `${className ? `${className} ` : ""}${checkbox}`,
+      "data-testid": dataTestId,
+      disabled,
+      error: error || errorContext,
+      helper,
+      name: checkboxName,
+      onBlur,
+      onChange,
+      onFocus,
+      required,
+      style,
+      tooltip,
+      value: checkboxValue,
+      children
+    }
+  );
 };
 const CheckboxGroup = ({
   legend,
@@ -52,22 +69,58 @@ const CheckboxGroup = ({
   required = false,
   style
 }) => {
-  const contextValue = useMemo(() => ({
-    error: !!error,
-    groupName: name,
-    groupValues: value ?? [],
-    onChange,
-    required
-  }), [name, value, onChange, required, error]);
+  const contextValue = useMemo(
+    () => ({
+      error: !!error,
+      groupName: name,
+      groupValues: value ?? [],
+      onChange,
+      required
+    }),
+    [name, value, onChange, required, error]
+  );
   return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, style, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
-      legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
-        legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-        description ? /* @__PURE__ */ jsx(Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null
-      ] }) : null,
-      /* @__PURE__ */ jsx(Stack, { direction, gap: direction === "column" ? 1 : 2, children })
-    ] }) }),
-    helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
+    /* @__PURE__ */ jsx(
+      "fieldset",
+      {
+        className: `${className ? `${className} ` : ""}${fieldset}`,
+        style,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+            legend ? /* @__PURE__ */ jsx(
+              Label,
+              {
+                as: "legend",
+                labelDescription: legendDescription,
+                required,
+                children: legend
+              }
+            ) : null,
+            description ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: typeof description === "string" ? "p" : "div",
+                prominence: "weak",
+                sentiment: "neutral",
+                variant: "bodySmall",
+                children: description
+              }
+            ) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx(Stack, { direction, gap: direction === "column" ? 1 : 2, children })
+        ] })
+      }
+    ),
+    helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "weak",
+        sentiment: "neutral",
+        variant: "caption",
+        children: helper
+      }
+    ) : null,
     error ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null
   ] }) });
 };

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

@@ -9,5 +9,5 @@ type ChipIconType = {
     onClick?: () => void;
     'data-testid'?: string;
 };
-export declare const ChipIcon: ({ name, onClick, "data-testid": dataTestId, }: ChipIconType) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ChipIcon: ({ name, onClick, "data-testid": dataTestId, }: ChipIconType) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Chip/ChipIcon.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as Icon from "@ultraviolet/icons";
 import { useContext } from "react";
 import { ChipContext } from "./ChipContext.js";
@@ -13,21 +13,55 @@ const ChipIcon = ({
   if (!context) {
     throw new Error("Chip.Icon can only be used inside a Chip component");
   }
-  const {
-    disabled,
-    isActive,
-    iconRef
-  } = context;
+  const { disabled, isActive, iconRef } = context;
   const IconUsed = Icon[`${name.charAt(0).toUpperCase() + name.slice(1)}Icon`];
   if (onClick) {
-    return /* @__PURE__ */ jsx("button", { className: buttonContainer, "data-active": isActive, "data-disabled": disabled, "data-has-onclick": !!onClick && !disabled, "data-testid": dataTestId, onClick: (event) => {
-      if (!disabled && onClick) {
-        event.stopPropagation();
-        onClick();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: buttonContainer,
+        "data-active": isActive,
+        "data-disabled": disabled,
+        "data-has-onclick": !!onClick && !disabled,
+        "data-testid": dataTestId,
+        onClick: (event) => {
+          if (!disabled && onClick) {
+            event.stopPropagation();
+            onClick();
+          }
+        },
+        ref: iconRef,
+        children: /* @__PURE__ */ jsx(
+          IconUsed,
+          {
+            disabled,
+            prominence: isActive ? "stronger" : "default",
+            sentiment: "neutral",
+            size: "small"
+          }
+        )
       }
-    }, ref: iconRef, children: /* @__PURE__ */ jsx(IconUsed, { disabled, prominence: isActive ? "stronger" : "default", sentiment: "neutral", size: "small" }) });
+    );
   }
-  return /* @__PURE__ */ jsx("div", { className: buttonContainer, "data-active": isActive, "data-disabled": disabled, "data-testid": dataTestId, ref: iconRef, children: /* @__PURE__ */ jsx(IconUsed, { disabled, prominence: isActive ? "stronger" : "default", sentiment: "neutral", size: "small" }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: buttonContainer,
+      "data-active": isActive,
+      "data-disabled": disabled,
+      "data-testid": dataTestId,
+      ref: iconRef,
+      children: /* @__PURE__ */ jsx(
+        IconUsed,
+        {
+          disabled,
+          prominence: isActive ? "stronger" : "default",
+          sentiment: "neutral",
+          size: "small"
+        }
+      )
+    }
+  );
 };
 export {
   ChipIcon

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

@@ -13,11 +13,11 @@ type ChipType = {
  * Chip component is used to display a clickable status or a label in a small container
  */
 export declare const Chip: {
-    ({ children, size, disabled, active, className, "data-testid": dataTestId, onClick, style, }: ChipType): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ 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" | "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" | "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;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};