@uxf/cms 10.0.0-beta.9 → 10.0.1

package/pages/form-page/form-page.js

@@ -29,14 +29,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormPage = void 0;
 const router_1 = __importDefault(require("next/router"));
 const react_1 = __importStar(require("react"));
-const form_1 = require("./form");
+const react_hook_form_1 = require("react-hook-form");
 const api_1 = require("../../api");
 const config_1 = require("../../config");
 const with_authenticate_1 = require("../../deprecated/hoc/with-authenticate");
 const ValidationError_1 = require("../../errors/ValidationError");
 const base_field_1 = require("./base-field");
+const form_1 = require("./form");
 const mapper_1 = require("./mapper");
-const react_hook_form_1 = require("react-hook-form");
 const resolve = (value, ctx) => (typeof value === "function" ? value(ctx) : value !== null && value !== void 0 ? value : null);
 const FormPage = (config) => {
     var _a, _b, _c;
@@ -44,9 +44,9 @@ const FormPage = (config) => {
     const entityAliasResolver = (_b = config.entityAlias) !== null && _b !== void 0 ? _b : (({ query }) => (query.entityAlias ? `${query.entityAlias}` : null));
     const onSaveDone = (_c = config.onSaveDone) !== null && _c !== void 0 ? _c : router_1.default.back;
     const Component = (props) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const { formSchema, entityAlias, entityId, entityMetaSchema } = props;
-        const formApi = (0, react_hook_form_1.useForm)({ defaultValues: ((_a = props.initialValues) !== null && _a !== void 0 ? _a : {}) });
+        const formApi = (0, react_hook_form_1.useForm)({ defaultValues: props.initialValues });
         const onSubmit = (0, react_1.useCallback)(async (values) => {
             try {
                 const newInitialValues = config.onSave
@@ -65,8 +65,8 @@ const FormPage = (config) => {
                 return { ["ERROR"]: "Error" }; // TODO
             }
         }, [entityAlias, entityId, formSchema, formApi]);
-        const FieldComponentElement = (_c = (_b = config.ui) === null || _b === void 0 ? void 0 : _b.Field) !== null && _c !== void 0 ? _c : base_field_1.BaseField;
-        const Layout = (_e = (_d = config.ui) === null || _d === void 0 ? void 0 : _d.Layout) !== null && _e !== void 0 ? _e : react_1.default.createElement("div", null);
+        const FieldComponentElement = (_b = (_a = config.ui) === null || _a === void 0 ? void 0 : _a.Field) !== null && _b !== void 0 ? _b : base_field_1.BaseField;
+        const Layout = (_d = (_c = config.ui) === null || _c === void 0 ? void 0 : _c.Layout) !== null && _d !== void 0 ? _d : react_1.default.createElement("div", null);
         const Content = (react_1.default.createElement(form_1.Form, { Field: FieldComponentElement, entityAlias: entityAlias, formApi: formApi, id: `${entityAlias}-form`, isEditing: !!entityId, onSubmit: onSubmit, schema: formSchema }));
         return (0, react_1.cloneElement)(typeof Layout === "function" ? Layout(entityMetaSchema) : Layout, {
             children: Content,
@@ -82,7 +82,7 @@ const FormPage = (config) => {
             throw new Error(`Entity meta schema for alias ${entityAlias} does not exist.`);
         }
         const formSchema = await (0, api_1.getFormSchema)(ctx, { entityAlias }).then((r) => r.data);
-        let initialValues = null;
+        let initialValues; // TODO vejvis
         if (typeof config.initialValues === "function") {
             initialValues = await config.initialValues(ctx);
         }

package/pages/form-page/form.d.ts

@@ -1,8 +1,8 @@
-import React, { FC } from "react";
 import { FormProps as UXFFormProps } from "@uxf/form/form";
+import React, { FC } from "react";
+import { FieldValues, FormState } from "react-hook-form";
 import { FormSchemaResponse } from "../../api";
 import { FieldComponent } from "./types";
-import { FieldValues, FormState } from "react-hook-form";
 type SubmitButtonComponent<TFieldValues extends FieldValues = FieldValues> = FC<{
     formState: FormState<TFieldValues>;
 }>;

package/pages/form-page/form.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
-const react_1 = __importDefault(require("react"));
 const form_1 = require("@uxf/form/form");
-const base_field_1 = require("./base-field");
 const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
 const widget_1 = require("../../ui/widget");
+const base_field_1 = require("./base-field");
 const BaseSubmitButton = (props) => {
     const { isSubmitting } = props.formState;
     return (react_1.default.createElement(button_1.Button, { type: "submit", disabled: isSubmitting }, "Ulo\u017Eit"));

package/pages/form-page/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./form-page";
 export * from "./base-field";
-export * from "./types";
-export * from "./mapper";
 export * from "./form";
+export * from "./form-page";
+export * from "./mapper";
+export * from "./types";

package/pages/form-page/index.js

@@ -14,8 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./form-page"), exports);
 __exportStar(require("./base-field"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./mapper"), exports);
 __exportStar(require("./form"), exports);
+__exportStar(require("./form-page"), exports);
+__exportStar(require("./mapper"), exports);
+__exportStar(require("./types"), exports);

package/pages/form-page/types.d.ts

@@ -1,6 +1,6 @@
-import { EntityMetaSchema, FieldSchemaResponse, FormSchemaResponse } from "../../api";
 import { FC, ReactElement } from "react";
 import { Control } from "react-hook-form";
+import { EntityMetaSchema, FieldSchemaResponse, FormSchemaResponse } from "../../api";
 export interface FieldProps {
     fieldSchema: FieldSchemaResponse;
     entityAlias: string;

package/pages/grid-page/grid-page.js

@@ -27,21 +27,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridPage = exports.dataGridLoader = void 0;
-const tailwindui_1 = require("@uxf/data-grid/tailwindui");
 const data_grid_1 = require("@uxf/data-grid");
+const tailwindui_1 = require("@uxf/data-grid/tailwindui");
 const router_1 = require("@uxf/router");
+const context_1 = require("@uxf/ui/context");
+const icon_1 = require("@uxf/ui/icon");
 const router_2 = __importDefault(require("next/router"));
 const qs_1 = require("qs");
 const react_1 = __importStar(require("react"));
 const url_1 = require("url");
 const api_1 = require("../../api");
+const config_1 = require("../../config");
 const with_authenticate_1 = require("../../deprecated/hoc/with-authenticate");
 const api_2 = require("../../lib/api");
 const get_initial_props_helper_1 = require("./get-initial-props-helper");
 const use_hidden_columns_1 = require("./use-hidden-columns");
-const config_1 = require("../../config");
-const icon_1 = require("@uxf/ui/icon");
-const context_1 = require("@uxf/ui/context");
 const { axiosRequest } = (0, api_2.createAxiosInstance)();
 const dataGridLoader = (gridName, request) => {
     return axiosRequest(null, `/api/cms/datagrid/${gridName}`, "get", null, request).then((r) => r.data);
@@ -84,12 +84,12 @@ const GridPageComponent = (props) => {
     ].filter(Boolean);
     return (react_1.default.createElement(Layout, { key: entityAlias, title: (_a = title !== null && title !== void 0 ? title : metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.title) !== null && _a !== void 0 ? _a : "" },
         react_1.default.createElement("div", { className: "mb-10" },
-            react_1.default.createElement(tailwindui_1.DataGrid, { noBorder: true, callbackRef: callbackRef, schema: gridSchema, initialState: query.filter ? (0, router_1.queryParamToString)(query.filter) : undefined, title: title !== null && title !== void 0 ? title : metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.title, gridName: entityAlias, loader: loader !== null && loader !== void 0 ? loader : universalLoader, ...hiddenColumnProps, onOpen: onOpen && ((row) => onOpen(entityAlias, row, actionsBag)), getOpenUrl: getOpenUrl && ((row) => getOpenUrl(entityAlias, row)), onEdit: onEdit && ((row) => onEdit(entityAlias, row, actionsBag)), getEditUrl: getEditUrl && ((row) => getEditUrl(entityAlias, row)), onRemove: onRemove && ((row) => onRemove(entityAlias, row, actionsBag)), rowHeight: rowHeight, defaultConfig: defaultConfig, ui: dataGridUi, selectedRows: selectable ? selectedRows : undefined, onChangeSelectedRows: selectable ? setSelectedRows : undefined, customActions: cActions, mode: (_b = uiContextValues === null || uiContextValues === void 0 ? void 0 : uiContextValues.colorScheme.getUserSettings()) !== null && _b !== void 0 ? _b : "light" }))));
+            react_1.default.createElement(tailwindui_1.DataGrid, { noBorder: true, callbackRef: callbackRef, schema: gridSchema, initialState: query.filter ? (0, router_1.queryParamToString)(query.filter) : undefined, title: title !== null && title !== void 0 ? title : metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.title, gridName: entityAlias, loader: loader !== null && loader !== void 0 ? loader : universalLoader, ...hiddenColumnProps, onOpen: onOpen && ((row) => onOpen(entityAlias, row, actionsBag)), getOpenUrl: getOpenUrl && ((row) => getOpenUrl(entityAlias, row)), onEdit: onEdit && ((row) => onEdit(entityAlias, row, actionsBag)), getEditUrl: getEditUrl && ((row) => getEditUrl(entityAlias, row)), onRemove: onRemove && ((row) => onRemove(entityAlias, row, actionsBag)), rowHeight: rowHeight, defaultConfig: defaultConfig, ui: dataGridUi, selectedRows: selectable ? selectedRows : undefined, onChangeSelectedRows: selectable ? setSelectedRows : undefined, customActions: cActions, mode: (_b = uiContextValues === null || uiContextValues === void 0 ? void 0 : uiContextValues.colorScheme.getUserSettings()) !== null && _b !== void 0 ? _b : "light", onCsvDownload: (r) => window.open(`/api/cms/datagrid/export/${entityAlias}?${(0, qs_1.stringify)(r)}`) }))));
 };
 GridPageComponent.displayName = "GridPageComponent";
 const GridPage = (config) => {
     const Component = (props) => {
-        return (react_1.default.createElement(GridPageComponent, { ...props, title: config.title, loader: config.loader, onEdit: config.onEdit, getEditUrl: config.getEditUrl, onAdd: config.onAdd, onRemove: config.onRemove, onOpen: config.onOpen, getOpenUrl: config.getOpenUrl, rowHeight: config.rowHeight, defaultConfig: config.defaultConfig, AddIcon: config.AddIcon, onAddTitle: config.onAddTitle, ui: config.ui, selectable: config.selectable }));
+        return (react_1.default.createElement(GridPageComponent, { ...props, AddIcon: config.AddIcon, customActions: config.customActions, defaultConfig: config.defaultConfig, getEditUrl: config.getEditUrl, getOpenUrl: config.getOpenUrl, loader: config.loader, onAdd: config.onAdd, onAddTitle: config.onAddTitle, onEdit: config.onEdit, onOpen: config.onOpen, onRemove: config.onRemove, rowHeight: config.rowHeight, selectable: config.selectable, title: config.title, ui: config.ui }));
     };
     Component.getInitialProps = async (ctx) => {
         const entityAlias = typeof config.entityAlias === "function" ? config.entityAlias(ctx) : config.entityAlias;

package/pages/grid-page/types.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="node" />
-import { DataGridProps, Loader, Schema, UIComponents as DataGridUIComponents } from "@uxf/data-grid";
+import { DataGridProps, UIComponents as DataGridUIComponents, Loader, Schema } from "@uxf/data-grid";
 import { NextPageContext } from "next";
 import { ParsedUrlQuery } from "querystring";
+import { FC, ReactElement } from "react";
 import { EntityMetaSchema } from "../../api";
 import { LayoutProps } from "../../lib/layout";
-import { FC, ReactElement } from "react";
 export type LayoutComponent = FC<LayoutProps>;
 export type ActionsBag = {
     reload: () => void;

package/pages/invite-user-page/invite-user-page.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/pages/invite-user-page/types.d.ts

@@ -1,6 +1,6 @@
+import { MultiComboboxOption } from "@uxf/ui/multi-combobox";
 import { ReactElement } from "react";
 import { InviteUserFormData } from "../../forms/invite-user-form";
-import { MultiComboboxOption } from "@uxf/ui/multi-combobox";
 export interface InviteUserPageConfig {
     allowedRoles?: string[];
     onSubmit: (values: InviteUserFormData) => Promise<void>;

package/pages/login-page/login-page.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginPage = void 0;
+const router_1 = __importDefault(require("next/router"));
 const react_1 = __importStar(require("react"));
 const api_1 = require("../../api");
 const config_1 = require("../../config");
 const login_form_1 = require("../../forms/login-form");
 const login_layout_1 = require("../../lib/login-layout");
-const router_1 = __importDefault(require("next/router"));
 const INITIAL_VALUES = {
     username: "",
     password: "",

package/pages/renew-password-page/types.d.ts

@@ -1,7 +1,7 @@
 import { NextPageContext } from "next";
 import { ReactNode } from "react";
-import { RenewPasswordFormData } from "../../forms/renew-password-form";
 import { SubmitErrorHandler, UseControllerProps } from "react-hook-form";
+import { RenewPasswordFormData } from "../../forms/renew-password-form";
 export interface RenewPasswordPageConfig {
     pageTitle?: string;
     title: ReactNode;

package/ui/avatar/avatar.d.ts

@@ -0,0 +1,11 @@
+import { ImageSource } from "@uxf/core/utils/resizer";
+import React, { HTMLAttributes } from "react";
+import { AvatarSize, AvatarVariant } from "./theme";
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, "src"> {
+    alt?: string;
+    size?: AvatarSize;
+    src?: ImageSource | null;
+    letters?: string;
+    variant?: AvatarVariant;
+}
+export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;

package/ui/avatar/avatar.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const raster_image_1 = require("@uxf/ui/raster-image");
+const react_1 = __importStar(require("react"));
+const AVATAR_SIZES = {
+    sm: 40,
+    default: 88,
+    lg: 120,
+};
+const Component = (props, ref) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { alt, className, size = "default", src, letters, variant = "default", ...restProps } = props;
+    const avatarClassName = (0, cx_1.cx)("cms-avatar", `cms-avatar--size-${size}`, `cms-avatar--variant-${variant}`, className);
+    const imgAlt = alt !== null && alt !== void 0 ? alt : "";
+    if (src) {
+        return (react_1.default.createElement("span", { className: avatarClassName, ref: ref, ...restProps },
+            react_1.default.createElement(raster_image_1.RasterImage, { alt: imgAlt, className: "cms-avatar__image", height: AVATAR_SIZES[size], loading: "lazy", mode: "cover", src: src, width: AVATAR_SIZES[size] })));
+    }
+    return (react_1.default.createElement("div", { className: avatarClassName, ...restProps }, letters));
+};
+exports.Avatar = (0, react_1.memo)((0, react_1.forwardRef)(Component));
+exports.Avatar.displayName = "CmsAvatar";

package/ui/avatar/get-avatar-user-letters.d.ts

@@ -0,0 +1 @@
+export declare function getAvatarUserLetters(name: string): string;

package/ui/avatar/get-avatar-user-letters.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvatarUserLetters = void 0;
+function getAvatarUserLetters(name) {
+    let letters = name
+        .split(" ")
+        .slice(0, 2)
+        .filter((i) => i);
+    if (letters.length === 1) {
+        letters = letters[0].slice(0, 2);
+    }
+    else {
+        letters = letters.map((i) => i.slice(0, 1)).join("");
+    }
+    return letters.toUpperCase();
+}
+exports.getAvatarUserLetters = getAvatarUserLetters;

package/ui/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { Avatar } from "./avatar";
+export type { AvatarProps } from "./avatar";
+export type { AvatarSize, AvatarVariant } from "./theme";

package/ui/avatar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });

package/ui/avatar/theme.d.ts

@@ -0,0 +1,11 @@
+export interface AvatarVariants {
+    default: true;
+    rounded: true;
+}
+export type AvatarVariant = keyof AvatarVariants;
+export interface AvatarSizes {
+    sm: true;
+    default: true;
+    lg: true;
+}
+export type AvatarSize = keyof AvatarSizes;

package/ui/avatar/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/copy-to-clipboard-button/copy-to-clipboard-button.js

@@ -25,10 +25,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyToClipboardButton = void 0;
 const copy_to_clipboard_1 = require("@uxf/core/utils/copy-to-clipboard");
-const react_1 = __importStar(require("react"));
-const flash_messages_service_1 = require("@uxf/ui/flash-messages/flash-messages-service");
 const button_1 = require("@uxf/ui/button");
+const flash_messages_service_1 = require("@uxf/ui/flash-messages/flash-messages-service");
 const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importStar(require("react"));
 // eslint-disable-next-line react/destructuring-assignment
 const CopyToClipboardButton = ({ color = "default", size = "sm", textToCopy }) => {
     const onCopy = (0, react_1.useCallback)(async () => {

package/ui/styles/avatar.css

@@ -0,0 +1,50 @@
+.cms-avatar {
+    --bg-color: theme("colors.primary.DEFAULT");
+
+    align-items: center;
+    background-color: var(--bg-color);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: var(--border-radius);
+    color: theme("colors.white");
+    display: inline-flex;
+    flex-shrink: 0;
+    height: var(--size);
+    justify-content: center;
+    position: relative;
+    text-transform: uppercase;
+    width: var(--size);
+
+    &__image {
+        border-radius: inherit;
+        height: 100%;
+        width: 100%;
+    }
+
+    .uxf-raster-image__img {
+        border-radius: inherit;
+    }
+
+    &--variant-rounded {
+        --border-radius: 999px;
+    }
+
+    &--size-sm {
+        --size: theme("avatarSize.sm");
+
+        font-size: theme("fontSize.body");
+    }
+
+    &--size-default {
+        --size: theme("avatarSize.default");
+
+        font-size: 20px;
+    }
+
+    &--size-lg {
+        --size: theme("avatarSize.lg");
+
+        font-size: theme("fontSize.desktopH3");
+    }
+}

package/ui/styles/breadcrumbs.css

@@ -0,0 +1,30 @@
+.uxf-cms-breadcrumbs {
+    @apply uxf-typo-body;
+
+    align-items: center;
+    color: theme("colors.lightLow");
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: theme("spacing.4");
+
+    &__item {
+        margin-right: theme("spacing.2");
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &__divide-icon {
+        display: inline;
+        margin-right: theme("spacing.2");
+    }
+
+    &__link {
+        @apply transition-colors;
+
+        &:hover {
+            color: theme("colors.lightHigh");
+        }
+    }
+}

package/ui/styles/layout.css

@@ -0,0 +1,132 @@
+.uxf-cms-layout {
+    display: flex;
+
+    &__wrapper {
+        display: flex;
+        width: 100%;
+
+        :root .light & {
+            background-color: theme("colors.gray.100");
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.900");
+            color: theme("colors.darkHigh");
+        }
+    }
+
+    &__main {
+        --drawer-width: 264px;
+
+        min-height: 100vh;
+        padding-bottom: theme("spacing.16");
+        width: 100%;
+
+        @screen md {
+            margin-left: var(--drawer-width);
+            padding-bottom: 0;
+            width: calc(100% - var(--drawer-width));
+        }
+    }
+
+    &__loading {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: theme("spacing.96");
+        justify-content: center;
+
+        &-inner {
+            text-align: center;
+        }
+
+        &-text {
+            margin-top: theme("spacing.2");
+        }
+    }
+
+    &__header {
+        :root .light & {
+            background-color: theme("colors.white");
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.950");
+        }
+
+        &--sticky {
+            box-shadow: theme("boxShadow.md");
+            position: sticky;
+            top: 0;
+            z-index: 10;
+
+            :root .light & {
+                background-color: theme("colors.white");
+            }
+
+            :root .dark & {
+                background-color: theme("colors.gray.950");
+            }
+        }
+    }
+
+    &__toolbar {
+        align-items: center;
+        background-color: theme("colors.sidebar.background");
+        display: flex;
+        height: theme("spacing.12");
+        justify-content: flex-end;
+        padding: 0 theme("spacing.6");
+
+        :root .light & {
+            color: theme("colors.darkMedium");
+        }
+
+        :root .dark & {
+            color: theme("colors.lightMedium");
+        }
+    }
+
+    &__container {
+        margin: 0 auto;
+        padding: 0 theme("spacing.4");
+
+        @screen md {
+            padding-left: theme("spacing.10");
+            padding-right: theme("spacing.10");
+        }
+
+        &--basic {
+            padding-bottom: theme("spacing.9");
+            padding-top: theme("spacing.12");
+        }
+
+        &--narrow {
+            max-width: 49.25rem;
+        }
+
+        &--wide {
+            max-width: 64rem;
+        }
+    }
+
+    &__title-wrapper {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__avatar-title-wrapper {
+        align-items: center;
+        display: flex;
+        gap: 20px;
+    }
+
+    &__breadcrumbs-title-wrapper {
+        width: 100%;
+    }
+
+    &__title {
+        @apply uxf-typo-h4;
+    }
+}

package/ui/styles/login-layout.css

@@ -0,0 +1,52 @@
+.uxf-cms-login-layout {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100vh;
+    padding: theme("spacing.4");
+
+    :root .light & {
+        background-color: theme("colors.gray.100");
+    }
+
+    :root .dark & {
+        background-color: theme("colors.gray.900");
+        color: theme("colors.darkHigh");
+    }
+
+    &__logo-wrapper {
+        margin-bottom: theme("spacing.8");
+    }
+
+    &__title {
+        @apply uxf-typo-h4;
+
+        &--hidden {
+            @apply sr-only;
+        }
+    }
+
+    &__subtitle {
+        margin-top: theme("spacing.2");
+
+        :root .light & {
+            color: theme("colors.lightMedium");
+        }
+
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
+    }
+
+    &__body {
+        margin-top: theme("spacing.8");
+        max-width: 100%;
+        padding: theme("spacing.6");
+        width: 28rem;
+
+        :root .dark & {
+            background-color: theme("colors.gray.950");
+        }
+    }
+}