@neo4j-ndl/react 4.9.16 → 4.9.18

package/lib/esm/drawer/stories/drawer-overlay.story.js

@@ -23,9 +23,11 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { Drawer, FilledButton } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
-    const [isExpanded, setIsExpanded] = useState(true);
-    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), children: "Press to show the Drawer" }) }) }));
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", children: [_jsx(Drawer.Header, { children: "Drawer Header" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
+    const [isExpanded, setIsExpanded] = useState(false);
+    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                    'aria-expanded': isExpanded,
+                }, children: "Press to show the Drawer" }) }) }));
+    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", ariaLabel: "Drawer", closeOnClickOutside: true, closeOnFocusOut: true, style: { maxWidth: '400px' }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: ["If you use an overlay drawer, and there is a risk that it covers interactive elements, you should set ", _jsx("code", { children: "closeOnClickOutside" }), ' ', "and ", _jsx("code", { children: "closeOnFocusOut" }), " to true. This prevents it from hiding focus, making it more accessible."] }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-overlay.story.js.map

package/lib/esm/drawer/stories/drawer-overlay.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-overlay.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,IAAI,EAAC,SAAS,aAEd,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton onClick={() => setIsExpanded(true)}>\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        type=\"overlay\"\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-overlay.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,QAAQ,EAClB,mBAAmB,EAAE,IAAI,EACzB,eAAe,EAAE,IAAI,EACrB,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aAE5B,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,yHAE2B,iDAAgC,EAAC,GAAG,UACrE,6CAA4B,gFAEpB,EACd,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        type=\"overlay\"\n        ariaLabel=\"Drawer\"\n        closeOnClickOutside={true}\n        closeOnFocusOut={true}\n        style={{ maxWidth: '400px' }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          If you use an overlay drawer, and there is a risk that it covers\n          interactive elements, you should set <code>closeOnClickOutside</code>{' '}\n          and <code>closeOnFocusOut</code> to true. This prevents it from hiding\n          focus, making it more accessible.\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-portaled.story.js

@@ -20,17 +20,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
-import { Drawer, FilledButton } from '@neo4j-ndl/react';
-import { useState } from 'react';
+import { Drawer, DropdownButton, FilledButton, Menu } from '@neo4j-ndl/react';
+import { useRef, useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(false);
-    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), children: "Press to show the Drawer" }) }) }));
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "overlay", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
-                    maxWidth: '400px',
-                    minWidth: '300px',
-                }, isPortaled: true, portalProps: {
-                    id: 'storybook-root',
-                }, children: [_jsx(Drawer.Header, { children: "Drawer Header" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                    'aria-expanded': isExpanded,
+                }, children: "Press to show the Drawer" }) }) }));
+    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "modal", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", closeOnEscape: true, ariaLabel: "Drawer", htmlAttributes: {
+                    id: 'drawer',
+                }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: ["Lorem ipsum dolor sit amet.", ' ', _jsx(DropdownButton, { ref: anchorRef, onClick: () => setIsMenuOpen(true), children: "Dropdown Button" }), _jsxs(Menu, { strategy: "fixed", portalTarget: document.getElementById('drawer'), anchorRef: anchorRef, isOpen: isMenuOpen, onClose: () => setIsMenuOpen(false), children: [_jsx(Menu.Item, { title: "Menu Item 1" }), _jsx(Menu.Item, { title: "Menu Item 2" }), _jsx(Menu.Item, { title: "Menu Item 3" })] })] }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-portaled.story.js.map

package/lib/esm/drawer/stories/drawer-portaled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-portaled.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-portaled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,EACD,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE;oBACX,EAAE,EAAE,gBAAgB;iBACrB,aAED,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton onClick={() => setIsExpanded(true)}>\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"overlay\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n        isPortaled={true}\n        portalProps={{\n          id: 'storybook-root',\n        }}\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-portaled.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-portaled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,aAAa,EAAE,IAAI,EACnB,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAE;oBACd,EAAE,EAAE,QAAQ;iBACb,aAED,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,8CACkB,GAAG,EAC/B,KAAC,cAAc,IAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,gCAEjD,EACjB,MAAC,IAAI,IACH,QAAQ,EAAC,OAAO,EAChB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC/C,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAEnC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,EACjC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,EACjC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,IAC5B,IACK,EACd,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, DropdownButton, FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"modal\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        closeOnEscape={true}\n        ariaLabel=\"Drawer\"\n        htmlAttributes={{\n          id: 'drawer',\n        }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          Lorem ipsum dolor sit amet.{' '}\n          <DropdownButton ref={anchorRef} onClick={() => setIsMenuOpen(true)}>\n            Dropdown Button\n          </DropdownButton>\n          <Menu\n            strategy=\"fixed\"\n            portalTarget={document.getElementById('drawer')}\n            anchorRef={anchorRef}\n            isOpen={isMenuOpen}\n            onClose={() => setIsMenuOpen(false)}\n          >\n            <Menu.Item title=\"Menu Item 1\" />\n            <Menu.Item title=\"Menu Item 2\" />\n            <Menu.Item title=\"Menu Item 3\" />\n          </Menu>\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-push.story.js

