{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "files",
    "type": "registry:block",
    "title": "Files",
    "description": "A data screen: sidebar, a hero panel, a search and sort toolbar, a data table and pagination.",
    "registryDependencies": [
        "tokens",
        "tokens-console",
        "sidebar",
        "input",
        "button",
        "pagination",
        "checkbox",
        "menu"
    ],
    "meta": {
        "category": "Blocks",
        "layout": "screen",
        "theme": "console"
    },
    "files": [
        {
            "path": "blocks/files.html",
            "type": "registry:file",
            "target": "blocks/files.html",
            "content": "<!-- Files block\n     A data screen: sidebar plus a hero panel, a toolbar and a data table.\n     Composed from sidebar, input, button, table and pagination under the\n     console theme. -->\n\n<div class=\"dp-shell\">\n  <nav class=\"dp-sidebar\">\n    <div class=\"dp-sidebar-head\">\n      <span class=\"dp-sidebar-logo\">\n        <svg viewBox=\"0 0 294 82\" role=\"img\" aria-label=\"Dataprovider.com\"><g fill=\"currentColor\"><path d=\"M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z\"></path><path d=\"M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z\"></path><circle cx=\"77.71\" cy=\"71.82\" r=\"9.55\"></circle><path d=\"M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z\"></path></g></svg>\n      </span>\n      <button class=\"dp-sidebar-collapse\" type=\"button\" aria-label=\"Collapse sidebar\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m11 17-5-5 5-5\"></path><path d=\"m18 17-5-5 5-5\"></path></svg>\n      </button>\n    </div>\n    <div class=\"dp-sidebar-nav\">\n      <a class=\"dp-nav-item\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><path d=\"M9 22V12h6v10\"></path></svg>\n        Home\n      </a>\n      <a class=\"dp-nav-item\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"m16 8-6 2-2 6 6-2z\"></path></svg>\n        AI Navigator <span class=\"dp-nav-beta\">Beta</span>\n      </a>\n      <div class=\"dp-nav-group\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n        Library\n      </div>\n      <a class=\"dp-nav-item\" data-active href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z\"></path></svg>\n        Files\n      </a>\n      <a class=\"dp-nav-item\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect><path d=\"M9 9h6v6H9z\"></path></svg>\n        Dashboards\n      </a>\n      <a class=\"dp-nav-item\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><path d=\"M14 2v6h6\"></path></svg>\n        Recipes\n      </a>\n      <div class=\"dp-nav-group\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n        Products\n      </div>\n      <a class=\"dp-nav-item\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><path d=\"m21 21-4.3-4.3\"></path></svg>\n        Search Engine\n      </a>\n    </div>\n    <div class=\"dp-sidebar-foot\">\n      <span class=\"dp-avatar\" data-size=\"sm\" style=\"background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);\">CB</span>\n      <span class=\"dp-sidebar-user\">\n        <span class=\"dp-sidebar-user-name\">Christian Branbergen</span>\n        <span class=\"dp-sidebar-user-org\">Dataprovider BV</span>\n      </span>\n      <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\" data-size=\"sm\">Log out</button>\n    </div>\n  </nav>\n\n  <main class=\"dp-shell-main\">\n    <div class=\"dp-files-hero\">\n      <div class=\"dp-files-eyebrow\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z\"></path></svg>\n        Files\n      </div>\n      <h1 class=\"dp-files-title\">All your data in one place</h1>\n      <p class=\"dp-files-desc\">Access all your data from across our products. You can personalise your archive by creating folders and reorganising the structure to fit your needs.</p>\n      <button class=\"dp-btn\" type=\"button\" data-variant=\"primary\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z\"></path><path d=\"M12 10v6\"></path><path d=\"M9 13h6\"></path></svg>\n        Create folder\n      </button>\n      <p class=\"dp-files-trash\">Need to recover a deleted file? <a href=\"#\">View Trash</a></p>\n    </div>\n\n    <div class=\"dp-files-toolbar-head\">\n      <div class=\"dp-files-count\">All files <span>(1486)</span></div>\n      <a class=\"dp-files-create\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z\"></path><path d=\"M12 10v6\"></path><path d=\"M9 13h6\"></path></svg>\n        Create folder\n      </a>\n    </div>\n\n    <div class=\"dp-files-toolbar\">\n      <div class=\"dp-input-group\">\n        <svg class=\"dp-input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><path d=\"m21 21-4.3-4.3\"></path></svg>\n        <input class=\"dp-input\" type=\"search\" placeholder=\"Search files\" />\n      </div>\n      <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\">\n        Sort: Date created\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n      </button>\n    </div>\n\n    <table class=\"dp-files-list\">\n      <thead>\n        <tr>\n          <th style=\"width: 1%;\"><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select all\" /></th>\n          <th class=\"dp-col-name\">Name</th>\n          <th data-align=\"end\">Records</th>\n          <th>\n            <span class=\"dp-sort\">Date created\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m18 15-6-6-6 6\"></path></svg>\n            </span>\n          </th>\n          <th style=\"width: 1%;\"></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <span class=\"dp-file-chip\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\"></path><path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\"></path><path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\"></path><path d=\"M10 6h4M10 10h4M10 14h4M10 18h4\"></path></svg>\n              </span>\n              <b>Dataprovider BV</b> <span class=\"dp-files-count\">(7)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>--</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <span class=\"dp-file-chip\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"></path><path d=\"M14 2v5h5\"></path><path d=\"M12 18v-6\"></path><path d=\"m9 15 3 3 3-3\"></path></svg>\n              </span>\n              <b>Exports</b> <span class=\"dp-files-count\">(474)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>--</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <span class=\"dp-file-chip\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 3 4 4-4 4\"></path><path d=\"M20 7H4\"></path><path d=\"m8 21-4-4 4-4\"></path><path d=\"M4 17h16\"></path></svg>\n              </span>\n              <b>Sent to me</b> <span class=\"dp-files-count\">(66)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>--</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <span class=\"dp-file-chip\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"18\" cy=\"18\" r=\"3\"></circle><circle cx=\"6\" cy=\"6\" r=\"3\"></circle><path d=\"M6 9v6a9 9 0 0 0 9 9\"></path></svg>\n              </span>\n              <b>Migration insights</b> <span class=\"dp-files-count\">(1)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>--</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <svg class=\"dp-file-folder\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z\"></path></svg>\n              <b>Important data sets</b> <span class=\"dp-files-count\">(1)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>May 7, 2025, 11:05</td>\n          <td>\n            <div class=\"dp-menu\" data-open>\n              <button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\" aria-haspopup=\"true\" aria-expanded=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button>\n              <ul class=\"dp-menu-list\" role=\"menu\">\n                <li role=\"none\"><a class=\"dp-menu-item\" role=\"menuitem\" href=\"#\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m15 14 5-5-5-5\"></path><path d=\"M4 20v-7a4 4 0 0 1 4-4h12\"></path></svg> Move</a></li>\n                <li role=\"none\"><button class=\"dp-menu-item\" role=\"menuitem\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\"></path><path d=\"M10 6h4M10 10h4M10 14h4M10 18h4\"></path></svg> Move to company</button></li>\n                <li role=\"none\"><a class=\"dp-menu-item\" role=\"menuitem\" href=\"#\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20h9\"></path><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\"></path></svg> Rename</a></li>\n                <li role=\"none\"><button class=\"dp-menu-item\" role=\"menuitem\" type=\"button\" data-tone=\"danger\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18\"></path><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"></path><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg> Trash</button></li>\n              </ul>\n            </div>\n          </td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <svg class=\"dp-file-folder\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z\"></path></svg>\n              <b>KYC Markmonitor Dashboards</b> <span class=\"dp-files-count\">(3)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>Apr 9, 2024, 17:17</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <svg class=\"dp-file-folder\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z\"></path></svg>\n              <b>Upsell and new customer ideas</b> <span class=\"dp-files-count\">(12)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>--</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <svg class=\"dp-file-folder\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z\"></path></svg>\n              <b>Research</b> <span class=\"dp-files-count\">(5)</span>\n            </span>\n          </td>\n          <td data-align=\"end\">--</td>\n          <td>Sep 27, 2021, 12:22</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <svg class=\"dp-file-doc\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"></path><path d=\"M14 2v5h5\"></path><circle cx=\"9.5\" cy=\"14.5\" r=\"2.5\"></circle><path d=\"m13 18-1.8-1.8\"></path></svg>\n              <span class=\"dp-files-filetext\">\n                <b>ZoomInfo enrichment</b>\n                <span class=\"dp-files-sub\">Search Engine</span>\n              </span>\n            </span>\n          </td>\n          <td data-align=\"end\">43.67M</td>\n          <td>Jun 11, 2026, 13:43</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n        <tr>\n          <td><input class=\"dp-checkbox\" type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <span class=\"dp-files-folder\">\n              <svg class=\"dp-file-doc\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"></path><path d=\"M14 2v5h5\"></path><circle cx=\"9.5\" cy=\"14.5\" r=\"2.5\"></circle><path d=\"m13 18-1.8-1.8\"></path></svg>\n              <span class=\"dp-files-filetext\">\n                <b>Migration insights Hosting company is OVH</b>\n                <span class=\"dp-files-sub\">Search Engine</span>\n              </span>\n            </span>\n          </td>\n          <td data-align=\"end\">6.57M</td>\n          <td>Jun 4, 2026, 08:28</td>\n          <td><button class=\"dp-icon-btn\" type=\"button\" aria-label=\"More actions\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"12\" r=\"1.6\"></circle><circle cx=\"12\" cy=\"19\" r=\"1.6\"></circle></svg></button></td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div class=\"dp-files-pagination\">\n      <nav class=\"dp-pagination\" aria-label=\"Pagination\">\n        <button class=\"dp-page\" type=\"button\" disabled aria-label=\"Previous page\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m15 18-6-6 6-6\"></path></svg>\n        </button>\n        <a class=\"dp-page\" href=\"#\" aria-current=\"page\">1</a>\n        <a class=\"dp-page\" href=\"#\">2</a>\n        <a class=\"dp-page\" href=\"#\">3</a>\n        <span class=\"dp-page-ellipsis\" aria-hidden=\"true\">&hellip;</span>\n        <a class=\"dp-page\" href=\"#\">60</a>\n        <button class=\"dp-page\" type=\"button\" aria-label=\"Next page\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg>\n        </button>\n      </nav>\n    </div>\n  </main>\n</div>\n"
        },
        {
            "path": "blocks/files.css",
            "type": "registry:file",
            "target": "blocks/files.css",
            "content": "/* Files block\n   A data screen: sidebar plus a hero panel, a toolbar and a data table.\n   Composed from sidebar, input, button, table and pagination under the console\n   theme. */\n\n.dp-files-hero {\n  margin-bottom: var(--dp-space-8);\n  padding: var(--dp-space-10);\n  text-align: center;\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n}\n\n.dp-files-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dp-space-2);\n  margin-bottom: var(--dp-space-3);\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n\n.dp-files-eyebrow svg {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n\n.dp-files-title {\n  margin: 0 0 var(--dp-space-3);\n  font-size: var(--dp-text-3xl);\n  font-weight: var(--dp-weight-extrabold);\n  color: var(--dp-navy);\n}\n\n.dp-files-desc {\n  max-width: 48ch;\n  margin: 0 auto var(--dp-space-6);\n  color: var(--dp-text-muted);\n}\n\n.dp-files-trash {\n  margin: var(--dp-space-4) 0 0;\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n\n.dp-files-trash a {\n  color: var(--dp-link);\n  font-weight: var(--dp-weight-semibold);\n}\n\n.dp-files-toolbar-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dp-space-4);\n  margin-bottom: var(--dp-space-4);\n}\n\n.dp-files-count {\n  font-size: var(--dp-text-lg);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-files-count span {\n  color: var(--dp-text-muted);\n  font-weight: var(--dp-weight-regular);\n}\n\n.dp-files-create {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dp-space-2);\n  color: var(--dp-link);\n  font-weight: var(--dp-weight-semibold);\n  font-size: var(--dp-text-sm);\n  text-decoration: none;\n}\n\n.dp-files-create svg {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n\n.dp-files-toolbar {\n  display: flex;\n  gap: var(--dp-space-3);\n  margin-bottom: var(--dp-space-4);\n}\n\n.dp-files-toolbar .dp-input-group {\n  flex: 1;\n}\n\n/* Flat data list, like the console Files table (no outer card) */\n.dp-files-list {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.dp-files-list thead th {\n  text-align: left;\n  padding: var(--dp-space-3) var(--dp-space-4);\n  font-size: var(--dp-text-base);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n  border-bottom: 1px solid var(--dp-border);\n  white-space: nowrap;\n}\n\n/* Name column takes the remaining width, pushing the rest to the right */\n.dp-files-list thead th.dp-col-name {\n  width: 100%;\n}\n\n.dp-files-list .dp-sort {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.dp-files-list .dp-sort svg {\n  width: 0.9rem;\n  height: 0.9rem;\n}\n\n.dp-files-list tbody td {\n  padding: var(--dp-space-4);\n  border-bottom: 1px solid var(--dp-border);\n  font-size: var(--dp-text-base);\n  color: var(--dp-text-muted);\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n.dp-files-list tbody tr:hover {\n  background: var(--dp-surface-subtle);\n}\n\n.dp-files-folder {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-4);\n}\n\n.dp-files-folder b {\n  color: var(--dp-navy);\n  font-weight: var(--dp-weight-bold);\n  font-size: var(--dp-text-base);\n}\n\n.dp-files-folder .dp-files-count {\n  color: var(--dp-text-muted);\n}\n\n/* System folder: icon in a grey rounded chip */\n.dp-file-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  flex: none;\n  border-radius: var(--dp-radius-sm);\n  background: var(--dp-neutral-300);\n  color: var(--dp-neutral-600);\n}\n\n.dp-file-chip svg {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n/* User folder: filled periwinkle folder */\n.dp-file-folder {\n  width: 2.25rem;\n  height: 2.25rem;\n  flex: none;\n  color: #8b93f0;\n}\n\n/* File: document with a search badge */\n.dp-file-doc {\n  width: 2.25rem;\n  height: 2.25rem;\n  flex: none;\n  color: var(--dp-text-subtle);\n}\n\n/* Stacked name + source subtitle for dataset files */\n.dp-files-filetext {\n  display: flex;\n  flex-direction: column;\n  line-height: 1.3;\n}\n\n.dp-files-sub {\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-regular);\n  color: var(--dp-text-muted);\n}\n\n/* Right-aligned numeric column */\n.dp-files-list th[data-align=\"end\"],\n.dp-files-list td[data-align=\"end\"] {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n/* The row action menu opens from the right edge */\n.dp-files-list .dp-menu-list {\n  right: 0;\n  left: auto;\n}\n\n/* Kebab action button: a bordered square */\n.dp-icon-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-sm);\n  background: var(--dp-surface);\n  color: var(--dp-text-muted);\n  cursor: pointer;\n}\n\n.dp-icon-btn:hover {\n  background: var(--dp-surface-soft);\n  color: var(--dp-navy);\n}\n\n.dp-icon-btn svg {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n\n.dp-files-pagination {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: var(--dp-space-5);\n}\n"
        }
    ]
}