@luscii-healthtech/web-ui 40.3.5 → 40.4.1

package/dist/index.development.js

@@ -5057,14 +5057,14 @@ const useGetClassName = () => {
             "ui:hover:bg-primary-background ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]",
             {
               "ui:bg-transparent ui:text-on-surface": !isActive,
-              "ui:bg-linear-to-r ui:from-blue-800 ui:to-blue-700 ui:text-white ui:hover:text-white ui:focus:text-white": isActive
+              "ui:bg-primary-background-active": isActive
             },
             classNameProp
           );
         case "secondary":
           return classNames__default.default(base, "ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]", {
             ["ui:[&_span]:font-bold"]: isActive
-          });
+          }, classNameProp);
       }
     },
     [variant]
@@ -5650,7 +5650,7 @@ const Body = (_a) => {
   const classes = classNames__default.default(className, "ui:overflow-y-auto ui:flex-1");
   return jsxRuntime.jsx(Box, Object.assign({ className: classes, p: "m" }, rest));
 };
-const Header = (props) => {
+const Header$1 = (props) => {
   return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", justify: "between", align: "center", gap: "m", p: "m" }, props));
 };
 const Footer = (props) => {
@@ -5664,7 +5664,7 @@ const Actions = (_a) => {
   const classes = classNames__default.default(className, "ui:self-end");
   return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", gap: "xs", className: classes }, rest));
 };
-ModalDialog.Header = Header;
+ModalDialog.Header = Header$1;
 ModalDialog.Title = Card.Title;
 ModalDialog.CloseButton = CloseButton;
 ModalDialog.Body = Body;
@@ -5810,6 +5810,26 @@ const Aside = (props) => {
 };
 SplitViewLayout.Aside = Aside;
 
+const Header = (props) => {
+  const { children } = props, restProps = __rest(props, ["children"]);
+  return jsxRuntime.jsx(Box, Object.assign({ as: "header", p: "xl" }, restProps, { children }));
+};
+Header.displayName = "PageWithCenteredContentLayout.Header";
+const Main = (props) => {
+  const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+  const classes = classNames__default.default(className, "ui:max-w-[100vw] ui:content-center");
+  return jsxRuntime.jsx(Stack, Object.assign({ as: "main", width: "full", align: "center", p: "xl", className: classes }, restProps, { children: jsxRuntime.jsx(Box, { width: "full", className: "ui:lg:max-w-[calc(100vw-(--spacing(132)))]", children }) }));
+};
+Main.displayName = "PageWithCenteredContentLayout.Main";
+const PageWithCenteredContentLayout = (props) => {
+  const { header, className, children } = props, restProps = __rest(props, ["header", "className", "children"]);
+  const classes = classNames__default.default("ui:min-h-screen", className);
+  return jsxRuntime.jsxs(Stack, Object.assign({ width: "full", align: "stretch", className: classes }, restProps, { children: [header && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header, jsxRuntime.jsx(Divider, {})] }), children] }));
+};
+PageWithCenteredContentLayout.displayName = "PageWithCenteredContentLayout";
+PageWithCenteredContentLayout.Header = Header;
+PageWithCenteredContentLayout.Main = Main;
+
 Object.defineProperty(exports, "Toaster", {
     enumerable: true,
     get: function () { return sonner.Toaster; }
@@ -5980,6 +6000,7 @@ exports.PageHeader = PageHeader;
 exports.PageIcon = PageIcon;
 exports.PageTitle = PageTitle;
 exports.PageViewIcon = PageViewIcon;
+exports.PageWithCenteredContentLayout = PageWithCenteredContentLayout;
 exports.PaginationMenu = PaginationMenu;
 exports.PaperclipIcon = PaperclipIcon;
 exports.PatientIcon = PatientIcon;