@wallarm-org/design-system 2.1.3 → 2.2.0-rc-fix-overflow-list-api.1

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "2.1.2",
-  "generatedAt": "2026-10-08T08:49:41.082Z",
+  "generatedAt": "2026-10-08T09:15:50.865Z",
   "components": [
     {
       "name": "Accordion",
@@ -7978,12 +7978,12 @@
         },
         {
           "name": "Composition",
-          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n    <Attribute>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <Badge color='red' variant='dotted'>\n          Blocked\n        </Badge>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n          overflowHeaderLabel='items'\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>3 sessions</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={[\n            'artem@acme.com',\n            'uxd@acme.com',\n            'ops@acme.com',\n            'security@acme.com',\n            'admin@acme.com',\n          ]}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n          overflowHeaderLabel='items'\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>IPs</AttributeLabel>\n      <AttributeValue>\n        <IpList>\n          <Ip>\n            <IpCountry code='US' />\n            <IpAddress>142.198.167.52</IpAddress>\n            <IpProvider>Azure</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='US' />\n            <IpAddress>34.74.73.20</IpAddress>\n            <IpProvider>AWS</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='DE' />\n            <IpAddress>34.74.73.20</IpAddress>\n            <IpProvider>GCP</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='NL' />\n            <IpAddress>10.0.0.1</IpAddress>\n          </Ip>\n          <Ip>\n            <IpCountry code='JP' />\n            <IpAddress>192.168.1.1</IpAddress>\n          </Ip>\n        </IpList>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Source IP</AttributeLabel>\n      <AttributeValue>\n        <Ip>\n          <IpCountry code='US' />\n          <IpAddress>142.198.167.52</IpAddress>\n          <IpProvider>Azure</IpProvider>\n        </Ip>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Created at</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Documentation</AttributeLabel>\n      <AttributeValue>\n        <Link href='#' size='md'>\n          View full report\n        </Link>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (inline)</AttributeLabel>\n      <AttributeValue>\n        <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (code)</AttributeLabel>\n      <AttributeValue>\n        <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)",
+          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n    <Attribute>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <Badge color='red' variant='dotted'>\n          Blocked\n        </Badge>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>3 sessions</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={[\n            'artem@acme.com',\n            'uxd@acme.com',\n            'ops@acme.com',\n            'security@acme.com',\n            'admin@acme.com',\n          ]}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>IPs</AttributeLabel>\n      <AttributeValue>\n        <IpList>\n          <Ip>\n            <IpCountry code='US' />\n            <IpAddress>142.198.167.52</IpAddress>\n            <IpProvider>Azure</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='US' />\n            <IpAddress>34.74.73.20</IpAddress>\n            <IpProvider>AWS</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='DE' />\n            <IpAddress>34.74.73.20</IpAddress>\n            <IpProvider>GCP</IpProvider>\n          </Ip>\n          <Ip>\n            <IpCountry code='NL' />\n            <IpAddress>10.0.0.1</IpAddress>\n          </Ip>\n          <Ip>\n            <IpCountry code='JP' />\n            <IpAddress>192.168.1.1</IpAddress>\n          </Ip>\n        </IpList>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Source IP</AttributeLabel>\n      <AttributeValue>\n        <Ip>\n          <IpCountry code='US' />\n          <IpAddress>142.198.167.52</IpAddress>\n          <IpProvider>Azure</IpProvider>\n        </Ip>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Created at</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Documentation</AttributeLabel>\n      <AttributeValue>\n        <Link href='#' size='md'>\n          View full report\n        </Link>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (inline)</AttributeLabel>\n      <AttributeValue>\n        <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (code)</AttributeLabel>\n      <AttributeValue>\n        <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)",
           "description": "The display components sanctioned inside a value — `Badge`, `FormatDateTime`,\n`OverflowList` of `Tag`s, `Ip` and `IpList`, `Link`, `InlineCodeSnippet`, `Code` —\neach formatting the data itself rather than receiving a pre-built string."
         },
         {
           "name": "WithActions",
-          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n    <Attribute>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions data-testid='attribute-with-actions'>\n          <AttributeActionsTarget>\n            <Badge color='red' variant='dotted'>\n              Blocked\n            </Badge>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <OverflowList\n              className='gap-4'\n              items={[\n                'XSS',\n                'BOLA',\n                'SQL Injection',\n                'Scanner',\n                'CSRF',\n                'XXE',\n                'RCE',\n                'LFI',\n                'IDOR',\n              ]}\n              itemRenderer={item => <Tag key={item}>{item}</Tag>}\n              overflowHeaderLabel='items'\n            />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Text size='sm'>3 sessions</Text>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <OverflowList\n              className='gap-4'\n              items={[\n                'artem@acme.com',\n                'uxd@acme.com',\n                'ops@acme.com',\n                'security@acme.com',\n                'admin@acme.com',\n              ]}\n              itemRenderer={item => <Tag key={item}>{item}</Tag>}\n              overflowHeaderLabel='items'\n            />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>IPs</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <IpList>\n              <Ip>\n                <IpCountry code='US' />\n                <IpAddress>142.198.167.52</IpAddress>\n                <IpProvider>Azure</IpProvider>\n              </Ip>\n              <Ip>\n                <IpCountry code='US' />\n                <IpAddress>34.74.73.20</IpAddress>\n                <IpProvider>AWS</IpProvider>\n              </Ip>\n              <Ip>\n                <IpCountry code='DE' />\n                <IpAddress>34.74.73.20</IpAddress>\n                <IpProvider>GCP</IpProvider>\n              </Ip>\n              <Ip>\n                <IpCountry code='NL' />\n                <IpAddress>10.0.0.1</IpAddress>\n              </Ip>\n              <Ip>\n                <IpCountry code='JP' />\n                <IpAddress>192.168.1.1</IpAddress>\n              </Ip>\n            </IpList>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Source IP</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Ip>\n              <IpCountry code='US' />\n              <IpAddress>142.198.167.52</IpAddress>\n              <IpProvider>Azure</IpProvider>\n            </Ip>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Created at</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Documentation</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Link href='#' size='md'>\n              View full report\n            </Link>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (inline)</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (code)</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)",
+          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n    <Attribute>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions data-testid='attribute-with-actions'>\n          <AttributeActionsTarget>\n            <Badge color='red' variant='dotted'>\n              Blocked\n            </Badge>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <OverflowList\n              className='gap-4'\n              items={[\n                'XSS',\n                'BOLA',\n                'SQL Injection',\n                'Scanner',\n                'CSRF',\n                'XXE',\n                'RCE',\n                'LFI',\n                'IDOR',\n              ]}\n              itemRenderer={item => <Tag key={item}>{item}</Tag>}\n            />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Text size='sm'>3 sessions</Text>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <OverflowList\n              className='gap-4'\n              items={[\n                'artem@acme.com',\n                'uxd@acme.com',\n                'ops@acme.com',\n                'security@acme.com',\n                'admin@acme.com',\n              ]}\n              itemRenderer={item => <Tag key={item}>{item}</Tag>}\n            />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>IPs</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <IpList>\n              <Ip>\n                <IpCountry code='US' />\n                <IpAddress>142.198.167.52</IpAddress>\n                <IpProvider>Azure</IpProvider>\n              </Ip>\n              <Ip>\n                <IpCountry code='US' />\n                <IpAddress>34.74.73.20</IpAddress>\n                <IpProvider>AWS</IpProvider>\n              </Ip>\n              <Ip>\n                <IpCountry code='DE' />\n                <IpAddress>34.74.73.20</IpAddress>\n                <IpProvider>GCP</IpProvider>\n              </Ip>\n              <Ip>\n                <IpCountry code='NL' />\n                <IpAddress>10.0.0.1</IpAddress>\n              </Ip>\n              <Ip>\n                <IpCountry code='JP' />\n                <IpAddress>192.168.1.1</IpAddress>\n              </Ip>\n            </IpList>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Source IP</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Ip>\n              <IpCountry code='US' />\n              <IpAddress>142.198.167.52</IpAddress>\n              <IpProvider>Azure</IpProvider>\n            </Ip>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Created at</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Documentation</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Link href='#' size='md'>\n              View full report\n            </Link>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (inline)</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute>\n      <AttributeLabel>Payload (code)</AttributeLabel>\n      <AttributeValue>\n        <AttributeActions>\n          <AttributeActionsTarget>\n            <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n          </AttributeActionsTarget>\n          {renderActionsItems()}\n        </AttributeActions>\n      </AttributeValue>\n    </Attribute>\n  </div>\n)",
           "description": "`AttributeActions` turns the value into a `DropdownMenu` trigger: the row picks up\na hover surface and the menu carries the actions that belong to that one value."
         },
         {
@@ -7998,7 +7998,7 @@
         },
         {
           "name": "HorizontalComposition",
-          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]'>\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <Badge color='red' variant='dotted'>\n          Blocked\n        </Badge>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n          overflowHeaderLabel='items'\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Last seen</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2025-04-02T14:03:00Z' format='date' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>3 sessions</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={[\n            'artem@acme.com',\n            'uxd@acme.com',\n            'ops@acme.com',\n            'security@acme.com',\n            'admin@acme.com',\n          ]}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n          overflowHeaderLabel='items'\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <div className='col-span-2'>\n      <Attribute orientation='horizontal'>\n        <AttributeLabel>IPs</AttributeLabel>\n        <AttributeValue>\n          <IpList type='horizontal'>\n            <Ip>\n              <IpCountry code='US' />\n              <IpAddress>142.198.167.52</IpAddress>\n              <IpProvider>Azure</IpProvider>\n            </Ip>\n            <Ip>\n              <IpCountry code='US' />\n              <IpAddress>34.74.73.20</IpAddress>\n              <IpProvider>AWS</IpProvider>\n            </Ip>\n            <Ip>\n              <IpCountry code='DE' />\n              <IpAddress>34.74.73.20</IpAddress>\n              <IpProvider>GCP</IpProvider>\n            </Ip>\n          </IpList>\n        </AttributeValue>\n      </Attribute>\n    </div>\n  </div>\n)",
+          "code": "() => (\n  <div className='grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]'>\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Status</AttributeLabel>\n      <AttributeValue>\n        <Badge color='red' variant='dotted'>\n          Blocked\n        </Badge>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>First seen</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Attack type</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Last seen</AttributeLabel>\n      <AttributeValue>\n        <FormatDateTime value='2025-04-02T14:03:00Z' format='date' />\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Sessions</AttributeLabel>\n      <AttributeValue>\n        <Text size='sm'>3 sessions</Text>\n      </AttributeValue>\n    </Attribute>\n\n    <Attribute orientation='horizontal'>\n      <AttributeLabel>Users</AttributeLabel>\n      <AttributeValue>\n        <OverflowList\n          className='gap-4'\n          items={[\n            'artem@acme.com',\n            'uxd@acme.com',\n            'ops@acme.com',\n            'security@acme.com',\n            'admin@acme.com',\n          ]}\n          itemRenderer={item => <Tag key={item}>{item}</Tag>}\n        />\n      </AttributeValue>\n    </Attribute>\n\n    <div className='col-span-2'>\n      <Attribute orientation='horizontal'>\n        <AttributeLabel>IPs</AttributeLabel>\n        <AttributeValue>\n          <IpList type='horizontal'>\n            <Ip>\n              <IpCountry code='US' />\n              <IpAddress>142.198.167.52</IpAddress>\n              <IpProvider>Azure</IpProvider>\n            </Ip>\n            <Ip>\n              <IpCountry code='US' />\n              <IpAddress>34.74.73.20</IpAddress>\n              <IpProvider>AWS</IpProvider>\n            </Ip>\n            <Ip>\n              <IpCountry code='DE' />\n              <IpAddress>34.74.73.20</IpAddress>\n              <IpProvider>GCP</IpProvider>\n            </Ip>\n          </IpList>\n        </AttributeValue>\n      </Attribute>\n    </div>\n  </div>\n)",
           "description": "The same value components in the horizontal layout, where a wide one such as\n`IpList type='horizontal'` needs its row to span both columns."
         },
         {
@@ -29510,7 +29510,7 @@
         },
         {
           "name": "ResizableWithOverflowList",
-          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Drawer width={480} open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Open Resizable Drawer with OverflowList\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerResizeHandle />\n        <DrawerHeader>\n          <DrawerTitle>Resizable Drawer with OverflowList</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <p className='mb-16'>Drag the left edge — the tag list reflows live.</p>\n          <Attribute>\n            <AttributeLabel>Attack types</AttributeLabel>\n            <AttributeValue>\n              <OverflowList\n                className='gap-4'\n                items={DRAWER_TAGS}\n                itemRenderer={item => <Tag key={item}>{item}</Tag>}\n                overflowHeaderLabel='attack types'\n              />\n            </AttributeValue>\n          </Attribute>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "code": "() => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Drawer width={480} open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Open Resizable Drawer with OverflowList\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerResizeHandle />\n        <DrawerHeader>\n          <DrawerTitle>Resizable Drawer with OverflowList</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <p className='mb-16'>Drag the left edge — the tag list reflows live.</p>\n          <Attribute>\n            <AttributeLabel>Attack types</AttributeLabel>\n            <AttributeValue>\n              <OverflowList\n                className='gap-4'\n                items={DRAWER_TAGS}\n                itemRenderer={item => <Tag key={item}>{item}</Tag>}\n              />\n            </AttributeValue>\n          </Attribute>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
           "description": "Resizing with content that reflows, which is the case worth testing: the panel is only useful\nat its new width if what is inside adapts."
         },
         {
@@ -50438,7 +50438,7 @@
         },
         {
           "name": "TagsEditor",
-          "code": "args => {\n  const [tags, setTags] = useState<string[]>(['production', 'critical']);\n  return (\n    <div className='w-[320px]'>\n      <Attribute>\n        <AttributeLabel>Tags</AttributeLabel>\n        <AttributeValue>\n          <InlineEdit\n            {...args}\n            value={tags}\n            onValueCommit={v => setTags(v as string[])}\n            data-testid='tags'\n          >\n            <InlineEditPreview>\n              <InlineEditPreviewValue>\n                <OverflowList\n                  className='gap-4'\n                  items={tags}\n                  itemRenderer={tag => <Tag key={tag}>{tag}</Tag>}\n                  overflowHeaderLabel='tags'\n                />\n              </InlineEditPreviewValue>\n              <InlineEditPreviewIcon>\n                <ChevronDown size='md' />\n              </InlineEditPreviewIcon>\n            </InlineEditPreview>\n            <InlineEditControl>\n              <InlineEditSelect items={tagItems} multiple>\n                <SelectInputTrigger />\n                <SelectPositioner>\n                  <SelectContent>{renderSelectOptions(tagItems)}</SelectContent>\n                </SelectPositioner>\n              </InlineEditSelect>\n            </InlineEditControl>\n          </InlineEdit>\n        </AttributeValue>\n      </Attribute>\n    </div>\n  );\n}",
+          "code": "args => {\n  const [tags, setTags] = useState<string[]>(['production', 'critical']);\n  return (\n    <div className='w-[320px]'>\n      <Attribute>\n        <AttributeLabel>Tags</AttributeLabel>\n        <AttributeValue>\n          <InlineEdit\n            {...args}\n            value={tags}\n            onValueCommit={v => setTags(v as string[])}\n            data-testid='tags'\n          >\n            <InlineEditPreview>\n              <InlineEditPreviewValue>\n                <OverflowList\n                  className='gap-4'\n                  items={tags}\n                  itemRenderer={tag => <Tag key={tag}>{tag}</Tag>}\n                />\n              </InlineEditPreviewValue>\n              <InlineEditPreviewIcon>\n                <ChevronDown size='md' />\n              </InlineEditPreviewIcon>\n            </InlineEditPreview>\n            <InlineEditControl>\n              <InlineEditSelect items={tagItems} multiple>\n                <SelectInputTrigger />\n                <SelectPositioner>\n                  <SelectContent>{renderSelectOptions(tagItems)}</SelectContent>\n                </SelectPositioner>\n              </InlineEditSelect>\n            </InlineEditControl>\n          </InlineEdit>\n        </AttributeValue>\n      </Attribute>\n    </div>\n  );\n}",
           "description": "A multi-select whose committed value reads as `Tag` chips, which suits a list the reader\nscans rather than one they read as a sentence."
         },
         {
@@ -61026,7 +61026,8 @@
         {
           "name": "items",
           "type": "T[]",
-          "required": true
+          "required": true,
+          "description": "Measurements are cached by array identity — keep it referentially stable."
         },
         {
           "name": "itemRenderer",
@@ -61035,33 +61036,15 @@
         },
         {
           "name": "overflowRenderer",
-          "type": "((data: ShowAllOverflowData<T>) => ReactNode) | undefined",
-          "required": false
-        },
-        {
-          "name": "overflowHeaderLabel",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "showAll",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "overlayOrigin",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "dimVisibleItems",
-          "type": "boolean | undefined",
-          "required": false
+          "type": "OverflowListRenderer<T> | undefined",
+          "required": false,
+          "description": "Renders the overflow indicator. Also called once in the hidden measurement\nlayer with every item hidden, so it must be pure. Compose it from the\n`OverflowListMore` parts; defaults to `<OverflowListMore />`."
         },
         {
           "name": "minVisibleItems",
           "type": "number | undefined",
-          "required": false
+          "required": false,
+          "description": "Keep at least this many items visible however narrow the row gets."
         },
         {
           "name": "collapseFrom",
@@ -61071,7 +61054,8 @@
         {
           "name": "alwaysRenderOverflow",
           "type": "boolean | undefined",
-          "required": false
+          "required": false,
+          "description": "Call `overflowRenderer` even when nothing is hidden. `OverflowListMore`\nitself renders nothing at zero hidden items."
         },
         {
           "name": "defaultChecked",
@@ -61344,453 +61328,36 @@
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         }
       ],
-      "variants": [],
-      "subComponents": [],
-      "examples": [
-        {
-          "name": "Basic",
-          "code": "() => (\n  <div className='w-640'>\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowHeaderLabel='tags'\n    />\n  </div>\n)",
-          "description": "All nine tags fit in 640px, so the overflow renderer is never called at all."
-        },
-        {
-          "name": "Collapsed",
-          "code": "() => (\n  <div className='w-200'>\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowHeaderLabel='tags'\n    />\n  </div>\n)",
-          "description": "The same nine in 200px: two survive and the `+N` takes the rest, which is the whole job."
-        },
-        {
-          "name": "CollapseFromStart",
-          "code": "() => (\n  <div className='w-240'>\n    <OverflowList\n      className='gap-4'\n      collapseFrom='start'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowHeaderLabel='tags'\n    />\n  </div>\n)",
-          "description": "`collapseFrom='start'` hides the beginning and keeps the end in view — for a path or a\nhistory where the most recent items are the ones that matter."
-        },
-        {
-          "name": "MinVisibleItems",
-          "code": "() => (\n  <div className='w-160 overflow-hidden rounded-2 border border-border-primary p-12'>\n    <OverflowList\n      className='gap-4'\n      minVisibleItems={1}\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowHeaderLabel='tags'\n    />\n  </div>\n)",
-          "description": "`minVisibleItems` puts a floor under the measurement: however tight the column gets,\nthat many items stay and the rest go to the `+N` rather than the row emptying out."
-        },
-        {
-          "name": "ResizableContainer",
-          "code": "() => (\n  <div\n    data-testid='resizable-wrapper'\n    className='overflow-hidden rounded-2 border border-border-primary p-12'\n    style={{ width: 500, minWidth: 80, maxWidth: 800, resize: 'horizontal' }}\n  >\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowHeaderLabel='tags'\n    />\n  </div>\n)",
-          "description": "Drag the box's right edge: the split is re-measured as the width changes rather than at\nbreakpoints, which is what makes it safe inside a resizable panel."
-        },
-        {
-          "name": "ShowAllInPopover",
-          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowHeaderLabel='attack types'\n      showAll\n    />\n  </div>\n)",
-          "description": "Shows all items (visible + hidden) in the popover with a total count header.\nThis is the recommended pattern for read-only contexts."
-        },
-        {
-          "name": "HiddenOnlyInPopover",
-          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      showAll={false}\n    />\n  </div>\n)",
-          "description": "Shows only hidden items in the popover (legacy pattern).\nUse only for editable contexts like multi-select inputs."
-        },
-        {
-          "name": "OverlayOrigin",
-          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowHeaderLabel='attack types'\n      showAll\n      overlayOrigin\n    />\n  </div>\n)",
-          "description": "Popover overlays the origin (visible items + trigger).\nUse when the popover should cover the entire row."
-        }
-      ]
-    },
-    {
-      "name": "OverflowTooltip",
-      "description": "Root component for OverflowTooltip.\nAutomatically detects overflow in child elements.",
-      "importPath": "@wallarm-org/design-system/OverflowTooltip",
-      "props": [
+      "variants": [
         {
-          "name": "forceTooltip",
-          "type": "boolean | undefined",
-          "required": false,
+          "name": "dimmed",
+          "options": [
+            "true",
+            "false"
+          ],
           "defaultValue": "false"
-        },
-        {
-          "name": "positioning",
-          "type": "PositioningOptions | undefined",
-          "required": false
         }
       ],
-      "variants": [],
       "subComponents": [
         {
-          "name": "OverflowTooltipContent",
+          "name": "OverflowListMore",
           "props": [
             {
-              "name": "maxWidth",
-              "type": "number | undefined",
+              "name": "placement",
+              "type": "\"trigger\" | \"cover\" | undefined",
               "required": false,
-              "defaultValue": "400"
-            }
-          ]
-        },
-        {
-          "name": "OverflowTooltipTrigger",
-          "props": [
+              "description": "`trigger` — the popover opens below the \"+N\" chip.\n`cover` — the popover opens over the row, from the list's left edge.",
+              "defaultValue": "trigger"
+            },
             {
-              "name": "asChild",
+              "name": "open",
               "type": "boolean | undefined",
-              "required": false,
-              "defaultValue": "true"
+              "required": false
             }
           ]
-        }
-      ],
-      "examples": [
-        {
-          "name": "AutoDetection",
-          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>short — no tooltip</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>Short text</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This won't show because text isn't overflowing\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>long — tooltip</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>\n              This is a very long text that will be truncated and automatically show a tooltip when\n              hovered\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This is a very long text that will be truncated and automatically show a tooltip when\n            hovered\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
-          "description": "A single truncated line. The tooltip appears only when the text is cut — resize the frame and\nit stops offering one."
-        },
-        {
-          "name": "MultiLineAutoDetection",
-          "code": "() => {\n  const longText =\n    'This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes.';\n\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>line-clamp-2</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='line-clamp-2'>{longText}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>line-clamp-3</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='line-clamp-3'>{longText}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>line-clamp-4</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='line-clamp-4'>{longText}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
-          "description": "The same with `line-clamp`, where truncation happens at the block rather than the line."
-        },
-        {
-          "name": "NestedElements",
-          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>one level deep</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='border p-4'>\n              <h3 className='font-bold mb-2'>Card Title</h3>\n              <p className='truncate'>\n                This is a nested element with truncate that will be automatically detected for\n                overflow\n              </p>\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This is a nested element with truncate that will be automatically detected for overflow\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>several, each truncating</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='border p-4'>\n              <h3 className='font-bold mb-2 truncate'>\n                This is a very long title that might be truncated\n              </h3>\n              <p className='line-clamp-2'>\n                And this is a description that can span multiple lines but will be clamped to just\n                two lines. The component will detect if either of these elements overflow.\n              </p>\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div>\n              <strong>Title:</strong> This is a very long title that might be truncated\n              <br />\n              <strong>Description:</strong> And this is a description that can span multiple lines\n              but will be clamped to just two lines. The component will detect if either of these\n              elements overflow.\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
-          "description": "The truncating element is somewhere inside the children, which is the usual case — it is\nfound rather than declared."
-        },
-        {
-          "name": "CustomTooltipContent",
-          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>rich content</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>\n              /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div className='flex flex-col gap-2'>\n              <div className='font-medium text-sm'>API Endpoint</div>\n              <code className='rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs'>\n                /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n              </code>\n              <div className='text-xs text-text-secondary'>\n                Method: POST\n                <br />\n                Auth: Bearer Token\n              </div>\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>table-like content</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>\n              user@example.com - Administrator - Last login: 2024-01-15\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div className='grid grid-cols-2 gap-2 text-sm'>\n              <span className='font-medium'>Email:</span>\n              <span>user@example.com</span>\n              <span className='font-medium'>Role:</span>\n              <span>Administrator</span>\n              <span className='font-medium'>Last Login:</span>\n              <span>2024-01-15</span>\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
-          "description": "Overriding the content, for when the full value needs formatting the truncated one does not\nhave."
-        },
-        {
-          "name": "ForceTooltip",
-          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>forced, nothing truncated</p>\n        <OverflowTooltip forceTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate w-fit'>Short text</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This tooltip is forced to show even though the text isn't truncated\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>forced, with extra detail</p>\n        <OverflowTooltip forceTooltip>\n          <OverflowTooltipTrigger>\n            <Button variant='outline' color='neutral'>\n              Click for info\n            </Button>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div className='flex flex-col gap-2'>\n              <strong>Additional Information</strong>\n              <span className='text-sm'>\n                This tooltip provides extra context even when the trigger element doesn't have\n                overflow.\n              </span>\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
-          "description": "Forcing it on regardless of truncation. Reach for a plain `Tooltip` instead if the answer is\nalways yes — this prop exists for the case that switches."
-        },
-        {
-          "name": "DifferentSides",
-          "code": "() => {\n  const text = 'This is a text that will be truncated and show tooltips on different sides';\n\n  return (\n    <div className='font-sans flex flex-col gap-32 w-300 py-32'>\n      <div>\n        <p className='sb-annotation mb-8'>top — the default</p>\n        <OverflowTooltip positioning={{ placement: 'top' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>bottom</p>\n        <OverflowTooltip positioning={{ placement: 'bottom' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>left</p>\n        <OverflowTooltip positioning={{ placement: 'left' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>right</p>\n        <OverflowTooltip positioning={{ placement: 'right' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
-          "description": "Placement around the trigger. In a table, keep it off the side the reader is scanning."
-        },
-        {
-          "name": "DynamicContent",
-          "code": "() => {\n  const [text, setText] = useState('Click the button to change this text');\n\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <Button\n        variant='outline'\n        color='neutral'\n        onClick={() => {\n          const texts = [\n            'Short text',\n            'This is a medium length text that might overflow',\n            'This is a very long text that will definitely overflow and show a tooltip when you hover over it',\n            'Another short one',\n            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',\n          ];\n          setText(texts[Math.floor(Math.random() * texts.length)] ?? 'Short text');\n        }}\n      >\n        Change Text\n      </Button>\n    </div>\n  );\n}",
-          "description": "Content that changes after mount. The measurement is re-taken rather than cached from first\nrender, so text that grows past its box gains a tooltip without being remounted."
-        }
-      ]
-    },
-    {
-      "name": "Overlay",
-      "importPath": "@wallarm-org/design-system/Overlay",
-      "props": [],
-      "variants": [],
-      "subComponents": [],
-      "examples": [
-        {
-          "name": "Basic",
-          "code": "() => <Overlay />",
-          "description": "The scrim over a page of text, which is the whole of what it does. Its fade keys off a `data-state` the parent sets, so on its own it just sits there — the behaviour comes from the headless backdrop you wrap it in."
-        }
-      ]
-    },
-    {
-      "name": "Page",
-      "importPath": "@wallarm-org/design-system/Page",
-      "props": [
-        {
-          "name": "name",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "title",
-          "type": "string | undefined",
-          "required": false
         },
         {
-          "name": "fullSize",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "fixedHeight",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "contained",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "defaultChecked",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "defaultValue",
-          "type": "string | number | readonly string[] | undefined",
-          "required": false
-        },
-        {
-          "name": "suppressContentEditableWarning",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "suppressHydrationWarning",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "accessKey",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "autoCapitalize",
-          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
-          "required": false
-        },
-        {
-          "name": "autoFocus",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "contentEditable",
-          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
-          "required": false
-        },
-        {
-          "name": "contextMenu",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "dir",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "draggable",
-          "type": "Booleanish | undefined",
-          "required": false
-        },
-        {
-          "name": "enterKeyHint",
-          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
-          "required": false
-        },
-        {
-          "name": "hidden",
-          "type": "boolean | undefined",
-          "required": false
-        },
-        {
-          "name": "id",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "lang",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "nonce",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "slot",
-          "type": "string | undefined",
-          "required": false
-        },
-        {
-          "name": "spellCheck",
-          "type": "Booleanish | undefined",
-          "required": false
-        },
-        {
-          "name": "tabIndex",
-          "type": "number | undefined",
-          "required": false
-        },
-        {
-          "name": "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 {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
-        },
-        {
-          "name": "inputMode",
-          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
-          "required": false,
-          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
-        },
-        {
-          "name": "is",
-          "type": "string | undefined",
-          "required": false,
-          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
-        },
-        {
-          "name": "exportparts",
-          "type": "string | undefined",
-          "required": false,
-          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
-        },
-        {
-          "name": "part",
-          "type": "string | undefined",
-          "required": false,
-          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
-        }
-      ],
-      "variants": [
-        {
-          "name": "active",
-          "options": [
-            "true",
-            "false"
-          ],
-          "defaultValue": "false"
-        }
-      ],
-      "subComponents": [
-        {
-          "name": "PageActions",
+          "name": "OverflowListMoreContent",
           "props": [
             {
               "name": "defaultChecked",
@@ -61857,11 +61424,6 @@
               "type": "boolean | undefined",
               "required": false
             },
-            {
-              "name": "id",
-              "type": "string | undefined",
-              "required": false
-            },
             {
               "name": "lang",
               "type": "string | undefined",
@@ -62061,12 +61623,46 @@
               "type": "string | undefined",
               "required": false,
               "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            },
+            {
+              "name": "minHeight",
+              "type": "PopoverSizeDimension | undefined",
+              "required": false,
+              "defaultValue": "auto"
+            },
+            {
+              "name": "maxHeight",
+              "type": "PopoverSizeDimension | undefined",
+              "required": false
+            },
+            {
+              "name": "minWidth",
+              "type": "PopoverSizeDimension | undefined",
+              "required": false
+            },
+            {
+              "name": "maxWidth",
+              "type": "PopoverSizeDimension | undefined",
+              "required": false,
+              "defaultValue": "360px"
             }
           ]
         },
         {
-          "name": "PageContent",
+          "name": "OverflowListMoreCount",
           "props": [
+            {
+              "name": "of",
+              "type": "\"hidden\" | \"total\" | undefined",
+              "required": false,
+              "description": "`hidden` — items folded into the overflow; `total` — every item.",
+              "defaultValue": "hidden"
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",
@@ -62132,11 +61728,6 @@
               "type": "boolean | undefined",
               "required": false
             },
-            {
-              "name": "id",
-              "type": "string | undefined",
-              "required": false
-            },
             {
               "name": "lang",
               "type": "string | undefined",
@@ -62340,11 +61931,11 @@
           ]
         },
         {
-          "name": "PageHeader",
+          "name": "OverflowListMoreHeader",
           "props": [
             {
-              "name": "sticky",
-              "type": "boolean | undefined",
+              "name": "id",
+              "type": "string | undefined",
               "required": false
             },
             {
@@ -62412,11 +62003,1945 @@
               "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": "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 {@link 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": "align",
+              "type": "{ left: string; center: string; right: string; }",
+              "required": false
+            },
+            {
+              "name": "inline",
+              "type": "{ true: string; }",
+              "required": false
+            },
+            {
+              "name": "grow",
+              "type": "{ true: string; }",
+              "required": false
+            },
+            {
+              "name": "truncate",
+              "type": "{ true: string; false: string; }",
+              "required": false
+            },
+            {
+              "name": "decoration",
+              "type": "{ dashed: string; }",
+              "required": false
+            },
+            {
+              "name": "lineHeight",
+              "type": "{ none: string; tight: string; snug: string; normal: string; relaxed: string; }",
+              "required": false
+            },
+            {
+              "name": "textTransform",
+              "type": "{ uppercase: string; lowercase: string; capitalize: string; none: string; }",
+              "required": false
+            },
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "lineClamp",
+              "type": "number | undefined",
+              "required": false
+            }
+          ]
+        },
+        {
+          "name": "OverflowListMoreItems",
+          "props": [
+            {
+              "name": "show",
+              "type": "\"hidden\" | \"all\" | undefined",
+              "required": false,
+              "description": "`all` lists every item (visible ones first); `hidden` only the folded ones.",
+              "defaultValue": "all"
+            },
+            {
+              "name": "dimVisible",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Fade the items that are already visible in the row. Only with `show='all'`.",
+              "defaultValue": "true"
+            },
+            {
+              "name": "renderItem",
+              "type": "((item: T, index: number) => ReactNode) | undefined",
+              "required": false,
+              "description": "Item renderer for the popover. Defaults to the list's `itemRenderer`.\n`T` is not linked to the list's item type — annotate the parameter."
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | 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 {@link 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": "OverflowListMoreTrigger",
+          "props": [
+            {
+              "name": "size",
+              "type": "\"medium\" | \"small\" | \"large\" | null | undefined",
+              "required": false
+            },
+            {
+              "name": "form",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | 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": "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 {@link 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": "disabled",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "formAction",
+              "type": "string | ((formData: FormData) => void | Promise<void>) | undefined",
+              "required": false
+            },
+            {
+              "name": "formEncType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "formMethod",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "formNoValidate",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "formTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "name",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "type",
+              "type": "\"button\" | \"submit\" | \"reset\" | undefined",
+              "required": false
+            }
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => (\n  <div className='w-640'>\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n    />\n  </div>\n)",
+          "description": "All nine tags fit in 640px, so the overflow chip never appears."
+        },
+        {
+          "name": "Collapsed",
+          "code": "() => (\n  <div className='w-200'>\n    <OverflowList\n      className='gap-4'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n    />\n  </div>\n)",
+          "description": "The same nine in 200px: two survive and the `+N` takes the rest, which is the whole job."
+        },
+        {
+          "name": "CollapseFromStart",
+          "code": "() => (\n  <div className='w-240'>\n    <OverflowList\n      className='gap-4'\n      collapseFrom='start'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n    />\n  </div>\n)",
+          "description": "`collapseFrom='start'` hides the beginning and keeps the end in view — for a path or a\nhistory where the most recent items are the ones that matter."
+        },
+        {
+          "name": "MinVisibleItems",
+          "code": "() => (\n  <div className='w-160 overflow-hidden rounded-2 border border-border-primary p-12'>\n    <OverflowList\n      className='gap-4'\n      minVisibleItems={1}\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n    />\n  </div>\n)",
+          "description": "`minVisibleItems` puts a floor under the measurement: however tight the column gets,\nthat many items stay and the rest go to the `+N` rather than the row emptying out."
+        },
+        {
+          "name": "ResizableContainer",
+          "code": "() => (\n  <div\n    data-testid='resizable-wrapper'\n    className='overflow-hidden rounded-2 border border-border-primary p-12'\n    style={{ width: 500, minWidth: 80, maxWidth: 800, resize: 'horizontal' }}\n  >\n    <OverflowList\n      className='gap-4'\n      data-testid='tags'\n      items={TAGS}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n    />\n  </div>\n)",
+          "description": "Drag the box's right edge: the split is re-measured as the width changes rather than at\nbreakpoints, which is what makes it safe inside a resizable panel."
+        },
+        {
+          "name": "WithHeader",
+          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      data-testid='attacks'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={() => (\n        <OverflowListMore>\n          <OverflowListMoreTrigger />\n          <OverflowListMoreContent>\n            <OverflowListMoreHeader>\n              <OverflowListMoreCount of='total' /> attack types\n            </OverflowListMoreHeader>\n            <OverflowListMoreItems />\n          </OverflowListMoreContent>\n        </OverflowListMore>\n      )}\n    />\n  </div>\n)",
+          "description": "The full composition: a header counting every item over the popover list, built from\n`OverflowListMoreHeader` and `OverflowListMoreCount` in plain JSX. Items already in the\nrow are listed first and faded."
+        },
+        {
+          "name": "HiddenOnly",
+          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      data-testid='attacks'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={() => (\n        <OverflowListMore>\n          <OverflowListMoreTrigger>\n            +<OverflowListMoreCount />\n          </OverflowListMoreTrigger>\n          <OverflowListMoreContent>\n            <OverflowListMoreItems show='hidden' />\n          </OverflowListMoreContent>\n        </OverflowListMore>\n      )}\n    />\n  </div>\n)",
+          "description": "`show='hidden'` lists only what the row folded away — the pattern for editable\ncontexts such as a multi-select input, where the visible chips are right there."
+        },
+        {
+          "name": "CoverPlacement",
+          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      data-testid='attacks'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={() => <OverflowListMore placement='cover' />}\n    />\n  </div>\n)",
+          "description": "`placement='cover'` opens the popover over the row itself, from its left edge."
+        },
+        {
+          "name": "PluralizedHeader",
+          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={() => (\n        <OverflowListMore>\n          <OverflowListMoreTrigger />\n          <OverflowListMoreContent>\n            <PluralHeader />\n            <OverflowListMoreItems />\n          </OverflowListMoreContent>\n        </OverflowListMore>\n      )}\n    />\n  </div>\n)",
+          "description": "When the header needs the number as a value — pluralization, i18n — read it with\n`useOverflowListMore()` inside your own component instead of `OverflowListMoreCount`."
+        },
+        {
+          "name": "CustomRenderer",
+          "code": "() => (\n  <div className='w-120'>\n    <OverflowList\n      className='gap-4'\n      items={ATTACK_TYPES}\n      itemRenderer={item => <Tag key={item}>{item}</Tag>}\n      overflowRenderer={hidden => <Tag>and {hidden.length} others</Tag>}\n    />\n  </div>\n)",
+          "description": "`overflowRenderer` is just a function of the hidden items — anything goes, no popover\nrequired."
+        }
+      ]
+    },
+    {
+      "name": "OverflowTooltip",
+      "description": "Root component for OverflowTooltip.\nAutomatically detects overflow in child elements.",
+      "importPath": "@wallarm-org/design-system/OverflowTooltip",
+      "props": [
+        {
+          "name": "forceTooltip",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions | undefined",
+          "required": false
+        }
+      ],
+      "variants": [],
+      "subComponents": [
+        {
+          "name": "OverflowTooltipContent",
+          "props": [
+            {
+              "name": "maxWidth",
+              "type": "number | undefined",
+              "required": false,
+              "defaultValue": "400"
+            }
+          ]
+        },
+        {
+          "name": "OverflowTooltipTrigger",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "defaultValue": "true"
+            }
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "AutoDetection",
+          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>short — no tooltip</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>Short text</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This won't show because text isn't overflowing\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>long — tooltip</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>\n              This is a very long text that will be truncated and automatically show a tooltip when\n              hovered\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This is a very long text that will be truncated and automatically show a tooltip when\n            hovered\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
+          "description": "A single truncated line. The tooltip appears only when the text is cut — resize the frame and\nit stops offering one."
+        },
+        {
+          "name": "MultiLineAutoDetection",
+          "code": "() => {\n  const longText =\n    'This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes.';\n\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>line-clamp-2</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='line-clamp-2'>{longText}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>line-clamp-3</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='line-clamp-3'>{longText}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>line-clamp-4</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='line-clamp-4'>{longText}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
+          "description": "The same with `line-clamp`, where truncation happens at the block rather than the line."
+        },
+        {
+          "name": "NestedElements",
+          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>one level deep</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='border p-4'>\n              <h3 className='font-bold mb-2'>Card Title</h3>\n              <p className='truncate'>\n                This is a nested element with truncate that will be automatically detected for\n                overflow\n              </p>\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This is a nested element with truncate that will be automatically detected for overflow\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>several, each truncating</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='border p-4'>\n              <h3 className='font-bold mb-2 truncate'>\n                This is a very long title that might be truncated\n              </h3>\n              <p className='line-clamp-2'>\n                And this is a description that can span multiple lines but will be clamped to just\n                two lines. The component will detect if either of these elements overflow.\n              </p>\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div>\n              <strong>Title:</strong> This is a very long title that might be truncated\n              <br />\n              <strong>Description:</strong> And this is a description that can span multiple lines\n              but will be clamped to just two lines. The component will detect if either of these\n              elements overflow.\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
+          "description": "The truncating element is somewhere inside the children, which is the usual case — it is\nfound rather than declared."
+        },
+        {
+          "name": "CustomTooltipContent",
+          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>rich content</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>\n              /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div className='flex flex-col gap-2'>\n              <div className='font-medium text-sm'>API Endpoint</div>\n              <code className='rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs'>\n                /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n              </code>\n              <div className='text-xs text-text-secondary'>\n                Method: POST\n                <br />\n                Auth: Bearer Token\n              </div>\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>table-like content</p>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>\n              user@example.com - Administrator - Last login: 2024-01-15\n            </div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div className='grid grid-cols-2 gap-2 text-sm'>\n              <span className='font-medium'>Email:</span>\n              <span>user@example.com</span>\n              <span className='font-medium'>Role:</span>\n              <span>Administrator</span>\n              <span className='font-medium'>Last Login:</span>\n              <span>2024-01-15</span>\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
+          "description": "Overriding the content, for when the full value needs formatting the truncated one does not\nhave."
+        },
+        {
+          "name": "ForceTooltip",
+          "code": "() => {\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <p className='sb-annotation mb-8'>forced, nothing truncated</p>\n        <OverflowTooltip forceTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate w-fit'>Short text</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            This tooltip is forced to show even though the text isn't truncated\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>forced, with extra detail</p>\n        <OverflowTooltip forceTooltip>\n          <OverflowTooltipTrigger>\n            <Button variant='outline' color='neutral'>\n              Click for info\n            </Button>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>\n            <div className='flex flex-col gap-2'>\n              <strong>Additional Information</strong>\n              <span className='text-sm'>\n                This tooltip provides extra context even when the trigger element doesn't have\n                overflow.\n              </span>\n            </div>\n          </OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
+          "description": "Forcing it on regardless of truncation. Reach for a plain `Tooltip` instead if the answer is\nalways yes — this prop exists for the case that switches."
+        },
+        {
+          "name": "DifferentSides",
+          "code": "() => {\n  const text = 'This is a text that will be truncated and show tooltips on different sides';\n\n  return (\n    <div className='font-sans flex flex-col gap-32 w-300 py-32'>\n      <div>\n        <p className='sb-annotation mb-8'>top — the default</p>\n        <OverflowTooltip positioning={{ placement: 'top' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>bottom</p>\n        <OverflowTooltip positioning={{ placement: 'bottom' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>left</p>\n        <OverflowTooltip positioning={{ placement: 'left' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <div>\n        <p className='sb-annotation mb-8'>right</p>\n        <OverflowTooltip positioning={{ placement: 'right' }}>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n    </div>\n  );\n}",
+          "description": "Placement around the trigger. In a table, keep it off the side the reader is scanning."
+        },
+        {
+          "name": "DynamicContent",
+          "code": "() => {\n  const [text, setText] = useState('Click the button to change this text');\n\n  return (\n    <div className='font-sans flex flex-col gap-16 w-300'>\n      <div>\n        <OverflowTooltip>\n          <OverflowTooltipTrigger>\n            <div className='truncate'>{text}</div>\n          </OverflowTooltipTrigger>\n          <OverflowTooltipContent>{text}</OverflowTooltipContent>\n        </OverflowTooltip>\n      </div>\n\n      <Button\n        variant='outline'\n        color='neutral'\n        onClick={() => {\n          const texts = [\n            'Short text',\n            'This is a medium length text that might overflow',\n            'This is a very long text that will definitely overflow and show a tooltip when you hover over it',\n            'Another short one',\n            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',\n          ];\n          setText(texts[Math.floor(Math.random() * texts.length)] ?? 'Short text');\n        }}\n      >\n        Change Text\n      </Button>\n    </div>\n  );\n}",
+          "description": "Content that changes after mount. The measurement is re-taken rather than cached from first\nrender, so text that grows past its box gains a tooltip without being remounted."
+        }
+      ]
+    },
+    {
+      "name": "Overlay",
+      "importPath": "@wallarm-org/design-system/Overlay",
+      "props": [],
+      "variants": [],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "() => <Overlay />",
+          "description": "The scrim over a page of text, which is the whole of what it does. Its fade keys off a `data-state` the parent sets, so on its own it just sits there — the behaviour comes from the headless backdrop you wrap it in."
+        }
+      ]
+    },
+    {
+      "name": "Page",
+      "importPath": "@wallarm-org/design-system/Page",
+      "props": [
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "fullSize",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "fixedHeight",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "contained",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressContentEditableWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressHydrationWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "accessKey",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCapitalize",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "required": false
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "contentEditable",
+          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "required": false
+        },
+        {
+          "name": "contextMenu",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "dir",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "draggable",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false
+        },
+        {
+          "name": "hidden",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "lang",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "nonce",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "slot",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "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 {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
+        },
+        {
+          "name": "inputMode",
+          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "required": false,
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+        },
+        {
+          "name": "is",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+        },
+        {
+          "name": "exportparts",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+        },
+        {
+          "name": "part",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        }
+      ],
+      "variants": [
+        {
+          "name": "active",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        }
+      ],
+      "subComponents": [
+        {
+          "name": "PageActions",
+          "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 {@link 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": "PageContent",
+          "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 {@link 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": "PageHeader",
+          "props": [
+            {
+              "name": "sticky",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
             {
               "name": "lang",
               "type": "string | undefined",
@@ -65531,7 +67056,25 @@
     {
       "name": "Popover",
       "importPath": "@wallarm-org/design-system/Popover",
-      "props": [],
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds | undefined",
+          "required": false,
+          "description": "Override the trigger element's id. Pass the same id to another\ncompound component's `ids.trigger` (e.g. `Tooltip`, `DropdownMenu`) to\ncompose their triggers on one element via nested `asChild` without an\nextra wrapper node — otherwise the outer trigger's id wins and the\nother component can't find its own anchor."
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions | undefined",
+          "required": false,
+          "description": "Custom positioning configuration. When provided, overrides the default positioning."
+        }
+      ],
       "variants": [],
       "subComponents": [
         {
@@ -65570,6 +67113,16 @@
               "type": "string | undefined",
               "required": false
             },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",
@@ -65600,11 +67153,6 @@
               "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",
@@ -65615,11 +67163,6 @@
               "type": "string | undefined",
               "required": false
             },
-            {
-              "name": "dir",
-              "type": "string | undefined",
-              "required": false
-            },
             {
               "name": "draggable",
               "type": "Booleanish | undefined",
@@ -65857,6 +67400,16 @@
               "type": "string | undefined",
               "required": false
             },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
             {
               "name": "id",
               "type": "string | undefined",
@@ -65892,11 +67445,6 @@
               "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",
@@ -65907,11 +67455,6 @@
               "type": "string | undefined",
               "required": false
             },
-            {
-              "name": "dir",
-              "type": "string | undefined",
-              "required": false
-            },
             {
               "name": "draggable",
               "type": "Booleanish | undefined",
@@ -69593,7 +71136,7 @@
         },
         {
           "name": "WithOverflowList",
-          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='tags' defaultSize='50%' minSize='20%'>\n        <div className='flex h-full items-center p-16'>\n          <OverflowList\n            className='gap-4'\n            items={OVERFLOW_TAGS}\n            itemRenderer={item => <Tag key={item}>{item}</Tag>}\n            overflowHeaderLabel='attack types'\n          />\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='content' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
+          "code": "() => (\n  <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n    <ResizablePanelGroup orientation='horizontal'>\n      <ResizablePanel id='tags' defaultSize='50%' minSize='20%'>\n        <div className='flex h-full items-center p-16'>\n          <OverflowList\n            className='gap-4'\n            items={OVERFLOW_TAGS}\n            itemRenderer={item => <Tag key={item}>{item}</Tag>}\n          />\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel id='content' defaultSize='50%'>\n        <div className='flex h-full items-center justify-center p-24'>\n          <span className='text-text-secondary'>Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  </div>\n)",
           "description": "Resizing with content that reflows — the tag list adapts live as the panel width changes. Overflow items appear in a popover."
         }
       ]
@@ -107203,7 +108746,7 @@
         },
         {
           "name": "ColumnResizingWithOverflowList",
-          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      ...securityColumns.slice(0, 1),\n      securityColumnHelper.display({\n        id: 'tags',\n        header: 'Tags',\n        size: 240,\n        cell: ({ row }) => (\n          <OverflowList\n            className='gap-4'\n            items={row.original.tags}\n            itemRenderer={(item: string) => <Tag key={item}>{item}</Tag>}\n            overflowHeaderLabel='tags'\n          />\n        ),\n      }),\n      ...securityColumns.slice(1),\n    ],\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}",
+          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      ...securityColumns.slice(0, 1),\n      securityColumnHelper.display({\n        id: 'tags',\n        header: 'Tags',\n        size: 240,\n        cell: ({ row }) => (\n          <OverflowList\n            className='gap-4'\n            items={row.original.tags}\n            itemRenderer={(item: string) => <Tag key={item}>{item}</Tag>}\n          />\n        ),\n      }),\n      ...securityColumns.slice(1),\n    ],\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}",
           "description": "A resizable column whose cell holds an `OverflowList`: the tags re-measure as the column\nnarrows instead of being clipped by it."
         },
         {