@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type ExpandableProps = {
     /**
      * The content to display
@@ -18,18 +18,13 @@ type ExpandableProps = {
      * The duration of the animation in ms. If set to 0, the animation will be disabled.
      */
     animationDuration?: number;
+    style?: CSSProperties;
 };
-export declare const StyledExpandable: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    animationDuration: number;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AnimatedExpandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, 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, }: 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,40 +1,38 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+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";
 const ANIMATION_DURATION = 300;
-const StyledExpandable = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["animationDuration"].includes(prop),
-  target: "e5hc7t70"
-} : {
-  shouldForwardProp: (prop) => !["animationDuration"].includes(prop),
-  target: "e5hc7t70",
-  label: "StyledExpandable"
-})('&[data-is-animated="true"]{transition:max-height ', ({
-  animationDuration
-}) => animationDuration, "ms ease-out,opacity ", ({
-  animationDuration
-}) => animationDuration, "ms ease-out;}height:auto;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0V4cGFuZGFibGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvRXhwYW5kYWJsZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5cbmNvbnN0IEFOSU1BVElPTl9EVVJBVElPTiA9IDMwMCAvLyBpbiBtc1xuXG50eXBlIEV4cGFuZGFibGVQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHRvIGRpc3BsYXlcbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgLyoqXG4gICAqIFRvIGRpc3BsYXkgb3Igbm90IHRoZSBjb250ZW50XG4gICAqL1xuICBvcGVuZWQ/OiBib29sZWFuXG4gIC8qKlxuICAgKiBUaGUgbWluaW11bSBoZWlnaHQgb2YgdGhlIGNvbnRlbnRcbiAgICovXG4gIG1pbkhlaWdodD86IG51bWJlclxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xuICAvKipcbiAgICogVGhlIGR1cmF0aW9uIG9mIHRoZSBhbmltYXRpb24gaW4gbXMuIElmIHNldCB0byAwLCB0aGUgYW5pbWF0aW9uIHdpbGwgYmUgZGlzYWJsZWQuXG4gICAqL1xuICBhbmltYXRpb25EdXJhdGlvbj86IG51bWJlclxufVxuXG5leHBvcnQgY29uc3QgU3R5bGVkRXhwYW5kYWJsZSA9IHN0eWxlZCgnZGl2Jywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PiAhWydhbmltYXRpb25EdXJhdGlvbiddLmluY2x1ZGVzKHByb3ApLFxufSk8eyBhbmltYXRpb25EdXJhdGlvbjogbnVtYmVyIH0+YFxuICAmW2RhdGEtaXMtYW5pbWF0ZWQ9XCJ0cnVlXCJdIHtcbiAgICB0cmFuc2l0aW9uOlxuICAgICAgbWF4LWhlaWdodCAkeyh7IGFuaW1hdGlvbkR1cmF0aW9uIH0pID0+IGFuaW1hdGlvbkR1cmF0aW9ufW1zIGVhc2Utb3V0LFxuICAgICAgb3BhY2l0eSAkeyh7IGFuaW1hdGlvbkR1cmF0aW9uIH0pID0+IGFuaW1hdGlvbkR1cmF0aW9ufW1zIGVhc2Utb3V0O1xuICAgIH1cbiAgaGVpZ2h0OiBhdXRvO1xuYFxuXG5jb25zdCBOb0FuaW1hdGlvbkV4cGFuZGFibGUgPSAoe1xuICBjaGlsZHJlbixcbiAgb3BlbmVkLFxuICBtaW5IZWlnaHQsXG4gIGNsYXNzTmFtZSxcbiAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbn06IEV4cGFuZGFibGVQcm9wcykgPT4gKFxuICA8ZGl2XG4gICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgc3R5bGU9e3sgZGlzcGxheTogIW9wZW5lZCA/ICdub25lJyA6IHVuZGVmaW5lZCwgbWluSGVpZ2h0IH19XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvZGl2PlxuKVxuXG5leHBvcnQgY29uc3QgQW5pbWF0ZWRFeHBhbmRhYmxlID0gKHtcbiAgY2hpbGRyZW4sXG4gIG9wZW5lZCxcbiAgbWluSGVpZ2h0ID0gMCxcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxuICBhbmltYXRpb25EdXJhdGlvbiA9IEFOSU1BVElPTl9EVVJBVElPTixcbn06IEV4cGFuZGFibGVQcm9wcykgPT4ge1xuICBjb25zdCBbaGVpZ2h0LCBzZXRIZWlnaHRdID0gdXNlU3RhdGU8bnVtYmVyIHwgbnVsbD4obnVsbClcbiAgY29uc3QgdHJhbnNpdGlvblRpbWVyID0gdXNlUmVmPFJldHVyblR5cGU8dHlwZW9mIHNldFRpbWVvdXQ+IHwgdW5kZWZpbmVkPihcbiAgICBudWxsLFxuICApXG4gIGNvbnN0IHJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbClcbiAgY29uc3Qgc2hvdWxkQmVBbmltYXRlZCA9IGFuaW1hdGlvbkR1cmF0aW9uID4gMFxuXG4gIC8vIFRvIGF2b2lkIGV4cGFuZGVkIGFuaW1hdGlvbiBvbiBmaXJzdCByZW5kZXJcbiAgY29uc3QgaXNGaXJzdFJlbmRlciA9IHVzZVJlZih0cnVlKVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpZiAoaXNGaXJzdFJlbmRlci5jdXJyZW50KSB7XG4gICAgICAgIGlzRmlyc3RSZW5kZXIuY3VycmVudCA9IGZhbHNlXG4gICAgICB9XG4gICAgfSwgMClcbiAgfSwgW10pXG4gIC8qKlxuICAgKiBBdCBtb3VudCwgd2Ugc2V0IHRoZSBoZWlnaHQgdmFyaWFibGUgdG8gdGhlIGhlaWdodCBvZiB0aGUgY29udGVudCBvbmx5IGlmIHRoZSBjb21wb25lbnQgaXMgY2xvc2VkLlxuICAgKiBUaGlzIGlzIHRvIGVuc3VyZSB3ZSBkb24ndCBoYXZlIGFuaW1hdGlvbiB3aGVuIHRoZSBjb21wb25lbnQgaXMgb3BlbmVkIGF0IG1vdW50LlxuICAgKi9cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAocmVmLmN1cnJlbnQpIHtcbiAgICAgIHNldEhlaWdodChyZWYuY3VycmVudC5zY3JvbGxIZWlnaHQgPz8gMClcbiAgICB9XG4gIH0sIFtyZWYuY3VycmVudD8uc2Nyb2xsSGVpZ2h0XSlcblxuICAvKipcbiAgICogSGVyZSB3ZSBzZXQgbWF4SGVpZ2h0IHRvIHRoZSBoZWlnaHQgb2YgdGhlIGNvbnRlbnQgd2hlbiB0aGUgY29tcG9uZW50IGlzIG9wZW5lZFxuICAgKiBhbmQgYWZ0ZXIgMzAwbXMgd2Ugc2V0IG1heEhlaWdodCB0byBpbml0aWFsIHRvIGxldCB0aGUgY29udGVudCBncm93IHdpdGggYW5pbWF0aW9uLlxuICAgKiBTZXR0aW5nIGl0IHRvIGluaXRpYWwgaXMgcmVxdWlyZWQgdG8gYmUgYWJsZSB0byBoYXZlIG5lc3RlZCBleHBhbmRhYmxlIG9yIHRoZSBoZWlnaHQgd29uJ3QgZm9sbG93LlxuICAgKi9cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNGaXJzdFJlbmRlci5jdXJyZW50ICYmICFvcGVuZWQgJiYgcmVmLmN1cnJlbnQpIHtcbiAgICAgIHJlZi5jdXJyZW50LnN0eWxlLm1heEhlaWdodCA9IGAke21pbkhlaWdodCA/PyAwfXB4YFxuICAgICAgcmVmLmN1cnJlbnQuc3R5bGUub3ZlcmZsb3cgPSAnaGlkZGVuJ1xuICAgIH0gZWxzZSBpZiAob3BlbmVkICYmIHJlZi5jdXJyZW50ICYmIGhlaWdodCkge1xuICAgICAgcmVmLmN1cnJlbnQuc3R5bGUubWF4SGVpZ2h0ID0gYCR7aGVpZ2h0fXB4YFxuICAgICAgcmVmLmN1cnJlbnQuc3R5bGUudmlzaWJpbGl0eSA9ICcnXG4gICAgICB0cmFuc2l0aW9uVGltZXIuY3VycmVudCA9IHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBpZiAocmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICByZWYuY3VycmVudC5zdHlsZS5tYXhIZWlnaHQgPSAnaW5pdGlhbCdcbiAgICAgICAgICByZWYuY3VycmVudC5zdHlsZS5vdmVyZmxvdyA9ICd2aXNpYmxlJ1xuICAgICAgICAgIHJlZi5jdXJyZW50LnN0eWxlLnZpc2liaWxpdHkgPSAnJ1xuICAgICAgICB9XG4gICAgICB9LCBBTklNQVRJT05fRFVSQVRJT04pXG4gICAgfSBlbHNlIHtcbiAgICAgIGlmICh0cmFuc2l0aW9uVGltZXI/LmN1cnJlbnQpIHtcbiAgICAgICAgY2xlYXJUaW1lb3V0KHRyYW5zaXRpb25UaW1lci5jdXJyZW50KVxuICAgICAgfVxuXG4gICAgICBpZiAocmVmLmN1cnJlbnQgJiYgaGVpZ2h0KSB7XG4gICAgICAgIHJlZi5jdXJyZW50LnN0eWxlLm1heEhlaWdodCA9IGAke2hlaWdodH1weGBcbiAgICAgICAgdHJhbnNpdGlvblRpbWVyLmN1cnJlbnQgPSBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICBpZiAocmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICAgIHJlZi5jdXJyZW50LnN0eWxlLm1heEhlaWdodCA9IGAke21pbkhlaWdodH1weGBcbiAgICAgICAgICAgIHJlZi5jdXJyZW50LnN0eWxlLm92ZXJmbG93ID0gJ2hpZGRlbidcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICBpZiAocmVmLmN1cnJlbnQgJiYgIW1pbkhlaWdodCkge1xuICAgICAgICAgICAgICAgIHJlZi5jdXJyZW50LnN0eWxlLnZpc2liaWxpdHkgPSAnaGlkZGVuJ1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9LCBBTklNQVRJT05fRFVSQVRJT04pXG4gICAgICAgICAgfVxuICAgICAgICB9LCAwKVxuICAgICAgfVxuICAgIH1cblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBpZiAodHJhbnNpdGlvblRpbWVyPy5jdXJyZW50KSB7XG4gICAgICAgIGNsZWFyVGltZW91dCh0cmFuc2l0aW9uVGltZXIuY3VycmVudClcbiAgICAgIH1cbiAgICB9XG4gIH0sIFthbmltYXRpb25EdXJhdGlvbiwgaGVpZ2h0LCBtaW5IZWlnaHQsIG9wZW5lZCwgc2hvdWxkQmVBbmltYXRlZF0pXG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkRXhwYW5kYWJsZVxuICAgICAgYW5pbWF0aW9uRHVyYXRpb249e2FuaW1hdGlvbkR1cmF0aW9ufVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLWlzLWFuaW1hdGVkPXtzaG91bGRCZUFuaW1hdGVkICYmICFpc0ZpcnN0UmVuZGVyLmN1cnJlbnR9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIHJlZj17cmVmfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1N0eWxlZEV4cGFuZGFibGU+XG4gIClcbn1cblxuLyoqXG4gKiBUaGUgRXhwYW5kYWJsZSBjb21wb25lbnQgaXMgYSBkeW5hbWljIFJlYWN0IGNvbXBvbmVudCB0aGF0IGFsbG93cyBmb3IgdGhlIGV4cGFuc2lvbiBvZiBpdHMgY2hpbGRyZW4gY29udGVudFxuICogYmFzZWQgb24gaXRzIGhlaWdodC4gVGhlIGNvbXBvbmVudCBjb21lcyB3aXRoIGEgc2xlZWsgYW5kIHNtb290aCBhbmltYXRpb24sIHByb3ZpZGluZyBhIHZpc3VhbGx5IHBsZWFzaW5nXG4gKiB1c2VyIGV4cGVyaWVuY2UuXG4gKi9cbmV4cG9ydCBjb25zdCBFeHBhbmRhYmxlID0gKHtcbiAgY2hpbGRyZW4sXG4gIG9wZW5lZCxcbiAgbWluSGVpZ2h0LFxuICBjbGFzc05hbWUsXG4gICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG4gIGFuaW1hdGlvbkR1cmF0aW9uID0gQU5JTUFUSU9OX0RVUkFUSU9OLFxufTogRXhwYW5kYWJsZVByb3BzKSA9PiB7XG4gIGlmIChhbmltYXRpb25EdXJhdGlvbiA+IDApIHtcbiAgICByZXR1cm4gKFxuICAgICAgPEFuaW1hdGVkRXhwYW5kYWJsZVxuICAgICAgICBhbmltYXRpb25EdXJhdGlvbj17YW5pbWF0aW9uRHVyYXRpb259XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgICAgbWluSGVpZ2h0PXttaW5IZWlnaHR9XG4gICAgICAgIG9wZW5lZD17b3BlbmVkfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0FuaW1hdGVkRXhwYW5kYWJsZT5cbiAgICApXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxOb0FuaW1hdGlvbkV4cGFuZGFibGVcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgICBtaW5IZWlnaHQ9e21pbkhlaWdodH1cbiAgICAgIG9wZW5lZD17b3BlbmVkfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L05vQW5pbWF0aW9uRXhwYW5kYWJsZT5cbiAgKVxufVxuIl19 */"));
 const NoAnimationExpandable = ({
   children,
   opened,
   minHeight,
   className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
-  display: !opened ? "none" : void 0,
-  minHeight
-}, children });
+  "data-testid": dataTestId,
+  style
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className,
+    "data-testid": dataTestId,
+    style: { display: !opened ? "none" : void 0, minHeight, ...style },
+    children
+  }
+);
 const AnimatedExpandable = ({
   children,
   opened,
   minHeight = 0,
   className,
   "data-testid": dataTestId,
+  style,
   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);
@@ -89,7 +87,22 @@ const AnimatedExpandable = ({
       }
     };
   }, [animationDuration, height, minHeight, opened, shouldBeAnimated]);
