@snokam/ui 2.0.3 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/snokam/components/compare/@snokam/ui@2.1.0...@snokam/ui@2.2.0) (2026-10-04)
+
+### Features
+
+- **ui:** solid footer with a wave on system pages; Snøsky wordmark ([#2584](https://github.com/snokam/components/issues/2584)) ([5da5509](https://github.com/snokam/components/commit/5da55096e5aaa5804110c49d9b7212bd6c7bc0a1))
+
+# [2.1.0](https://github.com/snokam/components/compare/@snokam/ui@2.0.3...@snokam/ui@2.1.0) (2026-10-03)
+
+### Features
+
+- **pages:** blobs on every centred-box page, readable consent card, full integration names ([#2566](https://github.com/snokam/components/issues/2566)) ([6076941](https://github.com/snokam/components/commit/60769412cc3a1cfd2d239d2377d71a622fb99f94))
+
 ## [2.0.3](https://github.com/snokam/components/compare/@snokam/ui@2.0.1...@snokam/ui@2.0.3) (2026-09-24)
 
 **Note:** Version bump only for package @snokam/ui

package/dist/components/animated-blobs/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/animated-blobs/styled.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;UACT,MAAM;SACP,MAAM;UACL,MAAM;WACL,MAAM;YACL,MAAM;qBACG,MAAM;yGAmCxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;eAA2B,MAAM;yGAU5D,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAOvB,CAAC"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/animated-blobs/styled.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;UACT,MAAM;SACP,MAAM;UACL,MAAM;WACL,MAAM;YACL,MAAM;qBACG,MAAM;yGA4CxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;eAA2B,MAAM;yGAU5D,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAOvB,CAAC"}

package/dist/components/animated-blobs/styled.js

@@ -24,7 +24,7 @@ export const BlobLayer = styled.div `
   position: absolute;
   inset: 0;
   pointer-events: none;
-  overflow: hidden;
+  overflow: clip;
 `;
 export const Blob = styled.div `
   position: absolute;
@@ -46,6 +46,15 @@ export const Blob = styled.div `
     height: ${(p) => p.size * 0.5}px;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+
+    svg path,
+    svg circle {
+      animation: none;
+    }
+  }
+
   svg {
     width: 100%;
     height: 100%;

package/dist/components/animated-blobs/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/animated-blobs/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,GAAG,SAAS,CAAA;;;;;CAKvB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;;CAIvB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;CAGvB,CAAC;AAEF,MAAM,KAAK,GAAG,SAAS,CAAA;;;CAGtB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAO5B;;WAES,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;YACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;SAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG;UACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;;;;;;eAMR,CAAC,CAAC,EAAE,EAAE,CACjB,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACxE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,GAAG,CAAC;qBACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;;;aAG3B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG;cAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG;;;;;;;;;;cAUnB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;;mBAET,KAAK;yBACC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;;;CAGjD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;MAM1D,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;MAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;;CAGvB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOpC,CAAC"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/animated-blobs/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,GAAG,SAAS,CAAA;;;;;CAKvB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;;CAIvB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;CAGvB,CAAC;AAEF,MAAM,KAAK,GAAG,SAAS,CAAA;;;CAGtB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAO5B;;WAES,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;YACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;SAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG;UACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;;;;;;eAMR,CAAC,CAAC,EAAE,EAAE,CACjB,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACxE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,GAAG,CAAC;qBACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;;;aAG3B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG;cAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG;;;;;;;;;;;;;;;;;;;cAmBnB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;;mBAET,KAAK;yBACC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;;;CAGjD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;MAM1D,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;MAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;;CAGvB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOpC,CAAC"}

package/dist/components/system-page/index.d.ts

@@ -2,14 +2,15 @@ import { ReactNode } from "react";
 export interface SystemPageProps {
     code?: string;
     icon?: ReactNode;
-    title: ReactNode;
+    title?: ReactNode;
     detail?: ReactNode;
     message?: ReactNode;
     actions?: ReactNode;
     header?: ReactNode;
     footer?: ReactNode;
+    children?: ReactNode;
 }
-export declare function SystemPage({ code, icon, title, detail, message, actions, header, footer, }: SystemPageProps): import("react").JSX.Element;
+export declare function SystemPage({ header, footer, children, ...message }: SystemPageProps): import("react").JSX.Element;
 export declare const SystemPageAction: {
     Primary: import("@emotion/styled").StyledComponent<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, keyof import("next/link").LinkProps<any>> & import("next/link").LinkProps<any> & {
         children?: React.ReactNode | undefined;

package/dist/components/system-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,GACP,EAAE,eAAe,+BAqBjB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;CAK5B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2BD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,OAAO,EACX,EAAE,eAAe,+BA0BjB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;CAK5B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/system-page/index.js

@@ -1,9 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatedBlobs } from "../animated-blobs";
+import Layout, { AnimationType, LayoutTheme, TransitionType } from "../layout";
+import { ThemeScope } from "../../theme/theme-scope";
 import * as Styled from "./styled";
-export function SystemPage({ code, icon, title, detail, message, actions, header, footer, }) {
-    return (_jsxs(Styled.Shell, { children: [_jsx(AnimatedBlobs, {}), header, _jsx(Styled.Band, { children: _jsxs(Styled.Content, { children: [icon && _jsx(Styled.IconBadge, { children: icon }), code && _jsx(Styled.Code, { "aria-hidden": true, children: code }), _jsx(Styled.Title, { children: title }), detail && _jsx(Styled.Detail, { children: detail }), message && _jsx(Styled.Message, { children: message }), actions && _jsx(Styled.Actions, { children: actions })] }) }), footer] }));
+function SystemPageMessage({ code, icon, title, detail, message, actions, }) {
+    return (_jsxs(Styled.Content, { children: [icon && _jsx(Styled.IconBadge, { children: icon }), code && _jsx(Styled.Code, { "aria-hidden": true, children: code }), title && _jsx(Styled.Title, { children: title }), detail && _jsx(Styled.Detail, { children: detail }), message && _jsx(Styled.Message, { children: message }), actions && _jsx(Styled.Actions, { children: actions })] }));
+}
+export function SystemPage({ header, footer, children, ...message }) {
+    return (_jsxs(Styled.Shell, { children: [_jsx(Layout.Container, { theme: LayoutTheme.Dark, animation: { type: AnimationType.Blobs }, transitions: footer ? { bottom: { type: TransitionType.Wave } } : undefined, children: _jsxs(Styled.Backdrop, { children: [header, _jsx(ThemeScope, { theme: "dark", as: Styled.Band, children: children ? (_jsx(Styled.Stage, { children: children })) : (_jsx(SystemPageMessage, { ...message })) })] }) }), footer] }));
 }
 export const SystemPageAction = {
     Primary: Styled.PrimaryLink,

package/dist/components/system-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAanC,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,GACU;IAChB,OAAO,CACL,MAAC,MAAM,CAAC,KAAK,eACX,KAAC,aAAa,KAAG,EAEhB,MAAM,EAEP,KAAC,MAAM,CAAC,IAAI,cACV,MAAC,MAAM,CAAC,OAAO,eACZ,IAAI,IAAI,KAAC,MAAM,CAAC,SAAS,cAAE,IAAI,GAAoB,EACnD,IAAI,IAAI,KAAC,MAAM,CAAC,IAAI,mCAAc,IAAI,GAAe,EACtD,KAAC,MAAM,CAAC,KAAK,cAAE,KAAK,GAAgB,EACnC,MAAM,IAAI,KAAC,MAAM,CAAC,MAAM,cAAE,MAAM,GAAiB,EACjD,OAAO,IAAI,KAAC,MAAM,CAAC,OAAO,cAAE,OAAO,GAAkB,EACrD,OAAO,IAAI,KAAC,MAAM,CAAC,OAAO,cAAE,OAAO,GAAkB,IACvC,GACL,EAEb,MAAM,IACM,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC,WAAW;IAC3B,aAAa,EAAE,MAAM,CAAC,aAAa;IACnC,KAAK,EAAE,MAAM,CAAC,WAAW;IACzB,SAAS,EAAE,MAAM,CAAC,SAAS;CAC5B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,MAAM,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAmBnC,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,GACgB;IACvB,OAAO,CACL,MAAC,MAAM,CAAC,OAAO,eACZ,IAAI,IAAI,KAAC,MAAM,CAAC,SAAS,cAAE,IAAI,GAAoB,EACnD,IAAI,IAAI,KAAC,MAAM,CAAC,IAAI,mCAAc,IAAI,GAAe,EACrD,KAAK,IAAI,KAAC,MAAM,CAAC,KAAK,cAAE,KAAK,GAAgB,EAC7C,MAAM,IAAI,KAAC,MAAM,CAAC,MAAM,cAAE,MAAM,GAAiB,EACjD,OAAO,IAAI,KAAC,MAAM,CAAC,OAAO,cAAE,OAAO,GAAkB,EACrD,OAAO,IAAI,KAAC,MAAM,CAAC,OAAO,cAAE,OAAO,GAAkB,IACvC,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,OAAO,EACM;IAChB,OAAO,CACL,MAAC,MAAM,CAAC,KAAK,eACX,KAAC,MAAM,CAAC,SAAS,IACf,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,SAAS,EAAE,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,EAAE,EACxC,WAAW,EACT,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,YAGhE,MAAC,MAAM,CAAC,QAAQ,eACb,MAAM,EAEP,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YACrC,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,CAAC,KAAK,cAAE,QAAQ,GAAgB,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,OAAK,OAAO,GAAI,CACnC,GACU,IACG,GACD,EAElB,MAAM,IACM,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC,WAAW;IAC3B,aAAa,EAAE,MAAM,CAAC,aAAa;IACnC,KAAK,EAAE,MAAM,CAAC,WAAW;IACzB,SAAS,EAAE,MAAM,CAAC,SAAS;CAC5B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/system-page/styled.d.ts

@@ -2,6 +2,10 @@ export declare const Shell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Band: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -10,6 +14,10 @@ export declare const Content: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Stage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconBadge: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/system-page/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;;;yGAwBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;mGAQhB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAYnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;yGAgBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;qHAQhB,CAAC;AAEF,eAAO,MAAM,KAAK;;;iHAKjB,CAAC;AAEF,eAAO,MAAM,MAAM;;;mGAUlB,CAAC;AAEF,eAAO,MAAM,OAAO;;;qHAKnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAMnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAmBvB,CAAC;AAwBF,eAAO,MAAM,WAAW;;;qHAEvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;qHAKrB,CAAC;AAEF,eAAO,MAAM,aAAa;;;qHAoBzB,CAAC"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;;;yGAqBjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yGAYpB,CAAC;AAEF,eAAO,MAAM,IAAI;;;mGAShB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAYnB,CAAC;AAEF,eAAO,MAAM,KAAK;;;yGAWjB,CAAC;AAEF,eAAO,MAAM,SAAS;;;yGAgBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;qHAQhB,CAAC;AAEF,eAAO,MAAM,KAAK;;;iHAKjB,CAAC;AAEF,eAAO,MAAM,MAAM;;;mGAUlB,CAAC;AAEF,eAAO,MAAM,OAAO;;;qHAKnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAMnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAmBvB,CAAC;AAwBF,eAAO,MAAM,WAAW;;;qHAEvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;qHAKrB,CAAC;AAEF,eAAO,MAAM,aAAa;;;qHAoBzB,CAAC"}

package/dist/components/system-page/styled.js

@@ -9,11 +9,8 @@ const rise = keyframes `
 export const Shell = styled.div `
   position: relative;
 
-  /* The blob field is the page background: the chrome sits on it, not on its own fill. */
-  > header,
   > footer {
     flex: none;
-    background-color: transparent;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -31,6 +28,19 @@ export const Shell = styled.div `
   background: var(--color-primary, #071d41);
   color: var(--color-light-blue, #e1f8ff);
 `;
+export const Backdrop = styled.div `
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > header {
+    flex: none;
+    background-color: transparent;
+  }
+`;
 export const Band = styled.main `
   position: relative;
   z-index: 1;
@@ -38,7 +48,8 @@ export const Band = styled.main `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 3rem 1.5rem 4rem;
+  padding: 3rem 1.5rem calc(4rem + 100px);
+  color: var(--color-light-blue, #e1f8ff);
 `;
 export const Content = styled.div `
   width: 100%;
@@ -53,6 +64,18 @@ export const Content = styled.div `
     animation: none;
   }
 `;
+export const Stage = styled.div `
+  width: 100%;
+  max-width: 65rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: ${rise} 0.5s ease-out both;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
 export const IconBadge = styled.div `
   display: flex;
   align-items: center;

package/dist/components/system-page/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,IAAI,GAAG,SAAS,CAAA;;;CAGrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwB9B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;CAQ9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;eAOlB,IAAI;;;;;CAKlB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBlC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;;CAQ3B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;CAmBtC,CAAC;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBhB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;IACpC,KAAK;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA;IAC7B,KAAK;;;;CAIR,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;CAoBzC,CAAC"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,IAAI,GAAG,SAAS,CAAA;;;CAGrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqB9B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAYjC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;CAS9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;eAOlB,IAAI;;;;;CAKlB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;eAMhB,IAAI;;;;;CAKlB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBlC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;;CAQ3B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;CAmBtC,CAAC;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBhB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;IACpC,KAAK;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA;IAC7B,KAAK;;;;CAIR,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;CAoBzC,CAAC"}

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": "2.0.3",
+  "version": "2.2.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "files": [
@@ -360,6 +360,10 @@
       "types": "./dist/components/system-theme-tag/index.d.ts",
       "default": "./dist/components/system-theme-tag/index.js"
     },
+    "./system-page": {
+      "types": "./dist/components/system-page/index.d.ts",
+      "default": "./dist/components/system-page/index.js"
+    },
     "./okr": {
       "types": "./dist/components/okr/index.d.ts",
       "default": "./dist/components/okr/index.js"