@ultraviolet/ui 3.0.0-beta.26 → 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/constants.d.ts

@@ -0,0 +1 @@
+export declare const EXPANDABLE_CARD_SIZE: readonly ["medium", "large"];

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, DetailsHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
-export declare const EXPANDABLE_CARD_SIZE: readonly ["medium", "large"];
+import type { EXPANDABLE_CARD_SIZE } from './constants';
 type ExpandableCardSize = (typeof EXPANDABLE_CARD_SIZE)[number];
 type DraggableProps = {
     draggable: true;
@@ -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 {};