@cloud-ru/uikit-product-page-layout 0.21.3 → 0.21.5

package/dist/cjs/components/PageSidebar/styles.module.css

@@ -0,0 +1,76 @@
+.wrapper{
+  width:256px;
+}
+.wrapper[data-collapsed]{
+  width:0;
+}
+.wrapper .body{
+  position:absolute;
+  height:100%;
+  width:256px;
+  display:flex;
+  transition:left 0.15s 0.35s ease-in-out;
+}
+.wrapper .body[data-hover-off]{
+  pointer-events:none;
+  transition:left 0.15s ease-in-out;
+}
+.wrapper .body[data-collapsed]{
+  left:-256px;
+}
+.wrapper .body[data-collapsed]::before{
+  position:absolute;
+  content:" ";
+  height:100%;
+  right:calc(-1 * var(--dimension-050m, 4px));
+  width:var(--dimension-050m, 4px);
+}
+.wrapper .body[data-collapsed]:hover{
+  transition:left 0.15s ease-in-out;
+  left:0;
+}
+.wrapper .body[data-collapsed]:hover::before{
+  right:calc(-4 * var(--dimension-050m, 4px));
+  width:calc(4 * var(--dimension-050m, 4px));
+}
+.wrapper .content{
+  flex-grow:1;
+  display:flex;
+  overflow:hidden;
+  box-sizing:border-box;
+  padding:4px 0;
+  flex-direction:column;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-right:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.wrapper .content[data-collapsed]{
+  box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
+  border-right:none;
+  margin:4px;
+}
+.wrapper .list{
+  flex-grow:1;
+  flex-shrink:1;
+  overflow-y:auto;
+  display:flex;
+  flex-direction:column-reverse;
+  position:relative;
+}
+.wrapper .searchWrapper{
+  position:absolute;
+  right:42px;
+  top:4px;
+  width:204px;
+}
+.wrapper .toggler{
+  display:flex;
+  justify-content:end;
+  flex-shrink:0;
+  flex-grow:0;
+  padding:0 4px;
+}
+.wrapper .expandButton{
+  position:fixed;
+  bottom:8px;
+  left:8px;
+}

package/dist/cjs/components/PageSidebar/types.d.ts

@@ -0,0 +1,40 @@
+import { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { TooltipProps } from '@snack-uikit/tooltip';
+export type SidebarItemBase = {
+    id: string | number;
+    label: string;
+    'data-test-id'?: string;
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    afterContent?: ReactNode;
+    disabledReason?: ReactNode;
+    disabledReasonPlacement?: TooltipProps['placement'];
+    beforeContent?: ReactNode;
+};
+export type SidebarItemWithHref = SidebarItemBase & {
+    href: string;
+};
+export type SidebarItemWithItems = SidebarItemBase & {
+    /** @default collapse */
+    type?: 'collapse' | 'group';
+    divider?: boolean;
+    items?: SidebarItem[];
+};
+export type SidebarItem = SidebarItemWithHref | SidebarItemWithItems;
+export type Icon = IconPredefinedProps['icon'];
+export type HeaderProps = {
+    type: 'title';
+    label: string;
+    icon: Icon;
+    afterContent?: ReactNode;
+} | {
+    type: 'back';
+    label: string;
+    href?: string;
+    onClick?: MouseEventHandler;
+};
+export type Documentation = {
+    href?: string;
+    onClick?: MouseEventHandler;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};

package/dist/cjs/components/PageSidebar/types.js

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

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

@@ -0,0 +1,6 @@
+export * from './PageCatalog';
+export * from './PageForm';
+export * from './PageLoading';
+export * from './PageServices';
+export * from './DefaultSubHeader';
+export * from './PageSidebar';

package/dist/cjs/components/index.js

@@ -0,0 +1,22 @@
+"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 __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("./PageCatalog"), exports);
+__exportStar(require("./PageForm"), exports);
+__exportStar(require("./PageLoading"), exports);
+__exportStar(require("./PageServices"), exports);
+__exportStar(require("./DefaultSubHeader"), exports);
+__exportStar(require("./PageSidebar"), exports);

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"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 __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("./components"), exports);

package/dist/esm/components/DefaultSubHeader/DefaultSubHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { CopyLineProps } from '@sbercloud/uikit-product-copy-line';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type DefaultSubHeaderProps = WithSupportProps<{
+    label: string;
+    value: CopyLineProps;
+    labelTooltip?: ReactNode;
+}>;
+export declare function DefaultSubHeader({ label, labelTooltip, value, ...rest }: DefaultSubHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DefaultSubHeader/DefaultSubHeader.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyLine } from '@sbercloud/uikit-product-copy-line';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+import styles from './styles.module.css';
+export function DefaultSubHeader(_a) {
+    var { label, labelTooltip, value } = _a, rest = __rest(_a, ["label", "labelTooltip", "value"]);
+    return (_jsxs("div", Object.assign({ className: styles.subheader }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.label, children: [label, labelTooltip && _jsx(QuestionTooltip, { tip: labelTooltip })] }), _jsx(CopyLine, Object.assign({}, value))] })));
+}

