@wallarm-org/design-system 0.58.0-rc-feature-AS-1085.4 → 0.58.0

package/dist/components/AnimatedBackground/AnimatedBackground.js

@@ -5,8 +5,8 @@ import { GameHud } from "./GameHud.js";
 import { createSweepEngine, resolveOptions, useGameKeyboard } from "./module/index.js";
 const GATE_TARGET = 5;
 const AnimatedBackground = (props)=>{
-    const { ref, texture, paused, game = false, excludeCardSize, className, ...rest } = props;
-    const internalRef = useRef(null);
+    const { ref, texture, paused, game = false, excludeCardSize, className, children, ...rest } = props;
+    const canvasRef = useRef(null);
     const engineRef = useRef(null);
     const reducedMotionRef = useRef(null);
     const options = resolveOptions(props);
@@ -35,7 +35,7 @@ const AnimatedBackground = (props)=>{
     const accuracy = faced > 0 ? Math.round(stats.stopped / faced * 100) : 100;
     const hasStartedRoundRef = useRef(false);
     useEffect(()=>{
-        const canvas = internalRef.current;
+        const canvas = canvasRef.current;
         if (!canvas) return;
         const engine = createSweepEngine(canvas, optionsRef.current);
         engineRef.current = engine;
@@ -119,7 +119,7 @@ const AnimatedBackground = (props)=>{
     useGameKeyboard(engineRef, game, armed, roundOver, hasStartedRoundRef);
     const onPointerDown = useCallback((e)=>{
         if (!game) return;
-        const canvas = internalRef.current;
+        const canvas = canvasRef.current;
         if (!canvas) return;
         const rect = canvas.getBoundingClientRect();
         const x = e.clientX - rect.left;
@@ -131,30 +131,53 @@ const AnimatedBackground = (props)=>{
     const handleTryAgain = useCallback(()=>{
         engineRef.current?.startRound();
     }, []);
-    return /*#__PURE__*/ jsxs(Fragment, {
+    const gameHud = gameActive && /*#__PURE__*/ jsx(GameHud, {
+        caught: caught,
+        armed: armed,
+        roundOver: roundOver,
+        stats: stats,
+        accuracy: accuracy,
+        faced: faced,
+        catchKey: catchKey,
+        gateTarget: GATE_TARGET,
+        onTryAgain: handleTryAgain
+    });
+    if (null == children) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("canvas", {
+                "data-slot": "animated-background",
                 ...rest,
                 ref: (node)=>{
-                    internalRef.current = node;
+                    canvasRef.current = node;
                     if ('function' == typeof ref) ref(node);
                     else if (ref) ref.current = node;
                 },
-                "data-slot": "animated-background",
                 "aria-hidden": "true",
                 className: cn('h-full w-full pointer-events-none', gameActive && 'pointer-events-auto', className),
                 onPointerDown: gameActive ? onPointerDown : void 0
             }),
-            gameActive && /*#__PURE__*/ jsx(GameHud, {
-                caught: caught,
-                armed: armed,
-                roundOver: roundOver,
-                stats: stats,
-                accuracy: accuracy,
-                faced: faced,
-                catchKey: catchKey,
-                gateTarget: GATE_TARGET,
-                onTryAgain: handleTryAgain
+            gameHud
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "animated-background",
+        ...rest,
+        ref: ref,
+        className: cn('relative', className),
+        children: [
+            /*#__PURE__*/ jsx("canvas", {
+                ref: canvasRef,
+                "aria-hidden": "true",
+                className: cn('absolute inset-0 h-full w-full pointer-events-none', gameActive && 'pointer-events-auto'),
+                onPointerDown: gameActive ? onPointerDown : void 0
+            }),
+            gameHud,
+            /*#__PURE__*/ jsx("div", {
+                className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "pointer-events-auto",
+                    children: children
+                })
             })
         ]
     });

package/dist/components/AnimatedBackground/module/types.d.ts

@@ -1,7 +1,9 @@
-import type { CanvasHTMLAttributes, Ref } from 'react';
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
 export type Texture = 'clean' | 'halftone';
-export interface AnimatedBackgroundProps extends Omit<CanvasHTMLAttributes<HTMLCanvasElement>, 'children'> {
-    ref?: Ref<HTMLCanvasElement>;
+export interface AnimatedBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /** Content rendered centered above the animated canvas. */
+    children?: ReactNode;
     /** Variant A (`clean`) vs Variant B (`halftone`). */
     texture?: Texture;
     /** Grid cell size in px. */

package/dist/components/UtilityPage/UtilityPage.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+export interface UtilityPageProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    title: string;
+    subtitle: string;
+    description: string;
+    children?: ReactNode;
+}
+export declare const UtilityPage: FC<UtilityPageProps>;

package/dist/components/UtilityPage/UtilityPage.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { AnimatedBackground } from "../AnimatedBackground/index.js";
+import { Logo } from "../Logo/index.js";
+const UtilityPage = ({ ref, title, subtitle, description, className, children, ...props })=>/*#__PURE__*/ jsx(AnimatedBackground, {
+        ...props,
+        ref: ref,
+        "data-slot": "utility-page",
+        className: cn('min-h-screen w-full bg-component-app-shell-bg', className),
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "flex w-[482px] flex-col items-center gap-32 rounded-12 border-1 border-border-primary-light bg-bg-surface-1 px-48 pt-32 pb-80 shadow-xs",
+            children: [
+                /*#__PURE__*/ jsx(Logo, {
+                    type: "full",
+                    size: "lg",
+                    className: "self-start mb-32"
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "w-full flex flex-col items-start gap-12",
+                    children: [
+                        /*#__PURE__*/ jsx("h1", {
+                            className: "font-mono text-6xl font-medium text-text-primary",
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex flex-col items-start gap-4",
+                            children: [
+                                /*#__PURE__*/ jsx("p", {
+                                    className: "text-lg font-medium text-text-primary",
+                                    children: subtitle
+                                }),
+                                /*#__PURE__*/ jsx("p", {
+                                    className: "text-sm text-text-secondary",
+                                    children: description
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                children && /*#__PURE__*/ jsx("div", {
+                    className: "w-full flex flex-col gap-8",
+                    children: children
+                })
+            ]
+        })
+    });
+UtilityPage.displayName = 'UtilityPage';
+export { UtilityPage };

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

@@ -0,0 +1 @@
+export { UtilityPage, type UtilityPageProps } from './UtilityPage';

package/dist/components/UtilityPage/index.js

@@ -0,0 +1,2 @@
+import { UtilityPage } from "./UtilityPage.js";
+export { UtilityPage };

package/dist/index.d.ts

@@ -77,4 +77,5 @@ export { ToggleButton, type ToggleButtonProps, } from './components/ToggleButton
 export { Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, } from './components/Tooltip';
 export { TopHeader, TopHeaderActions, type TopHeaderActionsProps, TopHeaderLogo, type TopHeaderLogoProps, type TopHeaderProps, } from './components/TopHeader';
 export { type BeaconStepEffectOptions, beaconStepEffect, Tour, type TourProps, type TourStatusChangeDetails, type TourStepAction, type TourStepChangeDetails, type TourStepChangeDetailsExtended, type TourStepDetails, type TourStepEffectArgs, useTour, type WaitForStepEventOptions, waitForStepEvent, } from './components/Tour';
+export { UtilityPage, type UtilityPageProps } from './components/UtilityPage';
 export { type TestableProps, TestIdProvider, useTestId } from './utils/testId';

package/dist/index.js

@@ -66,5 +66,6 @@ import { ToggleButton } from "./components/ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";
 import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHeader/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
+import { UtilityPage } from "./components/UtilityPage/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useLocationPathname, usePageHost, useRemoteShellContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, UtilityPage, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useLocationPathname, usePageHost, useRemoteShellContext, useTestId, useTheme, useTour, waitForStepEvent };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.57.0",
-  "generatedAt": "2026-06-11T11:08:58.087Z",
+  "version": "0.57.1",
+  "generatedAt": "2026-06-11T17:00:57.573Z",
   "components": [
     {
       "name": "Accordion",
@@ -3431,16 +3431,6 @@
           "required": false,
           "description": "Card dimensions for spawn-exclusion when game is enabled."
         },
-        {
-          "name": "height",
-          "type": "string | number | undefined",
-          "required": false
-        },
-        {
-          "name": "width",
-          "type": "string | number | undefined",
-          "required": false
-        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -3717,11 +3707,11 @@
       "examples": [
         {
           "name": "Halftone",
-          "code": "() => (\n  <div className='h-[500px] w-full'>\n    <AnimatedBackground />\n  </div>\n)"
+          "code": "() => (\n  <AnimatedBackground className='h-[500px] w-full' />\n)"
         },
         {
           "name": "WithCard",
-          "code": "() => (\n  <div className='relative h-screen w-screen'>\n    <AnimatedBackground game excludeCardSize={{ width: 300, height: 200 }} />\n\n    <Card className='absolute top-1/2 left-1/2 -translate-1/2 w-[300px] h-[200px]'>\n      <CardHeader>\n        <CardTitle>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className='text-sm text-text-secondary'>\n          Decorative background renders behind interactive content.\n        </p>\n      </CardContent>\n    </Card>\n  </div>\n)"
+          "code": "() => (\n  <AnimatedBackground\n    className='h-screen w-screen'\n    game\n    excludeCardSize={{ width: 300, height: 200 }}\n  >\n    <Card className='w-[300px] h-[200px]'>\n      <CardHeader>\n        <CardTitle>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className='text-sm text-text-secondary'>\n          Decorative background renders behind interactive content.\n        </p>\n      </CardContent>\n    </Card>\n  </AnimatedBackground>\n)"
         }
       ]
     },
@@ -58261,6 +58251,312 @@
           "code": "() => {\n  const nameRef = useRef<HTMLInputElement>(null);\n  const emailRef = useRef<HTMLInputElement>(null);\n  const termsRef = useRef<HTMLLabelElement>(null);\n\n  const steps: TourStepDetails[] = [\n    {\n      id: 'enter-name',\n      type: 'tooltip',\n      title: 'Enter Your Name',\n      description: 'Type your name in the input field to continue (at least 2 characters).',\n      target: () => nameRef.current,\n      placement: 'bottom-start',\n      effect: args =>\n        waitForStepEvent('input', args, {\n          predicate: el => (el as HTMLInputElement).value.trim().length >= 2,\n          delay: 1500,\n        }),\n    },\n    {\n      id: 'enter-email',\n      type: 'tooltip',\n      title: 'Enter Your Email',\n      description: 'Now enter a valid email address.',\n      target: () => emailRef.current,\n      placement: 'bottom-start',\n      effect: args =>\n        waitForStepEvent('input', args, {\n          predicate: el => {\n            const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n            return emailRegex.test((el as HTMLInputElement).value);\n          },\n          delay: 1500,\n        }),\n    },\n    {\n      id: 'check-terms',\n      type: 'tooltip',\n      title: 'Accept Terms',\n      description: 'Check the checkbox to accept the terms.',\n      target: () => termsRef.current,\n      placement: 'bottom-start',\n      effect: args =>\n        waitForStepEvent(\n          'change',\n          {\n            ...args,\n            target: () => termsRef.current?.querySelector<HTMLInputElement>('input') ?? null,\n          },\n          {\n            predicate: el => el.checked,\n          },\n        ),\n    },\n    {\n      id: 'complete',\n      type: 'dialog',\n      title: 'Form Complete!',\n      description: 'You have successfully filled out the form',\n      meta: {\n        mediaSrc: './tour-cat.jpg',\n        mediaAlt: 'Completion',\n      },\n    },\n  ];\n\n  const tour = useTour({ closeOnInteractOutside: false, steps });\n\n  return (\n    <div className='w-600 p-32'>\n      <VStack gap={24} align='stretch'>\n        <Text size='sm' color='secondary'>\n          To continue a step, user has to complete the highlighted action. Once the action is\n          performed, the tour will automatically move forward.\n        </Text>\n\n        <FieldSet>\n          <Field>\n            <FieldLabel>Name</FieldLabel>\n            <Input ref={nameRef} placeholder='Enter your name' />\n          </Field>\n          <Field>\n            <FieldLabel>Email</FieldLabel>\n            <Input ref={emailRef} type='email' placeholder='Enter your email' />\n          </Field>\n\n          <Checkbox ref={termsRef}>\n            <CheckboxIndicator />\n            <CheckboxLabel>I accept the terms and conditions</CheckboxLabel>\n          </Checkbox>\n        </FieldSet>\n\n        <Button\n          data-testid='tour-start'\n          variant='primary'\n          color='brand'\n          size='large'\n          onClick={() => tour.start()}\n        >\n          Interactive tour with inputs\n        </Button>\n      </VStack>\n\n      <Tour tour={tour} />\n    </div>\n  );\n}"
         }
       ]
+    },
+    {
+      "name": "UtilityPage",
+      "importPath": "@wallarm-org/design-system/UtilityPage",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "subtitle",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressContentEditableWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressHydrationWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "accessKey",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCapitalize",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "required": false
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "contentEditable",
+          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "required": false
+        },
+        {
+          "name": "contextMenu",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "dir",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "draggable",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false
+        },
+        {
+          "name": "hidden",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "lang",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "nonce",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "slot",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "translate",
+          "type": "\"yes\" | \"no\" | undefined",
+          "required": false
+        },
+        {
+          "name": "radioGroup",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "role",
+          "type": "AriaRole | undefined",
+          "required": false
+        },
+        {
+          "name": "about",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "content",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "datatype",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inlist",
+          "type": "any",
+          "required": false
+        },
+        {
+          "name": "prefix",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "property",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rel",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "resource",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rev",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "typeof",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "vocab",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCorrect",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoSave",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemProp",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemScope",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "itemType",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemID",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemRef",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "results",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "security",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "unselectable",
+          "type": "\"off\" | \"on\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popover",
+          "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTargetAction",
+          "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTarget",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inert",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+        },
+        {
+          "name": "inputMode",
+          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "required": false,
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+        },
+        {
+          "name": "is",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+        },
+        {
+          "name": "exportparts",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+        },
+        {
+          "name": "part",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        }
+      ],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Error404",
+          "code": "args => (\n  <UtilityPage {...args}>\n    <Button variant='primary' color='brand' size='large'>\n      Take me home\n    </Button>\n  </UtilityPage>\n)"
+        },
+        {
+          "name": "Error403",
+          "code": "args => (\n  <UtilityPage {...args}>\n    <Button variant='primary' color='brand' size='large'>\n      Take me home\n    </Button>\n  </UtilityPage>\n)"
+        },
+        {
+          "name": "Error500",
+          "code": "args => (\n  <UtilityPage {...args}>\n    <Button variant='primary' color='brand' size='large'>\n      Take me home\n    </Button>\n    <Button variant='secondary' color='neutral' size='large'>\n      Still broken? Check status <ArrowRight />\n    </Button>\n  </UtilityPage>\n)"
+        },
+        {
+          "name": "Offline",
+          "code": "args => (\n  <UtilityPage {...args}>\n    <Button variant='primary' color='brand' size='large'>\n      Try again\n    </Button>\n  </UtilityPage>\n)"
+        }
+      ]
     }
   ],
   "tokens": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.58.0-rc-feature-AS-1085.4",
+  "version": "0.58.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",