-  return /* @__PURE__ */ jsx(StyledExpandable, { animationDuration, className, "data-is-animated": shouldBeAnimated && !isFirstRender.current, "data-testid": dataTestId, ref, 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,
@@ -97,15 +110,36 @@ const Expandable = ({
   minHeight,
   className,
   "data-testid": dataTestId,
-  animationDuration = ANIMATION_DURATION
+  animationDuration = ANIMATION_DURATION,
+  style
 }) => {
   if (animationDuration > 0) {
-    return /* @__PURE__ */ jsx(AnimatedExpandable, { animationDuration, className, "data-testid": dataTestId, minHeight, opened, children });
+    return /* @__PURE__ */ jsx(
+      AnimatedExpandable,
+      {
+        animationDuration,
+        className,
+        "data-testid": dataTestId,
+        minHeight,
+        opened,
+        style,
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(NoAnimationExpandable, { className, "data-testid": dataTestId, minHeight, opened, children });
+  return /* @__PURE__ */ jsx(
+    NoAnimationExpandable,
+    {
+      className,
+      "data-testid": dataTestId,
+      minHeight,
+      opened,
+      style,
+      children
+    }
+  );
 };
 export {
   AnimatedExpandable,
-  Expandable,
-  StyledExpandable
+  Expandable
 };

package/dist/components/Expandable/styles.css.d.ts

@@ -0,0 +1,2 @@
+export declare const animationDurationVar: `var(--${string})`;
+export declare const expandable: string;

package/dist/components/Expandable/styles.css.js

@@ -0,0 +1,7 @@
+/* empty css                          */
+var animationDurationVar = "var(--uv_mlltm90)";
+var expandable = "uv_mlltm91";
+export {
+  animationDurationVar,
+  expandable
+};

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

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

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

@@ -1,12 +1,23 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Text } from "../../Text/index.js";
 const ExpandableCardTitle = ({
   as,
   size = "medium",
   children,
-  disabled
-}) => /* @__PURE__ */ jsx(Text, { as: as ?? "h2", disabled, sentiment: "neutral", variant: size === "medium" ? "bodyStrong" : "headingSmallStrong", children });
+  disabled,
+  style
+}) => /* @__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 { DetailsHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
-export declare const EXPANDABLE_CARD_SIZE: readonly ["medium", "large"];
+import type { CSSProperties, DetailsHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { EXPANDABLE_CARD_SIZE } from './constants';
 type ExpandableCardSize = (typeof EXPANDABLE_CARD_SIZE)[number];
 type DraggableProps = {
     draggable: true;
@@ -32,6 +32,7 @@ type CommonProps = {
     className?: string;
     /** Uncontrolled but open by default */
     open?: DetailsHTMLAttributes<HTMLDetailsElement>['open'];
+    style?: CSSProperties;
 } & DraggableProps;
 export declare const ExpandableCard: import("react").ForwardRefExoticComponent<(({
     expanded?: undefined;
@@ -40,6 +41,6 @@ export declare const ExpandableCard: import("react").ForwardRefExoticComponent<(
     expanded: boolean;
     onToggleExpand: () => void;
 }))) & import("react").RefAttributes<HTMLDetailsElement>> & {
-    Title: ({ as, size, children, disabled, }: 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 {};