@trackunit/react-components 0.1.174 → 0.1.176

package/index.esm.js

@@ -36,6 +36,43 @@ const useContainerProps = ({ className, dataTestId }) => {
     return containerProps;
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
     variants: {
         color: {
@@ -127,7 +164,7 @@ const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); /
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
  * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
- *
+ 
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
@@ -144,42 +181,88 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsx("use", { href: href[correctIconType] }) }) }));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest$1(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
+const cvaTag = cvaMerge([
+    "inline-flex",
+    "justify-center",
+    "items-center",
+    "rounded-full",
+    "py-1",
+    "px-2",
+    "text-center",
+    "whitespace-nowrap",
+    "h-min",
+    "min-w-[1.5rem]",
+    "font-medium",
+    "truncate",
+    "max-w-full",
+    "w-min",
+    "text-xs",
+], {
+    variants: {
+        size: {
+            small: "px-2 py-px",
+            medium: "",
+        },
+        layout: {
+            withIcon: "gap-2 pr-1",
+            default: "",
+        },
+        color: {
+            primary: "bg-primary-100 text-primary-700",
+            secondary: "bg-secondary-100 text-secondary-700",
+            accent: "bg-accent-100 text-accent-700",
+            neutral: "bg-neutral-100 text-neutral-700",
+            black: "bg-neutral-100 text-neutral-700",
+            white: "bg-white-100 text-white-700",
+            info: "bg-info-100 text-info-700",
+            success: "bg-success-100 text-success-700",
+            warning: "bg-warning-100 text-warning-700",
+            danger: "bg-danger-100 text-danger-700",
+            good: "bg-good-100 text-good-700",
+            low: "bg-low-100 text-low-700",
+            critical: "bg-critical-100 text-critical-700",
+            working: "bg-working-100 text-working-700",
+            stopped: "bg-stopped-100 text-stopped-700",
+            idle: "bg-idle-100 text-idle-700",
+            unknown: "bg-unknown-100 text-unknown-700",
+            moving: "bg-neutral-100 text-neutral-700",
+            active: "bg-neutral-100 text-neutral-700",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        layout: "default",
+        color: "primary",
+    },
+});
+const cvaTagIconContainer = cvaMerge(["inline-flex", "self-center"]);
+const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70"]);
+
+/**
+ *  The tag component is used to categorize elements in the ui.
+ *
+ *  This could be to tell the state of an asset, or label a page as Beta.
+ *
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
+ 
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+const Tag = React.forwardRef((_a, ref) => {
+    var { className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false } = _a; __rest$1(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "disabled"]);
+    return (jsxs("span", { className: cvaTag({ className, size, color, layout: Boolean(onClose) ? "withIcon" : "default" }), "data-testid": dataTestId && `${dataTestId}-tag`, ref: ref, children: [children, Boolean(onClose) && !disabled && (
+            // a fix for multiselect deselecting tags working together with fade out animation
+            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
+});
+
+/**
+ * A component used to display the package name and version in the Storybook docs.
+ */
+const PackageNameStoryComponent = ({ packageJSON }) => {
+    return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
+};
 
 const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
@@ -240,7 +323,7 @@ const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-norm
  *  ### When to use
  *
  *  Use Text when you want to show a text section, use Heading if you want to show a heading.
- *
+ 
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
@@ -309,7 +392,7 @@ const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"],
  * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
  *
  * Use when retrieving or refreshing small data amounts, such as status.
- *
+ 
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
@@ -507,7 +590,7 @@ const cvaIconButtonContainer = cvaMerge(["w-5", "h-5", "flex", "justify-center",
 
 /**
  * Buttons allow users to perform an action when triggered.
- *
+ 
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
@@ -521,6 +604,9 @@ const Button$1 = React.forwardRef((_a, ref) => {
         tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId, children: (jsxs(Fragment, { children: [loading && jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })) }, rest));
 });
 
+/**
+ * The IconButton is used for a button with an icon.
+ */
 const IconButton = React.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest$1(_a, ["icon", "size", "square", "loading", "disabled"]);
     return (jsx(Button$1, Object.assign({ size: size, square: square, disabled: disabled || loading, ref: ref }, rest, { children: jsx("div", { className: cvaIconButtonContainer({ size }), children: loading ? jsx(Spinner, { size: size }) : icon }) })));
@@ -528,7 +614,7 @@ const IconButton = React.forwardRef((_a, ref) => {
 
 /**
  * The StarButton component is used for favorite actions or similar.
- *
+ 
  * @param {StarButtonProps} props - The props for the StarButton component
  * @returns {JSX.Element} StarButton component
  */
@@ -603,7 +689,7 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "mr-3", "shrink-0", "grid"
 
 /**
  * The Alert component should be used to inform the user of important information.
- *
+ 
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
@@ -675,7 +761,7 @@ const cvaBadge = cvaMerge([
 
 /**
  * The Badge component is used to display a notification badge with an optional number value.
- *
+ 
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
@@ -733,7 +819,7 @@ const cvaCardFooterDensityContainer = cvaMerge(["flex border-t-2", "border-neutr
         density: "auto",
     },
 });
-const cvaCardHeader = cvaMerge(["flex", "justify-between"]);
+const cvaCardHeader = cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
 const cvaCardHeaderDensityContainer = cvaMerge(["flex border-b-2", "border-neutral-200"], {
     variants: {
@@ -785,7 +871,7 @@ const ROLE_CARD = "region";
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.
  * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
- *
+ 
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
  */
@@ -810,7 +896,7 @@ const CardBody = ({ density = "auto", children, dataTestId, className, disableGa
  * A simple footer intended to use with Cards and Modals.
  * Currently only intended to contain Buttons.
  * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
- *
+ 
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {JSX.Element} CardFooter component
  */
@@ -855,7 +941,7 @@ const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
 
 /**
  * The Heading is used for a heading of a section (h1,h2,h3,h4).
- *
+ 
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
@@ -872,7 +958,7 @@ const Heading = (_a) => {
 
 /**
  * Header for Cards and Modals.
- *
+ 
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
@@ -1208,7 +1294,7 @@ const cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
 
 /**
  * The Collapse component is used to condense non-important information.
- *
+ 
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
@@ -1254,7 +1340,7 @@ const cvaCopyableText = cvaMerge([
 
 /**
  * The CopyableText component is used where the user should have easy access to copy information.
- *
+ 
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component
  */
@@ -14802,7 +14888,7 @@ const useLocale = (language) => {
 
 /**
  * The DayPicker component is used when the user needs to select a date.
- *
+ 
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {JSX.Element} DayPicker component
  */
@@ -18790,7 +18876,7 @@ const usePopoverContext = () => {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
- *
+ 
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */
@@ -18821,7 +18907,7 @@ const PopoverContent = React__default.forwardRef(function PopoverContent(_a, pro
 
 /**
  * The PopoverTitle component.
- *
+ 
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {JSX.Element} PopoverTitle component
  */
@@ -18845,7 +18931,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
 
 /**
  * The DayPickerPopover component returns a button which when clicked shows the daypicker.
- *
+ 
  * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
  * @returns {JSX.Element} DayPickerPopover component
  */
@@ -18855,7 +18941,7 @@ const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, on
 
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
- *
+ 
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {JSX.Element} DayRangePicker component
  */
@@ -18899,7 +18985,7 @@ const cvaDrawerCard = cvaMerge(["fixed", "z-toast"], {
 
 /**
  * The drawer provides a slideover which can be used to provide access to different locations in the application.
- *
+ 
  * @param {DrawerProps} props - The props for the Drawer component
  * @returns {JSX.Element} Drawer component
  */
@@ -18939,6 +19025,7 @@ const cvaSkeletonLine = cvaMerge([
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ 
  */
 const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId }) => {
     const skeletonLines = [];
@@ -18982,7 +19069,7 @@ var WorkerWithSign = "8df3d27593b5fba4.svg";
  * Component representing an empty state.
  * Use this component when there is no data to display or when an error occurs.
  *
- *
+ 
  * @param {EmptyStateProps} props props
  * @returns {JSX.Element} component
  * @example
@@ -19027,7 +19114,7 @@ const cvaExternalLink = cvaMerge(["underline", "text-primary-600", "hover:text-p
 
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
- *
+ 
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {JSX.Element} External Link component
  */
@@ -19052,7 +19139,7 @@ const cvaTooltipContent = cvaMerge("max-w-sm rounded p-2", {
 
 /**
  * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
+ 
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
@@ -19160,7 +19247,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * _**Do use** indicators to communicate essential aspects of the state of an asset._
  *
  * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
- *
+ 
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
@@ -19238,7 +19325,7 @@ const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-40
 
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
- *
+ 
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
@@ -19273,7 +19360,7 @@ const cvaMenuListDivider = cvaMerge([
 
 /**
  * The MenuList component is used for menus and selects.
- *
+ 
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
@@ -19339,7 +19426,7 @@ const cvaModalBackdrop = cvaMerge([
 
 /**
  * The Backdrop for the modal.
- *
+ 
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
@@ -19360,6 +19447,7 @@ const ModalBackdrop = ({ children, isVisible, onClick }) => {
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
  * - Modals interrupt a user's workflow by design.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ 
  */
 const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
     return;
@@ -19609,7 +19697,7 @@ var usePortal = /*@__PURE__*/getDefaultExportFromCjs(usePortal$1);
 
 /**
  * The useModal component should be used to inform the user of important information.
- *
+ 
  * @param {UseModalProps} props - The props for the useModal hook
  * @returns {*} useModal return
  */
@@ -19639,82 +19727,6 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-const cvaTag = cvaMerge([
-    "inline-flex",
-    "justify-center",
-    "items-center",
-    "rounded-full",
-    "py-1",
-    "px-2",
-    "text-center",
-    "whitespace-nowrap",
-    "h-min",
-    "min-w-[1.5rem]",
-    "font-medium",
-    "truncate",
-    "max-w-full",
-    "w-min",
-    "text-xs",
-], {
-    variants: {
-        size: {
-            small: "px-2 py-px",
-            medium: "",
-        },
-        layout: {
-            withIcon: "gap-2 pr-1",
-            default: "",
-        },
-        color: {
-            primary: "bg-primary-100 text-primary-700",
-            secondary: "bg-secondary-100 text-secondary-700",
-            accent: "bg-accent-100 text-accent-700",
-            neutral: "bg-neutral-100 text-neutral-700",
-            black: "bg-neutral-100 text-neutral-700",
-            white: "bg-white-100 text-white-700",
-            info: "bg-info-100 text-info-700",
-            success: "bg-success-100 text-success-700",
-            warning: "bg-warning-100 text-warning-700",
-            danger: "bg-danger-100 text-danger-700",
-            good: "bg-good-100 text-good-700",
-            low: "bg-low-100 text-low-700",
-            critical: "bg-critical-100 text-critical-700",
-            working: "bg-working-100 text-working-700",
-            stopped: "bg-stopped-100 text-stopped-700",
-            idle: "bg-idle-100 text-idle-700",
-            unknown: "bg-unknown-100 text-unknown-700",
-            moving: "bg-neutral-100 text-neutral-700",
-            active: "bg-neutral-100 text-neutral-700",
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-        layout: "default",
-        color: "primary",
-    },
-});
-const cvaTagIconContainer = cvaMerge(["inline-flex", "self-center"]);
-const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70"]);
-
-/**
- *  The tag component is used to categorize elements in the ui.
- *
- *  This could be to tell the state of an asset, or label a page as Beta.
- *
- *  The tag is also used in multiselect components to show selected options.
- *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
- */
-const Tag = React.forwardRef((_a, ref) => {
-    var { className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false } = _a; __rest$1(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "disabled"]);
-    return (jsxs("span", { className: cvaTag({ className, size, color, layout: Boolean(onClose) ? "withIcon" : "default" }), "data-testid": dataTestId && `${dataTestId}-tag`, ref: ref, children: [children, Boolean(onClose) && !disabled && (
-            // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
-});
-
 const cvaTip = cvaMerge("flex text-slate-300 transition hover:text-slate-500");
 const cvaTipContent = cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
     variants: {
@@ -19731,7 +19743,7 @@ const cvaTipContent = cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 tex
 /**
  * The Tip component is used to show helpful tips or contextual information to the users.
  * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
- *
+ 
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
@@ -19769,7 +19781,7 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
  * Pageheader component is used to display a page header.
  *
  * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
- *
+ 
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
@@ -19782,7 +19794,7 @@ const cvaPaginationText = cvaMerge("whitespace-nowrap");
 
 /**
  * Pagination Description. It could be used when you need navigation for your paging feature.
- *
+ 
  * @param {IPaginationProps} props - The props for the Pagination component
  * @returns {JSX.Element} Pagination component
  */
@@ -19848,7 +19860,7 @@ function useConfirmExit(confirmExit, when = true) {
 }
 /**
  * The usePrompt hook.
- *
+ 
  * @param {string} message -
  * @param {boolean} when -
  * @returns {void} void
@@ -21244,7 +21256,7 @@ const cvaSpacer = cvaMerge([], {
 
 /**
  * The Spacer component is used for adding a bit of space in the ui.
- *
+ 
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
@@ -21254,7 +21266,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
 
 /**
  * The SectionHeader component is used on sections to set the section title.
- *
+ 
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
@@ -21337,7 +21349,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * - **_The sidebar is just a wrapper. You are responsible for styling the children._**
  *
  * When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
- *
+ 
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {JSX.Element} Sidebar component
  */
@@ -21393,7 +21405,7 @@ const cvaTimelineDot = cvaMerge(["flex", "space-x-4", "items-start", "ml-[calc(-
  * - with an indicator (dot)
  * - a header (next to the dot)
  * - and a body.
- *
+ 
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {JSX.Element} Timeline component
  */
@@ -21452,7 +21464,7 @@ const cvaValueBarText = cvaMerge([], {
 
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
- *
+ 
  * @param {number} value - value for which score should be returned
  * @param {number} min - min range value
  * @param {number} max - max range value
@@ -21469,7 +21481,7 @@ const getScore = (value, min, max) => {
 };
 /**
  * Helper function to get default color used by the ValueBar
- *
+ 
  * @param {number} score - score number for which color should be returned
  * @returns {string} color value
  */
@@ -21484,7 +21496,7 @@ const getDefaultFillColor = (score) => {
 };
 /**
  * Helper function to get custom color used by the ValueBar
- *
+ 
  * @param {number} score - score number for which color should be returned
  * @param {LevelColors} levelColors - custom colors and levels definitions
  * @returns {string} color value
@@ -21501,7 +21513,7 @@ const getFillColor = (score, levelColors) => {
 };
 /**
  * Helper function to get color used by the ValueBar
- *
+ 
  * @param {number} value - value for which color should be returned
  * @param {number} min - min range value
  * @param {number} max - max range value
@@ -21515,7 +21527,7 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
 
 /**
  * ValueBar component is used to display value on a colorful bar within provided range.
- *
+ 
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {JSX.Element} ValueBar component
  */
@@ -21526,6 +21538,45 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })), showValue && size === "small" && (jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), children: [Number(value.toFixed(1)), unit || ""] }))] }) }));
 };
 
+const cvaWidgetBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
+    variants: {
+        disableGap: {
+            true: "gap-0",
+            false: "",
+        },
+        direction: {
+            row: "flex-row",
+            "row-reverse": "flex-row-reverse",
+            column: "flex-col",
+            "column-reverse": "flex-col-reverse",
+        },
+        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: {
+        disableGap: false,
+        direction: "column",
+        density: "auto",
+    },
+});
+
+/**
+ * The WidgetBody component should be used to inform the user of important information.
+ *
+ * @summary For applying padding and gap to a Widget.
+ * @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
+ * @param {WidgetBodyProps} props - The props for the WidgetBody component
+ * @returns {JSX.Element} WidgetBody component
+ */
+const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
+    return (jsx("div", { "data-testid": dataTestId, className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), children: children }));
+};
+
 const cvaClickable = cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -39197,4 +39248,4 @@ const useVisibilityChange = ({ onChange, targetState }) => {
     }, [onChange, targetState]);
 };
 
-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 };
+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, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, 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 };