@luscii-healthtech/web-ui 2.58.0 → 2.58.1

package/dist/components/Page/CRUDPage.d.ts

@@ -1,22 +1,4 @@
 import React from "react";
-import { StepsProps } from "../Steps/Steps";
-import { ButtonProps } from "../Button/Button.types";
-declare type CRUDPageButtonProps = Pick<ButtonProps, "onClick" | "text">;
-declare type CRUDPageProps = {
-    dataTestId?: string;
-    title: string;
-    submitButtonProps?: CRUDPageButtonProps;
-    deleteButtonProps?: CRUDPageButtonProps;
-    cancelButtonProps?: CRUDPageButtonProps;
-    icon?: string;
-    className?: string;
-    isLoading?: boolean;
-    isSubmitting?: boolean;
-    navMenuComponent?: React.ReactNode;
-    stepTitles?: StepsProps["orderedStepTitles"];
-    currentStep?: StepsProps["currentStep"];
-    localization?: StepsProps["localization"];
-    children?: React.ReactNode;
-};
+import type { CRUDPageProps } from "./CRUDPage.types";
 declare const CRUDPage: React.FC<CRUDPageProps>;
 export default CRUDPage;

package/dist/components/Page/CRUDPage.types.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
+import type { PageHeaderProps } from "../PageHeader";
+import type { StepsProps } from "../Steps/Steps";
+declare type CRUDPageButtonProps = Pick<BaseButtonProps, "onClick" | "text">;
+declare type CRUDPageTitle = {
+    text: string;
+    icon?: string;
+};
+declare type CRUDPageHeader = Omit<PageHeaderProps, "navigation" | "isPolling" | "accessories">;
+declare type CRUDPagePropsWithoutHeaderOrTitle = {
+    dataTestId?: string;
+    submitButtonProps?: CRUDPageButtonProps;
+    cancelButtonProps?: CRUDPageButtonProps;
+    className?: string;
+    isLoading?: boolean;
+    isSubmitting?: boolean;
+    stepTitles?: StepsProps["orderedStepTitles"];
+    currentStep?: StepsProps["currentStep"];
+    localization?: StepsProps["localization"];
+    children?: React.ReactNode;
+};
+export declare type CRUDPageProps = (CRUDPagePropsWithoutHeaderOrTitle & {
+    title: CRUDPageTitle;
+    header?: never;
+}) | (CRUDPagePropsWithoutHeaderOrTitle & {
+    header: CRUDPageHeader;
+    title?: never;
+});
+export {};

package/dist/components/Page/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Page } from "./Page";
+export { default as CRUDPage } from "./CRUDPage";
+export type { CRUDPageProps } from "./CRUDPage.types";

package/dist/components/PageHeader/PageHeader.d.ts

@@ -1,12 +1,4 @@
 import React from "react";
-import { BreadcrumbProps } from "../Breadcrumbs/Breadcrumbs";
-import { TabbarProps } from "../Tabbar/Tabbar";
-export interface PageHeaderProps {
-    navigation?: Omit<TabbarProps, "withoutPadding">;
-    breadcrumbs?: BreadcrumbProps["crumbs"];
-    dataTestId?: string;
-    title: string;
-    isPolling?: boolean;
-    accessories?: React.ReactNode;
-}
-export declare const PageHeader: React.VoidFunctionComponent<PageHeaderProps>;
+import { PageHeaderProps } from "./PageHeader.types";
+declare const PageHeader: React.FC<PageHeaderProps>;
+export default PageHeader;

package/dist/components/PageHeader/PageHeader.types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { BreadcrumbProps } from "../Breadcrumbs/Breadcrumbs";
+import type { TabbarProps } from "../Tabbar/Tabbar";
+export interface PageHeaderProps {
+    navigation?: Omit<TabbarProps, "withoutPadding">;
+    breadcrumbs?: BreadcrumbProps["crumbs"];
+    dataTestId?: string;
+    title: string;
+    isPolling?: boolean;
+    className?: string;
+    contained?: boolean;
+    accessories?: React.ReactNode;
+}

package/dist/components/PageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PageHeader } from "./PageHeader";
+export type { PageHeaderProps } from "./PageHeader.types";

