@neo4j-ndl/react 4.25.8 → 5.0.0-alpha.0.3d763f7

package/lib/cjs/banner/stories/banner-variants.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "info", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type info." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "success", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type success." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "warning", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type warning." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "danger", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type danger." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "neutral", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Neutral" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type neutral." })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "info", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type info." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "success", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type success." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "warning", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type warning." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "danger", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type danger." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "neutral", children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Neutral" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type neutral." })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=banner-variants.story.js.map

package/lib/cjs/banner/stories/banner-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner-variants.story.js","sourceRoot":"","sources":["../../../../src/banner/stories/banner-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,wBAAC,cAAM,IAAC,OAAO,EAAC,MAAM,aACpB,uBAAC,cAAM,CAAC,MAAM,uBAAqB,EACnC,uBAAC,cAAM,CAAC,WAAW,iDAAoD,IAChE,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,aACvB,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,aACvB,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,QAAQ,aACtB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,WAAW,mDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,aACvB,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Banner } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8\">\n      <Banner variant=\"info\">\n        <Banner.Header>Info</Banner.Header>\n        <Banner.Description>This is a banner of type info.</Banner.Description>\n      </Banner>\n      <Banner variant=\"success\">\n        <Banner.Header>Success</Banner.Header>\n        <Banner.Description>\n          This is a banner of type success.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"warning\">\n        <Banner.Header>Warning</Banner.Header>\n        <Banner.Description>\n          This is a banner of type warning.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"danger\">\n        <Banner.Header>Danger</Banner.Header>\n        <Banner.Description>\n          This is a banner of type danger.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"neutral\">\n        <Banner.Header>Neutral</Banner.Header>\n        <Banner.Description>\n          This is a banner of type neutral.\n        </Banner.Description>\n      </Banner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"banner-variants.story.js","sourceRoot":"","sources":["../../../../src/banner/stories/banner-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,wBAAC,cAAM,IAAC,OAAO,EAAC,MAAM,aACpB,uBAAC,cAAM,CAAC,MAAM,uBAAqB,EACnC,uBAAC,cAAM,CAAC,WAAW,iDAAoD,IAChE,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,aACvB,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,aACvB,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,QAAQ,aACtB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,WAAW,mDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,aACvB,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Banner } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-8\">\n      <Banner variant=\"info\">\n        <Banner.Header>Info</Banner.Header>\n        <Banner.Description>This is a banner of type info.</Banner.Description>\n      </Banner>\n      <Banner variant=\"success\">\n        <Banner.Header>Success</Banner.Header>\n        <Banner.Description>\n          This is a banner of type success.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"warning\">\n        <Banner.Header>Warning</Banner.Header>\n        <Banner.Description>\n          This is a banner of type warning.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"danger\">\n        <Banner.Header>Danger</Banner.Header>\n        <Banner.Description>\n          This is a banner of type danger.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"neutral\">\n        <Banner.Header>Neutral</Banner.Header>\n        <Banner.Description>\n          This is a banner of type neutral.\n        </Banner.Description>\n      </Banner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/banner/stories/banner-with-icons.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "info", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type info." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "success", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type success." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "warning", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type warning." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "danger", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type danger." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "neutral", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Neutral" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type neutral." })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "info", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Info" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type info." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "success", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Success" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type success." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "warning", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Warning" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type warning." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "danger", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Danger" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type danger." })] }), (0, jsx_runtime_1.jsxs)(react_1.Banner, { variant: "neutral", hasIcon: true, children: [(0, jsx_runtime_1.jsx)(react_1.Banner.Header, { children: "Neutral" }), (0, jsx_runtime_1.jsx)(react_1.Banner.Description, { children: "This is a banner of type neutral." })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=banner-with-icons.story.js.map

package/lib/cjs/banner/stories/banner-with-icons.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner-with-icons.story.js","sourceRoot":"","sources":["../../../../src/banner/stories/banner-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,wBAAC,cAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,aAClC,uBAAC,cAAM,CAAC,MAAM,uBAAqB,EACnC,uBAAC,cAAM,CAAC,WAAW,iDAAoD,IAChE,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,aACrC,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,aACrC,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,aACpC,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,WAAW,mDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,aACrC,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Banner } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8\">\n      <Banner variant=\"info\" hasIcon={true}>\n        <Banner.Header>Info</Banner.Header>\n        <Banner.Description>This is a banner of type info.</Banner.Description>\n      </Banner>\n      <Banner variant=\"success\" hasIcon={true}>\n        <Banner.Header>Success</Banner.Header>\n        <Banner.Description>\n          This is a banner of type success.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"warning\" hasIcon={true}>\n        <Banner.Header>Warning</Banner.Header>\n        <Banner.Description>\n          This is a banner of type warning.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"danger\" hasIcon={true}>\n        <Banner.Header>Danger</Banner.Header>\n        <Banner.Description>\n          This is a banner of type danger.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"neutral\" hasIcon={true}>\n        <Banner.Header>Neutral</Banner.Header>\n        <Banner.Description>\n          This is a banner of type neutral.\n        </Banner.Description>\n      </Banner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"banner-with-icons.story.js","sourceRoot":"","sources":["../../../../src/banner/stories/banner-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,wBAAC,cAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,aAClC,uBAAC,cAAM,CAAC,MAAM,uBAAqB,EACnC,uBAAC,cAAM,CAAC,WAAW,iDAAoD,IAChE,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,aACrC,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,aACrC,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,aACpC,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,WAAW,mDAEE,IACd,EACT,wBAAC,cAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,aACrC,uBAAC,cAAM,CAAC,MAAM,0BAAwB,EACtC,uBAAC,cAAM,CAAC,WAAW,oDAEE,IACd,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Banner } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-8\">\n      <Banner variant=\"info\" hasIcon={true}>\n        <Banner.Header>Info</Banner.Header>\n        <Banner.Description>This is a banner of type info.</Banner.Description>\n      </Banner>\n      <Banner variant=\"success\" hasIcon={true}>\n        <Banner.Header>Success</Banner.Header>\n        <Banner.Description>\n          This is a banner of type success.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"warning\" hasIcon={true}>\n        <Banner.Header>Warning</Banner.Header>\n        <Banner.Description>\n          This is a banner of type warning.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"danger\" hasIcon={true}>\n        <Banner.Header>Danger</Banner.Header>\n        <Banner.Description>\n          This is a banner of type danger.\n        </Banner.Description>\n      </Banner>\n      <Banner variant=\"neutral\" hasIcon={true}>\n        <Banner.Header>Neutral</Banner.Header>\n        <Banner.Description>\n          This is a banner of type neutral.\n        </Banner.Description>\n      </Banner>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/breadcrumbs/stories/breadcrumbs-header.story.js