@@ -23,8 +23,10 @@ import { Drawer, FilledButton } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), children: "Press to show the Drawer" }) }) }));
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer Header" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
+    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                    'aria-expanded': isExpanded,
+                }, children: "Press to show the Drawer" }) }) }));
+    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-push.story.js.map

package/lib/esm/drawer/stories/drawer-push.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-push.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton onClick={() => setIsExpanded(true)}>\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-push.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-resizable.story.js

@@ -24,11 +24,13 @@ import { Drawer, FilledButton } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), children: "Press to show the Drawer" }) }) }));
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "overlay", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
+    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                    'aria-expanded': isExpanded,
+                }, children: "Press to show the Drawer" }) }) }));
+    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
                     maxWidth: '400px',
                     minWidth: '300px',
-                }, children: [_jsx(Drawer.Header, { children: "Drawer Header" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
+                }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-resizable.story.js.map

package/lib/esm/drawer/stories/drawer-resizable.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-resizable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,aAED,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton onClick={() => setIsExpanded(true)}>\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"overlay\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-resizable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,aAED,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-right-side.story.js

@@ -24,8 +24,10 @@ import { Drawer, FilledButton } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), children: "Press to show the Drawer" }) }) }));
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsx(Placeholder, {}), _jsxs(Drawer, { type: "overlay", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "right", children: [_jsx(Drawer.Header, { children: "Drawer Header" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] })] }));
+    const Placeholder = () => (_jsx("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                    'aria-expanded': isExpanded,
+                }, children: "Press to show the Drawer" }) }) }));
+    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsx(Placeholder, {}), _jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "right", children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] })] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-right-side.story.js.map

package/lib/esm/drawer/stories/drawer-right-side.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-right-side.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,KAAC,WAAW,KAAG,EACf,MAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,OAAO,aAEhB,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton onClick={() => setIsExpanded(true)}>\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Placeholder />\n      <Drawer\n        type=\"overlay\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"right\"\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-right-side.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,KAAC,WAAW,KAAG,EACf,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,OAAO,aAEhB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Placeholder />\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"right\"\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-scrollable.story.js

@@ -24,8 +24,10 @@ import { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    const Placeholder = () => (_jsx("div", { className: "w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), children: "Press to show the Drawer" }) }) }));
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "overlay", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer Header" }), _jsxs(Drawer.Body, { children: [_jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", isDisabled: true, value: "something" }), _jsx("br", {}), _jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" })] })] }), _jsx(Placeholder, {})] }));
+    const Placeholder = () => (_jsx("div", { className: "w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: _jsx("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                    'aria-expanded': isExpanded,
+                }, children: "Press to show the Drawer" }) }) }));
+    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: [_jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", isDisabled: true, value: "something" }), _jsx("br", {}), _jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" })] })] }), _jsx(Placeholder, {})] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-scrollable.story.js.map

package/lib/esm/drawer/stories/drawer-scrollable.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-scrollable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-scrollable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,MAAC,MAAM,CAAC,IAAI,eACV,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,cAAM,EACN,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,IACP,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton onClick={() => setIsExpanded(true)}>\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"overlay\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n          <br />\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n        </Drawer.Body>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-scrollable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-scrollable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,eACV,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,cAAM,EACN,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,IACP,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n          <br />\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n        </Drawer.Body>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/types/_common/readme-docs-page.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export declare function createReadmeDocsPage(markdownContent: string): () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=readme-docs-page.d.ts.map

package/lib/types/_common/readme-docs-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readme-docs-page.d.ts","sourceRoot":"","sources":["../../../src/_common/readme-docs-page.tsx"],"names":[],"mappings":"AA8CA,wBAAgB,oBAAoB,CAAC,eAAe,EAAE,MAAM,iDAK3D"}

package/lib/types/drawer/Drawer.d.ts

@@ -24,11 +24,11 @@ import type React from 'react';
 import { type ComponentProps } from 'react';
 import { type HtmlAttributes, type PolymorphicCommonProps } from '../_common/types';
 type DrawerPosition = 'left' | 'right';