package/dist/esm/components/DefaultSubHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './DefaultSubHeader';

package/dist/esm/components/DefaultSubHeader/index.js

@@ -0,0 +1 @@
+export * from './DefaultSubHeader';

package/dist/esm/components/DefaultSubHeader/styles.module.css

@@ -0,0 +1,19 @@
+.subheader{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:calc(var(--dimension-2m, 16px) - var(--dimension-050m, 4px));
+}
+
+.label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:var(--dimension-050m, 4px);
+}

package/dist/esm/components/Headline/Headline.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type HeadlineProps = WithSupportProps<{
+    title: string;
+    beforeHeadline?: ReactNode;
+    afterHeadline?: ReactNode;
+    actions?: ReactNode;
+    subHeader?: ReactNode;
+    truncateTitle?: boolean;
+}>;
+export declare function Headline({ title, actions, beforeHeadline, afterHeadline, subHeader, truncateTitle, ...rest }: HeadlineProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/Headline/Headline.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function Headline(_a) {
+    var { title, actions, beforeHeadline, afterHeadline, subHeader, truncateTitle } = _a, rest = __rest(_a, ["title", "actions", "beforeHeadline", "afterHeadline", "subHeader", "truncateTitle"]);
+    const needsRender = Boolean(title || beforeHeadline || afterHeadline || subHeader || actions);
+    if (!needsRender)
+        return null;
+    return (_jsxs("div", Object.assign({ className: styles.headline }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.headlineLayout, children: [_jsxs("div", { className: styles.titleLayout, children: [beforeHeadline && _jsx("div", { className: styles.prefixButtonWrapper, children: beforeHeadline }), _jsx(Typography.SansHeadlineM, { tag: 'h1', className: styles.title, children: truncateTitle ? _jsx(TruncateString, { variant: 'end', text: title, maxLines: 1 }) : title }), afterHeadline && _jsx("div", { className: styles.statusWrapper, children: afterHeadline })] }), Boolean(actions) && _jsx("div", { className: styles.actions, children: actions })] }), subHeader && _jsx("div", { className: styles.subHeader, children: subHeader })] })));
+}

package/dist/esm/components/Headline/index.d.ts

@@ -0,0 +1 @@
+export * from './Headline';

package/dist/esm/components/Headline/index.js

@@ -0,0 +1 @@
+export * from './Headline';

package/dist/esm/components/Headline/styles.module.css

@@ -0,0 +1,52 @@
+.headline{
+  display:flex;
+  flex-direction:column;
+}
+
+.headlineLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-start;
+}
+
+.titleLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-start;
+  width:100%;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.title{
+  min-width:0;
+}
+
+.prefixButtonWrapper{
+  display:flex;
+  align-items:center;
+  height:var(--sans-headline-m-line-height, 36px);
+  flex-shrink:0;
+}
+
+.statusWrapper{
+  display:flex;
+  align-items:center;
+  height:var(--sans-headline-m-line-height, 36px);
+  flex-shrink:0;
+}
+
+.actions{
+  height:var(--sans-headline-m-line-height, 36px);
+  display:flex;
+  align-items:center;
+  gap:8px;
+  flex-shrink:0;
+  justify-content:flex-end;
+}
+
+.subHeader{
+  margin-top:4px;
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/esm/components/PageCatalog/PageCatalog.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { HeadlineProps } from '../Headline';
+export type PageCatalogProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'actions'> & {
+    className?: string;
+}>>;
+export declare function PageCatalog({ children, title, actions, className, ...rest }: PageCatalogProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PageCatalog/PageCatalog.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Headline } from '../Headline';
+import styles from './styles.module.css';
+export function PageCatalog(_a) {
+    var { children, title, actions, className } = _a, rest = __rest(_a, ["children", "title", "actions", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.catalog, className) }, extractSupportProps(rest), { children: [_jsx(Headline, { title: title, actions: actions }), _jsx("div", { className: styles.content, children: children })] })));
+}

package/dist/esm/components/PageCatalog/index.d.ts

@@ -0,0 +1 @@
+export * from './PageCatalog';

package/dist/esm/components/PageCatalog/index.js

