@ultraviolet/plus 3.0.0-beta.9 → 3.1.0

package/README.md

@@ -9,7 +9,7 @@ Ultraviolet Plus is a set of complex components that are built on top of Ultravi
 ## Get Started
 
 ```sh
-$ pnpm add @ultraviolet/ui @ultraviolet/plus
+$ pnpm add @ultraviolet/plus
 ```
 
 ### Usage

package/dist/components/CodeEditor/CodeEditor.d.ts

@@ -1,6 +1,6 @@
 import { langs } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 type CodeEditorProps = {
     value: string;
     onChange: ComponentProps<typeof CodeMirror>['onChange'];
@@ -24,6 +24,7 @@ type CodeEditorProps = {
     className?: string;
     error?: string;
     lineNumbers?: boolean;
+    style?: CSSProperties;
 };
-export declare const CodeEditor: ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled, label, copyButton, id, helper, labelDescription, "aria-label": ariaLabel, "data-testid": dataTestId, className, error, lineNumbers, }: CodeEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CodeEditor: ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled, label, copyButton, id, helper, labelDescription, "aria-label": ariaLabel, "data-testid": dataTestId, className, error, lineNumbers, style, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CodeEditor/CodeEditor.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { langs } from "@uiw/codemirror-extensions-langs";
 import { material } from "@uiw/codemirror-theme-material";
 import CodeMirror from "@uiw/react-codemirror";
