@wallarm-org/design-system 0.3.1 → 0.4.0

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.3.0",
-  "generatedAt": "2026-02-24T11:16:35.052Z",
+  "version": "0.3.1",
+  "generatedAt": "2026-02-24T11:55:50.290Z",
   "components": [
     {
       "name": "Alert",
@@ -3398,7 +3398,7 @@
         },
         {
           "name": "WithTruncation",
-          "code": "args => {\n  const [showAll, setShowAll] = useState(false);\n\n  return (\n    <div className='flex items-center justify-center w-full p-8 min-h-[400px]'>\n      <TooltipProvider>\n        <Breadcrumbs {...args}>\n          <BreadcrumbsItem href='#home'>Home</BreadcrumbsItem>\n          <BreadcrumbsItem href='#level1'>Level 1</BreadcrumbsItem>\n          {!showAll ? (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <BreadcrumbsEllipsis onClick={() => setShowAll(true)} />\n              </TooltipTrigger>\n              <TooltipContent>WIP</TooltipContent>\n            </Tooltip>\n          ) : (\n            [\n              <BreadcrumbsItem key='level2' href='#level2'>\n                Level 2\n              </BreadcrumbsItem>,\n              <BreadcrumbsItem key='level3' href='#level3'>\n                Level 3\n              </BreadcrumbsItem>,\n            ]\n          )}\n          <BreadcrumbsItem href='#penultimate'>Penultimate</BreadcrumbsItem>\n          <BreadcrumbsItem href='#current'>Current Page</BreadcrumbsItem>\n        </Breadcrumbs>\n      </TooltipProvider>\n    </div>\n  );\n}"
+          "code": "args => {\n  const [showAll, setShowAll] = useState(false);\n\n  return (\n    <div className='flex items-center justify-center w-full p-8 min-h-[400px]'>\n      <Breadcrumbs {...args}>\n        <BreadcrumbsItem href='#home'>Home</BreadcrumbsItem>\n        <BreadcrumbsItem href='#level1'>Level 1</BreadcrumbsItem>\n        {!showAll ? (\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <BreadcrumbsEllipsis onClick={() => setShowAll(true)} />\n            </TooltipTrigger>\n            <TooltipContent>WIP</TooltipContent>\n          </Tooltip>\n        ) : (\n          [\n            <BreadcrumbsItem key='level2' href='#level2'>\n              Level 2\n            </BreadcrumbsItem>,\n            <BreadcrumbsItem key='level3' href='#level3'>\n              Level 3\n            </BreadcrumbsItem>,\n          ]\n        )}\n        <BreadcrumbsItem href='#penultimate'>Penultimate</BreadcrumbsItem>\n        <BreadcrumbsItem href='#current'>Current Page</BreadcrumbsItem>\n      </Breadcrumbs>\n    </div>\n  );\n}"
         },
         {
           "name": "LongBreadcrumbs",
@@ -9014,19 +9014,23 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align='start'>\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          Profile\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>P</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Billing\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>B</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Settings\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>S</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Keyboard shortcuts super\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>K</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuSeparator />\n\n      <DropdownMenuGroup>\n        <DropdownMenuItem>Team</DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>Email</DropdownMenuItem>\n              <DropdownMenuItem>Message</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>More...</DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          New Team\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>T</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem>GitHub</DropdownMenuItem>\n      <DropdownMenuItem>Support</DropdownMenuItem>\n      <DropdownMenuItem disabled>API</DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem variant='destructive'>\n        Log out\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
+          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          Profile\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>P</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Billing\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>B</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Settings\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>S</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Keyboard shortcuts super\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>K</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuSeparator />\n\n      <DropdownMenuGroup>\n        <DropdownMenuItem>Team</DropdownMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTriggerItem>Invite users</DropdownMenuTriggerItem>\n          <DropdownMenuContent>\n            <DropdownMenuItem>Email</DropdownMenuItem>\n            <DropdownMenuItem>Message</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>More...</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenuItem>\n          New Team\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>T</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem>GitHub</DropdownMenuItem>\n      <DropdownMenuItem>Support</DropdownMenuItem>\n      <DropdownMenuItem disabled>API</DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem variant='destructive'>\n        Log out\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
+        },
+        {
+          "name": "Context",
+          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuContextTrigger asChild>\n      <div className='flex items-center justify-center w-300 h-192 border border-border-primary border-dashed rounded-8'>\n        Right click here\n      </div>\n    </DropdownMenuContextTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          Profile\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>P</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Billing\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>B</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Settings\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>S</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          Keyboard shortcuts super\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>K</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuSeparator />\n\n      <DropdownMenuGroup>\n        <DropdownMenuItem>Team</DropdownMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTriggerItem>Invite users</DropdownMenuTriggerItem>\n          <DropdownMenuContent>\n            <DropdownMenuItem>Email</DropdownMenuItem>\n            <DropdownMenuItem>Message</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>More...</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenuItem>\n          New Team\n          <DropdownMenuShortcut>\n            <KbdGroup>\n              <Kbd>⌘</Kbd>\n              <Kbd>T</Kbd>\n            </KbdGroup>\n          </DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem>GitHub</DropdownMenuItem>\n      <DropdownMenuItem>Support</DropdownMenuItem>\n      <DropdownMenuItem disabled>API</DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem variant='destructive'>\n        Log out\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
         },
         {
           "name": "WithDescriptions",
-          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        <Plus />\n        Add Widget\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align='start'>\n      <DropdownMenuItem>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Canvas</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem variant='brand'>\n        <CirclePlus />\n        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
+          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        <Plus />\n        Add Widget\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuItem>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Canvas</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem variant='brand'>\n        <CirclePlus />\n        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
         },
         {
           "name": "WithIcons",
-          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        <Plus />\n        Add Widget\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align='start'>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <LayoutTemplate />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Maximize />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Canvas</DropdownMenuItemText>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Earth />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem variant='brand'>\n        <CirclePlus />\n        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
+          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        <Plus />\n        Add Widget\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <LayoutTemplate />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Maximize />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Canvas</DropdownMenuItemText>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Earth />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem variant='brand'>\n        <CirclePlus />\n        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
         },
         {
           "name": "WithDescriptionAndIcons",
-          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        <Plus />\n        Add Widget\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align='start'>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <LayoutTemplate />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Maximize />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Canvas</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Earth />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem variant='brand'>\n        <CirclePlus />\n        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
+          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        <Plus />\n        Add Widget\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <LayoutTemplate />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Maximize />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Canvas</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <DropdownMenuItemIcon>\n          <Earth />\n        </DropdownMenuItemIcon>\n        <DropdownMenuItemContent>\n          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>\n          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>\n        </DropdownMenuItemContent>\n        <DropdownMenuShortcut>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Q</Kbd>\n          </KbdGroup>\n        </DropdownMenuShortcut>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n\n      <DropdownMenuItem variant='brand'>\n        <CirclePlus />\n        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
         }
       ]
     },
