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

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

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