@snokam/ui 6.4.0 → 7.0.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.0.0](https://github.com/snokam/components/compare/@snokam/ui@6.4.1...@snokam/ui@7.0.0) (2026-10-31)
+
+### Bug Fixes
+
+- **ui:** tighter page header spacing on mobile ([6404202](https://github.com/snokam/components/commit/640420241906d5e50236c6e8c9e906b2de266d96))
+
+- feat(ui)!: compact page header, review fixes for shared packages ([2be4532](https://github.com/snokam/components/commit/2be453241302b8c5d275a8aeeaadfd4aee106f88))
+
+### Features
+
+- **my-page:** oversikt sections, faster hero, page header on mine oppgaver ([a961284](https://github.com/snokam/components/commit/a9612847a22d8ac961c2f64d1750df914239ca50))
+- **ui:** expandable boards with olaf, standard page setup on salg/cv ([f5c2f23](https://github.com/snokam/components/commit/f5c2f23f016bf5982f44dd70ea7362f89cdcdc3a))
+- **ui:** shared compact page header across apps ([cde9265](https://github.com/snokam/components/commit/cde926585f87b8d6fbc24d4b818bde136bf81e51))
+
+### BREAKING CHANGES
+
+- PageHeader no longer takes tone or transitions; it is
+  always the compact dark header with a wave and optional breadcrumbs.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
+
+## [6.4.1](https://github.com/snokam/components/compare/@snokam/ui@6.4.0...@snokam/ui@6.4.1) (2026-10-23)
+
+### Bug Fixes
+
+- **ui:** let page columns shrink so shell pages scroll again ([#3021](https://github.com/snokam/components/issues/3021)) ([5519393](https://github.com/snokam/components/commit/55193937a7e83c11fc0083f720c6bc9ed10fe48c))
+
 # [6.4.0](https://github.com/snokam/components/compare/@snokam/ui@6.3.0...@snokam/ui@6.4.0) (2026-10-22)
 
 ### Features

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

@@ -0,0 +1,10 @@
+export { useFullscreen } from "./useFullscreen";
+export { FullscreenArea } from "./styles";
+interface Props {
+    active: boolean;
+    onToggle: () => void;
+    openLabel: string;
+    closeLabel: string;
+}
+export declare function FullscreenButton({ active, onToggle, openLabel, closeLabel, }: Props): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/fullscreen/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fullscreen/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,GACX,EAAE,KAAK,+BAkBP"}

package/dist/components/fullscreen/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseFullscreen, OpenInFull } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import { Tooltip } from "../tooltip";
+export { useFullscreen } from "./useFullscreen";
+export { FullscreenArea } from "./styles";
+export function FullscreenButton({ active, onToggle, openLabel, closeLabel, }) {
+    const label = active ? closeLabel : openLabel;
+    return (_jsx(Tooltip, { title: label, children: _jsx(IconButton, { size: "small", "aria-label": label, "aria-expanded": active, onClick: onToggle, children: active ? (_jsx(CloseFullscreen, { fontSize: "small" })) : (_jsx(OpenInFull, { fontSize: "small" })) }) }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/fullscreen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/fullscreen/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAS1C,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,GACJ;IACN,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9C,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,YACnB,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,gBACA,KAAK,mBACF,MAAM,EACrB,OAAO,EAAE,QAAQ,YAEhB,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,eAAe,IAAC,QAAQ,EAAC,OAAO,GAAG,CACrC,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,QAAQ,EAAC,OAAO,GAAG,CAChC,GACU,GACL,CACX,CAAC;AACJ,CAAC"}

package/dist/components/fullscreen/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const FullscreenArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/fullscreen/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/fullscreen/styles.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;;;yGAiB1B,CAAC"}

package/dist/components/fullscreen/styles.js

@@ -0,0 +1,21 @@
+"use client";
+import styled from "@emotion/styled";
+export const FullscreenArea = styled.div `
+  min-width: 0;
+
+  &[data-expanded="true"] {
+    position: fixed;
+    top: calc(
+      var(--impersonation-banner-height, 0px) + var(--admin-topbar-height, 64px)
+    );
+    right: var(--olaf-panel-width, 0px);
+    bottom: 0;
+    left: 0;
+    z-index: 1250;
+    overflow: auto;
+    padding: 1.5rem 2rem;
+    background: var(--admin-shell-bg, var(--o-band-light-bg));
+    color: var(--o-text);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/fullscreen/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/fullscreen/styles.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBvC,CAAC"}

package/dist/components/fullscreen/useFullscreen.d.ts

@@ -0,0 +1,6 @@
+export declare function useFullscreen<T extends HTMLElement>(): {
+    ref: import("react").RefObject<T>;
+    active: boolean;
+    toggle: () => void;
+};
+//# sourceMappingURL=useFullscreen.d.ts.map

package/dist/components/fullscreen/useFullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.d.ts","sourceRoot":"","sources":["../../../src/components/fullscreen/useFullscreen.ts"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW;;;;EAqBlD"}

package/dist/components/fullscreen/useFullscreen.js

@@ -0,0 +1,25 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useFullscreen() {
+    const ref = useRef(null);
+    const [active, setActive] = useState(false);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.dataset.expanded = String(active);
+        if (!active)
+            return;
+        document.documentElement.setAttribute("data-board-expanded", "");
+        const onKey = (event) => {
+            if (event.key === "Escape" && !event.defaultPrevented)
+                setActive(false);
+        };
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            document.documentElement.removeAttribute("data-board-expanded");
+        };
+    }, [active]);
+    const toggle = useCallback(() => setActive((current) => !current), []);
+    return { ref, active, toggle };
+}
+//# sourceMappingURL=useFullscreen.js.map

package/dist/components/fullscreen/useFullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.js","sourceRoot":"","sources":["../../../src/components/fullscreen/useFullscreen.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,UAAU,aAAa;IAC3B,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,CAAC,OAAO;YAAE,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QACjE,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;YACrC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,gBAAgB;gBAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAC1E,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAC/C,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;QAClE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAEvE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AACjC,CAAC"}

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

@@ -1,14 +1,11 @@
 import { ReactNode } from "react";
-import { LayoutTheme, Transitions } from "./types";
 interface PageHeaderProps {
     title: string;
-    subtitle?: string;
-    tone?: LayoutTheme;
-    transitions?: Transitions;
     breadcrumbs?: ReactNode;
+    subtitle?: ReactNode;
     actions?: ReactNode;
     children?: ReactNode;
 }
-export declare const PageHeader: ({ title, subtitle, tone, transitions, breadcrumbs, actions, children, }: PageHeaderProps) => import("react").JSX.Element;
+export declare const PageHeader: ({ title, breadcrumbs, subtitle, actions, children, }: PageHeaderProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=PageHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAW,WAAW,EAAkB,MAAM,SAAS,CAAC;AAO5E,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,GAAI,yEAQxB,eAAe,gCAyBjB,CAAC"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAalC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,GAAI,sDAMxB,eAAe,gCAqBjB,CAAC"}

package/dist/components/layout/PageHeader.js

@@ -1,17 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Container from "./container";
+import { ThemeScope } from "@snokam/ui/theme";
 import Styled from "./styled";
-import { LayoutTheme, Padding, TransitionType } from "./types";
-import { FlushContent, Subtitle, TitleRow } from "./PageHeader.styled";
-const defaultTransitions = {
-    bottom: { type: TransitionType.Wave, flipX: true },
-};
-export const PageHeader = ({ title, subtitle, tone = LayoutTheme.Dark, transitions = defaultTransitions, breadcrumbs, actions, children, }) => {
-    const Content = transitions.bottom ? Styled.Content : FlushContent;
-    return (_jsx(Container, { theme: tone, transitions: transitions, children: _jsx(Content, { children: _jsxs(Styled.Section, { stretchItems: true, padding: {
-                    top: Padding.Large,
-                    bottom: transitions.bottom ? Padding.Large : Padding.None,
-                }, children: [breadcrumbs, _jsxs(TitleRow, { children: [_jsxs("div", { children: [_jsx("h1", { children: title }), subtitle && _jsx(Subtitle, { children: subtitle })] }), actions] }), children] }) }) }));
-};
+import { Padding, TransitionType } from "./types";
+import { HeaderActions, HeaderBand, HeaderContent, HeaderRow, HeaderText, Subtitle, } from "./PageHeader.styled";
+export const PageHeader = ({ title, breadcrumbs, subtitle, actions, children, }) => (_jsx(HeaderBand, { transitions: { bottom: { type: TransitionType.Wave, flipX: true } }, children: _jsx(HeaderContent, { children: _jsx(Styled.Section, { stretchItems: true, padding: { top: Padding.None, bottom: Padding.None }, children: _jsxs(ThemeScope, { theme: "dark", as: HeaderRow, children: [_jsxs(HeaderText, { children: [breadcrumbs, _jsx("h1", { children: title }), subtitle && _jsx(Subtitle, { children: subtitle }), children] }), actions && _jsx(HeaderActions, { children: actions })] }) }) }) }));
 //# sourceMappingURL=PageHeader.js.map

package/dist/components/layout/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEvE,MAAM,kBAAkB,GAAgB;IACtC,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;CACnD,CAAC;AAYF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,WAAW,CAAC,IAAI,EACvB,WAAW,GAAG,kBAAkB,EAChC,WAAW,EACX,OAAO,EACP,QAAQ,GACQ,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;IACnE,OAAO,CACL,KAAC,SAAS,IAAC,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,YAC9C,KAAC,OAAO,cACN,MAAC,MAAM,CAAC,OAAO,IACb,YAAY,QACZ,OAAO,EAAE;oBACP,GAAG,EAAE,OAAO,CAAC,KAAK;oBAClB,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI;iBAC1D,aAEA,WAAW,EACZ,MAAC,QAAQ,eACP,0BACE,uBAAK,KAAK,GAAM,EACf,QAAQ,IAAI,KAAC,QAAQ,cAAE,QAAQ,GAAY,IACxC,EACL,OAAO,IACC,EACV,QAAQ,IACM,GACT,GACA,CACb,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EACL,aAAa,EACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,UAAU,EACV,QAAQ,GACT,MAAM,qBAAqB,CAAC;AAU7B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,GACQ,EAAE,EAAE,CAAC,CACrB,KAAC,UAAU,IACT,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAEnE,KAAC,aAAa,cACZ,KAAC,MAAM,CAAC,OAAO,IACb,YAAY,QACZ,OAAO,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,YAEpD,MAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,SAAS,aACpC,MAAC,UAAU,eACR,WAAW,EACZ,uBAAK,KAAK,GAAM,EACf,QAAQ,IAAI,KAAC,QAAQ,cAAE,QAAQ,GAAY,EAC3C,QAAQ,IACE,EACZ,OAAO,IAAI,KAAC,aAAa,cAAE,OAAO,GAAiB,IACzC,GACE,GACH,GACL,CACd,CAAC"}

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

@@ -1,10 +1,21 @@
-export declare const FlushContent: import("@emotion/styled").StyledComponent<{
+export declare const HeaderBand: import("@emotion/styled").StyledComponent<import("./types").ContainerProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const HeaderContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & import("./types").ContentProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const TitleRow: import("@emotion/styled").StyledComponent<{
+export declare const HeaderRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const HeaderText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderActions: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/layout/PageHeader.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.styled.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.styled.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY;;;;;UAMxB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yGAMpB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;qHAMpB,CAAC"}
+{"version":3,"file":"PageHeader.styled.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.styled.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,UAAU;;UAMtB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;UAQzB,CAAC;AAEF,eAAO,MAAM,SAAS;;;mGAcrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;yGAsBtB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;qHAMpB,CAAC"}

package/dist/components/layout/PageHeader.styled.js

@@ -1,22 +1,72 @@
 "use client";
 import styled from "@emotion/styled";
+import Container from "./container";
 import Styled from "./styled";
-export const FlushContent = styled(Styled.Content) `
+import { WAVE_OVERLAP_PX } from "./types";
+const TEXT_TO_WAVE = 24;
+const BELOW_WAVE = WAVE_OVERLAP_PX / 2;
+export const HeaderBand = styled(Container) `
+  margin-bottom: ${BELOW_WAVE}px;
+
+  @media (max-width: 600px) {
+    margin-bottom: 0;
+  }
+`;
+export const HeaderContent = styled(Styled.Content) `
+  padding-top: 0;
   padding-bottom: 0;
 
   @media only screen and (min-width: 576px) {
+    padding-top: 0;
     padding-bottom: 0;
   }
 `;
-export const TitleRow = styled.div `
+export const HeaderRow = styled.header `
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 1rem 1.5rem;
+  width: 100%;
+  padding: 3rem 0 ${WAVE_OVERLAP_PX + TEXT_TO_WAVE}px;
+
+  @media (max-width: 600px) {
+    padding: 1.25rem 0 ${WAVE_OVERLAP_PX / 2}px;
+  }
+`;
+export const HeaderText = styled.div `
+  flex: 1 1 24rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+
+  & > nav {
+    margin-bottom: 0.25rem;
+  }
+
+  & > nav a {
+    font-size: 0.95rem;
+  }
+
+  & > p + * {
+    margin-top: 1.25rem;
+  }
+
+  & > h1 {
+    margin: 0;
+  }
+`;
+export const HeaderActions = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
 `;
 export const Subtitle = styled.p `
-  margin: 8px 0 0;
+  margin: 0;
   max-width: 60ch;
   color: inherit;
   opacity: 0.85;

package/dist/components/layout/PageHeader.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.styled.js","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;;;;;;CAMjD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMjC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;CAM/B,CAAC"}
+{"version":3,"file":"PageHeader.styled.js","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,UAAU,GAAG,eAAe,GAAG,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;mBACxB,UAAU;;;;;CAK5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;;;;;;;;CAQlD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;oBASlB,eAAe,GAAG,YAAY;;;yBAGzB,eAAe,GAAG,CAAC;;CAE3C,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBnC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;CAM/B,CAAC"}

package/dist/components/layout/styled.js

@@ -74,7 +74,7 @@ export const pageColumn = css `
 
   > :last-child:not(footer),
   > :has(+ footer) {
-    flex: 1 0 auto;
+    flex-grow: 1;
   }
 `;
 const Page = styled.div `

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@snokam/ui",
   "description": "Snøkam UI library — the single MUI seam. Apps import from here, never from @mui directly.",
-  "version": "6.4.0",
+  "version": "7.0.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "files": [
@@ -176,6 +176,10 @@
       "types": "./dist/components/feedback/index.d.ts",
       "default": "./dist/components/feedback/index.js"
     },
+    "./fullscreen": {
+      "types": "./dist/components/fullscreen/index.d.ts",
+      "default": "./dist/components/fullscreen/index.js"
+    },
     "./form": {
       "types": "./dist/components/form/index.d.ts",
       "default": "./dist/components/form/index.js"