@@ -23,21 +23,52 @@ const CodeEditor = ({
   "data-testid": dataTestId,
   className,
   error,
-  lineNumbers = true
-}) => /* @__PURE__ */ jsxs(Stack, { className: disabled ? disabledStack : "", gap: 0.5, children: [
+  lineNumbers = true,
+  style
+}) => /* @__PURE__ */ jsxs(Stack, { className: disabled ? disabledStack : "", gap: 0.5, style, children: [
   label ? /* @__PURE__ */ jsx(Label, { labelDescription, children: label }) : null,
   /* @__PURE__ */ jsxs("div", { className: codeEditor[disabled ? "disabled" : "default"], children: [
-    /* @__PURE__ */ jsx(CodeMirror, { "aria-disabled": disabled, "aria-label": ariaLabel, basicSetup: {
-      autocompletion: autoCompletion,
-      highlightActiveLine: false,
-      highlightActiveLineGutter: false,
-      lineNumbers
-    }, className, "data-testid": dataTestId, editable: !disabled || !readOnly, extensions: [langs[extensions]?.() ?? langs["sh"]], height, id, onBlur, onChange, onUpdate: () => {
-      if (disabled) {
-        document.getSelection()?.empty();
+    /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel,
+        basicSetup: {
+          autocompletion: autoCompletion,
+          highlightActiveLine: false,
+          highlightActiveLineGutter: false,
+          lineNumbers
+        },
+        className,
+        "data-testid": dataTestId,
+        editable: !disabled || !readOnly,
+        extensions: [langs[extensions]?.() ?? langs["sh"]],
+        height,
+        id,
+        onBlur,
+        onChange,
+        onUpdate: () => {
+          if (disabled) {
+            document.getSelection()?.empty();
+          }
+        },
+        readOnly: readOnly || disabled,
+        theme: material,
+        value,
+        width: "100%"
       }
-    }, readOnly: readOnly || disabled, theme: material, value, width: "100%" }),
-    copyButton$1 && !disabled ? /* @__PURE__ */ jsx(CopyButton, { bordered: true, className: copyButton, sentiment: "neutral", size: "small", value, children: typeof copyButton$1 === "string" ? copyButton$1 : void 0 }) : null
+    ),
+    copyButton$1 && !disabled ? /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        bordered: true,
+        className: copyButton,
+        sentiment: "neutral",
+        size: "small",
+        value,
+        children: typeof copyButton$1 === "string" ? copyButton$1 : void 0
+      }
+    ) : null
   ] }),
   error && typeof error !== "boolean" ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null,
   !error && helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null

package/dist/components/ContentCard/Skeleton.d.ts

@@ -1,5 +1,5 @@
 type SkeletonProps = {
     direction: 'row' | 'column';
 };
-export declare const Skeleton: ({ direction }: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ direction }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ContentCard/Skeleton.js

@@ -1,15 +1,20 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Skeleton as Skeleton$1 } from "@ultraviolet/ui";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { skeletonImage, skeletonWidthVar, skeletonHeightVar, paddedStack } from "./styles.css.js";
-const Skeleton = ({
-  direction
-}) => /* @__PURE__ */ jsxs(Stack, { direction, children: [
-  /* @__PURE__ */ jsx(Skeleton$1, { className: skeletonImage[direction], style: assignInlineVars({
-    [skeletonHeightVar]: direction === "column" ? "120px" : "unset",
-    [skeletonWidthVar]: direction === "row" ? "220px" : "100%"
-  }), variant: "square" }),
+const Skeleton = ({ direction }) => /* @__PURE__ */ jsxs(Stack, { direction, children: [
+  /* @__PURE__ */ jsx(
+    Skeleton$1,
+    {
+      className: skeletonImage[direction],
+      style: assignInlineVars({
+        [skeletonHeightVar]: direction === "column" ? "120px" : "unset",
+        [skeletonWidthVar]: direction === "row" ? "220px" : "100%"
+      }),
+      variant: "square"
+    }
+  ),
   /* @__PURE__ */ jsxs(Stack, { className: paddedStack, gap: 2, children: [
     /* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),
     /* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }),

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

@@ -1,4 +1,4 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 type ContentCardProps = {
     direction?: 'row' | 'column';
     /**
@@ -25,6 +25,7 @@ type ContentCardProps = {
     disabled?: boolean;
     loading?: boolean;
     className?: string;
+    style?: CSSProperties;
 };
 /**
  * ContentCard is a component that displays a title, subtitle, description, image and icon in a card.

package/dist/components/ContentCard/index.js

@@ -1,61 +1,142 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { OpenInNewIcon } from "@ultraviolet/icons";
 import { Stack, Text } from "@ultraviolet/ui";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef, useRef, useState, useMemo, useEffect } from "react";
 import { Skeleton } from "./Skeleton.js";
 import { cardClass, activeClass, fullHeight, imageClass, subContainerHeightVar, subContainer, iconStack, iconContainer } from "./styles.css.js";
-const ContentCard = forwardRef(({
-  image,
-  direction = "column",
-  icon,
-  subtitle,
-  title,
-  headingTag = "h3",
-  description,
-  children,
-  href,
-  target = "_blank",
-  onClick,
-  disabled,
-  loading,
-  className
-}, ref) => {
-  const subContainerRef = useRef(null);
-  const [subContainerHeight, setSubContainerHeight] = useState(subContainerRef?.current?.offsetHeight);
-  const Container = useMemo(() => {
-    if (href) {
-      return "a";
-    }
-    if (onClick) {
-      return "button";
-    }
-    return "div";
-  }, [href, onClick]);
-  useEffect(() => setSubContainerHeight(subContainerRef?.current?.offsetHeight), [subContainerRef]);
-  return /* @__PURE__ */ jsx(Container, { className: `${className ? `${className} ` : ""}${cardClass}${onClick || href ? ` ${activeClass}` : ""}`, disabled, href: !disabled ? href : void 0, onClick: !disabled ? onClick : void 0, ref, role: onClick && !href ? "button" : void 0, target, children: loading ? /* @__PURE__ */ jsx(Skeleton, { direction }) : /* @__PURE__ */ jsxs(Stack, { className: fullHeight, direction, children: [
-    image ? /* @__PURE__ */ jsx("img", { alt: "", className: imageClass[direction], "data-disabled": disabled, height: direction === "column" ? 120 : void 0, src: image, style: assignInlineVars({
-      [subContainerHeightVar]: subContainerHeight ? `${subContainerHeight.toString()}px` : void 0
-    }), width: direction === "row" ? 220 : void 0 }) : null,
-    /* @__PURE__ */ jsxs(Stack, { direction, flex: 1, gap: 2, children: [
-      /* @__PURE__ */ jsxs(Stack, { alignItems: !subtitle && !description && !children ? "center" : void 0, className: subContainer[!href ? "noHref" : direction], direction, flex: "1 1 auto", gap: 2, ref: subContainerRef, children: [
-        icon ?? null,
-        /* @__PURE__ */ jsxs(Stack, { flex: "1 1 auto", gap: 2, justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
-            /* @__PURE__ */ jsxs(Stack, { children: [
-              subtitle ? /* @__PURE__ */ jsx(Text, { as: "small", disabled, prominence: "weak", sentiment: "neutral", variant: "caption", children: subtitle }) : null,
-              /* @__PURE__ */ jsx(Text, { as: headingTag, disabled, sentiment: "neutral", variant: "bodyStrong", children: title })
-            ] }),
-            description ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, sentiment: "neutral", variant: "bodySmall", children: description }) : null
-          ] }),
-          children ? /* @__PURE__ */ jsx(Stack, { children }) : null
+const ContentCard = forwardRef(
+  ({
+    image,
+    direction = "column",
+    icon,
+    subtitle,
+    title,
+    headingTag = "h3",
+    description,
+    children,
+    href,
+    target = "_blank",
+    onClick,
+    disabled,
+    loading,
+    className,
+    style
+  }, ref) => {
+    const subContainerRef = useRef(null);
+    const [subContainerHeight, setSubContainerHeight] = useState(
+      subContainerRef?.current?.offsetHeight
+    );
+    const Container = useMemo(() => {
+      if (href) {
+        return "a";
+      }
+      if (onClick) {
+        return "button";
+      }
+      return "div";
+    }, [href, onClick]);
+    useEffect(
+      () => setSubContainerHeight(subContainerRef?.current?.offsetHeight),
+      [subContainerRef]
+    );
+    return /* @__PURE__ */ jsx(
+      Container,
+      {
+        className: `${className ? `${className} ` : ""}${cardClass}${onClick || href ? ` ${activeClass}` : ""}`,
+        disabled,
+        href: !disabled ? href : void 0,
+        onClick: !disabled ? onClick : void 0,
+        ref,
+        role: onClick && !href ? "button" : void 0,
+        style,
+        target,
+        children: loading ? /* @__PURE__ */ jsx(Skeleton, { direction }) : /* @__PURE__ */ jsxs(Stack, { className: fullHeight, direction, children: [
+          image ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              alt: "",
+              className: imageClass[direction],
+              "data-disabled": disabled,
+              height: direction === "column" ? 120 : void 0,
+              src: image,
+              style: assignInlineVars({
+                [subContainerHeightVar]: subContainerHeight ? `${subContainerHeight.toString()}px` : void 0
+              }),
+              width: direction === "row" ? 220 : void 0
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(Stack, { direction, flex: 1, gap: 2, children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                alignItems: !subtitle && !description && !children ? "center" : void 0,
+                className: subContainer[!href ? "noHref" : direction],
+                direction,
+                flex: "1 1 auto",
+                gap: 2,
+                ref: subContainerRef,
+                children: [
+                  icon ?? null,
+                  /* @__PURE__ */ jsxs(Stack, { flex: "1 1 auto", gap: 2, justifyContent: "space-between", children: [
+                    /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+                      /* @__PURE__ */ jsxs(Stack, { children: [
+                        subtitle ? /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            as: "small",
+                            disabled,
+                            prominence: "weak",
+                            sentiment: "neutral",
+                            variant: "caption",
+                            children: subtitle
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            as: headingTag,
+                            disabled,
+                            sentiment: "neutral",
+                            variant: "bodyStrong",
+                            children: title
+                          }
+                        )
+                      ] }),
+                      description ? /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          as: "p",
+                          disabled,
+                          sentiment: "neutral",
+                          variant: "bodySmall",
+                          children: description
+                        }
+                      ) : null
+                    ] }),
+                    children ? /* @__PURE__ */ jsx(Stack, { children }) : null
+                  ] })
+                ]
+              }
+            ),
+            href ? /* @__PURE__ */ jsx(
+              Stack,
+              {
+                alignItems: direction === "column" ? "flex-end" : "center",
+                className: iconStack[direction],
+                direction,
+                flex: 1,
+                justifyContent: direction === "column" ? "center" : "end",
+                children: /* @__PURE__ */ jsx("div", { className: iconContainer, children: /* @__PURE__ */ jsx(OpenInNewIcon, { disabled, sentiment: "neutral" }) })
+              }
+            ) : null
+          ] })
         ] })
-      ] }),
-      href ? /* @__PURE__ */ jsx(Stack, { alignItems: direction === "column" ? "flex-end" : "center", className: iconStack[direction], direction, flex: 1, justifyContent: direction === "column" ? "center" : "end", children: /* @__PURE__ */ jsx("div", { className: iconContainer, children: /* @__PURE__ */ jsx(OpenInNewIcon, { disabled, sentiment: "neutral" }) }) }) : null
-    ] })
-  ] }) });
-});
+      }
+    );
+  }
+);
 export {
   ContentCard
 };

