@wallarm-org/design-system 0.55.1 → 0.56.0

package/dist/components/AnimatedBackground/GameHud.js

@@ -1,11 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-const dotColor = 'var(--animated-bg-dot)';
-const caughtColor = 'var(--animated-bg-caught-dot)';
-const labelStyle = {
-    fontFeatureSettings: '"liga" 0',
-    color: dotColor
-};
 const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, gateTarget, onTryAgain })=>{
     const showCounter = caught > 0;
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -17,22 +11,14 @@ const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, g
                 },
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: cn('flex flex-col items-center justify-center border', armed ? 'h-113 w-119' : 'h-52 w-119'),
-                        style: {
-                            borderColor: dotColor,
-                            backgroundColor: `color-mix(in srgb, ${dotColor} 8%, transparent)`
-                        },
+                        className: cn('flex flex-col border w-120 border-text-hint bg-states-primary-hover', armed ? '' : 'items-center justify-center'),
                         children: armed ? /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: "flex flex-col items-center gap-4",
+                                    className: "flex flex-col items-center gap-4 px-16 py-8",
                                     children: [
                                         /*#__PURE__*/ jsxs("span", {
-                                            className: "text-base leading-xl font-bold",
-                                            style: {
-                                                fontFeatureSettings: '"tnum"',
-                                                color: caughtColor
-                                            },
+                                            className: "text-base leading-xl font-bold tabular-nums text-text-success",
                                             children: [
                                                 stats.stopped,
                                                 /*#__PURE__*/ jsxs("span", {
@@ -45,49 +31,44 @@ const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, g
                                             ]
                                         }),
                                         /*#__PURE__*/ jsx("span", {
-                                            className: "text-xs leading-xs uppercase",
-                                            style: labelStyle,
+                                            className: "text-xs leading-xs uppercase text-text-secondary",
+                                            style: {
+                                                fontFeatureSettings: '"liga" 0'
+                                            },
                                             children: "HIT"
                                         })
                                     ]
                                 }),
                                 /*#__PURE__*/ jsx("div", {
-                                    className: "h-px w-full my-8",
-                                    style: {
-                                        backgroundColor: dotColor
-                                    }
+                                    className: "h-px w-full bg-border-primary"
                                 }),
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: "flex flex-col items-center gap-4",
+                                    className: "flex flex-col items-center gap-4 px-16 py-8",
                                     children: [
                                         /*#__PURE__*/ jsxs("span", {
-                                            className: "text-base leading-xl font-bold",
-                                            style: {
-                                                fontFeatureSettings: '"tnum"',
-                                                color: caughtColor
-                                            },
+                                            className: "text-base leading-xl font-bold tabular-nums text-text-success",
                                             children: [
                                                 accuracy,
                                                 "%"
                                             ]
                                         }),
                                         /*#__PURE__*/ jsx("span", {
-                                            className: "text-xs leading-xs uppercase",
-                                            style: labelStyle,
+                                            className: "text-xs leading-xs uppercase text-text-secondary",
+                                            style: {
+                                                fontFeatureSettings: '"liga" 0'
+                                            },
                                             children: "SCORE"
                                         })
                                     ]
                                 })
                             ]
                         }) : /*#__PURE__*/ jsxs("div", {
-                            className: "flex flex-col items-center gap-4",
+                            className: "flex flex-col items-center gap-4 px-16 py-8",
                             children: [
                                 /*#__PURE__*/ jsxs("span", {
-                                    className: "text-base leading-xl font-bold",
+                                    className: "text-base leading-xl font-bold tabular-nums text-text-success",
                                     style: {
-                                        fontFeatureSettings: '"tnum"',
-                                        animation: 'catch-pop 0.25s ease-out',
-                                        color: caughtColor
+                                        animation: 'catch-pop 0.25s ease-out'
                                     },
                                     children: [
                                         caught,
@@ -101,8 +82,10 @@ const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, g
                                     ]
                                 }, catchKey),
                                 /*#__PURE__*/ jsx("span", {
-                                    className: "text-xs leading-xs uppercase",
-                                    style: labelStyle,
+                                    className: "text-xs leading-xs uppercase text-text-secondary",
+                                    style: {
+                                        fontFeatureSettings: '"liga" 0'
+                                    },
                                     children: "INSERT COIN"
                                 })
                             ]
@@ -110,27 +93,20 @@ const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, g
                     }),
                     roundOver && /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: "pointer-events-auto text-2xs leading-sm font-mono uppercase underline underline-offset-4 hover:text-[var(--animated-bg-accent-dot)]",