@@ -10240,14 +10244,6 @@
         }
       ]
     },
-    {
-      "name": "Label",
-      "importPath": "@wallarm-org/design-system/Label",
-      "props": [],
-      "variants": [],
-      "subComponents": [],
-      "examples": []
-    },
     {
       "name": "Link",
       "importPath": "@wallarm-org/design-system/Link",
@@ -11758,6 +11754,11 @@
           "type": "boolean | undefined",
           "required": false,
           "defaultValue": "false"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions | undefined",
+          "required": false
         }
       ],
       "variants": [],
@@ -11765,11 +11766,6 @@
         {
           "name": "OverflowTooltipContent",
           "props": [
-            {
-              "name": "side",
-              "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | undefined",
-              "required": false
-            },
             {
               "name": "maxWidth",
               "type": "number | undefined",
@@ -11813,7 +11809,7 @@
         },
         {
           "name": "DifferentSides",
-          "code": "() => {\n  const text = 'This is a text that will be truncated and show tooltips on different sides';\n\n  return (\n    <div className='font-sans flex flex-col gap-32 w-300 py-32'>\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on top (default)</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent side='top'>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on bottom</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent side='bottom'>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on left</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent side='left'>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on right</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent side='right'>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}"
+          "code": "() => {\n  const text = 'This is a text that will be truncated and show tooltips on different sides';\n\n  return (\n    <div className='font-sans flex flex-col gap-32 w-300 py-32'>\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on top (default)</p>\n        <OverflowTooltip positioning={{ placement: 'top' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on bottom</p>\n        <OverflowTooltip positioning={{ placement: 'bottom' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on left</p>\n        <OverflowTooltip positioning={{ placement: 'left' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='text-sm text-text-secondary mb-8'>Tooltip on right</p>\n        <OverflowTooltip positioning={{ placement: 'right' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}"
         },
         {
           "name": "DynamicContent",
@@ -15189,25 +15185,18 @@
               "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
             },
             {
-              "name": "asChild",
-              "type": "boolean | undefined",
+              "name": "orientation",
+              "type": "{ horizontal: string; vertical: string; }",
               "required": false
             },
             {
-              "name": "orientation",
-              "type": "\"horizontal\" | \"vertical\" | undefined",
-              "required": false,
-              "description": "Either `vertical` or `horizontal`. Defaults to `horizontal`."
+              "name": "spacing",
+              "type": "complex",
+              "required": false
             },
             {
               "name": "decorative",
               "type": "boolean | undefined",
-              "required": false,
-              "description": "Whether or not the component is purely decorative. When true, accessibility-related attributes\nare updated so that that the rendered element is removed from the accessibility tree."
-            },
-            {
-              "name": "spacing",
-              "type": "complex",
               "required": false
             },
             {
@@ -15651,29 +15640,22 @@
           "required": false,
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         },
-        {
-          "name": "asChild",
-          "type": "boolean | undefined",
-          "required": false
-        },
         {
           "name": "orientation",
-          "type": "\"horizontal\" | \"vertical\" | undefined",
+          "type": "{ horizontal: string; vertical: string; }",
           "required": false,
-          "description": "Either `vertical` or `horizontal`. Defaults to `horizontal`.",
           "defaultValue": "horizontal"
         },
+        {
+          "name": "spacing",
+          "type": "complex",
+          "required": false
+        },
         {
           "name": "decorative",
           "type": "boolean | undefined",
           "required": false,
-          "description": "Whether or not the component is purely decorative. When true, accessibility-related attributes\nare updated so that that the rendered element is removed from the accessibility tree.",
           "defaultValue": "true"
-        },
-        {
-          "name": "spacing",
-          "type": "complex",
-          "required": false
         }
       ],
       "variants": [
@@ -15721,8 +15703,8 @@
       ]
     },
     {
-      "name": "Stack",
-      "importPath": "@wallarm-org/design-system/Stack",
+      "name": "Skeleton",
+      "importPath": "@wallarm-org/design-system/Skeleton",
       "props": [
         {
           "name": "defaultChecked",
@@ -15781,7 +15763,7 @@
         },
         {
           "name": "enterKeyHint",
-          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
           "required": false
         },
         {
@@ -15972,7 +15954,7 @@
         },
         {
           "name": "inputMode",
-          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "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"
         },
@@ -15995,208 +15977,549 @@
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         },
         {
-          "name": "direction",
-          "type": "{ row: string; column: string; 'row-reverse': string; 'column-reverse': string; }",
-          "required": false,
-          "defaultValue": "column"
-        },
-        {
-          "name": "align",
-          "type": "{ start: string; center: string; end: string; stretch: string; baseline: string; }",
+          "name": "variant",
+          "type": "{ text: string; circular: string; rect: string; rounded: string; }",
           "required": false,
-          "defaultValue": "stretch"
+          "defaultValue": "rect"
         },
         {
-          "name": "justify",
-          "type": "{ start: string; center: string; end: string; between: string; around: string; evenly: string; }",
+          "name": "asChild",
+          "type": "{ true: string; false: string; }",
           "required": false,
-          "defaultValue": "start"
+          "defaultValue": "false"
         },
         {
-          "name": "wrap",
-          "type": "{ wrap: string; nowrap: string; reverse: string; }",
+          "name": "loading",
+          "type": "boolean | undefined",
           "required": false,
-          "defaultValue": "nowrap"
-        },
+          "defaultValue": "true"
+        }
+      ],
+      "variants": [
         {
-          "name": "spacing",
-          "type": "complex",
-          "required": false,
-          "defaultValue": "4"
+          "name": "variant",
+          "options": [
+            "text",
+            "circular",
+            "rect",
+            "rounded"
+          ],
+          "defaultValue": "rect"
         },
         {
           "name": "asChild",
-          "type": "boolean | undefined",
-          "required": false,
+          "options": [
+            "true",
+            "false"
+          ],
           "defaultValue": "false"
         }
       ],