package/dist/index.d.ts

@@ -38,8 +38,7 @@ export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
 export { NavMenu } from "./components/NavMenu/NavMenu";
 export { NotificationBanner, NotificationBannerColor, NotificationBannerLinkProps, } from "./components/NotificationBanner/NotificationBanner";
-export { default as Page } from "./components/Page/Page";
-export { default as CRUDPage } from "./components/Page/CRUDPage";
+export { Page, CRUDPage, CRUDPageProps } from "./components/Page";
 export { PaginationMenu } from "./components/PaginationMenu/PaginationMenu";
 export { PageSize as PaginationMenuPageSize, OnPaginationChange as OnPaginationMenuChange, Localization as PaginationMenuLocalization, PaginationMenuProps, } from "./components/PaginationMenu/PaginationMenu.types";
 export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone";
@@ -58,7 +57,7 @@ export { default as Switcher } from "./components/Switcher/Switcher";
 export { ImagePicker, TargetProps } from "./components/ImagePicker/ImagePicker";
 export { default as Tabbar, TabbarProps, TabItemDetails, } from "./components/Tabbar/Tabbar";
 export { Breadcrumbs, BreadcrumbProps, } from "./components/Breadcrumbs/Breadcrumbs";
-export { PageHeader, PageHeaderProps, } from "./components/PageHeader/PageHeader";
+export { PageHeader, PageHeaderProps } from "./components/PageHeader";
 export { default as TabLinks } from "./components/TabLinks/TabLinks";
 export { default as Tag } from "./components/Tag/Tag";
 export { default as TagGroup } from "./components/Tag/TagGroup";

package/dist/web-ui-tailwind.css

@@ -1552,10 +1552,6 @@ video {
   margin-top: 4.25rem;
 }
 
-.mb-20 {
-  margin-bottom: 5rem;
-}
-
 .mt-auto {
   margin-top: auto;
 }
@@ -1787,6 +1783,14 @@ video {
   padding-right: 4.25rem;
 }
 
+.pr-0 {
+  padding-right: 0;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1815,6 +1819,10 @@ video {
   padding-left: 1.5rem;
 }
 
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .pt-11 {
   padding-top: 2.75rem;
 }

package/dist/web-ui.cjs.development.js

@@ -6494,65 +6494,215 @@ var Steps = function Steps(_ref) {
   }, renderedSteps);
 };
 
