@equinor/cpl-generic-pages-react 0.0.1

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Equinor ASA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+[<-- Go back](../../README.md)
+
+# @equinor/cpl-generic-pages-react
+
+## Installation
+
+```sh
+yarn add @equinor/cpl-generic-pages-react
+```

package/dist/index.d.mts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGAttributes, ReactNode } from 'react';
+import { ButtonProps, IconProps } from '@equinor/eds-core-react';
+
+interface AuthButtonProps extends Omit<ButtonProps, 'onClick' | 'href'> {
+    /**
+     * Here you can pass either a `string` and `URL` object or a callback function.
+     *
+     * If you pass a `string` or `URL`, the button will be rendered as an anchor `<a />` element,
+     * while passing a `function` will result in a `<button />` element with an `onClick` handler.
+     */
+    action: string | URL | (() => void);
+    isLoading?: boolean;
+}
+
+interface EquinorLogoProps {
+    /**
+     * Value in `px`
+     *
+     * @default 24
+     */
+    size?: IconProps['size'];
+    /**
+     * Override fill color if wanted
+     *
+     * @default tokens.colors.infographic.primary__energy_red_100.rgba
+     */
+    fillColor?: SVGAttributes<unknown>['fill'];
+}
+
+type AuthPageProps = {
+    appName: string;
+    /**
+     * If omitted, it falls back to Equinor Logo if not defined will be used.
+     */
+    customLogo?: ReactNode;
+    /**
+     * Custom props for the default Equinor logo. Overrides the default props.
+     *
+     * A use case could be to set the `fillColor` when using other color schemes.
+     */
+    defaultLogoProps?: Partial<EquinorLogoProps>;
+    /**
+     * Used to display information such as "You have been logged out".
+     */
+    description?: string;
+    /**
+     * E.g. `Sign in`
+     */
+    buttonText: string;
+    isLoading?: boolean;
+    buttonProps?: Omit<AuthButtonProps, 'isLoading' | 'action' | 'children'>;
+} & Pick<AuthButtonProps, 'action'>;
+/**
+ * Generic component for building auth related pages. Used as base element for the `LoginPage`,
+ * `LogoutPage` components.
+ */
+declare function AuthPage({ appName, customLogo, action, defaultLogoProps, buttonProps, buttonText, description, isLoading, }: AuthPageProps): react_jsx_runtime.JSX.Element;
+
+type LoginPageProps = Partial<AuthPageProps> & Pick<AuthPageProps, 'appName' | 'action'> & {
+    /**
+     * This sets the default description text (unless the `description` field is explicitly set)
+     */
+    showDefaultSignedOutText?: boolean;
+};
+declare const DEFAULT_SIGNED_OUT_TEXT = "You have been logged out";
+declare function LoginPage({ appName, action, buttonText, buttonProps, customLogo, defaultLogoProps, description, showDefaultSignedOutText, }: LoginPageProps): react_jsx_runtime.JSX.Element;
+
+export { AuthPage, type AuthPageProps, DEFAULT_SIGNED_OUT_TEXT, LoginPage, type LoginPageProps };

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGAttributes, ReactNode } from 'react';
+import { ButtonProps, IconProps } from '@equinor/eds-core-react';
+
+interface AuthButtonProps extends Omit<ButtonProps, 'onClick' | 'href'> {
+    /**
+     * Here you can pass either a `string` and `URL` object or a callback function.
+     *
+     * If you pass a `string` or `URL`, the button will be rendered as an anchor `<a />` element,
+     * while passing a `function` will result in a `<button />` element with an `onClick` handler.
+     */
+    action: string | URL | (() => void);
+    isLoading?: boolean;
+}
+
+interface EquinorLogoProps {
+    /**
+     * Value in `px`
+     *
+     * @default 24
+     */
+    size?: IconProps['size'];
+    /**
+     * Override fill color if wanted
+     *
+     * @default tokens.colors.infographic.primary__energy_red_100.rgba
+     */
+    fillColor?: SVGAttributes<unknown>['fill'];
+}
+
+type AuthPageProps = {
+    appName: string;
+    /**
+     * If omitted, it falls back to Equinor Logo if not defined will be used.
+     */
+    customLogo?: ReactNode;
+    /**
+     * Custom props for the default Equinor logo. Overrides the default props.
+     *
+     * A use case could be to set the `fillColor` when using other color schemes.
+     */
+    defaultLogoProps?: Partial<EquinorLogoProps>;
+    /**
+     * Used to display information such as "You have been logged out".
+     */
+    description?: string;
+    /**
+     * E.g. `Sign in`
+     */
+    buttonText: string;
+    isLoading?: boolean;
+    buttonProps?: Omit<AuthButtonProps, 'isLoading' | 'action' | 'children'>;
+} & Pick<AuthButtonProps, 'action'>;
+/**
+ * Generic component for building auth related pages. Used as base element for the `LoginPage`,
+ * `LogoutPage` components.
+ */
+declare function AuthPage({ appName, customLogo, action, defaultLogoProps, buttonProps, buttonText, description, isLoading, }: AuthPageProps): react_jsx_runtime.JSX.Element;
+
+type LoginPageProps = Partial<AuthPageProps> & Pick<AuthPageProps, 'appName' | 'action'> & {
+    /**
+     * This sets the default description text (unless the `description` field is explicitly set)
+     */
+    showDefaultSignedOutText?: boolean;
+};
+declare const DEFAULT_SIGNED_OUT_TEXT = "You have been logged out";
+declare function LoginPage({ appName, action, buttonText, buttonProps, customLogo, defaultLogoProps, description, showDefaultSignedOutText, }: LoginPageProps): react_jsx_runtime.JSX.Element;
+
+export { AuthPage, type AuthPageProps, DEFAULT_SIGNED_OUT_TEXT, LoginPage, type LoginPageProps };