package/dist/components/ContentCardGroup/Card.d.ts

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, CSSProperties, ElementType, ReactNode } from 'react';
 type CardProps = {
     title?: string;
     titleAs?: ElementType;
@@ -8,6 +8,7 @@ type CardProps = {
     children?: ReactNode;
     href: string;
     target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    style?: CSSProperties;
 };
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/components/ContentCardGroup/Card.js

@@ -1,92 +1,71 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { OpenInNewIcon } from "@ultraviolet/icons";
-import { Text, Stack } from "@ultraviolet/ui";
+import { Stack, Text } from "@ultraviolet/ui";
 import { forwardRef } from "react";
-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: "eqcw8nr3"
-} : {
-  target: "eqcw8nr3",
-  label: "StyledStack"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ovk77c",
-  styles: "min-width:0"
-} : {
-  name: "ovk77c",
-  styles: "min-width:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQmlDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IE9wZW5Jbk5ld0ljb24gfSBmcm9tICdAdWx0cmF2aW9sZXQvaWNvbnMnXG5pbXBvcnQgeyBTdGFjaywgVGV4dCB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcbmltcG9ydCB0eXBlIHsgQW5jaG9ySFRNTEF0dHJpYnV0ZXMsIEVsZW1lbnRUeXBlLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCdcblxudHlwZSBDYXJkUHJvcHMgPSB7XG4gIHRpdGxlPzogc3RyaW5nXG4gIHRpdGxlQXM/OiBFbGVtZW50VHlwZVxuICBzdWJ0aXRsZT86IHN0cmluZ1xuICBzdWJ0aXRsZUFzPzogRWxlbWVudFR5cGVcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbiAgaHJlZjogc3RyaW5nXG4gIHRhcmdldD86IEFuY2hvckhUTUxBdHRyaWJ1dGVzPEhUTUxBbmNob3JFbGVtZW50PlsndGFyZ2V0J11cbn1cblxuY29uc3QgU3R5bGVkU3RhY2sgPSBzdHlsZWQoU3RhY2spYFxuICBtaW4td2lkdGg6IDA7XG5gXG5cbmNvbnN0IEljb25XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFdlYWt9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuYFxuXG5jb25zdCBTdHlsZWRXcmFwcGVyID0gc3R5bGVkLmFgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzMnXX07XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gICY6bm90KDpmaXJzdC1jaGlsZCkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcn07XG4gIH1cblxuICAmOmZpcnN0LWNoaWxkIHtcbiAgICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9XG4gICAgICAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9IDAgMDtcbiAgfVxuXG4gICY6bGFzdC1jaGlsZCB7XG4gICAgYm9yZGVyLXJhZGl1czogMCAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH1cbiAgICAgICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIH1cblxuICAmICR7SWNvbldyYXBwZXJ9IHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJhY2tncm91bmRXZWFrfTtcbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZEhvdmVyfTtcblxuICAgICYgJHtJY29uV3JhcHBlcn0ge1xuICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuY29uc3QgRnVsbEhlaWdodFN0YWNrID0gc3R5bGVkKFN0YWNrKWBcbiAgaGVpZ2h0OiAxMDAlO1xuYFxuXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWY8SFRNTEFuY2hvckVsZW1lbnQsIENhcmRQcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICB0aXRsZSxcbiAgICAgIHRpdGxlQXMsXG4gICAgICBzdWJ0aXRsZSxcbiAgICAgIHN1YnRpdGxlQXMsXG4gICAgICBkZXNjcmlwdGlvbixcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaHJlZixcbiAgICAgIHRhcmdldCA9ICdfYmxhbmsnLFxuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8U3R5bGVkV3JhcHBlciBocmVmPXtocmVmfSByZWY9e3JlZn0gdGFyZ2V0PXt0YXJnZXR9PlxuICAgICAgPEZ1bGxIZWlnaHRTdGFja1xuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgZGlyZWN0aW9uPVwicm93XCJcbiAgICAgICAgZ2FwPXsyfVxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgPlxuICAgICAgICA8U3R5bGVkU3RhY2sgZ2FwPVwiMC41XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIHtzdWJ0aXRsZSA/IChcbiAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICBhcz17c3VidGl0bGVBcyB8fCAnaDUnfVxuICAgICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgICBwcm9taW5lbmNlPVwid2Vha1wiXG4gICAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgICAgdmFyaWFudD1cImNhcHRpb25cIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YnRpdGxlfVxuICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIGFzPXt0aXRsZUFzIHx8ICdoMyd9XG4gICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJib2R5U3Ryb25nXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIHtkZXNjcmlwdGlvbiA/IChcbiAgICAgICAgICAgIDxUZXh0IGFzPVwicFwiIG9uZUxpbmUgc2VudGltZW50PVwibmV1dHJhbFwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAgICAgICAge2Rlc2NyaXB0aW9ufVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9TdHlsZWRTdGFjaz5cbiAgICAgICAgPEljb25XcmFwcGVyPlxuICAgICAgICAgIDxPcGVuSW5OZXdJY29uIHNlbnRpbWVudD1cIm5ldXRyYWxcIiAvPlxuICAgICAgICA8L0ljb25XcmFwcGVyPlxuICAgICAgPC9GdWxsSGVpZ2h0U3RhY2s+XG4gICAgPC9TdHlsZWRXcmFwcGVyPlxuICApLFxuKVxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const IconWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "eqcw8nr2"
-} : {
-  target: "eqcw8nr2",
-  label: "IconWrapper"
-})("display:inline-flex;background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";padding:", ({
-  theme
-}) => theme.space["1"], ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QjhCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IE9wZW5Jbk5ld0ljb24gfSBmcm9tICdAdWx0cmF2aW9sZXQvaWNvbnMnXG5pbXBvcnQgeyBTdGFjaywgVGV4dCB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcbmltcG9ydCB0eXBlIHsgQW5jaG9ySFRNTEF0dHJpYnV0ZXMsIEVsZW1lbnRUeXBlLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCdcblxudHlwZSBDYXJkUHJvcHMgPSB7XG4gIHRpdGxlPzogc3RyaW5nXG4gIHRpdGxlQXM/OiBFbGVtZW50VHlwZVxuICBzdWJ0aXRsZT86IHN0cmluZ1xuICBzdWJ0aXRsZUFzPzogRWxlbWVudFR5cGVcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbiAgaHJlZjogc3RyaW5nXG4gIHRhcmdldD86IEFuY2hvckhUTUxBdHRyaWJ1dGVzPEhUTUxBbmNob3JFbGVtZW50PlsndGFyZ2V0J11cbn1cblxuY29uc3QgU3R5bGVkU3RhY2sgPSBzdHlsZWQoU3RhY2spYFxuICBtaW4td2lkdGg6IDA7XG5gXG5cbmNvbnN0IEljb25XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFdlYWt9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuYFxuXG5jb25zdCBTdHlsZWRXcmFwcGVyID0gc3R5bGVkLmFgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzMnXX07XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gICY6bm90KDpmaXJzdC1jaGlsZCkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcn07XG4gIH1cblxuICAmOmZpcnN0LWNoaWxkIHtcbiAgICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9XG4gICAgICAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9IDAgMDtcbiAgfVxuXG4gICY6bGFzdC1jaGlsZCB7XG4gICAgYm9yZGVyLXJhZGl1czogMCAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH1cbiAgICAgICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIH1cblxuICAmICR7SWNvbldyYXBwZXJ9IHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJhY2tncm91bmRXZWFrfTtcbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZEhvdmVyfTtcblxuICAgICYgJHtJY29uV3JhcHBlcn0ge1xuICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuY29uc3QgRnVsbEhlaWdodFN0YWNrID0gc3R5bGVkKFN0YWNrKWBcbiAgaGVpZ2h0OiAxMDAlO1xuYFxuXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWY8SFRNTEFuY2hvckVsZW1lbnQsIENhcmRQcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICB0aXRsZSxcbiAgICAgIHRpdGxlQXMsXG4gICAgICBzdWJ0aXRsZSxcbiAgICAgIHN1YnRpdGxlQXMsXG4gICAgICBkZXNjcmlwdGlvbixcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaHJlZixcbiAgICAgIHRhcmdldCA9ICdfYmxhbmsnLFxuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8U3R5bGVkV3JhcHBlciBocmVmPXtocmVmfSByZWY9e3JlZn0gdGFyZ2V0PXt0YXJnZXR9PlxuICAgICAgPEZ1bGxIZWlnaHRTdGFja1xuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgZGlyZWN0aW9uPVwicm93XCJcbiAgICAgICAgZ2FwPXsyfVxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgPlxuICAgICAgICA8U3R5bGVkU3RhY2sgZ2FwPVwiMC41XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIHtzdWJ0aXRsZSA/IChcbiAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICBhcz17c3VidGl0bGVBcyB8fCAnaDUnfVxuICAgICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgICBwcm9taW5lbmNlPVwid2Vha1wiXG4gICAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgICAgdmFyaWFudD1cImNhcHRpb25cIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YnRpdGxlfVxuICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIGFzPXt0aXRsZUFzIHx8ICdoMyd9XG4gICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJib2R5U3Ryb25nXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIHtkZXNjcmlwdGlvbiA/IChcbiAgICAgICAgICAgIDxUZXh0IGFzPVwicFwiIG9uZUxpbmUgc2VudGltZW50PVwibmV1dHJhbFwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAgICAgICAge2Rlc2NyaXB0aW9ufVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9TdHlsZWRTdGFjaz5cbiAgICAgICAgPEljb25XcmFwcGVyPlxuICAgICAgICAgIDxPcGVuSW5OZXdJY29uIHNlbnRpbWVudD1cIm5ldXRyYWxcIiAvPlxuICAgICAgICA8L0ljb25XcmFwcGVyPlxuICAgICAgPC9GdWxsSGVpZ2h0U3RhY2s+XG4gICAgPC9TdHlsZWRXcmFwcGVyPlxuICApLFxuKVxuIl19 */"));
-const StyledWrapper = /* @__PURE__ */ _styled("a", process.env.NODE_ENV === "production" ? {
-  target: "eqcw8nr1"
-} : {
-  target: "eqcw8nr1",
-  label: "StyledWrapper"
-})("padding:", ({
-  theme
-}) => theme.space["3"], ";text-decoration:none;height:100%;&:not(:first-child){border-top:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";}&:first-child{border-radius:", ({
-  theme
-}) => theme.radii.default, " ", ({
-  theme
-}) => theme.radii.default, " 0 0;}&:last-child{border-radius:0 0 ", ({
-  theme
-}) => theme.radii.default, " ", ({
-  theme
-}) => theme.radii.default, ";}& ", IconWrapper, "{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";}&:hover{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundHover, ";& ", IconWrapper, "{background:none;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QjhCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IE9wZW5Jbk5ld0ljb24gfSBmcm9tICdAdWx0cmF2aW9sZXQvaWNvbnMnXG5pbXBvcnQgeyBTdGFjaywgVGV4dCB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcbmltcG9ydCB0eXBlIHsgQW5jaG9ySFRNTEF0dHJpYnV0ZXMsIEVsZW1lbnRUeXBlLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCdcblxudHlwZSBDYXJkUHJvcHMgPSB7XG4gIHRpdGxlPzogc3RyaW5nXG4gIHRpdGxlQXM/OiBFbGVtZW50VHlwZVxuICBzdWJ0aXRsZT86IHN0cmluZ1xuICBzdWJ0aXRsZUFzPzogRWxlbWVudFR5cGVcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbiAgaHJlZjogc3RyaW5nXG4gIHRhcmdldD86IEFuY2hvckhUTUxBdHRyaWJ1dGVzPEhUTUxBbmNob3JFbGVtZW50PlsndGFyZ2V0J11cbn1cblxuY29uc3QgU3R5bGVkU3RhY2sgPSBzdHlsZWQoU3RhY2spYFxuICBtaW4td2lkdGg6IDA7XG5gXG5cbmNvbnN0IEljb25XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFdlYWt9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuYFxuXG5jb25zdCBTdHlsZWRXcmFwcGVyID0gc3R5bGVkLmFgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzMnXX07XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gICY6bm90KDpmaXJzdC1jaGlsZCkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcn07XG4gIH1cblxuICAmOmZpcnN0LWNoaWxkIHtcbiAgICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9XG4gICAgICAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9IDAgMDtcbiAgfVxuXG4gICY6bGFzdC1jaGlsZCB7XG4gICAgYm9yZGVyLXJhZGl1czogMCAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH1cbiAgICAgICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIH1cblxuICAmICR7SWNvbldyYXBwZXJ9IHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJhY2tncm91bmRXZWFrfTtcbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZEhvdmVyfTtcblxuICAgICYgJHtJY29uV3JhcHBlcn0ge1xuICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuY29uc3QgRnVsbEhlaWdodFN0YWNrID0gc3R5bGVkKFN0YWNrKWBcbiAgaGVpZ2h0OiAxMDAlO1xuYFxuXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWY8SFRNTEFuY2hvckVsZW1lbnQsIENhcmRQcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICB0aXRsZSxcbiAgICAgIHRpdGxlQXMsXG4gICAgICBzdWJ0aXRsZSxcbiAgICAgIHN1YnRpdGxlQXMsXG4gICAgICBkZXNjcmlwdGlvbixcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaHJlZixcbiAgICAgIHRhcmdldCA9ICdfYmxhbmsnLFxuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8U3R5bGVkV3JhcHBlciBocmVmPXtocmVmfSByZWY9e3JlZn0gdGFyZ2V0PXt0YXJnZXR9PlxuICAgICAgPEZ1bGxIZWlnaHRTdGFja1xuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgZGlyZWN0aW9uPVwicm93XCJcbiAgICAgICAgZ2FwPXsyfVxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgPlxuICAgICAgICA8U3R5bGVkU3RhY2sgZ2FwPVwiMC41XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIHtzdWJ0aXRsZSA/IChcbiAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICBhcz17c3VidGl0bGVBcyB8fCAnaDUnfVxuICAgICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgICBwcm9taW5lbmNlPVwid2Vha1wiXG4gICAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgICAgdmFyaWFudD1cImNhcHRpb25cIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YnRpdGxlfVxuICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIGFzPXt0aXRsZUFzIHx8ICdoMyd9XG4gICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJib2R5U3Ryb25nXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIHtkZXNjcmlwdGlvbiA/IChcbiAgICAgICAgICAgIDxUZXh0IGFzPVwicFwiIG9uZUxpbmUgc2VudGltZW50PVwibmV1dHJhbFwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAgICAgICAge2Rlc2NyaXB0aW9ufVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9TdHlsZWRTdGFjaz5cbiAgICAgICAgPEljb25XcmFwcGVyPlxuICAgICAgICAgIDxPcGVuSW5OZXdJY29uIHNlbnRpbWVudD1cIm5ldXRyYWxcIiAvPlxuICAgICAgICA8L0ljb25XcmFwcGVyPlxuICAgICAgPC9GdWxsSGVpZ2h0U3RhY2s+XG4gICAgPC9TdHlsZWRXcmFwcGVyPlxuICApLFxuKVxuIl19 */"));
-const FullHeightStack = /* @__PURE__ */ _styled(Stack, process.env.NODE_ENV === "production" ? {
-  target: "eqcw8nr0"
-} : {
-  target: "eqcw8nr0",
-  label: "FullHeightStack"
-})(process.env.NODE_ENV === "production" ? {
-  name: "13udsys",
-  styles: "height:100%"
-} : {
-  name: "13udsys",
-  styles: "height:100%/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RHFDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IE9wZW5Jbk5ld0ljb24gfSBmcm9tICdAdWx0cmF2aW9sZXQvaWNvbnMnXG5pbXBvcnQgeyBTdGFjaywgVGV4dCB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcbmltcG9ydCB0eXBlIHsgQW5jaG9ySFRNTEF0dHJpYnV0ZXMsIEVsZW1lbnRUeXBlLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCdcblxudHlwZSBDYXJkUHJvcHMgPSB7XG4gIHRpdGxlPzogc3RyaW5nXG4gIHRpdGxlQXM/OiBFbGVtZW50VHlwZVxuICBzdWJ0aXRsZT86IHN0cmluZ1xuICBzdWJ0aXRsZUFzPzogRWxlbWVudFR5cGVcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbiAgaHJlZjogc3RyaW5nXG4gIHRhcmdldD86IEFuY2hvckhUTUxBdHRyaWJ1dGVzPEhUTUxBbmNob3JFbGVtZW50PlsndGFyZ2V0J11cbn1cblxuY29uc3QgU3R5bGVkU3RhY2sgPSBzdHlsZWQoU3RhY2spYFxuICBtaW4td2lkdGg6IDA7XG5gXG5cbmNvbnN0IEljb25XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFdlYWt9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuYFxuXG5jb25zdCBTdHlsZWRXcmFwcGVyID0gc3R5bGVkLmFgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzMnXX07XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gICY6bm90KDpmaXJzdC1jaGlsZCkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcn07XG4gIH1cblxuICAmOmZpcnN0LWNoaWxkIHtcbiAgICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9XG4gICAgICAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9IDAgMDtcbiAgfVxuXG4gICY6bGFzdC1jaGlsZCB7XG4gICAgYm9yZGVyLXJhZGl1czogMCAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH1cbiAgICAgICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIH1cblxuICAmICR7SWNvbldyYXBwZXJ9IHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJhY2tncm91bmRXZWFrfTtcbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZEhvdmVyfTtcblxuICAgICYgJHtJY29uV3JhcHBlcn0ge1xuICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuY29uc3QgRnVsbEhlaWdodFN0YWNrID0gc3R5bGVkKFN0YWNrKWBcbiAgaGVpZ2h0OiAxMDAlO1xuYFxuXG5leHBvcnQgY29uc3QgQ2FyZCA9IGZvcndhcmRSZWY8SFRNTEFuY2hvckVsZW1lbnQsIENhcmRQcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICB0aXRsZSxcbiAgICAgIHRpdGxlQXMsXG4gICAgICBzdWJ0aXRsZSxcbiAgICAgIHN1YnRpdGxlQXMsXG4gICAgICBkZXNjcmlwdGlvbixcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaHJlZixcbiAgICAgIHRhcmdldCA9ICdfYmxhbmsnLFxuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8U3R5bGVkV3JhcHBlciBocmVmPXtocmVmfSByZWY9e3JlZn0gdGFyZ2V0PXt0YXJnZXR9PlxuICAgICAgPEZ1bGxIZWlnaHRTdGFja1xuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgZGlyZWN0aW9uPVwicm93XCJcbiAgICAgICAgZ2FwPXsyfVxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgPlxuICAgICAgICA8U3R5bGVkU3RhY2sgZ2FwPVwiMC41XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIHtzdWJ0aXRsZSA/IChcbiAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICBhcz17c3VidGl0bGVBcyB8fCAnaDUnfVxuICAgICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgICBwcm9taW5lbmNlPVwid2Vha1wiXG4gICAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgICAgdmFyaWFudD1cImNhcHRpb25cIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N1YnRpdGxlfVxuICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIGFzPXt0aXRsZUFzIHx8ICdoMyd9XG4gICAgICAgICAgICAgIG9uZUxpbmVcbiAgICAgICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJib2R5U3Ryb25nXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIHtkZXNjcmlwdGlvbiA/IChcbiAgICAgICAgICAgIDxUZXh0IGFzPVwicFwiIG9uZUxpbmUgc2VudGltZW50PVwibmV1dHJhbFwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAgICAgICAge2Rlc2NyaXB0aW9ufVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9TdHlsZWRTdGFjaz5cbiAgICAgICAgPEljb25XcmFwcGVyPlxuICAgICAgICAgIDxPcGVuSW5OZXdJY29uIHNlbnRpbWVudD1cIm5ldXRyYWxcIiAvPlxuICAgICAgICA8L0ljb25XcmFwcGVyPlxuICAgICAgPC9GdWxsSGVpZ2h0U3RhY2s+XG4gICAgPC9TdHlsZWRXcmFwcGVyPlxuICApLFxuKVxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Card = forwardRef(({
-  title,
-  titleAs,
-  subtitle,
-  subtitleAs,
-  description,
-  children,
-  href,
-  target = "_blank"
-}, ref) => /* @__PURE__ */ jsx(StyledWrapper, { href, ref, target, children: /* @__PURE__ */ jsxs(FullHeightStack, { alignItems: "center", direction: "row", gap: 2, justifyContent: "space-between", children: [
-  /* @__PURE__ */ jsxs(StyledStack, { gap: "0.5", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      subtitle ? /* @__PURE__ */ jsx(Text, { as: subtitleAs || "h5", oneLine: true, prominence: "weak", sentiment: "neutral", variant: "caption", children: subtitle }) : null,
-      /* @__PURE__ */ jsx(Text, { as: titleAs || "h3", oneLine: true, sentiment: "neutral", variant: "bodyStrong", children: title })
-    ] }),
-    description ? /* @__PURE__ */ jsx(Text, { as: "p", oneLine: true, sentiment: "neutral", variant: "bodySmall", children: description }) : null,
-    children
-  ] }),
-  /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(OpenInNewIcon, { sentiment: "neutral" }) })
-] }) }));
+import { styledWrapper, fullHeightStack, customStack, iconWrapper } from "./styles.css.js";
+const Card = forwardRef(
+  ({
+    title,
+    titleAs,
+    subtitle,
+    subtitleAs,
+    description,
+    children,
+    href,
+    target = "_blank",
+    style
+  }, ref) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: styledWrapper,
+      href,
+      ref,
+      style,
+      target,
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          alignItems: "center",
+          className: fullHeightStack,
+          direction: "row",
+          gap: 2,
+          justifyContent: "space-between",
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { className: customStack, gap: "0.5", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                subtitle ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: subtitleAs || "h5",
+                    oneLine: true,
+                    prominence: "weak",
+                    sentiment: "neutral",
+                    variant: "caption",
+                    children: subtitle
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: titleAs || "h3",
+                    oneLine: true,
+                    sentiment: "neutral",
+                    variant: "bodyStrong",
+                    children: title
+                  }
+                )
+              ] }),
+              description ? /* @__PURE__ */ jsx(Text, { as: "p", oneLine: true, sentiment: "neutral", variant: "bodySmall", children: description }) : null,
+              children
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: iconWrapper, children: /* @__PURE__ */ jsx(OpenInNewIcon, { sentiment: "neutral" }) })
+          ]
+        }
+      )
+    }
+  )
+);
 export {
   Card
 };