-var CRUDPage = function CRUDPage(_ref) {
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var crumbs = _ref.crumbs;
+  var breadcrumbItems = crumbs.map(function (_ref2) {
+    var name = _ref2.name,
+        link = _ref2.link,
+        key = _ref2.key;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: key || name,
+      className: "flex flex-row items-center slash-split "
+    }, link ? /*#__PURE__*/React__default.createElement(router.Link, {
+      to: link
+    }, /*#__PURE__*/React__default.createElement(Text, {
+      text: name,
+      color: "blue-800"
+    })) : /*#__PURE__*/React__default.createElement(Text, {
+      text: name,
+      type: "strong"
+    }));
+  });
+  return /*#__PURE__*/React__default.createElement("ul", {
+    "data-test-id": "breadcrumbs",
+    className: "flex flex-row items-center space-x-2 "
+  }, breadcrumbItems);
+};
+
+var TabbarItem = function TabbarItem(_ref) {
   var title = _ref.title,
-      stepTitles = _ref.stepTitles,
+      index = _ref.index,
+      isSelected = _ref.isSelected,
+      onSelect = _ref.onSelect,
+      className = _ref.className,
+      _ref$badgeCount = _ref.badgeCount,
+      badgeCount = _ref$badgeCount === void 0 ? 0 : _ref$badgeCount,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$dataTestId = _ref.dataTestId,
+      dataTestId = _ref$dataTestId === void 0 ? "" : _ref$dataTestId;
+
+  var handleTabClick = function handleTabClick() {
+    return onSelect && onSelect(index);
+  };
+
+  var itemClassName = classNames("flex first:ml-0 ml-2 flex-row cursor-pointer py-2 px-3 rounded-lg focus:outline-primary transition ease-in duration-150", className, {
+    "bg-slate-100 text-slate-800 hover:text-slate-800 focus:text-slate-800": isSelected,
+    "bg-slate-50 text-slate-500 hover:bg-slate-100 hover:text-slate-500 focus:text-slate-500 opacity-75": !isSelected
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: itemClassName,
+    onClick: handleTabClick,
+    "data-test-id": dataTestId
+  }, typeof title === "string" && /*#__PURE__*/React__default.createElement(Text, {
+    text: title,
+    type: isSelected ? "strong" : "base",
+    inline: true
+  }), typeof title !== "string" && title, badgeCount > 0 && /*#__PURE__*/React__default.createElement(Badge, {
+    className: "ml-1",
+    badgeCount: badgeCount
+  }), isLoading && /*#__PURE__*/React__default.createElement(LoadingIndicator, {
+    asSpinner: true,
+    spinnerColor: "gray",
+    className: "w-6"
+  }));
+};
+
+var Tabbar = function Tabbar(_ref) {
+  var _ref$tabs = _ref.tabs,
+      tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
+      selectedIndex = _ref.selectedIndex,
+      onSelect = _ref.onSelect,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? "" : _ref$className,
+      _ref$withoutPadding = _ref.withoutPadding,
+      withoutPadding = _ref$withoutPadding === void 0 ? false : _ref$withoutPadding;
+
+  var _useState = React.useState(selectedIndex),
+      innerSelectedIndex = _useState[0],
+      setInnerSelectedIndex = _useState[1];
+
+  React.useEffect(function () {
+    setInnerSelectedIndex(selectedIndex);
+  }, [selectedIndex]);
+
+  var handleOnTabSelect = function handleOnTabSelect(index) {
+    setInnerSelectedIndex(index);
+    onSelect == null ? void 0 : onSelect({
+      index: index,
+      selectedTab: tabs[index]
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-row w-full bg-white rounded-xl " + className, {
+      "p-2": !withoutPadding
+    })
+  }, tabs == null ? void 0 : tabs.map(function (tabItemProps, index) {
+    var _tabItemProps$dataTes;
+
+    var itemProps = _extends({
+      index: index,
+      onSelect: handleOnTabSelect,
+      isSelected: innerSelectedIndex === index
+    }, tabItemProps);
+
+    return /*#__PURE__*/React__default.createElement(TabbarItem, _extends({
+      key: (_tabItemProps$dataTes = tabItemProps.dataTestId) != null ? _tabItemProps$dataTes : index
+    }, itemProps));
+  }));
+};
+
+var PageHeader = function PageHeader(_ref) {
+  var navigation = _ref.navigation,
+      breadcrumbs = _ref.breadcrumbs,
+      dataTestId = _ref.dataTestId,
+      accessories = _ref.accessories,
+      isPolling = _ref.isPolling,
+      title = _ref.title,
+      contained = _ref.contained,
+      className = _ref.className;
+  var withContained = {
+    "max-w-3xl m-auto": contained
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "page-header",
+    className: classNames("p-4 space-y-4 bg-white", className, {
+      "w-full pl-0 pr-0": contained
+    })
+  }, !!(breadcrumbs != null && breadcrumbs.length) && /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("mb-4 space-y-4", withContained)
+  }, /*#__PURE__*/React__default.createElement(Breadcrumbs, {
+    crumbs: breadcrumbs
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4 border-b border-slate-100"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-row items-center justify-between", withContained)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center space-x-3"
+  }, /*#__PURE__*/React__default.createElement(Title, {
+    "data-test-id": dataTestId + "-title",
+    text: title
+  }), isPolling && /*#__PURE__*/React__default.createElement(LoadingIndicator, {
+    asSpinner: true,
+    className: "page-spinner",
+    spinnerColor: "gray"
+  })), accessories && /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "page-header-accessories"
+  }, accessories)), navigation && /*#__PURE__*/React__default.createElement(Tabbar, _extends({}, navigation, {
+    withoutPadding: true,
+    className: classNames(navigation.className, withContained)
+  })));
+};
+
+var CRUDPage = function CRUDPage(_ref) {
+  var stepTitles = _ref.stepTitles,
       _ref$currentStep = _ref.currentStep,
       currentStep = _ref$currentStep === void 0 ? 1 : _ref$currentStep,
       submitButtonProps = _ref.submitButtonProps,
-      deleteButtonProps = _ref.deleteButtonProps,
       cancelButtonProps = _ref.cancelButtonProps,
-      icon = _ref.icon,
       className = _ref.className,
       children = _ref.children,
       isLoading = _ref.isLoading,
       isSubmitting = _ref.isSubmitting,
       localization = _ref.localization,
-      _ref$navMenuComponent = _ref.navMenuComponent,
-      navMenuComponent = _ref$navMenuComponent === void 0 ? null : _ref$navMenuComponent,
       _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? "page" : _ref$dataTestId;
-  var mergedClasses = classNames("cweb-crud-page max-w-3xl", "w-full mt-8 mb-0 mx-auto", className);
-  var containerClassnames = classNames("cweb-crud-page-container mb-20");
-  var submitButton = submitButtonProps && /*#__PURE__*/React__default.createElement(Button, _extends({
+      dataTestId = _ref$dataTestId === void 0 ? "page" : _ref$dataTestId,
+      title = _ref.title,
+      header = _ref.header;
+  var mergedClasses = classNames("cweb-crud-page", "w-full mb-0 mx-auto pb-8", className);
+  var submitButton = submitButtonProps && /*#__PURE__*/React__default.createElement(PrimaryButton, _extends({
     "data-test-id": "submit-button",
     key: "submit-button",
     role: BUTTON_ROLES.PRIMARY,
     isPending: isSubmitting
   }, submitButtonProps));
-  var deleteButton = deleteButtonProps && /*#__PURE__*/React__default.createElement(Button, _extends({
-    "data-test-id": "delete-button",
-    key: "delete-button",
-    role: BUTTON_ROLES.NEGATIVE
-  }, deleteButtonProps));
-  var cancelButton = cancelButtonProps && /*#__PURE__*/React__default.createElement(Button, _extends({
+  var cancelButton = cancelButtonProps && /*#__PURE__*/React__default.createElement(TertiaryButton, _extends({
     "data-test-id": "cancel-button",
     key: "cancel-button",
     role: BUTTON_ROLES.SECONDARY
   }, cancelButtonProps));
-  var header = /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row justify-start align-center"
-  }, icon && /*#__PURE__*/React__default.createElement("img", {
-    id: "title-icon",
-    src: icon,
-    className: "mr-4 w-11 h-11",
-    alt: "title icon"
-  }), /*#__PURE__*/React__default.createElement(Title, {
-    text: title,
-    type: "lg"
-  }));
+  var pageHeader;
+
+  if (title) {
+    pageHeader = /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-row justify-start align-center max-w-3xl mx-auto w-full mt-8"
+    }, title.icon && /*#__PURE__*/React__default.createElement("img", {
+      id: "title-icon",
+      src: title.icon,
+      className: "mr-4 w-11 h-11",
+      alt: "title icon"
+    }), /*#__PURE__*/React__default.createElement(Title, {
+      text: title.text,
+      type: "lg"
+    }));
+  } else {
+    pageHeader = /*#__PURE__*/React__default.createElement(PageHeader, _extends({
+      contained: true
+    }, header));
+  }
+
   return /*#__PURE__*/React__default.createElement("div", {
-    className: containerClassnames
-  }, /*#__PURE__*/React__default.createElement(NavLayout, {
-    menu: navMenuComponent
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isLoading && /*#__PURE__*/React__default.createElement("div", {
+    className: "cweb-crud-page-container",
+    "data-test-id": dataTestId
+  }, isLoading && /*#__PURE__*/React__default.createElement("div", {
     className: classNames(mergedClasses, "overflow-y-hidden relative", "cweb-crud-page-loading-container"),
     style: {
       height: "90vh"
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row justify-start align-center"
-  }, header), /*#__PURE__*/React__default.createElement(LoadingIndicator, {
+  }, pageHeader), /*#__PURE__*/React__default.createElement(LoadingIndicator, {
     className: classNames("crud-page-loader", "absolute top-0 right-0 bottom-0 left-0 m-auto h-12 w-12"),
     asModal: false
   })), !isLoading && /*#__PURE__*/React__default.createElement("div", {
@@ -6560,18 +6710,18 @@ var CRUDPage = function CRUDPage(_ref) {
     "data-test-id": dataTestId
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row justify-start align-center"
-  }, header), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("cweb-crud-page-form-container", "bg-white rounded lg p-6 mt-4")
+  }, pageHeader), /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("cweb-crud-page-form-container", "max-w-3xl mx-auto bg-white rounded lg p-6 mt-4")
   }, stepTitles && stepTitles.length > 0 && localization && /*#__PURE__*/React__default.createElement(Steps, {
     orderedStepTitles: stepTitles,
     currentStep: currentStep,
     className: "mb-4",
     localization: localization
   }), children, /*#__PURE__*/React__default.createElement(Line, {
-    left: [cancelButton, deleteButton],
+    left: [cancelButton],
     right: [submitButton],
     className: classNames("cweb-crud-page-button-line", "border-t border-solid border-color-divider pt-4 mt-4")
-  }))))));
+  }))));
 };
 
 var img$h = "data:image/svg+xml,%3csvg width='340' height='638' viewBox='0 0 340 638' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect x='8' y='60' width='50' height='8' rx='4' transform='rotate(90 8 60)' fill='%23111827'/%3e %3crect x='8' y='118' width='50' height='8' rx='4' transform='rotate(90 8 118)' fill='%23111827'/%3e %3crect x='340' y='67' width='30' height='8' rx='4' transform='rotate(90 340 67)' fill='%23111827'/%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M36 0C18.3269 0 4 14.3269 4 32V606C4 623.673 18.3269 638 36 638H304C321.673 638 336 623.673 336 606V32C336 14.3269 321.673 0 304 0H36ZM28 43C23.5817 43 20 46.5817 20 51V549C20 553.418 23.5817 557 28 557H312C316.418 557 320 553.418 320 549V51C320 46.5817 316.418 43 312 43H28Z' fill='%23374151'/%3e %3ccircle cx='171' cy='598' r='16' fill='%236B7280'/%3e %3ccircle cx='105.5' cy='22.5' r='4.5' fill='%236B7280'/%3e %3crect x='118' y='18' width='104' height='9' rx='4' fill='%239CA3AF'/%3e%3c/svg%3e";
