@wallarm-org/design-system 0.13.0 → 0.14.0

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.12.0",
-  "generatedAt": "2026-03-17T11:25:47.715Z",
+  "version": "0.13.0",
+  "generatedAt": "2026-03-17T17:09:22.854Z",
   "components": [
     {
       "name": "Alert",
@@ -11399,7 +11399,7 @@
           "name": "size",
           "type": "{ small: string; medium: string; }",
           "required": false,
-          "defaultValue": "medium"
+          "defaultValue": "small"
         },
         {
           "name": "asChild",
@@ -12454,868 +12454,544 @@
       ]
     },
     {
-      "name": "DateTime",
-      "importPath": "@wallarm-org/design-system/DateTime",
-      "props": [
-        {
-          "name": "defaultChecked",
-          "type": "boolean | undefined",
-          "required": false
-        },
+      "name": "Dialog",
+      "importPath": "@wallarm-org/design-system/Dialog",
+      "props": [],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
         {
-          "name": "defaultValue",
-          "type": "string | number | readonly string[] | undefined",
-          "required": false
+          "name": "Basic",
+          "code": "() => {\n  return (\n    <Dialog data-testid='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": "suppressContentEditableWarning",
-          "type": "boolean | 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": "suppressHydrationWarning",
-          "type": "boolean | 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": "accessKey",
-          "type": "string | 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": "autoCapitalize",
-          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (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": "autoFocus",
-          "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": "contentEditable",
-          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | 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": "contextMenu",
-          "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": "dir",
-          "type": "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": "draggable",
-          "type": "Booleanish | 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": "enterKeyHint",
-          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | 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": "hidden",
+          "name": "open",
           "type": "boolean | undefined",
-          "required": false
+          "required": false,
+          "description": "Controlled open state"
         },
         {
-          "name": "id",
-          "type": "string | undefined",
-          "required": false
+          "name": "closeOnEscape",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Whether ESC key closes the drawer (default: true)",
+          "defaultValue": "true"
         },
         {
-          "name": "lang",
-          "type": "string | undefined",
-          "required": false
+          "name": "closeOnOutsideClick",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Whether clicking outside closes the drawer (default: true)",
+          "defaultValue": "true"
         },
         {
-          "name": "nonce",
-          "type": "string | undefined",
-          "required": false
+          "name": "overlay",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Overlay visibility (default: true)",
+          "defaultValue": "true"
         },
         {
-          "name": "slot",
-          "type": "string | undefined",
-          "required": false
+          "name": "width",
+          "type": "string | number | undefined",
+          "required": false,
+          "description": "Width - number for pixels, string for percentage (e.g., \"50%\")"
         },
         {
-          "name": "spellCheck",
-          "type": "Booleanish | undefined",
-          "required": false
+          "name": "minWidth",
+          "type": "number | undefined",
+          "required": false,
+          "description": "Minimum width in pixels"
         },
         {
-          "name": "tabIndex",
+          "name": "maxWidth",
           "type": "number | undefined",
-          "required": false
-        },
+          "required": false,
+          "description": "Maximum width in pixels"
+        }
+      ],
+      "variants": [
         {
-          "name": "title",
-          "type": "string | undefined",
-          "required": false
-        },
+          "name": "isResizing",
+          "options": [
+            "true"
+          ]
+        }
+      ],
+      "subComponents": [
         {
-          "name": "translate",
-          "type": "\"yes\" | \"no\" | undefined",
-          "required": false
+          "name": "DrawerBody",
+          "props": []
         },
         {
-          "name": "radioGroup",
-          "type": "string | undefined",
-          "required": false
+          "name": "DrawerClose",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Render as child component",
+              "defaultValue": "false"
+            }
+          ]
         },
         {
-          "name": "role",
-          "type": "AriaRole | undefined",
-          "required": false
+          "name": "DrawerContent",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false
+            }
+          ]
         },
         {
-          "name": "about",
-          "type": "string | undefined",
-          "required": false
+          "name": "DrawerFooter",
+          "props": []
         },
         {
-          "name": "content",
-          "type": "string | undefined",
-          "required": false
+          "name": "DrawerFooterControls",
+          "props": [
+            {
+              "name": "placement",
+              "type": "{ left: string; right: string; }",
+              "required": false,
+              "defaultValue": "right"
+            }
+          ]
         },
         {
-          "name": "datatype",
-          "type": "string | undefined",
-          "required": false
+          "name": "DrawerHeader",
+          "props": []
         },
         {
-          "name": "inlist",
-          "type": "any",
-          "required": false
+          "name": "DrawerPositioner",
+          "props": [
+            {
+              "name": "isResizing",
+              "type": "boolean",
+              "required": true
+            }
+          ]
         },
         {
-          "name": "prefix",
-          "type": "string | undefined",
-          "required": false
+          "name": "DrawerTitle",
+          "props": []
         },
         {
-          "name": "property",
-          "type": "string | undefined",
-          "required": false
+          "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 data-testid='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": "rel",
-          "type": "string | undefined",
-          "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": "resource",
-          "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": "rev",
-          "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": "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": "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": "popoverTarget",
-          "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": "inert",
-          "type": "boolean | undefined",
-          "required": false,
-          "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+          "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": "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": "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": "is",
-          "type": "string | undefined",
-          "required": false,
-          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+          "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": "exportparts",
-          "type": "string | undefined",
-          "required": false,
-          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+          "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": "part",
-          "type": "string | undefined",
-          "required": false,
-          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+          "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": "value",
-          "type": "string | number | Date | null | undefined",
-          "required": true,
-          "description": "ISO string, Date object, or Unix timestamp (ms)"
-        },
+          "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": "format",
-          "type": "DateTimeFormat | undefined",
-          "required": false,
-          "description": "Display format. Default: 'relative'",
-          "defaultValue": "relative"
+          "name": "variant",
+          "options": [
+            "default",
+            "brand",
+            "destructive"
+          ]
         },
         {
-          "name": "showSeconds",
-          "type": "boolean | undefined",
-          "required": false,
-          "description": "Show seconds in tooltip absolute time. Default: true",
-          "defaultValue": "true"
+          "name": "inset",
+          "options": [
+            "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": "Basic",
+          "code": "() => (\n  <DropdownMenu data-testid='dropdown-menu'>\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": "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": "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": "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": "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": "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": "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": "NullValue",
-          "code": "() => (\n  <VStack gap={12} align='start'>\n    <DateTime value={null} />\n    <DateTime value={undefined} />\n  </VStack>\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>Profile</DropdownMenuItem>\n      <DropdownMenuItem>Billing</DropdownMenuItem>\n      <DropdownMenuItem>Settings</DropdownMenuItem>\n      <DropdownMenuItem>Notifications</DropdownMenuItem>\n      <DropdownMenuItem>Integrations</DropdownMenuItem>\n      <DropdownMenuItem>Security</DropdownMenuItem>\n      <DropdownMenuItem>API Keys</DropdownMenuItem>\n      <DropdownMenuItem>Webhooks</DropdownMenuItem>\n      <DropdownMenuItem>Audit Log</DropdownMenuItem>\n      <DropdownMenuItem>Team Members</DropdownMenuItem>\n      <DropdownMenuItem>Permissions</DropdownMenuItem>\n      <DropdownMenuItem>Usage</DropdownMenuItem>\n      <DropdownMenuFooter>\n        <span className='flex items-center gap-4'>\n          <KbdGroup>\n            <Kbd>↑</Kbd>\n            <Kbd>↓</Kbd>\n          </KbdGroup>\n          to navigate\n        </span>\n        <span className='flex items-center gap-4'>\n          <KbdGroup>\n            <Kbd>↵</Kbd>\n          </KbdGroup>\n          to select\n        </span>\n      </DropdownMenuFooter>\n    </DropdownMenuContent>\n  </DropdownMenu>\n)"
         },
         {
-          "name": "FutureDate",
-          "code": "() => (\n  <DateTime value={new Date(Date.now() + 5 * 60 * 1000)} format='relative' />\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": "Dialog",
-      "importPath": "@wallarm-org/design-system/Dialog",
+      "name": "Field",
+      "importPath": "@wallarm-org/design-system/Field",
       "props": [],
-      "variants": [],
+      "variants": [
+        {
+          "name": "orientation",
+          "options": [
+            "vertical",
+            "horizontal",
+            "responsive"
+          ],
+          "defaultValue": "vertical"
+        }
+      ],
       "subComponents": [],
       "examples": [
         {
           "name": "Basic",
-          "code": "() => {\n  return (\n    <Dialog data-testid='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"
+          "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "Drawer",
-      "importPath": "@wallarm-org/design-system/Drawer",
+      "name": "FilterInput",
+      "description": "FilterInput - Self-contained filter component.\nHandles autocomplete flow (field → operator → value), chip creation, and expression management.\nSupports multiple conditions joined by AND/OR connectors.\nJust pass `fields` config from backend API and it works.",
+      "importPath": "@wallarm-org/design-system/FilterInput",
       "props": [
         {
-          "name": "open",
-          "type": "boolean | undefined",
+          "name": "fields",
+          "type": "FieldMetadata[] | undefined",
           "required": false,
-          "description": "Controlled open state"
+          "description": "Available fields from backend API config",
+          "defaultValue": "[]"
         },
         {
-          "name": "closeOnEscape",
-          "type": "boolean | undefined",
+          "name": "value",
+          "type": "ExprNode | null | undefined",
           "required": false,
-          "description": "Whether ESC key closes the drawer (default: true)",
-          "defaultValue": "true"
+          "description": "Current filter expression value (controlled mode)"
         },
         {
-          "name": "closeOnOutsideClick",
-          "type": "boolean | undefined",
+          "name": "placeholder",
+          "type": "string | undefined",
           "required": false,
-          "description": "Whether clicking outside closes the drawer (default: true)",
-          "defaultValue": "true"
+          "description": "Placeholder text to display when field is empty",
+          "defaultValue": "Type to filter..."
         },
         {
-          "name": "overlay",
+          "name": "error",
           "type": "boolean | undefined",
           "required": false,
-          "description": "Overlay visibility (default: true)",
-          "defaultValue": "true"
+          "description": "Whether the field has a validation error",
+          "defaultValue": "false"
         },
         {
-          "name": "width",
-          "type": "string | number | undefined",
+          "name": "showKeyboardHint",
+          "type": "boolean | undefined",
           "required": false,
-          "description": "Width - number for pixels, string for percentage (e.g., \"50%\")"
+          "description": "Whether to show the keyboard hint (⌘K or Ctrl+K)",
+          "defaultValue": "false"
         },
         {
-          "name": "minWidth",
-          "type": "number | undefined",
-          "required": false,
-          "description": "Minimum width in pixels"
+          "name": "defaultChecked",
+          "type": "boolean | 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": "defaultValue",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
         },
         {
-          "name": "DrawerClose",
-          "props": [
-            {
-              "name": "asChild",
-              "type": "boolean | undefined",
-              "required": false,
-              "description": "Render as child component",
-              "defaultValue": "false"
-            }
-          ]
+          "name": "suppressContentEditableWarning",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "DrawerContent",
-          "props": [
-            {
-              "name": "asChild",
-              "type": "boolean | undefined",
-              "required": false
-            }
-          ]
+          "name": "suppressHydrationWarning",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "DrawerFooter",
-          "props": []
+          "name": "accessKey",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "DrawerFooterControls",
-          "props": [
-            {
-              "name": "placement",
-              "type": "{ left: string; right: string; }",
-              "required": false,
-              "defaultValue": "right"
-            }
-          ]
+          "name": "autoCapitalize",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "required": false
         },
         {
-          "name": "DrawerHeader",
-          "props": []
+          "name": "autoFocus",
+          "type": "boolean | undefined",
+          "required": false
         },
         {
-          "name": "DrawerPositioner",
-          "props": [
-            {
-              "name": "isResizing",
-              "type": "boolean",
-              "required": true
-            }
-          ]
+          "name": "contentEditable",
+          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "required": false
         },
         {
-          "name": "DrawerTitle",
-          "props": []
+          "name": "contextMenu",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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 data-testid='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": "dir",
+          "type": "string | undefined",
+          "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": "draggable",
+          "type": "Booleanish | 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": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | 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": "hidden",
+          "type": "boolean | 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": "id",
+          "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": "lang",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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": "nonce",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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": "slot",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
         },
         {
-          "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": "tabIndex",
+          "type": "number | undefined",
+          "required": false
         },
         {
-          "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": "title",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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": "translate",
+          "type": "\"yes\" | \"no\" | undefined",
+          "required": false
+        },
         {
-          "name": "variant",
-          "options": [
-            "default",
-            "brand",
-            "destructive"
-          ]
+          "name": "radioGroup",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "name": "inset",
-          "options": [
-            "true"
-          ]
-        }
-      ],
-      "subComponents": [],
-      "examples": [
+          "name": "role",
+          "type": "AriaRole | undefined",
+          "required": false
+        },
         {
-          "name": "Basic",
-          "code": "() => (\n  <DropdownMenu data-testid='dropdown-menu'>\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": "about",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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": "content",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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": "datatype",
+          "type": "string | undefined",
+          "required": false
         },
         {
-          "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": "inlist",
+          "type": "any",
+          "required": false
         },
         {
-          "name": "WithFooter",
-          "code": "() => (\n  <DropdownMenu>\n    <DropdownMenuTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n      <DropdownMenuItem>Profile</DropdownMenuItem>\n      <DropdownMenuItem>Billing</DropdownMenuItem>\n      <DropdownMenuItem>Settings</DropdownMenuItem>\n      <DropdownMenuItem>Notifications</DropdownMenuItem>\n      <DropdownMenuItem>Integrations</DropdownMenuItem>\n      <DropdownMenuItem>Security</DropdownMenuItem>\n      <DropdownMenuItem>API Keys</DropdownMenuItem>\n      <DropdownMenuItem>Webhooks</DropdownMenuItem>\n      <DropdownMenuItem>Audit Log</DropdownMenuItem>\n      <DropdownMenuItem>Team Members</DropdownMenuItem>\n      <DropdownMenuItem>Permissions</DropdownMenuItem>\n      <DropdownMenuItem>Usage</DropdownMenuItem>\n      <DropdownMenuFooter>\n        <span className='flex items-center gap-4'>\n          <KbdGroup>\n            <Kbd>↑</Kbd>\n            <Kbd>↓</Kbd>\n          </KbdGroup>\n          to navigate\n        </span>\n        <span className='flex items-center gap-4'>\n          <KbdGroup>\n            <Kbd>↵</Kbd>\n          </KbdGroup>\n          to select\n        </span>\n      </DropdownMenuFooter>\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": "FilterInput",
-      "description": "FilterInput - Self-contained filter component.\nHandles autocomplete flow (field → operator → value), chip creation, and expression management.\nSupports multiple conditions joined by AND/OR connectors.\nJust pass `fields` config from backend API and it works.",
-      "importPath": "@wallarm-org/design-system/FilterInput",
-      "props": [
-        {
-          "name": "fields",
-          "type": "FieldMetadata[] | undefined",
-          "required": false,
-          "description": "Available fields from backend API config",
-          "defaultValue": "[]"
-        },
-        {
-          "name": "value",
-          "type": "ExprNode | null | undefined",
-          "required": false,
-          "description": "Current filter expression value (controlled mode)"
-        },
-        {
-          "name": "placeholder",
-          "type": "string | undefined",
-          "required": false,
-          "description": "Placeholder text to display when field is empty",
-          "defaultValue": "Type to filter..."
-        },
-        {
-          "name": "error",
-          "type": "boolean | undefined",
-          "required": false,
-          "description": "Whether the field has a validation error",
-          "defaultValue": "false"
-        },
-        {
-          "name": "showKeyboardHint",
-          "type": "boolean | undefined",
-          "required": false,
-          "description": "Whether to show the keyboard hint (⌘K or Ctrl+K)",
-          "defaultValue": "false"
-        },
-        {
-          "name": "defaultChecked",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "defaultValue",
-          "type": "string | number | readonly string[] | undefined",
-          "required": false
-        },
-        {
-          "name": "suppressContentEditableWarning",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "suppressHydrationWarning",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "accessKey",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "autoCapitalize",
-          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
-          "required": false
-        },
-        {
-          "name": "autoFocus",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "contentEditable",
-          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
-          "required": false
-        },
-        {
-          "name": "contextMenu",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "dir",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "draggable",
-          "type": "Booleanish | undefined",
-          "required": false
-        },
-        {
-          "name": "enterKeyHint",
-          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
-          "required": false
-        },
-        {
-          "name": "hidden",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "id",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "lang",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "nonce",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "slot",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "spellCheck",
-          "type": "Booleanish | undefined",
-          "required": false
-        },
-        {
-          "name": "tabIndex",
-          "type": "number | undefined",
-          "required": false
-        },
-        {
-          "name": "title",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "translate",
-          "type": "\"yes\" | \"no\" | undefined",
-          "required": false
-        },
-        {
-          "name": "radioGroup",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "role",
-          "type": "AriaRole | undefined",
-          "required": false
-        },
-        {
-          "name": "about",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "content",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "datatype",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "inlist",
-          "type": "any",
-          "required": false
-        },
-        {
-          "name": "prefix",
-          "type": "string | undefined",
-          "required": false
+          "name": "prefix",
+          "type": "string | undefined",
+          "required": false
         },
         {
           "name": "property",
@@ -13930,11 +13606,499 @@
           ]
         }
       ],
-      "examples": []
+      "examples": []
+    },
+    {
+      "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",
+          "options": [
+            "true",
+            "false"
+          ]
+        },
+        {
+          "name": "fullWidth",
+          "options": [
+            "true"
+          ]
+        },
+        {
+          "name": "basis",
+          "options": [
+            "auto",
+            "full",
+            "1/2",
+            "1/3",
+            "2/3",
+            "1/4",
+            "2/4",
+            "3/4",
+            "1/5",
+            "2/5",
+            "3/5",
+            "4/5",
+            "1/6",
+            "2/6",
+            "3/6",
+            "4/6",
+            "5/6",
+            "1/12",
+            "2/12",
+            "3/12",
+            "4/12",
+            "5/12",
+            "6/12",
+            "7/12",
+            "8/12",
+            "9/12",
+            "10/12",
+            "11/12",
+            "0"
+          ]
+        }
+      ],
+      "subComponents": [],
+      "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)"
+        },
+        {
+          "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": "Flex",
-      "importPath": "@wallarm-org/design-system/Flex",
+      "name": "FormatDateTime",
+      "importPath": "@wallarm-org/design-system/FormatDateTime",
       "props": [
         {
           "name": "defaultChecked",
@@ -14207,216 +14371,52 @@
           "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": "value",
+          "type": "string | number | Date | null | undefined",
+          "required": true,
+          "description": "ISO string, Date object, or Unix timestamp (ms)"
         },
         {
-          "name": "wrap",
-          "type": "{ wrap: string; nowrap: string; reverse: string; }",
+          "name": "format",
+          "type": "FormatDateTimeFormat | undefined",
           "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
+          "description": "Display format. Default: 'relative'",
+          "defaultValue": "relative"
         },
         {
-          "name": "asChild",
+          "name": "showSeconds",
           "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",
-          "options": [
-            "true",
-            "false"
-          ]
-        },
-        {
-          "name": "fullWidth",
-          "options": [
-            "true"
-          ]
-        },
-        {
-          "name": "basis",
-          "options": [
-            "auto",
-            "full",
-            "1/2",
-            "1/3",
-            "2/3",
-            "1/4",
-            "2/4",
-            "3/4",
-            "1/5",
-            "2/5",
-            "3/5",
-            "4/5",
-            "1/6",
-            "2/6",
-            "3/6",
-            "4/6",
-            "5/6",
-            "1/12",
-            "2/12",
-            "3/12",
-            "4/12",
-            "5/12",
-            "6/12",
-            "7/12",
-            "8/12",
-            "9/12",
-            "10/12",
-            "11/12",
-            "0"
-          ]
+          "description": "Show seconds in tooltip absolute time. Default: true",
+          "defaultValue": "true"
         }
       ],
+      "variants": [],
       "subComponents": [],
       "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)"
+          "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      <FormatDateTime 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      <FormatDateTime 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      <FormatDateTime 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      <FormatDateTime 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      <FormatDateTime 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      <FormatDateTime 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      <FormatDateTime 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      <FormatDateTime 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      <FormatDateTime value={subYears(now, 2)} format='relative' />\n    </HStack>\n  </VStack>\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": "DateFormat",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <FormatDateTime value='2026-01-01T00:00:00' format='date' />\n    <FormatDateTime value='2026-02-11T14:32:07' format='date' />\n    <FormatDateTime value='2025-06-15T09:00:00' format='date' />\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": "DatetimeFormat",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <FormatDateTime value='2026-01-01T11:00:00' format='datetime' />\n    <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />\n    <FormatDateTime value='2025-12-25T23:59:59' format='datetime' />\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": "WithDescription",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <VStack gap={2}>\n      <FormatDateTime value='2026-01-01T00:00:00' format='date' />\n      <Text size='sm' color='secondary'>\n        Created by admin\n      </Text>\n    </VStack>\n    <VStack gap={2}>\n      <FormatDateTime 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": "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": "NullValue",
+          "code": "() => (\n  <VStack gap={12} align='start'>\n    <FormatDateTime value={null} />\n    <FormatDateTime value={undefined} />\n  </VStack>\n)"
+        },
+        {
+          "name": "FutureDate",
+          "code": "() => (\n  <FormatDateTime value={new Date(Date.now() + 5 * 60 * 1000)} format='relative' />\n)"
         }
       ]
     },