-      "variants": [
+      "subComponents": [],
+      "examples": [
         {
-          "name": "direction",
-          "options": [
-            "row",
-            "column",
-            "row-reverse",
-            "column-reverse"
-          ]
+          "name": "Basic",
+          "code": "args => <Skeleton {...args} className='h-40 w-256' />"
         },
         {
-          "name": "align",
-          "options": [
-            "start",
-            "center",
-            "end",
-            "stretch",
-            "baseline"
-          ]
+          "name": "Variants",
+          "code": "() => (\n  <VStack className='gap-16 w-320'>\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>text</span>\n      <Skeleton variant='text' />\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>rect (default)</span>\n      <Skeleton variant='rect' className='h-40 w-256' />\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>rounded</span>\n      <Skeleton variant='rounded' className='h-40 w-256' />\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>circular</span>\n      <Skeleton variant='circular' className='h-48 w-48' />\n    </VStack>\n  </VStack>\n)"
         },
         {
-          "name": "justify",
-          "options": [
-            "start",
-            "center",
-            "end",
-            "between",
-            "around",
-            "evenly"
-          ]
+          "name": "WithAsChild",
+          "code": "() => (\n  <VStack className='gap-16'>\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>loading=true, asChild</span>\n      <HStack className='gap-8'>\n        <Skeleton asChild loading>\n          <Badge>Select</Badge>\n        </Skeleton>\n        <Skeleton asChild loading>\n          <Button>Submit</Button>\n        </Skeleton>\n      </HStack>\n    </VStack>\n\n    <VStack className='gap-4'>\n      <span className='text-sm text-text-secondary'>loading=false (children rendered)</span>\n      <HStack className='gap-8'>\n        <Skeleton asChild loading={false}>\n          <Badge>Select</Badge>\n        </Skeleton>\n        <Skeleton asChild loading={false}>\n          <Button>Submit</Button>\n        </Skeleton>\n      </HStack>\n    </VStack>\n  </VStack>\n)"
         },
         {
-          "name": "wrap",
-          "options": [
-            "wrap",
-            "nowrap",
-            "reverse"
-          ]
+          "name": "LoadingToggle",
+          "code": "({ loading = true }) => (\n  <HStack className='gap-16'>\n    <Skeleton loading={loading} className='h-48 w-48' variant='circular' />\n    <VStack className='gap-8'>\n      <Skeleton loading={loading} variant='text' className='w-200' />\n      <Skeleton loading={loading} variant='text' className='w-128' />\n    </VStack>\n  </HStack>\n)"
         },
         {
-          "name": "spacing",
-          "options": [
-            "0",
-            "1",
-            "2",
-            "4",
-            "6",
-            "8",
-            "12",
-            "16",
-            "20",
-            "24",
-            "28",
-            "32",
-            "36",
-            "40",
-            "44",
-            "48",
-            "56",
-            "64",
-            "80",
-            "96",
-            "112",
-            "128",
-            "144"
-          ]
+          "name": "ShapeVariety",
+          "code": "() => (\n  <VStack className='gap-16'>\n    <HStack className='gap-16 items-center'>\n      <Skeleton variant='circular' className='h-48 w-48' />\n      <VStack className='gap-8 flex-1'>\n        <Skeleton variant='text' className='w-200' />\n        <Skeleton variant='text' className='w-128' />\n      </VStack>\n    </HStack>\n\n    <HStack className='gap-16 items-center'>\n      <Skeleton variant='circular' className='h-36 w-36' />\n      <VStack className='gap-8 flex-1'>\n        <Skeleton variant='text' className='w-160' />\n        <Skeleton variant='text' className='w-96' />\n      </VStack>\n    </HStack>\n  </VStack>\n)"
+        },
+        {
+          "name": "CardExample",
+          "code": "() => (\n  <VStack className='gap-12 w-320'>\n    <Skeleton variant='rounded' className='h-160 w-full' />\n    <Skeleton variant='text' className='w-200' />\n    <Skeleton variant='text' />\n    <Skeleton variant='text' className='w-240' />\n    <HStack className='gap-8'>\n      <Skeleton variant='rounded' className='h-36 w-100' />\n      <Skeleton variant='circular' className='h-36 w-36' />\n    </HStack>\n  </VStack>\n)"
         }
-      ],
-      "subComponents": [
+      ]
+    },
+    {
+      "name": "Stack",
+      "importPath": "@wallarm-org/design-system/Stack",
+      "props": [
         {
-          "name": "HStack",
-          "props": [
-            {
-              "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": "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": "title",
+          "type": "string | 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}"
+        },
+        {
+          "name": "direction",
+          "type": "{ row: string; column: string; 'row-reverse': string; 'column-reverse': string; }",
+          "required": false,
+          "defaultValue": "column"
+        },
+        {
+          "name": "align",
+          "type": "{ start: string; center: string; end: string; stretch: string; baseline: string; }",
+          "required": false,
+          "defaultValue": "stretch"
+        },
+        {
+          "name": "justify",
+          "type": "{ start: string; center: string; end: string; between: string; around: string; evenly: string; }",
+          "required": false,
+          "defaultValue": "start"
+        },
+        {
+          "name": "wrap",
+          "type": "{ wrap: string; nowrap: string; reverse: string; }",
+          "required": false,
+          "defaultValue": "nowrap"
+        },
+        {
+          "name": "spacing",
+          "type": "complex",
+          "required": false,
+          "defaultValue": "4"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        }
+      ],
+      "variants": [
+        {
+          "name": "direction",
+          "options": [
+            "row",
+            "column",
+            "row-reverse",
+            "column-reverse"
+          ]
+        },
+        {
+          "name": "align",
+          "options": [
+            "start",
+            "center",
+            "end",
+            "stretch",
+            "baseline"
+          ]
+        },
+        {
+          "name": "justify",
+          "options": [
+            "start",
+            "center",
+            "end",
+            "between",
+            "around",
+            "evenly"
+          ]
+        },
+        {
+          "name": "wrap",
+          "options": [
+            "wrap",
+            "nowrap",
+            "reverse"
+          ]
+        },
+        {
+          "name": "spacing",
+          "options": [
+            "0",
+            "1",
+            "2",
+            "4",
+            "6",
+            "8",
+            "12",
+            "16",
+            "20",
+            "24",
+            "28",
+            "32",
+            "36",
+            "40",
+            "44",
+            "48",
+            "56",
+            "64",
+            "80",
+            "96",
+            "112",
+            "128",
+            "144"
+          ]
+        }
+      ],
+      "subComponents": [
+        {
+          "name": "HStack",
+          "props": [
+            {
+              "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": "title",
@@ -16737,12 +17060,6 @@
           "required": false,
           "defaultValue": "false"
         },
-        {
-          "name": "label",
-          "type": "string | undefined",
-          "required": false,
-          "description": "Specifies the localized strings that identifies the accessibility elements and their states"
-        },
         {
           "name": "form",
           "type": "string | undefined",
@@ -17023,6 +17340,12 @@
           "required": false,
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         },
+        {
+          "name": "label",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states"
+        },
         {
           "name": "ids",
           "type": "Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> | undefined",
@@ -17664,6 +17987,239 @@
         }
       ]
     },
+    {
+      "name": "Table",
+      "importPath": "@wallarm-org/design-system/Table",
+      "props": [
+        {
+          "name": "data",
+          "type": "T[]",
+          "required": true,
+          "description": "Data array for rows"
+        },
+        {
+          "name": "columns",
+          "type": "TableColumnDef<T>[]",
+          "required": true,
+          "description": "Column definitions"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Show skeleton rows",
+          "defaultValue": "false"
+        },
+        {
+          "name": "getRowId",
+          "type": "((row: T, index: number) => string) | undefined",
+          "required": false,
+          "description": "Row id accessor for stable row identity"
+        },
+        {
+          "name": "sorting",
+          "type": "TableSortingState | undefined",
+          "required": false
+        },
+        {
+          "name": "rowSelection",
+          "type": "TableRowSelectionState | undefined",
+          "required": false
+        },
+        {
+          "name": "columnSizing",
+          "type": "TableColumnSizingState | undefined",
+          "required": false
+        },
+        {
+          "name": "columnPinning",
+          "type": "TableColumnPinningState | undefined",
+          "required": false
+        },
+        {
+          "name": "columnOrder",
+          "type": "string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "grouping",
+          "type": "TableGroupingState | undefined",
+          "required": false
+        },
+        {
+          "name": "renderGroupRow",
+          "type": "((row: TableRow<T>) => ReactNode) | undefined",
+          "required": false
+        },
+        {
+          "name": "getSubRows",
+          "type": "((row: T) => T[] | undefined) | undefined",
+          "required": false,
+          "description": "Sub-row accessor for hierarchical/tree data (used with renderGroupRow)"
+        },
+        {
+          "name": "expanded",
+          "type": "TableExpandedState | undefined",
+          "required": false
+        },
+        {
+          "name": "renderExpandedRow",
+          "type": "((row: TableRow<T>) => ReactNode) | undefined",
+          "required": false
+        },
+        {
+          "name": "columnVisibility",
+          "type": "TableVisibilityState | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultColumnVisibility",
+          "type": "TableVisibilityState | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultColumnOrder",
+          "type": "string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "virtualized",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "estimateRowHeight",
+          "type": "((index: number) => number) | undefined",
+          "required": false
+        },
+        {
+          "name": "overscan",
+          "type": "number | undefined",
+          "required": false
+        }
+      ],
+      "variants": [
+        {
+          "name": "interactive",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
+        {
+          "name": "sorted",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
+        {
+          "name": "pinned",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
+        {
+          "name": "lastPinnedLeft",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
+        {
+          "name": "draggable",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
+        {
+          "name": "expanded",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
+        {
+          "name": "virtualized",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'firstDetected', desc: true }]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}"
+        },
+        {
+          "name": "Sorting",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}"
+        },
+        {
+          "name": "LoadingState",
+          "code": "() => (\n  <Table data={[]} columns={securityColumns} isLoading />\n)"
+        },
+        {
+          "name": "EmptyState",
+          "code": "() => (\n  <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n    <TableEmptyState>\n      <VStack align='center' justify='center' spacing={8}>\n        <Text size='sm' weight='medium' color='primary'>\n          No results found\n        </Text>\n        <Text size='sm' color='secondary'>\n          Try to apply different filter or reset it.\n        </Text>\n      </VStack>\n    </TableEmptyState>\n  </Table>\n)"
+        },
+        {
+          "name": "ColumnResizing",
+          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}"
+        },
+        {
+          "name": "ColumnPinning",
+          "code": "() => {\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <div className='max-w-800'>\n      <Table\n        data={securityEvents}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        columnPinning={columnPinning}\n        onColumnPinningChange={setColumnPinning}\n      />\n    </div>\n  );\n}"
+        },
+        {
+          "name": "ColumnDragAndDrop",
+          "code": "() => {\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    />\n  );\n}"
+        },
+        {
+          "name": "ColumnHeaderMenu",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({});\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      columnVisibility={columnVisibility}\n      onColumnVisibilityChange={setColumnVisibility}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n    />\n  );\n}"
+        },
+        {
+          "name": "RowSelection",
+          "code": "() => {\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    >\n      <TableActionBar>\n        <Button variant='ghost' color='neutral-alt' onClick={() => alert('Copy clicked')}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => alert('Delete clicked')}>\n          <Trash2 /> Delete\n        </Button>\n      </TableActionBar>\n    </Table>\n  );\n}"
+        },
+        {
+          "name": "RowGrouping",
+          "code": "() => {\n  const [expanded, setExpanded] = useState<TableExpandedState>({ 'group-cto': true });\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={groupedHeaderData}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    />\n  );\n}"
+        },
+        {
+          "name": "RowExpanding",
+          "code": "() => {\n  const [expanded, setExpanded] = useState<TableExpandedState>({});\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      renderExpandedRow={row => (\n        <div className='p-16 bg-states-primary-default-alt rounded-8'>\n          <Text size='sm' weight='medium'>\n            Event Details\n          </Text>\n          <div className='grid grid-cols-3 gap-8 mt-8'>\n            <VStack spacing={2}>\n              <Text size='xs' color='secondary'>\n                Source IP\n              </Text>\n              <Text size='sm'>{row.original.sourceIp}</Text>\n            </VStack>\n            <VStack spacing={2}>\n              <Text size='xs' color='secondary'>\n                Provider\n              </Text>\n              <Text size='sm'>{row.original.sourceProvider}</Text>\n            </VStack>\n            <VStack spacing={2}>\n              <Text size='xs' color='secondary'>\n                Endpoint\n              </Text>\n              <HStack spacing={4}>\n                <Badge\n                  color={METHOD_COLORS[row.original.endpointMethod] ?? 'slate'}\n                  type='secondary'\n                  size='medium'\n                  textVariant='code'\n                >\n                  {row.original.endpointMethod}\n                </Badge>\n                <Text size='sm'>{row.original.endpointPath}</Text>\n              </HStack>\n            </VStack>\n          </div>\n        </div>\n      )}\n    />\n  );\n}"
+        },
+        {
+          "name": "ContextMenu",
+          "code": "() => {\n  const contextMenuColumns: TableColumnDef<(typeof securityEvents)[number]>[] = [\n    securityColumnHelper.accessor('objectName', {\n      header: 'Object name',\n      cell: ({ getValue }) => (\n        <DropdownMenu>\n          <DropdownMenuContextTrigger>\n            <Text size='sm'>{getValue()}</Text>\n          </DropdownMenuContextTrigger>\n          <DropdownMenuContent>\n            <DropdownMenuItem onSelect={() => alert('Copy')}>\n              <DropdownMenuItemIcon>\n                <Copy />\n              </DropdownMenuItemIcon>\n              <DropdownMenuItemText>Copy value</DropdownMenuItemText>\n            </DropdownMenuItem>\n\n            <DropdownMenuSeparator />\n\n            <DropdownMenuItem onSelect={() => alert('Show Only')}>\n              <DropdownMenuItemIcon>\n                <Filter />\n              </DropdownMenuItemIcon>\n              <DropdownMenuItemContent>\n                <DropdownMenuItemText>Show only</DropdownMenuItemText>\n                <DropdownMenuItemDescription>Filter to matching rows</DropdownMenuItemDescription>\n              </DropdownMenuItemContent>\n            </DropdownMenuItem>\n\n            <DropdownMenuItem onSelect={() => alert('Exclude')}>\n              <DropdownMenuItemIcon>\n                <FilterX />\n              </DropdownMenuItemIcon>\n              <DropdownMenuItemContent>\n                <DropdownMenuItemText>Exclude</DropdownMenuItemText>\n                <DropdownMenuItemDescription>Filter out matching rows</DropdownMenuItemDescription>\n              </DropdownMenuItemContent>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      ),\n    }),\n    securityColumnHelper.accessor('parameter', {\n      header: 'Parameters',\n      cell: ({ getValue }) => (\n        <DropdownMenu>\n          <DropdownMenuContextTrigger>\n            <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />\n          </DropdownMenuContextTrigger>\n          <DropdownMenuContent>\n            <DropdownMenuItem onSelect={() => alert('Execute')}>\n              <DropdownMenuItemIcon>\n                <Copy />\n              </DropdownMenuItemIcon>\n              <DropdownMenuItemText>Execute</DropdownMenuItemText>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      ),\n    }),\n    securityColumnHelper.accessor('status', {\n      header: 'Status',\n      cell: ({ getValue }) => {\n        const status = getValue();\n        return (\n          <Badge\n            variant='dotted'\n            color={status === 'Blocked' ? 'red' : 'yellow'}\n            type='secondary'\n            size='medium'\n          >\n            {status}\n          </Badge>\n        );\n      },\n    }),\n    securityColumnHelper.accessor('cweId', {\n      header: 'Security info',\n      cell: ({ getValue }) => (\n        <Badge color='rose' type='secondary' size='medium' textVariant='code'>\n          {getValue()}\n        </Badge>\n      ),\n    }),\n  ];\n\n  return <Table data={securityEvents} columns={contextMenuColumns} getRowId={row => row.id} />;\n}"
+        },
+        {
+          "name": "SettingsMenu",
+          "code": "() => {\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnVisibility={columnVisibility}\n      onColumnVisibilityChange={setColumnVisibility}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n      defaultColumnVisibility={{}}\n      defaultColumnOrder={securityColumnIds}\n    />\n  );\n}"
+        },
+        {
+          "name": "Virtualization",
+          "code": "() => {\n  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n\n  return (\n    <div className='h-500'>\n      <Table data={largeData} columns={securityColumns} getRowId={row => row.id} virtualized />\n    </div>\n  );\n}"
+        },
+        {
+          "name": "FullFeatured",
+          "code": "() => {\n  const data = useMemo(() => createLargeGroupedData(12, 50), []);\n\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n  const [expanded, setExpanded] = useState<TableExpandedState>({\n    'group-0': true,\n    'group-1': true,\n  });\n\n  return (\n    <div className='h-500'>\n      <Table<SecurityHeaderEntry>\n        data={data}\n        columns={fullFeaturedColumns}\n        getRowId={row => row.id}\n        getSubRows={row => row.children}\n        // Grouping\n        expanded={expanded}\n        onExpandedChange={setExpanded}\n        // Sorting\n        sorting={sorting}\n        onSortingChange={setSorting}\n        // Row selection\n        rowSelection={rowSelection}\n        onRowSelectionChange={setRowSelection}\n        // Column resizing\n        columnSizing={columnSizing}\n        onColumnSizingChange={setColumnSizing}\n        // Column pinning\n        columnPinning={columnPinning}\n        onColumnPinningChange={setColumnPinning}\n        // Column DnD ordering\n        columnOrder={columnOrder}\n        onColumnOrderChange={setColumnOrder}\n        // Column visibility + settings\n        columnVisibility={columnVisibility}\n        onColumnVisibilityChange={setColumnVisibility}\n        defaultColumnVisibility={{}}\n        defaultColumnOrder={headerColumnIds}\n        // Virtual scrolling\n        virtualized\n      >\n        <TableActionBar>\n          <Button variant='ghost' color='neutral-alt' onClick={() => alert('Copy clicked')}>\n            <Copy /> Duplicate\n          </Button>\n          <Button color='brand' onClick={() => alert('Delete clicked')}>\n            <Trash2 /> Delete\n          </Button>\n        </TableActionBar>\n      </Table>\n    </div>\n  );\n}"
+        }
+      ]
+    },
     {
       "name": "Tabs",
       "importPath": "@wallarm-org/design-system/Tabs",
@@ -18331,7 +18887,7 @@
         },
         {
           "name": "color",
-          "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; danger: string; inherit: string; }",
+          "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; 'tertiary-alt': string; danger: string; inherit: string; }",
           "required": false,
           "defaultValue": "inherit"
         },
@@ -18403,6 +18959,7 @@
             "primary-alt",
             "secondary",
             "secondary-alt",
+            "tertiary-alt",
             "danger",
             "inherit"
           ]
@@ -18445,7 +19002,7 @@
         },
         {
           "name": "Colors",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Text {...args} color='primary'>\n      Primary color text\n    </Text>\n    <Text {...args} color='primary-alt'>\n      Primary alt color text\n    </Text>\n    <Text {...args} color='secondary'>\n      Secondary color text\n    </Text>\n    <Text {...args} color='secondary-alt'>\n      Secondary alt color text\n    </Text>\n  </VStack>\n)"
+          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Text {...args} color='primary'>\n      Primary color text\n    </Text>\n    <Text {...args} color='primary-alt'>\n      Primary alt color text\n    </Text>\n    <Text {...args} color='secondary'>\n      Secondary color text\n    </Text>\n    <Text {...args} color='secondary-alt'>\n      Secondary alt color text\n    </Text>\n    <Text {...args} color='tertiary-alt'>\n      Tertiary alt color text\n    </Text>\n  </VStack>\n)"
         },
         {
           "name": "AsChild",
@@ -19332,7 +19889,58 @@
     {
       "name": "Tooltip",
       "importPath": "@wallarm-org/design-system/Tooltip",
-      "props": [],
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "openDelay",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "closeDelay",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "closeOnPointerDown",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "closeOnScroll",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "interactive",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions | undefined",
+          "required": false
+        }
+      ],
       "variants": [],
       "subComponents": [],
       "examples": [
@@ -21442,6 +22050,10 @@
           "name": "--color-component-code-snippet-bg",
           "value": "--alpha(var(--color-slate-500) / 6%)"
         },
+        {
+          "name": "--color-component-toast-bg",
+          "value": "var(--color-slate-800)"
+        },
         {
           "name": "--color-syntax-no-syntax",
           "value": "var(--color-slate-900)"
@@ -22064,6 +22676,10 @@
           "name": "--color-component-logo-wordmark-alt",
           "value": "var(--color-black)"
         },
+        {
+          "name": "--color-component-toast-bg",
+          "value": "var(--color-slate-200)"
+        },
         {
           "name": "--color-badge-on-solid",
           "value": "--alpha(var(--color-black) / 95%)"