@@ -28,7 +28,7 @@ const react_2 = require("react");
 const Component = () => {
     const [isOrganizationMenuOpen, setIsOrganizationMenuOpen] = (0, react_2.useState)(false);
     const organizationMenuRef = (0, react_2.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Breadcrumbs, { shouldWrap: false, children: [(0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.Item, { className: "n-mr-token-8", children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Home", className: "n-rounded-sm focus-visible:n-outline-2 focus-visible:n-outline-offset-[3px] focus-visible:n-outline-primary-focus n-shrink-0", children: (0, jsx_runtime_1.jsx)(icons_1.Neo4JIconColorIcon, { className: "n-h-6 n-w-[26px]" }) }) }), (0, jsx_runtime_1.jsxs)(react_1.Breadcrumbs.Item, { children: [(0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.Button, { leadingElement: (0, jsx_runtime_1.jsx)(icons_1.BuildingOffice2IconOutline, {}), children: "Organization 1" }), (0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.SelectButton, { ref: organizationMenuRef, ariaLabel: "Open organization menu", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Breadcrumbs, { shouldWrap: false, children: [(0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.Item, { className: "mr-token-8", children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Home", className: "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary-focus shrink-0", children: (0, jsx_runtime_1.jsx)(icons_1.Neo4JIconColorIcon, { className: "h-6 w-[26px]" }) }) }), (0, jsx_runtime_1.jsxs)(react_1.Breadcrumbs.Item, { children: [(0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.Button, { leadingElement: (0, jsx_runtime_1.jsx)(icons_1.BuildingOffice2IconOutline, {}), children: "Organization 1" }), (0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.SelectButton, { ref: organizationMenuRef, ariaLabel: "Open organization menu", onClick: () => {
                             setIsOrganizationMenuOpen((prev) => !prev);
                         }, isActive: isOrganizationMenuOpen, children: (0, jsx_runtime_1.jsxs)(react_1.Menu, { anchorRef: organizationMenuRef, isOpen: isOrganizationMenuOpen, onClose: () => setIsOrganizationMenuOpen(false), children: [(0, jsx_runtime_1.jsxs)(react_1.Menu.Group, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.RadioItem, { title: "Organization 1", isChecked: true }), (0, jsx_runtime_1.jsx)(react_1.Menu.RadioItem, { title: "Organization 2", isChecked: false })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.Menu.Group, { children: (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "All Organizations" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.Breadcrumbs.Item, { children: [(0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.Button, { leadingElement: (0, jsx_runtime_1.jsx)(icons_1.CubeIconOutline, {}), children: "Project 1" }), (0, jsx_runtime_1.jsx)(react_1.Breadcrumbs.SelectButton, { ariaLabel: "Open project menu" })] })] }));
 };

package/lib/cjs/breadcrumbs/stories/breadcrumbs-header.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs-header.story.js","sourceRoot":"","sources":["../../../../src/breadcrumbs/stories/breadcrumbs-header.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAqD;AACrD,kDAIgC;AAChC,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAE5D,OAAO,CACL,wBAAC,mBAAW,IAAC,UAAU,EAAE,KAAK,aAC5B,uBAAC,mBAAW,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,YACxC,mCACE,IAAI,EAAC,QAAQ,gBACF,MAAM,EACjB,SAAS,EAAC,8HAA8H,YAExI,uBAAC,0BAAkB,IAAC,SAAS,EAAC,kBAAkB,GAAG,GAC5C,GACQ,EACnB,wBAAC,mBAAW,CAAC,IAAI,eACf,uBAAC,mBAAW,CAAC,MAAM,IAAC,cAAc,EAAE,uBAAC,kCAA0B,KAAG,+BAE7C,EACrB,uBAAC,mBAAW,CAAC,YAAY,IACvB,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,GAAG,EAAE;4BACZ,yBAAyB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;wBAC7C,CAAC,EACD,QAAQ,EAAE,sBAAsB,YAEhC,wBAAC,YAAI,IACH,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,sBAAsB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC,aAE/C,wBAAC,YAAI,CAAC,KAAK,eACT,uBAAC,YAAI,CAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,IAAI,GAAI,EAC1D,uBAAC,YAAI,CAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,KAAK,GAAI,IAChD,EACb,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,KAAK,cACT,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB,GAAG,GAC5B,IACR,GACkB,IACV,EACnB,wBAAC,mBAAW,CAAC,IAAI,eACf,uBAAC,mBAAW,CAAC,MAAM,IAAC,cAAc,EAAE,uBAAC,uBAAe,KAAG,0BAElC,EACrB,uBAAC,mBAAW,CAAC,YAAY,IAAC,SAAS,EAAC,mBAAmB,GAA4B,IAClE,IACP,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Breadcrumbs, Menu } from '@neo4j-ndl/react';\nimport {\n  BuildingOffice2IconOutline,\n  CubeIconOutline,\n  Neo4JIconColorIcon,\n} from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isOrganizationMenuOpen, setIsOrganizationMenuOpen] = useState(false);\n  const organizationMenuRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <Breadcrumbs shouldWrap={false}>\n      <Breadcrumbs.Item className=\"n-mr-token-8\">\n        <button\n          type=\"button\"\n          aria-label=\"Home\"\n          className=\"n-rounded-sm focus-visible:n-outline-2 focus-visible:n-outline-offset-[3px] focus-visible:n-outline-primary-focus n-shrink-0\"\n        >\n          <Neo4JIconColorIcon className=\"n-h-6 n-w-[26px]\" />\n        </button>\n      </Breadcrumbs.Item>\n      <Breadcrumbs.Item>\n        <Breadcrumbs.Button leadingElement={<BuildingOffice2IconOutline />}>\n          Organization 1\n        </Breadcrumbs.Button>\n        <Breadcrumbs.SelectButton\n          ref={organizationMenuRef}\n          ariaLabel=\"Open organization menu\"\n          onClick={() => {\n            setIsOrganizationMenuOpen((prev) => !prev);\n          }}\n          isActive={isOrganizationMenuOpen}\n        >\n          <Menu\n            anchorRef={organizationMenuRef}\n            isOpen={isOrganizationMenuOpen}\n            onClose={() => setIsOrganizationMenuOpen(false)}\n          >\n            <Menu.Group>\n              <Menu.RadioItem title=\"Organization 1\" isChecked={true} />\n              <Menu.RadioItem title=\"Organization 2\" isChecked={false} />\n            </Menu.Group>\n            <Menu.Divider />\n            <Menu.Group>\n              <Menu.Item title=\"All Organizations\" />\n            </Menu.Group>\n          </Menu>\n        </Breadcrumbs.SelectButton>\n      </Breadcrumbs.Item>\n      <Breadcrumbs.Item>\n        <Breadcrumbs.Button leadingElement={<CubeIconOutline />}>\n          Project 1\n        </Breadcrumbs.Button>\n        <Breadcrumbs.SelectButton ariaLabel=\"Open project menu\"></Breadcrumbs.SelectButton>\n      </Breadcrumbs.Item>\n    </Breadcrumbs>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"breadcrumbs-header.story.js","sourceRoot":"","sources":["../../../../src/breadcrumbs/stories/breadcrumbs-header.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAqD;AACrD,kDAIgC;AAChC,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAE5D,OAAO,CACL,wBAAC,mBAAW,IAAC,UAAU,EAAE,KAAK,aAC5B,uBAAC,mBAAW,CAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YACtC,mCACE,IAAI,EAAC,QAAQ,gBACF,MAAM,EACjB,SAAS,EAAC,oHAAoH,YAE9H,uBAAC,0BAAkB,IAAC,SAAS,EAAC,cAAc,GAAG,GACxC,GACQ,EACnB,wBAAC,mBAAW,CAAC,IAAI,eACf,uBAAC,mBAAW,CAAC,MAAM,IAAC,cAAc,EAAE,uBAAC,kCAA0B,KAAG,+BAE7C,EACrB,uBAAC,mBAAW,CAAC,YAAY,IACvB,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,GAAG,EAAE;4BACZ,yBAAyB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;wBAC7C,CAAC,EACD,QAAQ,EAAE,sBAAsB,YAEhC,wBAAC,YAAI,IACH,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,sBAAsB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC,aAE/C,wBAAC,YAAI,CAAC,KAAK,eACT,uBAAC,YAAI,CAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,IAAI,GAAI,EAC1D,uBAAC,YAAI,CAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,KAAK,GAAI,IAChD,EACb,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,KAAK,cACT,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB,GAAG,GAC5B,IACR,GACkB,IACV,EACnB,wBAAC,mBAAW,CAAC,IAAI,eACf,uBAAC,mBAAW,CAAC,MAAM,IAAC,cAAc,EAAE,uBAAC,uBAAe,KAAG,0BAElC,EACrB,uBAAC,mBAAW,CAAC,YAAY,IAAC,SAAS,EAAC,mBAAmB,GAA4B,IAClE,IACP,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Breadcrumbs, Menu } from '@neo4j-ndl/react';\nimport {\n  BuildingOffice2IconOutline,\n  CubeIconOutline,\n  Neo4JIconColorIcon,\n} from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isOrganizationMenuOpen, setIsOrganizationMenuOpen] = useState(false);\n  const organizationMenuRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <Breadcrumbs shouldWrap={false}>\n      <Breadcrumbs.Item className=\"mr-token-8\">\n        <button\n          type=\"button\"\n          aria-label=\"Home\"\n          className=\"rounded-sm focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary-focus shrink-0\"\n        >\n          <Neo4JIconColorIcon className=\"h-6 w-[26px]\" />\n        </button>\n      </Breadcrumbs.Item>\n      <Breadcrumbs.Item>\n        <Breadcrumbs.Button leadingElement={<BuildingOffice2IconOutline />}>\n          Organization 1\n        </Breadcrumbs.Button>\n        <Breadcrumbs.SelectButton\n          ref={organizationMenuRef}\n          ariaLabel=\"Open organization menu\"\n          onClick={() => {\n            setIsOrganizationMenuOpen((prev) => !prev);\n          }}\n          isActive={isOrganizationMenuOpen}\n        >\n          <Menu\n            anchorRef={organizationMenuRef}\n            isOpen={isOrganizationMenuOpen}\n            onClose={() => setIsOrganizationMenuOpen(false)}\n          >\n            <Menu.Group>\n              <Menu.RadioItem title=\"Organization 1\" isChecked={true} />\n              <Menu.RadioItem title=\"Organization 2\" isChecked={false} />\n            </Menu.Group>\n            <Menu.Divider />\n            <Menu.Group>\n              <Menu.Item title=\"All Organizations\" />\n            </Menu.Group>\n          </Menu>\n        </Breadcrumbs.SelectButton>\n      </Breadcrumbs.Item>\n      <Breadcrumbs.Item>\n        <Breadcrumbs.Button leadingElement={<CubeIconOutline />}>\n          Project 1\n        </Breadcrumbs.Button>\n        <Breadcrumbs.SelectButton ariaLabel=\"Open project menu\"></Breadcrumbs.SelectButton>\n      </Breadcrumbs.Item>\n    </Breadcrumbs>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/button/ButtonBase.js

@@ -39,9 +39,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const ButtonSpinner_1 = require("../_common/ButtonSpinner");
 const ButtonBase = (_a) => {
-    var { as, buttonFill = 'filled', children, className, variant = 'primary', htmlAttributes, isDisabled = false, isFloating = false, isFluid = false, isLoading = false, leadingVisual, onClick, ref, size = 'medium', style, type = 'button', 
-    // TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label
-    loadingMessage = 'Loading content' } = _a, restProps = __rest(_a, ["as", "buttonFill", "children", "className", "variant", "htmlAttributes", "isDisabled", "isFloating", "isFluid", "isLoading", "leadingVisual", "onClick", "ref", "size", "style", "type", "loadingMessage"]);
+    var { as, buttonFill = 'filled', children, className, variant = 'primary', htmlAttributes, isDisabled = false, isFloating = false, isFluid = false, isLoading = false, leadingVisual, onClick, ref, size = 'medium', style, type = 'button', loadingMessage = 'Loading' } = _a, restProps = __rest(_a, ["as", "buttonFill", "children", "className", "variant", "htmlAttributes", "isDisabled", "isFloating", "isFluid", "isLoading", "leadingVisual", "onClick", "ref", "size", "style", "type", "loadingMessage"]);
     const Component = as !== null && as !== void 0 ? as : 'button';
     const isInteractable = !isDisabled && !isLoading;
     const classes = (0, classnames_1.default)(className, 'ndl-btn', {

package/lib/cjs/button/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/button/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAGpC,4DAAyD;AAgElD,MAAM,UAAU,GAAG,CAAyC,EAoBtB,EAAE,EAAE;QApBkB,EACjE,EAAE,EACF,UAAU,GAAG,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,aAAa,EACb,OAAO,EACP,GAAG,EACH,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,IAAI,GAAG,QAAQ;IACf,oIAAoI;IACpI,cAAc,GAAG,iBAAiB,OAES,EADxC,SAAS,cAnBqD,4MAoBlE,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IACpD,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,SAAS,EAAE,SAAS,EAAE;QAC/C,cAAc,EAAE,UAAU;QAC1B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,OAAO;QACpB,aAAa,EAAE,SAAS;QACxB,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,IAAI;QACrB,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,UAAU;QACxC,CAAC,OAAO,OAAO,EAAE,CAAC,EAAE,OAAO;KAC5B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAClB,KAAsD,EACtD,EAAE;QACF,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,8EAA8E;YAC9E,yEAAyE;YACzE,iFAAiF;YACjF,4CAA4C;YAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,SAAS,kBACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,UAAU,mBACL,CAAC,cAAc,EAC9B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,cAElB,iCAAK,SAAS,EAAC,eAAe,aAC3B,OAAO,CAAC,aAAa,CAAC,IAAI,CACzB,gCAAK,SAAS,EAAC,yBAAyB,YAAE,aAAa,GAAO,CAC/D,EACA,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,CACpD,EACA,SAAS,IAAI,CACZ,uBAAC,6BAAa,IAAC,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI,CAC9D,IACG,IACI,CACb,CAAC;AACJ,CAAC,CAAC;AA7EW,QAAA,UAAU,cA6ErB","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 classNames from 'classnames';\nimport type React from 'react';\n\nimport { ButtonSpinner } from '../_common/ButtonSpinner';\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\n\n/**\n *\n * Types\n *\n */\n\ntype ButtonTypes = 'submit' | 'button' | 'reset';\nexport type ButtonSizes = 'small' | 'medium' | 'large';\nexport type ButtonVariants = 'primary' | 'danger' | 'neutral';\n\nexport type CommonButtonProps = {\n  children?: React.ReactNode;\n  /** Icon to display before the button content */\n  leadingVisual?: React.ReactNode;\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n  /** If the button is in disabled state */\n  isDisabled?: boolean;\n  /** If the button is fluid, it will take the full width of its container */\n  isFluid?: boolean;\n  /** Type of button */\n  type?: ButtonTypes;\n  /** Size of button */\n  size?: ButtonSizes;\n  /** onClick callback */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** onKeyDown callback */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  /** Accessible message for screen readers when the button is in a loading state */\n  loadingMessage?: string;\n} /**\n * If `as=\"a\"`, `href` is required and `target` is available.\n * For all other elements, these props are not present.\n */ & (\n  | {\n      as: 'a';\n      /** The URL to link to. Only applies when `as=\"a\"` */\n      href?: HtmlAttributes<'a'>['href'];\n      /**\n       * The target window for the link. Only applies when `as=\"a\"`.\n       * Not present or required for other element types.\n       */\n      target?: HtmlAttributes<'a'>['target'];\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\ntype ButtonBaseProps = CommonButtonProps & {\n  /** If the button is in floating state */\n  isFloating?: boolean;\n  /** variant of the button */\n  variant?: ButtonVariants;\n  /** fill of the button */\n  buttonFill?: 'filled' | 'outlined' | 'text';\n};\n\nexport const ButtonBase = <T extends React.ElementType = 'button'>({\n  as,\n  buttonFill = 'filled',\n  children,\n  className,\n  variant = 'primary',\n  htmlAttributes,\n  isDisabled = false,\n  isFloating = false,\n  isFluid = false,\n  isLoading = false,\n  leadingVisual,\n  onClick,\n  ref,\n  size = 'medium',\n  style,\n  type = 'button',\n  // TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label\n  loadingMessage = 'Loading content',\n  ...restProps\n}: PolymorphicCommonProps<T, ButtonBaseProps>) => {\n  const Component: React.ElementType = as ?? 'button';\n  const isInteractable = !isDisabled && !isLoading;\n\n  const classes = classNames(className, 'ndl-btn', {\n    'ndl-disabled': isDisabled,\n    'ndl-floating': isFloating,\n    'ndl-fluid': isFluid,\n    'ndl-loading': isLoading,\n    [`ndl-${size}`]: size,\n    [`ndl-${buttonFill}-button`]: buttonFill,\n    [`ndl-${variant}`]: variant,\n  });\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    if (!isInteractable) {\n      // By default, a <button /> element with disabled set to true will not get its\n      // on click handler called. To support the same behavior on <a /> tags we\n      // swallow the event here when disabled, since the <a /> tag with disabled set to\n      // true will have its onClick handler called\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Component\n      type={type}\n      onClick={handleClick}\n      disabled={isDisabled}\n      aria-disabled={!isInteractable}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-btn-inner\">\n        {Boolean(leadingVisual) && (\n          <div className=\"ndl-btn-leading-element\">{leadingVisual}</div>\n        )}\n        {Boolean(children) && (\n          <span className=\"ndl-btn-content\">{children}</span>\n        )}\n        {isLoading && (\n          <ButtonSpinner loadingMessage={loadingMessage} size={size} />\n        )}\n      </div>\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/button/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAGpC,4DAAyD;AAgElD,MAAM,UAAU,GAAG,CAAyC,EAmBtB,EAAE,EAAE;QAnBkB,EACjE,EAAE,EACF,UAAU,GAAG,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,aAAa,EACb,OAAO,EACP,GAAG,EACH,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,cAAc,GAAG,SAAS,OAEiB,EADxC,SAAS,cAlBqD,4MAmBlE,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IACpD,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,SAAS,EAAE,SAAS,EAAE;QAC/C,cAAc,EAAE,UAAU;QAC1B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,OAAO;QACpB,aAAa,EAAE,SAAS;QACxB,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,IAAI;QACrB,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,UAAU;QACxC,CAAC,OAAO,OAAO,EAAE,CAAC,EAAE,OAAO;KAC5B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAClB,KAAsD,EACtD,EAAE;QACF,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,8EAA8E;YAC9E,yEAAyE;YACzE,iFAAiF;YACjF,4CAA4C;YAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,SAAS,kBACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,UAAU,mBACL,CAAC,cAAc,EAC9B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,cAElB,iCAAK,SAAS,EAAC,eAAe,aAC3B,OAAO,CAAC,aAAa,CAAC,IAAI,CACzB,gCAAK,SAAS,EAAC,yBAAyB,YAAE,aAAa,GAAO,CAC/D,EACA,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,CACpD,EACA,SAAS,IAAI,CACZ,uBAAC,6BAAa,IAAC,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI,CAC9D,IACG,IACI,CACb,CAAC;AACJ,CAAC,CAAC;AA5EW,QAAA,UAAU,cA4ErB","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 classNames from 'classnames';\nimport type React from 'react';\n\nimport { ButtonSpinner } from '../_common/ButtonSpinner';\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\n\n/**\n *\n * Types\n *\n */\n\ntype ButtonTypes = 'submit' | 'button' | 'reset';\nexport type ButtonSizes = 'small' | 'medium' | 'large';\nexport type ButtonVariants = 'primary' | 'danger' | 'neutral';\n\nexport type CommonButtonProps = {\n  children?: React.ReactNode;\n  /** Icon to display before the button content */\n  leadingVisual?: React.ReactNode;\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n  /** If the button is in disabled state */\n  isDisabled?: boolean;\n  /** If the button is fluid, it will take the full width of its container */\n  isFluid?: boolean;\n  /** Type of button */\n  type?: ButtonTypes;\n  /** Size of button */\n  size?: ButtonSizes;\n  /** onClick callback */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** onKeyDown callback */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  /** Accessible message for screen readers when the button is in a loading state */\n  loadingMessage?: string;\n} /**\n * If `as=\"a\"`, `href` is required and `target` is available.\n * For all other elements, these props are not present.\n */ & (\n  | {\n      as: 'a';\n      /** The URL to link to. Only applies when `as=\"a\"` */\n      href?: HtmlAttributes<'a'>['href'];\n      /**\n       * The target window for the link. Only applies when `as=\"a\"`.\n       * Not present or required for other element types.\n       */\n      target?: HtmlAttributes<'a'>['target'];\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\ntype ButtonBaseProps = CommonButtonProps & {\n  /** If the button is in floating state */\n  isFloating?: boolean;\n  /** variant of the button */\n  variant?: ButtonVariants;\n  /** fill of the button */\n  buttonFill?: 'filled' | 'outlined' | 'text';\n};\n\nexport const ButtonBase = <T extends React.ElementType = 'button'>({\n  as,\n  buttonFill = 'filled',\n  children,\n  className,\n  variant = 'primary',\n  htmlAttributes,\n  isDisabled = false,\n  isFloating = false,\n  isFluid = false,\n  isLoading = false,\n  leadingVisual,\n  onClick,\n  ref,\n  size = 'medium',\n  style,\n  type = 'button',\n  loadingMessage = 'Loading',\n  ...restProps\n}: PolymorphicCommonProps<T, ButtonBaseProps>) => {\n  const Component: React.ElementType = as ?? 'button';\n  const isInteractable = !isDisabled && !isLoading;\n\n  const classes = classNames(className, 'ndl-btn', {\n    'ndl-disabled': isDisabled,\n    'ndl-floating': isFloating,\n    'ndl-fluid': isFluid,\n    'ndl-loading': isLoading,\n    [`ndl-${size}`]: size,\n    [`ndl-${buttonFill}-button`]: buttonFill,\n    [`ndl-${variant}`]: variant,\n  });\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n  ) => {\n    if (!isInteractable) {\n      // By default, a <button /> element with disabled set to true will not get its\n      // on click handler called. To support the same behavior on <a /> tags we\n      // swallow the event here when disabled, since the <a /> tag with disabled set to\n      // true will have its onClick handler called\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Component\n      type={type}\n      onClick={handleClick}\n      disabled={isDisabled}\n      aria-disabled={!isInteractable}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-btn-inner\">\n        {Boolean(leadingVisual) && (\n          <div className=\"ndl-btn-leading-element\">{leadingVisual}</div>\n        )}\n        {Boolean(children) && (\n          <span className=\"ndl-btn-content\">{children}</span>\n        )}\n        {isLoading && (\n          <ButtonSpinner loadingMessage={loadingMessage} size={size} />\n        )}\n      </div>\n    </Component>\n  );\n};\n"]}

package/lib/cjs/button/stories/button-sizes.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { size: "small", children: "Small" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { size: "medium", children: "Medium" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { size: "large", children: "Large" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { size: "small", children: "Small" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { size: "medium", children: "Medium" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { size: "large", children: "Large" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=button-sizes.story.js.map

package/lib/cjs/button/stories/button-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-sizes.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgD;AAEhD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,oBAAY,IAAC,IAAI,EAAC,OAAO,sBAAqB,EAC/C,uBAAC,oBAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,uBAAC,oBAAY,IAAC,IAAI,EAAC,OAAO,sBAAqB,IAC3C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-row n-gap-token-8\">\n      <FilledButton size=\"small\">Small</FilledButton>\n      <FilledButton size=\"medium\">Medium</FilledButton>\n      <FilledButton size=\"large\">Large</FilledButton>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"button-sizes.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgD;AAEhD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,oBAAY,IAAC,IAAI,EAAC,OAAO,sBAAqB,EAC/C,uBAAC,oBAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,uBAAC,oBAAY,IAAC,IAAI,EAAC,OAAO,sBAAqB,IAC3C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-row gap-token-8\">\n      <FilledButton size=\"small\">Small</FilledButton>\n      <FilledButton size=\"medium\">Medium</FilledButton>\n      <FilledButton size=\"large\">Large</FilledButton>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/button/stories/button-variants.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-grid n-grid-cols-3 n-gap-token-8 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { variant: "primary", children: "Filled Primary" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { variant: "danger", children: "Filled Danger" }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { variant: "primary", children: "Outlined Primary" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { variant: "danger", children: "Outlined Danger" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { variant: "neutral", children: "Outlined Neutral" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { variant: "primary", children: "Text Primary" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { variant: "danger", children: "Text Danger" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { variant: "neutral", children: "Text Neutral" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-token-8 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { variant: "primary", children: "Filled Primary" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { variant: "danger", children: "Filled Danger" }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { variant: "primary", children: "Outlined Primary" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { variant: "danger", children: "Outlined Danger" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { variant: "neutral", children: "Outlined Neutral" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { variant: "primary", children: "Text Primary" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { variant: "danger", children: "Text Danger" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { variant: "neutral", children: "Text Neutral" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=button-variants.story.js.map

package/lib/cjs/button/stories/button-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-variants.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4E;AAE5E,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mDAAmD,aAChE,uBAAC,oBAAY,IAAC,OAAO,EAAC,SAAS,+BAA8B,EAC7D,uBAAC,oBAAY,IAAC,OAAO,EAAC,QAAQ,8BAA6B,EAC3D,iCAAO,EACP,uBAAC,sBAAc,IAAC,OAAO,EAAC,SAAS,iCAAkC,EACnE,uBAAC,sBAAc,IAAC,OAAO,EAAC,QAAQ,gCAAiC,EACjE,uBAAC,sBAAc,IAAC,OAAO,EAAC,SAAS,iCAAkC,EACnE,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,6BAA0B,EACvD,uBAAC,kBAAU,IAAC,OAAO,EAAC,QAAQ,4BAAyB,EACrD,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,6BAA0B,IACnD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, OutlinedButton, TextButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-grid n-grid-cols-3 n-gap-token-8 n-items-center\">\n      <FilledButton variant=\"primary\">Filled Primary</FilledButton>\n      <FilledButton variant=\"danger\">Filled Danger</FilledButton>\n      <div />\n      <OutlinedButton variant=\"primary\">Outlined Primary</OutlinedButton>\n      <OutlinedButton variant=\"danger\">Outlined Danger</OutlinedButton>\n      <OutlinedButton variant=\"neutral\">Outlined Neutral</OutlinedButton>\n      <TextButton variant=\"primary\">Text Primary</TextButton>\n      <TextButton variant=\"danger\">Text Danger</TextButton>\n      <TextButton variant=\"neutral\">Text Neutral</TextButton>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"button-variants.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4E;AAE5E,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2CAA2C,aACxD,uBAAC,oBAAY,IAAC,OAAO,EAAC,SAAS,+BAA8B,EAC7D,uBAAC,oBAAY,IAAC,OAAO,EAAC,QAAQ,8BAA6B,EAC3D,iCAAO,EACP,uBAAC,sBAAc,IAAC,OAAO,EAAC,SAAS,iCAAkC,EACnE,uBAAC,sBAAc,IAAC,OAAO,EAAC,QAAQ,gCAAiC,EACjE,uBAAC,sBAAc,IAAC,OAAO,EAAC,SAAS,iCAAkC,EACnE,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,6BAA0B,EACvD,uBAAC,kBAAU,IAAC,OAAO,EAAC,QAAQ,4BAAyB,EACrD,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,6BAA0B,IACnD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, OutlinedButton, TextButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"grid grid-cols-3 gap-token-8 items-center\">\n      <FilledButton variant=\"primary\">Filled Primary</FilledButton>\n      <FilledButton variant=\"danger\">Filled Danger</FilledButton>\n      <div />\n      <OutlinedButton variant=\"primary\">Outlined Primary</OutlinedButton>\n      <OutlinedButton variant=\"danger\">Outlined Danger</OutlinedButton>\n      <OutlinedButton variant=\"neutral\">Outlined Neutral</OutlinedButton>\n      <TextButton variant=\"primary\">Text Primary</TextButton>\n      <TextButton variant=\"danger\">Text Danger</TextButton>\n      <TextButton variant=\"neutral\">Text Neutral</TextButton>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/checkbox/stories/checkbox-full.story.js

@@ -46,9 +46,9 @@ const Component = () => {
     const isParentChecked = Object.values(childCheckboxes).every((isChildChecked) => isChildChecked);
     const isParentIndeterminate = Object.values(childCheckboxes).some((isChildChecked) => isChildChecked) &&
         !isParentChecked;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-start n-gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isParentChecked, isIndeterminate: isParentIndeterminate, label: "Parent checkbox", onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isParentChecked, isIndeterminate: isParentIndeterminate, label: "Parent checkbox", onChange: (event) => {
                     handleParentCheckboxChange(event);
-                } }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { className: "n-ml-7", isChecked: childCheckboxes.childOne, label: "Child checkbox 1", onChange: () => handleChildCheckboxChange('childOne') }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { className: "n-ml-7", isChecked: childCheckboxes.childTwo, label: "Child checkbox 2", onChange: () => handleChildCheckboxChange('childTwo') }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { className: "n-ml-7", isChecked: childCheckboxes.childThree, label: "Child checkbox 3", onChange: () => handleChildCheckboxChange('childThree') })] }));
+                } }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { className: "ml-7", isChecked: childCheckboxes.childOne, label: "Child checkbox 1", onChange: () => handleChildCheckboxChange('childOne') }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { className: "ml-7", isChecked: childCheckboxes.childTwo, label: "Child checkbox 2", onChange: () => handleChildCheckboxChange('childTwo') }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { className: "ml-7", isChecked: childCheckboxes.childThree, label: "Child checkbox 3", onChange: () => handleChildCheckboxChange('childThree') })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=checkbox-full.story.js.map

package/lib/cjs/checkbox/stories/checkbox-full.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-full.story.js","sourceRoot":"","sources":["../../../../src/checkbox/stories/checkbox-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA4C;AAC5C,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC;QACrD,QAAQ,EAAE,KAAK;QACf,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAAG,CACjC,KAA0C,EAC1C,EAAE;QACF,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAEvC,0DAA0D;QAC1D,kBAAkB,CAAC;YACjB,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,SAAS;SACpB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,yBAAyB,GAAG,CAChC,QAAsC,EACtC,EAAE;QACF,wCAAwC;QACxC,kBAAkB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC7B,SAAS,KACZ,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAChC,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,KAAK,CAC1D,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,CACnC,CAAC;IAEF,MAAM,qBAAqB,GACzB,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,CAAC;QACvE,CAAC,eAAe,CAAC;IAEnB,OAAO,CACL,iCAAK,SAAS,EAAC,yCAAyC,aACtD,uBAAC,gBAAQ,IACP,SAAS,EAAE,eAAe,EAC1B,eAAe,EAAE,qBAAqB,EACtC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,0BAA0B,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC,GACD,EACF,uBAAC,gBAAQ,IACP,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,eAAe,CAAC,QAAQ,EACnC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,UAAU,CAAC,GACrD,EACF,uBAAC,gBAAQ,IACP,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,eAAe,CAAC,QAAQ,EACnC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,UAAU,CAAC,GACrD,EACF,uBAAC,gBAAQ,IACP,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,eAAe,CAAC,UAAU,EACrC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,YAAY,CAAC,GACvD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [childCheckboxes, setChildCheckboxes] = useState({\n    childOne: false,\n    childThree: true,\n    childTwo: false,\n  });\n\n  const handleParentCheckboxChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const isChecked = event.target.checked;\n\n    // Update child checkboxes based on parent checkbox state.\n    setChildCheckboxes({\n      childOne: isChecked,\n      childThree: isChecked,\n      childTwo: isChecked,\n    });\n  };\n\n  const handleChildCheckboxChange = (\n    childKey: keyof typeof childCheckboxes,\n  ) => {\n    // Set currently clicked child checkbox.\n    setChildCheckboxes((prevState) => ({\n      ...prevState,\n      [childKey]: !prevState[childKey],\n    }));\n  };\n\n  const isParentChecked = Object.values(childCheckboxes).every(\n    (isChildChecked) => isChildChecked,\n  );\n\n  const isParentIndeterminate =\n    Object.values(childCheckboxes).some((isChildChecked) => isChildChecked) &&\n    !isParentChecked;\n\n  return (\n    <div className=\"n-flex n-flex-col n-items-start n-gap-1\">\n      <Checkbox\n        isChecked={isParentChecked}\n        isIndeterminate={isParentIndeterminate}\n        label=\"Parent checkbox\"\n        onChange={(event) => {\n          handleParentCheckboxChange(event);\n        }}\n      />\n      <Checkbox\n        className=\"n-ml-7\"\n        isChecked={childCheckboxes.childOne}\n        label=\"Child checkbox 1\"\n        onChange={() => handleChildCheckboxChange('childOne')}\n      />\n      <Checkbox\n        className=\"n-ml-7\"\n        isChecked={childCheckboxes.childTwo}\n        label=\"Child checkbox 2\"\n        onChange={() => handleChildCheckboxChange('childTwo')}\n      />\n      <Checkbox\n        className=\"n-ml-7\"\n        isChecked={childCheckboxes.childThree}\n        label=\"Child checkbox 3\"\n        onChange={() => handleChildCheckboxChange('childThree')}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"checkbox-full.story.js","sourceRoot":"","sources":["../../../../src/checkbox/stories/checkbox-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA4C;AAC5C,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC;QACrD,QAAQ,EAAE,KAAK;QACf,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAAG,CACjC,KAA0C,EAC1C,EAAE;QACF,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAEvC,0DAA0D;QAC1D,kBAAkB,CAAC;YACjB,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,SAAS;SACpB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,yBAAyB,GAAG,CAChC,QAAsC,EACtC,EAAE;QACF,wCAAwC;QACxC,kBAAkB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC7B,SAAS,KACZ,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAChC,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,KAAK,CAC1D,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,CACnC,CAAC;IAEF,MAAM,qBAAqB,GACzB,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,CAAC;QACvE,CAAC,eAAe,CAAC;IAEnB,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,gBAAQ,IACP,SAAS,EAAE,eAAe,EAC1B,eAAe,EAAE,qBAAqB,EACtC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,0BAA0B,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC,GACD,EACF,uBAAC,gBAAQ,IACP,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,eAAe,CAAC,QAAQ,EACnC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,UAAU,CAAC,GACrD,EACF,uBAAC,gBAAQ,IACP,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,eAAe,CAAC,QAAQ,EACnC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,UAAU,CAAC,GACrD,EACF,uBAAC,gBAAQ,IACP,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,eAAe,CAAC,UAAU,EACrC,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,YAAY,CAAC,GACvD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [childCheckboxes, setChildCheckboxes] = useState({\n    childOne: false,\n    childThree: true,\n    childTwo: false,\n  });\n\n  const handleParentCheckboxChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const isChecked = event.target.checked;\n\n    // Update child checkboxes based on parent checkbox state.\n    setChildCheckboxes({\n      childOne: isChecked,\n      childThree: isChecked,\n      childTwo: isChecked,\n    });\n  };\n\n  const handleChildCheckboxChange = (\n    childKey: keyof typeof childCheckboxes,\n  ) => {\n    // Set currently clicked child checkbox.\n    setChildCheckboxes((prevState) => ({\n      ...prevState,\n      [childKey]: !prevState[childKey],\n    }));\n  };\n\n  const isParentChecked = Object.values(childCheckboxes).every(\n    (isChildChecked) => isChildChecked,\n  );\n\n  const isParentIndeterminate =\n    Object.values(childCheckboxes).some((isChildChecked) => isChildChecked) &&\n    !isParentChecked;\n\n  return (\n    <div className=\"flex flex-col items-start gap-1\">\n      <Checkbox\n        isChecked={isParentChecked}\n        isIndeterminate={isParentIndeterminate}\n        label=\"Parent checkbox\"\n        onChange={(event) => {\n          handleParentCheckboxChange(event);\n        }}\n      />\n      <Checkbox\n        className=\"ml-7\"\n        isChecked={childCheckboxes.childOne}\n        label=\"Child checkbox 1\"\n        onChange={() => handleChildCheckboxChange('childOne')}\n      />\n      <Checkbox\n        className=\"ml-7\"\n        isChecked={childCheckboxes.childTwo}\n        label=\"Child checkbox 2\"\n        onChange={() => handleChildCheckboxChange('childTwo')}\n      />\n      <Checkbox\n        className=\"ml-7\"\n        isChecked={childCheckboxes.childThree}\n        label=\"Child checkbox 3\"\n        onChange={() => handleChildCheckboxChange('childThree')}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js

@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-16", children: (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", descriptionKbdProps: { keys: ['B'], modifierKeys: ['meta'] }, variant: "neutral", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-token-16", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-row gap-token-16 items-center", children: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", descriptionKbdProps: { keys: ['B'], modifierKeys: ['meta'] }, variant: "neutral", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }) }) }));
 };
 exports.default = Component;
 //# sourceMappingURL=clean-icon-button-keyboard-display.story.js.map

package/lib/cjs/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"clean-icon-button-keyboard-display.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-keyboard-display.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAmD;AACnD,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,gCAAK,SAAS,EAAC,kCAAkC,YAC/C,gCAAK,SAAS,EAAC,iDAAiD,YAC9D,uBAAC,uBAAe,IACd,WAAW,EAAC,QAAQ,EACpB,mBAAmB,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,EAC5D,OAAO,EAAC,SAAS,YAEjB,uBAAC,kCAA0B,KAAG,GACd,GACd,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton\n          description=\"Search\"\n          descriptionKbdProps={{ keys: ['B'], modifierKeys: ['meta'] }}\n          variant=\"neutral\"\n        >\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clean-icon-button-keyboard-display.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-keyboard-display.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAmD;AACnD,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,gCAAK,SAAS,EAAC,4BAA4B,YACzC,gCAAK,SAAS,EAAC,yCAAyC,YACtD,uBAAC,uBAAe,IACd,WAAW,EAAC,QAAQ,EACpB,mBAAmB,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,EAC5D,OAAO,EAAC,SAAS,YAEjB,uBAAC,kCAA0B,KAAG,GACd,GACd,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-16\">\n      <div className=\"flex flex-row gap-token-16 items-center\">\n        <CleanIconButton\n          description=\"Search\"\n          descriptionKbdProps={{ keys: ['B'], modifierKeys: ['meta'] }}\n          variant=\"neutral\"\n        >\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/clean-icon-button/stories/clean-icon-button-sizes.story.js

@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Small" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", size: "medium", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Medium" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", size: "large", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Large" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-16 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Small" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-16 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", size: "medium", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Medium" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-16 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", size: "large", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Large" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=clean-icon-button-sizes.story.js.map

package/lib/cjs/clean-icon-button/stories/clean-icon-button-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"clean-icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,YACjD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"small\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Small</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"medium\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Medium</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"large\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clean-icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,4BAA4B,aACzC,iCAAK,SAAS,EAAC,yCAAyC,aACtD,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,EACN,iCAAK,SAAS,EAAC,yCAAyC,aACtD,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,YACjD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,yCAAyC,aACtD,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-16\">\n      <div className=\"flex flex-row gap-token-16 items-center\">\n        <CleanIconButton description=\"Search\" size=\"small\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Small</Typography>\n      </div>\n      <div className=\"flex flex-row gap-token-16 items-center\">\n        <CleanIconButton description=\"Search\" size=\"medium\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Medium</Typography>\n      </div>\n      <div className=\"flex flex-row gap-token-16 items-center\">\n        <CleanIconButton description=\"Search\" size=\"large\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/clean-icon-button/stories/clean-icon-button-tone.story.js

@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", variant: "neutral", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Default" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", variant: "danger", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Danger" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-16 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", variant: "neutral", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Default" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-16 items-center", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", variant: "danger", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Danger" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=clean-icon-button-tone.story.js.map

package/lib/cjs/clean-icon-button/stories/clean-icon-button-tone.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"clean-icon-button-tone.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-tone.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,YACrD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YACpD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" variant=\"neutral\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\">Default</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" variant=\"danger\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clean-icon-button-tone.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-tone.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,4BAA4B,aACzC,iCAAK,SAAS,EAAC,yCAAyC,aACtD,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,YACrD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,yCAAyC,aACtD,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YACpD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-16\">\n      <div className=\"flex flex-row gap-token-16 items-center\">\n        <CleanIconButton description=\"Search\" variant=\"neutral\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\">Default</Typography>\n      </div>\n      <div className=\"flex flex-row gap-token-16 items-center\">\n        <CleanIconButton description=\"Search\" variant=\"danger\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/clipboard-button/stories/clipboard-button-sizes.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: "This is the text to copy", size: "small" }), (0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: "This is the text to copy", size: "medium" }), (0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: "This is the text to copy", size: "large" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: "This is the text to copy", size: "small" }), (0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: "This is the text to copy", size: "medium" }), (0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: "This is the text to copy", size: "large" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=clipboard-button-sizes.story.js.map

package/lib/cjs/clipboard-button/stories/clipboard-button-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clipboard-button/stories/clipboard-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAmD;AAEnD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,uBAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,EACtE,uBAAC,uBAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,QAAQ,GAAG,EACvE,uBAAC,uBAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,IAClE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ClipboardButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"small\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"medium\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clipboard-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clipboard-button/stories/clipboard-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAmD;AAEnD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,mBAAmB,aAChC,uBAAC,uBAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,EACtE,uBAAC,uBAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,QAAQ,GAAG,EACvE,uBAAC,uBAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,IAClE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ClipboardButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"small\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"medium\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/code-block/CodeBlock.js

@@ -44,13 +44,9 @@ const ChevronUpIconOutline_1 = require("../icons/generated/heroIcons/ChevronUpIc
 const use_code_language_1 = require("./hooks/use-code-language");
 const use_code_theme_1 = require("./hooks/use-code-theme");
 const use_expandable_1 = require("./hooks/use-expandable");
-const defaultElement = 'div';
 const CodeBlock = (_a) => {
     var _b, _c;
-    var { as, maxHeight, code, language, shouldShowLineNumbers, theme, heading, actions, isDisabled, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "maxHeight", "code", "language", "shouldShowLineNumbers", "theme", "heading", "actions", "isDisabled", "className", "style", "htmlAttributes", "ref"])
-    // TODO: Should not be polymorphic (at least not defaulting to a button)
-    ;
-    const Component = as !== null && as !== void 0 ? as : defaultElement;
+    var { maxHeight, code, language, shouldShowLineNumbers, theme, heading, actions, isDisabled, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["maxHeight", "code", "language", "shouldShowLineNumbers", "theme", "heading", "actions", "isDisabled", "className", "style", "htmlAttributes", "ref"]);
     const { containerHeight, isExpanded, toggleExpand, hasOverflowingContent, ref: syntaxHighlighterWrapperRef, } = (0, use_expandable_1.useExpandable)(maxHeight, code);
     const codeTheme = (0, use_code_theme_1.useCodeTheme)(theme);
     const codeLanguage = (0, use_code_language_1.useCodeLanguage)(language);
@@ -61,7 +57,7 @@ const CodeBlock = (_a) => {
     const rightPadding = hasHeading
         ? 0
         : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)('ndl-code-block-container', className), style: Object.assign({ height: containerHeight }, style) }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-code-block-layout", children: [hasHeading && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-code-block-title', {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: (0, classnames_1.default)('ndl-code-block-container', className), style: Object.assign({ height: containerHeight }, style) }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-code-block-layout", children: [hasHeading && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-code-block-title', {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             maxWidth: `calc(100% - ${((_c = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _c !== void 0 ? _c : 0) * 36 + 20}px)`,
@@ -75,7 +71,7 @@ const CodeBlock = (_a) => {
                                         lineHeight: '1',
                                         padding: `0 ${rightPadding}px 0.75em 0.75em`,
                                         width: 'fit-content',
-                                    } }), codeTagProps: { className: 'n-code' }, 
+                                    } }), codeTagProps: { className: 'ndl-typography-code' }, 
                                 // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong
                                 // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402
                                 // wrapLongLines

package/lib/cjs/code-block/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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","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 classNames from 'classnames';\nimport type React from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { type IconButton } from '../icon-button';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronUpIconOutline } from '../icons/generated/heroIcons/ChevronUpIconOutline';\nimport { type LanguageProp } from './code-languages';\nimport { type CodeTheme } from './code-themes';\nimport { useCodeLanguage } from './hooks/use-code-language';\nimport { useCodeTheme } from './hooks/use-code-theme';\nimport { useExpandable } from './hooks/use-expandable';\n\ninterface CodeBlockProps {\n  code: string;\n  isDisabled?: boolean;\n  maxHeight?: number;\n  language: LanguageProp | 'text';\n  shouldShowLineNumbers?: boolean;\n  theme?: CodeTheme;\n  heading?: React.ReactNode;\n  actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n  as,\n  maxHeight,\n  code,\n  language,\n  shouldShowLineNumbers,\n  theme,\n  heading,\n  actions,\n  isDisabled,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n  // TODO: Should not be polymorphic (at least not defaulting to a button)\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n  const Component: React.ElementType = as ?? defaultElement;\n\n  const {\n    containerHeight,\n    isExpanded,\n    toggleExpand,\n    hasOverflowingContent,\n    ref: syntaxHighlighterWrapperRef,\n  } = useExpandable(maxHeight, code);\n  const codeTheme = useCodeTheme(theme);\n  const codeLanguage = useCodeLanguage(language);\n\n  const hasMaxHeight = maxHeight !== undefined;\n  const hasHeading = Boolean(heading);\n  const numberOfActions = actions?.length ?? 0;\n\n  const shouldShowExpandButton = hasMaxHeight && hasOverflowingContent;\n  const rightPadding = hasHeading\n    ? 0\n    : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;\n\n  return (\n    <Component\n      ref={ref}\n      className={classNames('ndl-code-block-container', className)}\n      style={{ height: containerHeight, ...style }}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-code-block-layout\">\n        {hasHeading && (\n          <div\n            className={classNames('ndl-code-block-title', {\n              'ndl-disabled': isDisabled,\n            })}\n            style={{\n              maxWidth: `calc(100% - ${(actions?.length ?? 0) * 36 + 20}px)`,\n            }}\n            data-testid=\"ndl-code-block-title\"\n          >\n            {heading}\n          </div>\n        )}\n        <div\n          className={classNames('ndl-code-content-container', {\n            'ndl-disabled': isDisabled,\n          })}\n          style={{\n            height: hasHeading ? 'calc(100% - 24px - 12px)' : '100%',\n          }}\n        >\n          <div\n            ref={syntaxHighlighterWrapperRef}\n            className=\"ndl-highlight-wrapper\"\n            tabIndex={0}\n            role=\"region\"\n            aria-label={`Code content ${isDisabled ? '(disabled)' : ''}`}\n          >\n            <SyntaxHighlighter\n              language={codeLanguage}\n              style={{\n                ...codeTheme,\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  padding: `0 ${rightPadding}px 0.75em 0.75em`,\n                  width: 'fit-content',\n                },\n              }}\n              codeTagProps={{ className: 'n-code' }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={shouldShowLineNumbers}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      </div>\n      <div\n        className={classNames('ndl-code-block-actions', {\n          'ndl-disabled': isDisabled,\n        })}\n      >\n        {actions?.map((iconButtonProps, index) => (\n          <CleanIconButton\n            key={index}\n            isDisabled={isDisabled}\n            {...iconButtonProps}\n            description={`${iconButtonProps.description ?? 'CodeBlock Action'}`}\n            htmlAttributes={{\n              'data-testid': `ndl-action-button-${index}`,\n              ...iconButtonProps.htmlAttributes,\n            }}\n          />\n        ))}\n      </div>\n      {shouldShowExpandButton && (\n        <div className=\"ndl-code-block-expand-button\">\n          <CleanIconButton\n            description={isExpanded ? 'Collapse' : 'Expand'}\n            tooltipProps={{\n              root: {\n                shouldCloseOnReferenceClick: true,\n              },\n            }}\n            onClick={toggleExpand}\n          >\n            {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n          </CleanIconButton>\n        </div>\n      )}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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","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 classNames from 'classnames';\nimport type React from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { type IconButton } from '../icon-button';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronUpIconOutline } from '../icons/generated/heroIcons/ChevronUpIconOutline';\nimport { type LanguageProp } from './code-languages';\nimport { type CodeTheme } from './code-themes';\nimport { useCodeLanguage } from './hooks/use-code-language';\nimport { useCodeTheme } from './hooks/use-code-theme';\nimport { useExpandable } from './hooks/use-expandable';\n\ninterface CodeBlockProps {\n  code: string;\n  isDisabled?: boolean;\n  maxHeight?: number;\n  language: LanguageProp | 'text';\n  shouldShowLineNumbers?: boolean;\n  theme?: CodeTheme;\n  heading?: React.ReactNode;\n  actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nexport const CodeBlock = ({\n  maxHeight,\n  code,\n  language,\n  shouldShowLineNumbers,\n  theme,\n  heading,\n  actions,\n  isDisabled,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'div', CodeBlockProps>) => {\n  const {\n    containerHeight,\n    isExpanded,\n    toggleExpand,\n    hasOverflowingContent,\n    ref: syntaxHighlighterWrapperRef,\n  } = useExpandable(maxHeight, code);\n  const codeTheme = useCodeTheme(theme);\n  const codeLanguage = useCodeLanguage(language);\n\n  const hasMaxHeight = maxHeight !== undefined;\n  const hasHeading = Boolean(heading);\n  const numberOfActions = actions?.length ?? 0;\n\n  const shouldShowExpandButton = hasMaxHeight && hasOverflowingContent;\n  const rightPadding = hasHeading\n    ? 0\n    : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('ndl-code-block-container', className)}\n      style={{ height: containerHeight, ...style }}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-code-block-layout\">\n        {hasHeading && (\n          <div\n            className={classNames('ndl-code-block-title', {\n              'ndl-disabled': isDisabled,\n            })}\n            style={{\n              maxWidth: `calc(100% - ${(actions?.length ?? 0) * 36 + 20}px)`,\n            }}\n            data-testid=\"ndl-code-block-title\"\n          >\n            {heading}\n          </div>\n        )}\n        <div\n          className={classNames('ndl-code-content-container', {\n            'ndl-disabled': isDisabled,\n          })}\n          style={{\n            height: hasHeading ? 'calc(100% - 24px - 12px)' : '100%',\n          }}\n        >\n          <div\n            ref={syntaxHighlighterWrapperRef}\n            className=\"ndl-highlight-wrapper\"\n            tabIndex={0}\n            role=\"region\"\n            aria-label={`Code content ${isDisabled ? '(disabled)' : ''}`}\n          >\n            <SyntaxHighlighter\n              language={codeLanguage}\n              style={{\n                ...codeTheme,\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  padding: `0 ${rightPadding}px 0.75em 0.75em`,\n                  width: 'fit-content',\n                },\n              }}\n              codeTagProps={{ className: 'ndl-typography-code' }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={shouldShowLineNumbers}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      </div>\n      <div\n        className={classNames('ndl-code-block-actions', {\n          'ndl-disabled': isDisabled,\n        })}\n      >\n        {actions?.map((iconButtonProps, index) => (\n          <CleanIconButton\n            key={index}\n            isDisabled={isDisabled}\n            {...iconButtonProps}\n            description={`${iconButtonProps.description ?? 'CodeBlock Action'}`}\n            htmlAttributes={{\n              'data-testid': `ndl-action-button-${index}`,\n              ...iconButtonProps.htmlAttributes,\n            }}\n          />\n        ))}\n      </div>\n      {shouldShowExpandButton && (\n        <div className=\"ndl-code-block-expand-button\">\n          <CleanIconButton\n            description={isExpanded ? 'Collapse' : 'Expand'}\n            tooltipProps={{\n              root: {\n                shouldCloseOnReferenceClick: true,\n              },\n            }}\n            onClick={toggleExpand}\n          >\n            {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n          </CleanIconButton>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/cjs/code-block/stories/code-disabled.story.js

@@ -28,13 +28,13 @@ const example_code_snippets_1 = require("./example-code-snippets");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.SHORT_CODE_EXAMPLE, language: "typescript", heading: "Code Header", isDisabled: true, actions: [
             {
-                children: ((0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "n-text-neutral-text-icon" })),
+                children: ((0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "text-neutral-text-icon" })),
                 description: 'copy',
                 htmlAttributes: { title: 'copy' },
                 onClick: () => alert('This should not trigger when disabled'),
             },
             {
-                children: (0, jsx_runtime_1.jsx)(icons_1.PlayCircleIconOutline, { className: "n-text-primary-icon" }),
+                children: (0, jsx_runtime_1.jsx)(icons_1.PlayCircleIconOutline, { className: "text-primary-icon" }),
                 description: 'run',
                 htmlAttributes: { title: 'run' },
                 onClick: () => alert('This should not trigger when disabled'),

package/lib/cjs/code-block/stories/code-disabled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-disabled.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAC7C,kDAGgC;AAEhC,mEAA6D;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,IAAI,EAAE,0CAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,aAAa,EACrB,UAAU,QACV,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,uBAAC,+BAAuB,IAAC,SAAS,EAAC,0BAA0B,GAAG,CACjE;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;YACD;gBACE,QAAQ,EAAE,uBAAC,6BAAqB,IAAC,SAAS,EAAC,qBAAqB,GAAG;gBACnE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={SHORT_CODE_EXAMPLE}\n      language=\"typescript\"\n      heading=\"Code Header\"\n      isDisabled\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"n-text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"n-text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n      ]}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"code-disabled.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAC7C,kDAGgC;AAEhC,mEAA6D;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,IAAI,EAAE,0CAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,aAAa,EACrB,UAAU,QACV,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,uBAAC,+BAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;YACD;gBACE,QAAQ,EAAE,uBAAC,6BAAqB,IAAC,SAAS,EAAC,mBAAmB,GAAG;gBACjE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={SHORT_CODE_EXAMPLE}\n      language=\"typescript\"\n      heading=\"Code Header\"\n      isDisabled\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n      ]}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/code-block/stories/code-full.story.js

@@ -28,13 +28,13 @@ const example_code_snippets_1 = require("./example-code-snippets");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.LONG_CODE_EXAMPLE, maxHeight: 320, language: "typescript", shouldShowLineNumbers: true, theme: "ndl-code-light", heading: "Code Header", actions: [
             {
-                children: ((0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "n-text-neutral-text-icon" })),
+                children: ((0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "text-neutral-text-icon" })),
                 description: 'copy',
                 htmlAttributes: { title: 'copy' },
                 onClick: () => alert('copied'),
             },
             {
-                children: (0, jsx_runtime_1.jsx)(icons_1.PlayCircleIconOutline, { className: "n-text-primary-icon" }),
+                children: (0, jsx_runtime_1.jsx)(icons_1.PlayCircleIconOutline, { className: "text-primary-icon" }),
                 description: 'run',
                 htmlAttributes: { title: 'run' },
                 onClick: () => alert('running'),

package/lib/cjs/code-block/stories/code-full.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-full.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAC7C,kDAGgC;AAEhC,mEAA4D;AAE5D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,IAAI,EAAE,yCAAiB,EACvB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAC,YAAY,EACrB,qBAAqB,QACrB,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,uBAAC,+BAAuB,IAAC,SAAS,EAAC,0BAA0B,GAAG,CACjE;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC;aAC/B;YACD;gBACE,QAAQ,EAAE,uBAAC,6BAAqB,IAAC,SAAS,EAAC,qBAAqB,GAAG;gBACnE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;aAChC;SACF,EACD,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { LONG_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={LONG_CODE_EXAMPLE}\n      maxHeight={320}\n      language=\"typescript\"\n      shouldShowLineNumbers\n      theme=\"ndl-code-light\"\n      heading=\"Code Header\"\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"n-text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('copied'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"n-text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('running'),\n        },\n      ]}\n      isDisabled={false}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"code-full.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAC7C,kDAGgC;AAEhC,mEAA4D;AAE5D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,IAAI,EAAE,yCAAiB,EACvB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAC,YAAY,EACrB,qBAAqB,QACrB,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,uBAAC,+BAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC;aAC/B;YACD;gBACE,QAAQ,EAAE,uBAAC,6BAAqB,IAAC,SAAS,EAAC,mBAAmB,GAAG;gBACjE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;aAChC;SACF,EACD,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { LONG_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={LONG_CODE_EXAMPLE}\n      maxHeight={320}\n      language=\"typescript\"\n      shouldShowLineNumbers\n      theme=\"ndl-code-light\"\n      heading=\"Code Header\"\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('copied'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('running'),\n        },\n      ]}\n      isDisabled={false}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/code-block/stories/code-languages.story.js

@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const example_code_snippets_1 = require("./example-code-snippets");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT, language: "typescript", heading: "TypeScript", shouldShowLineNumbers: true }), (0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER, language: "cypher", heading: "Cypher Query Language", shouldShowLineNumbers: true }), (0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON, language: "json", heading: "JSON Configuration", shouldShowLineNumbers: true })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT, language: "typescript", heading: "TypeScript", shouldShowLineNumbers: true }), (0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER, language: "cypher", heading: "Cypher Query Language", shouldShowLineNumbers: true }), (0, jsx_runtime_1.jsx)(react_1.CodeBlock, { code: example_code_snippets_1.LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON, language: "json", heading: "JSON Configuration", shouldShowLineNumbers: true })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=code-languages.story.js.map