@@ -7455,149 +7605,6 @@ var ImagePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }));
 });
 
-var TabbarItem = function TabbarItem(_ref) {
-  var title = _ref.title,
-      index = _ref.index,
-      isSelected = _ref.isSelected,
-      onSelect = _ref.onSelect,
-      className = _ref.className,
-      _ref$badgeCount = _ref.badgeCount,
-      badgeCount = _ref$badgeCount === void 0 ? 0 : _ref$badgeCount,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? "" : _ref$dataTestId;
-
-  var handleTabClick = function handleTabClick() {
-    return onSelect && onSelect(index);
-  };
-
-  var itemClassName = classNames("flex first:ml-0 ml-2 flex-row cursor-pointer py-2 px-3 rounded-lg focus:outline-primary transition ease-in duration-150", className, {
-    "bg-slate-100 text-slate-800 hover:text-slate-800 focus:text-slate-800": isSelected,
-    "bg-slate-50 text-slate-500 hover:bg-slate-100 hover:text-slate-500 focus:text-slate-500 opacity-75": !isSelected
-  });
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: itemClassName,
-    onClick: handleTabClick,
-    "data-test-id": dataTestId
-  }, typeof title === "string" && /*#__PURE__*/React__default.createElement(Text, {
-    text: title,
-    type: isSelected ? "strong" : "base",
-    inline: true
-  }), typeof title !== "string" && title, badgeCount > 0 && /*#__PURE__*/React__default.createElement(Badge, {
-    className: "ml-1",
-    badgeCount: badgeCount
-  }), isLoading && /*#__PURE__*/React__default.createElement(LoadingIndicator, {
-    asSpinner: true,
-    spinnerColor: "gray",
-    className: "w-6"
-  }));
-};
-
-var Tabbar = function Tabbar(_ref) {
-  var _ref$tabs = _ref.tabs,
-      tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
-      selectedIndex = _ref.selectedIndex,
-      onSelect = _ref.onSelect,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
-      _ref$withoutPadding = _ref.withoutPadding,
-      withoutPadding = _ref$withoutPadding === void 0 ? false : _ref$withoutPadding;
-
-  var _useState = React.useState(selectedIndex),
-      innerSelectedIndex = _useState[0],
-      setInnerSelectedIndex = _useState[1];
-
-  React.useEffect(function () {
-    setInnerSelectedIndex(selectedIndex);
-  }, [selectedIndex]);
-
-  var handleOnTabSelect = function handleOnTabSelect(index) {
-    setInnerSelectedIndex(index);
-    onSelect == null ? void 0 : onSelect({
-      index: index,
-      selectedTab: tabs[index]
-    });
-  };
-
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("flex flex-row w-full bg-white rounded-xl " + className, {
-      "p-2": !withoutPadding
-    })
-  }, tabs == null ? void 0 : tabs.map(function (tabItemProps, index) {
-    var _tabItemProps$dataTes;
-
-    var itemProps = _extends({
-      index: index,
-      onSelect: handleOnTabSelect,
-      isSelected: innerSelectedIndex === index
-    }, tabItemProps);
-
-    return /*#__PURE__*/React__default.createElement(TabbarItem, _extends({
-      key: (_tabItemProps$dataTes = tabItemProps.dataTestId) != null ? _tabItemProps$dataTes : index
-    }, itemProps));
-  }));
-};
-
-var Breadcrumbs = function Breadcrumbs(_ref) {
-  var crumbs = _ref.crumbs;
-  var breadcrumbItems = crumbs.map(function (_ref2) {
-    var name = _ref2.name,
-        link = _ref2.link,
-        key = _ref2.key;
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: key || name,
-      className: "flex flex-row items-center slash-split "
-    }, link ? /*#__PURE__*/React__default.createElement(router.Link, {
-      to: link
-    }, /*#__PURE__*/React__default.createElement(Text, {
-      text: name,
-      color: "blue-800"
-    })) : /*#__PURE__*/React__default.createElement(Text, {
-      text: name,
-      type: "strong"
-    }));
-  });
-  return /*#__PURE__*/React__default.createElement("ul", {
-    "data-test-id": "breadcrumbs",
-    className: "flex flex-row items-center space-x-2 "
-  }, breadcrumbItems);
-};
-
-var PageHeader = function PageHeader(_ref) {
-  var navigation = _ref.navigation,
-      breadcrumbs = _ref.breadcrumbs,
-      dataTestId = _ref.dataTestId,
-      accessories = _ref.accessories,
-      isPolling = _ref.isPolling,
-      title = _ref.title;
-  return /*#__PURE__*/React__default.createElement("div", {
-    "data-test-id": "page-header",
-    className: "p-4 space-y-4 bg-white"
-  }, !!(breadcrumbs != null && breadcrumbs.length) && /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 space-y-4"
-  }, /*#__PURE__*/React__default.createElement(Breadcrumbs, {
-    crumbs: breadcrumbs
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 border-b border-slate-100"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row items-center justify-between"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row items-center space-x-3"
-  }, /*#__PURE__*/React__default.createElement(Title, {
-    "data-test-id": dataTestId + "-title",
-    text: title
-  }), isPolling && /*#__PURE__*/React__default.createElement(LoadingIndicator, {
-    asSpinner: true,
-    className: "page-spinner",
-    spinnerColor: "gray"
-  })), accessories && /*#__PURE__*/React__default.createElement("div", {
-    "data-test-id": "page-header-accessories"
-  }, accessories)), navigation && /*#__PURE__*/React__default.createElement(Tabbar, _extends({}, navigation, {
-    withoutPadding: true
-  })));
-};
-
 var TabLinksSelect = function TabLinksSelect(_ref) {
   var items = _ref.items,
       navigate = _ref.navigate,