@trackunit/react-components 0.1.168 → 0.1.171

package/index.cjs.js

@@ -486,7 +486,7 @@ const StarButton = ({ starred, onClick }) => {
     return (jsxRuntime.jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsxRuntime.jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
 };
 
-const cvaText = cssClassVarianceUtilities.cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
+const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
             left: "text-left",
@@ -524,11 +524,17 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["m-0", "relative", "text-sm"
             medium: "text-sm",
             large: "text-base",
         },
-        color: {
-            default: "text-black",
-            subtleInverted: "text-neutral-300",
-            subtle: "text-neutral-600",
-            inverted: "text-white",
+        inverted: {
+            true: "text-white",
+            false: "",
+        },
+        subtle: {
+            true: "opacity-70",
+            false: "",
+        },
+        disabled: {
+            true: "opacity-50",
+            false: "",
         },
     },
 });
@@ -544,9 +550,19 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["m-0", "relative", "text-sm"
  * @returns {JSX.Element} Text component
  */
 const Text = (_a) => {
-    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
-    const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return React__namespace.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "disabled", "className", "dataTestId"]);
+    return React__namespace.createElement(type, Object.assign({ className: cvaText({
+            inverted,
+            uppercase,
+            align,
+            italic: italicize,
+            size,
+            underline,
+            weight,
+            subtle,
+            disabled,
+            className,
+        }), "data-testid": dataTestId, children }, rest));
 };
 
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
@@ -727,16 +743,23 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardBody = cssClassVarianceUtilities.cvaMerge(["flex-grow", "overflow-auto"]);
-const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-t-2", "border-neutral-200", "justify-end"], {
+const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
             borderless: "border-t-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
 const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between"]);
@@ -747,12 +770,20 @@ const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["borde
             default: "",
             borderless: "border-b-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
-const cvaCardDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"], {
+const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -792,18 +823,6 @@ const Card = (_a) => {
     return (jsxRuntime.jsx("div", Object.assign({ onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD }, rest, { children: children })));
 };
 
-/**
- * The DensityContainer component applies gap and padding.
- * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
- *
- * @summary For applying auto padding and gap to a Card or Modal or whatever.
- * @param {ContainerProps} props - The props for the DensityContainer component
- * @returns {JSX.Element} DensityContainer component
- */
-const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardDensityContainer({ className, disableGap, density, direction }), "data-testid": dataTestId, children: children }));
-};
-
 /**
  * The CardBody component should be used to inform the user of important information.
  *
@@ -813,7 +832,7 @@ const DensityContainer = ({ children, className, dataTestId, density, disableGap
  * @returns {JSX.Element} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsxRuntime.jsx(DensityContainer, { density: density, dataTestId: dataTestId, className: cvaCardBody({ className }), disableGap: disableGap, children: children }));
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
 };
 
 /**
@@ -825,7 +844,11 @@ const CardBody = ({ density = "auto", children, dataTestId, className, disableGa
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsxRuntime.jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardFooterDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, direction: "row", children: children }));
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardFooterDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: children }));
 };
 
 const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -883,7 +906,11 @@ const Heading = (_a) => {
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsxRuntime.jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { className: extraClassName, children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsxRuntime.jsx(Heading, { 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: "XMark", size: "small" }), className: "!h-min" }))] }) }));
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { className: extraClassName, children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsxRuntime.jsx(Heading, { 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: "XMark", size: "small" }), className: "!h-min" }))] }) }));
 };
 
 function useMountedState() {
@@ -39211,7 +39238,6 @@ exports.CopyableText = CopyableText;
 exports.DayPicker = DayPicker;
 exports.DayPickerPopover = DayPickerPopover;
 exports.DayRangePicker = DayRangePicker;
-exports.DensityContainer = DensityContainer;
 exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.ExternalLink = ExternalLink;

package/index.esm.js

@@ -457,7 +457,7 @@ const StarButton = ({ starred, onClick }) => {
     return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
 };
 
-const cvaText = cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
+const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
             left: "text-left",
@@ -495,11 +495,17 @@ const cvaText = cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
             medium: "text-sm",
             large: "text-base",
         },
-        color: {
-            default: "text-black",
-            subtleInverted: "text-neutral-300",
-            subtle: "text-neutral-600",
-            inverted: "text-white",
+        inverted: {
+            true: "text-white",
+            false: "",
+        },
+        subtle: {
+            true: "opacity-70",
+            false: "",
+        },
+        disabled: {
+            true: "opacity-50",
+            false: "",
         },
     },
 });
@@ -515,9 +521,19 @@ const cvaText = cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
  * @returns {JSX.Element} Text component
  */
 const Text = (_a) => {
-    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
-    const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return React.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "disabled", "className", "dataTestId"]);
+    return React.createElement(type, Object.assign({ className: cvaText({
+            inverted,
+            uppercase,
+            align,
+            italic: italicize,
+            size,
+            underline,
+            weight,
+            subtle,
+            disabled,
+            className,
+        }), "data-testid": dataTestId, children }, rest));
 };
 
 const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
