@cloud-ru/uikit-product-error-pages 0.13.7 → 0.13.9

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.13.9 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@15.1.3](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.13.8 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.13.7 (2025-11-12)
 
 ### Only dependencies have been changed

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

@@ -0,0 +1,15 @@
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { ErrorType, LogoVariant } from './constants';
+export type ErrorPageProps = WithSupportProps<{
+    className?: string;
+    mainPageUrl?: string;
+    onSupportCenterClick?(): void;
+    logoVariant?: LogoVariant;
+    errorType?: ErrorType;
+    showMainButton?: boolean;
+}>;
+export declare function ErrorPage({ className, mainPageUrl, onSupportCenterClick, logoVariant, errorType, showMainButton, ...rest }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ErrorPage {
+    var logoVariants: typeof LogoVariant;
+    var errorTypes: typeof ErrorType;
+}

package/dist/cjs/components/ErrorPage.js

@@ -0,0 +1,52 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorPage = ErrorPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const button_1 = require("@snack-uikit/button");
+const link_1 = require("@snack-uikit/link");
+const tag_1 = require("@snack-uikit/tag");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ErrorPage(_a) {
+    var { className, mainPageUrl = '/', onSupportCenterClick, logoVariant = constants_1.LogoVariant.None, errorType = constants_1.ErrorType.FrontendError, showMainButton = true } = _a, rest = __rest(_a, ["className", "mainPageUrl", "onSupportCenterClick", "logoVariant", "errorType", "showMainButton"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('ErrorPage');
+    const content = (0, hooks_1.useGetContentByErrorType)(errorType);
+    const button = (0, hooks_1.useGetButtonPropsByErrorType)(errorType, mainPageUrl);
+    const hasMainPageLink = [constants_1.ErrorType.FrontendError].includes(errorType);
+    const hasBackLink = [constants_1.ErrorType.FrontendError, constants_1.ErrorType.PageUnavailable].includes(errorType);
+    const logo = (0, react_1.useMemo)(() => {
+        switch (logoVariant) {
+            case constants_1.LogoVariant.MLSpace:
+                return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.logo, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MlSpaceFullLogoSVG, {}) }));
+            case constants_1.LogoVariant.Cloud:
+                return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.logo, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloudFullLogoSVG, {}) }));
+            case constants_1.LogoVariant.None:
+            default:
+                return null;
+        }
+    }, [logoVariant]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftSide, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textContainer, children: [logo, (0, jsx_runtime_1.jsxs)("h1", { className: styles_module_scss_1.default.title, "data-user": true, children: [content.title, content.statusCode && ((0, jsx_runtime_1.jsx)(tag_1.Tag, { className: styles_module_scss_1.default.statusCode, appearance: 'neutral', size: 's', label: String(content.statusCode) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actionWrapper, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.actionsTitle, children: content.text }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actionsLink, children: [hasMainPageLink && (0, jsx_runtime_1.jsx)(link_1.Link, { size: 'm', href: mainPageUrl, target: '_self', text: t('mainPageLink') }), hasBackLink && ((0, jsx_runtime_1.jsx)(link_1.Link, { size: 'm', onClick: () => (0, utils_1.isBrowser)() && window.history.back(), target: '_self', text: t('backLink') }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttonContainer, children: [onSupportCenterClick && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { size: 'm', className: styles_module_scss_1.default.button, label: t('supportCenterButton'), onClick: onSupportCenterClick, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MailInterfaceSVG, {}) })), showMainButton && ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, { size: 'm', className: styles_module_scss_1.default.button, label: button.text, href: button.href, target: button.href && '_self', onClick: button.onClick, icon: button.icon }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightSide, children: (0, jsx_runtime_1.jsxs)("svg", { className: styles_module_scss_1.default.pic, viewBox: '0 0 863 520', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [(0, jsx_runtime_1.jsx)("path", { d: 'M721.711 93H94.2882C86.397 93 80 99.8168 80 108.226V446.774C80 455.183 86.397 462 94.2882 462H721.711C729.602 462 735.999 455.183 735.999 446.774V108.226C735.999 99.8168 729.602 93 721.711 93Z', fill: `var(${constants_1.COLORS.svgBackground})`, stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10' }), (0, jsx_runtime_1.jsx)("path", { d: 'M735.999 165H81.7061', stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10' }), (0, jsx_runtime_1.jsx)("path", { d: 'M126.81 129C126.81 135.079 121.902 140 115.857 140C109.812 140 104.905 135.079 104.905 129C104.905 122.921 109.812 118 115.857 118C121.902 118 126.81 122.921 126.81 129Z', stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2' }), (0, jsx_runtime_1.jsx)("path", { d: 'M158.681 129C158.681 135.079 153.773 140 147.729 140C141.684 140 136.776 135.079 136.776 129C136.776 122.921 141.684 118 147.729 118C153.773 118 158.681 122.921 158.681 129Z', stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2' }), (0, jsx_runtime_1.jsx)("path", { d: 'M190.557 129C190.557 135.079 185.649 140 179.605 140C173.56 140 168.652 135.079 168.652 129C168.652 122.921 173.56 118 179.605 118C185.649 118 190.557 122.921 190.557 129Z', stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2' }), (0, jsx_runtime_1.jsx)("path", { d: 'M22.0427 284.986L116.584 256.508C116.925 256.415 117.286 256.426 117.621 256.539C117.957 256.652 118.251 256.863 118.468 257.144C118.685 257.425 118.814 257.765 118.839 258.12C118.864 258.476 118.785 258.83 118.61 259.14L67.8006 344.25C67.6327 344.526 67.3933 344.75 67.108 344.899C66.8227 345.047 66.5024 345.115 66.1819 345.093C65.8613 345.072 65.5527 344.963 65.2893 344.778C65.0259 344.593 64.8177 344.338 64.6874 344.043L54.9955 322.218C54.8828 321.975 54.7176 321.759 54.5117 321.588C54.3059 321.417 54.0646 321.294 53.8056 321.229C53.5466 321.164 53.2765 321.158 53.0148 321.211C52.7532 321.265 52.5067 321.376 52.2934 321.538L16.6093 349.484C16.2343 349.771 15.7621 349.898 15.2948 349.837C14.8276 349.777 14.4029 349.533 14.1129 349.159L9.14941 342.742L4.36224 336.531C4.07866 336.159 3.95338 335.688 4.01394 335.222C4.0745 334.757 4.3159 334.334 4.68526 334.047L40.3693 306.101C40.6056 305.935 40.7986 305.714 40.9319 305.456C41.0651 305.199 41.1347 304.913 41.1347 304.623C41.1347 304.332 41.0651 304.046 40.9319 303.789C40.7986 303.532 40.6056 303.31 40.3693 303.144L21.426 287.914C21.2068 287.709 21.0442 287.45 20.9539 287.163C20.8636 286.875 20.8488 286.569 20.9109 286.274C20.973 285.98 21.11 285.706 21.3083 285.48C21.5067 285.255 21.7597 285.084 22.0427 284.986Z', fill: `var(${constants_1.COLORS.svgBackground})`, stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), (0, jsx_runtime_1.jsx)("path", { d: 'M148.586 311.289L124.086 283.727', stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), (0, jsx_runtime_1.jsx)("path", { d: 'M159.336 300.565L130.242 279.127', stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), (0, jsx_runtime_1.jsx)("path", { d: 'M166.969 286.789L133.281 273.008', stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), (0, jsx_runtime_1.jsx)("path", { d: 'M390.619 52.8901L157.466 483.672C155.767 486.812 154.919 490.334 155.006 493.894C155.093 497.454 156.112 500.932 157.964 503.987C159.815 507.041 162.436 509.57 165.57 511.325C168.704 513.08 172.245 514.001 175.847 514H642.153C645.755 514.001 649.296 513.08 652.43 511.325C655.564 509.57 658.185 507.041 660.036 503.987C661.888 500.932 662.907 497.454 662.994 493.894C663.081 490.334 662.233 486.812 660.534 483.672L427.41 52.8901C425.627 49.5993 422.974 46.8484 419.735 44.9306C416.495 43.0129 412.79 42 409.015 42C405.239 42 401.534 43.0129 398.294 44.9306C395.055 46.8484 392.402 49.5993 390.619 52.8901Z', fill: `var(${constants_1.COLORS.svgBackground})`, stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), (0, jsx_runtime_1.jsx)("path", { d: 'M408.107 376C405.042 375.986 402.075 374.935 399.7 373.022C397.324 371.109 395.683 368.449 395.05 365.485L368.005 235.997C366.644 229.996 366.665 223.77 368.067 217.779C369.469 211.787 372.215 206.184 376.104 201.384C379.992 196.583 384.922 192.708 390.53 190.045C396.137 187.383 402.279 186 408.5 186C414.721 186 420.863 187.383 426.47 190.045C432.078 192.708 437.008 196.583 440.896 201.384C444.785 206.184 447.531 211.787 448.933 217.779C450.335 223.77 450.356 229.996 448.995 235.997L422.095 364.708C421.422 367.887 419.666 370.743 417.12 372.798C414.575 374.853 411.393 375.983 408.107 376Z', fill: `var(${constants_1.COLORS.svgExclamationMark})` }), (0, jsx_runtime_1.jsx)("path", { d: 'M408 454C402.66 454 397.44 452.416 393 449.45C388.559 446.483 385.099 442.266 383.055 437.332C381.012 432.399 380.477 426.97 381.519 421.733C382.561 416.495 385.132 411.684 388.908 407.908C392.684 404.132 397.495 401.561 402.733 400.519C407.97 399.477 413.399 400.012 418.332 402.055C423.266 404.099 427.483 407.559 430.45 412C433.416 416.44 435 421.66 435 427C434.992 434.158 432.145 441.021 427.083 446.083C422.021 451.145 415.158 453.992 408 454Z', fill: `var(${constants_1.COLORS.svgExclamationMark})` }), (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M758.622 69.709C758.622 65.2907 762.204 61.709 766.622 61.709H777.378C781.796 61.709 785.378 65.2907 785.378 69.709V75.6192C785.378 79.4239 788.076 82.6524 791.712 83.7722C795.74 85.0126 799.606 86.623 803.269 88.5639C806.631 90.3449 810.821 89.9691 813.511 87.279L817.695 83.0952C820.819 79.971 825.884 79.971 829.009 83.0952L836.614 90.7003C839.738 93.8245 839.738 98.8899 836.614 102.014L832.43 106.198C829.74 108.888 829.364 113.078 831.145 116.44C833.086 120.103 834.697 123.969 835.937 127.997C837.057 131.633 840.285 134.331 844.09 134.331H850C854.418 134.331 858 137.913 858 142.331V153.087C858 157.505 854.418 161.087 850 161.087H844.09C840.285 161.087 837.057 163.785 835.937 167.421C834.697 171.449 833.086 175.315 831.145 178.978C829.364 182.34 829.74 186.53 832.43 189.22L836.614 193.404C839.738 196.528 839.738 201.593 836.614 204.718L829.009 212.323C825.884 215.447 820.819 215.447 817.695 212.323L813.511 208.139C810.821 205.449 806.631 205.073 803.269 206.854C799.606 208.795 795.74 210.405 791.712 211.646C788.076 212.766 785.378 215.994 785.378 219.799V225.709C785.378 230.127 781.796 233.709 777.378 233.709H766.622C762.204 233.709 758.622 230.127 758.622 225.709V219.799C758.622 215.994 755.924 212.766 752.288 211.646C748.26 210.405 744.395 208.795 740.731 206.854C737.369 205.073 733.179 205.449 730.489 208.139L726.305 212.323C723.181 215.447 718.116 215.447 714.992 212.323L707.386 204.718C704.262 201.593 704.262 196.528 707.386 193.404L711.57 189.22C714.26 186.53 714.636 182.34 712.855 178.978C710.914 175.315 709.303 171.449 708.063 167.421C706.943 163.785 703.715 161.087 699.91 161.087H694C689.582 161.087 686 157.505 686 153.087V142.331C686 137.913 689.582 134.331 694 134.331H699.91C703.715 134.331 706.943 131.633 708.063 127.997C709.303 123.969 710.914 120.103 712.855 116.44C714.636 113.078 714.26 108.888 711.57 106.198L707.386 102.014C704.262 98.8899 704.262 93.8246 707.386 90.7004L714.992 83.0952C718.116 79.971 723.181 79.971 726.305 83.0952L730.489 87.279C733.179 89.9691 737.369 90.3449 740.731 88.5639C744.395 86.623 748.26 85.0126 752.288 83.7722C755.924 82.6524 758.622 79.4239 758.622 75.6192V69.709ZM772 181.153C753.529 181.153 738.556 166.18 738.556 147.709C738.556 129.238 753.529 114.265 772 114.265C790.471 114.265 805.444 129.238 805.444 147.709C805.444 166.18 790.471 181.153 772 181.153Z', fill: `var(${constants_1.COLORS.svgBackground})`, stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10', className: styles_module_scss_1.default.rotateSmall }), (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M646 8C646 5.79102 647.791 4 650 4H662C664.209 4 666 5.79102 666 8V14.4608C666 18.2656 668.708 21.4784 672.304 22.7186C674.226 23.3813 676.095 24.1579 677.903 25.0403C681.322 26.7089 685.507 26.3511 688.197 23.6611L692.77 19.0889C694.332 17.5264 696.864 17.5264 698.427 19.0889L706.912 27.5732C708.474 29.1357 708.474 31.6689 706.912 33.2305L702.34 37.8025C699.649 40.4926 699.292 44.6783 700.96 48.0973C701.842 49.9049 702.619 51.7737 703.281 53.6955C704.521 57.2925 707.734 60 711.539 60H718C720.209 60 722 61.791 722 64V76C722 78.209 720.209 80 718 80H711.539C707.734 80 704.521 82.7075 703.281 86.3045C702.619 88.2261 701.842 90.0947 700.96 91.9021C699.292 95.3209 699.649 99.5063 702.339 102.196L706.912 106.77C708.474 108.331 708.474 110.864 706.912 112.426L698.427 120.911C696.864 122.474 694.332 122.474 692.77 120.911L688.198 116.339C685.508 113.649 681.322 113.292 677.903 114.96C676.095 115.843 674.226 116.619 672.305 117.282C668.708 118.522 666 121.734 666 125.539V132C666 134.209 664.209 136 662 136H650C647.791 136 646 134.209 646 132V125.539C646 121.734 643.292 118.522 639.696 117.281C637.774 116.619 635.905 115.842 634.097 114.96C630.679 113.291 626.493 113.649 623.803 116.339L619.23 120.912C617.668 122.474 615.136 122.474 613.574 120.912L605.088 112.427C603.526 110.864 603.526 108.332 605.088 106.77L609.661 102.197C612.351 99.5074 612.709 95.3217 611.04 91.9027C610.158 90.0951 609.381 88.2263 608.719 86.3045C607.479 82.7075 604.266 80 600.461 80H594C591.791 80 590 78.209 590 76V64C590 61.791 591.791 60 594 60H600.461C604.266 60 607.479 57.2925 608.719 53.6955C609.381 51.7737 610.158 49.9049 611.04 48.0973C612.709 44.6783 612.351 40.4926 609.661 37.8025L605.088 33.2305C603.526 31.668 603.526 29.1357 605.088 27.5732L613.574 19.0879C615.136 17.5264 617.668 17.5264 619.23 19.0879L623.803 23.6605C626.493 26.3503 630.679 26.708 634.098 25.0396C635.905 24.1574 637.774 23.381 639.696 22.7185C643.292 21.4784 646 18.2656 646 14.4609V8ZM656 95C642.193 95 631 83.8066 631 70C631 56.1934 642.193 45 656 45C669.807 45 681 56.1934 681 70C681 83.8066 669.807 95 656 95Z', fill: `var(${constants_1.COLORS.svgBackground})`, stroke: `var(${constants_1.COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10', className: styles_module_scss_1.default.rotateBig })] }) })] })));
+}
+ErrorPage.logoVariants = constants_1.LogoVariant;
+ErrorPage.errorTypes = constants_1.ErrorType;

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

@@ -0,0 +1,17 @@
+export declare enum LogoVariant {
+    MLSpace = "MLSpace",
+    Cloud = "Cloud",
+    None = "None"
+}
+export declare enum ErrorType {
+    FrontendError = "FrontendError",
+    PageUnavailable = "PageUnavailable",
+    PageNotFound = "PageNotFound",
+    Offline = "Offline",
+    Redirect = "Redirect"
+}
+export declare const COLORS: {
+    svgExclamationMark: string;
+    svgStroke: string;
+    svgBackground: string;
+};

package/dist/cjs/components/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLORS = exports.ErrorType = exports.LogoVariant = void 0;
+var LogoVariant;
+(function (LogoVariant) {
+    LogoVariant["MLSpace"] = "MLSpace";
+    LogoVariant["Cloud"] = "Cloud";
+    LogoVariant["None"] = "None";
+})(LogoVariant || (exports.LogoVariant = LogoVariant = {}));
+var ErrorType;
+(function (ErrorType) {
+    ErrorType["FrontendError"] = "FrontendError";
+    ErrorType["PageUnavailable"] = "PageUnavailable";
+    ErrorType["PageNotFound"] = "PageNotFound";
+    ErrorType["Offline"] = "Offline";
+    ErrorType["Redirect"] = "Redirect";
+})(ErrorType || (exports.ErrorType = ErrorType = {}));
+exports.COLORS = {
+    svgExclamationMark: '--svgExclamationMark',
+    svgStroke: '--svgStroke',
+    svgBackground: '--svgBackground',
+};

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

@@ -0,0 +1,26 @@
+import { ErrorType } from './constants';
+export declare function useGetContentByErrorType(errorType: ErrorType): {
+    title: string;
+    text: string;
+    statusCode: number;
+} | {
+    title: string;
+    text: string;
+    statusCode?: undefined;
+};
+export declare function useGetButtonPropsByErrorType(errorType: ErrorType, mainPageUrl?: string): {
+    text: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    href: string | undefined;
+    onClick?: undefined;
+} | {
+    text: string;
+    href: string | undefined;
+    icon?: undefined;
+    onClick?: undefined;
+} | {
+    text: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    onClick: () => false | void;
+    href?: undefined;
+};

package/dist/cjs/components/hooks.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetContentByErrorType = useGetContentByErrorType;
+exports.useGetButtonPropsByErrorType = useGetButtonPropsByErrorType;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+function useGetContentByErrorType(errorType) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('ErrorPage');
+    return (0, react_1.useMemo)(() => {
+        switch (errorType) {
+            case constants_1.ErrorType.PageUnavailable:
+                return {
+                    title: t('pageUnavailableTitle'),
+                    text: t('actionRedirectTitle'),
+                    statusCode: 403,
+                };
+            case constants_1.ErrorType.PageNotFound:
+                return {
+                    title: t('pageNotFoundTitle'),
+                    text: t('actionRedirectTitle'),
+                    statusCode: 404,
+                };
+            case constants_1.ErrorType.Offline:
+                return {
+                    title: t('offlineTitle'),
+                    text: t('offlineText'),
+                };
+            case constants_1.ErrorType.Redirect:
+                return {
+                    title: t('redirectTitle'),
+                    text: t('redirectText'),
+                };
+            case constants_1.ErrorType.FrontendError:
+            default:
+                return {
+                    title: t('frontendErrorTitle'),
+                    text: t('actionRedirectTitle'),
+                };
+        }
+    }, [errorType, t]);
+}
+function useGetButtonPropsByErrorType(errorType, mainPageUrl) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('ErrorPage');
+    return (0, react_1.useMemo)(() => {
+        switch (errorType) {
+            case constants_1.ErrorType.PageNotFound:
+            case constants_1.ErrorType.PageUnavailable:
+                return {
+                    text: t('mainPageLink'),
+                    icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.HomeOutlineInterfaceSVG, {}),
+                    href: mainPageUrl,
+                };
+            case constants_1.ErrorType.Redirect:
+                return {
+                    text: t('redirectButton'),
+                    href: mainPageUrl,
+                };
+            default:
+                return {
+                    text: t('refreshButton'),
+                    icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.RefreshInterfaceSVG, {}),
+                    onClick: () => (0, utils_1.isBrowser)() && window.location.reload(),
+                };
+        }
+    }, [errorType, mainPageUrl, t]);
+}

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

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

package/dist/cjs/components/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("./ErrorPage"), exports);

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

@@ -0,0 +1,180 @@
+.wrapper{
+  --svgExclamationMark:var(--sys-primary-accent-default, #389f74);
+  --svgStroke:var(--sys-neutral-decor-activated, #b6bac7);
+  --svgBackground:var(--sys-neutral-background1-level, #fdfdfd);
+  height:100%;
+  border-radius:var(--dimension-1m, 8px);
+  box-sizing:border-box;
+  padding:var(--dimension-6m, 48px);
+  gap:var(--dimension-6m, 48px);
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+@media (max-width: 767px){
+  .wrapper{
+    padding:var(--dimension-3m, 24px);
+    gap:var(--dimension-3m, 24px);
+  }
+}
+
+.statusCode{
+  vertical-align:top;
+  margin-left:var(--dimension-1m, 8px);
+}
+
+.leftSide{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+@media (max-width: 767px){
+  .leftSide{
+    height:100%;
+    justify-content:space-between;
+  }
+}
+
+.textContainer{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+
+.logo{
+  height:var(--dimension-3m, 24px);
+  margin-bottom:var(--dimension-3m, 24px);
+  display:inline-flex;
+}
+.logo svg{
+  height:100%;
+}
+
+.actionsLink{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-2m, 16px);
+}
+
+.buttonContainer{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-1m, 8px);
+}
+.buttonContainer * > path{
+  fill:currentColor;
+}
+@media (max-width: 767px){
+  .buttonContainer{
+    flex-direction:column;
+  }
+}
+
+.rightSide{
+  align-self:flex-end;
+  justify-self:center;
+  width:50%;
+  min-width:500px;
+  max-width:862px;
+  min-height:0;
+  display:flex;
+  flex-direction:column;
+  justify-content:flex-end;
+  align-items:flex-end;
+}
+@media (max-width: 1023px){
+  .rightSide{
+    justify-content:flex-start;
+    align-items:center;
+    min-width:0;
+    max-width:none;
+    width:100%;
+  }
+}
+@media (max-width: 767px){
+  .rightSide{
+    display:none;
+  }
+}
+
+@keyframes rotating{
+  from{
+    transform:rotate(0deg);
+  }
+  to{
+    transform:rotate(-360deg);
+  }
+}
+.rotateSmall{
+  transform-origin:center;
+  transform-box:fill-box;
+  animation:rotating 10s linear infinite;
+}
+
+.rotateBig{
+  transform-origin:center;
+  transform-box:fill-box;
+  animation:rotating 10s linear infinite;
+  animation-direction:reverse;
+}
+
+@media (max-width: 767px){
+  .button{
+    width:100%;
+  }
+}
+
+.pic{
+  max-width:863px;
+  max-height:520px;
+}
+@media (max-width: 1023px){
+  .pic{
+    max-height:100%;
+    max-width:100%;
+  }
+}
+
+.title{
+  font-family:var(--sans-display-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-display-s-font-weight, Semibold);
+  line-height:var(--sans-display-s-line-height, 48px);
+  font-size:var(--sans-display-s-font-size, 40px);
+  letter-spacing:var(--sans-display-s-letter-spacing, -0.5px);
+  paragraph-spacing:var(--sans-display-s-paragraph-spacing, 22px);
+  box-sizing:border-box;
+  max-width:100%;
+  margin:0;
+  padding:0;
+  overflow-wrap:break-word;
+}
+@media (max-width: 767px){
+  .title{
+    font-family:var(--sans-headline-m-font-family, SB Sans Interface);
+    font-weight:var(--sans-headline-m-font-weight, Semibold);
+    line-height:var(--sans-headline-m-line-height, 36px);
+    font-size:var(--sans-headline-m-font-size, 28px);
+    letter-spacing:var(--sans-headline-m-letter-spacing, -0.5px);
+    paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
+  }
+}
+
+.actionsTitle{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
+@media (max-width: 767px){
+  .actionsTitle{
+    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);
+  }
+}

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/ErrorPage.d.ts

@@ -0,0 +1,15 @@
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { ErrorType, LogoVariant } from './constants';
+export type ErrorPageProps = WithSupportProps<{
+    className?: string;
+    mainPageUrl?: string;
+    onSupportCenterClick?(): void;
+    logoVariant?: LogoVariant;
+    errorType?: ErrorType;
+    showMainButton?: boolean;
+}>;
+export declare function ErrorPage({ className, mainPageUrl, onSupportCenterClick, logoVariant, errorType, showMainButton, ...rest }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ErrorPage {
+    var logoVariants: typeof LogoVariant;
+    var errorTypes: typeof ErrorType;
+}

package/dist/esm/components/ErrorPage.js

@@ -0,0 +1,46 @@
+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 { CloudFullLogoSVG, MailInterfaceSVG, MlSpaceFullLogoSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonFilled, ButtonOutline } from '@snack-uikit/button';
+import { Link } from '@snack-uikit/link';
+import { Tag } from '@snack-uikit/tag';
+import { isBrowser } from '@snack-uikit/utils';
+import { COLORS, ErrorType, LogoVariant } from './constants';
+import { useGetButtonPropsByErrorType, useGetContentByErrorType } from './hooks';
+import styles from './styles.module.css';
+export function ErrorPage(_a) {
+    var { className, mainPageUrl = '/', onSupportCenterClick, logoVariant = LogoVariant.None, errorType = ErrorType.FrontendError, showMainButton = true } = _a, rest = __rest(_a, ["className", "mainPageUrl", "onSupportCenterClick", "logoVariant", "errorType", "showMainButton"]);
+    const { t } = useLocale('ErrorPage');
+    const content = useGetContentByErrorType(errorType);
+    const button = useGetButtonPropsByErrorType(errorType, mainPageUrl);
+    const hasMainPageLink = [ErrorType.FrontendError].includes(errorType);
+    const hasBackLink = [ErrorType.FrontendError, ErrorType.PageUnavailable].includes(errorType);
+    const logo = useMemo(() => {
+        switch (logoVariant) {
+            case LogoVariant.MLSpace:
+                return (_jsx("div", { className: styles.logo, children: _jsx(MlSpaceFullLogoSVG, {}) }));
+            case LogoVariant.Cloud:
+                return (_jsx("div", { className: styles.logo, children: _jsx(CloudFullLogoSVG, {}) }));
+            case LogoVariant.None:
+            default:
+                return null;
+        }
+    }, [logoVariant]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.leftSide, children: [_jsxs("div", { className: styles.textContainer, children: [logo, _jsxs("h1", { className: styles.title, "data-user": true, children: [content.title, content.statusCode && (_jsx(Tag, { className: styles.statusCode, appearance: 'neutral', size: 's', label: String(content.statusCode) }))] }), _jsxs("div", { className: styles.actionWrapper, children: [_jsx("span", { className: styles.actionsTitle, children: content.text }), _jsxs("div", { className: styles.actionsLink, children: [hasMainPageLink && _jsx(Link, { size: 'm', href: mainPageUrl, target: '_self', text: t('mainPageLink') }), hasBackLink && (_jsx(Link, { size: 'm', onClick: () => isBrowser() && window.history.back(), target: '_self', text: t('backLink') }))] })] })] }), _jsxs("div", { className: styles.buttonContainer, children: [onSupportCenterClick && (_jsx(ButtonOutline, { size: 'm', className: styles.button, label: t('supportCenterButton'), onClick: onSupportCenterClick, icon: _jsx(MailInterfaceSVG, {}) })), showMainButton && (_jsx(ButtonFilled, { size: 'm', className: styles.button, label: button.text, href: button.href, target: button.href && '_self', onClick: button.onClick, icon: button.icon }))] })] }), _jsx("div", { className: styles.rightSide, children: _jsxs("svg", { className: styles.pic, viewBox: '0 0 863 520', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("path", { d: 'M721.711 93H94.2882C86.397 93 80 99.8168 80 108.226V446.774C80 455.183 86.397 462 94.2882 462H721.711C729.602 462 735.999 455.183 735.999 446.774V108.226C735.999 99.8168 729.602 93 721.711 93Z', fill: `var(${COLORS.svgBackground})`, stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10' }), _jsx("path", { d: 'M735.999 165H81.7061', stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10' }), _jsx("path", { d: 'M126.81 129C126.81 135.079 121.902 140 115.857 140C109.812 140 104.905 135.079 104.905 129C104.905 122.921 109.812 118 115.857 118C121.902 118 126.81 122.921 126.81 129Z', stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2' }), _jsx("path", { d: 'M158.681 129C158.681 135.079 153.773 140 147.729 140C141.684 140 136.776 135.079 136.776 129C136.776 122.921 141.684 118 147.729 118C153.773 118 158.681 122.921 158.681 129Z', stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2' }), _jsx("path", { d: 'M190.557 129C190.557 135.079 185.649 140 179.605 140C173.56 140 168.652 135.079 168.652 129C168.652 122.921 173.56 118 179.605 118C185.649 118 190.557 122.921 190.557 129Z', stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2' }), _jsx("path", { d: 'M22.0427 284.986L116.584 256.508C116.925 256.415 117.286 256.426 117.621 256.539C117.957 256.652 118.251 256.863 118.468 257.144C118.685 257.425 118.814 257.765 118.839 258.12C118.864 258.476 118.785 258.83 118.61 259.14L67.8006 344.25C67.6327 344.526 67.3933 344.75 67.108 344.899C66.8227 345.047 66.5024 345.115 66.1819 345.093C65.8613 345.072 65.5527 344.963 65.2893 344.778C65.0259 344.593 64.8177 344.338 64.6874 344.043L54.9955 322.218C54.8828 321.975 54.7176 321.759 54.5117 321.588C54.3059 321.417 54.0646 321.294 53.8056 321.229C53.5466 321.164 53.2765 321.158 53.0148 321.211C52.7532 321.265 52.5067 321.376 52.2934 321.538L16.6093 349.484C16.2343 349.771 15.7621 349.898 15.2948 349.837C14.8276 349.777 14.4029 349.533 14.1129 349.159L9.14941 342.742L4.36224 336.531C4.07866 336.159 3.95338 335.688 4.01394 335.222C4.0745 334.757 4.3159 334.334 4.68526 334.047L40.3693 306.101C40.6056 305.935 40.7986 305.714 40.9319 305.456C41.0651 305.199 41.1347 304.913 41.1347 304.623C41.1347 304.332 41.0651 304.046 40.9319 303.789C40.7986 303.532 40.6056 303.31 40.3693 303.144L21.426 287.914C21.2068 287.709 21.0442 287.45 20.9539 287.163C20.8636 286.875 20.8488 286.569 20.9109 286.274C20.973 285.98 21.11 285.706 21.3083 285.48C21.5067 285.255 21.7597 285.084 22.0427 284.986Z', fill: `var(${COLORS.svgBackground})`, stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), _jsx("path", { d: 'M148.586 311.289L124.086 283.727', stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), _jsx("path", { d: 'M159.336 300.565L130.242 279.127', stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), _jsx("path", { d: 'M166.969 286.789L133.281 273.008', stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), _jsx("path", { d: 'M390.619 52.8901L157.466 483.672C155.767 486.812 154.919 490.334 155.006 493.894C155.093 497.454 156.112 500.932 157.964 503.987C159.815 507.041 162.436 509.57 165.57 511.325C168.704 513.08 172.245 514.001 175.847 514H642.153C645.755 514.001 649.296 513.08 652.43 511.325C655.564 509.57 658.185 507.041 660.036 503.987C661.888 500.932 662.907 497.454 662.994 493.894C663.081 490.334 662.233 486.812 660.534 483.672L427.41 52.8901C425.627 49.5993 422.974 46.8484 419.735 44.9306C416.495 43.0129 412.79 42 409.015 42C405.239 42 401.534 43.0129 398.294 44.9306C395.055 46.8484 392.402 49.5993 390.619 52.8901Z', fill: `var(${COLORS.svgBackground})`, stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeLinecap: 'round' }), _jsx("path", { d: 'M408.107 376C405.042 375.986 402.075 374.935 399.7 373.022C397.324 371.109 395.683 368.449 395.05 365.485L368.005 235.997C366.644 229.996 366.665 223.77 368.067 217.779C369.469 211.787 372.215 206.184 376.104 201.384C379.992 196.583 384.922 192.708 390.53 190.045C396.137 187.383 402.279 186 408.5 186C414.721 186 420.863 187.383 426.47 190.045C432.078 192.708 437.008 196.583 440.896 201.384C444.785 206.184 447.531 211.787 448.933 217.779C450.335 223.77 450.356 229.996 448.995 235.997L422.095 364.708C421.422 367.887 419.666 370.743 417.12 372.798C414.575 374.853 411.393 375.983 408.107 376Z', fill: `var(${COLORS.svgExclamationMark})` }), _jsx("path", { d: 'M408 454C402.66 454 397.44 452.416 393 449.45C388.559 446.483 385.099 442.266 383.055 437.332C381.012 432.399 380.477 426.97 381.519 421.733C382.561 416.495 385.132 411.684 388.908 407.908C392.684 404.132 397.495 401.561 402.733 400.519C407.97 399.477 413.399 400.012 418.332 402.055C423.266 404.099 427.483 407.559 430.45 412C433.416 416.44 435 421.66 435 427C434.992 434.158 432.145 441.021 427.083 446.083C422.021 451.145 415.158 453.992 408 454Z', fill: `var(${COLORS.svgExclamationMark})` }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M758.622 69.709C758.622 65.2907 762.204 61.709 766.622 61.709H777.378C781.796 61.709 785.378 65.2907 785.378 69.709V75.6192C785.378 79.4239 788.076 82.6524 791.712 83.7722C795.74 85.0126 799.606 86.623 803.269 88.5639C806.631 90.3449 810.821 89.9691 813.511 87.279L817.695 83.0952C820.819 79.971 825.884 79.971 829.009 83.0952L836.614 90.7003C839.738 93.8245 839.738 98.8899 836.614 102.014L832.43 106.198C829.74 108.888 829.364 113.078 831.145 116.44C833.086 120.103 834.697 123.969 835.937 127.997C837.057 131.633 840.285 134.331 844.09 134.331H850C854.418 134.331 858 137.913 858 142.331V153.087C858 157.505 854.418 161.087 850 161.087H844.09C840.285 161.087 837.057 163.785 835.937 167.421C834.697 171.449 833.086 175.315 831.145 178.978C829.364 182.34 829.74 186.53 832.43 189.22L836.614 193.404C839.738 196.528 839.738 201.593 836.614 204.718L829.009 212.323C825.884 215.447 820.819 215.447 817.695 212.323L813.511 208.139C810.821 205.449 806.631 205.073 803.269 206.854C799.606 208.795 795.74 210.405 791.712 211.646C788.076 212.766 785.378 215.994 785.378 219.799V225.709C785.378 230.127 781.796 233.709 777.378 233.709H766.622C762.204 233.709 758.622 230.127 758.622 225.709V219.799C758.622 215.994 755.924 212.766 752.288 211.646C748.26 210.405 744.395 208.795 740.731 206.854C737.369 205.073 733.179 205.449 730.489 208.139L726.305 212.323C723.181 215.447 718.116 215.447 714.992 212.323L707.386 204.718C704.262 201.593 704.262 196.528 707.386 193.404L711.57 189.22C714.26 186.53 714.636 182.34 712.855 178.978C710.914 175.315 709.303 171.449 708.063 167.421C706.943 163.785 703.715 161.087 699.91 161.087H694C689.582 161.087 686 157.505 686 153.087V142.331C686 137.913 689.582 134.331 694 134.331H699.91C703.715 134.331 706.943 131.633 708.063 127.997C709.303 123.969 710.914 120.103 712.855 116.44C714.636 113.078 714.26 108.888 711.57 106.198L707.386 102.014C704.262 98.8899 704.262 93.8246 707.386 90.7004L714.992 83.0952C718.116 79.971 723.181 79.971 726.305 83.0952L730.489 87.279C733.179 89.9691 737.369 90.3449 740.731 88.5639C744.395 86.623 748.26 85.0126 752.288 83.7722C755.924 82.6524 758.622 79.4239 758.622 75.6192V69.709ZM772 181.153C753.529 181.153 738.556 166.18 738.556 147.709C738.556 129.238 753.529 114.265 772 114.265C790.471 114.265 805.444 129.238 805.444 147.709C805.444 166.18 790.471 181.153 772 181.153Z', fill: `var(${COLORS.svgBackground})`, stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10', className: styles.rotateSmall }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M646 8C646 5.79102 647.791 4 650 4H662C664.209 4 666 5.79102 666 8V14.4608C666 18.2656 668.708 21.4784 672.304 22.7186C674.226 23.3813 676.095 24.1579 677.903 25.0403C681.322 26.7089 685.507 26.3511 688.197 23.6611L692.77 19.0889C694.332 17.5264 696.864 17.5264 698.427 19.0889L706.912 27.5732C708.474 29.1357 708.474 31.6689 706.912 33.2305L702.34 37.8025C699.649 40.4926 699.292 44.6783 700.96 48.0973C701.842 49.9049 702.619 51.7737 703.281 53.6955C704.521 57.2925 707.734 60 711.539 60H718C720.209 60 722 61.791 722 64V76C722 78.209 720.209 80 718 80H711.539C707.734 80 704.521 82.7075 703.281 86.3045C702.619 88.2261 701.842 90.0947 700.96 91.9021C699.292 95.3209 699.649 99.5063 702.339 102.196L706.912 106.77C708.474 108.331 708.474 110.864 706.912 112.426L698.427 120.911C696.864 122.474 694.332 122.474 692.77 120.911L688.198 116.339C685.508 113.649 681.322 113.292 677.903 114.96C676.095 115.843 674.226 116.619 672.305 117.282C668.708 118.522 666 121.734 666 125.539V132C666 134.209 664.209 136 662 136H650C647.791 136 646 134.209 646 132V125.539C646 121.734 643.292 118.522 639.696 117.281C637.774 116.619 635.905 115.842 634.097 114.96C630.679 113.291 626.493 113.649 623.803 116.339L619.23 120.912C617.668 122.474 615.136 122.474 613.574 120.912L605.088 112.427C603.526 110.864 603.526 108.332 605.088 106.77L609.661 102.197C612.351 99.5074 612.709 95.3217 611.04 91.9027C610.158 90.0951 609.381 88.2263 608.719 86.3045C607.479 82.7075 604.266 80 600.461 80H594C591.791 80 590 78.209 590 76V64C590 61.791 591.791 60 594 60H600.461C604.266 60 607.479 57.2925 608.719 53.6955C609.381 51.7737 610.158 49.9049 611.04 48.0973C612.709 44.6783 612.351 40.4926 609.661 37.8025L605.088 33.2305C603.526 31.668 603.526 29.1357 605.088 27.5732L613.574 19.0879C615.136 17.5264 617.668 17.5264 619.23 19.0879L623.803 23.6605C626.493 26.3503 630.679 26.708 634.098 25.0396C635.905 24.1574 637.774 23.381 639.696 22.7185C643.292 21.4784 646 18.2656 646 14.4609V8ZM656 95C642.193 95 631 83.8066 631 70C631 56.1934 642.193 45 656 45C669.807 45 681 56.1934 681 70C681 83.8066 669.807 95 656 95Z', fill: `var(${COLORS.svgBackground})`, stroke: `var(${COLORS.svgStroke})`, strokeWidth: '2', strokeMiterlimit: '10', className: styles.rotateBig })] }) })] })));
+}
+ErrorPage.logoVariants = LogoVariant;
+ErrorPage.errorTypes = ErrorType;

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

@@ -0,0 +1,17 @@
+export declare enum LogoVariant {
+    MLSpace = "MLSpace",
+    Cloud = "Cloud",
+    None = "None"
+}
+export declare enum ErrorType {
+    FrontendError = "FrontendError",
+    PageUnavailable = "PageUnavailable",
+    PageNotFound = "PageNotFound",
+    Offline = "Offline",
+    Redirect = "Redirect"
+}
+export declare const COLORS: {
+    svgExclamationMark: string;
+    svgStroke: string;
+    svgBackground: string;
+};

package/dist/esm/components/constants.js

@@ -0,0 +1,19 @@
+export var LogoVariant;
+(function (LogoVariant) {
+    LogoVariant["MLSpace"] = "MLSpace";
+    LogoVariant["Cloud"] = "Cloud";
+    LogoVariant["None"] = "None";
+})(LogoVariant || (LogoVariant = {}));
+export var ErrorType;
+(function (ErrorType) {
+    ErrorType["FrontendError"] = "FrontendError";
+    ErrorType["PageUnavailable"] = "PageUnavailable";
+    ErrorType["PageNotFound"] = "PageNotFound";
+    ErrorType["Offline"] = "Offline";
+    ErrorType["Redirect"] = "Redirect";
+})(ErrorType || (ErrorType = {}));
+export const COLORS = {
+    svgExclamationMark: '--svgExclamationMark',
+    svgStroke: '--svgStroke',
+    svgBackground: '--svgBackground',
+};

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

@@ -0,0 +1,26 @@
+import { ErrorType } from './constants';
+export declare function useGetContentByErrorType(errorType: ErrorType): {
+    title: string;
+    text: string;
+    statusCode: number;
+} | {
+    title: string;
+    text: string;
+    statusCode?: undefined;
+};
+export declare function useGetButtonPropsByErrorType(errorType: ErrorType, mainPageUrl?: string): {
+    text: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    href: string | undefined;
+    onClick?: undefined;
+} | {
+    text: string;
+    href: string | undefined;
+    icon?: undefined;
+    onClick?: undefined;
+} | {
+    text: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    onClick: () => false | void;
+    href?: undefined;
+};

package/dist/esm/components/hooks.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { HomeOutlineInterfaceSVG, RefreshInterfaceSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { isBrowser } from '@snack-uikit/utils';
+import { ErrorType } from './constants';
+export function useGetContentByErrorType(errorType) {
+    const { t } = useLocale('ErrorPage');
+    return useMemo(() => {
+        switch (errorType) {
+            case ErrorType.PageUnavailable:
+                return {
+                    title: t('pageUnavailableTitle'),
+                    text: t('actionRedirectTitle'),
+                    statusCode: 403,
+                };
+            case ErrorType.PageNotFound:
+                return {
+                    title: t('pageNotFoundTitle'),
+                    text: t('actionRedirectTitle'),
+                    statusCode: 404,
+                };
+            case ErrorType.Offline:
+                return {
+                    title: t('offlineTitle'),
+                    text: t('offlineText'),
+                };
+            case ErrorType.Redirect:
+                return {
+                    title: t('redirectTitle'),
+                    text: t('redirectText'),
+                };
+            case ErrorType.FrontendError:
+            default:
+                return {
+                    title: t('frontendErrorTitle'),
+                    text: t('actionRedirectTitle'),
+                };
+        }
+    }, [errorType, t]);
+}
+export function useGetButtonPropsByErrorType(errorType, mainPageUrl) {
+    const { t } = useLocale('ErrorPage');
+    return useMemo(() => {
+        switch (errorType) {
+            case ErrorType.PageNotFound:
+            case ErrorType.PageUnavailable:
+                return {
+                    text: t('mainPageLink'),
+                    icon: _jsx(HomeOutlineInterfaceSVG, {}),
+                    href: mainPageUrl,
+                };
+            case ErrorType.Redirect:
+                return {
+                    text: t('redirectButton'),
+                    href: mainPageUrl,
+                };
+            default:
+                return {
+                    text: t('refreshButton'),
+                    icon: _jsx(RefreshInterfaceSVG, {}),
+                    onClick: () => isBrowser() && window.location.reload(),
+                };
+        }
+    }, [errorType, mainPageUrl, t]);
+}

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

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

package/dist/esm/components/index.js

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

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

@@ -0,0 +1,180 @@
+.wrapper{
+  --svgExclamationMark:var(--sys-primary-accent-default, #389f74);
+  --svgStroke:var(--sys-neutral-decor-activated, #b6bac7);
+  --svgBackground:var(--sys-neutral-background1-level, #fdfdfd);
+  height:100%;
+  border-radius:var(--dimension-1m, 8px);
+  box-sizing:border-box;
+  padding:var(--dimension-6m, 48px);
+  gap:var(--dimension-6m, 48px);
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+@media (max-width: 767px){
+  .wrapper{
+    padding:var(--dimension-3m, 24px);
+    gap:var(--dimension-3m, 24px);
+  }
+}
+
+.statusCode{
+  vertical-align:top;
+  margin-left:var(--dimension-1m, 8px);
+}
+
+.leftSide{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+@media (max-width: 767px){
+  .leftSide{
+    height:100%;
+    justify-content:space-between;
+  }
+}
+
+.textContainer{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+
+.logo{
+  height:var(--dimension-3m, 24px);
+  margin-bottom:var(--dimension-3m, 24px);
+  display:inline-flex;
+}
+.logo svg{
+  height:100%;
+}
+
+.actionsLink{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-2m, 16px);
+}
+
+.buttonContainer{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-1m, 8px);
+}
+.buttonContainer * > path{
+  fill:currentColor;
+}
+@media (max-width: 767px){
+  .buttonContainer{
+    flex-direction:column;
+  }
+}
+
+.rightSide{
+  align-self:flex-end;
+  justify-self:center;
+  width:50%;
+  min-width:500px;
+  max-width:862px;
+  min-height:0;
+  display:flex;
+  flex-direction:column;
+  justify-content:flex-end;
+  align-items:flex-end;
+}
+@media (max-width: 1023px){
+  .rightSide{
+    justify-content:flex-start;
+    align-items:center;
+    min-width:0;
+    max-width:none;
+    width:100%;
+  }
+}
+@media (max-width: 767px){
+  .rightSide{
+    display:none;
+  }
+}
+
+@keyframes rotating{
+  from{
+    transform:rotate(0deg);
+  }
+  to{
+    transform:rotate(-360deg);
+  }
+}
+.rotateSmall{
+  transform-origin:center;
+  transform-box:fill-box;
+  animation:rotating 10s linear infinite;
+}
+
+.rotateBig{
+  transform-origin:center;
+  transform-box:fill-box;
+  animation:rotating 10s linear infinite;
+  animation-direction:reverse;
+}
+
+@media (max-width: 767px){
+  .button{
+    width:100%;
+  }
+}
+
+.pic{
+  max-width:863px;
+  max-height:520px;
+}
+@media (max-width: 1023px){
+  .pic{
+    max-height:100%;
+    max-width:100%;
+  }
+}
+
+.title{
+  font-family:var(--sans-display-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-display-s-font-weight, Semibold);
+  line-height:var(--sans-display-s-line-height, 48px);
+  font-size:var(--sans-display-s-font-size, 40px);
+  letter-spacing:var(--sans-display-s-letter-spacing, -0.5px);
+  paragraph-spacing:var(--sans-display-s-paragraph-spacing, 22px);
+  box-sizing:border-box;
+  max-width:100%;
+  margin:0;
+  padding:0;
+  overflow-wrap:break-word;
+}
+@media (max-width: 767px){
+  .title{
+    font-family:var(--sans-headline-m-font-family, SB Sans Interface);
+    font-weight:var(--sans-headline-m-font-weight, Semibold);
+    line-height:var(--sans-headline-m-line-height, 36px);
+    font-size:var(--sans-headline-m-font-size, 28px);
+    letter-spacing:var(--sans-headline-m-letter-spacing, -0.5px);
+    paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
+  }
+}
+
+.actionsTitle{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
+@media (max-width: 767px){
+  .actionsTitle{
+    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);
+  }
+}

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-error-pages",
   "title": "Error Pages",
-  "version": "0.13.7",
+  "version": "0.13.9",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,14 +30,15 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "15.1.1",
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-icons": "15.1.3",
+    "@cloud-ru/uikit-product-utils": "7.0.2",
     "@snack-uikit/button": "0.19.7",
     "@snack-uikit/link": "0.15.9",
     "@snack-uikit/tag": "0.12.4",
@@ -47,5 +48,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
 }