package/dist/index.js

@@ -0,0 +1,231 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuthPage: () => AuthPage,
+  DEFAULT_SIGNED_OUT_TEXT: () => DEFAULT_SIGNED_OUT_TEXT,
+  LoginPage: () => LoginPage
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/auth/AuthPage/AuthPage.tsx
+var import_eds_core_react2 = require("@equinor/eds-core-react");
+var import_eds_tokens2 = require("@equinor/eds-tokens");
+var import_styled_components2 = require("styled-components");
+
+// src/auth/AuthButton.tsx
+var import_eds_core_react = require("@equinor/eds-core-react");
+var import_styled_components = require("styled-components");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AuthButton(_a) {
+  var _b = _a, {
+    action,
+    isLoading = false,
+    children
+  } = _b, buttonProps = __objRest(_b, [
+    "action",
+    "isLoading",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledButton,
+    __spreadProps(__spreadValues({
+      onClick: typeof action === "function" ? action : void 0,
+      href: typeof action === "function" ? void 0 : action.toString()
+    }, buttonProps), {
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.DotProgress, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerText, { isLoading, children })
+      ]
+    })
+  );
+}
+var InnerText = import_styled_components.styled.span`
+  all: inherit;
+  opacity: ${({ isLoading }) => isLoading ? 0 : 1};
+`;
+var LoadingWrapper = import_styled_components.styled.div`
+  background: inherit;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var StyledButton = (0, import_styled_components.styled)(import_eds_core_react.Button)`
+  padding-left: 2rem;
+  padding-right: 2rem;
+
+  position: relative;
+`;
+
+// src/auth/EquinorLogo.tsx
+var import_eds_tokens = require("@equinor/eds-tokens");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function EquinorLogo({
+  size = 24,
+  fillColor = import_eds_tokens.tokens.colors.infographic.primary__energy_red_100.rgba
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 42 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: "M5.333 10.204v12.892c0 .382.192.735.523.926l11.17 6.435c.474.273 1.079-.069 1.079-.616V16.95c0-.382-.204-.735-.535-.926L6.4 9.589a.712.712 0 0 0-1.067.615ZM39.74.138 23.657 9.403c-.476.275-.77.783-.769 1.333v18.56c0 .787.87 1.279 1.553.886l16.082-9.264a1.52 1.52 0 0 0 .751-1.333V1.025c0-.788-.852-1.28-1.535-.887ZM17.68 39.612l-4.47 2.575a.428.428 0 0 0-.214.37v5.158c0 .22.242.356.432.247l4.469-2.575a.422.422 0 0 0 .209-.37v-5.158a.285.285 0 0 0-.427-.247Zm-2.605-4.759L8.38 30.98a.642.642 0 0 0-.64 0l-6.694 3.873a.427.427 0 0 0 0 .739l6.693 3.872a.638.638 0 0 0 .641 0l6.694-3.872a.427.427 0 0 0 0-.739Zm10.775.698 2.974 1.72a.568.568 0 0 0 .57 0l2.973-1.72a.38.38 0 0 0 0-.657l-2.974-1.72a.568.568 0 0 0-.57 0l-2.973 1.72a.38.38 0 0 0 0 .657Zm-2.392 4.141 2.977 1.715a.57.57 0 0 1 .285.494l-.004 3.435a.38.38 0 0 1-.569.329L23.17 43.95a.567.567 0 0 1-.28-.494l-.001-3.435a.38.38 0 0 1 .569-.329Z",
+          fill: fillColor
+        }
+      )
+    }
+  );
+}
+
+// src/auth/AuthPage/AuthPage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AuthPage({
+  appName,
+  customLogo,
+  action,
+  defaultLogoProps,
+  buttonProps,
+  buttonText,
+  description,
+  isLoading
+}) {
+  if (action === void 0) {
+    throw new Error("Missing prop 'action'");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PageWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(HeaderWrapper, { children: [
+      customLogo != null ? customLogo : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EquinorLogo, __spreadValues({ size: 48 }, defaultLogoProps)),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledHeading, { variant: "h3", as: "h1", children: appName })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ContentWrapper, { children: [
+      description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledDescription, { variant: "h6", as: "p", children: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AuthButton, __spreadProps(__spreadValues({ action, isLoading }, buttonProps), { children: buttonText }))
+    ] })
+  ] });
+}
+var ContentWrapper = import_styled_components2.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 16px;
+`;
+var PageWrapper = import_styled_components2.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 32px;
+
+  height: 100%;
+  padding: 16px;
+`;
+var HeaderWrapper = import_styled_components2.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 10px;
+`;
+var StyledHeading = (0, import_styled_components2.styled)(import_eds_core_react2.Typography)`
+  color: ${import_eds_tokens2.tokens.colors.text.static_icons__default.rgba};
+  margin: 0;
+  font-weight: 500;
+`;
+var StyledDescription = (0, import_styled_components2.styled)(import_eds_core_react2.Typography)`
+  color: ${import_eds_tokens2.tokens.colors.text.static_icons__default.rgba};
+  margin: 0;
+`;
+
+// src/auth/LoginPage/LoginPage.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_SIGNED_OUT_TEXT = "You have been logged out";
+function LoginPage({
+  appName,
+  action,
+  buttonText = "Sign in",
+  buttonProps,
+  customLogo,
+  defaultLogoProps,
+  description,
+  showDefaultSignedOutText
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    AuthPage,
+    {
+      appName,
+      action,
+      buttonText,
+      buttonProps,
+      customLogo,
+      defaultLogoProps,
+      description: typeof description === "string" ? description : showDefaultSignedOutText ? DEFAULT_SIGNED_OUT_TEXT : description
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthPage,
+  DEFAULT_SIGNED_OUT_TEXT,
+  LoginPage
+});

package/dist/index.mjs

@@ -0,0 +1,205 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/auth/AuthPage/AuthPage.tsx
+import { Typography } from "@equinor/eds-core-react";
+import { tokens as tokens2 } from "@equinor/eds-tokens";
+import { styled as styled2 } from "styled-components";
+
+// src/auth/AuthButton.tsx
+import { Button, DotProgress } from "@equinor/eds-core-react";
+import { styled } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AuthButton(_a) {
+  var _b = _a, {
+    action,
+    isLoading = false,
+    children
+  } = _b, buttonProps = __objRest(_b, [
+    "action",
+    "isLoading",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    StyledButton,
+    __spreadProps(__spreadValues({
+      onClick: typeof action === "function" ? action : void 0,
+      href: typeof action === "function" ? void 0 : action.toString()
+    }, buttonProps), {
+      children: [
+        isLoading && /* @__PURE__ */ jsx(LoadingWrapper, { children: /* @__PURE__ */ jsx(DotProgress, {}) }),
+        /* @__PURE__ */ jsx(InnerText, { isLoading, children })
+      ]
+    })
+  );
+}
+var InnerText = styled.span`
+  all: inherit;
+  opacity: ${({ isLoading }) => isLoading ? 0 : 1};
+`;
+var LoadingWrapper = styled.div`
+  background: inherit;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var StyledButton = styled(Button)`
+  padding-left: 2rem;
+  padding-right: 2rem;
+
+  position: relative;
+`;
+
+// src/auth/EquinorLogo.tsx
+import { tokens } from "@equinor/eds-tokens";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function EquinorLogo({
+  size = 24,
+  fillColor = tokens.colors.infographic.primary__energy_red_100.rgba
+}) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 42 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M5.333 10.204v12.892c0 .382.192.735.523.926l11.17 6.435c.474.273 1.079-.069 1.079-.616V16.95c0-.382-.204-.735-.535-.926L6.4 9.589a.712.712 0 0 0-1.067.615ZM39.74.138 23.657 9.403c-.476.275-.77.783-.769 1.333v18.56c0 .787.87 1.279 1.553.886l16.082-9.264a1.52 1.52 0 0 0 .751-1.333V1.025c0-.788-.852-1.28-1.535-.887ZM17.68 39.612l-4.47 2.575a.428.428 0 0 0-.214.37v5.158c0 .22.242.356.432.247l4.469-2.575a.422.422 0 0 0 .209-.37v-5.158a.285.285 0 0 0-.427-.247Zm-2.605-4.759L8.38 30.98a.642.642 0 0 0-.64 0l-6.694 3.873a.427.427 0 0 0 0 .739l6.693 3.872a.638.638 0 0 0 .641 0l6.694-3.872a.427.427 0 0 0 0-.739Zm10.775.698 2.974 1.72a.568.568 0 0 0 .57 0l2.973-1.72a.38.38 0 0 0 0-.657l-2.974-1.72a.568.568 0 0 0-.57 0l-2.973 1.72a.38.38 0 0 0 0 .657Zm-2.392 4.141 2.977 1.715a.57.57 0 0 1 .285.494l-.004 3.435a.38.38 0 0 1-.569.329L23.17 43.95a.567.567 0 0 1-.28-.494l-.001-3.435a.38.38 0 0 1 .569-.329Z",
+          fill: fillColor
+        }
+      )
+    }
+  );
+}
+
+// src/auth/AuthPage/AuthPage.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AuthPage({
+  appName,
+  customLogo,
+  action,
+  defaultLogoProps,
+  buttonProps,
+  buttonText,
+  description,
+  isLoading
+}) {
+  if (action === void 0) {
+    throw new Error("Missing prop 'action'");
+  }
+  return /* @__PURE__ */ jsxs2(PageWrapper, { children: [
+    /* @__PURE__ */ jsxs2(HeaderWrapper, { children: [
+      customLogo != null ? customLogo : /* @__PURE__ */ jsx3(EquinorLogo, __spreadValues({ size: 48 }, defaultLogoProps)),
+      /* @__PURE__ */ jsx3(StyledHeading, { variant: "h3", as: "h1", children: appName })
+    ] }),
+    /* @__PURE__ */ jsxs2(ContentWrapper, { children: [
+      description && /* @__PURE__ */ jsx3(StyledDescription, { variant: "h6", as: "p", children: description }),
+      /* @__PURE__ */ jsx3(AuthButton, __spreadProps(__spreadValues({ action, isLoading }, buttonProps), { children: buttonText }))
+    ] })
+  ] });
+}
+var ContentWrapper = styled2.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 16px;
+`;
+var PageWrapper = styled2.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 32px;
+
+  height: 100%;
+  padding: 16px;
+`;
+var HeaderWrapper = styled2.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 10px;
+`;
+var StyledHeading = styled2(Typography)`
+  color: ${tokens2.colors.text.static_icons__default.rgba};
+  margin: 0;
+  font-weight: 500;
+`;
+var StyledDescription = styled2(Typography)`
+  color: ${tokens2.colors.text.static_icons__default.rgba};
+  margin: 0;
+`;
+
+// src/auth/LoginPage/LoginPage.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DEFAULT_SIGNED_OUT_TEXT = "You have been logged out";
+function LoginPage({
+  appName,
+  action,
+  buttonText = "Sign in",
+  buttonProps,
+  customLogo,
+  defaultLogoProps,
+  description,
+  showDefaultSignedOutText
+}) {
+  return /* @__PURE__ */ jsx4(
+    AuthPage,
+    {
+      appName,
+      action,
+      buttonText,
+      buttonProps,
+      customLogo,
+      defaultLogoProps,
+      description: typeof description === "string" ? description : showDefaultSignedOutText ? DEFAULT_SIGNED_OUT_TEXT : description
+    }
+  );
+}
+export {
+  AuthPage,
+  DEFAULT_SIGNED_OUT_TEXT,
+  LoginPage
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@equinor/cpl-generic-pages-react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "dependencies": {
+    "@equinor/eds-icons": "^0.21.0",
+    "@equinor/eds-tokens": "^0.9.2"
+  },
+  "devDependencies": {
+    "@equinor/eds-core-react": "^0.42.5",
+    "@storybook/react": "^8.5.2",
+    "@storybook/test": "^8.5.2",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/styled-components": "^5.1.34",
+    "eslint": "^8.57.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.14",
+    "tsup": "^8.3.6",
+    "eslint-config-custom": "0.0.6",
+    "tsconfig": "0.0.1"
+  },
+  "peerDependencies": {
+    "@equinor/eds-core-react": ">=0.42.1",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "styled-components": ">=5.3.11"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "lint": "TIMING=1 eslint . --fix"
+  }
+}