@trackunit/react-components 0.0.162 → 0.0.164

package/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface PageHeaderProps extends CommonProps {
+    /**
+     * Text to be displayed in the header.
+     */
+    title: string | React.ReactNode;
+    /**
+     * The description to be displayed inside the tip.
+     */
+    description?: string | React.ReactNode;
+    /**
+     * Additional actions to be rendered along with the header.
+     */
+    action?: React.ReactNode;
+    /**
+     * A tag that is displayed on the side of the header.
+     * A RectNode passed into the tag will be rendered as such.
+     * A string passed into the tag will render it using the tag component.
+     */
+    tag?: string;
+    /**
+     * Whether spinner should be shown while loading the data.
+     */
+    showLoading?: boolean;
+    /**
+     * Child nodes to be displayed inside the page header.
+     */
+    children?: React.ReactNode;
+    /**
+     * The link to the previous page which will be rendered inside an IconButton component to the left of the heading.
+     */
+    backTo?: string;
+}
+/**
+ * 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
+ */
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;

package/components/PageHeader/index.d.ts

@@ -0,0 +1 @@
+export * from "./PageHeader";

package/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import "./SectionHeader.css";
+export interface SectionHeaderProps extends CommonProps {
+    /**
+     * The title of the section.
+     */
+    title: string;
+    /**
+     * Subtitle of the section.
+     */
+    subtitle?: string;
+    /**
+     * The addon could be used to tell the state of a section header.
+     */
+    addon?: ReactNode;
+}
+/**
+ * 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
+ */
+export declare const SectionHeader: ({ title, subtitle, dataTestId, addon }: SectionHeaderProps) => JSX.Element;

package/components/SectionHeader/index.d.ts

@@ -0,0 +1 @@
+export * from "./SectionHeader";

package/components/Tip/Tip.d.ts

@@ -15,11 +15,20 @@ export interface TipProps extends CommonProps {
      * The props for setting the tooltip on this tip.
      */
     tooltipProps?: Partial<TooltipProps>;
+    /**
+     * The element type the tip will be rendered as.
+     */
+    renderAs?: keyof JSX.IntrinsicElements;
+    /**
+     * The href attribute if the tip is rendered as an anchor tag.
+     */
+    link?: string | React.ReactNode;
 }
 /**
  * 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
  */
-export declare const Tip: ({ children, iconProps, tooltipProps, dataTestId, ...rest }: TipProps) => JSX.Element;
+export declare const Tip: ({ children, iconProps, tooltipProps, dataTestId, link, renderAs, className, }: TipProps) => JSX.Element;

package/components/index.d.ts

@@ -21,10 +21,11 @@ export * from "./Menu";
 export * from "./Modal";
 export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
-export * from "./PageHeading";
+export * from "./PageHeader";
 export * from "./Popover";
 export * from "./Prompt";
 export * from "./RadioGroup";
+export * from "./SectionHeader";
 export * from "./Select";
 export * from "./SkeletonLines";
 export * from "./Spacer";

package/index.css

@@ -20,7 +20,6 @@
     px-2.5
     h-min
     w-min
-    drop-shadow
     focus:ring
     focus:ring-offset-1
     focus:outline-none
@@ -116,10 +115,6 @@
       disabled:text-slate-400;
   }
 
-  &--transparent {
-    @apply drop-shadow-none;
-  }
-
   &--transparent-primary {
     @apply text-primary-600
       hover:text-primary-700
@@ -213,16 +208,6 @@
   }
 }
 
-.tu-pageheading {
-  @apply w-full;
-
-  &__flex{
-    @apply flex
-      items-center
-      flex-wrap-reverse
-      gap-2;
-  }
-}
 /* CSS related to the RadioGroup component */
 .tu-radiogroup {
   @apply flex 
@@ -334,6 +319,17 @@
   }
 }
 
