@wallarm-org/design-system 0.6.0 → 0.6.1

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.5.0",
-  "generatedAt": "2026-03-05T11:22:14.251Z",
+  "version": "0.6.0",
+  "generatedAt": "2026-03-06T08:25:16.550Z",
   "components": [
     {
       "name": "Alert",
@@ -8733,777 +8733,2031 @@
       ]
     },
     {
-      "name": "Dialog",
-      "importPath": "@wallarm-org/design-system/Dialog",
-      "props": [],
-      "variants": [],
-      "subComponents": [],
-      "examples": [
+      "name": "Country",
+      "importPath": "@wallarm-org/design-system/Country",
+      "props": [
         {
-          "name": "Basic",
-          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog Title</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}",
-          "description": "Basic uncontrolled dialog"
+          "name": "slot",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "WithFooter",
-          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog's title</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DialogFooterControls>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
-          "description": "Minimal example"
+          "name": "title",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "WithFooterLeftActions",
-          "code": "() => (\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button>Open with Footer Actions</Button>\n    </DialogTrigger>\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Footer with Left Actions</DialogTitle>\n      </DialogHeader>\n\n      <DialogBody>\n        <ContentPlaceholder />\n      </DialogBody>\n\n      <DialogFooter>\n        <DialogFooterControls placement='left'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Remember choice</SwitchLabel>\n          </Switch>\n        </DialogFooterControls>\n\n        <DialogClose asChild>\n          <Button variant='ghost' color='neutral' size='large'>\n            Cancel\n          </Button>\n        </DialogClose>\n        <Button variant='primary' color='brand' size='large'>\n          Apply\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n)",
-          "description": "With footer left actions"
+          "name": "defaultChecked",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "Sizes",
-          "code": "() => (\n  <HStack gap={8} justify='center'>\n    <Dialog width={DIALOG_SIZES.small}>\n      <DialogTrigger asChild>\n        <Button>Open Small ({DIALOG_SIZES.small}px)</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Small Dialog ({DIALOG_SIZES.small}px)</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n\n    <Dialog width={DIALOG_SIZES.medium}>\n      <DialogTrigger asChild>\n        <Button>Open Medium ({DIALOG_SIZES.medium}px)</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Medium Dialog ({DIALOG_SIZES.medium}px)</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n\n    <Dialog width={DIALOG_SIZES.large}>\n      <DialogTrigger asChild>\n        <Button>Open Large ({DIALOG_SIZES.large}px)</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Large Dialog ({DIALOG_SIZES.large}px)</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  </HStack>\n)",
-          "description": "Dialog with different sizes - Small"
+          "name": "defaultValue",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
         },
         {
-          "name": "CustomSizes",
-          "code": "() => {\n  return (\n    <HStack gap={8} justify='center'>\n      <Dialog width='50%'>\n        <DialogTrigger asChild>\n          <Button>50% Width</Button>\n        </DialogTrigger>\n\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>50% Width Dialog</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p>This dialog takes 50% of the viewport width.</p>\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n\n      <Dialog width={1000}>\n        <DialogTrigger asChild>\n          <Button>1000px Width</Button>\n        </DialogTrigger>\n\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>1000px Width Dialog</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p>This dialog has a fixed width of 1000px.</p>\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </HStack>\n  );\n}",
-          "description": "Custom width with percentage"
+          "name": "suppressContentEditableWarning",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "Scrollable",
-          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog with Scroll</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Scrollable Content</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <div className='flex flex-col gap-16 py-12'>\n            {Array.from({ length: 20 }).map((_, i) => (\n              <ContentPlaceholder key={i} height={100} />\n            ))}\n          </div>\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Close\n            </Button>\n          </DialogClose>\n          <Button variant='primary' color='brand' size='large'>\n            Confirm\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
-          "description": "Dialog with scrollable content"
+          "name": "suppressHydrationWarning",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "Controlled",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Controlled Dialog</Button>\n\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Controlled Dialog</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p className='mb-16'>This dialog is controlled externally.</p>\n              <ContentPlaceholder />\n            </div>\n          </DialogBody>\n\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant='ghost' color='neutral' size='large'>\n                Cancel\n              </Button>\n            </DialogClose>\n            <Button variant='primary' color='brand' size='large'>\n              Save Changes\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}",
-          "description": "Controlled dialog with external state"
+          "name": "accessKey",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "NoClosableOnEsc",
-          "code": "() => {\n  return (\n    <Dialog closeOnEscape={false}>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog Title</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}",
-          "description": "No closable on ESC"
+          "name": "autoCapitalize",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "required": false
         },
         {
-          "name": "NoOverlay",
-          "code": "() => {\n  return (\n    <VStack gap={12}>\n      <Text>\n        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n        been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n        galley of type and scrambled it to make a type specimen book. It has survived not only five\n        centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum\n        passages, and more recently with desktop publishing software like Aldus PageMaker including\n        versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will\n        be distracted by the readable content of a page when looking at its layout. The point of\n        using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed\n        to using 'Content here, content here', making it look like readable English. Many desktop\n        publishing packages and web page editors now use Lorem Ipsum as their default model text,\n        and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various\n        versions have evolved over the years, sometimes by accident, sometimes on purpose (injected\n        humour and the like).\n      </Text>\n\n      <Dialog overlay={false}>\n        <DialogTrigger asChild>\n          <Button>Open without Overlay</Button>\n        </DialogTrigger>\n\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>No Overlay</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p>This dialog has no overlay backdrop.</p>\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n\n      <Text>\n        Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text.\n        It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years\n        old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up\n        one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going\n        through the cites of the word in classical literature, discovered the undoubtable source.\n        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The\n        Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the\n        theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem\n        ipsum dolor sit amet..\", comes from a line in section 1.10.32. The standard chunk of Lorem\n        Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and\n        1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact\n        original form, accompanied by English versions from the 1914 translation by H. Rackham.\n      </Text>\n    </VStack>\n  );\n}",
-          "description": "Without overlay"
+          "name": "autoFocus",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "WithNested",
-          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>1st level dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>[Level 1] Main Dialog</DialogTitle>\n\n          {/* Level 2 dialog */}\n          <Dialog>\n            <DialogTrigger asChild>\n              <Button variant='ghost' color='neutral' size='small'>\n                <PanelRight />\n                2nd level dialog\n              </Button>\n            </DialogTrigger>\n\n            <DialogContent>\n              <DialogHeader>\n                <DialogTitle>[Level 2] Detail View</DialogTitle>\n                {/* Level 3 dialog */}\n                <Dialog>\n                  <DialogTrigger asChild>\n                    <Button variant='ghost' color='neutral' size='small'>\n                      <PanelRight />\n                      3nd level dialog\n                    </Button>\n                  </DialogTrigger>\n\n                  <DialogContent>\n                    <DialogHeader>\n                      <DialogTitle>[Level 3] Deep Nested</DialogTitle>\n                    </DialogHeader>\n\n                    <DialogBody>\n                      <VStack gap={12} align='start'>\n                        <Text>Level 3! Unlimited nesting works.</Text>\n                        <ContentPlaceholder height={150} />\n                      </VStack>\n                    </DialogBody>\n\n                    <DialogFooter>\n                      <DialogClose asChild>\n                        <Button size='large' variant='ghost' color='neutral'>\n                          Back\n                        </Button>\n                      </DialogClose>\n                    </DialogFooter>\n                  </DialogContent>\n                </Dialog>\n              </DialogHeader>\n\n              <DialogBody>\n                <VStack gap={12} align='start'>\n                  <Text>This is Level 2 dialog. Main dialog is pushed back.</Text>\n\n                  <ContentPlaceholder height={150} />\n                </VStack>\n              </DialogBody>\n\n              <DialogFooter>\n                <DialogClose asChild>\n                  <Button variant='ghost' color='neutral' size='large'>\n                    Back\n                  </Button>\n                </DialogClose>\n                <Button variant='primary' color='brand' size='large'>\n                  Apply\n                </Button>\n              </DialogFooter>\n            </DialogContent>\n          </Dialog>\n        </DialogHeader>\n\n        <DialogBody>\n          <VStack gap={12} align='start'>\n            <Text>This is Level 1 dialog. Click above to open nested dialogs:</Text>\n\n            <ContentPlaceholder height={150} />\n          </VStack>\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Cancel\n            </Button>\n          </DialogClose>\n          <Button variant='primary' color='brand' size='large'>\n            Save\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
-          "description": "Nested dialogs with push-back effect"
+          "name": "contentEditable",
+          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "required": false
         },
         {
-          "name": "WithTabs",
-          "code": "() => {\n  const [activeTab, setActiveTab] = useState('tab1');\n\n  return (\n    <Dialog width={960}>\n      <DialogTrigger asChild>\n        <Button>Open Dialog with Tabs</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <Tabs value={activeTab} onChange={setActiveTab} asChild>\n          <DialogHeader>\n            <DialogTitle>Tabbed Content</DialogTitle>\n          </DialogHeader>\n\n          <TabsList>\n            <TabsTrigger value='tab1'>General</TabsTrigger>\n            <TabsTrigger value='tab2'>Settings</TabsTrigger>\n            <TabsTrigger value='tab3'>Advanced</TabsTrigger>\n          </TabsList>\n\n          <DialogBody>\n            <div className='pt-12'>\n              <TabsContent value='tab1'>\n                <h3 className='text-lg font-medium mb-8'>General Settings</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab2'>\n                <h3 className='text-lg font-medium mb-8'>Configuration</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab3'>\n                <h3 className='text-lg font-medium mb-8'>Advanced Options</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n            </div>\n          </DialogBody>\n        </Tabs>\n\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Cancel\n            </Button>\n          </DialogClose>\n          <Button variant='primary' color='brand' size='large'>\n            Apply Settings\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
-          "description": "With tabs"
-        }
-      ]
-    },
-    {
-      "name": "Drawer",
-      "importPath": "@wallarm-org/design-system/Drawer",
-      "props": [
+          "name": "contextMenu",
+          "type": "string | undefined",
+          "required": false
+        },
         {
-          "name": "open",
-          "type": "boolean | undefined",
-          "required": false,
-          "description": "Controlled open state"
+          "name": "dir",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "closeOnEscape",
-          "type": "boolean | undefined",
-          "required": false,
-          "description": "Whether ESC key closes the drawer (default: true)",
-          "defaultValue": "true"
+          "name": "draggable",
+          "type": "Booleanish | undefined",
+          "required": false
         },
         {
-          "name": "closeOnOutsideClick",
-          "type": "boolean | undefined",
-          "required": false,
-          "description": "Whether clicking outside closes the drawer (default: true)",
-          "defaultValue": "true"
+          "name": "enterKeyHint",
+          "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
+          "required": false
         },
         {
-          "name": "overlay",
+          "name": "hidden",
           "type": "boolean | undefined",
-          "required": false,
-          "description": "Overlay visibility (default: true)",
-          "defaultValue": "true"
+          "required": false
         },
         {
-          "name": "width",
-          "type": "string | number | undefined",
-          "required": false,
-          "description": "Width - number for pixels, string for percentage (e.g., \"50%\")"
+          "name": "id",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "minWidth",
-          "type": "number | undefined",
-          "required": false,
-          "description": "Minimum width in pixels"
+          "name": "lang",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "maxWidth",
-          "type": "number | undefined",
-          "required": false,
-          "description": "Maximum width in pixels"
-        }
-      ],
-      "variants": [
-        {
-          "name": "isResizing",
-          "options": [
-            "true"
-          ]
-        }
-      ],
-      "subComponents": [
-        {
-          "name": "DrawerBody",
-          "props": []
+          "name": "nonce",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "DrawerClose",
-          "props": [
-            {
-              "name": "asChild",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Render as child component",
-              "defaultValue": "false"
-            }
-          ]
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
         },
         {
-          "name": "DrawerContent",
-          "props": [
-            {
-              "name": "asChild",
-              "type": "boolean | undefined",
-              "required": false
-            }
-          ]
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
         },
         {
-          "name": "DrawerFooter",
-          "props": []
+          "name": "translate",
+          "type": "\"yes\" | \"no\" | undefined",
+          "required": false
         },
         {
-          "name": "DrawerFooterControls",
-          "props": [
-            {
-              "name": "placement",
-              "type": "{ left: string; right: string; }",
-              "required": false,
-              "defaultValue": "right"
-            }
-          ]
+          "name": "radioGroup",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "DrawerHeader",
-          "props": []
+          "name": "role",
+          "type": "AriaRole | undefined",
+          "required": false
         },
         {
-          "name": "DrawerPositioner",
-          "props": [
-            {
-              "name": "isResizing",
-              "type": "boolean",
-              "required": true
-            }
-          ]
+          "name": "about",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "DrawerTitle",
-          "props": []
+          "name": "content",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "DrawerTrigger",
-          "props": [
-            {
-              "name": "asChild",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Render as child component",
-              "defaultValue": "false"
-            }
-          ]
-        }
-      ],
-      "examples": [
+          "name": "datatype",
+          "type": "string | undefined",
+          "required": false
+        },
         {
-          "name": "Basic",
-          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer Title</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "Basic uncontrolled drawer"
+          "name": "inlist",
+          "type": "any",
+          "required": false
         },
         {
-          "name": "WithFooter",
-          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer's title</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n        <DrawerFooter>\n          <DrawerFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DrawerFooterControls>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "Minimal example"
+          "name": "prefix",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "WithFooterLeftActions",
-          "code": "() => (\n  <Drawer>\n    <DrawerTrigger asChild>\n      <Button>Open with Footer Actions</Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader>\n        <DrawerTitle>Footer with Left Actions</DrawerTitle>\n      </DrawerHeader>\n\n      <DrawerBody>\n        <ContentPlaceholder fillHeight />\n      </DrawerBody>\n\n      <DrawerFooter>\n        <DrawerFooterControls placement='left'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Remember choice</SwitchLabel>\n          </Switch>\n        </DrawerFooterControls>\n\n        <DrawerClose asChild>\n          <Button variant='ghost' color='neutral' size='large'>\n            Cancel\n          </Button>\n        </DrawerClose>\n        <Button variant='primary' color='brand' size='large'>\n          Apply\n        </Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n)",
-          "description": "With footer left actions"
+          "name": "property",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "Sizes",
-          "code": "() => (\n  <HStack gap={8} justify='center'>\n    <Drawer width={DRAWER_SIZES.small}>\n      <DrawerTrigger asChild>\n        <Button>Open Small ({DRAWER_SIZES.small}px)</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Small Drawer ({DRAWER_SIZES.small}px)</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n\n    <Drawer width={DRAWER_SIZES.medium}>\n      <DrawerTrigger asChild>\n        <Button>Open Medium ({DRAWER_SIZES.medium}px)</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Medium Drawer ({DRAWER_SIZES.medium}px)</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n\n    <Drawer width={DRAWER_SIZES.large}>\n      <DrawerTrigger asChild>\n        <Button>Open Large ({DRAWER_SIZES.large}px)</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Large Drawer ({DRAWER_SIZES.large}px)</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  </HStack>\n)",
-          "description": "Drawer with different sizes - Small"
+          "name": "rel",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "CustomSizes",
-          "code": "() => {\n  return (\n    <HStack gap={8} justify='center'>\n      <Drawer width='50%'>\n        <DrawerTrigger asChild>\n          <Button>50% Width</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>50% Width Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p>This drawer takes 50% of the viewport width.</p>\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width={1000}>\n        <DrawerTrigger asChild>\n          <Button>1000px Width</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>1000px Width Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p>This drawer has a fixed width of 1000px.</p>\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </HStack>\n  );\n}",
-          "description": "Custom width with percentage"
+          "name": "resource",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "Resizable",
-          "code": "() => {\n  return (\n    <VStack gap={12}>\n      <Drawer width={800}>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (as number)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>Drag the left edge to resize this drawer.</p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width='900px'>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (900px)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer with \"900px\" width</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>Width is set as \"900px\" string. Drag the left edge to resize.</p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width='50%'>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (50%)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer with 50% width</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>\n                Width is set as \"50%\". Drag the left edge to resize - it will convert to pixels.\n              </p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </VStack>\n  );\n}",
-          "description": "Resizable drawer"
-        },
-        {
-          "name": "Scrollable",
-          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer with Scroll</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Scrollable Content</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <div className='flex flex-col gap-16 py-12'>\n            {Array.from({ length: 20 }).map((_, i) => (\n              <ContentPlaceholder key={i} height={100} />\n            ))}\n          </div>\n        </DrawerBody>\n\n        <DrawerFooter>\n          <DrawerClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Close\n            </Button>\n          </DrawerClose>\n          <Button variant='primary' color='brand' size='large'>\n            Confirm\n          </Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "Drawer with scrollable content"
-        },
-        {
-          "name": "Controlled",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Controlled Drawer</Button>\n\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Controlled Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>This drawer is controlled externally.</p>\n              <ContentPlaceholder />\n            </div>\n          </DrawerBody>\n\n          <DrawerFooter>\n            <DrawerClose asChild>\n              <Button variant='ghost' color='neutral' size='large'>\n                Cancel\n              </Button>\n            </DrawerClose>\n            <Button variant='primary' color='brand' size='large'>\n              Save Changes\n            </Button>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </>\n  );\n}",
-          "description": "Controlled drawer with external state"
-        },
-        {
-          "name": "NoClosableOnEsc",
-          "code": "() => {\n  return (\n    <Drawer closeOnEscape={false}>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer Title</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "No closable on ESC"
-        },
-        {
-          "name": "NoOverlay",
-          "code": "() => {\n  return (\n    <Drawer overlay={false}>\n      <DrawerTrigger asChild>\n        <Button>Open without Overlay</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>No Overlay</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <div className='py-12'>\n            <p>This drawer has no overlay backdrop.</p>\n          </div>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "Without overlay"
-        },
-        {
-          "name": "WithNested",
-          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>1st level drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>[Level 1] Main Drawer</DrawerTitle>\n\n          {/* Level 2 drawer */}\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant='ghost' color='neutral' size='small'>\n                <PanelRight />\n                2nd level drawer\n              </Button>\n            </DrawerTrigger>\n\n            <DrawerContent>\n              <DrawerHeader>\n                <DrawerTitle>[Level 2] Detail View</DrawerTitle>\n                {/* Level 3 drawer */}\n                <Drawer>\n                  <DrawerTrigger asChild>\n                    <Button variant='ghost' color='neutral' size='small'>\n                      <PanelRight />\n                      3nd level drawer\n                    </Button>\n                  </DrawerTrigger>\n\n                  <DrawerContent>\n                    <DrawerHeader>\n                      <DrawerTitle>[Level 3] Deep Nested</DrawerTitle>\n                    </DrawerHeader>\n\n                    <DrawerBody>\n                      <VStack gap={12} align='start'>\n                        <Text>Level 3! Unlimited nesting works.</Text>\n                        <ContentPlaceholder height={150} />\n                      </VStack>\n                    </DrawerBody>\n\n                    <DrawerFooter>\n                      <DrawerClose asChild>\n                        <Button size='large' variant='ghost' color='neutral'>\n                          Back\n                        </Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              </DrawerHeader>\n\n              <DrawerBody>\n                <VStack gap={12} align='start'>\n                  <Text>\n                    This is Level 2 drawer. Main drawer is pushed back. You can go deeper:\n                  </Text>\n\n                  <ContentPlaceholder height={150} />\n                </VStack>\n              </DrawerBody>\n\n              <DrawerFooter>\n                <DrawerClose asChild>\n                  <Button variant='ghost' color='neutral' size='large'>\n                    Back\n                  </Button>\n                </DrawerClose>\n                <Button variant='primary' color='brand' size='large'>\n                  Apply\n                </Button>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <VStack gap={12} align='start'>\n            <Text>This is Level 1 drawer. Click below to open nested drawers:</Text>\n\n            <ContentPlaceholder height={300} />\n          </VStack>\n        </DrawerBody>\n\n        <DrawerFooter>\n          <DrawerClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Cancel\n            </Button>\n          </DrawerClose>\n          <Button variant='primary' color='brand' size='large'>\n            Save\n          </Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "Nested drawers with push-back effect"
-        },
-        {
-          "name": "WithTabs",
-          "code": "() => {\n  const [activeTab, setActiveTab] = useState('tab1');\n\n  return (\n    <Drawer width={960}>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer with Tabs</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <Tabs value={activeTab} onChange={setActiveTab} asChild>\n          <DrawerHeader>\n            <DrawerTitle>Tabbed Content</DrawerTitle>\n          </DrawerHeader>\n\n          <TabsList>\n            <TabsTrigger value='tab1'>General</TabsTrigger>\n            <TabsTrigger value='tab2'>Settings</TabsTrigger>\n            <TabsTrigger value='tab3'>Advanced</TabsTrigger>\n          </TabsList>\n\n          <DrawerBody>\n            <div className='pt-12'>\n              <TabsContent value='tab1'>\n                <h3 className='text-lg font-medium mb-8'>General Settings</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab2'>\n                <h3 className='text-lg font-medium mb-8'>Configuration</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab3'>\n                <h3 className='text-lg font-medium mb-8'>Advanced Options</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n            </div>\n          </DrawerBody>\n\n          <DrawerFooter>\n            <DrawerClose asChild>\n              <Button variant='ghost' color='neutral' size='large'>\n                Cancel\n              </Button>\n            </DrawerClose>\n            <Button variant='primary' color='brand' size='large'>\n              Apply Settings\n            </Button>\n          </DrawerFooter>\n        </Tabs>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "With tabs"
-        }
-      ]
-    },
-    {
-      "name": "DropdownMenu",
-      "importPath": "@wallarm-org/design-system/DropdownMenu",
-      "props": [],
-      "variants": [
-        {
-          "name": "variant",
-          "options": [
-            "default",
-            "brand",
-            "destructive"
-          ]
-        },
-        {
-          "name": "inset",
-          "options": [
-            "true"
-          ]
-        }
-      ],
-      "subComponents": [],
-      "examples": [
-        {
-          "name": "Basic",
-          "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>\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>\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>\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)"
-        }
-      ]
-    },
-    {
-      "name": "Field",
-      "importPath": "@wallarm-org/design-system/Field",
-      "props": [],
-      "variants": [
-        {
-          "name": "orientation",
-          "options": [
-            "vertical",
-            "horizontal",
-            "responsive"
-          ],
-          "defaultValue": "vertical"
-        }
-      ],
-      "subComponents": [],
-      "examples": [
-        {
-          "name": "Basic",
-          "code": "() => {\n  const monthsCollection = createListCollection({\n    items: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],\n  });\n\n  const yearsCollection = createListCollection({\n    items: ['2025', '2026', '2027', '2028', '2029'],\n  });\n\n  return (\n    <div className='min-w-320'>\n      <form>\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Payment Method</FieldLegend>\n\n            <FieldDescription>All transactions are secure and encrypted</FieldDescription>\n\n            <FieldGroup>\n              <Field>\n                <FieldLabel>Name on Card</FieldLabel>\n                <Input placeholder='Evil Rabbit' />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor='checkout-7j9-card-number-uw1'>Card Number</FieldLabel>\n                <Input\n                  id='checkout-7j9-card-number-uw1'\n                  placeholder='1234 5678 9012 3456'\n                  required\n                />\n                <FieldDescription>Enter your 16-digit card number</FieldDescription>\n              </Field>\n\n              <HStack>\n                <Field>\n                  <FieldLabel>Month</FieldLabel>\n                  <Select collection={monthsCollection}>\n                    <SelectButton placeholder='Month' />\n                    <SelectPositioner>\n                      <SelectContent>\n                        {monthsCollection.items.map(month => (\n                          <SelectOption key={month} item={month}>\n                            <SelectOptionText>{month}</SelectOptionText>\n                          </SelectOption>\n                        ))}\n                      </SelectContent>\n                    </SelectPositioner>\n                  </Select>\n                </Field>\n\n                <Field>\n                  <FieldLabel>Year</FieldLabel>\n\n                  <Select collection={yearsCollection}>\n                    <SelectButton placeholder='Year' />\n\n                    <SelectPositioner>\n                      <SelectContent>\n                        {yearsCollection.items.map(year => (\n                          <SelectOption key={year} item={year}>\n                            <SelectOptionText>{year}</SelectOptionText>\n                          </SelectOption>\n                        ))}\n                      </SelectContent>\n                    </SelectPositioner>\n                  </Select>\n                </Field>\n\n                <Field>\n                  <FieldLabel>CVV</FieldLabel>\n                  <Input placeholder='123' required />\n                </Field>\n              </HStack>\n\n              <Field>\n                <FieldLabel>Amount</FieldLabel>\n                <NumberInput defaultValue='1000' />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <FieldSeparator />\n\n          <FieldSet>\n            <FieldLegend>Billing Address</FieldLegend>\n\n            <FieldDescription>\n              The billing address associated with your payment method\n            </FieldDescription>\n\n            <FieldGroup>\n              <Field orientation='horizontal'>\n                <Checkbox defaultChecked>\n                  <CheckboxIndicator />\n                  <CheckboxLabel>Same as shipping address</CheckboxLabel>\n                </Checkbox>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <FieldSeparator />\n\n          <FieldSet>\n            <FieldLegend>Subscription Plan</FieldLegend>\n\n            <FieldDescription>\n              Yearly and lifetime plans offer significant savings.\n            </FieldDescription>\n\n            <Field>\n              <RadioGroup defaultValue='monthly'>\n                <Radio value='monthly'>\n                  <RadioIndicator />\n                  <RadioLabel>Monthly ($9.99/month)</RadioLabel>\n                </Radio>\n                <Radio value='yearly'>\n                  <RadioIndicator />\n                  <RadioLabel>Yearly ($99.99/year)</RadioLabel>\n                </Radio>\n                <Radio value='lifetime'>\n                  <RadioIndicator />\n                  <RadioLabel>Lifetime ($299.99)</RadioLabel>\n                </Radio>\n              </RadioGroup>\n            </Field>\n          </FieldSet>\n\n          <FieldSeparator />\n\n          <FieldSet>\n            <FieldGroup>\n              <Field orientation='horizontal'>\n                <Switch>\n                  <SwitchControl />\n                  <SwitchLabel>Notice when delivered</SwitchLabel>\n                </Switch>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <FieldSet>\n            <FieldGroup>\n              <Field>\n                <FieldLabel>Comments</FieldLabel>\n                <Textarea placeholder='Add any additional comments' />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <Field orientation='horizontal'>\n            <Button type='submit'>Submit</Button>\n\n            <Button variant='outline' color='neutral' type='button'>\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  );\n}"
-        },
-        {
-          "name": "Inputs",
-          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldGroup>\n        <Field>\n          <FieldLabel>Username</FieldLabel>\n          <Input type='text' placeholder='Max Leiter' />\n          <FieldDescription>Choose a unique username for your account.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel>Password</FieldLabel>\n          <FieldDescription>Must be at least 8 characters long.</FieldDescription>\n          <Input type='password' placeholder='********' />\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
-        },
-        {
-          "name": "Textareas",
-          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldGroup>\n        <Field>\n          <FieldLabel>Feedback</FieldLabel>\n          <Textarea placeholder='Your feedback helps us improve...' rows={4} />\n          <FieldDescription>Share your thoughts about our service.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
-        },
-        {
-          "name": "Fieldset",
-          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Profile</FieldLegend>\n      <FieldDescription>This appears on invoices and emails.</FieldDescription>\n\n      <FieldGroup>\n        <Field>\n          <FieldLabel>\n            Full name\n            <FieldAction>Generate new</FieldAction>\n          </FieldLabel>\n          <Input autoComplete='off' placeholder='Evil Rabbit' />\n          <FieldDescription>This appears on invoices and emails.</FieldDescription>\n        </Field>\n        <Field required>\n          <FieldLabel>\n            Username\n            <FieldIndicator />\n          </FieldLabel>\n          <Input placeholder='@paveldurov' autoComplete='off' error />\n          <FieldError>Choose another username.</FieldError>\n        </Field>\n        <Field>\n          <FieldLabel>\n            Message\n            <Tooltip>\n              <TooltipTrigger>\n                <Info />\n              </TooltipTrigger>\n              <TooltipContent>Additional information</TooltipContent>\n            </Tooltip>\n          </FieldLabel>\n          <Textarea placeholder='Your message...' />\n          <FieldDescription>Enter your message.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
-        },
-        {
-          "name": "Switches",
-          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Notification Settings</FieldLegend>\n      <FieldDescription>Manage your notification preferences.</FieldDescription>\n\n      <FieldGroup>\n        <Field orientation='horizontal'>\n          <Switch defaultChecked>\n            <SwitchControl />\n            <SwitchLabel>Email notifications</SwitchLabel>\n            <SwitchDescription>Receive email alerts for important updates.</SwitchDescription>\n          </Switch>\n        </Field>\n\n        <Field orientation='horizontal'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Push notifications</SwitchLabel>\n            <SwitchDescription>Get push notifications on your device.</SwitchDescription>\n          </Switch>\n        </Field>\n\n        <Field orientation='horizontal'>\n          <Switch defaultChecked>\n            <SwitchControl />\n            <SwitchLabel>SMS notifications</SwitchLabel>\n            <SwitchDescription>Receive text messages for critical alerts.</SwitchDescription>\n          </Switch>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
-        },
-        {
-          "name": "Radios",
-          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Delivery Method</FieldLegend>\n      <FieldDescription>Choose how you want to receive your order.</FieldDescription>\n\n      <Field>\n        <RadioGroup defaultValue='standard'>\n          <Radio value='standard'>\n            <RadioIndicator />\n            <RadioLabel>Standard Shipping (5-7 days)</RadioLabel>\n          </Radio>\n          <Radio value='express'>\n            <RadioIndicator />\n            <RadioLabel>Express Shipping (2-3 days)</RadioLabel>\n          </Radio>\n          <Radio value='overnight'>\n            <RadioIndicator />\n            <RadioLabel>Overnight Shipping (1 day)</RadioLabel>\n          </Radio>\n          <Radio value='pickup'>\n            <RadioIndicator />\n            <RadioLabel>In-store Pickup</RadioLabel>\n          </Radio>\n        </RadioGroup>\n\n        <FieldDescription>Shipping costs will be calculated at checkout.</FieldDescription>\n      </Field>\n    </FieldSet>\n  </div>\n)"
-        },
-        {
-          "name": "Checkboxes",
-          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Terms and Preferences</FieldLegend>\n      <FieldDescription>Select which terms you agree to.</FieldDescription>\n\n      <FieldGroup>\n        <Field orientation='horizontal'>\n          <Checkbox defaultChecked>\n            <CheckboxIndicator />\n            <CheckboxLabel>I accept the terms and conditions</CheckboxLabel>\n            <CheckboxDescription>You must agree to our terms to continue.</CheckboxDescription>\n          </Checkbox>\n        </Field>\n        <Field orientation='horizontal'>\n          <Checkbox>\n            <CheckboxIndicator />\n            <CheckboxLabel>Subscribe to newsletter</CheckboxLabel>\n            <CheckboxDescription>Get weekly updates and exclusive offers.</CheckboxDescription>\n          </Checkbox>\n        </Field>\n        <Field orientation='horizontal'>\n          <Checkbox defaultChecked>\n            <CheckboxIndicator />\n            <CheckboxLabel>Share usage data</CheckboxLabel>\n            <CheckboxDescription>Help us improve our services.</CheckboxDescription>\n          </Checkbox>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
-        },
-        {
-          "name": "NumberInputs",
-          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Product Details</FieldLegend>\n      <FieldDescription>Configure your product quantity and pricing.</FieldDescription>\n\n      <FieldGroup>\n        <Field>\n          <FieldLabel>Quantity</FieldLabel>\n          <NumberInput defaultValue='1' min={1} max={100} />\n          <FieldDescription>Choose between 1 and 100 items.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel>Price per unit</FieldLabel>\n          <NumberInput\n            defaultValue='99.99'\n            step={0.01}\n            formatOptions={{ style: 'currency', currency: 'USD' }}\n          />\n          <FieldDescription>Set the price for each unit.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel>Discount percentage</FieldLabel>\n          <NumberInput defaultValue='10' min={0} max={100} formatOptions={{ style: 'percent' }} />\n          <FieldDescription>Apply a discount from 0% to 100%.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
-        },
-        {
-          "name": "Selects",
-          "code": "() => {\n  const countriesCollection = createListCollection({\n    items: [\n      { value: 'us', label: 'United States' },\n      { value: 'uk', label: 'United Kingdom' },\n      { value: 'ca', label: 'Canada' },\n      { value: 'au', label: 'Australia' },\n      { value: 'fr', label: 'France' },\n      { value: 'de', label: 'Germany' },\n      { value: 'jp', label: 'Japan' },\n    ],\n  });\n\n  const languagesCollection = createListCollection({\n    items: [\n      { value: 'en', label: 'English' },\n      { value: 'es', label: 'Spanish' },\n      { value: 'fr', label: 'French' },\n      { value: 'de', label: 'German' },\n      { value: 'it', label: 'Italian' },\n      { value: 'pt', label: 'Portuguese' },\n      { value: 'ru', label: 'Russian' },\n      { value: 'zh', label: 'Chinese' },\n      { value: 'ja', label: 'Japanese' },\n    ],\n  });\n\n  const timezonesCollection = createListCollection({\n    items: [\n      { value: 'utc-8', label: 'Pacific Time (UTC-8)' },\n      { value: 'utc-5', label: 'Eastern Time (UTC-5)' },\n      { value: 'utc', label: 'UTC' },\n      { value: 'utc+1', label: 'Central European Time (UTC+1)' },\n      { value: 'utc+8', label: 'China Standard Time (UTC+8)' },\n      { value: 'utc+9', label: 'Japan Standard Time (UTC+9)' },\n    ],\n  });\n\n  return (\n    <div className='min-w-320'>\n      <FieldSet>\n        <FieldLegend>Regional Settings</FieldLegend>\n        <FieldDescription>Configure your location and language preferences.</FieldDescription>\n\n        <FieldGroup>\n          <Field>\n            <FieldLabel>Country</FieldLabel>\n            <Select collection={countriesCollection}>\n              <SelectButton placeholder='Select a country' />\n              <SelectPositioner>\n                <SelectContent>\n                  {countriesCollection.items.map(country => (\n                    <SelectOption key={country.value} item={country}>\n                      <SelectOptionText>{country.label}</SelectOptionText>\n                    </SelectOption>\n                  ))}\n                </SelectContent>\n              </SelectPositioner>\n            </Select>\n            <FieldDescription>Your country determines available features.</FieldDescription>\n          </Field>\n          <Field>\n            <FieldLabel>Language</FieldLabel>\n            <Select collection={languagesCollection}>\n              <SelectButton placeholder='Select a language' />\n              <SelectPositioner>\n                <SelectContent>\n                  {languagesCollection.items.map(language => (\n                    <SelectOption key={language.value} item={language}>\n                      <SelectOptionText>{language.label}</SelectOptionText>\n                    </SelectOption>\n                  ))}\n                </SelectContent>\n              </SelectPositioner>\n            </Select>\n            <FieldDescription>Choose your preferred language.</FieldDescription>\n          </Field>\n          <Field>\n            <FieldLabel>Timezone</FieldLabel>\n            <Select collection={timezonesCollection}>\n              <SelectButton placeholder='Select a timezone' />\n              <SelectPositioner>\n                <SelectContent>\n                  {timezonesCollection.items.map(timezone => (\n                    <SelectOption key={timezone.value} item={timezone}>\n                      <SelectOptionText>{timezone.label}</SelectOptionText>\n                    </SelectOption>\n                  ))}\n                </SelectContent>\n              </SelectPositioner>\n            </Select>\n            <FieldDescription>All times will be displayed in this timezone.</FieldDescription>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </div>\n  );\n}"
-        }
-      ]
-    },
-    {
-      "name": "Flex",
-      "importPath": "@wallarm-org/design-system/Flex",
-      "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",
+          "name": "rev",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "autoCapitalize",
-          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
-          "required": false
-        },
-        {
-          "name": "autoFocus",
-          "type": "boolean | undefined",
+          "name": "typeof",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "contentEditable",
-          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "name": "vocab",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "contextMenu",
+          "name": "autoCorrect",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "dir",
+          "name": "autoSave",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "draggable",
-          "type": "Booleanish | undefined",
+          "name": "color",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "enterKeyHint",
-          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "name": "itemProp",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "hidden",
+          "name": "itemScope",
           "type": "boolean | undefined",
           "required": false
         },
         {
-          "name": "id",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "lang",
+          "name": "itemType",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "nonce",
+          "name": "itemID",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "slot",
+          "name": "itemRef",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "spellCheck",
-          "type": "Booleanish | undefined",
-          "required": false
-        },
-        {
-          "name": "tabIndex",
+          "name": "results",
           "type": "number | undefined",
           "required": false
         },
         {
-          "name": "title",
+          "name": "security",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "translate",
-          "type": "\"yes\" | \"no\" | undefined",
-          "required": false
-        },
-        {
-          "name": "radioGroup",
-          "type": "string | undefined",
+          "name": "unselectable",
+          "type": "\"off\" | \"on\" | undefined",
           "required": false
         },
         {
-          "name": "role",
-          "type": "AriaRole | undefined",
+          "name": "popover",
+          "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
           "required": false
         },
         {
-          "name": "about",
-          "type": "string | undefined",
+          "name": "popoverTargetAction",
+          "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
           "required": false
         },
         {
-          "name": "content",
+          "name": "popoverTarget",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "datatype",
-          "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": "inlist",
-          "type": "any",
-          "required": false
+          "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": "prefix",
+          "name": "is",
           "type": "string | undefined",
-          "required": false
+          "required": false,
+          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
         },
         {
-          "name": "property",
+          "name": "exportparts",
           "type": "string | undefined",
-          "required": false
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
         },
         {
-          "name": "rel",
+          "name": "part",
           "type": "string | undefined",
-          "required": false
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         },
         {
-          "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": "inline",
-          "type": "{ true: string; false: string; }",
-          "required": false,
-          "defaultValue": "false"
-        },
-        {
-          "name": "direction",
-          "type": "{ row: string; column: string; 'row-reverse': string; 'column-reverse': string; }",
-          "required": false,
-          "defaultValue": "row"
-        },
-        {
-          "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; }",
+          "name": "size",
+          "type": "{ small: string; medium: string; }",
           "required": false,
-          "defaultValue": "nowrap"
-        },
-        {
-          "name": "gap",
-          "type": "complex",
-          "required": false
-        },
-        {
-          "name": "grow",
-          "type": "{ true: string; false: string; }",
-          "required": false
-        },
-        {
-          "name": "shrink",
-          "type": "{ true: string; false: string; }",
-          "required": false
-        },
-        {
-          "name": "fullWidth",
-          "type": "{ true: string; }",
-          "required": false
-        },
-        {
-          "name": "basis",
-          "type": "complex",
-          "required": false
+          "defaultValue": "medium"
         },
         {
           "name": "asChild",
           "type": "boolean | undefined",
           "required": false,
           "defaultValue": "false"
+        },
+        {
+          "name": "code",
+          "type": "\"AF\" | \"AX\" | \"AL\" | \"DZ\" | \"AS\" | \"AD\" | \"AO\" | \"AI\" | \"AG\" | \"AR\" | \"AM\" | \"AW\" | \"AU\" | \"AT\" | \"AZ\" | \"BS\" | \"BH\" | \"BD\" | \"BB\" | \"BY\" | \"BE\" | \"BZ\" | \"BJ\" | \"BM\" | \"BT\" | \"BO\" | \"BQ\" | \"BA\" | \"BW\" | \"BV\" | \"BR\" | \"IO\" | \"BN\" | \"BG\" | \"BF\" | \"BI\" | \"CV\" | \"KH\" | \"CM\" | \"CA\" | \"KY\" | \"CF\" | \"TD\" | \"CL\" | \"CN\" | \"CX\" | \"CC\" | \"CO\" | \"KM\" | \"CG\" | \"CD\" | \"CK\" | \"CR\" | \"CI\" | \"HR\" | \"CU\" | \"CW\" | \"CY\" | \"CZ\" | \"DK\" | \"DJ\" | \"DM\" | \"DO\" | \"DNO\" | \"EC\" | \"EG\" | \"SV\" | \"GQ\" | \"ER\" | \"EE\" | \"ET\" | \"FK\" | \"FO\" | \"FJ\" | \"FI\" | \"FR\" | \"GF\" | \"PF\" | \"TF\" | \"GA\" | \"GM\" | \"GE\" | \"DE\" | \"GH\" | \"GI\" | \"GR\" | \"GL\" | \"GD\" | \"GP\" | \"GU\" | \"GT\" | \"GG\" | \"GN\" | \"GW\" | \"GY\" | \"HT\" | \"HM\" | \"VA\" | \"HN\" | \"HK\" | \"HU\" | \"IS\" | \"IN\" | \"ID\" | \"IR\" | \"IQ\" | \"IE\" | \"IM\" | \"IL\" | \"IT\" | \"JM\" | \"JP\" | \"JE\" | \"JO\" | \"KZ\" | \"KE\" | \"KI\" | \"KP\" | \"KR\" | \"KW\" | \"KG\" | \"LA\" | \"LV\" | \"LB\" | \"LS\" | \"LR\" | \"LY\" | \"LI\" | \"LT\" | \"LHO\" | \"LU\" | \"MO\" | \"MK\" | \"MG\" | \"MW\" | \"MY\" | \"MV\" | \"ML\" | \"MT\" | \"MH\" | \"MQ\" | \"MR\" | \"MU\" | \"YT\" | \"MX\" | \"FM\" | \"MD\" | \"MC\" | \"MN\" | \"ME\" | \"MS\" | \"MA\" | \"MZ\" | \"MM\" | \"NA\" | \"NR\" | \"NP\" | \"NL\" | \"NC\" | \"NZ\" | \"NI\" | \"NE\" | \"NG\" | \"NU\" | \"NF\" | \"MP\" | \"NO\" | \"OM\" | \"PK\" | \"PW\" | \"PS\" | \"PA\" | \"PG\" | \"PY\" | \"PE\" | \"PH\" | \"PN\" | \"PL\" | \"PT\" | \"PR\" | \"QA\" | \"ROC\" | \"RE\" | \"RO\" | \"RU\" | \"RW\" | \"BL\" | \"SH\" | \"KN\" | \"LC\" | \"MF\" | \"PM\" | \"VC\" | \"WS\" | \"SM\" | \"ST\" | \"SA\" | \"SN\" | \"RS\" | \"SC\" | \"SL\" | \"SG\" | \"SX\" | \"SK\" | \"SI\" | \"SB\" | \"SO\" | \"ZA\" | \"GS\" | \"SS\" | \"ES\" | \"LK\" | \"SD\" | \"SR\" | \"SJ\" | \"SZ\" | \"SE\" | \"CH\" | \"SY\" | \"TW\" | \"TJ\" | \"TZ\" | \"TH\" | \"TL\" | \"TG\" | \"TK\" | \"TO\" | \"TT\" | \"TN\" | \"TR\" | \"TM\" | \"TC\" | \"TV\" | \"UG\" | \"UA\" | \"AE\" | \"GB\" | \"US\" | \"UY\" | \"UZ\" | \"VU\" | \"VE\" | \"VN\" | \"VG\" | \"VI\" | \"WF\" | \"EH\" | \"YE\" | \"ZM\" | \"ZW\"",
+          "required": true
         }
       ],
       "variants": [
         {
-          "name": "inline",
-          "options": [
-            "true",
-            "false"
-          ]
-        },
-        {
-          "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": "gap",
+          "name": "size",
           "options": [
-            "1",
-            "2",
-            "4",
-            "6",
-            "8",
-            "12",
-            "16",
-            "20",
-            "24",
-            "28",
-            "32",
-            "36",
-            "40",
-            "44",
-            "48",
-            "56",
-            "64",
-            "80",
-            "96",
-            "112",
-            "128",
-            "144"
+            "small",
+            "medium"
           ]
-        },
+        }
+      ],
+      "subComponents": [
         {
-          "name": "grow",
-          "options": [
-            "true",
-            "false"
-          ]
+          "name": "CountryFlag",
+          "props": [
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | 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": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"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": "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": "crossOrigin",
+              "type": "CrossOrigin",
+              "required": false
+            },
+            {
+              "name": "decoding",
+              "type": "\"auto\" | \"async\" | \"sync\" | undefined",
+              "required": false
+            },
+            {
+              "name": "fetchPriority",
+              "type": "\"auto\" | \"high\" | \"low\" | undefined",
+              "required": false
+            },
+            {
+              "name": "height",
+              "type": "string | number | undefined",
+              "required": false
+            },
+            {
+              "name": "loading",
+              "type": "\"eager\" | \"lazy\" | undefined",
+              "required": false
+            },
+            {
+              "name": "referrerPolicy",
+              "type": "HTMLAttributeReferrerPolicy | undefined",
+              "required": false
+            },
+            {
+              "name": "sizes",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "srcSet",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "useMap",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "width",
+              "type": "string | number | undefined",
+              "required": false
+            }
+          ]
+        },
+        {
+          "name": "CountryName",
+          "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": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"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": "\"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}"
+            }
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "args => (\n  <Country code={args.code} size={args.size}>\n    <CountryFlag />\n    <CountryName />\n  </Country>\n)"
+        },
+        {
+          "name": "Sizes",
+          "code": "() => (\n  <HStack align='center' gap={16}>\n    <Country code='US' size='small'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='US' size='medium'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n  </HStack>\n)"
+        },
+        {
+          "name": "FlagOnly",
+          "code": "() => (\n  <HStack gap={8}>\n    <Country code='US'>\n      <CountryFlag />\n    </Country>\n    <Country code='GB'>\n      <CountryFlag />\n    </Country>\n    <Country code='DE'>\n      <CountryFlag />\n    </Country>\n    <Country code='FR'>\n      <CountryFlag />\n    </Country>\n    <Country code='JP'>\n      <CountryFlag />\n    </Country>\n  </HStack>\n)"
+        },
+        {
+          "name": "NameOnly",
+          "code": "() => (\n  <VStack gap={4}>\n    <Country code='US'>\n      <CountryName />\n    </Country>\n    <Country code='GB'>\n      <CountryName />\n    </Country>\n    <Country code='DE'>\n      <CountryName />\n    </Country>\n  </VStack>\n)"
+        },
+        {
+          "name": "Examples",
+          "code": "() => (\n  <VStack gap={8}>\n    <Country code='US'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='GB'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='DE'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='FR'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='JP'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='RU'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='CN'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='BR'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='AU'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n    <Country code='CA'>\n      <CountryFlag />\n      <CountryName />\n    </Country>\n  </VStack>\n)"
+        }
+      ]
+    },
+    {
+      "name": "DateTime",
+      "importPath": "@wallarm-org/design-system/DateTime",
+      "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",
+          "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": "value",
+          "type": "string | number | Date | null | undefined",
+          "required": true,
+          "description": "ISO string, Date object, or Unix timestamp (ms)"
+        },
+        {
+          "name": "format",
+          "type": "DateTimeFormat | undefined",
+          "required": false,
+          "description": "Display format. Default: 'relative'",
+          "defaultValue": "relative"
+        },
+        {
+          "name": "showSeconds",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Show seconds in tooltip absolute time. Default: true",
+          "defaultValue": "true"
+        }
+      ],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Relative",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Just now\n      </Text>\n      <DateTime value={subSeconds(now, 10)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Minutes ago\n      </Text>\n      <DateTime value={subMinutes(now, 12)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Hours ago\n      </Text>\n      <DateTime value={subHours(now, 3)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Yesterday\n      </Text>\n      <DateTime value={subHours(now, 30)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Days ago\n      </Text>\n      <DateTime value={subDays(now, 5)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Weeks ago\n      </Text>\n      <DateTime value={subDays(now, 21)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Months ago\n      </Text>\n      <DateTime value={subMonths(now, 3)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Short date\n      </Text>\n      <DateTime value={subDays(now, 200)} format='relative' />\n    </HStack>\n    <HStack gap={16} align='center'>\n      <Text size='sm' color='secondary' className='w-128'>\n        Full date\n      </Text>\n      <DateTime value={subYears(now, 2)} format='relative' />\n    </HStack>\n  </VStack>\n)"
+        },
+        {
+          "name": "DateFormat",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <DateTime value='2026-01-01T00:00:00' format='date' />\n    <DateTime value='2026-02-11T14:32:07' format='date' />\n    <DateTime value='2025-06-15T09:00:00' format='date' />\n  </VStack>\n)"
+        },
+        {
+          "name": "DatetimeFormat",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <DateTime value='2026-01-01T11:00:00' format='datetime' />\n    <DateTime value='2026-02-11T14:32:07' format='datetime' />\n    <DateTime value='2025-12-25T23:59:59' format='datetime' />\n  </VStack>\n)"
+        },
+        {
+          "name": "WithDescription",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <VStack>\n      <DateTime value='2026-01-01T00:00:00' format='date' />\n      <Text size='sm' color='secondary'>\n        Created by admin\n      </Text>\n    </VStack>\n    <VStack>\n      <DateTime value='2026-02-11T14:32:07' format='date' />\n      <Text size='sm' color='secondary'>\n        Last modified\n      </Text>\n    </VStack>\n  </VStack>\n)"
+        },
+        {
+          "name": "NullValue",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <DateTime value={null} />\n    <DateTime value={undefined} />\n  </VStack>\n)"
+        },
+        {
+          "name": "FutureDate",
+          "code": "() => (\n  <DateTime value={new Date(Date.now() + 5 * 60 * 1000)} format='relative' />\n)"
+        }
+      ]
+    },
+    {
+      "name": "Dialog",
+      "importPath": "@wallarm-org/design-system/Dialog",
+      "props": [],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog Title</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}",
+          "description": "Basic uncontrolled dialog"
+        },
+        {
+          "name": "WithFooter",
+          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog's title</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DialogFooterControls>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
+          "description": "Minimal example"
+        },
+        {
+          "name": "WithFooterLeftActions",
+          "code": "() => (\n  <Dialog>\n    <DialogTrigger asChild>\n      <Button>Open with Footer Actions</Button>\n    </DialogTrigger>\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Footer with Left Actions</DialogTitle>\n      </DialogHeader>\n\n      <DialogBody>\n        <ContentPlaceholder />\n      </DialogBody>\n\n      <DialogFooter>\n        <DialogFooterControls placement='left'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Remember choice</SwitchLabel>\n          </Switch>\n        </DialogFooterControls>\n\n        <DialogClose asChild>\n          <Button variant='ghost' color='neutral' size='large'>\n            Cancel\n          </Button>\n        </DialogClose>\n        <Button variant='primary' color='brand' size='large'>\n          Apply\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n)",
+          "description": "With footer left actions"
+        },
+        {
+          "name": "Sizes",
+          "code": "() => (\n  <HStack gap={8} justify='center'>\n    <Dialog width={DIALOG_SIZES.small}>\n      <DialogTrigger asChild>\n        <Button>Open Small ({DIALOG_SIZES.small}px)</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Small Dialog ({DIALOG_SIZES.small}px)</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n\n    <Dialog width={DIALOG_SIZES.medium}>\n      <DialogTrigger asChild>\n        <Button>Open Medium ({DIALOG_SIZES.medium}px)</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Medium Dialog ({DIALOG_SIZES.medium}px)</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n\n    <Dialog width={DIALOG_SIZES.large}>\n      <DialogTrigger asChild>\n        <Button>Open Large ({DIALOG_SIZES.large}px)</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Large Dialog ({DIALOG_SIZES.large}px)</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  </HStack>\n)",
+          "description": "Dialog with different sizes - Small"
+        },
+        {
+          "name": "CustomSizes",
+          "code": "() => {\n  return (\n    <HStack gap={8} justify='center'>\n      <Dialog width='50%'>\n        <DialogTrigger asChild>\n          <Button>50% Width</Button>\n        </DialogTrigger>\n\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>50% Width Dialog</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p>This dialog takes 50% of the viewport width.</p>\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n\n      <Dialog width={1000}>\n        <DialogTrigger asChild>\n          <Button>1000px Width</Button>\n        </DialogTrigger>\n\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>1000px Width Dialog</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p>This dialog has a fixed width of 1000px.</p>\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </HStack>\n  );\n}",
+          "description": "Custom width with percentage"
+        },
+        {
+          "name": "Scrollable",
+          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Open Dialog with Scroll</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Scrollable Content</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <div className='flex flex-col gap-16 py-12'>\n            {Array.from({ length: 20 }).map((_, i) => (\n              <ContentPlaceholder key={i} height={100} />\n            ))}\n          </div>\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Close\n            </Button>\n          </DialogClose>\n          <Button variant='primary' color='brand' size='large'>\n            Confirm\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
+          "description": "Dialog with scrollable content"
+        },
+        {
+          "name": "Controlled",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Controlled Dialog</Button>\n\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Controlled Dialog</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p className='mb-16'>This dialog is controlled externally.</p>\n              <ContentPlaceholder />\n            </div>\n          </DialogBody>\n\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant='ghost' color='neutral' size='large'>\n                Cancel\n              </Button>\n            </DialogClose>\n            <Button variant='primary' color='brand' size='large'>\n              Save Changes\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}",
+          "description": "Controlled dialog with external state"
+        },
+        {
+          "name": "NoClosableOnEsc",
+          "code": "() => {\n  return (\n    <Dialog closeOnEscape={false}>\n      <DialogTrigger asChild>\n        <Button>Open Dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Dialog Title</DialogTitle>\n        </DialogHeader>\n\n        <DialogBody>\n          <ContentPlaceholder />\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}",
+          "description": "No closable on ESC"
+        },
+        {
+          "name": "NoOverlay",
+          "code": "() => {\n  return (\n    <VStack gap={12}>\n      <Text>\n        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n        been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n        galley of type and scrambled it to make a type specimen book. It has survived not only five\n        centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum\n        passages, and more recently with desktop publishing software like Aldus PageMaker including\n        versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will\n        be distracted by the readable content of a page when looking at its layout. The point of\n        using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed\n        to using 'Content here, content here', making it look like readable English. Many desktop\n        publishing packages and web page editors now use Lorem Ipsum as their default model text,\n        and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various\n        versions have evolved over the years, sometimes by accident, sometimes on purpose (injected\n        humour and the like).\n      </Text>\n\n      <Dialog overlay={false}>\n        <DialogTrigger asChild>\n          <Button>Open without Overlay</Button>\n        </DialogTrigger>\n\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>No Overlay</DialogTitle>\n          </DialogHeader>\n\n          <DialogBody>\n            <div className='py-12'>\n              <p>This dialog has no overlay backdrop.</p>\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n\n      <Text>\n        Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text.\n        It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years\n        old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up\n        one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going\n        through the cites of the word in classical literature, discovered the undoubtable source.\n        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The\n        Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the\n        theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem\n        ipsum dolor sit amet..\", comes from a line in section 1.10.32. The standard chunk of Lorem\n        Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and\n        1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact\n        original form, accompanied by English versions from the 1914 translation by H. Rackham.\n      </Text>\n    </VStack>\n  );\n}",
+          "description": "Without overlay"
+        },
+        {
+          "name": "WithNested",
+          "code": "() => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>1st level dialog</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>[Level 1] Main Dialog</DialogTitle>\n\n          {/* Level 2 dialog */}\n          <Dialog>\n            <DialogTrigger asChild>\n              <Button variant='ghost' color='neutral' size='small'>\n                <PanelRight />\n                2nd level dialog\n              </Button>\n            </DialogTrigger>\n\n            <DialogContent>\n              <DialogHeader>\n                <DialogTitle>[Level 2] Detail View</DialogTitle>\n                {/* Level 3 dialog */}\n                <Dialog>\n                  <DialogTrigger asChild>\n                    <Button variant='ghost' color='neutral' size='small'>\n                      <PanelRight />\n                      3nd level dialog\n                    </Button>\n                  </DialogTrigger>\n\n                  <DialogContent>\n                    <DialogHeader>\n                      <DialogTitle>[Level 3] Deep Nested</DialogTitle>\n                    </DialogHeader>\n\n                    <DialogBody>\n                      <VStack gap={12} align='start'>\n                        <Text>Level 3! Unlimited nesting works.</Text>\n                        <ContentPlaceholder height={150} />\n                      </VStack>\n                    </DialogBody>\n\n                    <DialogFooter>\n                      <DialogClose asChild>\n                        <Button size='large' variant='ghost' color='neutral'>\n                          Back\n                        </Button>\n                      </DialogClose>\n                    </DialogFooter>\n                  </DialogContent>\n                </Dialog>\n              </DialogHeader>\n\n              <DialogBody>\n                <VStack gap={12} align='start'>\n                  <Text>This is Level 2 dialog. Main dialog is pushed back.</Text>\n\n                  <ContentPlaceholder height={150} />\n                </VStack>\n              </DialogBody>\n\n              <DialogFooter>\n                <DialogClose asChild>\n                  <Button variant='ghost' color='neutral' size='large'>\n                    Back\n                  </Button>\n                </DialogClose>\n                <Button variant='primary' color='brand' size='large'>\n                  Apply\n                </Button>\n              </DialogFooter>\n            </DialogContent>\n          </Dialog>\n        </DialogHeader>\n\n        <DialogBody>\n          <VStack gap={12} align='start'>\n            <Text>This is Level 1 dialog. Click above to open nested dialogs:</Text>\n\n            <ContentPlaceholder height={150} />\n          </VStack>\n        </DialogBody>\n\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Cancel\n            </Button>\n          </DialogClose>\n          <Button variant='primary' color='brand' size='large'>\n            Save\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
+          "description": "Nested dialogs with push-back effect"
+        },
+        {
+          "name": "WithTabs",
+          "code": "() => {\n  const [activeTab, setActiveTab] = useState('tab1');\n\n  return (\n    <Dialog width={960}>\n      <DialogTrigger asChild>\n        <Button>Open Dialog with Tabs</Button>\n      </DialogTrigger>\n\n      <DialogContent>\n        <Tabs value={activeTab} onChange={setActiveTab} asChild>\n          <DialogHeader>\n            <DialogTitle>Tabbed Content</DialogTitle>\n          </DialogHeader>\n\n          <TabsList>\n            <TabsTrigger value='tab1'>General</TabsTrigger>\n            <TabsTrigger value='tab2'>Settings</TabsTrigger>\n            <TabsTrigger value='tab3'>Advanced</TabsTrigger>\n          </TabsList>\n\n          <DialogBody>\n            <div className='pt-12'>\n              <TabsContent value='tab1'>\n                <h3 className='text-lg font-medium mb-8'>General Settings</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab2'>\n                <h3 className='text-lg font-medium mb-8'>Configuration</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab3'>\n                <h3 className='text-lg font-medium mb-8'>Advanced Options</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n            </div>\n          </DialogBody>\n        </Tabs>\n\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Cancel\n            </Button>\n          </DialogClose>\n          <Button variant='primary' color='brand' size='large'>\n            Apply Settings\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}",
+          "description": "With tabs"
+        }
+      ]
+    },
+    {
+      "name": "Drawer",
+      "importPath": "@wallarm-org/design-system/Drawer",
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Controlled open state"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Whether ESC key closes the drawer (default: true)",
+          "defaultValue": "true"
+        },
+        {
+          "name": "closeOnOutsideClick",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Whether clicking outside closes the drawer (default: true)",
+          "defaultValue": "true"
+        },
+        {
+          "name": "overlay",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Overlay visibility (default: true)",
+          "defaultValue": "true"
+        },
+        {
+          "name": "width",
+          "type": "string | number | undefined",
+          "required": false,
+          "description": "Width - number for pixels, string for percentage (e.g., \"50%\")"
+        },
+        {
+          "name": "minWidth",
+          "type": "number | undefined",
+          "required": false,
+          "description": "Minimum width in pixels"
+        },
+        {
+          "name": "maxWidth",
+          "type": "number | undefined",
+          "required": false,
+          "description": "Maximum width in pixels"
+        }
+      ],
+      "variants": [
+        {
+          "name": "isResizing",
+          "options": [
+            "true"
+          ]
+        }
+      ],
+      "subComponents": [
+        {
+          "name": "DrawerBody",
+          "props": []
+        },
+        {
+          "name": "DrawerClose",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Render as child component",
+              "defaultValue": "false"
+            }
+          ]
+        },
+        {
+          "name": "DrawerContent",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false
+            }
+          ]
+        },
+        {
+          "name": "DrawerFooter",
+          "props": []
+        },
+        {
+          "name": "DrawerFooterControls",
+          "props": [
+            {
+              "name": "placement",
+              "type": "{ left: string; right: string; }",
+              "required": false,
+              "defaultValue": "right"
+            }
+          ]
+        },
+        {
+          "name": "DrawerHeader",
+          "props": []
+        },
+        {
+          "name": "DrawerPositioner",
+          "props": [
+            {
+              "name": "isResizing",
+              "type": "boolean",
+              "required": true
+            }
+          ]
+        },
+        {
+          "name": "DrawerTitle",
+          "props": []
+        },
+        {
+          "name": "DrawerTrigger",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Render as child component",
+              "defaultValue": "false"
+            }
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer Title</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Basic uncontrolled drawer"
+        },
+        {
+          "name": "WithFooter",
+          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer's title</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n        <DrawerFooter>\n          <DrawerFooterControls>\n            <Button variant='ghost' color='neutral' size='large'>\n              Button\n            </Button>\n            <Button variant='primary' color='brand' size='large'>\n              Button\n            </Button>\n          </DrawerFooterControls>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Minimal example"
+        },
+        {
+          "name": "WithFooterLeftActions",
+          "code": "() => (\n  <Drawer>\n    <DrawerTrigger asChild>\n      <Button>Open with Footer Actions</Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader>\n        <DrawerTitle>Footer with Left Actions</DrawerTitle>\n      </DrawerHeader>\n\n      <DrawerBody>\n        <ContentPlaceholder fillHeight />\n      </DrawerBody>\n\n      <DrawerFooter>\n        <DrawerFooterControls placement='left'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Remember choice</SwitchLabel>\n          </Switch>\n        </DrawerFooterControls>\n\n        <DrawerClose asChild>\n          <Button variant='ghost' color='neutral' size='large'>\n            Cancel\n          </Button>\n        </DrawerClose>\n        <Button variant='primary' color='brand' size='large'>\n          Apply\n        </Button>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n)",
+          "description": "With footer left actions"
+        },
+        {
+          "name": "Sizes",
+          "code": "() => (\n  <HStack gap={8} justify='center'>\n    <Drawer width={DRAWER_SIZES.small}>\n      <DrawerTrigger asChild>\n        <Button>Open Small ({DRAWER_SIZES.small}px)</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Small Drawer ({DRAWER_SIZES.small}px)</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n\n    <Drawer width={DRAWER_SIZES.medium}>\n      <DrawerTrigger asChild>\n        <Button>Open Medium ({DRAWER_SIZES.medium}px)</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Medium Drawer ({DRAWER_SIZES.medium}px)</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n\n    <Drawer width={DRAWER_SIZES.large}>\n      <DrawerTrigger asChild>\n        <Button>Open Large ({DRAWER_SIZES.large}px)</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Large Drawer ({DRAWER_SIZES.large}px)</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  </HStack>\n)",
+          "description": "Drawer with different sizes - Small"
+        },
+        {
+          "name": "CustomSizes",
+          "code": "() => {\n  return (\n    <HStack gap={8} justify='center'>\n      <Drawer width='50%'>\n        <DrawerTrigger asChild>\n          <Button>50% Width</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>50% Width Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p>This drawer takes 50% of the viewport width.</p>\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width={1000}>\n        <DrawerTrigger asChild>\n          <Button>1000px Width</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>1000px Width Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p>This drawer has a fixed width of 1000px.</p>\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </HStack>\n  );\n}",
+          "description": "Custom width with percentage"
+        },
+        {
+          "name": "Resizable",
+          "code": "() => {\n  return (\n    <VStack gap={12}>\n      <Drawer width={800}>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (as number)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>Drag the left edge to resize this drawer.</p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width='900px'>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (900px)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer with \"900px\" width</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>Width is set as \"900px\" string. Drag the left edge to resize.</p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n\n      <Drawer width='50%'>\n        <DrawerTrigger asChild>\n          <Button>Open Resizable Drawer (50%)</Button>\n        </DrawerTrigger>\n\n        <DrawerContent>\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Resizable Drawer with 50% width</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>\n                Width is set as \"50%\". Drag the left edge to resize - it will convert to pixels.\n              </p>\n              <ContentPlaceholder height={300} />\n            </div>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </VStack>\n  );\n}",
+          "description": "Resizable drawer"
+        },
+        {
+          "name": "Scrollable",
+          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer with Scroll</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Scrollable Content</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <div className='flex flex-col gap-16 py-12'>\n            {Array.from({ length: 20 }).map((_, i) => (\n              <ContentPlaceholder key={i} height={100} />\n            ))}\n          </div>\n        </DrawerBody>\n\n        <DrawerFooter>\n          <DrawerClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Close\n            </Button>\n          </DrawerClose>\n          <Button variant='primary' color='brand' size='large'>\n            Confirm\n          </Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Drawer with scrollable content"
+        },
+        {
+          "name": "Controlled",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Controlled Drawer</Button>\n\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Controlled Drawer</DrawerTitle>\n          </DrawerHeader>\n\n          <DrawerBody>\n            <div className='py-12'>\n              <p className='mb-16'>This drawer is controlled externally.</p>\n              <ContentPlaceholder />\n            </div>\n          </DrawerBody>\n\n          <DrawerFooter>\n            <DrawerClose asChild>\n              <Button variant='ghost' color='neutral' size='large'>\n                Cancel\n              </Button>\n            </DrawerClose>\n            <Button variant='primary' color='brand' size='large'>\n              Save Changes\n            </Button>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </>\n  );\n}",
+          "description": "Controlled drawer with external state"
+        },
+        {
+          "name": "NoClosableOnEsc",
+          "code": "() => {\n  return (\n    <Drawer closeOnEscape={false}>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Drawer Title</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <ContentPlaceholder fillHeight />\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "No closable on ESC"
+        },
+        {
+          "name": "NoOverlay",
+          "code": "() => {\n  return (\n    <Drawer overlay={false}>\n      <DrawerTrigger asChild>\n        <Button>Open without Overlay</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>No Overlay</DrawerTitle>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <div className='py-12'>\n            <p>This drawer has no overlay backdrop.</p>\n          </div>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Without overlay"
+        },
+        {
+          "name": "WithNested",
+          "code": "() => {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button>1st level drawer</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>[Level 1] Main Drawer</DrawerTitle>\n\n          {/* Level 2 drawer */}\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant='ghost' color='neutral' size='small'>\n                <PanelRight />\n                2nd level drawer\n              </Button>\n            </DrawerTrigger>\n\n            <DrawerContent>\n              <DrawerHeader>\n                <DrawerTitle>[Level 2] Detail View</DrawerTitle>\n                {/* Level 3 drawer */}\n                <Drawer>\n                  <DrawerTrigger asChild>\n                    <Button variant='ghost' color='neutral' size='small'>\n                      <PanelRight />\n                      3nd level drawer\n                    </Button>\n                  </DrawerTrigger>\n\n                  <DrawerContent>\n                    <DrawerHeader>\n                      <DrawerTitle>[Level 3] Deep Nested</DrawerTitle>\n                    </DrawerHeader>\n\n                    <DrawerBody>\n                      <VStack gap={12} align='start'>\n                        <Text>Level 3! Unlimited nesting works.</Text>\n                        <ContentPlaceholder height={150} />\n                      </VStack>\n                    </DrawerBody>\n\n                    <DrawerFooter>\n                      <DrawerClose asChild>\n                        <Button size='large' variant='ghost' color='neutral'>\n                          Back\n                        </Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              </DrawerHeader>\n\n              <DrawerBody>\n                <VStack gap={12} align='start'>\n                  <Text>\n                    This is Level 2 drawer. Main drawer is pushed back. You can go deeper:\n                  </Text>\n\n                  <ContentPlaceholder height={150} />\n                </VStack>\n              </DrawerBody>\n\n              <DrawerFooter>\n                <DrawerClose asChild>\n                  <Button variant='ghost' color='neutral' size='large'>\n                    Back\n                  </Button>\n                </DrawerClose>\n                <Button variant='primary' color='brand' size='large'>\n                  Apply\n                </Button>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <VStack gap={12} align='start'>\n            <Text>This is Level 1 drawer. Click below to open nested drawers:</Text>\n\n            <ContentPlaceholder height={300} />\n          </VStack>\n        </DrawerBody>\n\n        <DrawerFooter>\n          <DrawerClose asChild>\n            <Button variant='ghost' color='neutral' size='large'>\n              Cancel\n            </Button>\n          </DrawerClose>\n          <Button variant='primary' color='brand' size='large'>\n            Save\n          </Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Nested drawers with push-back effect"
+        },
+        {
+          "name": "WithTabs",
+          "code": "() => {\n  const [activeTab, setActiveTab] = useState('tab1');\n\n  return (\n    <Drawer width={960}>\n      <DrawerTrigger asChild>\n        <Button>Open Drawer with Tabs</Button>\n      </DrawerTrigger>\n\n      <DrawerContent>\n        <Tabs value={activeTab} onChange={setActiveTab} asChild>\n          <DrawerHeader>\n            <DrawerTitle>Tabbed Content</DrawerTitle>\n          </DrawerHeader>\n\n          <TabsList>\n            <TabsTrigger value='tab1'>General</TabsTrigger>\n            <TabsTrigger value='tab2'>Settings</TabsTrigger>\n            <TabsTrigger value='tab3'>Advanced</TabsTrigger>\n          </TabsList>\n\n          <DrawerBody>\n            <div className='pt-12'>\n              <TabsContent value='tab1'>\n                <h3 className='text-lg font-medium mb-8'>General Settings</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab2'>\n                <h3 className='text-lg font-medium mb-8'>Configuration</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n              <TabsContent value='tab3'>\n                <h3 className='text-lg font-medium mb-8'>Advanced Options</h3>\n                <ContentPlaceholder height={300} />\n              </TabsContent>\n            </div>\n          </DrawerBody>\n\n          <DrawerFooter>\n            <DrawerClose asChild>\n              <Button variant='ghost' color='neutral' size='large'>\n                Cancel\n              </Button>\n            </DrawerClose>\n            <Button variant='primary' color='brand' size='large'>\n              Apply Settings\n            </Button>\n          </DrawerFooter>\n        </Tabs>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "With tabs"
+        }
+      ]
+    },
+    {
+      "name": "DropdownMenu",
+      "importPath": "@wallarm-org/design-system/DropdownMenu",
+      "props": [],
+      "variants": [
+        {
+          "name": "variant",
+          "options": [
+            "default",
+            "brand",
+            "destructive"
+          ]
+        },
+        {
+          "name": "inset",
+          "options": [
+            "true"
+          ]
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "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>\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>\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>\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)"
+        },
+        {
+          "name": "WithFooter",
+          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuItem>Filter A</DropdownMenuItem>\n      <DropdownMenuItem>Filter B</DropdownMenuItem>\n      <DropdownMenuItem>Filter C</DropdownMenuItem>\n      <DropdownMenuItem>Filter D</DropdownMenuItem>\n      <DropdownMenuFooter>\n        <span>Footer is WIP Hotkey</span>\n        <span className='flex items-center gap-8'>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>⌘</Kbd>\n          </KbdGroup>\n        </span>\n      </DropdownMenuFooter>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "importPath": "@wallarm-org/design-system/Field",
+      "props": [],
+      "variants": [
+        {
+          "name": "orientation",
+          "options": [
+            "vertical",
+            "horizontal",
+            "responsive"
+          ],
+          "defaultValue": "vertical"
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => {\n  const monthsCollection = createListCollection({\n    items: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],\n  });\n\n  const yearsCollection = createListCollection({\n    items: ['2025', '2026', '2027', '2028', '2029'],\n  });\n\n  return (\n    <div className='min-w-320'>\n      <form>\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Payment Method</FieldLegend>\n\n            <FieldDescription>All transactions are secure and encrypted</FieldDescription>\n\n            <FieldGroup>\n              <Field>\n                <FieldLabel>Name on Card</FieldLabel>\n                <Input placeholder='Evil Rabbit' />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor='checkout-7j9-card-number-uw1'>Card Number</FieldLabel>\n                <Input\n                  id='checkout-7j9-card-number-uw1'\n                  placeholder='1234 5678 9012 3456'\n                  required\n                />\n                <FieldDescription>Enter your 16-digit card number</FieldDescription>\n              </Field>\n\n              <HStack>\n                <Field>\n                  <FieldLabel>Month</FieldLabel>\n                  <Select collection={monthsCollection}>\n                    <SelectButton placeholder='Month' />\n                    <SelectPositioner>\n                      <SelectContent>\n                        {monthsCollection.items.map(month => (\n                          <SelectOption key={month} item={month}>\n                            <SelectOptionText>{month}</SelectOptionText>\n                          </SelectOption>\n                        ))}\n                      </SelectContent>\n                    </SelectPositioner>\n                  </Select>\n                </Field>\n\n                <Field>\n                  <FieldLabel>Year</FieldLabel>\n\n                  <Select collection={yearsCollection}>\n                    <SelectButton placeholder='Year' />\n\n                    <SelectPositioner>\n                      <SelectContent>\n                        {yearsCollection.items.map(year => (\n                          <SelectOption key={year} item={year}>\n                            <SelectOptionText>{year}</SelectOptionText>\n                          </SelectOption>\n                        ))}\n                      </SelectContent>\n                    </SelectPositioner>\n                  </Select>\n                </Field>\n\n                <Field>\n                  <FieldLabel>CVV</FieldLabel>\n                  <Input placeholder='123' required />\n                </Field>\n              </HStack>\n\n              <Field>\n                <FieldLabel>Amount</FieldLabel>\n                <NumberInput defaultValue='1000' />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <FieldSeparator />\n\n          <FieldSet>\n            <FieldLegend>Billing Address</FieldLegend>\n\n            <FieldDescription>\n              The billing address associated with your payment method\n            </FieldDescription>\n\n            <FieldGroup>\n              <Field orientation='horizontal'>\n                <Checkbox defaultChecked>\n                  <CheckboxIndicator />\n                  <CheckboxLabel>Same as shipping address</CheckboxLabel>\n                </Checkbox>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <FieldSeparator />\n\n          <FieldSet>\n            <FieldLegend>Subscription Plan</FieldLegend>\n\n            <FieldDescription>\n              Yearly and lifetime plans offer significant savings.\n            </FieldDescription>\n\n            <Field>\n              <RadioGroup defaultValue='monthly'>\n                <Radio value='monthly'>\n                  <RadioIndicator />\n                  <RadioLabel>Monthly ($9.99/month)</RadioLabel>\n                </Radio>\n                <Radio value='yearly'>\n                  <RadioIndicator />\n                  <RadioLabel>Yearly ($99.99/year)</RadioLabel>\n                </Radio>\n                <Radio value='lifetime'>\n                  <RadioIndicator />\n                  <RadioLabel>Lifetime ($299.99)</RadioLabel>\n                </Radio>\n              </RadioGroup>\n            </Field>\n          </FieldSet>\n\n          <FieldSeparator />\n\n          <FieldSet>\n            <FieldGroup>\n              <Field orientation='horizontal'>\n                <Switch>\n                  <SwitchControl />\n                  <SwitchLabel>Notice when delivered</SwitchLabel>\n                </Switch>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <FieldSet>\n            <FieldGroup>\n              <Field>\n                <FieldLabel>Comments</FieldLabel>\n                <Textarea placeholder='Add any additional comments' />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n\n          <Field orientation='horizontal'>\n            <Button type='submit'>Submit</Button>\n\n            <Button variant='outline' color='neutral' type='button'>\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  );\n}"
+        },
+        {
+          "name": "Inputs",
+          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldGroup>\n        <Field>\n          <FieldLabel>Username</FieldLabel>\n          <Input type='text' placeholder='Max Leiter' />\n          <FieldDescription>Choose a unique username for your account.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel>Password</FieldLabel>\n          <FieldDescription>Must be at least 8 characters long.</FieldDescription>\n          <Input type='password' placeholder='********' />\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
+        },
+        {
+          "name": "Textareas",
+          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldGroup>\n        <Field>\n          <FieldLabel>Feedback</FieldLabel>\n          <Textarea placeholder='Your feedback helps us improve...' rows={4} />\n          <FieldDescription>Share your thoughts about our service.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
+        },
+        {
+          "name": "Fieldset",
+          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Profile</FieldLegend>\n      <FieldDescription>This appears on invoices and emails.</FieldDescription>\n\n      <FieldGroup>\n        <Field>\n          <FieldLabel>\n            Full name\n            <FieldAction>Generate new</FieldAction>\n          </FieldLabel>\n          <Input autoComplete='off' placeholder='Evil Rabbit' />\n          <FieldDescription>This appears on invoices and emails.</FieldDescription>\n        </Field>\n        <Field required>\n          <FieldLabel>\n            Username\n            <FieldIndicator />\n          </FieldLabel>\n          <Input placeholder='@paveldurov' autoComplete='off' error />\n          <FieldError>Choose another username.</FieldError>\n        </Field>\n        <Field>\n          <FieldLabel>\n            Message\n            <Tooltip>\n              <TooltipTrigger>\n                <Info />\n              </TooltipTrigger>\n              <TooltipContent>Additional information</TooltipContent>\n            </Tooltip>\n          </FieldLabel>\n          <Textarea placeholder='Your message...' />\n          <FieldDescription>Enter your message.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
+        },
+        {
+          "name": "Switches",
+          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Notification Settings</FieldLegend>\n      <FieldDescription>Manage your notification preferences.</FieldDescription>\n\n      <FieldGroup>\n        <Field orientation='horizontal'>\n          <Switch defaultChecked>\n            <SwitchControl />\n            <SwitchLabel>Email notifications</SwitchLabel>\n            <SwitchDescription>Receive email alerts for important updates.</SwitchDescription>\n          </Switch>\n        </Field>\n\n        <Field orientation='horizontal'>\n          <Switch>\n            <SwitchControl />\n            <SwitchLabel>Push notifications</SwitchLabel>\n            <SwitchDescription>Get push notifications on your device.</SwitchDescription>\n          </Switch>\n        </Field>\n\n        <Field orientation='horizontal'>\n          <Switch defaultChecked>\n            <SwitchControl />\n            <SwitchLabel>SMS notifications</SwitchLabel>\n            <SwitchDescription>Receive text messages for critical alerts.</SwitchDescription>\n          </Switch>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
+        },
+        {
+          "name": "Radios",
+          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Delivery Method</FieldLegend>\n      <FieldDescription>Choose how you want to receive your order.</FieldDescription>\n\n      <Field>\n        <RadioGroup defaultValue='standard'>\n          <Radio value='standard'>\n            <RadioIndicator />\n            <RadioLabel>Standard Shipping (5-7 days)</RadioLabel>\n          </Radio>\n          <Radio value='express'>\n            <RadioIndicator />\n            <RadioLabel>Express Shipping (2-3 days)</RadioLabel>\n          </Radio>\n          <Radio value='overnight'>\n            <RadioIndicator />\n            <RadioLabel>Overnight Shipping (1 day)</RadioLabel>\n          </Radio>\n          <Radio value='pickup'>\n            <RadioIndicator />\n            <RadioLabel>In-store Pickup</RadioLabel>\n          </Radio>\n        </RadioGroup>\n\n        <FieldDescription>Shipping costs will be calculated at checkout.</FieldDescription>\n      </Field>\n    </FieldSet>\n  </div>\n)"
+        },
+        {
+          "name": "Checkboxes",
+          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Terms and Preferences</FieldLegend>\n      <FieldDescription>Select which terms you agree to.</FieldDescription>\n\n      <FieldGroup>\n        <Field orientation='horizontal'>\n          <Checkbox defaultChecked>\n            <CheckboxIndicator />\n            <CheckboxLabel>I accept the terms and conditions</CheckboxLabel>\n            <CheckboxDescription>You must agree to our terms to continue.</CheckboxDescription>\n          </Checkbox>\n        </Field>\n        <Field orientation='horizontal'>\n          <Checkbox>\n            <CheckboxIndicator />\n            <CheckboxLabel>Subscribe to newsletter</CheckboxLabel>\n            <CheckboxDescription>Get weekly updates and exclusive offers.</CheckboxDescription>\n          </Checkbox>\n        </Field>\n        <Field orientation='horizontal'>\n          <Checkbox defaultChecked>\n            <CheckboxIndicator />\n            <CheckboxLabel>Share usage data</CheckboxLabel>\n            <CheckboxDescription>Help us improve our services.</CheckboxDescription>\n          </Checkbox>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
+        },
+        {
+          "name": "NumberInputs",
+          "code": "() => (\n  <div className='min-w-320'>\n    <FieldSet>\n      <FieldLegend>Product Details</FieldLegend>\n      <FieldDescription>Configure your product quantity and pricing.</FieldDescription>\n\n      <FieldGroup>\n        <Field>\n          <FieldLabel>Quantity</FieldLabel>\n          <NumberInput defaultValue='1' min={1} max={100} />\n          <FieldDescription>Choose between 1 and 100 items.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel>Price per unit</FieldLabel>\n          <NumberInput\n            defaultValue='99.99'\n            step={0.01}\n            formatOptions={{ style: 'currency', currency: 'USD' }}\n          />\n          <FieldDescription>Set the price for each unit.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel>Discount percentage</FieldLabel>\n          <NumberInput defaultValue='10' min={0} max={100} formatOptions={{ style: 'percent' }} />\n          <FieldDescription>Apply a discount from 0% to 100%.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </div>\n)"
+        },
+        {
+          "name": "Selects",
+          "code": "() => {\n  const countriesCollection = createListCollection({\n    items: [\n      { value: 'us', label: 'United States' },\n      { value: 'uk', label: 'United Kingdom' },\n      { value: 'ca', label: 'Canada' },\n      { value: 'au', label: 'Australia' },\n      { value: 'fr', label: 'France' },\n      { value: 'de', label: 'Germany' },\n      { value: 'jp', label: 'Japan' },\n    ],\n  });\n\n  const languagesCollection = createListCollection({\n    items: [\n      { value: 'en', label: 'English' },\n      { value: 'es', label: 'Spanish' },\n      { value: 'fr', label: 'French' },\n      { value: 'de', label: 'German' },\n      { value: 'it', label: 'Italian' },\n      { value: 'pt', label: 'Portuguese' },\n      { value: 'ru', label: 'Russian' },\n      { value: 'zh', label: 'Chinese' },\n      { value: 'ja', label: 'Japanese' },\n    ],\n  });\n\n  const timezonesCollection = createListCollection({\n    items: [\n      { value: 'utc-8', label: 'Pacific Time (UTC-8)' },\n      { value: 'utc-5', label: 'Eastern Time (UTC-5)' },\n      { value: 'utc', label: 'UTC' },\n      { value: 'utc+1', label: 'Central European Time (UTC+1)' },\n      { value: 'utc+8', label: 'China Standard Time (UTC+8)' },\n      { value: 'utc+9', label: 'Japan Standard Time (UTC+9)' },\n    ],\n  });\n\n  return (\n    <div className='min-w-320'>\n      <FieldSet>\n        <FieldLegend>Regional Settings</FieldLegend>\n        <FieldDescription>Configure your location and language preferences.</FieldDescription>\n\n        <FieldGroup>\n          <Field>\n            <FieldLabel>Country</FieldLabel>\n            <Select collection={countriesCollection}>\n              <SelectButton placeholder='Select a country' />\n              <SelectPositioner>\n                <SelectContent>\n                  {countriesCollection.items.map(country => (\n                    <SelectOption key={country.value} item={country}>\n                      <SelectOptionText>{country.label}</SelectOptionText>\n                    </SelectOption>\n                  ))}\n                </SelectContent>\n              </SelectPositioner>\n            </Select>\n            <FieldDescription>Your country determines available features.</FieldDescription>\n          </Field>\n          <Field>\n            <FieldLabel>Language</FieldLabel>\n            <Select collection={languagesCollection}>\n              <SelectButton placeholder='Select a language' />\n              <SelectPositioner>\n                <SelectContent>\n                  {languagesCollection.items.map(language => (\n                    <SelectOption key={language.value} item={language}>\n                      <SelectOptionText>{language.label}</SelectOptionText>\n                    </SelectOption>\n                  ))}\n                </SelectContent>\n              </SelectPositioner>\n            </Select>\n            <FieldDescription>Choose your preferred language.</FieldDescription>\n          </Field>\n          <Field>\n            <FieldLabel>Timezone</FieldLabel>\n            <Select collection={timezonesCollection}>\n              <SelectButton placeholder='Select a timezone' />\n              <SelectPositioner>\n                <SelectContent>\n                  {timezonesCollection.items.map(timezone => (\n                    <SelectOption key={timezone.value} item={timezone}>\n                      <SelectOptionText>{timezone.label}</SelectOptionText>\n                    </SelectOption>\n                  ))}\n                </SelectContent>\n              </SelectPositioner>\n            </Select>\n            <FieldDescription>All times will be displayed in this timezone.</FieldDescription>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </div>\n  );\n}"
+        }
+      ]
+    },
+    {
+      "name": "Flex",
+      "importPath": "@wallarm-org/design-system/Flex",
+      "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",
+          "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": "inline",
+          "type": "{ true: string; false: string; }",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "direction",
+          "type": "{ row: string; column: string; 'row-reverse': string; 'column-reverse': string; }",
+          "required": false,
+          "defaultValue": "row"
+        },
+        {
+          "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": "gap",
+          "type": "complex",
+          "required": false
+        },
+        {
+          "name": "grow",
+          "type": "{ true: string; false: string; }",
+          "required": false
+        },
+        {
+          "name": "shrink",
+          "type": "{ true: string; false: string; }",
+          "required": false
+        },
+        {
+          "name": "fullWidth",
+          "type": "{ true: string; }",
+          "required": false
+        },
+        {
+          "name": "basis",
+          "type": "complex",
+          "required": false
+        },
+        {
+          "name": "asChild",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        }
+      ],
+      "variants": [
+        {
+          "name": "inline",
+          "options": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "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": "gap",
+          "options": [
+            "1",
+            "2",
+            "4",
+            "6",
+            "8",
+            "12",
+            "16",
+            "20",
+            "24",
+            "28",
+            "32",
+            "36",
+            "40",
+            "44",
+            "48",
+            "56",
+            "64",
+            "80",
+            "96",
+            "112",
+            "128",
+            "144"
+          ]
+        },
+        {
+          "name": "grow",
+          "options": [
+            "true",
+            "false"
+          ]
         },
         {
           "name": "shrink",
@@ -9557,326 +10811,677 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "({ ...args }) => (\n  <Flex {...args} gap={4}>\n    <Box>A</Box>\n    <Box>B</Box>\n    <Box>C</Box>\n  </Flex>\n)"
+          "code": "({ ...args }) => (\n  <Flex {...args} gap={4}>\n    <Box>A</Box>\n    <Box>B</Box>\n    <Box>C</Box>\n  </Flex>\n)"
+        },
+        {
+          "name": "Direction",
+          "code": "({ ...args }) => (\n  <Flex direction='column' gap={8}>\n    <VStack>\n      <Heading>Row (default)</Heading>\n      <Flex {...args} direction='row' gap={2}>\n        <Box className='h-32 py-2 px-4 text-sm'>1</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>2</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>3</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Column</Heading>\n      <Flex {...args} direction='column' gap={2}>\n        <Box className='h-32 py-2 px-4 text-sm'>1</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>2</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>3</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Row Reverse</Heading>\n      <Flex {...args} direction='row-reverse' gap={2}>\n        <Box className='h-32 py-2 px-4 text-sm'>1</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>2</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>3</Box>\n      </Flex>\n    </VStack>\n  </Flex>\n)"
+        },
+        {
+          "name": "Alignment",
+          "code": "({ ...args }) => (\n  <Flex direction='column' gap={8}>\n    <VStack>\n      <Heading>Justify Start (default)</Heading>\n      <Flex {...args} justify='start' fullWidth>\n        <Box className='h-16 w-16 text-xs'>A</Box>\n        <Box className='h-16 w-16 text-xs'>B</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Justify Center</Heading>\n      <Flex {...args} justify='center' fullWidth>\n        <Box className='h-16 w-16 text-xs'>A</Box>\n        <Box className='h-16 w-16 text-xs'>B</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Justify Between</Heading>\n      <Flex {...args} justify='between' fullWidth>\n        <Box className='h-16 w-16 text-xs'>A</Box>\n        <Box className='h-16 w-16 text-xs'>B</Box>\n      </Flex>\n    </VStack>\n  </Flex>\n)"
+        },
+        {
+          "name": "Wrap",
+          "code": "({ ...args }) => (\n  <VStack>\n    <Heading>Wrap enabled (container: 24rem)</Heading>\n    <Flex {...args} wrap='wrap' gap={2} fullWidth>\n      {new Array(40).fill(null).map((_, index) => {\n        const key = `${index + 1}`;\n\n        return (\n          <Box className='h-20 w-20 text-xs' key={key}>\n            {key}\n          </Box>\n        );\n      })}\n    </Flex>\n  </VStack>\n)"
+        },
+        {
+          "name": "GrowShrink",
+          "code": "({ ...args }) => (\n  <Flex direction='column' gap={8}>\n    <VStack>\n      <Heading>Grow: items expand to fill space</Heading>\n      <Flex {...args} fullWidth>\n        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>\n        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>\n        <Box className='h-16 text-xs'>Fixed</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Shrink: items shrink when needed</Heading>\n      <Flex {...args} fullWidth>\n        <Box className='h-16 flex-shrink text-xs'>Shrinkable long content</Box>\n        <Box className='h-16 flex-shrink-0 text-xs'>No shrink</Box>\n      </Flex>\n    </VStack>\n  </Flex>\n)"
+        }
+      ]
+    },
+    {
+      "name": "Heading",
+      "importPath": "@wallarm-org/design-system/Heading",
+      "props": [
+        {
+          "name": "size",
+          "type": "{ sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; '4xl': string; '5xl': string; '6xl': string; '7xl': string; }",
+          "required": false,
+          "defaultValue": "xl"
+        },
+        {
+          "name": "weight",
+          "type": "{ light: string; regular: string; medium: string; bold: string; }",
+          "required": false,
+          "defaultValue": "bold"
+        },
+        {
+          "name": "color",
+          "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; inherit: string; }",
+          "required": false,
+          "defaultValue": "inherit"
+        },
+        {
+          "name": "align",
+          "type": "{ left: string; center: string; right: string; }",
+          "required": false
+        },
+        {
+          "name": "grow",
+          "type": "{ true: string; }",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "truncate",
+          "type": "{ true: string; }",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "lineClamp",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "as",
+          "type": "C | undefined",
+          "required": false,
+          "defaultValue": "h1"
+        }
+      ],
+      "variants": [
+        {
+          "name": "size",
+          "options": [
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "3xl",
+            "4xl",
+            "5xl",
+            "6xl",
+            "7xl"
+          ]
+        },
+        {
+          "name": "weight",
+          "options": [
+            "light",
+            "regular",
+            "medium",
+            "bold"
+          ]
+        },
+        {
+          "name": "color",
+          "options": [
+            "primary",
+            "primary-alt",
+            "secondary",
+            "secondary-alt",
+            "inherit"
+          ]
+        },
+        {
+          "name": "align",
+          "options": [
+            "left",
+            "center",
+            "right"
+          ]
+        },
+        {
+          "name": "grow",
+          "options": [
+            "true"
+          ]
+        },
+        {
+          "name": "truncate",
+          "options": [
+            "true"
+          ]
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "({ ...args }) => (\n  <Heading {...args}>Default Heading</Heading>\n)"
         },
         {
-          "name": "Direction",
-          "code": "({ ...args }) => (\n  <Flex direction='column' gap={8}>\n    <VStack>\n      <Heading>Row (default)</Heading>\n      <Flex {...args} direction='row' gap={2}>\n        <Box className='h-32 py-2 px-4 text-sm'>1</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>2</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>3</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Column</Heading>\n      <Flex {...args} direction='column' gap={2}>\n        <Box className='h-32 py-2 px-4 text-sm'>1</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>2</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>3</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Row Reverse</Heading>\n      <Flex {...args} direction='row-reverse' gap={2}>\n        <Box className='h-32 py-2 px-4 text-sm'>1</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>2</Box>\n        <Box className='h-32 py-2 px-4 text-sm'>3</Box>\n      </Flex>\n    </VStack>\n  </Flex>\n)"
+          "name": "Sizes",
+          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} size='sm'>\n      Small Heading\n    </Heading>\n    <Heading {...args} size='md'>\n      Medium Heading\n    </Heading>\n    <Heading {...args} size='lg'>\n      Large Heading\n    </Heading>\n    <Heading {...args} size='xl'>\n      Extra Large Heading\n    </Heading>\n    <Heading {...args} size='2xl'>\n      2XL Heading\n    </Heading>\n    <Heading {...args} size='3xl'>\n      3XL Heading\n    </Heading>\n    <Heading {...args} size='4xl'>\n      4XL Heading\n    </Heading>\n    <Heading {...args} size='5xl'>\n      5XL Heading\n    </Heading>\n    <Heading {...args} size='6xl'>\n      6XL Heading\n    </Heading>\n    <Heading {...args} size='7xl'>\n      7XL Heading\n    </Heading>\n  </VStack>\n)"
         },
         {
-          "name": "Alignment",
-          "code": "({ ...args }) => (\n  <Flex direction='column' gap={8}>\n    <VStack>\n      <Heading>Justify Start (default)</Heading>\n      <Flex {...args} justify='start' fullWidth>\n        <Box className='h-16 w-16 text-xs'>A</Box>\n        <Box className='h-16 w-16 text-xs'>B</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Justify Center</Heading>\n      <Flex {...args} justify='center' fullWidth>\n        <Box className='h-16 w-16 text-xs'>A</Box>\n        <Box className='h-16 w-16 text-xs'>B</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Justify Between</Heading>\n      <Flex {...args} justify='between' fullWidth>\n        <Box className='h-16 w-16 text-xs'>A</Box>\n        <Box className='h-16 w-16 text-xs'>B</Box>\n      </Flex>\n    </VStack>\n  </Flex>\n)"
+          "name": "Weights",
+          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} size='3xl' weight='light'>\n      Light Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='regular'>\n      Regular Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='medium'>\n      Medium Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='bold'>\n      Bold Weight Heading\n    </Heading>\n  </VStack>\n)"
         },
         {
-          "name": "Wrap",
-          "code": "({ ...args }) => (\n  <VStack>\n    <Heading>Wrap enabled (container: 24rem)</Heading>\n    <Flex {...args} wrap='wrap' gap={2} fullWidth>\n      {new Array(40).fill(null).map((_, index) => {\n        const key = `${index + 1}`;\n\n        return (\n          <Box className='h-20 w-20 text-xs' key={key}>\n            {key}\n          </Box>\n        );\n      })}\n    </Flex>\n  </VStack>\n)"
+          "name": "AsChild",
+          "code": "({ ...args }) => (\n  <Heading {...args} size='4xl' weight='bold' asChild>\n    <h2>Custom H2 Element with AsChild</h2>\n  </Heading>\n)"
         },
         {
-          "name": "GrowShrink",
-          "code": "({ ...args }) => (\n  <Flex direction='column' gap={8}>\n    <VStack>\n      <Heading>Grow: items expand to fill space</Heading>\n      <Flex {...args} fullWidth>\n        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>\n        <Box className='h-16 flex-1 text-xs'>Flex-1</Box>\n        <Box className='h-16 text-xs'>Fixed</Box>\n      </Flex>\n    </VStack>\n\n    <VStack>\n      <Heading>Shrink: items shrink when needed</Heading>\n      <Flex {...args} fullWidth>\n        <Box className='h-16 flex-shrink text-xs'>Shrinkable long content</Box>\n        <Box className='h-16 flex-shrink-0 text-xs'>No shrink</Box>\n      </Flex>\n    </VStack>\n  </Flex>\n)"
+          "name": "PolymorphicElements",
+          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} as='h1' size='4xl'>\n      H1 Heading\n    </Heading>\n    <Heading {...args} as='h2' size='3xl'>\n      H2 Heading\n    </Heading>\n    <Heading {...args} as='h3' size='2xl'>\n      H3 Heading\n    </Heading>\n    <Heading {...args} as='h4' size='xl'>\n      H4 Heading\n    </Heading>\n    <Heading {...args} as='h5' size='lg'>\n      H5 Heading\n    </Heading>\n    <Heading {...args} as='h6' size='md'>\n      H6 Heading\n    </Heading>\n  </VStack>\n)"
+        },
+        {
+          "name": "AsSpan",
+          "code": "({ ...args }) => (\n  <Text>\n    This is a paragraph with{' '}\n    <Heading {...args} as='span' size='lg' weight='bold'>\n      inline heading text\n    </Heading>{' '}\n    using span element.\n  </Text>\n)"
+        },
+        {
+          "name": "AsDiv",
+          "code": "({ ...args }) => (\n  <Heading {...args} as='div' size='2xl' weight='medium'>\n    This heading is rendered as a div element\n  </Heading>\n)"
         }
       ]
     },
     {
-      "name": "Heading",
-      "importPath": "@wallarm-org/design-system/Heading",
+      "name": "Input",
+      "importPath": "@wallarm-org/design-system/Input",
       "props": [
         {
-          "name": "size",
-          "type": "{ sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; '4xl': string; '5xl': string; '6xl': string; '7xl': string; }",
-          "required": false,
-          "defaultValue": "xl"
+          "name": "accept",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "weight",
-          "type": "{ light: string; regular: string; medium: string; bold: string; }",
+          "name": "alt",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoComplete",
+          "type": "HTMLInputAutoCompleteAttribute | undefined",
+          "required": false
+        },
+        {
+          "name": "capture",
+          "type": "boolean | \"user\" | \"environment\" | undefined",
+          "required": false
+        },
+        {
+          "name": "checked",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean | undefined",
           "required": false,
-          "defaultValue": "bold"
+          "defaultValue": "false"
+        },
+        {
+          "name": "form",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "formAction",
+          "type": "string | ((formData: FormData) => void | Promise<void>) | undefined",
+          "required": false
+        },
+        {
+          "name": "formEncType",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "formMethod",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "formNoValidate",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "formTarget",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "string | number | undefined",
+          "required": false
+        },
+        {
+          "name": "list",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "string | number | undefined",
+          "required": false
+        },
+        {
+          "name": "maxLength",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "string | number | undefined",
+          "required": false
+        },
+        {
+          "name": "minLength",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "multiple",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "pattern",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "required",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "src",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "step",
+          "type": "string | number | undefined",
+          "required": false
+        },
+        {
+          "name": "type",
+          "type": "HTMLInputTypeAttribute | undefined",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "width",
+          "type": "string | 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\" | \"on\" | (string & {}) | \"none\" | \"sentences\" | \"words\" | \"characters\" | 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": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
+          "required": false
+        },
+        {
+          "name": "hidden",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "color",
-          "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; inherit: string; }",
-          "required": false,
-          "defaultValue": "inherit"
+          "name": "id",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "align",
-          "type": "{ left: string; center: string; right: string; }",
+          "name": "lang",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "grow",
-          "type": "{ true: string; }",
-          "required": false,
-          "defaultValue": "false"
+          "name": "nonce",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "truncate",
-          "type": "{ true: string; }",
-          "required": false,
-          "defaultValue": "false"
+          "name": "slot",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "asChild",
-          "type": "boolean | undefined",
-          "required": false,
-          "defaultValue": "false"
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
         },
         {
-          "name": "lineClamp",
+          "name": "tabIndex",
           "type": "number | undefined",
           "required": false
         },
         {
-          "name": "as",
-          "type": "C | undefined",
-          "required": false,
-          "defaultValue": "h1"
-        }
-      ],
-      "variants": [
-        {
-          "name": "size",
-          "options": [
-            "sm",
-            "md",
-            "lg",
-            "xl",
-            "2xl",
-            "3xl",
-            "4xl",
-            "5xl",
-            "6xl",
-            "7xl"
-          ]
+          "name": "title",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "weight",
-          "options": [
-            "light",
-            "regular",
-            "medium",
-            "bold"
-          ]
+          "name": "translate",
+          "type": "\"yes\" | \"no\" | undefined",
+          "required": false
         },
         {
-          "name": "color",
-          "options": [
-            "primary",
-            "primary-alt",
-            "secondary",
-            "secondary-alt",
-            "inherit"
-          ]
+          "name": "radioGroup",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "align",
-          "options": [
-            "left",
-            "center",
-            "right"
-          ]
+          "name": "role",
+          "type": "AriaRole | undefined",
+          "required": false
         },
         {
-          "name": "grow",
-          "options": [
-            "true"
-          ]
+          "name": "about",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "truncate",
-          "options": [
-            "true"
-          ]
-        }
-      ],
-      "subComponents": [],
-      "examples": [
-        {
-          "name": "Basic",
-          "code": "({ ...args }) => (\n  <Heading {...args}>Default Heading</Heading>\n)"
+          "name": "content",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "Sizes",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} size='sm'>\n      Small Heading\n    </Heading>\n    <Heading {...args} size='md'>\n      Medium Heading\n    </Heading>\n    <Heading {...args} size='lg'>\n      Large Heading\n    </Heading>\n    <Heading {...args} size='xl'>\n      Extra Large Heading\n    </Heading>\n    <Heading {...args} size='2xl'>\n      2XL Heading\n    </Heading>\n    <Heading {...args} size='3xl'>\n      3XL Heading\n    </Heading>\n    <Heading {...args} size='4xl'>\n      4XL Heading\n    </Heading>\n    <Heading {...args} size='5xl'>\n      5XL Heading\n    </Heading>\n    <Heading {...args} size='6xl'>\n      6XL Heading\n    </Heading>\n    <Heading {...args} size='7xl'>\n      7XL Heading\n    </Heading>\n  </VStack>\n)"
+          "name": "datatype",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "Weights",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} size='3xl' weight='light'>\n      Light Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='regular'>\n      Regular Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='medium'>\n      Medium Weight Heading\n    </Heading>\n    <Heading {...args} size='3xl' weight='bold'>\n      Bold Weight Heading\n    </Heading>\n  </VStack>\n)"
+          "name": "inlist",
+          "type": "any",
+          "required": false
         },
         {
-          "name": "AsChild",
-          "code": "({ ...args }) => (\n  <Heading {...args} size='4xl' weight='bold' asChild>\n    <h2>Custom H2 Element with AsChild</h2>\n  </Heading>\n)"
+          "name": "prefix",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "PolymorphicElements",
-          "code": "({ ...args }) => (\n  <VStack align='start'>\n    <Heading {...args} as='h1' size='4xl'>\n      H1 Heading\n    </Heading>\n    <Heading {...args} as='h2' size='3xl'>\n      H2 Heading\n    </Heading>\n    <Heading {...args} as='h3' size='2xl'>\n      H3 Heading\n    </Heading>\n    <Heading {...args} as='h4' size='xl'>\n      H4 Heading\n    </Heading>\n    <Heading {...args} as='h5' size='lg'>\n      H5 Heading\n    </Heading>\n    <Heading {...args} as='h6' size='md'>\n      H6 Heading\n    </Heading>\n  </VStack>\n)"
+          "name": "property",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "AsSpan",
-          "code": "({ ...args }) => (\n  <Text>\n    This is a paragraph with{' '}\n    <Heading {...args} as='span' size='lg' weight='bold'>\n      inline heading text\n    </Heading>{' '}\n    using span element.\n  </Text>\n)"
+          "name": "rel",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "AsDiv",
-          "code": "({ ...args }) => (\n  <Heading {...args} as='div' size='2xl' weight='medium'>\n    This heading is rendered as a div element\n  </Heading>\n)"
-        }
-      ]
-    },
-    {
-      "name": "Input",
-      "importPath": "@wallarm-org/design-system/Input",
-      "props": [
-        {
-          "name": "accept",
+          "name": "resource",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "alt",
+          "name": "rev",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "autoComplete",
-          "type": "HTMLInputAutoCompleteAttribute | undefined",
+          "name": "typeof",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "capture",
-          "type": "boolean | \"user\" | \"environment\" | undefined",
+          "name": "vocab",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "checked",
-          "type": "boolean | undefined",
+          "name": "autoCorrect",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "disabled",
-          "type": "boolean | undefined",
-          "required": false,
-          "defaultValue": "false"
+          "name": "autoSave",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "form",
+          "name": "color",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "formAction",
-          "type": "string | ((formData: FormData) => void | Promise<void>) | undefined",
+          "name": "itemProp",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "formEncType",
-          "type": "string | undefined",
+          "name": "itemScope",
+          "type": "boolean | undefined",
           "required": false
         },
         {
-          "name": "formMethod",
+          "name": "itemType",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "formNoValidate",
-          "type": "boolean | undefined",
+          "name": "itemID",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "formTarget",
+          "name": "itemRef",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "height",
-          "type": "string | number | undefined",
+          "name": "results",
+          "type": "number | undefined",
           "required": false
         },
         {
-          "name": "list",
+          "name": "security",
           "type": "string | undefined",
           "required": false
         },
         {
-          "name": "max",
-          "type": "string | number | undefined",
+          "name": "unselectable",
+          "type": "\"off\" | \"on\" | undefined",
           "required": false
         },
         {
-          "name": "maxLength",
-          "type": "number | undefined",
+          "name": "popover",
+          "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
           "required": false
         },
         {
-          "name": "min",
-          "type": "string | number | undefined",
+          "name": "popoverTargetAction",
+          "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
           "required": false
         },
         {
-          "name": "minLength",
-          "type": "number | undefined",
+          "name": "popoverTarget",
+          "type": "string | undefined",
           "required": false
         },
         {
-          "name": "multiple",
-          "type": "boolean | 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": "\"email\" | \"tel\" | \"search\" | \"text\" | \"url\" | \"none\" | \"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": "error",
+          "type": "{ true: string; false: string[]; }",
+          "required": false,
+          "defaultValue": "false"
+        }
+      ],
+      "variants": [
+        {
+          "name": "error",
+          "options": [
+            "true",
+            "false"
+          ]
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "<Input />"
         },
         {
-          "name": "name",
-          "type": "string | undefined",
-          "required": false
+          "name": "Focused",
+          "code": "<Input />"
         },
         {
-          "name": "pattern",
-          "type": "string | undefined",
-          "required": false
+          "name": "Disabled",
+          "code": "<Input disabled />"
         },
         {
-          "name": "placeholder",
-          "type": "string | undefined",
-          "required": false
+          "name": "WithValue",
+          "code": "<Input value=\"Some value...\" />"
         },
         {
-          "name": "readOnly",
-          "type": "boolean | undefined",
-          "required": false
-        },
+          "name": "WithError",
+          "code": "<Input error />"
+        }
+      ]
+    },
+    {
+      "name": "InputGroup",
+      "importPath": "@wallarm-org/design-system/InputGroup",
+      "props": [],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
         {
-          "name": "required",
-          "type": "boolean | undefined",
-          "required": false
+          "name": "Basic",
+          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon variant='outline'>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' value='wallarm/user-settings' />\n      <InputGroupAddon variant='outline' align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)"
         },
         {
-          "name": "size",
-          "type": "number | undefined",
-          "required": false
+          "name": "Disabled",
+          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' disabled />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' value='wallarm/user-settings' disabled />\n      <InputGroupAddon align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)"
         },
         {
-          "name": "src",
-          "type": "string | undefined",
-          "required": false
+          "name": "WithError",
+          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' error />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' value='wallarm/user-settings' error />\n      <InputGroupAddon align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)"
         },
         {
-          "name": "step",
-          "type": "string | number | undefined",
-          "required": false
+          "name": "WithLoader",
+          "code": "() => (\n  <InputGroup>\n    <InputGroupInput placeholder='Searching...' disabled />\n    <InputGroupAddon align='inline-end'>\n      <Loader size='md' />\n    </InputGroupAddon>\n  </InputGroup>\n)"
         },
         {
-          "name": "type",
-          "type": "HTMLInputTypeAttribute | undefined",
-          "required": false
+          "name": "WithKbd",
+          "code": "() => (\n  <InputGroup>\n    <InputGroupAddon>\n      <Search />\n    </InputGroupAddon>\n    <InputGroupInput placeholder='Search' />\n    <InputGroupAddon align='inline-end'>\n      <Kbd>⌘</Kbd>\n      <Kbd>K</Kbd>\n    </InputGroupAddon>\n  </InputGroup>\n)"
         },
         {
-          "name": "value",
-          "type": "string | number | readonly string[] | undefined",
-          "required": false
+          "name": "WithTooltip",
+          "code": "() => (\n  <InputGroup>\n    <InputGroupAddon>\n      <Search />\n    </InputGroupAddon>\n    <InputGroupInput placeholder='Enter' />\n    <InputGroupAddon align='inline-end'>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Info />\n        </TooltipTrigger>\n        <TooltipContent>Get more info</TooltipContent>\n      </Tooltip>\n    </InputGroupAddon>\n  </InputGroup>\n)"
         },
         {
-          "name": "width",
-          "type": "string | number | undefined",
-          "required": false
-        },
+          "name": "WithSelect",
+          "code": "() => {\n  const collection = createListCollection({\n    items: [\n      {\n        label: 'React',\n        value: 'react',\n        icon: LayoutGrid,\n        category: 'Frontend',\n      },\n      {\n        label: 'Vue',\n        value: 'vue',\n        icon: LayoutTemplate,\n        category: 'Frontend',\n      },\n      {\n        label: 'Angular',\n        value: 'angular',\n        icon: Search,\n        category: 'Frontend',\n      },\n    ],\n  });\n\n  return (\n    <VStack gap={12}>\n      <InputGroup>\n        <InputGroupAddon variant='outline'>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n\n        <InputGroupInput placeholder='Enter' />\n      </InputGroup>\n\n      <InputGroup>\n        <InputGroupInput placeholder='Enter' />\n        <InputGroupAddon align='inline-end' variant='outline'>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n      </InputGroup>\n\n      <InputGroup>\n        <InputGroupAddon>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n\n        <InputGroupInput placeholder='Enter' />\n      </InputGroup>\n\n      <InputGroup>\n        <InputGroupInput placeholder='Enter' />\n        <InputGroupAddon align='inline-end'>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n      </InputGroup>\n    </VStack>\n  );\n}"
+        }
+      ]
+    },
+    {
+      "name": "Ip",
+      "importPath": "@wallarm-org/design-system/Ip",
+      "props": [
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -9904,7 +11509,7 @@
         },
         {
           "name": "autoCapitalize",
-          "type": "\"off\" | \"on\" | (string & {}) | \"none\" | \"sentences\" | \"words\" | \"characters\" | undefined",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
           "required": false
         },
         {
@@ -10125,7 +11730,7 @@
         },
         {
           "name": "inputMode",
-          "type": "\"email\" | \"tel\" | \"search\" | \"text\" | \"url\" | \"none\" | \"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"
         },
@@ -10142,85 +11747,623 @@
           "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": "part",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        }
