@ultraviolet/ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/Bullet/index.js

@@ -1,76 +1,7 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-import { SENTIMENTS_WITHOUT_NEUTRAL } from "../../theme/index.js";
-import capitalize from "../../utils/capitalize.js";
 import { Tooltip } from "../Tooltip/index.js";
-const PROMINENCES = {
-  strong: "strong"
-};
-const SIZES = {
-  medium: "400",
-  small: "300",
-  xsmall: "250",
-  xxsmall: "200"
-};
-const TEXT_VARIANT = {
-  medium: "body",
-  small: "bodySmall",
-  xsmall: "caption",
-  xxsmall: "captionSmallStrong"
-};
-const sentimentStyles = ({
-  theme,
-  prominence
-}) => {
-  const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : "";
-  const text = `text${definedProminence}`;
-  const background = `background${definedProminence}`;
-  return {
-    ...SENTIMENTS_WITHOUT_NEUTRAL.reduce((reducer, sentiment) => ({
-      ...reducer,
-      [sentiment]: `
-      color: ${theme.colors[sentiment][text]};
-      background: ${theme.colors[sentiment][background]};
-      border: 1px solid ${theme.colors[sentiment][background]};
-    `
-    }), {}),
-    disabled: `
-      color: ${theme.colors.neutral.textWeak};
-      background: ${theme.colors.neutral.backgroundStrong};
-      border: none;
-    `,
-    neutral: `
-      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral[text] : theme.colors.neutral.text};
-      background: ${theme.colors.neutral.background};
-      border: 1px solid ${theme.colors.neutral.border};
-    `
-  };
-};
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e11loam60"
-} : {
-  target: "e11loam60",
-  label: "StyledContainer"
-})("display:flex;border-radius:", ({
-  theme
-}) => theme.radii.circle, ";justify-content:center;align-items:center;width:", ({
-  size,
-  theme
-}) => theme.sizing[SIZES[size]], ";height:", ({
-  size,
-  theme
-}) => theme.sizing[SIZES[size]], ";font-size:", ({
-  size,
-  theme
-}) => theme.typography[TEXT_VARIANT[size]].fontSize, ";", ({
-  theme,
-  prominence,
-  sentiment
-}) => sentimentStyles({
-  prominence,
-  theme
-})[sentiment], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0J1bGxldC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0YwRCIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9CdWxsZXQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFNFTlRJTUVOVFMsIFNFTlRJTUVOVFNfV0lUSE9VVF9ORVVUUkFMIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5pbXBvcnQgY2FwaXRhbGl6ZSBmcm9tICcuLi8uLi91dGlscy9jYXBpdGFsaXplJ1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4uL1Rvb2x0aXAnXG5cbmV4cG9ydCBjb25zdCBQUk9NSU5FTkNFUyA9IHtcbiAgZGVmYXVsdDogJ2RlZmF1bHQnLFxuICBzdHJvbmc6ICdzdHJvbmcnLFxufVxuXG50eXBlIFByb21pbmVuY2VUeXBlID0ga2V5b2YgdHlwZW9mIFBST01JTkVOQ0VTXG5jb25zdCBCVUxMRVRfU0VOVElNRU5UUyA9IFsuLi5TRU5USU1FTlRTLCAnZGlzYWJsZWQnXVxuXG50eXBlIEJ1bGxldFNlbnRpbWVudCA9ICh0eXBlb2YgQlVMTEVUX1NFTlRJTUVOVFMpW251bWJlcl1cblxuLy8gVmFsdWVzIGFyZSB0aGVuIHVzZWQgYXMgdGhlbWUuc2l6aW5nW1hdXG5jb25zdCBTSVpFUyA9IHtcbiAgbWVkaXVtOiAnNDAwJyxcbiAgc21hbGw6ICczMDAnLFxuICB4c21hbGw6ICcyNTAnLFxuICB4eHNtYWxsOiAnMjAwJyxcbn0gYXMgY29uc3RcblxuY29uc3QgVEVYVF9WQVJJQU5UID0ge1xuICBtZWRpdW06ICdib2R5JyxcbiAgc21hbGw6ICdib2R5U21hbGwnLFxuICB4c21hbGw6ICdjYXB0aW9uJyxcbiAgeHhzbWFsbDogJ2NhcHRpb25TbWFsbFN0cm9uZycsXG59IGFzIGNvbnN0XG5cbmNvbnN0IHNlbnRpbWVudFN0eWxlcyA9ICh7XG4gIHRoZW1lLFxuICBwcm9taW5lbmNlLFxufToge1xuICB0aGVtZTogVGhlbWVcbiAgcHJvbWluZW5jZTogUHJvbWluZW5jZVR5cGVcbn0pID0+IHtcbiAgY29uc3QgZGVmaW5lZFByb21pbmVuY2UgPVxuICAgIHByb21pbmVuY2UgPT09IFBST01JTkVOQ0VTLnN0cm9uZyA/IGNhcGl0YWxpemUoUFJPTUlORU5DRVMuc3Ryb25nKSA6ICcnXG5cbiAgY29uc3QgdGV4dCA9IGB0ZXh0JHtkZWZpbmVkUHJvbWluZW5jZX1gXG4gIGNvbnN0IGJhY2tncm91bmQgPSBgYmFja2dyb3VuZCR7ZGVmaW5lZFByb21pbmVuY2V9YFxuXG4gIHJldHVybiB7XG4gICAgLi4uU0VOVElNRU5UU19XSVRIT1VUX05FVVRSQUwucmVkdWNlKFxuICAgICAgKHJlZHVjZXIsIHNlbnRpbWVudCkgPT4gKHtcbiAgICAgICAgLi4ucmVkdWNlcixcbiAgICAgICAgW3NlbnRpbWVudF06IGBcbiAgICAgIGNvbG9yOiAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVt0ZXh0IGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgICBiYWNrZ3JvdW5kOiAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVtiYWNrZ3JvdW5kIGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVtiYWNrZ3JvdW5kIGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgYCxcbiAgICAgIH0pLFxuICAgICAge30sXG4gICAgKSxcbiAgICBkaXNhYmxlZDogYFxuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLm5ldXRyYWwudGV4dFdlYWt9O1xuICAgICAgYmFja2dyb3VuZDogJHt0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kU3Ryb25nfTtcbiAgICAgIGJvcmRlcjogbm9uZTtcbiAgICBgLFxuICAgIG5ldXRyYWw6IGBcbiAgICAgIGNvbG9yOiAke1xuICAgICAgICBwcm9taW5lbmNlID09PSBQUk9NSU5FTkNFUy5zdHJvbmdcbiAgICAgICAgICA/IHRoZW1lLmNvbG9ycy5uZXV0cmFsW3RleHQgYXMga2V5b2YgdHlwZW9mIHRoZW1lLmNvbG9ycy5uZXV0cmFsXVxuICAgICAgICAgIDogdGhlbWUuY29sb3JzLm5ldXRyYWwudGV4dFxuICAgICAgfTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZH07XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcn07XG4gICAgYCxcbiAgfVxufVxuXG50eXBlIFN0eWxlZENvbnRhaW5lclR5cGUgPSB7XG4gIHNlbnRpbWVudDogQnVsbGV0U2VudGltZW50XG4gIHNpemU6IGtleW9mIHR5cGVvZiBTSVpFU1xuICBwcm9taW5lbmNlOiBQcm9taW5lbmNlVHlwZVxufVxuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoJ2RpdicpPFN0eWxlZENvbnRhaW5lclR5cGU+YFxuICBkaXNwbGF5OiBmbGV4O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmNpcmNsZX07XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB3aWR0aDogJHsoeyBzaXplLCB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dfTtcbiAgaGVpZ2h0OiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19O1xuICBmb250LXNpemU6ICR7KHsgc2l6ZSwgdGhlbWUgfSkgPT5cbiAgICB0aGVtZS50eXBvZ3JhcGh5W1RFWFRfVkFSSUFOVFtzaXplXV0uZm9udFNpemV9O1xuICAkeyh7IHRoZW1lLCBwcm9taW5lbmNlLCBzZW50aW1lbnQgfSkgPT5cbiAgICAoc2VudGltZW50U3R5bGVzKHsgcHJvbWluZW5jZSwgdGhlbWUgfSkgYXMgUmVjb3JkPEJ1bGxldFNlbnRpbWVudCwgc3RyaW5nPilbXG4gICAgICBzZW50aW1lbnRcbiAgICBdfTtcbmBcblxudHlwZSBCdWxsZXRQcm9wcyA9IHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIHNpemU/OiBrZXlvZiB0eXBlb2YgU0laRVNcbiAgdG9vbHRpcD86IHN0cmluZ1xuICB0b29sdGlwQmFzZUlkPzogc3RyaW5nXG4gIHNlbnRpbWVudD86IEJ1bGxldFNlbnRpbWVudFxuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG4gIHByb21pbmVuY2U/OiBQcm9taW5lbmNlVHlwZVxuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxufVxuXG4vKipcbiAqIEJ1bGxldCBjb21wb25lbnQgaXMgdXNlZCB0byBkaXNwbGF5IGEgc21hbGwgaWNvbiBvciB0ZXh0IHdpdGggYSBjb2xvcmVkIGJhY2tncm91bmQgaW4gYSBjaXJjbGUuXG4gKi9cbmV4cG9ydCBjb25zdCBCdWxsZXQgPSAoe1xuICBjbGFzc05hbWUsXG4gIHNlbnRpbWVudCA9ICduZXV0cmFsJyxcbiAgc2l6ZSA9ICdtZWRpdW0nLFxuICB0b29sdGlwLFxuICB0b29sdGlwQmFzZUlkLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxuICBwcm9taW5lbmNlID0gJ2RlZmF1bHQnLFxuICBjaGlsZHJlbixcbn06IEJ1bGxldFByb3BzKSA9PiAoXG4gIDxUb29sdGlwIGlkPXt0b29sdGlwQmFzZUlkfSB0ZXh0PXt0b29sdGlwfT5cbiAgICA8U3R5bGVkQ29udGFpbmVyXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgcHJvbWluZW5jZT17cHJvbWluZW5jZX1cbiAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgc2l6ZT17c2l6ZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TdHlsZWRDb250YWluZXI+XG4gIDwvVG9vbHRpcD5cbilcbiJdfQ== */"));
+import { bullet } from "./styles.css.js";
 const Bullet = ({
   className,
   sentiment = "neutral",
@@ -79,9 +10,14 @@ const Bullet = ({
   tooltipBaseId,
   "data-testid": dataTestId,
   prominence = "default",
-  children
-}) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx(StyledContainer, { className, "data-testid": dataTestId, prominence, sentiment, size, children }) });
+  children,
+  disabled
+}) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${bullet({
+  disabled,
+  prominence,
+  sentiment,
+  size
+})}`, "data-testid": dataTestId, children }) });
 export {
-  Bullet,
-  PROMINENCES
+  Bullet
 };

package/dist/components/Bullet/styles.css.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                            */
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var bullet = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_1jy42m00", variantClassNames: { size: { medium: "uv_1jy42m01", small: "uv_1jy42m02", xsmall: "uv_1jy42m03", xxsmall: "uv_1jy42m04" }, sentiment: { "0": "uv_1jy42m05", "1": "uv_1jy42m06", "2": "uv_1jy42m07", "3": "uv_1jy42m08", "4": "uv_1jy42m09", "5": "uv_1jy42m0a", "6": "uv_1jy42m0b" }, prominence: { "default": "uv_1jy42m0c", strong: "uv_1jy42m0d" }, disabled: { true: "uv_1jy42m0e" } }, defaultVariants: { disabled: false, sentiment: "neutral", size: "medium", prominence: "default" }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_1jy42m0f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_1jy42m0g"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_1jy42m0h"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_1jy42m0i"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_1jy42m0j"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_1jy42m0k"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_1jy42m0l"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_1jy42m0m"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_1jy42m0n"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_1jy42m0o"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_1jy42m0p"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_1jy42m0q"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_1jy42m0r"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_1jy42m0s"]] });
+exports.bullet = bullet;

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

@@ -0,0 +1,23 @@
+export declare const bullet: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        [k: string]: {
+            width: `var(--${string})`;
+            height: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+    };
+    sentiment: {
+        [k: string]: {};
+    };
+    prominence: {
+        default: {};
+        strong: {};
+    };
+    disabled: {
+        true: {
+            color: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+            border: "none";
+        };
+    };
+}>;

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

@@ -0,0 +1,6 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var bullet = createRuntimeFn({ defaultClassName: "uv_1jy42m00", variantClassNames: { size: { medium: "uv_1jy42m01", small: "uv_1jy42m02", xsmall: "uv_1jy42m03", xxsmall: "uv_1jy42m04" }, sentiment: { "0": "uv_1jy42m05", "1": "uv_1jy42m06", "2": "uv_1jy42m07", "3": "uv_1jy42m08", "4": "uv_1jy42m09", "5": "uv_1jy42m0a", "6": "uv_1jy42m0b" }, prominence: { "default": "uv_1jy42m0c", strong: "uv_1jy42m0d" }, disabled: { true: "uv_1jy42m0e" } }, defaultVariants: { disabled: false, sentiment: "neutral", size: "medium", prominence: "default" }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_1jy42m0f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_1jy42m0g"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_1jy42m0h"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_1jy42m0i"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_1jy42m0j"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_1jy42m0k"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_1jy42m0l"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_1jy42m0m"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_1jy42m0n"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_1jy42m0o"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_1jy42m0p"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_1jy42m0q"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_1jy42m0r"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_1jy42m0s"]] });
+export {
+  bullet
+};

package/dist/components/Button/constants.cjs

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const SIZE_HEIGHT = {
-  large: "600",
   xsmall: "300"
 };
 exports.SIZE_HEIGHT = SIZE_HEIGHT;

package/dist/components/Button/constants.js

@@ -1,5 +1,4 @@
 const SIZE_HEIGHT = {
-  large: "600",
   xsmall: "300"
 };
 export {

package/dist/components/Button/index.cjs

@@ -2,8 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const themes = require("@ultraviolet/themes");
 const react = require("react");
-const ThemeProvider = require("../../theme/ThemeProvider.cjs");
 const index$1 = require("../Loader/index.cjs");
 const index = require("../Tooltip/index.cjs");
 const styles_css = require("./styles.css.cjs");
@@ -43,12 +43,13 @@ const Button = react.forwardRef(({
   role,
   tooltip,
   tabIndex,
-  autoFocus
+  autoFocus,
+  style
 }, ref) => {
   const computeIsDisabled = disabled || isLoading;
   const {
     theme
-  } = ThemeProvider.useTheme();
+  } = themes.useTheme();
   const computedSentimentLoader = react.useMemo(() => {
     if (variant === "filled" && !["black", "white"].includes(sentiment)) {
       if (theme === "light") {
@@ -63,7 +64,7 @@ const Button = react.forwardRef(({
     children
   ] });
   if (href && !computeIsDisabled) {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("a", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-describedby": ariaDescribedby, "aria-disabled": ariaDisabled ?? disabled, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-roledescription": ariaRoledescription, autoFocus, className: `${className ?? ""} ${styles_css.button({
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("a", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-describedby": ariaDescribedby, "aria-disabled": ariaDisabled ?? disabled, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-roledescription": ariaRoledescription, autoFocus, className: `${className ? `${className} ` : ""}${styles_css.button({
       disabled,
       fullWidth,
       sentiment,
@@ -71,12 +72,12 @@ const Button = react.forwardRef(({
       variant
     })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, tabIndex, target, type, children: content }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ?? ""} ${styles_css.button({
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ? `${className} ` : ""}${styles_css.button({
     disabled,
     fullWidth,
     sentiment,
     size,
     variant
-  })}`, "data-testid": dataTestId, disabled: computeIsDisabled, name, onBlur, onClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, onPointerDown, ref, role, tabIndex, type, children: content }) });
+  })}`, "data-testid": dataTestId, disabled: computeIsDisabled, name, onBlur, onClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, onPointerDown, ref, role, style, tabIndex, type, children: content }) });
 });
 exports.Button = Button;

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

@@ -1,4 +1,4 @@
-import type { AriaRole, ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import type { AriaRole, ButtonHTMLAttributes, CSSProperties, MouseEventHandler, ReactNode } from 'react';
 import { SIZE_HEIGHT } from './constants';
 type ButtonSize = keyof typeof SIZE_HEIGHT;
 export declare const buttonSizes: ButtonSize[];
@@ -33,10 +33,11 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     onMouseLeave?: MouseEventHandler<HTMLElement>;
     onPointerDown?: ButtonHTMLAttributes<HTMLButtonElement>["onPointerDown"];
     onKeyDown?: ButtonHTMLAttributes<HTMLButtonElement>["onKeyDown"];
+    style?: CSSProperties;
 } & {
-    size?: "small" | "large" | "medium" | "xsmall" | undefined;
+    size?: "large" | "medium" | "small" | "xsmall" | undefined;
     fullWidth?: boolean | undefined;
-    sentiment?: "danger" | "info" | "neutral" | "success" | "primary" | "warning" | "black" | "white" | "secondary" | undefined;
+    sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info" | "white" | "black" | undefined;
     variant?: "filled" | "outlined" | "ghost" | undefined;
     disabled?: boolean | undefined;
 } & {

package/dist/components/Button/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
 import { forwardRef, useMemo } from "react";
-import { useTheme } from "../../theme/ThemeProvider.js";
 import { Loader } from "../Loader/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { button } from "./styles.css.js";
@@ -41,7 +41,8 @@ const Button = forwardRef(({
   role,
   tooltip,
   tabIndex,
-  autoFocus
+  autoFocus,
+  style
 }, ref) => {
   const computeIsDisabled = disabled || isLoading;
   const {
@@ -61,7 +62,7 @@ const Button = forwardRef(({
     children
   ] });
   if (href && !computeIsDisabled) {
-    return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("a", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-describedby": ariaDescribedby, "aria-disabled": ariaDisabled ?? disabled, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-roledescription": ariaRoledescription, autoFocus, className: `${className ?? ""} ${button({
+    return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("a", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-describedby": ariaDescribedby, "aria-disabled": ariaDisabled ?? disabled, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-roledescription": ariaRoledescription, autoFocus, className: `${className ? `${className} ` : ""}${button({
       disabled,
       fullWidth,
       sentiment,
@@ -69,13 +70,13 @@ const Button = forwardRef(({
       variant
     })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, tabIndex, target, type, children: content }) });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ?? ""} ${button({
+  return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ? `${className} ` : ""}${button({
     disabled,
     fullWidth,
     sentiment,
     size,
     variant
-  })}`, "data-testid": dataTestId, disabled: computeIsDisabled, name, onBlur, onClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, onPointerDown, ref, role, tabIndex, type, children: content }) });
+  })}`, "data-testid": dataTestId, disabled: computeIsDisabled, name, onBlur, onClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, onPointerDown, ref, role, style, tabIndex, type, children: content }) });
 });
 export {
   Button

package/dist/components/Button/styles.css.cjs

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../themes/dist/vanilla/themes.css.ts.vanilla.css.js.vanilla.css.cjs");
-require("../../themes/dist/vanilla/themes.css.js.vanilla.css.cjs");
 ;/* empty css                            */
 const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var button = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_e1wcoe0", variantClassNames: { size: { large: "uv_e1wcoe1", medium: "uv_e1wcoe2", small: "uv_e1wcoe3", xsmall: "uv_e1wcoe4" }, fullWidth: { true: "uv_e1wcoe5", false: "uv_e1wcoe6" }, sentiment: { primary: "uv_e1wcoe7", secondary: "uv_e1wcoe8", danger: "uv_e1wcoe9", info: "uv_e1wcoea", success: "uv_e1wcoeb", warning: "uv_e1wcoec", neutral: "uv_e1wcoed", black: "uv_e1wcoee", white: "uv_e1wcoef" }, variant: { filled: "uv_e1wcoeg", outlined: "uv_e1wcoeh", ghost: "uv_e1wcoei" }, disabled: { true: "uv_e1wcoej", false: "uv_e1wcoek" } }, defaultVariants: { size: "large", fullWidth: false, disabled: false, variant: "filled", sentiment: "primary" }, compoundVariants: [[{ variant: "filled", sentiment: "primary" }, "uv_e1wcoel"], [{ variant: "filled", sentiment: "secondary" }, "uv_e1wcoem"], [{ variant: "filled", sentiment: "danger" }, "uv_e1wcoen"], [{ variant: "filled", sentiment: "info" }, "uv_e1wcoeo"], [{ variant: "filled", sentiment: "success" }, "uv_e1wcoep"], [{ variant: "filled", sentiment: "warning" }, "uv_e1wcoeq"], [{ variant: "filled", sentiment: "neutral" }, "uv_e1wcoer"], [{ variant: "filled", sentiment: "black" }, "uv_e1wcoes"], [{ variant: "filled", sentiment: "white" }, "uv_e1wcoet"], [{ variant: "outlined", sentiment: "primary" }, "uv_e1wcoeu"], [{ variant: "outlined", sentiment: "secondary" }, "uv_e1wcoev"], [{ variant: "outlined", sentiment: "danger" }, "uv_e1wcoew"], [{ variant: "outlined", sentiment: "info" }, "uv_e1wcoex"], [{ variant: "outlined", sentiment: "success" }, "uv_e1wcoey"], [{ variant: "outlined", sentiment: "warning" }, "uv_e1wcoez"], [{ variant: "outlined", sentiment: "neutral" }, "uv_e1wcoe10"], [{ variant: "outlined", sentiment: "black" }, "uv_e1wcoe11"], [{ variant: "outlined", sentiment: "white" }, "uv_e1wcoe12"], [{ variant: "ghost", sentiment: "primary" }, "uv_e1wcoe13"], [{ variant: "ghost", sentiment: "secondary" }, "uv_e1wcoe14"], [{ variant: "ghost", sentiment: "danger" }, "uv_e1wcoe15"], [{ variant: "ghost", sentiment: "info" }, "uv_e1wcoe16"], [{ variant: "ghost", sentiment: "success" }, "uv_e1wcoe17"], [{ variant: "ghost", sentiment: "warning" }, "uv_e1wcoe18"], [{ variant: "ghost", sentiment: "neutral" }, "uv_e1wcoe19"], [{ variant: "ghost", sentiment: "black" }, "uv_e1wcoe1a"], [{ variant: "ghost", sentiment: "white" }, "uv_e1wcoe1b"]] });

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

@@ -2,15 +2,15 @@ import type { RecipeVariants } from '@vanilla-extract/recipes';
 export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         large: {
+            height: `var(--${string})`;
+            paddingLeft: `var(--${string})`;
+            paddingRight: `var(--${string})`;
+            gap: `var(--${string})`;
             fontSize: `var(--${string})`;
             fontFamily: `var(--${string})`;
             fontWeight: `var(--${string})`;
             letterSpacing: `var(--${string})`;
             lineHeight: `var(--${string})`;
-            height: `var(--${string})`;
-            paddingLeft: `var(--${string})`;
-            paddingRight: `var(--${string})`;
-            gap: `var(--${string})`;
         };
         medium: {
             fontSize: `var(--${string})`;

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

@@ -1,5 +1,3 @@
-import "../../themes/dist/vanilla/themes.css.ts.vanilla.css.js.vanilla.css.js";
-import "../../themes/dist/vanilla/themes.css.js.vanilla.css.js";
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var button = createRuntimeFn({ defaultClassName: "uv_e1wcoe0", variantClassNames: { size: { large: "uv_e1wcoe1", medium: "uv_e1wcoe2", small: "uv_e1wcoe3", xsmall: "uv_e1wcoe4" }, fullWidth: { true: "uv_e1wcoe5", false: "uv_e1wcoe6" }, sentiment: { primary: "uv_e1wcoe7", secondary: "uv_e1wcoe8", danger: "uv_e1wcoe9", info: "uv_e1wcoea", success: "uv_e1wcoeb", warning: "uv_e1wcoec", neutral: "uv_e1wcoed", black: "uv_e1wcoee", white: "uv_e1wcoef" }, variant: { filled: "uv_e1wcoeg", outlined: "uv_e1wcoeh", ghost: "uv_e1wcoei" }, disabled: { true: "uv_e1wcoej", false: "uv_e1wcoek" } }, defaultVariants: { size: "large", fullWidth: false, disabled: false, variant: "filled", sentiment: "primary" }, compoundVariants: [[{ variant: "filled", sentiment: "primary" }, "uv_e1wcoel"], [{ variant: "filled", sentiment: "secondary" }, "uv_e1wcoem"], [{ variant: "filled", sentiment: "danger" }, "uv_e1wcoen"], [{ variant: "filled", sentiment: "info" }, "uv_e1wcoeo"], [{ variant: "filled", sentiment: "success" }, "uv_e1wcoep"], [{ variant: "filled", sentiment: "warning" }, "uv_e1wcoeq"], [{ variant: "filled", sentiment: "neutral" }, "uv_e1wcoer"], [{ variant: "filled", sentiment: "black" }, "uv_e1wcoes"], [{ variant: "filled", sentiment: "white" }, "uv_e1wcoet"], [{ variant: "outlined", sentiment: "primary" }, "uv_e1wcoeu"], [{ variant: "outlined", sentiment: "secondary" }, "uv_e1wcoev"], [{ variant: "outlined", sentiment: "danger" }, "uv_e1wcoew"], [{ variant: "outlined", sentiment: "info" }, "uv_e1wcoex"], [{ variant: "outlined", sentiment: "success" }, "uv_e1wcoey"], [{ variant: "outlined", sentiment: "warning" }, "uv_e1wcoez"], [{ variant: "outlined", sentiment: "neutral" }, "uv_e1wcoe10"], [{ variant: "outlined", sentiment: "black" }, "uv_e1wcoe11"], [{ variant: "outlined", sentiment: "white" }, "uv_e1wcoe12"], [{ variant: "ghost", sentiment: "primary" }, "uv_e1wcoe13"], [{ variant: "ghost", sentiment: "secondary" }, "uv_e1wcoe14"], [{ variant: "ghost", sentiment: "danger" }, "uv_e1wcoe15"], [{ variant: "ghost", sentiment: "info" }, "uv_e1wcoe16"], [{ variant: "ghost", sentiment: "success" }, "uv_e1wcoe17"], [{ variant: "ghost", sentiment: "warning" }, "uv_e1wcoe18"], [{ variant: "ghost", sentiment: "neutral" }, "uv_e1wcoe19"], [{ variant: "ghost", sentiment: "black" }, "uv_e1wcoe1a"], [{ variant: "ghost", sentiment: "white" }, "uv_e1wcoe1b"]] });

package/dist/components/Card/index.cjs

@@ -2,44 +2,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
 const react = require("react");
-const index$1 = require("../Stack/index.cjs");
-const index = require("../Text/index.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledStack = /* @__PURE__ */ _styled__default.default(index$1.Stack, process.env.NODE_ENV === "production" ? {
-  target: "exwxj841"
-} : {
-  target: "exwxj841",
-  label: "StyledStack"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1b3njxj",
-  styles: "&[data-disabled='true']{cursor:not-allowed;}"
-} : {
-  name: "1b3njxj",
-  styles: "&[data-disabled='true']{cursor:not-allowed;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0NhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvQ2FyZC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSwgUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uL1RleHQnXG5cbnR5cGUgQ2FyZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBIZWFkZXIgY2FuIGJlIGEgc3RyaW5nIGJ1dCBhbHNvIGEgY29tcG9uZW50IGlmIHlvdSBuZWVkIG1vcmUgY29tcGxleCBoZWFkZXIuXG4gICAqL1xuICBoZWFkZXI/OiBSZWFjdE5vZGVcbiAgc3ViSGVhZGVyPzogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBhY3RpdmUgZW5hYmxlIGEgcHJpbWFyeSBzdHlsZSBvbiBDYXJkIGNvbXBvbmVudCBmb3Igd2hlbiB5b3UgbmVlZCB0byBoaWdobGlnaHQgaXQuXG4gICAqL1xuICBhY3RpdmU/OiBib29sZWFuXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xufVxuXG5jb25zdCBTdHlsZWRTdGFjayA9IHN0eWxlZChTdGFjaylgXG4gICZbZGF0YS1kaXNhYmxlZD0ndHJ1ZSddIHtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG5gXG5cbmNvbnN0IEJvcmRlcmVkQm94ID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJ9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWyczJ119O1xuXG4gICZbZGF0YS1pcy1hY3RpdmU9J3RydWUnXSB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeS5ib3JkZXJ9O1xuICB9XG5cbiAgJltkYXRhLWRpc2FibGVkPSd0cnVlJ10ge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyRGlzYWJsZWR9O1xuICB9XG5cbiAgZmxleDogMSAxIGF1dG87XG5gXG5cbi8qKlxuICogQ2FyZCBjb21wb25lbnQgaXMgYSBzaW1wbGUgY29tcG9uZW50IHRvIGRpc3BsYXkgY29udGVudCBpbiBhIGJveCB3aXRoIGEgYm9yZGVyLlxuICovXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBoZWFkZXIsXG4gICAgICBzdWJIZWFkZXIsXG4gICAgICBkaXNhYmxlZCA9IGZhbHNlLFxuICAgICAgYWN0aXZlID0gZmFsc2UsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG4gICAgfTogQ2FyZFByb3BzLFxuICAgIHJlZjogUmVmPEhUTUxEaXZFbGVtZW50PixcbiAgKSA9PlxuICAgIGhlYWRlciA/IChcbiAgICAgIDxTdHlsZWRTdGFja1xuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgZGF0YS1kaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgICBnYXA9ezF9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgPlxuICAgICAgICB7dHlwZW9mIGhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgPFRleHRcbiAgICAgICAgICAgIGFzPVwiaDJcIlxuICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgcHJvbWluZW5jZT1cInN0cm9uZ1wiXG4gICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aGVhZGVyfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBoZWFkZXJcbiAgICAgICAgKX1cbiAgICAgICAgPEJvcmRlcmVkQm94IGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfSBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfT5cbiAgICAgICAgICB7c3ViSGVhZGVyID8gKFxuICAgICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICAgIHt0eXBlb2Ygc3ViSGVhZGVyID09PSAnc3RyaW5nJyA/IChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtzdWJIZWFkZXJ9XG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgIHN1YkhlYWRlclxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1N0YWNrPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICBjaGlsZHJlblxuICAgICAgICAgICl9XG4gICAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgICA8L1N0eWxlZFN0YWNrPlxuICAgICkgOiAoXG4gICAgICA8Qm9yZGVyZWRCb3hcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfVxuICAgICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICA+XG4gICAgICAgIHtzdWJIZWFkZXIgPyAoXG4gICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICB7dHlwZW9mIHN1YkhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgICAgIHNlbnRpbWVudD1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YkhlYWRlcn1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgc3ViSGVhZGVyXG4gICAgICAgICAgICApfVxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvU3RhY2s+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgY2hpbGRyZW5cbiAgICAgICAgKX1cbiAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgKSxcbilcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const BorderedBox = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "exwxj840"
-} : {
-  target: "exwxj840",
-  label: "BorderedBox"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => theme.space["3"], ";&[data-is-active='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";}&[data-disabled='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";}flex:1 1 auto;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0NhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvQ2FyZC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSwgUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uL1RleHQnXG5cbnR5cGUgQ2FyZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBIZWFkZXIgY2FuIGJlIGEgc3RyaW5nIGJ1dCBhbHNvIGEgY29tcG9uZW50IGlmIHlvdSBuZWVkIG1vcmUgY29tcGxleCBoZWFkZXIuXG4gICAqL1xuICBoZWFkZXI/OiBSZWFjdE5vZGVcbiAgc3ViSGVhZGVyPzogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBhY3RpdmUgZW5hYmxlIGEgcHJpbWFyeSBzdHlsZSBvbiBDYXJkIGNvbXBvbmVudCBmb3Igd2hlbiB5b3UgbmVlZCB0byBoaWdobGlnaHQgaXQuXG4gICAqL1xuICBhY3RpdmU/OiBib29sZWFuXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xufVxuXG5jb25zdCBTdHlsZWRTdGFjayA9IHN0eWxlZChTdGFjaylgXG4gICZbZGF0YS1kaXNhYmxlZD0ndHJ1ZSddIHtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG5gXG5cbmNvbnN0IEJvcmRlcmVkQm94ID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJ9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWyczJ119O1xuXG4gICZbZGF0YS1pcy1hY3RpdmU9J3RydWUnXSB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeS5ib3JkZXJ9O1xuICB9XG5cbiAgJltkYXRhLWRpc2FibGVkPSd0cnVlJ10ge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyRGlzYWJsZWR9O1xuICB9XG5cbiAgZmxleDogMSAxIGF1dG87XG5gXG5cbi8qKlxuICogQ2FyZCBjb21wb25lbnQgaXMgYSBzaW1wbGUgY29tcG9uZW50IHRvIGRpc3BsYXkgY29udGVudCBpbiBhIGJveCB3aXRoIGEgYm9yZGVyLlxuICovXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBoZWFkZXIsXG4gICAgICBzdWJIZWFkZXIsXG4gICAgICBkaXNhYmxlZCA9IGZhbHNlLFxuICAgICAgYWN0aXZlID0gZmFsc2UsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG4gICAgfTogQ2FyZFByb3BzLFxuICAgIHJlZjogUmVmPEhUTUxEaXZFbGVtZW50PixcbiAgKSA9PlxuICAgIGhlYWRlciA/IChcbiAgICAgIDxTdHlsZWRTdGFja1xuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgZGF0YS1kaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgICBnYXA9ezF9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgPlxuICAgICAgICB7dHlwZW9mIGhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgPFRleHRcbiAgICAgICAgICAgIGFzPVwiaDJcIlxuICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgcHJvbWluZW5jZT1cInN0cm9uZ1wiXG4gICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aGVhZGVyfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBoZWFkZXJcbiAgICAgICAgKX1cbiAgICAgICAgPEJvcmRlcmVkQm94IGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfSBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfT5cbiAgICAgICAgICB7c3ViSGVhZGVyID8gKFxuICAgICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICAgIHt0eXBlb2Ygc3ViSGVhZGVyID09PSAnc3RyaW5nJyA/IChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtzdWJIZWFkZXJ9XG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgIHN1YkhlYWRlclxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1N0YWNrPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICBjaGlsZHJlblxuICAgICAgICAgICl9XG4gICAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgICA8L1N0eWxlZFN0YWNrPlxuICAgICkgOiAoXG4gICAgICA8Qm9yZGVyZWRCb3hcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfVxuICAgICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICA+XG4gICAgICAgIHtzdWJIZWFkZXIgPyAoXG4gICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICB7dHlwZW9mIHN1YkhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgICAgIHNlbnRpbWVudD1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YkhlYWRlcn1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgc3ViSGVhZGVyXG4gICAgICAgICAgICApfVxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvU3RhY2s+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgY2hpbGRyZW5cbiAgICAgICAgKX1cbiAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgKSxcbilcbiJdfQ== */"));
+const index = require("../Stack/index.cjs");
+const index$1 = require("../Text/index.cjs");
+const styles_css = require("./styles.css.cjs");
 const Card = react.forwardRef(({
   header,
   subHeader,
@@ -48,14 +14,14 @@ const Card = react.forwardRef(({
   children,
   className,
   "data-testid": dataTestId
-}, ref) => header ? /* @__PURE__ */ jsxRuntime.jsxs(StyledStack, { className, "data-disabled": disabled, "data-testid": dataTestId, gap: 1, ref, children: [
-  typeof header === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "h2", disabled, prominence: "strong", sentiment: "neutral", variant: "heading", children: header }) : header,
-  /* @__PURE__ */ jsxRuntime.jsx(BorderedBox, { "data-disabled": disabled, "data-is-active": active, children: subHeader ? /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { gap: 2, children: [
-    typeof subHeader === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
+}, ref) => header ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className: `${className ? `${className} ` : ""}${styles_css.stackCard}`, "data-disabled": disabled, "data-testid": dataTestId, gap: 1, ref, children: [
+  typeof header === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "h2", disabled, prominence: "strong", sentiment: "neutral", variant: "heading", children: header }) : header,
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.borderedBox, "data-disabled": disabled, "data-is-active": active, children: subHeader ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 2, children: [
+    typeof subHeader === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
     children
   ] }) : children })
-] }) : /* @__PURE__ */ jsxRuntime.jsx(BorderedBox, { className, "data-disabled": disabled, "data-is-active": active, "data-testid": dataTestId, ref, children: subHeader ? /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { gap: 2, children: [
-  typeof subHeader === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
+] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.borderedBox}`, "data-disabled": disabled, "data-is-active": active, "data-testid": dataTestId, ref, children: subHeader ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 2, children: [
+  typeof subHeader === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
   children
 ] }) : children }));
 exports.Card = Card;