-                        style: {
-                            color: dotColor
-                        },
+                        className: "pointer-events-auto text-2xs leading-sm font-mono uppercase underline underline-offset-4 hover:text-[var(--animated-bg-accent-dot)] text-text-secondary",
                         onClick: onTryAgain,
                         children: "Try again"
                     }),
                     armed && !roundOver && /*#__PURE__*/ jsx("span", {
-                        className: "text-2xs leading-sm",
-                        style: {
-                            color: dotColor
-                        },
+                        className: "text-2xs leading-sm text-text-secondary",
                         children: '← → move · space fire · esc to exit'
                     })
                 ]
             }),
             caught > 0 && !armed && /*#__PURE__*/ jsx("div", {
-                className: "fixed bottom-24 left-1/2 -translate-x-1/2 text-xs pointer-events-none",
+                className: "fixed bottom-24 left-1/2 -translate-x-1/2 text-xs pointer-events-none text-text-secondary",
                 style: {
-                    animation: 'hud-in 0.3s ease-out',
-                    color: dotColor
+                    animation: 'hud-in 0.3s ease-out'
                 },
                 children: 'Click the red anomalies \u2014 catch 5 to arm the cannon, then \u2190 \u2192 move \u00B7 space fire'
             })

package/dist/components/AnimatedBackground/module/engine.js