+.tu-section-header {
+  @apply w-full;
+
+  &__flex {
+    @apply flex
+      items-center
+      flex-wrap-reverse
+      gap-2;
+  }
+}
+
 .tu-textarea {
   @apply tu-input-base 
     block

package/index.js

@@ -176,11 +176,11 @@ const getStyles = () => ({
       warning: tws`tu-button--warning`
     },
     transparent: {
-      primary: tws`tu-button--transparent tu-button--transparent-primary`,
-      secondary: tws`tu-button--transparent tu-button--transparent-secondary`,
-      danger: tws`tu-button--transparent tu-button--transparent-danger`,
-      tertiary: tws`tu-button--transparent tu-button--transparent-tertiary`,
-      warning: tws`tu-button--transparent tu-button--transparent-warning`
+      primary: tws`tu-button--transparent-primary`,
+      secondary: tws`tu-button--transparent-secondary`,
+      danger: tws`tu-button--transparent-danger`,
+      tertiary: tws`tu-button--transparent-tertiary`,
+      warning: tws`tu-button--transparent-warning`
     }
   };
   return styles[$variant][$color];
@@ -1283,7 +1283,7 @@ const Body = tw.div`
  * @returns {JSX.Element} Heading component
  */
 
-const Heading = ({
+const Heading$1 = ({
   children,
   variant = "primary",
   inverted = false,
@@ -1361,13 +1361,13 @@ const CardHeader = ({
   }, {
     children: jsxs(Container$7, {
       children: [jsxs("div", {
-        children: [jsxs(HeadingContainer, {
-          children: [jsx(Heading, Object.assign({
+        children: [jsxs(HeadingContainer$1, {
+          children: [jsx(Heading$1, Object.assign({
             variant: headingVariant
           }, {
             children: heading
           })), accessories]
-        }), subHeading && jsx(Heading, Object.assign({
+        }), subHeading && jsx(Heading$1, Object.assign({
           subtle: true,
           variant: "subtitle"
         }, {
@@ -1392,7 +1392,7 @@ const BottomBorderedDensityContainer = twx(DensityContainer)`
 const Container$7 = tw.div`
   tu-card__header
 `;
-const HeadingContainer = tw.div`
+const HeadingContainer$1 = tw.div`
   tu-card__header-heading-container
 `;
 
@@ -2270,30 +2270,39 @@ const Content = tw.div`
 
 /**
  * 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
  */
 
-const Tip = _a => {
-  var _b;
+const Tip = ({
+  children,
+  iconProps,
+  tooltipProps,
+  dataTestId,
+  link,
+  renderAs = "span",
+  className
+}) => {
+  var _a;
 
-  var {
-    children,
-    iconProps,
-    tooltipProps,
-    dataTestId
-  } = _a,
-      rest = __rest(_a, ["children", "iconProps", "tooltipProps", "dataTestId"]);
+  const ifAnchorTag = () => {
+    return renderAs === "a";
+  };
 
   return jsx(TipContainer, Object.assign({
-    "data-testid": dataTestId
-  }, rest, {
+    "data-testid": dataTestId,
+    "$as": renderAs,
+    href: ifAnchorTag() ? link === null || link === void 0 ? void 0 : link.toString() : undefined,
+    target: ifAnchorTag() ? "_blank" : undefined,
+    className: className
+  }, {
     children: jsx(Tooltip, Object.assign({
       label: children,
       dataTestId: `${dataTestId}-tooltip`
     }, tooltipProps, {
-      className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} tu-tip-tooltip`
+      className: `${(_a = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _a !== void 0 ? _a : ""} tu-tip-tooltip`
     }, {
       children: jsx(Icon$1, Object.assign({
         name: "QuestionMarkCircleIcon",
@@ -2303,7 +2312,7 @@ const Tip = _a => {
     }))
   }));
 };
-const TipContainer = tw.span`
+const TipContainer = tw.text`
   tu-tip
 `;
 
@@ -3112,79 +3121,196 @@ const NumberField = forwardRef((_a, ref) => {
 });
 
 /**
- * The Spacer component is used for adding a bit of space in the ui.
+ *  The tag component is used to categorize elements in the ui.
  *
- * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
+ *  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 Spacer = ({
-  minHeight,
-  border,
-  dataTestId
+const Tag = React.forwardRef((_a, ref) => {
+  var {
+    className,
+    dataTestId,
+    children,
+    size = "medium",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": `${dataTestId}-tag`,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose,
+    ref: ref
+  }, {
+    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
+    jsx(IconContainer, Object.assign({
+      onMouseDown: onClose
+    }, {
+      children: jsx(Icon$1, {
+        name: "XCircleIcon",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          WebkitTransition: "-webkit-transform 0.150s"
+        },
+        className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
+      })
+    }))]
+  }));
+});
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
 }) => {
-  return jsx(Space, {
-    "data-testid": dataTestId,
-    minHeight: minHeight,
-    border: border
-  });
+  const tagSizeModifierClass = {
+    medium: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
+    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
+  };
+  return tagSizeModifierClass[$size];
 };
 
-const GetSpacerHeight = () => ({
-  minHeight
+const getColorModifierClass = () => ({
+  $color
 }) => {
-  switch (minHeight) {
-    case "normal":
-      return tws`tu-spacer--normal`;
-
-    case "large":
-      return tws`tu-spacer--large`;
-
-    default:
-      return "";
-  }
+  const colorClasses = {
+    primary: tws`tu-tag--primary`,
+    secondary: tws`tu-tag--secondary`,
+    accent: tws`tu-tag--accent`,
+    success: tws`tu-tag--success`,
+    danger: tws`tu-tag--danger`,
+    warning: tws`tu-tag--warning`,
+    info: tws`tu-tag--info`,
+    neutral: tws`tu-tag--neutral`,
+    good: tws`tu-tag--good`,
+    low: tws`tu-tag--low`,
+    critical: tws`tu-tag--critical`,
+    working: tws`tu-tag--working`,
+    idle: tws`tu-tag--idle`,
+    stopped: tws`tu-tag--stopped`,
+    unknown: tws`tu-tag--unknown`
+  };
+  return colorClasses[$color];
 };
 
-const Space = tw.div`
-  ${p => `${p.border ? `tu-spacer--border` : null}`}
-  ${GetSpacerHeight()}
+const StyledText = tw.span`
+  tu-tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+  tu-tag__icon-container
 `;
 
 /**
- * The PageHeading component is used on pages to set the Browser page title.
+ * Pageheader component is used to display a page header.
  *
- * @param {PageHeadingProps} props - The props for the PageHeading component
- * @returns {JSX.Element} PageHeading component
+ * 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
  */
 
-const PageHeading = ({
-  title,
-  subtitle,
+const PageHeader = ({
+  className,
   dataTestId,
-  addon
+  action,
+  showLoading,
+  description,
+  title,
+  tag,
+  backTo,
+  children
 }) => {
-  return jsxs(PageHeadingContainer, {
-    children: [jsx(Helmet, {
-      title: title
-    }), jsxs(StyledFlex, {
-      children: [jsx(Heading, Object.assign({
-        variant: "secondary",
+  return jsxs(StyledPageHeader, Object.assign({
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({
+      "data-testid": `${dataTestId}-heading-container`
+    }, {
+      children: [jsxs(HeadingContainer, {
+        children: [backTo && jsx(IconButton, {
+          to: backTo,
+          color: "tertiary",
+          variant: "transparent",
+          size: "small",
+          icon: jsx(Icon$1, {
+            name: "ArrowLeftIcon"
+          })
+        }), jsx(Heading, Object.assign({
+          "data-testid": `${dataTestId}-heading`
+        }, {
+          children: title
+        })), description && jsx(StyledTip, Object.assign({
+          link: description,
+          dataTestId: `${dataTestId}-tip`,
+          iconProps: {
+            name: "QuestionMarkCircleIcon"
+          },
+          renderAs: isValidHttpUrl(description) ? "a" : "span"
+        }, {
+          children: isValidHttpUrl(description) ? "Learn more" : description
+        }))]
+      }), tag && jsx(Tag, Object.assign({
         dataTestId: dataTestId
       }, {
-        children: title
-      })), addon]
-    }), subtitle && jsx(Heading, Object.assign({
-      variant: "subtitle",
-      subtle: true
-    }, {
-      children: subtitle
-    })), jsx(Spacer, {
-      minHeight: "normal"
+        children: tag
+      })), showLoading && jsx(Spinner, {
+        dataTestId: `${dataTestId}-spinner`,
+        centered: true
+      }), action]
+    })), jsx(ChildContainer, {
+      children: children
     })]
-  });
+  }));
 };
-const PageHeadingContainer = tw.div`tu-pageheading`;
-const StyledFlex = tw.div`tu-pageheading__flex`;
+
+const isValidHttpUrl = description => {
+  if (!description || typeof description !== "string") {
+    return false;
+  }
+
+  let url;
+
+  try {
+    url = new URL(description);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+};
+
+const StyledPageHeader = tw.div`
+  tu-page-header
+`;
+const HeadingAndAccessoriesContainer = tw.div`
+  tu-page-header__heading-accessories-container
+`;
+const HeadingContainer = tw.div`
+  tu-page-header__heading-container
+`;
+const Heading = tw.h1`
+  tu-page-header__heading
+`;
+const ChildContainer = tw.div`
+  tu-page-header__child-container
+`;
+const StyledTip = twx(Tip)`
+  ${p => isValidHttpUrl(p.link) ? tws`tu-page-header__tip` : null}
+`;
 
 function useConfirmExit(confirmExit, when = true) {
   const {
@@ -3382,6 +3508,81 @@ ${({
 }) => $disabled && tws`tu-radioitem__description--disabled`}
 `;
 
+/**
+ * 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
+ */
+
+const Spacer = ({
+  minHeight,
+  border,
+  dataTestId
+}) => {
+  return jsx(Space, {
+    "data-testid": dataTestId,
+    minHeight: minHeight,
+    border: border
+  });
+};
+
+const GetSpacerHeight = () => ({
+  minHeight
+}) => {
+  switch (minHeight) {
+    case "normal":
+      return tws`tu-spacer--normal`;
+
+    case "large":
+      return tws`tu-spacer--large`;
+
+    default:
+      return "";
+  }
+};
+
+const Space = tw.div`
+  ${p => `${p.border ? `tu-spacer--border` : null}`}
+  ${GetSpacerHeight()}
+`;
+
+/**
+ * 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
+ */
+
+const SectionHeader = ({
+  title,
+  subtitle,
+  dataTestId,
+  addon
+}) => {
+  return jsxs(SectionHeaderContainer, {
+    children: [jsx(Helmet, {
+      title: title
+    }), jsxs(StyledFlex, {
+      children: [jsx(Heading$1, Object.assign({
+        variant: "secondary",
+        dataTestId: dataTestId
+      }, {
+        children: title
+      })), addon]
+    }), subtitle && jsx(Heading$1, Object.assign({
+      variant: "subtitle",
+      subtle: true
+    }, {
+      children: subtitle
+    })), jsx(Spacer, {
+      minHeight: "normal"
+    })]
+  });
+};
+const SectionHeaderContainer = tw.div`tu-section-header`;
+const StyledFlex = tw.div`tu-section-header__flex`;
+
 /**
  * The SelectContainer component.
  *
@@ -3489,99 +3690,6 @@ const SelectPrefix = tw.div`
   tu-select__prefix 
 `;
 
-/**
- *  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"
-  } = _a;
-      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
-
-  return jsxs(StyledText, Object.assign({
-    className: className,
-    "$size": size,
-    "data-testid": `${dataTestId}-tag`,
-    "$as": "span",
-    "$color": color,
-    "$withXIcon": !!onClose,
-    ref: ref
-  }, {
-    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
-    jsx(IconContainer, Object.assign({
-      onMouseDown: onClose
-    }, {
-      children: jsx(Icon$1, {
-        name: "XCircleIcon",
-        dataTestId: dataTestId + "Icon",
-        type: "solid",
-        style: {
-          WebkitTransition: "-webkit-transform 0.150s"
-        },
-        className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
-      })
-    }))]
-  }));
-});
-
-const getSizeModifierClass = () => ({
-  $size,
-  $withXIcon
-}) => {
-  const tagSizeModifierClass = {
-    medium: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
-    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
-  };
-  return tagSizeModifierClass[$size];
-};
-
-const getColorModifierClass = () => ({
-  $color
-}) => {
-  const colorClasses = {
-    primary: tws`tu-tag--primary`,
-    secondary: tws`tu-tag--secondary`,
-    accent: tws`tu-tag--accent`,
-    success: tws`tu-tag--success`,
-    danger: tws`tu-tag--danger`,
-    warning: tws`tu-tag--warning`,
-    info: tws`tu-tag--info`,
-    neutral: tws`tu-tag--neutral`,
-    good: tws`tu-tag--good`,
-    low: tws`tu-tag--low`,
-    critical: tws`tu-tag--critical`,
-    working: tws`tu-tag--working`,
-    idle: tws`tu-tag--idle`,
-    stopped: tws`tu-tag--stopped`,
-    unknown: tws`tu-tag--unknown`
-  };
-  return colorClasses[$color];
-};
-
-const StyledText = tw.span`
-  tu-tag
-  ${getSizeModifierClass()}
-  ${getColorModifierClass()}
-`;
-const IconContainer = tw.div`
-  tu-tag__icon-container
-`;
-
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
@@ -5338,4 +5446,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.162",
+  "version": "0.0.164",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -16,10 +16,10 @@
     "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.47",
     "react-useportal": "1.0.16",
-    "react-helmet": "^6.1.0",
     "@react-spring/web": "9.5.2",
     "react-router-dom": "6.4.1",
     "@popperjs/core": "^2.11.6",
+    "react-helmet": "^6.1.0",
     "react-select": "^5.4.0",
     "jest-canvas-mock": "^2.4.0"
   },

package/components/PageHeading/PageHeading.d.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-import { CommonProps } from "../../common/CommonProps";
-import "./PageHeading.css";
-export interface PageHeadingProps extends CommonProps {
-    /**
-     * The title of the page.
-     */
-    title: string;
-    /**
-     * Subtitle of the page.
-     */
-    subtitle?: string;
-    /**
-     * The addon could be used to tell the state of a pageheading.
-     */
-    addon?: ReactNode;
-}
-/**
- * The PageHeading component is used on pages to set the Browser page title.
- *
- * @param {PageHeadingProps} props - The props for the PageHeading component
- * @returns {JSX.Element} PageHeading component
- */
-export declare const PageHeading: ({ title, subtitle, dataTestId, addon }: PageHeadingProps) => JSX.Element;

package/components/PageHeading/index.d.ts

@@ -1 +0,0 @@
-export * from "./PageHeading";