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

package/dist/components/Dialog/components/Stack.js

@@ -1,10 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Stack } from "../../Stack/index.js";
-const DialogStack = ({
-  children,
-  style
-}) => /* @__PURE__ */ jsx(Stack, { gap: 3, style, children });
+const DialogStack = ({ children, style }) => /* @__PURE__ */ jsx(Stack, { gap: 3, style, children });
 export {
   DialogStack
 };

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

@@ -3,5 +3,5 @@ type DialogTextProps = {
     children: React.ReactNode;
     style?: CSSProperties;
 };
-export declare const DialogText: ({ children, style }: DialogTextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogText: ({ children, style }: DialogTextProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/components/Text.js

@@ -1,10 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Text } from "../../Text/index.js";
-const DialogText = ({
-  children,
-  style
-}) => /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "neutral", style, variant: "body", children });
+const DialogText = ({ children, style }) => /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "neutral", style, variant: "body", children });
 export {
   DialogText
 };

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

@@ -6,11 +6,11 @@ type DialogProps = Pick<ComponentProps<typeof Modal>, 'ariaLabel' | 'children' |
     title: string;
     sentiment: DialogSentiment;
 };
-export declare const BaseDialog: ({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BaseDialog: ({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * The Dialog component is used to show content on top of an overlay that requires user interaction.
  */
-export declare const Dialog: (({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+export declare const Dialog: (({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, style, }: DialogProps) => import("react/jsx-runtime").JSX.Element) & {
     Button: ({ children, onClick, disabled, tooltip, style, }: {
         children: import("react").ReactNode;
     } & Pick<{
@@ -54,25 +54,25 @@ export declare const Dialog: (({ ariaLabel, className, children, "data-testid":
         href?: string;
         target?: string;
         download?: string;
-    } & import("react").RefAttributes<Element>, "tooltip" | "style" | "disabled" | "onClick">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    } & import("react").RefAttributes<Element>, "tooltip" | "style" | "disabled" | "onClick">) => import("react/jsx-runtime").JSX.Element;
     Buttons: ({ secondaryButton, primaryButton, }: {
         secondaryButton: import("react").ReactNode;
         primaryButton: import("react").ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     CancelButton: ({ children, onClick, disabled, style, }: {
         children: import("react").ReactNode;
         onClick: ComponentProps<typeof import("..").Button>["onClick"];
         disabled?: ComponentProps<typeof import("..").Button>["disabled"];
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Stack: ({ children, style }: {
         children: import("react").ReactNode;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Text: ({ children, style }: {
         children: React.ReactNode;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     useDialogContext: () => DialogContextType;
 };
 export {};

package/dist/components/Dialog/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { AlertCircleIcon, CheckIcon } from "@ultraviolet/icons";
 import { useMemo } from "react";
 import { Bullet } from "../Bullet/index.js";
@@ -33,18 +33,49 @@ const BaseDialog = ({
 }) => {
   const headerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Bullet, { sentiment, children: sentiment === "warning" || sentiment === "danger" ? /* @__PURE__ */ jsx(AlertCircleIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
-    /* @__PURE__ */ jsx(Text, { as: "h2", className: dialogTitle, sentiment: "neutral", variant: "headingSmallStronger", children: title })
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "h2",
+        className: dialogTitle,
+        sentiment: "neutral",
+        variant: "headingSmallStronger",
+        children: title
+      }
+    )
   ] });
-  const contextValue = useMemo(() => ({
-    sentiment
-  }), [sentiment]);
-  return /* @__PURE__ */ jsx(Modal, { ariaLabel, className: `${className ? `${className} ` : ""}${dialogXsmall}`, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, size: DIALOG_SIZE, style, children: (modalProps) => typeof children === "function" ? /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
-    headerContent,
-    children(modalProps)
-  ] }) : /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
-    headerContent,
-    children
-  ] }) });
+  const contextValue = useMemo(
+    () => ({
+      sentiment
+    }),
+    [sentiment]
+  );
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ariaLabel,
+      className: `${className ? `${className} ` : ""}${dialogXsmall}`,
+      "data-testid": dataTestId,
+      disclosure,
+      hideOnClickOutside,
+      hideOnEsc,
+      id,
+      isClosable,
+      onBeforeClose,
+      onClose,
+      open,
+      placement,
+      size: DIALOG_SIZE,
+      style,
+      children: (modalProps) => typeof children === "function" ? /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+        headerContent,
+        children(modalProps)
+      ] }) : /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+        headerContent,
+        children
+      ] })
+    }
+  );
 };
 const Dialog = Object.assign(BaseDialog, {
   Button: DialogButton,

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

@@ -14,11 +14,11 @@ type DrawerProps = Pick<ComponentProps<typeof Modal>, 'ariaLabel' | 'children' |
 };
 export declare const DrawerContent: ({ children }: {
     children: ReactNode;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const BaseDrawer: ({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Drawer: (({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseDrawer: ({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: (({ size, onClose, open, header, footer, disclosure, children, ariaLabel, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id, isClosable, separator, noPadding, style, }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
     Content: ({ children }: {
         children: ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/Drawer/index.js

@@ -1,13 +1,11 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Modal } from "../Modal/index.js";
 import { Separator } from "../Separator/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { drawer, drawerContentWrapper, drawerChildrenWrapper, drawerFooter, drawerContent, drawerHeader } from "./styles.css.js";
-const DrawerContent = ({
-  children
-}) => /* @__PURE__ */ jsx("div", { className: drawerContent, children });
+const DrawerContent = ({ children }) => /* @__PURE__ */ jsx("div", { className: drawerContent, children });
 const BaseDrawer = ({
   size = "medium",
   onClose,
@@ -29,22 +27,62 @@ const BaseDrawer = ({
 }) => {
   const computeHeader = (modalProps) => {
     if (typeof header === "string") {
-      return /* @__PURE__ */ jsx(Text, { as: "h2", className: drawerHeader, prominence: "default", sentiment: "neutral", variant: "headingSmallStrong", children: header });
+      return /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "h2",
+          className: drawerHeader,
+          prominence: "default",
+          sentiment: "neutral",
+          variant: "headingSmallStrong",
+          children: header
+        }
+      );
     }
     if (typeof header === "function") {
-      return /* @__PURE__ */ jsx(Text, { as: "h2", className: drawerHeader, prominence: "default", sentiment: "neutral", variant: "headingSmallStrong", children: header(modalProps) });
+      return /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "h2",
+          className: drawerHeader,
+          prominence: "default",
+          sentiment: "neutral",
+          variant: "headingSmallStrong",
+          children: header(modalProps)
+        }
+      );
     }
     return header;
   };
-  return /* @__PURE__ */ jsx(Modal, { ariaLabel, backdropClassName: "backdrop-drawer", className: `${className ? `${className} ` : ""}${drawer[size]}`, "data-size": size, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onClose, open, placement: "top-right", size, style, children: (modalProps) => {
-    const content = typeof children === "function" ? children(modalProps) : children;
-    return /* @__PURE__ */ jsxs(Stack, { className: drawerContentWrapper, gap: 2, children: [
-      computeHeader(modalProps),
-      separator ? /* @__PURE__ */ jsx(Separator, {}) : null,
-      /* @__PURE__ */ jsx("div", { className: drawerChildrenWrapper, children: noPadding ? content : /* @__PURE__ */ jsx(DrawerContent, { children: content }) }),
-      /* @__PURE__ */ jsx(Stack, { className: drawerFooter, children: typeof footer === "function" ? footer(modalProps) : footer })
-    ] });
-  } });
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ariaLabel,
+      backdropClassName: "backdrop-drawer",
+      className: `${className ? `${className} ` : ""}${drawer[size]}`,
+      "data-size": size,
+      "data-testid": dataTestId,
+      disclosure,
+      hideOnClickOutside,
+      hideOnEsc,
+      id,
+      isClosable,
+      onClose,
+      open,
+      placement: "top-right",
+      size,
+      style,
+      children: (modalProps) => {
+        const content = typeof children === "function" ? children(modalProps) : children;
+        return /* @__PURE__ */ jsxs(Stack, { className: drawerContentWrapper, gap: 2, children: [
+          computeHeader(modalProps),
+          separator ? /* @__PURE__ */ jsx(Separator, {}) : null,
+          /* @__PURE__ */ jsx("div", { className: drawerChildrenWrapper, children: noPadding ? content : /* @__PURE__ */ jsx(DrawerContent, { children: content }) }),
+          /* @__PURE__ */ jsx(Stack, { className: drawerFooter, children: typeof footer === "function" ? footer(modalProps) : footer })
+        ] });
+      }
+    }
+  );
 };
 const Drawer = Object.assign(BaseDrawer, {
   Content: DrawerContent

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

@@ -30,5 +30,5 @@ type EmptyStateProps = {
 /**
  * EmptyState component is used to display a message when there is no data to show.
  */
-export declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, style, }: EmptyStateProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, style, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EmptyState/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "../Link/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -17,26 +17,68 @@ const EmptyState = ({
   children,
   "data-testid": dataTestId,
   style
-}) => /* @__PURE__ */ jsx(Stack, { className: `${className ? `${className} ` : ""}${emptyStateContainer({
-  bordered,
-  size
-})}`, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: paddedStack, gap: size === "small" ? 2 : 3, justifyContent: "center", children: [
-  /* @__PURE__ */ jsxs(Stack, { alignItems: "center", gap: 2, justifyContent: "center", children: [
-    image && typeof image === "string" ? /* @__PURE__ */ jsx("img", { alt: "", className: emptyStateImage[size], src: image }) : image,
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", gap: 0.5, children: [
-      title ? /* @__PURE__ */ jsx(Text, { as: "h2", placement: "center", prominence: "strong", sentiment: "neutral", variant: size === "small" ? "bodyStrong" : "headingSmall", children: title }) : null,
-      /* @__PURE__ */ jsx(Text, { as: "p", placement: "center", sentiment: "neutral", variant: size === "small" ? "bodySmall" : "body", children: description })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxs(Stack, { alignItems: "center", gap: 2, justifyContent: "center", children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, children: [
-      secondaryButton,
-      primaryButton
-    ] }),
-    learnMore?.text ? /* @__PURE__ */ jsx(Link, { href: learnMore.link, iconPosition: "right", size: size === "small" ? "small" : void 0, target: learnMore.target, children: learnMore.text }) : null
-  ] }),
-  children
-] }) });
+}) => /* @__PURE__ */ jsx(
+  Stack,
+  {
+    className: `${className ? `${className} ` : ""}${emptyStateContainer({ bordered, size })}`,
+    "data-testid": dataTestId,
+    style,
+    children: /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        alignItems: "center",
+        className: paddedStack,
+        gap: size === "small" ? 2 : 3,
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ jsxs(Stack, { alignItems: "center", gap: 2, justifyContent: "center", children: [
+            image && typeof image === "string" ? /* @__PURE__ */ jsx("img", { alt: "", className: emptyStateImage[size], src: image }) : image,
+            /* @__PURE__ */ jsxs(Stack, { alignItems: "center", gap: 0.5, children: [
+              title ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "h2",
+                  placement: "center",
+                  prominence: "strong",
+                  sentiment: "neutral",
+                  variant: size === "small" ? "bodyStrong" : "headingSmall",
+                  children: title
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "p",
+                  placement: "center",
+                  sentiment: "neutral",
+                  variant: size === "small" ? "bodySmall" : "body",
+                  children: description
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { alignItems: "center", gap: 2, justifyContent: "center", children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, children: [
+              secondaryButton,
+              primaryButton
+            ] }),
+            learnMore?.text ? /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: learnMore.link,
+                iconPosition: "right",
+                size: size === "small" ? "small" : void 0,
+                target: learnMore.target,
+                children: learnMore.text
+              }
+            ) : null
+          ] }),
+          children
+        ]
+      }
+    )
+  }
+);
 export {
   EmptyState
 };

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

@@ -20,11 +20,11 @@ type ExpandableProps = {
     animationDuration?: number;
     style?: CSSProperties;
 };
-export declare const AnimatedExpandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, style, animationDuration, }: ExpandableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AnimatedExpandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, style, animationDuration, }: ExpandableProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * The Expandable component is a dynamic React component that allows for the expansion of its children content
  * based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
  * user experience.
  */