package/dist/components/ContentCardGroup/SkeletonCard.d.ts

@@ -1 +1 @@
-export declare const SkeletonCard: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SkeletonCard: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/ContentCardGroup/SkeletonCard.js

@@ -1,32 +1,14 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack, Skeleton } from "@ultraviolet/ui";
-const StyledWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1xovou51"
-} : {
-  target: "e1xovou51",
-  label: "StyledWrapper"
-})("padding:", ({
-  theme
-}) => theme.space["3"], ";&:not(:first-child){border-top:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9Ta2VsZXRvbkNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtnQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9wbHVzL3NyYy9jb21wb25lbnRzL0NvbnRlbnRDYXJkR3JvdXAvU2tlbGV0b25DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFNrZWxldG9uLCBTdGFjayB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcblxuY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzMnXX07XG5cbiAgJjpub3QoOmZpcnN0LWNoaWxkKSB7XG4gICAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyfTtcbiAgfVxuYFxuXG5jb25zdCBTdHlsZWRTcXVhcmVTa2VsZXRvbiA9IHN0eWxlZChTa2VsZXRvbilgXG4gIGhlaWdodDogMzJweDtcbiAgd2lkdGg6IDMycHg7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG5gXG5cbmV4cG9ydCBjb25zdCBTa2VsZXRvbkNhcmQgPSAoKSA9PiAoXG4gIDxTdHlsZWRXcmFwcGVyPlxuICAgIDxTdGFjayBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZGlyZWN0aW9uPVwicm93XCIganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCI+XG4gICAgICA8U3RhY2sgZ2FwPXsyfT5cbiAgICAgICAgPFNrZWxldG9uIHZhcmlhbnQ9XCJsaW5lXCIgLz5cbiAgICAgICAgPFNrZWxldG9uIHZhcmlhbnQ9XCJsaW5lXCIgLz5cbiAgICAgICAgPFNrZWxldG9uIHZhcmlhbnQ9XCJsaW5lXCIgLz5cbiAgICAgIDwvU3RhY2s+XG4gICAgICA8U3R5bGVkU3F1YXJlU2tlbGV0b24gdmFyaWFudD1cInNxdWFyZVwiIC8+XG4gICAgPC9TdGFjaz5cbiAgPC9TdHlsZWRXcmFwcGVyPlxuKVxuIl19 */"));
-const StyledSquareSkeleton = /* @__PURE__ */ _styled(Skeleton, process.env.NODE_ENV === "production" ? {
-  target: "e1xovou50"
-} : {
-  target: "e1xovou50",
-  label: "StyledSquareSkeleton"
-})("height:32px;width:32px;border-radius:", ({
-  theme
-}) => theme.radii.default, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmRHcm91cC9Ta2VsZXRvbkNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWE2QyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9wbHVzL3NyYy9jb21wb25lbnRzL0NvbnRlbnRDYXJkR3JvdXAvU2tlbGV0b25DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFNrZWxldG9uLCBTdGFjayB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcblxuY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzMnXX07XG5cbiAgJjpub3QoOmZpcnN0LWNoaWxkKSB7XG4gICAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyfTtcbiAgfVxuYFxuXG5jb25zdCBTdHlsZWRTcXVhcmVTa2VsZXRvbiA9IHN0eWxlZChTa2VsZXRvbilgXG4gIGhlaWdodDogMzJweDtcbiAgd2lkdGg6IDMycHg7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG5gXG5cbmV4cG9ydCBjb25zdCBTa2VsZXRvbkNhcmQgPSAoKSA9PiAoXG4gIDxTdHlsZWRXcmFwcGVyPlxuICAgIDxTdGFjayBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZGlyZWN0aW9uPVwicm93XCIganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCI+XG4gICAgICA8U3RhY2sgZ2FwPXsyfT5cbiAgICAgICAgPFNrZWxldG9uIHZhcmlhbnQ9XCJsaW5lXCIgLz5cbiAgICAgICAgPFNrZWxldG9uIHZhcmlhbnQ9XCJsaW5lXCIgLz5cbiAgICAgICAgPFNrZWxldG9uIHZhcmlhbnQ9XCJsaW5lXCIgLz5cbiAgICAgIDwvU3RhY2s+XG4gICAgICA8U3R5bGVkU3F1YXJlU2tlbGV0b24gdmFyaWFudD1cInNxdWFyZVwiIC8+XG4gICAgPC9TdGFjaz5cbiAgPC9TdHlsZWRXcmFwcGVyPlxuKVxuIl19 */"));
-const SkeletonCard = () => /* @__PURE__ */ jsx(StyledWrapper, { children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+import { skeletonWrapper, squareSkeleton } from "./styles.css.js";
+const SkeletonCard = () => /* @__PURE__ */ jsx("div", { className: skeletonWrapper, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
   /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
     /* @__PURE__ */ jsx(Skeleton, { variant: "line" }),
     /* @__PURE__ */ jsx(Skeleton, { variant: "line" }),
     /* @__PURE__ */ jsx(Skeleton, { variant: "line" })
   ] }),
-  /* @__PURE__ */ jsx(StyledSquareSkeleton, { variant: "square" })
+  /* @__PURE__ */ jsx(Skeleton, { className: squareSkeleton, variant: "square" })
 ] }) });
 export {
   SkeletonCard

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

@@ -1,7 +1,8 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type BaseContentCardGroupProps = {
     children: ReactNode;
     loading?: boolean;
+    style?: CSSProperties;
 };
 export declare const ContentCardGroup: import("react").ForwardRefExoticComponent<BaseContentCardGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
     Card: import("react").ForwardRefExoticComponent<{
@@ -13,6 +14,7 @@ export declare const ContentCardGroup: import("react").ForwardRefExoticComponent
         children?: ReactNode;
         href: string;
         target?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+        style?: CSSProperties;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };
 export {};