@@ -15,7 +15,8 @@ function createSweepEngine(canvas, options) {
         h: 0,
         dots: [],
         opts,
-        tanTilt: Math.tan(options.tilt * Math.PI / 180)
+        tanTilt: Math.tan(options.tilt * Math.PI / 180),
+        exclusionBox: null
     };
     const game = createGameLogic(host);
     const rc = {
@@ -63,10 +64,15 @@ function createSweepEngine(canvas, options) {
         if (!running) renderStatic();
     }
     function drawClean(t) {
-        const { w, h, dots, tanTilt } = host;
+        const { w, h, dots, tanTilt, exclusionBox } = host;
         const sx = sweepX(t, w, opts.sweepPeriod);
         const intensity = opts.intensity;
+        const exL = exclusionBox ? (w - exclusionBox.width) / 2 : 0;
+        const exR = exclusionBox ? (w + exclusionBox.width) / 2 : 0;
+        const exT = exclusionBox ? (h - exclusionBox.height) / 2 : 0;
+        const exB = exclusionBox ? (h + exclusionBox.height) / 2 : 0;
         for (const dot of dots){
+            if (exclusionBox && dot.x >= exL && dot.x <= exR && dot.y >= exT && dot.y <= exB) continue;
             const dist = Math.abs(dot.x - (sx + (h / 2 - dot.y) * tanTilt));
             const inBloom = dist < opts.bloomRadius;
             const alpha = inBloom ? (CLEAN_BASE_ALPHA + (opts.bloomAlpha - CLEAN_BASE_ALPHA) * (1 - dist / opts.bloomRadius)) * intensity : CLEAN_BASE_ALPHA * intensity;
@@ -79,7 +85,8 @@ function createSweepEngine(canvas, options) {
         const sweepAt = (y)=>sx + (h / 2 - y) * tanTilt;
         if (t - lastLatch > opts.anomalyInterval && Math.random() < SPAWN_PROBABILITY && dots.length) {
             const cand = dots[Math.random() * dots.length | 0];
-            if (cand.x < sweepAt(cand.y) - SWEEP_OFFSET_GUARD) {
+            if (exclusionBox && cand.x >= exL && cand.x <= exR && cand.y >= exT && cand.y <= exB) ;
+            else if (cand.x < sweepAt(cand.y) - SWEEP_OFFSET_GUARD) {
                 lastLatch = t;
                 latched.push({
                     x: cand.x,

package/dist/components/AnimatedBackground/module/game-logic.d.ts

@@ -1,14 +1,17 @@
 import type { Dot } from './engine-grid';
 import type { EngineOptions, GameStats } from './types';
 export declare const ROUND_ATTACKS = 100;
-export declare const MAX_TARGETS = 6;
+export declare const MAX_TARGETS = 8;
 export declare const MAX_BULLETS = 24;
 export declare const BULLET_SPEED = 720;
-export declare const FIRE_CADENCE = 0.18;
-export declare const CANNON_SPEED = 420;
-export declare const TARGET_LIFE = 4;
-export declare const ARMED_SPAWN = 0.55;
+export declare const FIRE_CADENCE = 0.28;
+export declare const CANNON_SPEED = 350;
+export declare const TARGET_LIFE = 2.8;
+export declare const ARMED_SPAWN = 0.4;
 export declare const HIT_R2: number;
+export declare const TARGET_LIFE_END = 1.6;
+export declare const ARMED_SPAWN_END = 0.2;
+export declare const MAX_TARGETS_END = 12;
 export declare const CLICK_RADIUS = 52;
 export declare const REVEAL_DELAY = 0.3;
 export declare const ARM_RISE = 0.45;
@@ -58,6 +61,10 @@ export interface GameEngineHost {
     dots: Dot[];
     opts: EngineOptions;
     tanTilt: number;
+    exclusionBox: {
+        width: number;
+        height: number;
+    } | null;
 }
 export interface GameLogic {
     readonly anomalies: Anomaly[];

package/dist/components/AnimatedBackground/module/game-logic.js

@@ -1,14 +1,17 @@
 import { ANOMALY_VIS_THRESHOLD, DOT_STEP_BASE, DOT_STEP_SCALE, IDLE_MARGIN_X, IDLE_MARGIN_Y } from "./constants.js";
 import { sweepX } from "./engine-grid.js";
 const ROUND_ATTACKS = 100;
-const MAX_TARGETS = 6;
+const MAX_TARGETS = 8;
 const MAX_BULLETS = 24;
 const BULLET_SPEED = 720;
-const FIRE_CADENCE = 0.18;
-const CANNON_SPEED = 420;
-const TARGET_LIFE = 4.0;
-const ARMED_SPAWN = 0.55;
-const HIT_R2 = 484;
+const FIRE_CADENCE = 0.28;
+const CANNON_SPEED = 350;
+const TARGET_LIFE = 2.8;
+const ARMED_SPAWN = 0.4;
+const HIT_R2 = 256;
+const TARGET_LIFE_END = 1.6;
+const ARMED_SPAWN_END = 0.2;
+const MAX_TARGETS_END = 12;
 const CLICK_RADIUS = 52;
 const REVEAL_DELAY = 0.3;
 const ARM_RISE = 0.45;
@@ -263,17 +266,22 @@ function createGameLogic(host) {
     }
     function spawnTargets(t) {
         const sinceArm = t - state.armT;
-        if (sinceArm > FIRST_SPAWN_DELAY && roundSpawned < ROUND_ATTACKS && t - lastSpawn >= ARMED_SPAWN) {
+        const progress = Math.min(roundSpawned / ROUND_ATTACKS, 1);
+        const p = progress * progress;
+        const curSpawnInterval = ARMED_SPAWN + (ARMED_SPAWN_END - ARMED_SPAWN) * p;
+        const curMaxTargets = Math.round(MAX_TARGETS + (MAX_TARGETS_END - MAX_TARGETS) * p);
+        const curLife = TARGET_LIFE + (TARGET_LIFE_END - TARGET_LIFE) * p;
+        if (sinceArm > FIRST_SPAWN_DELAY && roundSpawned < ROUND_ATTACKS && t - lastSpawn >= curSpawnInterval) {
             let liveCount = 0;
             for (const anomaly of anomalies)if (!anomaly.caught) liveCount++;
-            if (liveCount < MAX_TARGETS) {
+            if (liveCount < curMaxTargets) {
                 const pos = spawnRing();
                 if (pos) {
                     anomalies.push({
                         x: pos.x,
                         y: pos.y,
                         t0: t,
-                        life: TARGET_LIFE,
+                        life: curLife,
                         caught: false
                     });
                     roundSpawned += 1;
@@ -414,12 +422,15 @@ function createGameLogic(host) {
     function setExclusion(box) {
         if (!box) {
             exclusionBox = null;
+            host.exclusionBox = null;
             return;
         }
-        exclusionBox = {
+        const val = {
             width: Math.min(box.width, host.w),
             height: Math.min(box.height, host.h)
         };
+        exclusionBox = val;
+        host.exclusionBox = val;
     }
     return {
         anomalies,
@@ -469,4 +480,4 @@ function createGameLogic(host) {
         }
     };
 }
-export { ANOMALY_R, ANOMALY_R_SQ, ARMED_SPAWN, ARM_RISE, BULLET_SPEED, CANNON_BARREL_Y, CANNON_BASE_OFFSET, CANNON_CLEAR, CANNON_HALF_W, CANNON_SPEED, CARD_CLEAR_PAD, CAUGHT_DUR, CLICK_RADIUS, FIRE_CADENCE, FIRST_SPAWN_DELAY, HIT_R2, HUD_CLEAR_H, HUD_CLEAR_W, IDLE_ANOMALY_LIFE, MAX_BULLETS, MAX_TARGETS, REVEAL_DELAY, ROUND_ATTACKS, SPAWN_EDGE, SPAWN_TRIES, TARGET_LIFE, VERDICTS, createGameLogic };
+export { ANOMALY_R, ANOMALY_R_SQ, ARMED_SPAWN, ARMED_SPAWN_END, ARM_RISE, BULLET_SPEED, CANNON_BARREL_Y, CANNON_BASE_OFFSET, CANNON_CLEAR, CANNON_HALF_W, CANNON_SPEED, CARD_CLEAR_PAD, CAUGHT_DUR, CLICK_RADIUS, FIRE_CADENCE, FIRST_SPAWN_DELAY, HIT_R2, HUD_CLEAR_H, HUD_CLEAR_W, IDLE_ANOMALY_LIFE, MAX_BULLETS, MAX_TARGETS, MAX_TARGETS_END, REVEAL_DELAY, ROUND_ATTACKS, SPAWN_EDGE, SPAWN_TRIES, TARGET_LIFE, TARGET_LIFE_END, VERDICTS, createGameLogic };

package/dist/components/AnimatedBackground/module/game-renderer.js

@@ -7,13 +7,17 @@ function createGameRenderer(rc, game, host) {
     let revealedCache = [];
     function drawGameDots(t) {
         const { ctx, dotPalette, accentPalette } = rc;
-        const { w, h, dots, opts, tanTilt } = host;
+        const { w, h, dots, opts, tanTilt, exclusionBox } = host;
         const sx = sweepX(t, w, opts.sweepPeriod);
         const intensity = opts.intensity;
         const halfCap = opts.maxDotSize / 2;
         const liveAnomalies = game.anomalies;
         const aLen = liveAnomalies.length;
         const isIdle = 'idle' === game.gameMode;
+        const exL = exclusionBox ? (w - exclusionBox.width) / 2 : 0;
+        const exR = exclusionBox ? (w + exclusionBox.width) / 2 : 0;
+        const exT = exclusionBox ? (h - exclusionBox.height) / 2 : 0;
+        const exB = exclusionBox ? (h + exclusionBox.height) / 2 : 0;
         if (envCache.length < aLen) {
             envCache = new Array(aLen);
             revealedCache = new Array(aLen);
@@ -29,6 +33,7 @@ function createGameRenderer(rc, game, host) {
             }
         }
         for (const dot of dots){
+            if (exclusionBox && dot.x >= exL && dot.x <= exR && dot.y >= exT && dot.y <= exB) continue;
             const sxAt = sx + (h / 2 - dot.y) * tanTilt;
             const amb = AMB_SCALE * (0.5 + 0.5 * Math.sin(dot.x * NOISE_FREQ_X + dot.y * NOISE_FREQ_Y + t * NOISE_FREQ_T));
             const distToSweep = Math.abs(dot.x - sxAt);

package/dist/components/Flex/Flex.d.ts

@@ -7,7 +7,7 @@ declare const flexVariants: (props?: ({
     align?: "center" | "end" | "baseline" | "start" | "stretch" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "reverse" | "nowrap" | "wrap" | null | undefined;
-    gap?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
     grow?: boolean | null | undefined;
     shrink?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/components/InputOTP/OTPInput.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactNode, Ref } from 'react';
+import { PinInput as ArkPinInput } from '@ark-ui/react/pin-input';
+import type { TestableProps } from '../../utils/testId';
+type OTPInputRootProps = Omit<ArkPinInput.RootProps, 'invalid'>;
+export interface OTPInputProps extends OTPInputRootProps, TestableProps {
+    /** Number of inputs per group (separator shown between groups). Set to 0 to disable grouping. */
+    groupSize?: number;
+    /** Separator element rendered between groups */
+    separator?: ReactNode;
+    /** Error state (maps to Ark UI `invalid`) */
+    error?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const OTPInput: FC<OTPInputProps>;
+export {};

package/dist/components/InputOTP/OTPInput.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { PinInput } from "@ark-ui/react/pin-input";
+import { cn } from "../../utils/cn.js";
+import { otpInputCellClassName, otpInputGroupClassName, otpInputSeparatorClassName } from "./classes.js";
+const OTPInput = ({ count = 6, groupSize = 2, separator = '\u2014', error = false, placeholder = '', className, 'data-testid': testId, ref, ...props })=>{
+    const groups = useMemo(()=>{
+        const result = [];
+        const effectiveGroupSize = groupSize > 0 ? groupSize : count;
+        for(let groupStart = 0; groupStart < count; groupStart += effectiveGroupSize){
+            if (groupStart > 0 && groupSize > 0) result.push(/*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: otpInputSeparatorClassName,
+                children: separator
+            }, `sep-${groupStart}`));
+            const groupEnd = Math.min(groupStart + effectiveGroupSize, count);
+            result.push(/*#__PURE__*/ jsx("div", {
+                className: otpInputGroupClassName,
+                children: Array.from({
+                    length: groupEnd - groupStart
+                }, (_, i)=>/*#__PURE__*/ jsx(PinInput.Input, {
+                        index: groupStart + i,
+                        className: otpInputCellClassName
+                    }, groupStart + i))
+            }, `group-${groupStart}`));
+        }
+        return result;
+    }, [
+        count,
+        groupSize,
+        separator
+    ]);
+    return /*#__PURE__*/ jsxs(PinInput.Root, {
+        ...props,
+        count: count,
+        invalid: error,
+        placeholder: placeholder,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "pin-input",
+        className: cn('flex flex-col gap-4', className),
+        children: [
+            /*#__PURE__*/ jsx(PinInput.Control, {
+                className: "flex items-center gap-8",
+                children: groups
+            }),
+            /*#__PURE__*/ jsx(PinInput.HiddenInput, {})
+        ]
+    });
+};
+OTPInput.displayName = 'OTPInput';
+export { OTPInput };

package/dist/components/InputOTP/classes.d.ts

@@ -0,0 +1,3 @@
+export declare const otpInputGroupClassName: string;
+export declare const otpInputCellClassName: string;
+export declare const otpInputSeparatorClassName: string;

package/dist/components/InputOTP/classes.js

@@ -0,0 +1,5 @@
+import { cn } from "../../utils/cn.js";
+const otpInputGroupClassName = cn('flex items-center rounded-12 shadow-xs');
+const otpInputCellClassName = cn('h-36 w-32 bg-component-input-bg', 'font-mono text-sm text-text-primary text-center uppercase', 'border border-border-primary outline-none', '[&:not(:first-child)]:-ml-px', 'first:rounded-l-12 last:rounded-r-12', 'transition-[color,border,box-shadow]', '[&:not([data-disabled]):not(:focus):not([data-invalid])]:hover:relative', '[&:not([data-disabled]):not(:focus):not([data-invalid])]:hover:z-10', '[&:not([data-disabled]):not(:focus):not([data-invalid])]:hover:border-component-border-input-hover', '[&:not([data-disabled]):not([data-invalid])]:focus:relative', '[&:not([data-disabled]):not([data-invalid])]:focus:z-10', '[&:not([data-disabled]):not([data-invalid])]:focus:border-border-strong-primary', 'data-invalid:border-border-strong-danger', '[&[data-invalid]:not([data-disabled])]:focus:relative', '[&[data-invalid]:not([data-disabled])]:focus:z-10', 'data-disabled:cursor-not-allowed data-disabled:opacity-50');
+const otpInputSeparatorClassName = cn('text-text-secondary text-sm select-none shrink-0');
+export { otpInputCellClassName, otpInputGroupClassName, otpInputSeparatorClassName };

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

@@ -0,0 +1 @@
+export { OTPInput, type OTPInputProps } from './OTPInput';

package/dist/components/InputOTP/index.js

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

package/dist/components/SegmentedControl/SegmentedControlSeparator.d.ts

@@ -2,7 +2,7 @@ import type { ComponentRef, FC, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { Separator, type SeparatorProps } from '../Separator';
 declare const segmentedControlSeparatorVariants: (props?: ({
-    mx?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    mx?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SegmentedControlSeparatorVariants = VariantProps<typeof segmentedControlSeparatorVariants>;
 /**

package/dist/components/Separator/Separator.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
-    spacing?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    spacing?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SeparatorProps = ComponentPropsWithoutRef<'div'> & VariantProps<typeof separatorVariants> & TestableProps & {
     ref?: Ref<HTMLDivElement>;

package/dist/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ declare const stackVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
     flexGrow?: boolean | null | undefined;
     flexShrink?: boolean | null | undefined;
-    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StackNativeProps = HTMLAttributes<HTMLDivElement>;
 type StackVariantProps = VariantProps<typeof stackVariants>;

package/dist/index.d.ts

@@ -36,6 +36,7 @@ export { Heading, type HeadingProps } from './components/Heading';
 export { HTTP_METHOD_COLOR, HTTP_METHODS, HttpMethod, type HttpMethodName, type HttpMethodProps, } from './components/HttpMethod';
 export { Input, type InputProps } from './components/Input';
 export { InputGroup, InputGroupAddon, InputGroupText, } from './components/InputGroup';
+export { OTPInput, type OTPInputProps } from './components/InputOTP';
 export { type DatacenterKey, datacenters, Ip, IpAddress, type IpAddressProps, IpCountry, type IpCountryProps, IpList, type IpListProps, IpPort, type IpPortProps, type IpProps, IpProvider, type IpProviderProps, type ProxyTypeKey, proxyTypes, type SourceKey, sourceLabels, } from './components/Ip';
 export { Kbd, KbdGroup } from './components/Kbd';
 export { Link, type LinkProps } from './components/Link';

package/dist/index.js

@@ -25,6 +25,7 @@ import { Heading } from "./components/Heading/index.js";
 import { HTTP_METHODS, HTTP_METHOD_COLOR, HttpMethod } from "./components/HttpMethod/index.js";
 import { Input } from "./components/Input/index.js";
 import { InputGroup, InputGroupAddon, InputGroupText } from "./components/InputGroup/index.js";
+import { OTPInput } from "./components/InputOTP/index.js";
 import { Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, datacenters, proxyTypes, sourceLabels } from "./components/Ip/index.js";
 import { Kbd, KbdGroup } from "./components/Kbd/index.js";
 import { Link } from "./components/Link/index.js";
@@ -65,4 +66,4 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/in
 import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHeader/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/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, 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, 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, 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 };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.55.0",
-  "generatedAt": "2026-06-08T15:41:56.689Z",
+  "version": "0.55.1",
+  "generatedAt": "2026-06-08T21:10:50.034Z",
   "components": [
     {
       "name": "Accordion",
@@ -3721,7 +3721,7 @@
         },
         {
           "name": "WithCard",
-          "code": "() => (\n  <div className='relative h-screen w-screen'>\n    <AnimatedBackground game />\n\n    <Card className='absolute top-1/2 left-1/2 -translate-1/2 w-[300px] h-max'>\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  <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)"
         }
       ]
     },
@@ -22197,6 +22197,418 @@
         }
       ]
     },
+    {
+      "name": "InputOTP",
+      "importPath": "@wallarm-org/design-system/InputOTP",
+      "props": [],
+      "variants": [],
+      "subComponents": [
+        {
+          "name": "OTPInput",
+          "props": [
+            {
+              "name": "groupSize",
+              "type": "number | undefined",
+              "required": false,
+              "description": "Number of inputs per group (separator shown between groups). Set to 0 to disable grouping.",
+              "defaultValue": "2"
+            },
+            {
+              "name": "separator",
+              "type": "ReactNode",
+              "required": false,
+              "description": "Separator element rendered between groups",
+              "defaultValue": "\\u2014"
+            },
+            {
+              "name": "error",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Error state (maps to Ark UI `invalid`)",
+              "defaultValue": "false"
+            },
+            {
+              "name": "form",
+              "type": "string | undefined",
+              "required": false,
+              "description": "The associate form of the underlying input element."
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "mask",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "If `true`, the input's value will be masked just like `type=password`"
+            },
+            {
+              "name": "pattern",
+              "type": "string | undefined",
+              "required": false,
+              "description": "The regular expression that the user-entered input value is checked against."
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string[] | undefined",
+              "required": false,
+              "description": "The initial value of the the pin input when rendered.\nUse when you don't need to control the value of the pin input."
+            },
+            {
+              "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,
+              "description": "Whether to auto-focus the first input."
+            },
+            {
+              "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": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string",
+              "required": false,
+              "description": "The unique identifier of the machine."
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "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": "\"search\" | \"text\" | \"none\" | \"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}"
+            },
+            {
+              "name": "name",
+              "type": "string | undefined",
+              "required": false,
+              "description": "The name of the input element. Useful for form submission."
+            },
+            {
+              "name": "ids",
+              "type": "Partial<{ root: string; hiddenInput: string; label: string; control: string; input: (id: string) => string; }> | undefined",
+              "required": false,
+              "description": "The ids of the elements in the pin input. Useful for composition."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Whether the inputs are disabled"
+            },
+            {
+              "name": "placeholder",
+              "type": "string | undefined",
+              "required": false,
+              "description": "The placeholder text for the input",
+              "defaultValue": ""
+            },
+            {
+              "name": "required",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Whether the pin input is required"
+            },
+            {
+              "name": "readOnly",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Whether the pin input is in the valid state"
+            },
+            {
+              "name": "otp",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "If `true`, the pin input component signals to its fields that they should\nuse `autocomplete=\"one-time-code\"`."
+            },
+            {
+              "name": "value",
+              "type": "string[] | undefined",
+              "required": false,
+              "description": "The controlled value of the the pin input."
+            },
+            {
+              "name": "type",
+              "type": "\"numeric\" | \"alphanumeric\" | \"alphabetic\" | undefined",
+              "required": false,
+              "description": "The type of value the pin-input should allow"
+            },
+            {
+              "name": "blurOnComplete",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Whether to blur the input when the value is complete"
+            },
+            {
+              "name": "selectOnFocus",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Whether to select input value when input is focused"
+            },
+            {
+              "name": "translations",
+              "type": "IntlTranslations | undefined",
+              "required": false,
+              "description": "Specifies the localized strings that identifies the accessibility elements and their states"
+            },
+            {
+              "name": "count",
+              "type": "number | undefined",
+              "required": false,
+              "description": "The number of inputs to render to improve SSR aria attributes.\nThis will be required in next major version.",
+              "defaultValue": "6"
+            },
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+            }
+          ]
+        }
+      ],
+      "examples": []
+    },
     {
       "name": "Ip",
       "importPath": "@wallarm-org/design-system/Ip",
@@ -22796,26 +23208,6 @@
               "type": "string | undefined",
               "required": false
             },
-            {
-              "name": "variant",
-              "type": "{ default: string; dotted: string; }",
-              "required": false
-            },
-            {
-              "name": "isIconOnly",
-              "type": "{ true: string; }",
-              "required": false
-            },
-            {
-              "name": "muted",
-              "type": "{ true: string; false: string; }",
-              "required": false
-            },
-            {
-              "name": "textVariant",
-              "type": "{ default: string; code: string; }",
-              "required": false
-            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",
@@ -23075,6 +23467,26 @@
               "name": "asChild",
               "type": "boolean | undefined",
               "required": false
+            },
+            {
+              "name": "variant",
+              "type": "{ default: string; dotted: string; }",
+              "required": false
+            },
+            {
+              "name": "isIconOnly",
+              "type": "{ true: string; }",
+              "required": false
+            },
+            {
+              "name": "muted",
+              "type": "{ true: string; false: string; }",
+              "required": false
+            },
+            {
+              "name": "textVariant",
+              "type": "{ default: string; code: string; }",
+              "required": false
             }
           ]
         }

package/package.json

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