package/dist/components/Card/index.js

@@ -1,41 +1,9 @@
 "use client";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
 import { forwardRef } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledStack = /* @__PURE__ */ _styled(Stack, process.env.NODE_ENV === "production" ? {
-  target: "exwxj841"
-} : {
-  target: "exwxj841",
-  label: "StyledStack"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1b3njxj",
-  styles: "&[data-disabled='true']{cursor:not-allowed;}"
-} : {
-  name: "1b3njxj",
-  styles: "&[data-disabled='true']{cursor:not-allowed;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0NhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvQ2FyZC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSwgUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uL1RleHQnXG5cbnR5cGUgQ2FyZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBIZWFkZXIgY2FuIGJlIGEgc3RyaW5nIGJ1dCBhbHNvIGEgY29tcG9uZW50IGlmIHlvdSBuZWVkIG1vcmUgY29tcGxleCBoZWFkZXIuXG4gICAqL1xuICBoZWFkZXI/OiBSZWFjdE5vZGVcbiAgc3ViSGVhZGVyPzogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBhY3RpdmUgZW5hYmxlIGEgcHJpbWFyeSBzdHlsZSBvbiBDYXJkIGNvbXBvbmVudCBmb3Igd2hlbiB5b3UgbmVlZCB0byBoaWdobGlnaHQgaXQuXG4gICAqL1xuICBhY3RpdmU/OiBib29sZWFuXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xufVxuXG5jb25zdCBTdHlsZWRTdGFjayA9IHN0eWxlZChTdGFjaylgXG4gICZbZGF0YS1kaXNhYmxlZD0ndHJ1ZSddIHtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG5gXG5cbmNvbnN0IEJvcmRlcmVkQm94ID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJ9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWyczJ119O1xuXG4gICZbZGF0YS1pcy1hY3RpdmU9J3RydWUnXSB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeS5ib3JkZXJ9O1xuICB9XG5cbiAgJltkYXRhLWRpc2FibGVkPSd0cnVlJ10ge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyRGlzYWJsZWR9O1xuICB9XG5cbiAgZmxleDogMSAxIGF1dG87XG5gXG5cbi8qKlxuICogQ2FyZCBjb21wb25lbnQgaXMgYSBzaW1wbGUgY29tcG9uZW50IHRvIGRpc3BsYXkgY29udGVudCBpbiBhIGJveCB3aXRoIGEgYm9yZGVyLlxuICovXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBoZWFkZXIsXG4gICAgICBzdWJIZWFkZXIsXG4gICAgICBkaXNhYmxlZCA9IGZhbHNlLFxuICAgICAgYWN0aXZlID0gZmFsc2UsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG4gICAgfTogQ2FyZFByb3BzLFxuICAgIHJlZjogUmVmPEhUTUxEaXZFbGVtZW50PixcbiAgKSA9PlxuICAgIGhlYWRlciA/IChcbiAgICAgIDxTdHlsZWRTdGFja1xuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgZGF0YS1kaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgICBnYXA9ezF9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgPlxuICAgICAgICB7dHlwZW9mIGhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgPFRleHRcbiAgICAgICAgICAgIGFzPVwiaDJcIlxuICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgcHJvbWluZW5jZT1cInN0cm9uZ1wiXG4gICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aGVhZGVyfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBoZWFkZXJcbiAgICAgICAgKX1cbiAgICAgICAgPEJvcmRlcmVkQm94IGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfSBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfT5cbiAgICAgICAgICB7c3ViSGVhZGVyID8gKFxuICAgICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICAgIHt0eXBlb2Ygc3ViSGVhZGVyID09PSAnc3RyaW5nJyA/IChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtzdWJIZWFkZXJ9XG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgIHN1YkhlYWRlclxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1N0YWNrPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICBjaGlsZHJlblxuICAgICAgICAgICl9XG4gICAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgICA8L1N0eWxlZFN0YWNrPlxuICAgICkgOiAoXG4gICAgICA8Qm9yZGVyZWRCb3hcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfVxuICAgICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICA+XG4gICAgICAgIHtzdWJIZWFkZXIgPyAoXG4gICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICB7dHlwZW9mIHN1YkhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgICAgIHNlbnRpbWVudD1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YkhlYWRlcn1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgc3ViSGVhZGVyXG4gICAgICAgICAgICApfVxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvU3RhY2s+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgY2hpbGRyZW5cbiAgICAgICAgKX1cbiAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgKSxcbilcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const BorderedBox = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "exwxj840"
-} : {
-  target: "exwxj840",
-  label: "BorderedBox"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => theme.space["3"], ";&[data-is-active='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";}&[data-disabled='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";}flex:1 1 auto;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0NhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvQ2FyZC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSwgUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uL1RleHQnXG5cbnR5cGUgQ2FyZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBIZWFkZXIgY2FuIGJlIGEgc3RyaW5nIGJ1dCBhbHNvIGEgY29tcG9uZW50IGlmIHlvdSBuZWVkIG1vcmUgY29tcGxleCBoZWFkZXIuXG4gICAqL1xuICBoZWFkZXI/OiBSZWFjdE5vZGVcbiAgc3ViSGVhZGVyPzogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBhY3RpdmUgZW5hYmxlIGEgcHJpbWFyeSBzdHlsZSBvbiBDYXJkIGNvbXBvbmVudCBmb3Igd2hlbiB5b3UgbmVlZCB0byBoaWdobGlnaHQgaXQuXG4gICAqL1xuICBhY3RpdmU/OiBib29sZWFuXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xufVxuXG5jb25zdCBTdHlsZWRTdGFjayA9IHN0eWxlZChTdGFjaylgXG4gICZbZGF0YS1kaXNhYmxlZD0ndHJ1ZSddIHtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG5gXG5cbmNvbnN0IEJvcmRlcmVkQm94ID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJ9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWyczJ119O1xuXG4gICZbZGF0YS1pcy1hY3RpdmU9J3RydWUnXSB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeS5ib3JkZXJ9O1xuICB9XG5cbiAgJltkYXRhLWRpc2FibGVkPSd0cnVlJ10ge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyRGlzYWJsZWR9O1xuICB9XG5cbiAgZmxleDogMSAxIGF1dG87XG5gXG5cbi8qKlxuICogQ2FyZCBjb21wb25lbnQgaXMgYSBzaW1wbGUgY29tcG9uZW50IHRvIGRpc3BsYXkgY29udGVudCBpbiBhIGJveCB3aXRoIGEgYm9yZGVyLlxuICovXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBoZWFkZXIsXG4gICAgICBzdWJIZWFkZXIsXG4gICAgICBkaXNhYmxlZCA9IGZhbHNlLFxuICAgICAgYWN0aXZlID0gZmFsc2UsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG4gICAgfTogQ2FyZFByb3BzLFxuICAgIHJlZjogUmVmPEhUTUxEaXZFbGVtZW50PixcbiAgKSA9PlxuICAgIGhlYWRlciA/IChcbiAgICAgIDxTdHlsZWRTdGFja1xuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgZGF0YS1kaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgICBnYXA9ezF9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgPlxuICAgICAgICB7dHlwZW9mIGhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgPFRleHRcbiAgICAgICAgICAgIGFzPVwiaDJcIlxuICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgcHJvbWluZW5jZT1cInN0cm9uZ1wiXG4gICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aGVhZGVyfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBoZWFkZXJcbiAgICAgICAgKX1cbiAgICAgICAgPEJvcmRlcmVkQm94IGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfSBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfT5cbiAgICAgICAgICB7c3ViSGVhZGVyID8gKFxuICAgICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICAgIHt0eXBlb2Ygc3ViSGVhZGVyID09PSAnc3RyaW5nJyA/IChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICAgICAgICBzZW50aW1lbnQ9XCJuZXV0cmFsXCJcbiAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtzdWJIZWFkZXJ9XG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgIHN1YkhlYWRlclxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1N0YWNrPlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICBjaGlsZHJlblxuICAgICAgICAgICl9XG4gICAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgICA8L1N0eWxlZFN0YWNrPlxuICAgICkgOiAoXG4gICAgICA8Qm9yZGVyZWRCb3hcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBkYXRhLWlzLWFjdGl2ZT17YWN0aXZlfVxuICAgICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICA+XG4gICAgICAgIHtzdWJIZWFkZXIgPyAoXG4gICAgICAgICAgPFN0YWNrIGdhcD17Mn0+XG4gICAgICAgICAgICB7dHlwZW9mIHN1YkhlYWRlciA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgICAgIHNlbnRpbWVudD1cIm5ldXRyYWxcIlxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJoZWFkaW5nU21hbGxTdHJvbmdcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YkhlYWRlcn1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgc3ViSGVhZGVyXG4gICAgICAgICAgICApfVxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvU3RhY2s+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgY2hpbGRyZW5cbiAgICAgICAgKX1cbiAgICAgIDwvQm9yZGVyZWRCb3g+XG4gICAgKSxcbilcbiJdfQ== */"));
+import { stackCard, borderedBox } from "./styles.css.js";
 const Card = forwardRef(({
   header,
   subHeader,
@@ -44,13 +12,13 @@ const Card = forwardRef(({
   children,
   className,
   "data-testid": dataTestId
-}, ref) => header ? /* @__PURE__ */ jsxs(StyledStack, { className, "data-disabled": disabled, "data-testid": dataTestId, gap: 1, ref, children: [
+}, ref) => header ? /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${stackCard}`, "data-disabled": disabled, "data-testid": dataTestId, gap: 1, ref, children: [
   typeof header === "string" ? /* @__PURE__ */ jsx(Text, { as: "h2", disabled, prominence: "strong", sentiment: "neutral", variant: "heading", children: header }) : header,
-  /* @__PURE__ */ jsx(BorderedBox, { "data-disabled": disabled, "data-is-active": active, children: subHeader ? /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+  /* @__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(BorderedBox, { className, "data-disabled": disabled, "data-is-active": active, "data-testid": dataTestId, ref, children: subHeader ? /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+] }) : /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${borderedBox}`, "data-disabled": disabled, "data-is-active": active, "data-testid": dataTestId, ref, 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 }));

package/dist/components/Card/styles.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                            */
+var stackCard = "uv_1p7tz3i0";
+var borderedBox = "uv_1p7tz3i1";
+exports.borderedBox = borderedBox;
+exports.stackCard = stackCard;

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

@@ -0,0 +1,2 @@
+export declare const stackCard: string;
+export declare const borderedBox: string;

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

@@ -0,0 +1,7 @@
+/* empty css                          */
+var stackCard = "uv_1p7tz3i0";
+var borderedBox = "uv_1p7tz3i1";
+export {
+  borderedBox,
+  stackCard
+};