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

package/dist/components/Card/index.js

@@ -1,28 +1,88 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { stackCard, borderedBox } from "./styles.css.js";
-const Card = forwardRef(({
-  header,
-  subHeader,
-  disabled = false,
-  active = false,
-  children,
-  className,
-  "data-testid": dataTestId,
-  style
-}, ref) => header ? /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${stackCard}`, "data-disabled": disabled, "data-testid": dataTestId, gap: 1, ref, style, children: [
-  typeof header === "string" ? /* @__PURE__ */ jsx(Text, { as: "h2", disabled, prominence: "strong", sentiment: "neutral", variant: "heading", children: header }) : header,
-  /* @__PURE__ */ jsx("div", { className: borderedBox, "data-disabled": disabled, "data-is-active": active, children: subHeader ? /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-    typeof subHeader === "string" ? /* @__PURE__ */ jsx(Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
-    children
-  ] }) : children })
-] }) : /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${borderedBox}`, "data-disabled": disabled, "data-is-active": active, "data-testid": dataTestId, ref, style, children: subHeader ? /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-  typeof subHeader === "string" ? /* @__PURE__ */ jsx(Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
-  children
-] }) : children }));
+const Card = forwardRef(
+  ({
+    header,
+    subHeader,
+    disabled = false,
+    active = false,
+    children,
+    className,
+    "data-testid": dataTestId,
+    style
+  }, ref) => header ? /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: `${className ? `${className} ` : ""}${stackCard}`,
+      "data-disabled": disabled,
+      "data-testid": dataTestId,
+      gap: 1,
+      ref,
+      style,
+      children: [
+        typeof header === "string" ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "h2",
+            disabled,
+            prominence: "strong",
+            sentiment: "neutral",
+            variant: "heading",
+            children: header
+          }
+        ) : header,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: borderedBox,
+            "data-disabled": disabled,
+            "data-is-active": active,
+            children: subHeader ? /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+              typeof subHeader === "string" ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "h3",
+                  disabled,
+                  sentiment: "neutral",
+                  variant: "headingSmallStrong",
+                  children: subHeader
+                }
+              ) : subHeader,
+              children
+            ] }) : children
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${borderedBox}`,
+      "data-disabled": disabled,
+      "data-is-active": active,
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: subHeader ? /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+        typeof subHeader === "string" ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "h3",
+            disabled,
+            sentiment: "neutral",
+            variant: "headingSmallStrong",
+            children: subHeader
+          }
+        ) : subHeader,
+        children
+      ] }) : children
+    }
+  )
+);
 export {
   Card
 };

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