@uxf/cms 10.0.0-beta.7 → 10.0.0-beta.70

package/lib/menu/ui/sub-menu/sub-menu.js

@@ -28,11 +28,11 @@ const react_1 = __importStar(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const use_sub_menu_1 = require("./use-sub-menu");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const sub_menuItem_1 = require("./sub-menuItem");
+const sub_menu_item_1 = require("./sub-menu-item");
 exports.SubMenu = (0, forwardRef_1.forwardRef)("SubMenu", ({ children, content }, ref) => {
     const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: false });
     const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, subMenu.refs.setReference, children.ref), [ref, subMenu.refs.setReference, children]);
-    return (react_1.default.createElement("div", { className: "hidden md:block" },
+    return (react_1.default.createElement("div", { className: "uxf-cms-sub-menu" },
         (0, react_1.cloneElement)(children, subMenu.getReferenceProps({
             ref: stableRef,
             ...children.props,
@@ -41,6 +41,6 @@ exports.SubMenu = (0, forwardRef_1.forwardRef)("SubMenu", ({ children, content }
         subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
-                className: "sidebar__scrollbar bg-sidebar-highlight rounded-xl overflow-y-auto z-dropdown max-w-64 shadow-lg w-full",
-            }) }, content.map((item, index) => (react_1.default.createElement(sub_menuItem_1.SubMenuItem, { key: index, item: item })))))));
+                className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper",
+            }) }, content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { key: index, item: item })))))));
 });

package/lib/menu/ui/sub-menu/use-sub-menu.d.ts