@@ -0,0 +1 @@
+export * from './PageCatalog';

package/dist/esm/components/PageCatalog/styles.module.css

@@ -0,0 +1,16 @@
+.catalog{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+  padding:var(--dimension-3m, 24px);
+  margin:0 auto;
+  box-sizing:border-box;
+  max-width:min(100%, 1248px);
+  min-width:992px;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+}

package/dist/esm/components/PageForm/PageForm.d.ts

@@ -0,0 +1,40 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { HeadlineProps } from '../Headline';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from './types';
+export type PageFormProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'subHeader'> & {
+    className?: string;
+    stepper?: ReactNode;
+    priceSummary?: {
+        total: ReactNode;
+        content?: ReactNode;
+    };
+    sideBlock?: {
+        label: string;
+        content: ReactNode;
+    }[];
+    footer?: {
+        buttonPrimary: ({
+            variant: ButtonPrimaryVariant;
+        } | {
+            variant: 'custom';
+            label: string;
+        }) & {
+            tooltip?: TooltipProps;
+        } & Omit<ButtonFilledProps, 'label'>;
+        buttonSecondary?: ({
+            variant: ButtonSecondaryVariant;
+        } | {
+            variant: 'custom';
+            label: string;
+        }) & {
+            tooltip?: TooltipProps;
+        } & Omit<ButtonOutlineProps, 'label'>;
+        buttonAdditional?: ButtonSimpleProps & {
+            tooltip?: TooltipProps;
+        };
+    };
+}>>;
+export declare function PageForm({ children, stepper, title, subHeader, className, footer, sideBlock, priceSummary, ...rest }: PageFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PageForm/PageForm.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonFilled, ButtonOutline, ButtonSimple, } from '@snack-uikit/button';
+import { Headline } from '../Headline';
+import { useButtonWithTooltip, useGetButtonLabel } from './hooks';
+import styles from './styles.module.css';
+export function PageForm(_a) {
+    var _b, _c;
+    var { children, stepper, title, subHeader, className, footer, sideBlock, priceSummary } = _a, rest = __rest(_a, ["children", "stepper", "title", "subHeader", "className", "footer", "sideBlock", "priceSummary"]);
+    const getButtonLabel = useGetButtonLabel();
+    const moreItems = useMemo(() => [priceSummary === null || priceSummary === void 0 ? void 0 : priceSummary.content].concat(sideBlock === null || sideBlock === void 0 ? void 0 : sideBlock.map(item => item.content)).filter(Boolean), [priceSummary === null || priceSummary === void 0 ? void 0 : priceSummary.content, sideBlock]);
+    const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: footer === null || footer === void 0 ? void 0 : footer.buttonPrimary.tooltip });
+    const SecondaryButton = useButtonWithTooltip({ Button: ButtonOutline, tooltip: (_b = footer === null || footer === void 0 ? void 0 : footer.buttonSecondary) === null || _b === void 0 ? void 0 : _b.tooltip });
+    const AdditionalButton = useButtonWithTooltip({ Button: ButtonSimple, tooltip: (_c = footer === null || footer === void 0 ? void 0 : footer.buttonAdditional) === null || _c === void 0 ? void 0 : _c.tooltip });
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.form, children: [_jsx("div", { className: styles.headline, children: _jsx(Headline, { title: title, subHeader: subHeader }) }), stepper, _jsx("div", { className: styles.body, children: children }), footer && (_jsxs("div", { className: styles.footer, children: [footer.buttonSecondary && (_jsx(SecondaryButton, Object.assign({}, footer.buttonSecondary, { size: 'm', appearance: 'neutral', label: footer.buttonSecondary.variant === 'custom'
+                                    ? footer.buttonSecondary.label
+                                    : getButtonLabel(footer.buttonSecondary.variant) }))), _jsxs("div", { className: styles.mainActions, children: [footer.buttonAdditional && _jsx(AdditionalButton, Object.assign({}, footer.buttonAdditional, { size: 'm' })), _jsx(PrimaryButton, Object.assign({}, footer.buttonPrimary, { size: 'm', label: footer.buttonPrimary.variant === 'custom'
+                                            ? footer.buttonPrimary.label
+                                            : getButtonLabel(footer.buttonPrimary.variant) }))] })] }))] }), (moreItems === null || moreItems === void 0 ? void 0 : moreItems.length) > 0 && _jsx("div", { className: styles.sideItems, children: moreItems })] })));
+}

