@trackunit/react-components 0.1.108 → 0.1.111

package/index.cjs

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var React = require('react');
+var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var uiIcons = require('@trackunit/ui-icons');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactUse = require('react-use');
 var reactDayPicker = require('react-day-picker');
 var locale = require('date-fns/locale');
@@ -109,7 +110,7 @@ function __rest(s, e) {
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
-    return (jsxRuntime.jsx(Container$7, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsxRuntime.jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
+    return (jsxRuntime.jsx(Container$4, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsxRuntime.jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
 };
 const getSpinnerStyles = () => ({ $size }) => {
     switch ($size) {
@@ -139,7 +140,7 @@ const StyledSpinner$1 = tailwindStyledComponents.tw.span `
   ${p => (p.$mode === "dark" ? tailwindStyledComponents.tws `tu-spinner--dark` : null)}
   ${getSpinnerStyles()}
 `;
-const Container$7 = tailwindStyledComponents.tw.div `
+const Container$4 = tailwindStyledComponents.tw.div `
   tu-spinner--container
   ${getCenteringStyles()}
   
@@ -211,12 +212,12 @@ const StyledSpinner = tailwindStyledComponents.twx(Spinner) `
 
 const IconButton = React__namespace.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, circular, loading, disabled } = _a, rest = __rest(_a, ["icon", "size", "square", "circular", "loading", "disabled"]);
-    return (jsxRuntime.jsx(StyledButton, Object.assign({ size: size, square: square, "$circular": circular, disabled: disabled || loading, ref: ref }, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: loading ? jsxRuntime.jsx(Spinner, { size: size }) : icon }) })));
+    return (jsxRuntime.jsx(StyledButton, Object.assign({ size: size, square: square, "$circular": circular, disabled: disabled || loading, ref: ref }, rest, { children: jsxRuntime.jsx(IconContainer$1, { children: loading ? jsxRuntime.jsx(Spinner, { size: size }) : icon }) })));
 });
 const StyledButton = tailwindStyledComponents.twx(Button) `
   ${p => (p.$circular ? tailwindStyledComponents.tws `tu-button--rounded` : null)}
 `;
-const IconContainer$2 = tailwindStyledComponents.tw.div `
+const IconContainer$1 = tailwindStyledComponents.tw.div `
   tu-button__container
   ${p => (p.$size === "small" ? tailwindStyledComponents.tws `tu-button__container--small` : null)}
 `;
@@ -249,12 +250,12 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     if (!IconComponent) {
         return null;
     }
-    return (jsxRuntime.jsx(React__namespace.Suspense, Object.assign({ fallback: jsxRuntime.jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsxRuntime.jsx(Root$6, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsxRuntime.jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
+    return (jsxRuntime.jsx(React__namespace.Suspense, Object.assign({ fallback: jsxRuntime.jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsxRuntime.jsx(Root$5, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsxRuntime.jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
 };
 const LoadingDot = tailwindStyledComponents.tw.span `
   tu-loading-dot
 `;
-const Root$6 = tailwindStyledComponents.tw.span `
+const Root$5 = tailwindStyledComponents.tw.span `
   tu-icon
   ${({ $color }) => {
     switch ($color) {
@@ -373,6 +374,71 @@ const StyledText$3 = tailwindStyledComponents.tw.text `
   ${getTextWeight()}
 `;
 
+const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
+    variants: {
+        color: {
+            danger: "bg-danger-100",
+            warning: "bg-warning-100",
+            success: "bg-success-100",
+            info: "bg-info-100",
+        },
+        layout: {
+            default: "items-start",
+            inline: "items-center",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+        color: "info",
+    },
+});
+const cvaAlertDetails = cssClassVarianceUtilities.cvaMerge(["flex"]);
+const cvaAlertContentBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-2", "flex-grow"]);
+const cvaAlertRightAligned = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "gap-2", "ml-2", "mt-4"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "mt-0 ml-auto items-center",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+const cvaAlertContent = cssClassVarianceUtilities.cvaMerge(["grow"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "flex items-center w-full",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "self-start", "w-min", "shrink-0"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "ml-4",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start", "mr-3", "shrink-0", "grid", "w-min"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "self-center",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+
 /**
  * The Alert component should be used to inform the user of important information.
  *
@@ -380,7 +446,7 @@ const StyledText$3 = tailwindStyledComponents.tw.text `
  * @returns {JSX.Element} Alert component
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline = false, }) => {
-    const ref = React__namespace.useRef();
+    const ref = React__namespace.useRef(null);
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
@@ -403,51 +469,15 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return "primary";
         }
     };
-    const body = inline ? (jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsxRuntime.jsx(Description, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsxRuntime.jsx(Description, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] }));
+    const body = inline ? (jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsxRuntime.jsx(Text$1, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsxRuntime.jsx(Text$1, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] }));
     React__namespace.useEffect(() => {
         if (autoScroll) {
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs(Container$6, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsxRuntime.jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxRuntime.jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxRuntime.jsxs(ContentDetails, { children: [jsxRuntime.jsx(ContentBody, { children: body }), onClose && !inline ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsxRuntime.jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsxRuntime.jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
-};
-const CloseButtonContainer = tailwindStyledComponents.tw.div `
-  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__close-button-container--inline` : tailwindStyledComponents.tws `tu-alert__close-button-container`)}
-`;
-const getBackgroundColor = () => ({ $color }) => {
-    const colors = {
-        danger: tailwindStyledComponents.tws `tu-alert--danger`,
-        warning: tailwindStyledComponents.tws `tu-alert--warning`,
-        success: tailwindStyledComponents.tws `tu-alert--success`,
-        info: tailwindStyledComponents.tws `tu-alert--info`,
-    };
-    return colors[$color];
-};
-const Container$6 = tailwindStyledComponents.tw.div `
-  tu-alert
-  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert--inline` : null)}
-  ${getBackgroundColor()}
-`;
-const Content$1 = tailwindStyledComponents.tw.div `
-  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__content--inline` : tailwindStyledComponents.tws `tu-alert__content`)}
-`;
-const ContentDetails = tailwindStyledComponents.tw.div `
-  tu-alert__content-details
-`;
-const ContentBody = tailwindStyledComponents.tw.div `
-  tu-alert__content-body
-`;
-const Description = tailwindStyledComponents.twx(Text$1) `
-  ${p => (p.$hasTitle ? tailwindStyledComponents.tws `tu-alert__description` : null)}
-`;
-const RightAligned = tailwindStyledComponents.tw.div `
-  tu-alert__right-aligned
-  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__right-aligned--inline` : null)}
-`;
-const IconContainer$1 = tailwindStyledComponents.tw.div `
-  tu-alert__icon-container
-  ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__icon-container--inline` : null)}
-`;
+    const layout = inline ? "inline" : "default";
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert" }, { children: [jsxRuntime.jsx("div", Object.assign({ className: cvaAlertIconContainer({ layout }) }, { children: getIconFromColor() })), jsxRuntime.jsxs("div", Object.assign({ className: cvaAlertContent({ layout }) }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: cvaAlertDetails() }, { children: [jsxRuntime.jsx("div", Object.assign({ className: cvaAlertContentBody() }, { children: body })), onClose && !inline ? (jsxRuntime.jsx("div", Object.assign({ className: cvaAlertCloseButtonContainer({ layout }) }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs("div", Object.assign({ className: cvaAlertRightAligned({ layout }) }, { children: [secondaryAction && (jsxRuntime.jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsxRuntime.jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsxRuntime.jsx("div", Object.assign({ className: cvaAlertCloseButtonContainer({ layout }) }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+};
 
 /**
  * The Badge component is used to display a notification badge with an optional number value.
@@ -476,6 +506,58 @@ const StyledText$2 = tailwindStyledComponents.tw.text `
   ${getBadgeModifierClass()}
 `;
 
+const cvaCard = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "border",
+    "flex-col",
+    "relative",
+    "bg-white",
+    "component-card-shadow",
+    "component-card-border",
+    "transition-shadow",
+    "ease-in-out",
+], {
+    variants: {
+        clickable: {
+            false: "",
+            true: "cursor-pointer hover:shadow-md",
+        },
+        fullHeight: {
+            false: "",
+            true: "h-full",
+        },
+    },
+    defaultVariants: {
+        clickable: false,
+        fullHeight: false,
+    },
+});
+const cvaCardBody = cssClassVarianceUtilities.cvaMerge(["flex-grow", "overflow-auto"]);
+const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-t-2", "border-neutral-200", "justify-end"], {
+    variants: {
+        border: {
+            default: "",
+            borderless: "border-t-0",
+        },
+    },
+    defaultVariants: {
+        border: "default",
+    },
+});
+const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between"]);
+const cvaCardHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-4", "items-center"]);
+const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-b-2", "border-neutral-200"], {
+    variants: {
+        border: {
+            default: "",
+            borderless: "border-b-0",
+        },
+    },
+    defaultVariants: {
+        border: "default",
+    },
+});
+
 const ROLE_CARD = "region";
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.
@@ -485,28 +567,9 @@ const ROLE_CARD = "region";
  * @returns {JSX.Element} Card component
  */
 const Card = (_a) => {
-    var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, overflow = "visible", gridArea } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId", "overflow", "gridArea"]);
-    return (jsxRuntime.jsx(StyledCard$2, Object.assign({}, rest, { "$fullHeight": fullHeight, "$overflow": overflow, onClick: onClick, className: className, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD, style: { gridArea } }, { children: children })));
-};
-const getOverflow$1 = () => ({ $overflow }) => {
-    if (!$overflow) {
-        return null;
-    }
-    const overflows = {
-        visible: tailwindStyledComponents.tws `overflow-visible`,
-        hidden: tailwindStyledComponents.tws `overflow-hidden`,
-        scroll: tailwindStyledComponents.tws `overflow-scroll`,
-        auto: tailwindStyledComponents.tws `overflow-auto`,
-    };
-    return overflows[$overflow];
-};
-const StyledCard$2 = tailwindStyledComponents.tw.div `
-  tu-card
-  ${p => (p.$fullHeight ? `h-full` : null)}
-
-  ${p => p.onClick && `tu-card--clickable`}
-  ${getOverflow$1()}
-`;
+    var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, gridArea } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId", "gridArea"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, rest, { onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD, style: { gridArea } }, { children: children })));
+};
 
 /**
  * The DensityContainer component applies gap and padding.
@@ -517,7 +580,7 @@ const StyledCard$2 = tailwindStyledComponents.tw.div `
  * @returns {JSX.Element} DensityContainer component
  */
 const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsxRuntime.jsx(StyledDensityContainer$1, Object.assign({ "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className }, { children: children })));
+    return (jsxRuntime.jsx(StyledDensityContainer, Object.assign({ "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className }, { children: children })));
 };
 const getDirection = () => ({ $direction }) => {
     $direction = $direction !== null && $direction !== void 0 ? $direction : "column";
@@ -549,7 +612,7 @@ const DensityFinder = ({ $density }) => {
             return densityAuto;
     }
 };
-const StyledDensityContainer$1 = tailwindStyledComponents.tw.div `
+const StyledDensityContainer = tailwindStyledComponents.tw.div `
 flex
 ${getDirection()}
 ${p => (p.$disableGap ? tailwindStyledComponents.tws `gap-0` : null)}
@@ -564,25 +627,9 @@ ${DensityFinder}
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", overflow = "auto", children, dataTestId, className, disableGap, }) => {
-    return (jsxRuntime.jsx(StyledDensityContainer, Object.assign({ "$overflow": overflow, density: density, dataTestId: dataTestId, className: className, disableGap: disableGap }, { children: children })));
-};
-const getOverflow = () => ({ $overflow }) => {
-    if (!$overflow) {
-        return null;
-    }
-    const overflows = {
-        visible: tailwindStyledComponents.tws `overflow-visible`,
-        hidden: tailwindStyledComponents.tws `overflow-hidden`,
-        scroll: tailwindStyledComponents.tws `overflow-scroll`,
-        auto: tailwindStyledComponents.tws `overflow-auto`,
-    };
-    return overflows[$overflow];
-};
-const StyledDensityContainer = tailwindStyledComponents.twx(DensityContainer) `
-  ${getOverflow()}
-  tu-card__body
-`;
+const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
+    return (jsxRuntime.jsx(DensityContainer, Object.assign({ density: density, dataTestId: dataTestId, className: cvaCardBody({ className }), disableGap: disableGap }, { children: children })));
+};
 
 /**
  * A simple footer intended to use with Cards and Modals.
@@ -593,12 +640,8 @@ const StyledDensityContainer = tailwindStyledComponents.twx(DensityContainer) `
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsxRuntime.jsx(Container$5, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
-};
-const Container$5 = tailwindStyledComponents.twx(DensityContainer) `
-  tu-card__footer-density-container
-  ${p => p.$hideSeparator && tailwindStyledComponents.tws `tu-card__footer-density-container--borderless`}
-`;
+    return (jsxRuntime.jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardFooterDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, direction: "row" }, { children: children })));
+};
 
 /**
  * The Heading is used for a heading of a section (h1,h2,h3,h4).
@@ -642,18 +685,37 @@ const StyledHeading = tailwindStyledComponents.tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsxRuntime.jsx(Root$5, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxRuntime.jsxs(HeadingContainer$1, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsxRuntime.jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
-};
-const Root$5 = tailwindStyledComponents.twx(DensityContainer) `
-  tu-card__header-density-container 
-  ${p => p.$hideSeparator && tailwindStyledComponents.tws `tu-card__header-density-container--borderless`}
-`;
-const Container$4 = tailwindStyledComponents.tw.div `
-  tu-card__header
-`;
-const HeadingContainer$1 = tailwindStyledComponents.tw.div `
-  tu-card__header-heading-container
-`;
+    return (jsxRuntime.jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsxRuntime.jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] })) })));
+};
+
+const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
+    "block",
+    "w-full",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "pb-3",
+    "mb-4",
+    "last:border-0",
+    "last:m-0",
+    "only:border-0",
+    "only:m-0",
+]);
+const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge(["block", "w-full", "cursor-pointer"]);
+const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-between"]);
+cssClassVarianceUtilities.cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
+const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapseIcon = cssClassVarianceUtilities.cvaMerge(["ease-in-out", "duration-200"], {
+    variants: {
+        expanded: {
+            false: "",
+            true: "rotate-180",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -669,31 +731,37 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsxRuntime.jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsxRuntime.jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] })) })), jsxRuntime.jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
-const Rotate = tailwindStyledComponents.twx(Icon) `
-  ${p => (p.$expanded ? tailwindStyledComponents.tws `tu-icon--animated-rotate-expanded` : null)}
-  tu-icon--animated-rotate
-`;
-const StyledCollapse = tailwindStyledComponents.tw.div `
-  tu-collapse
-`;
-const CollapseLabel = tailwindStyledComponents.tw.div `
-  tu-collapse__label
-`;
-const LabelContainer = tailwindStyledComponents.tw.div `
-  tu-collapse__label__container
-`;
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
-    return (jsxRuntime.jsx(AnimatedCollapsible, Object.assign({ id: id, style: { height: expanded ? height : "0" } }, { children: jsxRuntime.jsx(StyledCollapsible, Object.assign({ ref: ref }, { children: children })) })));
-};
-const AnimatedCollapsible = tailwindStyledComponents.tw.div `
-  tu-collapsible--animated
-`;
-const StyledCollapsible = tailwindStyledComponents.tw.div `
-  tu-collapsible
-`;
+    return (jsxRuntime.jsx("div", Object.assign({ className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" } }, { children: jsxRuntime.jsx("div", Object.assign({ className: cvaCollapse(), ref: ref }, { children: children })) })));
+};
+
+const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([
+    "py-1",
+    "px-2",
+    "border",
+    "border-dashed",
+    "border-neutral-600",
+    "rounded",
+    "cursor-pointer",
+    "inline",
+    "transition-all",
+    "ease-in-out",
+    "leading-7",
+    "break-words",
+], {
+    variants: {
+        animating: {
+            false: "",
+            true: "animate-copy",
+        },
+    },
+    defaultVariants: {
+        animating: false,
+    },
+});
 
 /**
  * The CopyableText component is used where the user should have easy access to copy information.
@@ -710,11 +778,8 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
         copyToClipboard(value);
         setAnimating(true);
     };
-    return (jsxRuntime.jsx(StyledCopyableText, Object.assign({ className: className, "data-testid": dataTestId, onClick: handleOnClick, onAnimationEnd: () => setAnimating(false), "$animating": animating, title: value }, { children: text })));
-};
-const StyledCopyableText = tailwindStyledComponents.tw.span `
-  tu-copyable-text
-  ${p => (p.$animating ? tailwindStyledComponents.tws `tu-copyable-text--animating` : null)}`;
+    return (jsxRuntime.jsx("span", Object.assign({ className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onClick: handleOnClick, onAnimationEnd: () => setAnimating(false), title: value }, { children: text })));
+};
 
 const localeLookup = {
     en: locale.enGB,
@@ -2057,6 +2122,30 @@ const Bar = tailwindStyledComponents.tw.rect `
   tu-value-bar__bar
 `;
 
+const cvaClickable = cssClassVarianceUtilities.cvaMerge([
+    "shadow-lg",
+    "rounded-lg",
+    "p-3",
+    "bg-neutral-50",
+    "transition-all",
+    "border-2",
+    "border-solid",
+    "border-neutral-100",
+    "cursor-pointer",
+    "hover:border-primary-500",
+    "hover:bg-primary-200",
+], {
+    variants: {
+        disabled: {
+            false: "",
+            true: "cursor-default hover:border-neutral-100 hover:bg-neutral-50",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+
 /**
  * The MinTopFullContentLayout component.
  *
@@ -2299,6 +2388,7 @@ exports.TitleNavContentLayout = TitleNavContentLayout;
 exports.Tooltip = Tooltip;
 exports.TwoColumnLayout = TwoColumnLayout;
 exports.ValueBar = ValueBar;
+exports.cvaClickable = cvaClickable;
 exports.docs = docs;
 exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getValueBarColorByValue = getValueBarColorByValue;

package/index.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
 import React__default, { useState, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, useReducer, memo } from 'react';
+import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
@@ -82,7 +83,7 @@ function __rest(s, e) {
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
-    return (jsx(Container$7, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
+    return (jsx(Container$4, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
 };
 const getSpinnerStyles = () => ({ $size }) => {
     switch ($size) {
@@ -112,7 +113,7 @@ const StyledSpinner$1 = tw.span `
   ${p => (p.$mode === "dark" ? tws `tu-spinner--dark` : null)}
   ${getSpinnerStyles()}
 `;
-const Container$7 = tw.div `
+const Container$4 = tw.div `
   tu-spinner--container
   ${getCenteringStyles()}
   
@@ -184,12 +185,12 @@ const StyledSpinner = twx(Spinner) `
 
 const IconButton = React.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, circular, loading, disabled } = _a, rest = __rest(_a, ["icon", "size", "square", "circular", "loading", "disabled"]);
-    return (jsx(StyledButton, Object.assign({ size: size, square: square, "$circular": circular, disabled: disabled || loading, ref: ref }, rest, { children: jsx(IconContainer$2, { children: loading ? jsx(Spinner, { size: size }) : icon }) })));
+    return (jsx(StyledButton, Object.assign({ size: size, square: square, "$circular": circular, disabled: disabled || loading, ref: ref }, rest, { children: jsx(IconContainer$1, { children: loading ? jsx(Spinner, { size: size }) : icon }) })));
 });
 const StyledButton = twx(Button) `
   ${p => (p.$circular ? tws `tu-button--rounded` : null)}
 `;
-const IconContainer$2 = tw.div `
+const IconContainer$1 = tw.div `
   tu-button__container
   ${p => (p.$size === "small" ? tws `tu-button__container--small` : null)}
 `;
@@ -222,12 +223,12 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     if (!IconComponent) {
         return null;
     }
-    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$6, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
+    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$5, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
 };
 const LoadingDot = tw.span `
   tu-loading-dot
 `;
-const Root$6 = tw.span `
+const Root$5 = tw.span `
   tu-icon
   ${({ $color }) => {
     switch ($color) {
@@ -346,6 +347,71 @@ const StyledText$3 = tw.text `
   ${getTextWeight()}
 `;
 
+const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
+    variants: {
+        color: {
+            danger: "bg-danger-100",
+            warning: "bg-warning-100",
+            success: "bg-success-100",
+            info: "bg-info-100",
+        },
+        layout: {
+            default: "items-start",
+            inline: "items-center",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+        color: "info",
+    },
+});
+const cvaAlertDetails = cvaMerge(["flex"]);
+const cvaAlertContentBody = cvaMerge(["grid", "gap-2", "flex-grow"]);
+const cvaAlertRightAligned = cvaMerge(["flex", "justify-end", "gap-2", "ml-2", "mt-4"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "mt-0 ml-auto items-center",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+const cvaAlertContent = cvaMerge(["grow"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "flex items-center w-full",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+const cvaAlertCloseButtonContainer = cvaMerge(["flex", "self-start", "w-min", "shrink-0"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "ml-4",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+const cvaAlertIconContainer = cvaMerge(["self-start", "mr-3", "shrink-0", "grid", "w-min"], {
+    variants: {
+        layout: {
+            default: "",
+            inline: "self-center",
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+
 /**
  * The Alert component should be used to inform the user of important information.
  *
@@ -353,7 +419,7 @@ const StyledText$3 = tw.text `
  * @returns {JSX.Element} Alert component
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline = false, }) => {
-    const ref = React.useRef();
+    const ref = React.useRef(null);
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
@@ -376,51 +442,15 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return "primary";
         }
     };
-    const body = inline ? (jsxs("div", { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsx(Description, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] })) : (jsxs(Fragment, { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsx(Description, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] }));
+    const body = inline ? (jsxs("div", { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsx(Text$1, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] })) : (jsxs(Fragment, { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && jsx(Text$1, Object.assign({ weight: !title ? "bold" : "normal" }, { children: children }))] }));
     React.useEffect(() => {
         if (autoScroll) {
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxs(Container$6, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
-};
-const CloseButtonContainer = tw.div `
-  ${p => (p.$inline ? tws `tu-alert__close-button-container--inline` : tws `tu-alert__close-button-container`)}
-`;
-const getBackgroundColor = () => ({ $color }) => {
-    const colors = {
-        danger: tws `tu-alert--danger`,
-        warning: tws `tu-alert--warning`,
-        success: tws `tu-alert--success`,
-        info: tws `tu-alert--info`,
-    };
-    return colors[$color];
-};
-const Container$6 = tw.div `
-  tu-alert
-  ${p => (p.$inline ? tws `tu-alert--inline` : null)}
-  ${getBackgroundColor()}
-`;
-const Content$1 = tw.div `
-  ${p => (p.$inline ? tws `tu-alert__content--inline` : tws `tu-alert__content`)}
-`;
-const ContentDetails = tw.div `
-  tu-alert__content-details
-`;
-const ContentBody = tw.div `
-  tu-alert__content-body
-`;
-const Description = twx(Text$1) `
-  ${p => (p.$hasTitle ? tws `tu-alert__description` : null)}
-`;
-const RightAligned = tw.div `
-  tu-alert__right-aligned
-  ${p => (p.$inline ? tws `tu-alert__right-aligned--inline` : null)}
-`;
-const IconContainer$1 = tw.div `
-  tu-alert__icon-container
-  ${p => (p.$inline ? tws `tu-alert__icon-container--inline` : null)}
-`;
+    const layout = inline ? "inline" : "default";
+    return (jsxs("div", Object.assign({ className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert" }, { children: [jsx("div", Object.assign({ className: cvaAlertIconContainer({ layout }) }, { children: getIconFromColor() })), jsxs("div", Object.assign({ className: cvaAlertContent({ layout }) }, { children: [jsxs("div", Object.assign({ className: cvaAlertDetails() }, { children: [jsx("div", Object.assign({ className: cvaAlertContentBody() }, { children: body })), onClose && !inline ? (jsx("div", Object.assign({ className: cvaAlertCloseButtonContainer({ layout }) }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })), (primaryAction || secondaryAction || onClose) && (jsxs("div", Object.assign({ className: cvaAlertRightAligned({ layout }) }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx("div", Object.assign({ className: cvaAlertCloseButtonContainer({ layout }) }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+};
 
 /**
  * The Badge component is used to display a notification badge with an optional number value.
@@ -449,6 +479,58 @@ const StyledText$2 = tw.text `
   ${getBadgeModifierClass()}
 `;
 
+const cvaCard = cvaMerge([
+    "flex",
+    "border",
+    "flex-col",
+    "relative",
+    "bg-white",
+    "component-card-shadow",
+    "component-card-border",
+    "transition-shadow",
+    "ease-in-out",
+], {
+    variants: {
+        clickable: {
+            false: "",
+            true: "cursor-pointer hover:shadow-md",
+        },
+        fullHeight: {
+            false: "",
+            true: "h-full",
+        },
+    },
+    defaultVariants: {
+        clickable: false,
+        fullHeight: false,
+    },
+});
+const cvaCardBody = cvaMerge(["flex-grow", "overflow-auto"]);
+const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-200", "justify-end"], {
+    variants: {
+        border: {
+            default: "",
+            borderless: "border-t-0",
+        },
+    },
+    defaultVariants: {
+        border: "default",
+    },
+});
+const cvaCardHeader = cvaMerge(["flex", "justify-between"]);
+const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
+const cvaCardHeaderDensityContainer = cvaMerge(["border-b-2", "border-neutral-200"], {
+    variants: {
+        border: {
+            default: "",
+            borderless: "border-b-0",
+        },
+    },
+    defaultVariants: {
+        border: "default",
+    },
+});
+
 const ROLE_CARD = "region";
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.
@@ -458,28 +540,9 @@ const ROLE_CARD = "region";
  * @returns {JSX.Element} Card component
  */
 const Card = (_a) => {
-    var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, overflow = "visible", gridArea } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId", "overflow", "gridArea"]);
-    return (jsx(StyledCard$2, Object.assign({}, rest, { "$fullHeight": fullHeight, "$overflow": overflow, onClick: onClick, className: className, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD, style: { gridArea } }, { children: children })));
-};
-const getOverflow$1 = () => ({ $overflow }) => {
-    if (!$overflow) {
-        return null;
-    }
-    const overflows = {
-        visible: tws `overflow-visible`,
-        hidden: tws `overflow-hidden`,
-        scroll: tws `overflow-scroll`,
-        auto: tws `overflow-auto`,
-    };
-    return overflows[$overflow];
-};
-const StyledCard$2 = tw.div `
-  tu-card
-  ${p => (p.$fullHeight ? `h-full` : null)}
-
-  ${p => p.onClick && `tu-card--clickable`}
-  ${getOverflow$1()}
-`;
+    var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, gridArea } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId", "gridArea"]);
+    return (jsx("div", Object.assign({}, rest, { onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD, style: { gridArea } }, { children: children })));
+};
 
 /**
  * The DensityContainer component applies gap and padding.
@@ -490,7 +553,7 @@ const StyledCard$2 = tw.div `
  * @returns {JSX.Element} DensityContainer component
  */
 const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsx(StyledDensityContainer$1, Object.assign({ "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className }, { children: children })));
+    return (jsx(StyledDensityContainer, Object.assign({ "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className }, { children: children })));
 };
 const getDirection = () => ({ $direction }) => {
     $direction = $direction !== null && $direction !== void 0 ? $direction : "column";
@@ -522,7 +585,7 @@ const DensityFinder = ({ $density }) => {
             return densityAuto;
     }
 };
-const StyledDensityContainer$1 = tw.div `
+const StyledDensityContainer = tw.div `
 flex
 ${getDirection()}
 ${p => (p.$disableGap ? tws `gap-0` : null)}
@@ -537,25 +600,9 @@ ${DensityFinder}
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", overflow = "auto", children, dataTestId, className, disableGap, }) => {
-    return (jsx(StyledDensityContainer, Object.assign({ "$overflow": overflow, density: density, dataTestId: dataTestId, className: className, disableGap: disableGap }, { children: children })));
-};
-const getOverflow = () => ({ $overflow }) => {
-    if (!$overflow) {
-        return null;
-    }
-    const overflows = {
-        visible: tws `overflow-visible`,
-        hidden: tws `overflow-hidden`,
-        scroll: tws `overflow-scroll`,
-        auto: tws `overflow-auto`,
-    };
-    return overflows[$overflow];
-};
-const StyledDensityContainer = twx(DensityContainer) `
-  ${getOverflow()}
-  tu-card__body
-`;
+const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
+    return (jsx(DensityContainer, Object.assign({ density: density, dataTestId: dataTestId, className: cvaCardBody({ className }), disableGap: disableGap }, { children: children })));
+};
 
 /**
  * A simple footer intended to use with Cards and Modals.
@@ -566,12 +613,8 @@ const StyledDensityContainer = twx(DensityContainer) `
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx(Container$5, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
-};
-const Container$5 = twx(DensityContainer) `
-  tu-card__footer-density-container
-  ${p => p.$hideSeparator && tws `tu-card__footer-density-container--borderless`}
-`;
+    return (jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardFooterDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, direction: "row" }, { children: children })));
+};
 
 /**
  * The Heading is used for a heading of a section (h1,h2,h3,h4).
@@ -615,18 +658,37 @@ const StyledHeading = tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(Root$5, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$4, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
-};
-const Root$5 = twx(DensityContainer) `
-  tu-card__header-density-container 
-  ${p => p.$hideSeparator && tws `tu-card__header-density-container--borderless`}
-`;
-const Container$4 = tw.div `
-  tu-card__header
-`;
-const HeadingContainer$1 = tw.div `
-  tu-card__header-heading-container
-`;
+    return (jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] })) })));
+};
+
+const cvaCollapse = cvaMerge([
+    "block",
+    "w-full",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "pb-3",
+    "mb-4",
+    "last:border-0",
+    "last:m-0",
+    "only:border-0",
+    "only:m-0",
+]);
+const cvaCollapseLabel = cvaMerge(["block", "w-full", "cursor-pointer"]);
+const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "justify-between"]);
+cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
+const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
+    variants: {
+        expanded: {
+            false: "",
+            true: "rotate-180",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -642,31 +704,37 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs(LabelContainer, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] })) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
-const Rotate = twx(Icon) `
-  ${p => (p.$expanded ? tws `tu-icon--animated-rotate-expanded` : null)}
-  tu-icon--animated-rotate
-`;
-const StyledCollapse = tw.div `
-  tu-collapse
-`;
-const CollapseLabel = tw.div `
-  tu-collapse__label
-`;
-const LabelContainer = tw.div `
-  tu-collapse__label__container
-`;
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
-    return (jsx(AnimatedCollapsible, Object.assign({ id: id, style: { height: expanded ? height : "0" } }, { children: jsx(StyledCollapsible, Object.assign({ ref: ref }, { children: children })) })));
-};
-const AnimatedCollapsible = tw.div `
-  tu-collapsible--animated
-`;
-const StyledCollapsible = tw.div `
-  tu-collapsible
-`;
+    return (jsx("div", Object.assign({ className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" } }, { children: jsx("div", Object.assign({ className: cvaCollapse(), ref: ref }, { children: children })) })));
+};
+
+const cvaCopyableText = cvaMerge([
+    "py-1",
+    "px-2",
+    "border",
+    "border-dashed",
+    "border-neutral-600",
+    "rounded",
+    "cursor-pointer",
+    "inline",
+    "transition-all",
+    "ease-in-out",
+    "leading-7",
+    "break-words",
+], {
+    variants: {
+        animating: {
+            false: "",
+            true: "animate-copy",
+        },
+    },
+    defaultVariants: {
+        animating: false,
+    },
+});
 
 /**
  * The CopyableText component is used where the user should have easy access to copy information.
@@ -683,11 +751,8 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
         copyToClipboard(value);
         setAnimating(true);
     };
-    return (jsx(StyledCopyableText, Object.assign({ className: className, "data-testid": dataTestId, onClick: handleOnClick, onAnimationEnd: () => setAnimating(false), "$animating": animating, title: value }, { children: text })));
-};
-const StyledCopyableText = tw.span `
-  tu-copyable-text
-  ${p => (p.$animating ? tws `tu-copyable-text--animating` : null)}`;
+    return (jsx("span", Object.assign({ className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onClick: handleOnClick, onAnimationEnd: () => setAnimating(false), title: value }, { children: text })));
+};
 
 const localeLookup = {
     en: enGB,
@@ -2030,6 +2095,30 @@ const Bar = tw.rect `
   tu-value-bar__bar
 `;
 
+const cvaClickable = cvaMerge([
+    "shadow-lg",
+    "rounded-lg",
+    "p-3",
+    "bg-neutral-50",
+    "transition-all",
+    "border-2",
+    "border-solid",
+    "border-neutral-100",
+    "cursor-pointer",
+    "hover:border-primary-500",
+    "hover:bg-primary-200",
+], {
+    variants: {
+        disabled: {
+            false: "",
+            true: "cursor-default hover:border-neutral-100 hover:bg-neutral-50",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+
 /**
  * The MinTopFullContentLayout component.
  *
@@ -2217,4 +2306,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, cvaClickable, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.108",
+  "version": "0.1.111",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.22.2",
+    "@trackunit/css-class-variance-utilities": "0.0.5",
     "@trackunit/css-core": "0.0.85",
     "@trackunit/tailwind-styled-components": "0.0.57",
     "@trackunit/ui-design-tokens": "0.0.69",

package/src/components/Alert/Alert.variants.d.ts

@@ -0,0 +1,18 @@
+export declare const cvaAlert: (props?: ({
+    color?: "danger" | "warning" | "success" | "info" | null | undefined;
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertDetails: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaAlertContentBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaAlertRightAligned: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertContent: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertCloseButtonContainer: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertIconContainer: (props?: ({
+    layout?: "default" | "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Card/Card.d.ts

@@ -1,16 +1,11 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 export declare const ROLE_CARD = "region";
-type Overflow = "visible" | "hidden" | "scroll" | "auto";
 export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDivElement> {
     /**
      * Whether the card should have full height or not.
      */
     fullHeight?: boolean;
-    /**
-     * Whether the card should overflow contents.
-     */
-    overflow?: Overflow;
     /**
      * The css grid area to place the card.
      *
@@ -41,5 +36,4 @@ export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDi
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
  */
-export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, overflow, gridArea, ...rest }: CardProps) => JSX.Element;
-export {};
+export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, gridArea, ...rest }: CardProps) => JSX.Element;

package/src/components/Card/Card.variants.d.ts

@@ -0,0 +1,13 @@
+export declare const cvaCard: (props?: ({
+    clickable?: boolean | null | undefined;
+    fullHeight?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCardBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCardFooterDensityContainer: (props?: ({
+    border?: "default" | "borderless" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCardHeaderDensityContainer: (props?: ({
+    border?: "default" | "borderless" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Card/CardBody.d.ts

@@ -1,12 +1,6 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
-type Overflow = "visible" | "hidden" | "scroll" | "auto" | "inherit";
 export interface CardBodyProps extends CommonProps {
-    /**
-     * Tells the body how to handle overflowing elements.
-     * Directly mapped to the overflow css property.
-     */
-    overflow?: Overflow;
     /**
      * Sets gap, padding and margin.
      */
@@ -28,5 +22,4 @@ export interface CardBodyProps extends CommonProps {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardBodyProps) => JSX.Element;
-export {};
+export declare const CardBody: ({ density, children, dataTestId, className, disableGap }: CardBodyProps) => JSX.Element;

package/src/components/Clickable/Clickable.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaClickable: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Collapse/Collapse.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const cvaCollapse: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapsible: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseAnimated: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseIcon: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/CopyableText/CopyableText.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaCopyableText: (props?: ({
+    animating?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./common";
 export * from "./components";
+export * from "./components/Clickable/Clickable.variants";
 export * from "./hooks";
 export * from "./layout";