@@ -10,10 +10,10 @@ export declare function useSubMenu(options: SubMenuOptions): {
     y: number;
     update: () => void;
     context: {
-        placement: import("@floating-ui/react").Placement;
-        strategy: import("@floating-ui/react").Strategy;
         x: number;
         y: number;
+        placement: import("@floating-ui/react").Placement;
+        strategy: import("@floating-ui/react").Strategy;
         middlewareData: import("@floating-ui/react").MiddlewareData;
         update: () => void;
         isPositioned: boolean;

package/lib/menu/ui/sub-menu/use-sub-menu.js

@@ -7,7 +7,7 @@ function useSubMenu(options) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const data = (0, react_2.useFloating)({
         middleware: [
-            (0, react_2.offset)(options.isMobile ? 24 : 16),
+            (0, react_2.offset)(options.isMobile ? 12 : 16),
             (0, react_2.flip)(),
             (0, react_2.shift)({ padding: 8 }),
             (0, react_2.size)({

package/lib/menu/ui/user-menu.js

@@ -25,27 +25,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserMenu = void 0;
 const react_1 = __importStar(require("react"));
-const avatar_1 = require("@uxf/ui/avatar");
 const icon_1 = require("@uxf/ui/icon");
 const list_item_1 = require("./list-item");
+const classes_1 = require("@uxf/core/constants/classes");
+const avatar_1 = require("../../../ui/avatar");
+const get_avatar_user_letters_1 = require("../../../ui/avatar/get-avatar-user-letters");
 const Component = (props) => {
     const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(false);
     const hasSubmenu = props.submenu.length > 0;
     const toggle = hasSubmenu ? () => setIsSubmenuOpen((prev) => !prev) : undefined;
-    return (react_1.default.createElement("div", { className: "hidden border-t border-t-darkLow/10 p-3 pr-5 text-darkMedium md:block" },
-        react_1.default.createElement("button", { className: "flex w-full items-center text-left", onClick: toggle },
-            react_1.default.createElement(avatar_1.Avatar, { className: "mr-3 shrink-0", src: props.avatar }),
-            react_1.default.createElement("div", { className: "truncate" },
-                react_1.default.createElement("div", { className: "uxf-typo-body2 mb-1" }, props.name),
-                react_1.default.createElement("div", { className: "uxf-typo-caption truncate text-darkLow" }, props.roles)),
-            react_1.default.createElement("div", { className: "ml-auto" }, hasSubmenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `ml-2 ${!isSubmenuOpen ? "-rotate-90" : ""}` })))),
-        isSubmenuOpen && (react_1.default.createElement("div", { className: "mt-4" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
+    return (react_1.default.createElement("div", { className: `uxf-cms-user-menu ${isSubmenuOpen ? classes_1.CLASSES.IS_OPEN : ""}` },
+        react_1.default.createElement("button", { className: "uxf-cms-user-menu__button", onClick: toggle },
+            react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-user-menu__avatar", letters: (0, get_avatar_user_letters_1.getAvatarUserLetters)(props.name), size: "sm", src: props.avatar, variant: "rounded" }),
+            react_1.default.createElement("div", { className: "uxf-cms-user-menu__label-wrapper" },
+                react_1.default.createElement("div", { className: "uxf-cms-user-menu__name" }, props.name),
+                react_1.default.createElement("div", { className: "uxf-cms-user-menu__roles" }, props.roles)),
+            react_1.default.createElement("div", { className: "uxf-cms-user-menu__caret-wrapper" }, hasSubmenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `uxf-cms-user-menu__caret ${!isSubmenuOpen ? classes_1.CLASSES.IS_OPEN : ""}` })))),
+        isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-user-menu__sub-menu" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { endElement: item.endElement, href: item.url, label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
 };
 const UserMenu = (props) => {
     var _a, _b, _c, _d, _e, _f;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { menu } = props;
-    const userMenu = menu.find((item) => !!item.userMenuData);
+    const userMenu = props.menu.find((item) => !!item.userMenuData);
     return (react_1.default.createElement(Component, { submenu: (_a = userMenu === null || userMenu === void 0 ? void 0 : userMenu.children) !== null && _a !== void 0 ? _a : [], name: (_c = (_b = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : "Uživatel", roles: (_e = (_d = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _d === void 0 ? void 0 : _d.roles) !== null && _e !== void 0 ? _e : "nepřihlášený", avatar: (_f = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _f === void 0 ? void 0 : _f.avatar }));
 };
 exports.UserMenu = UserMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/cms",
-  "version": "10.0.0-beta.7",
+  "version": "10.0.0-beta.70",
   "description": "UXF Cms",
   "author": "UXFans <dev@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -40,52 +40,29 @@
     "@types/qs": "^6.9.7",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
-    "@uxf/core": "^4.5.1",
-    "@uxf/data-grid": "10.0.0-beta.4",
-    "@uxf/eslint-config": "^1.3.0",
-    "@uxf/form": "10.0.0-beta.4",
-    "@uxf/icons-generator": "^1.3.0",
-    "@uxf/router": "10.0.0-beta.3",
-    "@uxf/ui": "10.0.0-beta.4",
-    "@uxf/wysiwyg": "2.0.0-beta.28",
-    "autoprefixer": "^10.4.14",
+    "@uxf/core": "10.0.0-beta.37",
+    "@uxf/data-grid": "10.0.0-beta.70",
+    "@uxf/form": "10.0.0-beta.69",
+    "@uxf/icons-generator": "10.0.0-beta.19",
+    "@uxf/router": "10.0.0-beta.15",
+    "@uxf/ui": "10.0.0-beta.69",
+    "@uxf/wysiwyg": "10.0.0-beta.69",
     "axios": "^1.4.0",
     "axios-hooks": "^4.0.0",
-    "concurrently": "^8.1.0",
-    "coordinate-parser": "^1.0.7",
+    "coordinate-parser": "1.0.7",
     "dayjs": "^1.11.7",
-    "eslint": "^8.41.0",
-    "eslint-plugin-tailwindcss": "3.12.1",
-    "express": "^4.18.2",
-    "express-http-proxy": "^1.6.3",
-    "http-proxy-middleware": "^2.0.6",
     "next": "^13.4.4",
     "path": "^0.12.7",
-    "postcss": "^8.4.24",
-    "postcss-focus-visible": "^8.0.2",
-    "postcss-import": "^15.1.0",
-    "postcss-pxtorem": "^6.0.0",
-    "postcss-syntax": "^0.36.2",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.3.0",
     "qs": "^6.11.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "redux-devtools-extension": "^2.13.9",
-    "stylelint": "^15.6.2",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-tailwindcss": "^0.0.7",
-    "stylelint-use-nesting": "^4.1.0",
-    "tailwindcss": "^3.3.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.0.4"
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@uxf/core": ">= 4.5.1",
-    "@uxf/data-grid": "10.0.0-beta.7",
-    "@uxf/form": "10.0.0-beta.7",
-    "@uxf/ui": "10.0.0-beta.7",
-    "@uxf/wysiwyg": "2.0.0-beta.28",
+    "@uxf/core": "10.0.0-beta.37",
+    "@uxf/data-grid": "10.0.0-beta.70",
+    "@uxf/form": "10.0.0-beta.69",
+    "@uxf/ui": "10.0.0-beta.69",
+    "@uxf/wysiwyg": "10.0.0-beta.69",
     "axios": "^1.4.0",
     "axios-hooks": "^4.0.0",
     "dayjs": "^1.11.7",

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

@@ -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/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/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");
+        }
+    }
+}