+      ],
+      "variants": [],
+      "subComponents": [
+        {
+          "name": "IpAddress",
+          "props": []
+        },
+        {
+          "name": "IpCountry",
+          "props": [
+            {
+              "name": "code",
+              "type": "\"AF\" | \"AX\" | \"AL\" | \"DZ\" | \"AS\" | \"AD\" | \"AO\" | \"AI\" | \"AG\" | \"AR\" | \"AM\" | \"AW\" | \"AU\" | \"AT\" | \"AZ\" | \"BS\" | \"BH\" | \"BD\" | \"BB\" | \"BY\" | \"BE\" | \"BZ\" | \"BJ\" | \"BM\" | \"BT\" | \"BO\" | \"BQ\" | \"BA\" | \"BW\" | \"BV\" | \"BR\" | \"IO\" | \"BN\" | \"BG\" | \"BF\" | \"BI\" | \"CV\" | \"KH\" | \"CM\" | \"CA\" | \"KY\" | \"CF\" | \"TD\" | \"CL\" | \"CN\" | \"CX\" | \"CC\" | \"CO\" | \"KM\" | \"CG\" | \"CD\" | \"CK\" | \"CR\" | \"CI\" | \"HR\" | \"CU\" | \"CW\" | \"CY\" | \"CZ\" | \"DK\" | \"DJ\" | \"DM\" | \"DO\" | \"DNO\" | \"EC\" | \"EG\" | \"SV\" | \"GQ\" | \"ER\" | \"EE\" | \"ET\" | \"FK\" | \"FO\" | \"FJ\" | \"FI\" | \"FR\" | \"GF\" | \"PF\" | \"TF\" | \"GA\" | \"GM\" | \"GE\" | \"DE\" | \"GH\" | \"GI\" | \"GR\" | \"GL\" | \"GD\" | \"GP\" | \"GU\" | \"GT\" | \"GG\" | \"GN\" | \"GW\" | \"GY\" | \"HT\" | \"HM\" | \"VA\" | \"HN\" | \"HK\" | \"HU\" | \"IS\" | \"IN\" | \"ID\" | \"IR\" | \"IQ\" | \"IE\" | \"IM\" | \"IL\" | \"IT\" | \"JM\" | \"JP\" | \"JE\" | \"JO\" | \"KZ\" | \"KE\" | \"KI\" | \"KP\" | \"KR\" | \"KW\" | \"KG\" | \"LA\" | \"LV\" | \"LB\" | \"LS\" | \"LR\" | \"LY\" | \"LI\" | \"LT\" | \"LHO\" | \"LU\" | \"MO\" | \"MK\" | \"MG\" | \"MW\" | \"MY\" | \"MV\" | \"ML\" | \"MT\" | \"MH\" | \"MQ\" | \"MR\" | \"MU\" | \"YT\" | \"MX\" | \"FM\" | \"MD\" | \"MC\" | \"MN\" | \"ME\" | \"MS\" | \"MA\" | \"MZ\" | \"MM\" | \"NA\" | \"NR\" | \"NP\" | \"NL\" | \"NC\" | \"NZ\" | \"NI\" | \"NE\" | \"NG\" | \"NU\" | \"NF\" | \"MP\" | \"NO\" | \"OM\" | \"PK\" | \"PW\" | \"PS\" | \"PA\" | \"PG\" | \"PY\" | \"PE\" | \"PH\" | \"PN\" | \"PL\" | \"PT\" | \"PR\" | \"QA\" | \"ROC\" | \"RE\" | \"RO\" | \"RU\" | \"RW\" | \"BL\" | \"SH\" | \"KN\" | \"LC\" | \"MF\" | \"PM\" | \"VC\" | \"WS\" | \"SM\" | \"ST\" | \"SA\" | \"SN\" | \"RS\" | \"SC\" | \"SL\" | \"SG\" | \"SX\" | \"SK\" | \"SI\" | \"SB\" | \"SO\" | \"ZA\" | \"GS\" | \"SS\" | \"ES\" | \"LK\" | \"SD\" | \"SR\" | \"SJ\" | \"SZ\" | \"SE\" | \"CH\" | \"SY\" | \"TW\" | \"TJ\" | \"TZ\" | \"TH\" | \"TL\" | \"TG\" | \"TK\" | \"TO\" | \"TT\" | \"TN\" | \"TR\" | \"TM\" | \"TC\" | \"TV\" | \"UG\" | \"UA\" | \"AE\" | \"GB\" | \"US\" | \"UY\" | \"UZ\" | \"VU\" | \"VE\" | \"VN\" | \"VG\" | \"VI\" | \"WF\" | \"EH\" | \"YE\" | \"ZM\" | \"ZW\"",
+              "required": true
+            }
+          ]
+        },
+        {
+          "name": "IpList",
+          "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": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"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": "\"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": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "defaultValue": "false"
+            }
+          ]
+        },
+        {
+          "name": "IpPort",
+          "props": []
         },
         {
-          "name": "error",
-          "type": "{ true: string; false: string[]; }",
-          "required": false,
-          "defaultValue": "false"
-        }
-      ],
-      "variants": [
-        {
-          "name": "error",
-          "options": [
-            "true",
-            "false"
+          "name": "IpProvider",
+          "props": [
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "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",
+              "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": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"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": "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": "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": "asChild",
+              "type": "boolean | undefined",
+              "required": false
+            }
           ]
         }
       ],