package/dist/esm/components/PageForm/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const BUTTON_PRIMARY_VARIANT: {
+    readonly Continue: "continue";
+    readonly Create: "create";
+    readonly Save: "save";
+    readonly Rent: "rent";
+    readonly Send: "send";
+    readonly Restore: "restore";
+    readonly Add: "add";
+};
+export declare const BUTTON_SECONDARY_VARIANT: {
+    readonly Cancel: "cancel";
+    readonly Back: "back";
+};

package/dist/esm/components/PageForm/constants.js

@@ -0,0 +1,13 @@
+export const BUTTON_PRIMARY_VARIANT = {
+    Continue: 'continue',
+    Create: 'create',
+    Save: 'save',
+    Rent: 'rent',
+    Send: 'send',
+    Restore: 'restore',
+    Add: 'add',
+};
+export const BUTTON_SECONDARY_VARIANT = {
+    Cancel: 'cancel',
+    Back: 'back',
+};

package/dist/esm/components/PageForm/hooks.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from './types';
+export declare function useButtonWithTooltip<T extends Record<string, unknown>>({ Button, tooltip, }: {
+    tooltip?: TooltipProps;
+    Button: ForwardRefExoticComponent<T>;
+}): ForwardRefExoticComponent<T> | ((props: T) => import("react/jsx-runtime").JSX.Element);
+export declare function useGetButtonLabel(): (variant: ButtonPrimaryVariant | ButtonSecondaryVariant) => string;

package/dist/esm/components/PageForm/hooks.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+export function useButtonWithTooltip({ Button, tooltip, }) {
+    if (tooltip) {
+        return function ButtonWithTooltip(props) {
+            return (_jsx(Tooltip, Object.assign({}, tooltip, { children: _jsx(Button, Object.assign({}, props)) })));
+        };
+    }
+    return Button;
+}
+export function useGetButtonLabel() {
+    const { t } = useLocale('PageLayout');
+    return function getButtonLabel(variant) {
+        return t(`PageForm.${variant}`);
+    };
+}

package/dist/esm/components/PageForm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PageForm';
+export * from './constants';
+export * from './types';

package/dist/esm/components/PageForm/index.js

@@ -0,0 +1,3 @@
+export * from './PageForm';
+export * from './constants';
+export * from './types';

package/dist/esm/components/PageForm/styles.module.css

@@ -0,0 +1,61 @@
+.container{
+  padding:var(--dimension-3m, 24px);
+  min-width:-moz-fit-content;
+  min-width:fit-content;
+  display:flex;
+  justify-content:center;
+  gap:24px;
+  min-height:100%;
+  box-sizing:border-box;
+}
+
+.form{
+  display:flex;
+  flex-direction:column;
+  gap:32px;
+  width:800px;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  padding:56px;
+  flex-shrink:0;
+  border-radius:16px;
+  min-height:100%;
+  box-sizing:border-box;
+}
+
+.headline{
+  position:relative;
+}
+
+.footer{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+}
+
+.mainActions{
+  display:flex;
+  align-items:center;
+  margin-left:auto;
+}
+
+.sideItems{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  width:304px;
+  position:sticky;
+  top:24px;
+  align-self:flex-start;
+}
+
+.body{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  flex:1;
+}

package/dist/esm/components/PageForm/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { BUTTON_PRIMARY_VARIANT, BUTTON_SECONDARY_VARIANT } from './constants';
+export type ButtonPrimaryVariant = ValueOf<typeof BUTTON_PRIMARY_VARIANT>;
+export type ButtonSecondaryVariant = ValueOf<typeof BUTTON_SECONDARY_VARIANT>;

package/dist/esm/components/PageForm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/PageLoading/PageLoading.d.ts

@@ -0,0 +1,5 @@
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type PageLoadingProps = WithSupportProps<{
+    className?: string;
+}>;
+export declare function PageLoading({ className, ...rest }: PageLoadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PageLoading/PageLoading.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Spinner as UISpinner } from '@snack-uikit/loaders';
+import styles from './styles.module.css';
+export function PageLoading(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: _jsx(UISpinner, { size: 'm', className: styles.spinner }) })));
+}

package/dist/esm/components/PageLoading/index.d.ts

@@ -0,0 +1 @@
+export * from './PageLoading';

package/dist/esm/components/PageLoading/index.js

@@ -0,0 +1 @@
+export * from './PageLoading';

package/dist/esm/components/PageLoading/styles.module.css

@@ -0,0 +1,12 @@
+.wrapper{
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  color:var(--sys-neutral-accent-default, #787b8a);
+}
+
+.spinner{
+  position:fixed;
+  top:calc(50% - var(--size-loader-loader-m, 48px) / 2);
+  left:calc(50% - var(--size-loader-loader-m, 48px) / 2);
+}