@@ -698,16 +714,23 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardBody = cvaMerge(["flex-grow", "overflow-auto"]);
-const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-200", "justify-end"], {
+const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
             borderless: "border-t-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
 const cvaCardHeader = cvaMerge(["flex", "justify-between"]);
@@ -718,12 +741,20 @@ const cvaCardHeaderDensityContainer = cvaMerge(["border-b-2", "border-neutral-20
             default: "",
             borderless: "border-b-0",
         },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
     },
     defaultVariants: {
         border: "default",
+        density: "auto",
     },
 });
-const cvaCardDensityContainer = cvaMerge(["flex"], {
+const cvaCardBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -763,18 +794,6 @@ const Card = (_a) => {
     return (jsx("div", Object.assign({ onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD }, rest, { children: children })));
 };
 
-/**
- * The DensityContainer component applies gap and padding.
- * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
- *
- * @summary For applying auto padding and gap to a Card or Modal or whatever.
- * @param {ContainerProps} props - The props for the DensityContainer component
- * @returns {JSX.Element} DensityContainer component
- */
-const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsx("div", { className: cvaCardDensityContainer({ className, disableGap, density, direction }), "data-testid": dataTestId, children: children }));
-};
-
 /**
  * The CardBody component should be used to inform the user of important information.
  *
@@ -784,7 +803,7 @@ const DensityContainer = ({ children, className, dataTestId, density, disableGap
  * @returns {JSX.Element} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsx(DensityContainer, { density: density, dataTestId: dataTestId, className: cvaCardBody({ className }), disableGap: disableGap, children: children }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
 };
 
 /**
@@ -796,7 +815,11 @@ const CardBody = ({ density = "auto", children, dataTestId, className, disableGa
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardFooterDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, direction: "row", children: children }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaCardFooterDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: children }));
 };
 
 const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -854,7 +877,11 @@ const Heading = (_a) => {
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsx(Heading, { 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: "XMark", size: "small" }), className: "!h-min" }))] }) }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
+            density,
+            border: hideSeparator ? "borderless" : "default",
+            className,
+        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsx(Heading, { 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: "XMark", size: "small" }), className: "!h-min" }))] }) }));
 };
 
 function useMountedState() {
@@ -39170,4 +39197,4 @@ const useVisibilityChange = ({ onChange, targetState }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.168",
+  "version": "0.1.171",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -2,16 +2,17 @@ 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;
+    density?: "none" | "compact" | "comfortable" | "spacious" | "auto" | 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;
+    density?: "none" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardDensityContainer: (props?: ({
+export declare const cvaCardBodyDensityContainer: (props?: ({
     disableGap?: boolean | null | undefined;
     direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
     density?: "none" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;

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

@@ -2,4 +2,3 @@ export * from "./Card";
 export * from "./CardBody";
 export * from "./CardFooter";
 export * from "./CardHeader";
-export * from "./DensityContainer";

package/src/components/Text/Text.d.ts

@@ -44,6 +44,10 @@ export interface TextProps extends CommonProps {
      * Whether text is underlined or not.
      */
     underline?: boolean;
+    /**
+     * Whether text is disabled or not.
+     */
+    disabled?: boolean;
 }
 /**
  *  The Text component is used to apply Trackunit default typography styles to text.
@@ -55,4 +59,4 @@ export interface TextProps extends CommonProps {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, ...rest }: TextProps) => JSX.Element;
+export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, disabled, className, dataTestId, ...rest }: TextProps) => JSX.Element;

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

@@ -5,5 +5,7 @@ export declare const cvaText: (props?: ({
     underline?: boolean | null | undefined;
     weight?: "normal" | "bold" | "thick" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
-    color?: "default" | "subtleInverted" | "subtle" | "inverted" | null | undefined;
+    inverted?: boolean | null | undefined;
+    subtle?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1,30 +0,0 @@
-import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
-interface ContainerProps extends CommonProps {
-    /**
-     * The density of the card components.
-     * "compact" = 12px gap and padding.
-     * "comfortable" = 16px gap and padding.
-     * "spacious" = 16px gap, 26px padding.
-     */
-    density?: Density;
-    /**
-     * Set gap to be 0px (not preferable)
-     */
-    disableGap?: boolean;
-    /**
-     * The flex direction of the Card. Defaults to "column".
-     */
-    direction?: "row" | "row-reverse" | "column" | "column-reverse";
-    children?: React.ReactNode;
-}
-/**
- * The DensityContainer component applies gap and padding.
- * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
- *
- * @summary For applying auto padding and gap to a Card or Modal or whatever.
- * @param {ContainerProps} props - The props for the DensityContainer component
- * @returns {JSX.Element} DensityContainer component
- */
-export declare const DensityContainer: ({ children, className, dataTestId, density, disableGap, direction, }: ContainerProps) => JSX.Element;
-export {};