@trackunit/react-components 0.1.250 → 0.1.251

package/index.cjs.js

@@ -485,68 +485,74 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
     "focus:ring",
     "focus:ring-inset",
     "focus:outline-none",
+    "focus:ring-primary-600",
     "disabled:cursor-not-allowed",
-    "text-sm",
     "font-medium",
     "align-middle",
+    "rounded-md",
 ], {
     variants: {
-        color: {
+        variant: {
             primary: [
+                "text-white",
                 "bg-primary-600",
+                "hover:bg-primary-700",
+                "active:bg-primary-800",
+                "disabled:bg-slate-400",
+                "disabled:text-slate-200",
+            ],
+            "primary-danger": [
                 "text-white",
-                "hover:bg-primary-800",
-                "active:bg-primary-700",
-                "focus:ring-primary-300",
-                "disabled:hover:bg-slate-400",
+                "bg-danger-600",
+                "hover:bg-danger-700",
+                "active:bg-danger-800",
                 "disabled:bg-slate-400",
                 "disabled:text-slate-200",
             ],
             secondary: [
-                "component-button-secondary-color",
-                "hover:bg-secondary-400",
-                "hover:text-secondary-800",
-                "active:text-secondary-700",
-                "active:bg-secondary-300",
-                "focus:ring-secondary-300",
-                "disabled:bg-secondary-200",
-                "disabled:hover:bg-secondary-200",
-                "disabled:text-secondary-400",
-            ],
-            danger: [
-                "bg-danger-600",
-                "text-white",
-                "hover:bg-danger-800",
-                "active:bg-danger-700",
-                "focus:ring-danger-300",
+                "bg-white",
+                "border",
+                "border-slate-300",
+                "text-slate-600",
+                "hover:bg-slate-100",
+                "hover:text-slate-700",
+                "active:bg-slate-200",
+                "active:text-slate-800",
                 "disabled:bg-slate-200",
-                "disabled:hover:bg-slate-200",
-                "disabled:text-slate-400",
-            ],
-            warning: [
-                "bg-warning-50",
-                "text-warning-600",
-                "hover:bg-warning-200",
-                "hover:text-warning-800",
-                "active:text-warning-700",
-                "active:bg-warning-100",
-                "focus:ring-warning-300",
-                "disabled:bg-warning-50",
-                "disabled:hover:bg-warning-50",
                 "disabled:text-slate-400",
             ],
-            tertiary: [
+            "secondary-danger": [
                 "bg-white",
                 "border",
-                "text-slate-600",
-                "active:bg-slate-100",
-                "active:text-slate-700",
-                "focus:ring-slate-300",
-                "hover:bg-slate-200",
-                "hover:text-slate-800",
                 "border-slate-300",
-                "disabled:bg-slate-200",
-                "disabled:hover:bg-slate-200",
+                "text-danger-600",
+                "hover:bg-danger-100",
+                "hover:text-danger-700",
+                "hover:border-danger-700",
+                "active:bg-danger-200",
+                "active:text-danger-800",
+                "active:border-danger-800",
+                "disabled:bg-slate-300",
+                "disabled:text-slate-400",
+            ],
+            ghost: [
+                "bg-transparent",
+                "text-primary-600",
+                "hover:bg-black/5",
+                "hover:text-primary-700",
+                "active:bg-black/10",
+                "active:text-primary-800",
+                "disabled:bg-transparent",
+                "disabled:text-slate-400",
+            ],
+            "ghost-neutral": [
+                "bg-transparent",
+                "text-slate-600",
+                "hover:bg-black/5",
+                "hover:text-slate-700",
+                "active:bg-black/10",
+                "active:text-slate-800",
+                "disabled:bg-transparent",
                 "disabled:text-slate-400",
             ],
         },
@@ -566,9 +572,17 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
              * So we need to add padding to the min-height calculation. Two times the vertical
              * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
              */
-            small: ["py-1", "px-2", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
-            medium: ["py-1.5", "px-3", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
-            large: ["py-2", "px-4", "min-h-[calc(var(--line-height-sm)+var(--spacing-4))]"],
+            small: ["px-2", "py-1.5", "gap-1", "h-7", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
+            medium: ["px-3", "py-1.5", "gap-2", "h-8", "text-sm", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
+            large: [
+                "px-4",
+                "py-2",
+                "h-10",
+                "gap-2",
+                "text-base",
+                "rounded-lg",
+                "min-h-[calc(var(--line-height-sm)+var(--spacing-4))]",
+            ],
         },
         rounded: {
             true: ["rounded-full"],
@@ -586,9 +600,9 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
             true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200", "hover:bg-slate-200", "text-slate-400"],
             false: [],
         },
-        variant: {
-            transparent: "border-none bg-transparent disabled:hover:bg-transparent",
-            filled: "",
+        loading: {
+            true: ["bg-transparent"],
+            false: [],
         },
     },
     compoundVariants: [
@@ -608,88 +622,105 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
             className: ["p-2"],
         },
         {
-            color: "primary",
-            variant: "transparent",
-            className: [
-                "text-primary-600",
-                "hover:text-primary-700",
-                "active:bg-primary-700",
-                "focus:ring-primary-300",
-                "hover:bg-primary-500/10",
-            ],
+            loading: true,
+            variant: "primary",
+            className: ['disabled:bg-primary-600'],
         },
         {
-            color: "secondary",
-            variant: "transparent",
-            className: [
-                "text-secondary-600",
-                "hover:text-secondary-800",
-                "active:text-secondary-700",
-                "active:bg-black/10",
-                "focus:ring-secondary-300",
-                "hover:bg-black/5",
-            ],
-        },
-        {
-            color: "warning",
-            variant: "transparent",
-            className: [
-                "text-warning-600",
-                "active:bg-warning-500/20",
-                "focus:ring-warning-300",
-                "hover:bg-warning-500/10",
-            ],
+            loading: true,
+            variant: "primary-danger",
+            className: ["disabled:bg-danger-600"],
         },
         {
-            color: "danger",
-            variant: "transparent",
-            className: ["text-danger-600", "active:bg-danger-600/10", "focus:ring-danger-300", "hover:bg-danger-600/10"],
+            loading: true,
+            variant: "secondary",
+            className: ["disabled:bg-white"],
         },
         {
-            color: "tertiary",
-            variant: "transparent",
-            className: ["text-slate-600", "active:bg-slate-200/20", "focus:ring-slate-300", "hover:bg-slate-600/10"],
-        },
-        {
-            disabled: true,
-            variant: "transparent",
-            className: ["cursor-not-allowed", "pointer-events-none", "hover:bg-transparent"],
+            loading: true,
+            variant: "secondary-danger",
+            className: ["disabled:bg-white"],
         },
     ],
     defaultVariants: {
-        color: "primary",
+        variant: "primary",
         size: "medium",
         rounded: false,
         fullWidth: false,
         square: false,
         disabled: false,
-        variant: "filled",
+    },
+});
+const cvaButtonSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["p-0", "h-auto"]);
+const cvaButtonSpinner = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        variant: {
+            primary: ["border-white/[0.32]", "border-b-white"],
+            "primary-danger": ["border-white/[0.32]", "border-b-white"],
+            secondary: ['h-3.5', 'w-3.5'],
+            "secondary-danger": ['h-3.5', 'w-3.5'],
+            ghost: [],
+            "ghost-neutral": [],
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});
+const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
+    variants: {
+        size: {
+            small: ["h-4"],
+            medium: ["h-4"],
+            large: ["h-5"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        size: {
+            small: ["p-1.5", "w-7", "h-7"],
+            medium: ["p-2", "w-8", "h-8"],
+            large: ["p-2.5", "w-10", "h-10"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
     },
 });
 
 /**
- * Buttons allow users to perform an action when triggered.
- 
+ * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
+ *
+ * ### When to use
+ * Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
+ *
+ * ### When not to use
+ * Do not use buttons as navigational elements. Instead, use [Links](https://www.notion.so/Links-49638788b6c042698b40b94a318361f1?pvs=21) when the desired action is to take the user to a new page.
+ *
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
 const Button = React__namespace.forwardRef((_a, ref) => {
-    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
+    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
     return React__namespace.createElement(renderAs, Object.assign({ ref,
         title,
         type,
         role,
         onClick,
-        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading ? jsxRuntime.jsx(Spinner, { size: "small", centering: "vertically" }) : null, prefix, children, suffix] }));
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading ? (jsxRuntime.jsx(Spinner, { size: "small", centering: "vertically", containerClassName: cvaButtonSpinnerContainer(), className: cvaButtonSpinner({ variant }) })) : null, prefix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
 });
 Button.displayName = "Button";
 
 /**
- * The IconButton is used for a button with an icon.
+ * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  */
 const IconButton = React__namespace.forwardRef((_a, ref) => {
-    var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled"]);
-    return (jsxRuntime.jsx(Button, Object.assign({ size: size, prefix: !loading ? icon : undefined, square: square, loading: loading, disabled: disabled || loading, ref: ref }, rest)));
+    var { icon, size = "medium", square = true, loading, disabled, className } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled", "className"]);
+    return (jsxRuntime.jsx(Button, Object.assign({ size: size, prefix: !loading ? icon : undefined, square: square, loading: loading, disabled: disabled || loading, ref: ref, className: cvaIconButton({ size: size, className }) }, rest)));
 });
 IconButton.displayName = "IconButton";
 
@@ -722,6 +753,16 @@ const cvaAlertContentContainer = cssClassVarianceUtilities.cvaMerge(["flex", "fl
 const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
 const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:block"]);
 
+const getSecondaryActionVariant = (color) => {
+    switch (color) {
+        case "danger":
+            return "secondary-danger";
+        case "warning":
+            return "ghost-neutral";
+        default:
+            return "ghost";
+    }
+};
 /**
  * The Alert component should be used to inform the user of important information.
  
@@ -747,9 +788,9 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getButtonColor = () => {
         switch (color) {
             case "danger":
-                return "danger";
+                return "primary-danger";
             case "warning":
-                return "warning";
+                return "secondary-danger";
             default:
                 return "primary";
         }
@@ -761,7 +802,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer(), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? jsxRuntime.jsx(Text, { weight: "bold", children: title }) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction.loading, children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction.loading, children: primaryAction.label })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer(), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? jsxRuntime.jsx(Text, { weight: "bold", children: title }) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "ghost-neutral", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { size: "small", variant: getSecondaryActionVariant(color), onClick: secondaryAction.onClick, loading: secondaryAction.loading, children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { size: "small", variant: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction.loading, children: primaryAction.label })) : null] })) : null] }));
 };
 
 const cvaBadge = cssClassVarianceUtilities.cvaMerge([
@@ -1004,7 +1045,7 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { 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 })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, 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" })) : null] })] }) }));
+        }), children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { 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 })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "ghost-neutral", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] })] }) }));
 };
 
 const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
@@ -1048,7 +1089,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
@@ -1277,7 +1318,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxRuntime.jsxs(Popover, { placement: placement, children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(Button, { color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Card, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
+    return (jsxRuntime.jsxs(Popover, { placement: placement, children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(Button, { variant: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Card, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
 };
 
 /**
@@ -1791,7 +1832,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "small",
     circular: true,
     square: true,
-    color: "tertiary",
+    variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
     return (jsxRuntime.jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs(Popover, Object.assign({}, popoverProps, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
@@ -1946,7 +1987,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })) : undefined, jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsxRuntime.jsx(Tooltip, { label: description, dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link ? (jsxRuntime.jsxs(reactRouterDom.Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: cvaPageHeaderLink(), children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsxRuntime.jsx(Tag, { dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, color: tagColor, children: tag })) : undefined, showLoading ? (jsxRuntime.jsx(Spinner, { dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined, centering: "vertically" })) : null, action] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, variant: "ghost-neutral", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })) : undefined, jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsxRuntime.jsx(Tooltip, { label: description, dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link ? (jsxRuntime.jsxs(reactRouterDom.Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: cvaPageHeaderLink(), children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsxRuntime.jsx(Tag, { dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, color: tagColor, children: tag })) : undefined, showLoading ? (jsxRuntime.jsx(Spinner, { dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined, centering: "vertically" })) : null, action] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -1995,9 +2036,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     if (loading) {
         return (jsxRuntime.jsx("div", { className: cvaPagination({ className }), children: jsxRuntime.jsx(SkeletonLines, { height: 16, width: 150 }) }));
     }
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? !canNextPage || false
-                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", variant: "ghost-neutral" })] }));
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -2192,8 +2233,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     });
                 }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, Object.assign({ iconButtonProps: {
                     circular: false,
-                    variant: "transparent",
-                    color: "secondary",
+                    variant: "ghost-neutral",
                 }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default["default"].Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React__default["default"].cloneElement(child, {
@@ -3075,7 +3115,11 @@ exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.WidgetBody = WidgetBody;
 exports.cvaButton = cvaButton;
+exports.cvaButtonPrefixSuffix = cvaButtonPrefixSuffix;
+exports.cvaButtonSpinner = cvaButtonSpinner;
+exports.cvaButtonSpinnerContainer = cvaButtonSpinnerContainer;
 exports.cvaClickable = cvaClickable;
+exports.cvaIconButton = cvaIconButton;
 exports.cvaIndicator = cvaIndicator;
 exports.cvaIndicatorIcon = cvaIndicatorIcon;
 exports.cvaIndicatorIconBackground = cvaIndicatorIconBackground;

package/index.esm.js

@@ -454,68 +454,74 @@ const cvaButton = cvaMerge([
     "focus:ring",
     "focus:ring-inset",
     "focus:outline-none",
+    "focus:ring-primary-600",
     "disabled:cursor-not-allowed",
-    "text-sm",
     "font-medium",
     "align-middle",
+    "rounded-md",
 ], {
     variants: {
-        color: {
+        variant: {
             primary: [
+                "text-white",
                 "bg-primary-600",
+                "hover:bg-primary-700",
+                "active:bg-primary-800",
+                "disabled:bg-slate-400",
+                "disabled:text-slate-200",
+            ],
+            "primary-danger": [
                 "text-white",
-                "hover:bg-primary-800",
-                "active:bg-primary-700",
-                "focus:ring-primary-300",
-                "disabled:hover:bg-slate-400",
+                "bg-danger-600",
+                "hover:bg-danger-700",
+                "active:bg-danger-800",
                 "disabled:bg-slate-400",
                 "disabled:text-slate-200",
             ],
             secondary: [
-                "component-button-secondary-color",
-                "hover:bg-secondary-400",
-                "hover:text-secondary-800",
-                "active:text-secondary-700",
-                "active:bg-secondary-300",
-                "focus:ring-secondary-300",
-                "disabled:bg-secondary-200",
-                "disabled:hover:bg-secondary-200",
-                "disabled:text-secondary-400",
-            ],
-            danger: [
-                "bg-danger-600",
-                "text-white",
-                "hover:bg-danger-800",
-                "active:bg-danger-700",
-                "focus:ring-danger-300",
+                "bg-white",
+                "border",
+                "border-slate-300",
+                "text-slate-600",
+                "hover:bg-slate-100",
+                "hover:text-slate-700",
+                "active:bg-slate-200",
+                "active:text-slate-800",
                 "disabled:bg-slate-200",
-                "disabled:hover:bg-slate-200",
-                "disabled:text-slate-400",
-            ],
-            warning: [
-                "bg-warning-50",
-                "text-warning-600",
-                "hover:bg-warning-200",
-                "hover:text-warning-800",
-                "active:text-warning-700",
-                "active:bg-warning-100",
-                "focus:ring-warning-300",
-                "disabled:bg-warning-50",
-                "disabled:hover:bg-warning-50",
                 "disabled:text-slate-400",
             ],
-            tertiary: [
+            "secondary-danger": [
                 "bg-white",
                 "border",
-                "text-slate-600",
-                "active:bg-slate-100",
-                "active:text-slate-700",
-                "focus:ring-slate-300",
-                "hover:bg-slate-200",
-                "hover:text-slate-800",
                 "border-slate-300",
-                "disabled:bg-slate-200",
-                "disabled:hover:bg-slate-200",
+                "text-danger-600",
+                "hover:bg-danger-100",
+                "hover:text-danger-700",
+                "hover:border-danger-700",
+                "active:bg-danger-200",
+                "active:text-danger-800",
+                "active:border-danger-800",
+                "disabled:bg-slate-300",
+                "disabled:text-slate-400",
+            ],
+            ghost: [
+                "bg-transparent",
+                "text-primary-600",
+                "hover:bg-black/5",
+                "hover:text-primary-700",
+                "active:bg-black/10",
+                "active:text-primary-800",
+                "disabled:bg-transparent",
+                "disabled:text-slate-400",
+            ],
+            "ghost-neutral": [
+                "bg-transparent",
+                "text-slate-600",
+                "hover:bg-black/5",
+                "hover:text-slate-700",
+                "active:bg-black/10",
+                "active:text-slate-800",
+                "disabled:bg-transparent",
                 "disabled:text-slate-400",
             ],
         },
@@ -535,9 +541,17 @@ const cvaButton = cvaMerge([
              * So we need to add padding to the min-height calculation. Two times the vertical
              * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
              */
-            small: ["py-1", "px-2", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
-            medium: ["py-1.5", "px-3", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
-            large: ["py-2", "px-4", "min-h-[calc(var(--line-height-sm)+var(--spacing-4))]"],
+            small: ["px-2", "py-1.5", "gap-1", "h-7", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
+            medium: ["px-3", "py-1.5", "gap-2", "h-8", "text-sm", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
+            large: [
+                "px-4",
+                "py-2",
+                "h-10",
+                "gap-2",
+                "text-base",
+                "rounded-lg",
+                "min-h-[calc(var(--line-height-sm)+var(--spacing-4))]",
+            ],
         },
         rounded: {
             true: ["rounded-full"],
@@ -555,9 +569,9 @@ const cvaButton = cvaMerge([
             true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200", "hover:bg-slate-200", "text-slate-400"],
             false: [],
         },
-        variant: {
-            transparent: "border-none bg-transparent disabled:hover:bg-transparent",
-            filled: "",
+        loading: {
+            true: ["bg-transparent"],
+            false: [],
         },
     },
     compoundVariants: [
@@ -577,88 +591,105 @@ const cvaButton = cvaMerge([
             className: ["p-2"],
         },
         {
-            color: "primary",
-            variant: "transparent",
-            className: [
-                "text-primary-600",
-                "hover:text-primary-700",
-                "active:bg-primary-700",
-                "focus:ring-primary-300",
-                "hover:bg-primary-500/10",
-            ],
+            loading: true,
+            variant: "primary",
+            className: ['disabled:bg-primary-600'],
         },
         {
-            color: "secondary",
-            variant: "transparent",
-            className: [
-                "text-secondary-600",
-                "hover:text-secondary-800",
-                "active:text-secondary-700",
-                "active:bg-black/10",
-                "focus:ring-secondary-300",
-                "hover:bg-black/5",
-            ],
-        },
-        {
-            color: "warning",
-            variant: "transparent",
-            className: [
-                "text-warning-600",
-                "active:bg-warning-500/20",
-                "focus:ring-warning-300",
-                "hover:bg-warning-500/10",
-            ],
+            loading: true,
+            variant: "primary-danger",
+            className: ["disabled:bg-danger-600"],
         },
         {
-            color: "danger",
-            variant: "transparent",
-            className: ["text-danger-600", "active:bg-danger-600/10", "focus:ring-danger-300", "hover:bg-danger-600/10"],
+            loading: true,
+            variant: "secondary",
+            className: ["disabled:bg-white"],
         },
         {
-            color: "tertiary",
-            variant: "transparent",
-            className: ["text-slate-600", "active:bg-slate-200/20", "focus:ring-slate-300", "hover:bg-slate-600/10"],
-        },
-        {
-            disabled: true,
-            variant: "transparent",
-            className: ["cursor-not-allowed", "pointer-events-none", "hover:bg-transparent"],
+            loading: true,
+            variant: "secondary-danger",
+            className: ["disabled:bg-white"],
         },
     ],
     defaultVariants: {
-        color: "primary",
+        variant: "primary",
         size: "medium",
         rounded: false,
         fullWidth: false,
         square: false,
         disabled: false,
-        variant: "filled",
+    },
+});
+const cvaButtonSpinnerContainer = cvaMerge(["p-0", "h-auto"]);
+const cvaButtonSpinner = cvaMerge([], {
+    variants: {
+        variant: {
+            primary: ["border-white/[0.32]", "border-b-white"],
+            "primary-danger": ["border-white/[0.32]", "border-b-white"],
+            secondary: ['h-3.5', 'w-3.5'],
+            "secondary-danger": ['h-3.5', 'w-3.5'],
+            ghost: [],
+            "ghost-neutral": [],
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});
+const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
+    variants: {
+        size: {
+            small: ["h-4"],
+            medium: ["h-4"],
+            large: ["h-5"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const cvaIconButton = cvaMerge([], {
+    variants: {
+        size: {
+            small: ["p-1.5", "w-7", "h-7"],
+            medium: ["p-2", "w-8", "h-8"],
+            large: ["p-2.5", "w-10", "h-10"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
     },
 });
 
 /**
- * Buttons allow users to perform an action when triggered.
- 
+ * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
+ *
+ * ### When to use
+ * Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
+ *
+ * ### When not to use
+ * Do not use buttons as navigational elements. Instead, use [Links](https://www.notion.so/Links-49638788b6c042698b40b94a318361f1?pvs=21) when the desired action is to take the user to a new page.
+ *
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
 const Button = React.forwardRef((_a, ref) => {
-    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
+    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
     return React.createElement(renderAs, Object.assign({ ref,
         title,
         type,
         role,
         onClick,
-        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxs(Fragment, { children: [loading ? jsx(Spinner, { size: "small", centering: "vertically" }) : null, prefix, children, suffix] }));
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxs(Fragment, { children: [loading ? (jsx(Spinner, { size: "small", centering: "vertically", containerClassName: cvaButtonSpinnerContainer(), className: cvaButtonSpinner({ variant }) })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
 });
 Button.displayName = "Button";
 
 /**
- * The IconButton is used for a button with an icon.
+ * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  */
 const IconButton = React.forwardRef((_a, ref) => {
-    var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled"]);
-    return (jsx(Button, Object.assign({ size: size, prefix: !loading ? icon : undefined, square: square, loading: loading, disabled: disabled || loading, ref: ref }, rest)));
+    var { icon, size = "medium", square = true, loading, disabled, className } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled", "className"]);
+    return (jsx(Button, Object.assign({ size: size, prefix: !loading ? icon : undefined, square: square, loading: loading, disabled: disabled || loading, ref: ref, className: cvaIconButton({ size: size, className }) }, rest)));
 });
 IconButton.displayName = "IconButton";
 
@@ -691,6 +722,16 @@ const cvaAlertContentContainer = cvaMerge(["flex", "flex-row", "h-full", "gap-2"
 const cvaAlertCloseButtonContainer = cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
 const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:block"]);
 
+const getSecondaryActionVariant = (color) => {
+    switch (color) {
+        case "danger":
+            return "secondary-danger";
+        case "warning":
+            return "ghost-neutral";
+        default:
+            return "ghost";
+    }
+};
 /**
  * The Alert component should be used to inform the user of important information.
  
@@ -716,9 +757,9 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getButtonColor = () => {
         switch (color) {
             case "danger":
-                return "danger";
+                return "primary-danger";
             case "warning":
-                return "warning";
+                return "secondary-danger";
             default:
                 return "primary";
         }
@@ -730,7 +771,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? jsx(Text, { weight: "bold", children: title }) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction.loading, children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction.loading, children: primaryAction.label })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? jsx(Text, { weight: "bold", children: title }) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { size: "small", variant: "ghost-neutral", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { size: "small", variant: getSecondaryActionVariant(color), onClick: secondaryAction.onClick, loading: secondaryAction.loading, children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { size: "small", variant: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction.loading, children: primaryAction.label })) : null] })) : null] }));
 };
 
 const cvaBadge = cvaMerge([
@@ -973,7 +1014,7 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { 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 })) : null, children] }), jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] })] }) }));
+        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { 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 })) : null, children] }), jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "ghost-neutral", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] })] }) }));
 };
 
 const cvaCollapse = cvaMerge([
@@ -1017,7 +1058,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
@@ -1246,7 +1287,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button, { color: color, size: size, className: className, prefix: jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
+    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button, { variant: color, size: size, className: className, prefix: jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
 };
 
 /**
@@ -1760,7 +1801,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "small",
     circular: true,
     square: true,
-    color: "tertiary",
+    variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
     return (jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxs(Popover, Object.assign({}, popoverProps, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
@@ -1915,7 +1956,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { label: description, dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link ? (jsxs(Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: cvaPageHeaderLink(), children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, color: tagColor, children: tag })) : undefined, showLoading ? (jsx(Spinner, { dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined, centering: "vertically" })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(IconButton, { to: backTo, renderAs: Link, variant: "ghost-neutral", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { label: description, dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link ? (jsxs(Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: cvaPageHeaderLink(), children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, color: tagColor, children: tag })) : undefined, showLoading ? (jsx(Spinner, { dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined, centering: "vertically" })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -1964,9 +2005,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     if (loading) {
         return (jsx("div", { className: cvaPagination({ className }), children: jsx(SkeletonLines, { height: 16, width: 150 }) }));
     }
-    return (jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? !canNextPage || false
-                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", variant: "ghost-neutral" })] }));
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -2161,8 +2202,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     });
                 }) }), overflowItemCount > 0 ? (jsx(MoreMenu, Object.assign({ iconButtonProps: {
                     circular: false,
-                    variant: "transparent",
-                    color: "secondary",
+                    variant: "ghost-neutral",
                 }, popoverProps: { placement: "bottom-end" } }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId ? `${dataTestId}-menu-list` : undefined, children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
                             ? React__default.cloneElement(child, {
@@ -2993,4 +3033,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaClickable, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

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

package/src/components/DayPicker/DayPickerPopover.d.ts

@@ -2,12 +2,12 @@
 import { Matcher } from "react-day-picker";
 import { CommonProps, Size } from "../../common/CommonProps";
 import { PopoverPlacement } from "../Popover";
-import { ButtonColor } from "../buttons";
+import { ButtonVariant } from "../buttons";
 export interface DayPickerPopoverProps extends CommonProps {
     disabledDays?: Matcher | Matcher[] | undefined;
     onDaySelect: (day: Date) => void;
     selectedDay?: Date;
-    color?: ButtonColor;
+    color?: ButtonVariant;
     size?: Size;
     placement?: PopoverPlacement;
     buttonContent: JSX.Element;

package/src/components/buttons/Button/Button.d.ts

@@ -36,8 +36,14 @@ export interface ButtonProps extends ButtonCommonProps {
     name?: string;
 }
 /**
- * Buttons allow users to perform an action when triggered.
- 
+ * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
+ *
+ * ### When to use
+ * Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
+ *
+ * ### When not to use
+ * Do not use buttons as navigational elements. Instead, use [Links](https://www.notion.so/Links-49638788b6c042698b40b94a318361f1?pvs=21) when the desired action is to take the user to a new page.
+ *
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -13,11 +13,11 @@ export interface IconButtonProps extends ButtonCommonProps {
      */
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /**
-     * The size of the button. Defaults to "small".
+     * The size of the button. Defaults to "medium".
      */
     size?: Size;
 }
 /**
- * The IconButton is used for a button with an icon.
+ * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  */
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/src/components/buttons/shared/Button.variants.d.ts

@@ -1,9 +1,19 @@
 export declare const cvaButton: (props?: ({
-    color?: "primary" | "secondary" | "danger" | "warning" | "tertiary" | null | undefined;
+    variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     rounded?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
     square?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-    variant?: "transparent" | "filled" | null | undefined;
+    loading?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaButtonSpinnerContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaButtonSpinner: (props?: ({
+    variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaButtonPrefixSuffix: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaIconButton: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { GeneralColors } from "@trackunit/ui-design-tokens";
 import { CommonProps, Size } from "../../../common/CommonProps";
-export type ButtonVariant = "filled" | "transparent";
-export type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "warning" | "danger"> | "tertiary";
+export type ButtonVariant = Extract<GeneralColors, "primary" | "secondary"> | "primary-danger" | "secondary-danger" | "ghost" | "ghost-neutral";
 export type ButtonType = "button" | "submit";
 export interface ButtonCommonProps extends CommonProps {
     /**
@@ -30,11 +29,7 @@ export interface ButtonCommonProps extends CommonProps {
      */
     square?: boolean;
     /**
-     * The button's variant. Values are filled, transparent, plain.
-     */
-    color?: ButtonColor;
-    /**
-     * The variant of the button.
+     * The button's variant. Values are primary, secondary, primary-danger, secondary-danger, ghost and ghost-neutral.
      */
     variant?: ButtonVariant;
     /**