-type DrawerType = 'overlay' | 'push';
+type DrawerType = 'overlay' | 'push' | 'modal';
 type DrawerProps = {
     /** Controls whether the drawer is open (expanded) or closed (collapsed). */
     isExpanded: boolean;
-    /** Callback functions fired when the drawer's expanded state changes. */
+    /** Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). */
     onExpandedChange?: (expanded: boolean) => void;
     /** Position where the drawer appears on screen. By default, it appears from the left. */
     position?: DrawerPosition;
@@ -40,18 +40,43 @@ type DrawerProps = {
     resizeableProps?: ResizableProps;
     /** Whether a close button (X) is displayed in the drawer. */
     isCloseable?: boolean;
-    /** Whether to portal the content */
+    /** Whether to portal the content. Only applies when type is "overlay". Type "modal" is always portaled.*/
     isPortaled?: boolean;
+    /**
+     * Whether pressing Escape closes the drawer.
+     * - When type is "modal", this defaults to true.
+     * - When type is "overlay", this defaults to false.
+     * - When type is "push", no effect.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * When type is "overlay", whether clicking outside the drawer closes it.
+     * - When type is "overlay" or "modal", this defaults to false.
+     * - When type is "push", no effect.
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Whether tabbing focus outside the drawer closes it.
+     * - When type is "overlay", this defaults to false.
+     * - When type is "push" or "modal", no effect.
+     */
+    closeOnFocusOut?: boolean;
     /** The content to display within the drawer. */
     children: React.ReactNode;
-    /** Additional CSS classes to apply to the drawer container. */
-    className?: string;
     /**
      * Props to pass to the portal from @floating-ui/react FloatingPortal
+     * Only applies when type is "overlay" and isPortaled is true, or if type is "modal".
      * @see https://floating-ui.com/docs/floatingportal
      */
     portalProps?: ComponentProps<typeof FloatingPortal>;
-};
+} & ({
+    type: 'modal';
+    /** The aria-label to apply to the drawer. Required for accessibility when type is "modal" or "overlay".*/
+    ariaLabel: string;
+} | {
+    type?: 'push' | 'overlay';
+    ariaLabel?: string;
+});
 type DrawerHeaderProps = {
     children: React.ReactNode;
     className?: string;
@@ -68,7 +93,7 @@ type DrawerBodyProps = {
     htmlAttributes?: HtmlAttributes<'div'>;
 };
 declare const Drawer: {
-    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, htmlAttributes, style, ref, as, ...restProps }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, closeOnEscape, closeOnClickOutside, closeOnFocusOut, ariaLabel, htmlAttributes, style, ref, as, ...restProps }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 } & {
     Actions: ({ children, className, htmlAttributes, ...restProps }: DrawerActionsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAM1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAErC,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,CAAC;AA2IF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AA8BF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAiBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAmBF,QAAA,MAAM,MAAM;KAtNV,CAAC,SAAS,KAAK,CAAC,WAAW,oMAkB1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qEAmKtC,kBAAkB;kEAqBlB,eAAe;oEAvDf,iBAAiB;CAuElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,6HAA6H;IAC7H,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,0GAA0G;IAC1G,SAAS,EAAE,MAAM,CAAC;CACnB,GACD;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACJ,CAAC;AAwXF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AA8BF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAiBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAmBF,QAAA,MAAM,MAAM;KAzXV,CAAC,SAAS,KAAK,CAAC,WAAW,oQAsB1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qEAkUtC,kBAAkB;kEAqBlB,eAAe;oEAvDf,iBAAiB;CAuElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/types/drawer/stories/drawer-full.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-full.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-full.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA0Ed,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-full.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-full.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA+Ed,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/drawer/stories/drawer-not-closeable.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-not-closeable.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-not-closeable.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA4Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-not-closeable.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-not-closeable.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAgBd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/drawer/stories/drawer-overlay.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-overlay.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA+Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-overlay.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA6Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/drawer/stories/drawer-portaled.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-portaled.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-portaled.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAyCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-portaled.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-portaled.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA4Dd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/drawer/stories/drawer-push.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-push.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,QAAA,MAAM,SAAS,+CA+Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-push.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,QAAA,MAAM,SAAS,+CAoCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/drawer/stories/drawer-resizable.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-resizable.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAqCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-resizable.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA0Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/drawer/stories/drawer-right-side.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-right-side.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAgCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-right-side.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAqCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/drawer/stories/drawer-scrollable.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-scrollable.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-scrollable.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CA8Dd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"drawer-scrollable.story.d.ts","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-scrollable.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAmEd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.9.16",
+  "version": "4.9.18",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -53,6 +53,7 @@
     "@axe-core/playwright": "4.10.2",
     "@playwright/experimental-ct-react": "1.56.0",
     "@playwright/test": "1.56.0",
+    "@storybook/addon-docs": "10.2.3",
     "@storybook/react-vite": "9.1.5",
     "@svgr/cli": "6.5.1",
     "@tanstack/react-virtual": "3.13.12",
@@ -85,7 +86,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.9.6"
+    "@neo4j-ndl/base": "^4.9.8"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",