-      "subComponents": [],
-      "examples": [
-        {
-          "name": "Basic",
-          "code": "<Input />"
-        },
-        {
-          "name": "Focused",
-          "code": "<Input />"
-        },
-        {
-          "name": "Disabled",
-          "code": "<Input disabled />"
-        },
-        {
-          "name": "WithValue",
-          "code": "<Input value=\"Some value...\" />"
-        },
-        {
-          "name": "WithError",
-          "code": "<Input error />"
-        }
-      ]
-    },
-    {
-      "name": "InputGroup",
-      "importPath": "@wallarm-org/design-system/InputGroup",
-      "props": [],
-      "variants": [],
-      "subComponents": [],
       "examples": [
         {
           "name": "Basic",
-          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon variant='outline'>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' value='wallarm/user-settings' />\n      <InputGroupAddon variant='outline' align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)"
-        },
-        {
-          "name": "Disabled",
-          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' disabled />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' value='wallarm/user-settings' disabled />\n      <InputGroupAddon align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)"
-        },
-        {
-          "name": "WithError",
-          "code": "() => (\n  <VStack gap={12}>\n    <InputGroup>\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' error />\n      <InputGroupAddon align='inline-end'>\n        <Info />\n      </InputGroupAddon>\n    </InputGroup>\n\n    <InputGroup>\n      <InputGroupAddon>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupInput placeholder='Enter' value='wallarm/user-settings' error />\n      <InputGroupAddon align='inline-end'>\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  </VStack>\n)"
-        },
-        {
-          "name": "WithLoader",
-          "code": "() => (\n  <InputGroup>\n    <InputGroupInput placeholder='Searching...' disabled />\n    <InputGroupAddon align='inline-end'>\n      <Loader size='md' />\n    </InputGroupAddon>\n  </InputGroup>\n)"
-        },
-        {
-          "name": "WithKbd",
-          "code": "() => (\n  <InputGroup>\n    <InputGroupAddon>\n      <Search />\n    </InputGroupAddon>\n    <InputGroupInput placeholder='Search' />\n    <InputGroupAddon align='inline-end'>\n      <Kbd>⌘</Kbd>\n      <Kbd>K</Kbd>\n    </InputGroupAddon>\n  </InputGroup>\n)"
-        },
-        {
-          "name": "WithTooltip",
-          "code": "() => (\n  <InputGroup>\n    <InputGroupAddon>\n      <Search />\n    </InputGroupAddon>\n    <InputGroupInput placeholder='Enter' />\n    <InputGroupAddon align='inline-end'>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Info />\n        </TooltipTrigger>\n        <TooltipContent>Get more info</TooltipContent>\n      </Tooltip>\n    </InputGroupAddon>\n  </InputGroup>\n)"
+          "code": "() => (\n  <div className='flex items-center gap-12'>\n    <VStack gap={8} align='end'>\n      <Text size='sm'>Basic:</Text>\n      <Text size='sm'>With country flag:</Text>\n      <Text size='sm'>With port:</Text>\n      <Text size='sm'>With provider:</Text>\n      <Text size='sm'>IPv6:</Text>\n    </VStack>\n    <VStack gap={8} align='start' style={{ maxWidth: '200px' }}>\n      <Ip>\n        <IpAddress>8.8.8.8</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='US' />\n        <IpAddress>1.1.1.1</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='DE' />\n        <IpAddress>77.88.8.8</IpAddress>\n        <IpPort>:8080</IpPort>\n      </Ip>\n      <Ip>\n        <IpCountry code='NL' />\n        <IpAddress>20.33.0.0</IpAddress>\n        <IpProvider>Azure</IpProvider>\n      </Ip>\n      <Ip>\n        <IpCountry code='JP' />\n        <IpAddress>2001:0db8:85a3:0000:0000:8a2e:0370:7334</IpAddress>\n        <IpProvider>GCP</IpProvider>\n      </Ip>\n    </VStack>\n  </div>\n)"
         },
         {
-          "name": "WithSelect",
-          "code": "() => {\n  const collection = createListCollection({\n    items: [\n      {\n        label: 'React',\n        value: 'react',\n        icon: LayoutGrid,\n        category: 'Frontend',\n      },\n      {\n        label: 'Vue',\n        value: 'vue',\n        icon: LayoutTemplate,\n        category: 'Frontend',\n      },\n      {\n        label: 'Angular',\n        value: 'angular',\n        icon: Search,\n        category: 'Frontend',\n      },\n    ],\n  });\n\n  return (\n    <VStack gap={12}>\n      <InputGroup>\n        <InputGroupAddon variant='outline'>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n\n        <InputGroupInput placeholder='Enter' />\n      </InputGroup>\n\n      <InputGroup>\n        <InputGroupInput placeholder='Enter' />\n        <InputGroupAddon align='inline-end' variant='outline'>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n      </InputGroup>\n\n      <InputGroup>\n        <InputGroupAddon>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n\n        <InputGroupInput placeholder='Enter' />\n      </InputGroup>\n\n      <InputGroup>\n        <InputGroupInput placeholder='Enter' />\n        <InputGroupAddon align='inline-end'>\n          <Select collection={collection}>\n            <SelectButton />\n\n            <SelectPositioner>\n              <SelectContent>\n                {collection.items.map(skill => (\n                  <SelectOption key={skill.value} item={skill}>\n                    <SelectOptionText>{skill.label}</SelectOptionText>\n                    <SelectOptionIndicator />\n                  </SelectOption>\n                ))}\n              </SelectContent>\n            </SelectPositioner>\n          </Select>\n        </InputGroupAddon>\n      </InputGroup>\n    </VStack>\n  );\n}"
+          "name": "MultipleAddresses",
+          "code": "() => (\n  <VStack gap={12}>\n    <IpList>\n      <Ip>\n        <IpCountry code='US' />\n        <IpAddress>8.8.8.8</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='AU' />\n        <IpAddress>1.1.1.1</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='DE' />\n        <IpAddress>77.88.8.8</IpAddress>\n      </Ip>\n    </IpList>\n    <IpList>\n      <Ip>\n        <IpCountry code='NL' />\n        <IpAddress>52.94.76.0</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='NL' />\n        <IpAddress>20.33.0.0</IpAddress>\n      </Ip>\n      <Ip>\n        <IpCountry code='AZ' />\n        <IpAddress>35.190.0.0</IpAddress>\n        <IpProvider>GCP</IpProvider>\n      </Ip>\n      <Ip>\n        <IpCountry code='US' />\n        <IpAddress>169.55.0.0</IpAddress>\n        <IpProvider>IBM Cloud</IpProvider>\n      </Ip>\n      <Ip>\n        <IpAddress>88.198.0.0</IpAddress>\n        <IpPort>:8080</IpPort>\n      </Ip>\n    </IpList>\n    <IpList>\n      <Ip>\n        <IpAddress>10.0.0.1</IpAddress>\n        <IpPort>:8080</IpPort>\n        <IpProvider>Tor</IpProvider>\n      </Ip>\n      <Ip>\n        <IpAddress>10.0.0.2</IpAddress>\n        <IpPort>:443</IpPort>\n        <IpProvider>VPN</IpProvider>\n      </Ip>\n    </IpList>\n  </VStack>\n)"
         }
       ]
     },
