@trackunit/react-components 0.1.175 → 0.1.176

package/index.cjs.js

@@ -65,6 +65,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 = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-grid", "relative"], {
     variants: {
         color: {
@@ -156,7 +193,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
  */
@@ -173,42 +210,88 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.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: jsxRuntime.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 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["inline-flex", "self-center"]);
+const cvaTagIcon = cssClassVarianceUtilities.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__namespace.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 (jsxRuntime.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
+            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxRuntime.jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
+};
 
 const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
@@ -269,7 +352,7 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relati
  *  ### 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
  */
@@ -338,7 +421,7 @@ const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p
  * 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
  */
@@ -536,7 +619,7 @@ const cvaIconButtonContainer = cssClassVarianceUtilities.cvaMerge(["w-5", "h-5",
 
 /**
  * Buttons allow users to perform an action when triggered.
- *
+ 
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
@@ -550,6 +633,9 @@ const Button$1 = React__namespace.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: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading && jsxRuntime.jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })) }, rest));
 });
 
+/**
+ * The IconButton is used for a button with an icon.
+ */
 const IconButton = React__namespace.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest$1(_a, ["icon", "size", "square", "loading", "disabled"]);
     return (jsxRuntime.jsx(Button$1, Object.assign({ size: size, square: square, disabled: disabled || loading, ref: ref }, rest, { children: jsxRuntime.jsx("div", { className: cvaIconButtonContainer({ size }), children: loading ? jsxRuntime.jsx(Spinner, { size: size }) : icon }) })));
@@ -557,7 +643,7 @@ const IconButton = React__namespace.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
  */
@@ -632,7 +718,7 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
 
 /**
  * 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
  */
@@ -704,7 +790,7 @@ const cvaBadge = cssClassVarianceUtilities.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
  */
@@ -814,7 +900,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
  */
@@ -839,7 +925,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
  */
@@ -884,7 +970,7 @@ const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal",
 
 /**
  * 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
  */
@@ -901,7 +987,7 @@ const Heading = (_a) => {
 
 /**
  * Header for Cards and Modals.
- *
+ 
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
@@ -1237,7 +1323,7 @@ const cvaCollapseIcon = cssClassVarianceUtilities.cvaMerge(["ease-in-out", "dura
 
 /**
  * The Collapse component is used to condense non-important information.
- *
+ 
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
@@ -1283,7 +1369,7 @@ const cvaCopyableText = cssClassVarianceUtilities.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
  */
@@ -14831,7 +14917,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
  */
@@ -18819,7 +18905,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
  */
@@ -18850,7 +18936,7 @@ const PopoverContent = React__default["default"].forwardRef(function PopoverCont
 
 /**
  * The PopoverTitle component.
- *
+ 
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {JSX.Element} PopoverTitle component
  */
@@ -18874,7 +18960,7 @@ const PopoverTrigger = React.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
  */
@@ -18884,7 +18970,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
  */
@@ -18928,7 +19014,7 @@ const cvaDrawerCard = cssClassVarianceUtilities.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
  */
@@ -18968,6 +19054,7 @@ const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ 
  */
 const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId }) => {
     const skeletonLines = [];
@@ -19011,7 +19098,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
@@ -19056,7 +19143,7 @@ const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "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
  */
@@ -19081,7 +19168,7 @@ const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("max-w-sm rounded p
 
 /**
  * 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
  */
@@ -19189,7 +19276,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * _**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
  */
@@ -19267,7 +19354,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "fl
 
 /**
  * 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
  */
@@ -19302,7 +19389,7 @@ const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge([
 
 /**
  * The MenuList component is used for menus and selects.
- *
+ 
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
@@ -19368,7 +19455,7 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
 
 /**
  * The Backdrop for the modal.
- *
+ 
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
@@ -19389,6 +19476,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__namespace.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
     return;
@@ -19638,7 +19726,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
  */
@@ -19668,82 +19756,6 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-const cvaTag = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["inline-flex", "self-center"]);
-const cvaTagIcon = cssClassVarianceUtilities.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__namespace.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 (jsxRuntime.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
-            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
-});
-
 const cvaTip = cssClassVarianceUtilities.cvaMerge("flex text-slate-300 transition hover:text-slate-500");
 const cvaTipContent = cssClassVarianceUtilities.cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
     variants: {
@@ -19760,7 +19772,7 @@ const cvaTipContent = cssClassVarianceUtilities.cvaMerge("flex max-w-sm items-ce
 /**
  * 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
  */
@@ -19798,7 +19810,7 @@ const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex",
  * 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
  */
@@ -19811,7 +19823,7 @@ const cvaPaginationText = cssClassVarianceUtilities.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
  */
@@ -19877,7 +19889,7 @@ function useConfirmExit(confirmExit, when = true) {
 }
 /**
  * The usePrompt hook.
- *
+ 
  * @param {string} message -
  * @param {boolean} when -
  * @returns {void} void
@@ -21273,7 +21285,7 @@ const cvaSpacer = cssClassVarianceUtilities.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
  */
@@ -21283,7 +21295,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
  */
@@ -21366,7 +21378,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
  */
@@ -21422,7 +21434,7 @@ const cvaTimelineDot = cssClassVarianceUtilities.cvaMerge(["flex", "space-x-4",
  * - 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
  */
@@ -21481,7 +21493,7 @@ const cvaValueBarText = cssClassVarianceUtilities.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
@@ -21498,7 +21510,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
  */
@@ -21513,7 +21525,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
@@ -21530,7 +21542,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
@@ -21544,7 +21556,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
  */
@@ -39289,6 +39301,7 @@ exports.MenuList = MenuList;
 exports.Modal = Modal;
 exports.ModalBackdrop = ModalBackdrop;
 exports.MoreMenu = MoreMenu;
+exports.PackageNameStoryComponent = PackageNameStoryComponent;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Popover = Popover;