package/lib/cjs/code-block/stories/code-languages.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-languages.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-languages.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,mEAAgF;AAEhF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,iBAAS,IACR,IAAI,EAAE,6DAAqC,CAAC,UAAU,EACtD,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,YAAY,EACpB,qBAAqB,SACrB,EAEF,uBAAC,iBAAS,IACR,IAAI,EAAE,6DAAqC,CAAC,MAAM,EAClD,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,uBAAuB,EAC/B,qBAAqB,SACrB,EAEF,uBAAC,iBAAS,IACR,IAAI,EAAE,6DAAqC,CAAC,IAAI,EAChD,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,oBAAoB,EAC5B,qBAAqB,SACrB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\n\nimport { LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8\">\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT}\n        language=\"typescript\"\n        heading=\"TypeScript\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER}\n        language=\"cypher\"\n        heading=\"Cypher Query Language\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON}\n        language=\"json\"\n        heading=\"JSON Configuration\"\n        shouldShowLineNumbers\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"code-languages.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-languages.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,mEAAgF;AAEhF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,iBAAS,IACR,IAAI,EAAE,6DAAqC,CAAC,UAAU,EACtD,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,YAAY,EACpB,qBAAqB,SACrB,EAEF,uBAAC,iBAAS,IACR,IAAI,EAAE,6DAAqC,CAAC,MAAM,EAClD,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,uBAAuB,EAC/B,qBAAqB,SACrB,EAEF,uBAAC,iBAAS,IACR,IAAI,EAAE,6DAAqC,CAAC,IAAI,EAChD,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,oBAAoB,EAC5B,qBAAqB,SACrB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\n\nimport { LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-8\">\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT}\n        language=\"typescript\"\n        heading=\"TypeScript\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER}\n        language=\"cypher\"\n        heading=\"Cypher Query Language\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON}\n        language=\"json\"\n        heading=\"JSON Configuration\"\n        shouldShowLineNumbers\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}