@@ -10584,6 +12727,12 @@
           "required": false,
           "defaultValue": "regular"
         },
+        {
+          "name": "disabled",
+          "type": "{ true: string; }",
+          "required": false,
+          "defaultValue": "false"
+        },
         {
           "name": "asChild",
           "type": "boolean | undefined",
@@ -10597,7 +12746,8 @@
           "options": [
             "default",
             "alt",
-            "muted"
+            "muted",
+            "table"
           ]
         },
         {
@@ -10616,6 +12766,12 @@
             "regular",
             "medium"
           ]
+        },
+        {
+          "name": "disabled",
+          "options": [
+            "true"
+          ]
         }
       ],
       "subComponents": [],
@@ -18320,6 +20476,10 @@
           "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": "ColumnResizingWithPinning",
+          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-800'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"
+        },
         {
           "name": "ColumnPinning",
           "code": "() => {\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-800'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"
@@ -18368,6 +20528,10 @@
           "name": "InfiniteScrollWindow",
           "code": "() => {\n  const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();\n\n  return (\n    <VStack gap={8}>\n      <Text size='sm' color='secondary'>\n        Loaded {data.length} of {totalItems} rows {isFetching && '— loading...'}\n        {!hasMore && ' — all loaded'}\n      </Text>\n      <Table\n        data={data}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='window'\n        isLoading={isFetching}\n        onEndReached={fetchNextPage}\n        onEndReachedThreshold={300}\n      />\n    </VStack>\n  );\n}"
         },