-export declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, animationDuration, style, }: ExpandableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, animationDuration, style, }: ExpandableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Expandable/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useState, useRef, useEffect } from "react";
 import { expandable, animationDurationVar } from "./styles.css.js";
@@ -11,11 +11,15 @@ const NoAnimationExpandable = ({
   className,
   "data-testid": dataTestId,
   style
-}) => /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
-  display: !opened ? "none" : void 0,
-  minHeight,
-  ...style
-}, children });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className,
+    "data-testid": dataTestId,
+    style: { display: !opened ? "none" : void 0, minHeight, ...style },
+    children
+  }
+);
 const AnimatedExpandable = ({
   children,
   opened,
@@ -26,7 +30,9 @@ const AnimatedExpandable = ({
   animationDuration = ANIMATION_DURATION
 }) => {
   const [height, setHeight] = useState(null);
-  const transitionTimer = useRef(null);
+  const transitionTimer = useRef(
+    null
+  );
   const ref = useRef(null);
   const shouldBeAnimated = animationDuration > 0;
   const isFirstRender = useRef(true);
@@ -81,12 +87,22 @@ const AnimatedExpandable = ({
       }
     };
   }, [animationDuration, height, minHeight, opened, shouldBeAnimated]);
-  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${expandable}`, "data-is-animated": shouldBeAnimated && !isFirstRender.current, "data-testid": dataTestId, ref, style: {
-    ...assignInlineVars({
-      [animationDurationVar]: `${animationDuration}ms`
-    }),
-    ...style
-  }, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${expandable}`,
+      "data-is-animated": shouldBeAnimated && !isFirstRender.current,
+      "data-testid": dataTestId,
+      ref,
+      style: {
+        ...assignInlineVars({
+          [animationDurationVar]: `${animationDuration}ms`
+        }),
+        ...style
+      },
+      children
+    }
+  );
 };
 const Expandable = ({
   children,
@@ -98,9 +114,30 @@ const Expandable = ({
   style
 }) => {
   if (animationDuration > 0) {
-    return /* @__PURE__ */ jsx(AnimatedExpandable, { animationDuration, className, "data-testid": dataTestId, minHeight, opened, style, children });
+    return /* @__PURE__ */ jsx(
+      AnimatedExpandable,
+      {
+        animationDuration,
+        className,
+        "data-testid": dataTestId,
+        minHeight,
+        opened,
+        style,
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(NoAnimationExpandable, { className, "data-testid": dataTestId, minHeight, opened, style, children });
+  return /* @__PURE__ */ jsx(
+    NoAnimationExpandable,
+    {
+      className,
+      "data-testid": dataTestId,
+      minHeight,
+      opened,
+      style,
+      children
+    }
+  );
 };
 export {
   AnimatedExpandable,

package/dist/components/ExpandableCard/components/Title.d.ts

@@ -4,4 +4,4 @@ export type ExpandableCardTitleProps = {
     size?: 'medium' | 'large';
     disabled?: boolean;
 } & Partial<Pick<ComponentProps<typeof Text>, 'as' | 'style'>> & Pick<ComponentProps<typeof Text>, 'children'>;
-export declare const ExpandableCardTitle: ({ as, size, children, disabled, style, }: ExpandableCardTitleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ExpandableCardTitle: ({ as, size, children, disabled, style, }: ExpandableCardTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpandableCard/components/Title.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Text } from "../../Text/index.js";
 const ExpandableCardTitle = ({
   as,
@@ -7,7 +7,17 @@ const ExpandableCardTitle = ({
   children,
   disabled,
   style
-}) => /* @__PURE__ */ jsx(Text, { as: as ?? "h2", disabled, sentiment: "neutral", style, variant: size === "medium" ? "bodyStrong" : "headingSmallStrong", children });
+}) => /* @__PURE__ */ jsx(
+  Text,
+  {
+    as: as ?? "h2",
+    disabled,
+    sentiment: "neutral",
+    style,
+    variant: size === "medium" ? "bodyStrong" : "headingSmallStrong",
+    children
+  }
+);
 export {
   ExpandableCardTitle
 };

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

@@ -41,6 +41,6 @@ export declare const ExpandableCard: import("react").ForwardRefExoticComponent<(
     expanded: boolean;
     onToggleExpand: () => void;
 }))) & import("react").RefAttributes<HTMLDetailsElement>> & {
-    Title: ({ as, size, children, disabled, style, }: import("./components/Title").ExpandableCardTitleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Title: ({ as, size, children, disabled, style, }: import("./components/Title").ExpandableCardTitleProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};