+        {
+          "name": "HeaderColumnDescription",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  const columns = useMemo<TableColumnDef<(typeof securityEvents)[number]>[]>(\n    () =>\n      securityColumns.map(col => {\n        const key = 'accessorKey' in col ? col.accessorKey : undefined;\n        if (key === 'objectName') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'text' as const, content: 'Target resource' },\n            },\n          };\n        }\n        if (key === 'sourceIp') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'tooltip' as const, content: 'Request origin IP' },\n            },\n          };\n        }\n        if (key === 'requests') {\n          return {\n            ...col,\n            meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Total hits' } },\n          };\n        }\n        if (key === 'parameter') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'text' as const, content: 'Affected param' },\n            },\n          };\n        }\n        return col;\n      }),\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\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    <Table<SecurityHeaderEntry>\n      className='h-500'\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='container'\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}"
@@ -19074,6 +21238,11 @@
           "required": false,
           "defaultValue": "false"
         },
+        {
+          "name": "decoration",
+          "type": "{ dashed: string; }",
+          "required": false
+        },
         {
           "name": "asChild",
           "type": "boolean | undefined",
@@ -19138,6 +21307,12 @@
             "true",
             "false"
           ]
+        },
+        {
+          "name": "decoration",
+          "options": [
+            "dashed"
+          ]
         }
       ],
       "subComponents": [],