@neo4j-ndl/react 4.25.10 → 5.0.0-alpha.0.b2b2481

package/lib/esm/combobox/stories/combobox-actions.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-actions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-actions.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IAChD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IACxD,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,qBAAqB,EAAE;IAC9D,EAAE,KAAK,EAAE,wBAAwB,EAAE,KAAK,EAAE,wBAAwB,EAAE;IACpE,EAAE,KAAK,EAAE,yBAAyB,EAAE,KAAK,EAAE,yBAAyB,EAAE;IACtE,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAC5D,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;IACpD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IAChD,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,EAAE;IAC1D,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,EAAE;IAC1D,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClE,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAC5D,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,yBAAyB,EAAE,KAAK,EAAE,yBAAyB,EAAE;IACtE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IACxD,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAC5D,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;CACjD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,cAAK,SAAS,EAAC,iCAAiC,YAC9C,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,gBAAgB,EAC5B,iBAAiB,EAAC,iBAAiB,EACnC,OAAO,EAAE,OAAO;YAChB,wEAAwE;YACxE,yEAAyE;YACzE,iCAAiC;YACjC,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,cAAc;oBACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC;iBAC7C;gBACD;oBACE,kEAAkE;oBAClE,kEAAkE;oBAClE,+CAA+C;oBAC/C,UAAU,EAAE,IAAI;oBAChB,KAAK,EAAE,gBAAgB;oBACvB,aAAa,EAAE,KAAC,eAAe,KAAG;oBAClC,kEAAkE;oBAClE,gCAAgC;oBAChC,QAAQ,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5B,OAAO,CAAC,IAAI,CAAC,kCAAkC,EAAE,WAAW,CAAC;iBAChE;aACF,EACD,QAAQ,EAAC,gFAAgF,GACzF,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\n\nconst options = [\n  { label: 'Movie recommendations', value: 'movie-recommendations' },\n  { label: 'Fraud detection', value: 'fraud-detection' },\n  { label: 'Supply chain', value: 'supply-chain' },\n  { label: 'Customer 360', value: 'customer-360' },\n  { label: 'Knowledge graph', value: 'knowledge-graph' },\n  { label: 'Network topology', value: 'network-topology' },\n  { label: 'Identity resolution', value: 'identity-resolution' },\n  { label: 'Master data management', value: 'master-data-management' },\n  { label: 'Social network analysis', value: 'social-network-analysis' },\n  { label: 'Route optimization', value: 'route-optimization' },\n  { label: 'Recommendation engine', value: 'recommendation-engine' },\n  { label: 'Access control', value: 'access-control' },\n  { label: 'Data lineage', value: 'data-lineage' },\n  { label: 'Entity resolution', value: 'entity-resolution' },\n  { label: 'Bill of materials', value: 'bill-of-materials' },\n  { label: 'Impact analysis', value: 'impact-analysis' },\n  { label: 'Anti money laundering', value: 'anti-money-laundering' },\n  { label: 'Dependency mapping', value: 'dependency-mapping' },\n  { label: 'Patient journey', value: 'patient-journey' },\n  { label: 'Content personalization', value: 'content-personalization' },\n  { label: 'Risk assessment', value: 'risk-assessment' },\n  { label: 'Churn prediction', value: 'churn-prediction' },\n  { label: 'Inventory tracking', value: 'inventory-tracking' },\n  { label: 'Semantic search', value: 'semantic-search' },\n  { label: 'Digital twin', value: 'digital-twin' },\n];\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-4\">\n      <Combobox\n        label=\"Project\"\n        placeholder=\"Select project\"\n        searchPlaceholder=\"Search projects\"\n        options={options}\n        // An action never becomes part of the value. It runs, the panel closes,\n        // and the selection is left as it was, which is what makes it usable for\n        // leaving the combobox entirely.\n        actions={[\n          {\n            label: 'All projects',\n            onSelect: () => console.info('all projects'),\n          },\n          {\n            // A divider above the action separates it from the actions before\n            // it. The first action never needs one: it already sits below the\n            // divider that separates actions from options.\n            hasDivider: true,\n            label: 'Create project',\n            leadingVisual: <PlusIconOutline />,\n            // The search value comes along, so an unmatched query can prefill\n            // the flow the action leads to.\n            onSelect: ({ searchValue }) =>\n              console.info('create project with search value', searchValue),\n          },\n        ]}\n        helpText=\"actions stay pinned below the scrolling options, and are exempt from searching\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-actions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-actions.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\n\nconst options = [\n  { label: 'Movie recommendations', value: 'movie-recommendations' },\n  { label: 'Fraud detection', value: 'fraud-detection' },\n  { label: 'Supply chain', value: 'supply-chain' },\n  { label: 'Customer 360', value: 'customer-360' },\n  { label: 'Knowledge graph', value: 'knowledge-graph' },\n  { label: 'Network topology', value: 'network-topology' },\n  { label: 'Identity resolution', value: 'identity-resolution' },\n  { label: 'Master data management', value: 'master-data-management' },\n  { label: 'Social network analysis', value: 'social-network-analysis' },\n  { label: 'Route optimization', value: 'route-optimization' },\n  { label: 'Recommendation engine', value: 'recommendation-engine' },\n  { label: 'Access control', value: 'access-control' },\n  { label: 'Data lineage', value: 'data-lineage' },\n  { label: 'Entity resolution', value: 'entity-resolution' },\n  { label: 'Bill of materials', value: 'bill-of-materials' },\n  { label: 'Impact analysis', value: 'impact-analysis' },\n  { label: 'Anti money laundering', value: 'anti-money-laundering' },\n  { label: 'Dependency mapping', value: 'dependency-mapping' },\n  { label: 'Patient journey', value: 'patient-journey' },\n  { label: 'Content personalization', value: 'content-personalization' },\n  { label: 'Risk assessment', value: 'risk-assessment' },\n  { label: 'Churn prediction', value: 'churn-prediction' },\n  { label: 'Inventory tracking', value: 'inventory-tracking' },\n  { label: 'Semantic search', value: 'semantic-search' },\n  { label: 'Digital twin', value: 'digital-twin' },\n];\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-4\">\n      <Combobox\n        label=\"Project\"\n        placeholder=\"Select project\"\n        searchPlaceholder=\"Search projects\"\n        options={options}\n        // An action never becomes part of the value. It runs, the panel closes,\n        // and the selection is left as it was, which is what makes it usable for\n        // leaving the combobox entirely.\n        actions={[\n          {\n            label: 'All projects',\n            onSelect: () => console.info('all projects'),\n          },\n          {\n            // A divider above the action separates it from the actions before\n            // it. The first action never needs one: it already sits below the\n            // divider that separates actions from options.\n            hasDivider: true,\n            label: 'Create project',\n            leadingVisual: <PlusIconOutline />,\n            // The search value comes along, so an unmatched query can prefill\n            // the flow the action leads to.\n            onSelect: ({ searchValue }) =>\n              console.info('create project with search value', searchValue),\n          },\n        ]}\n        helpText=\"actions stay pinned below the scrolling options, and are exempt from searching\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-async.story.js

@@ -59,7 +59,7 @@ const Component = () => {
             window.clearTimeout(timeoutId);
         };
     }, [hasOpened, searchValue]);
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-4", children: [_jsx(Combobox, { label: "Products", 
+    return (_jsxs("div", { className: "flex flex-col gap-token-4", children: [_jsx(Combobox, { label: "Products", 
                 // The consumer supplies already-filtered options, so internal
                 // filtering must be disabled.
                 filterOption: false, searchValue: searchValue, onSearchChange: setSearchValue, onOpenChange: (isOpen) => {
@@ -67,7 +67,7 @@ const Component = () => {
                         setIsLoading(true);
                         setHasOpened(true);
                     }
-                }, options: options, isLoading: isLoading, searchPlaceholder: "Search products" }), _jsx(Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: "The consumer clears, fetches, and filters options after a short delay. The loading state is shown while each request is in flight." })] }));
+                }, options: options, isLoading: isLoading, searchPlaceholder: "Search products" }), _jsx(Typography, { variant: "body-small", className: "text-neutral-text-weak", children: "The consumer clears, fetches, and filters options after a short delay. The loading state is shown while each request is in flight." })] }));
 };
 export default Component;
 //# sourceMappingURL=combobox-async.story.js.map

package/lib/esm/combobox/stories/combobox-async.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-async.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-async.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst catalog = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Browser', value: 'browser' },\n  { label: 'Cypher', value: 'cypher' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL', value: 'graphql' },\n];\n\nconst SEARCH_DELAY_MS = 600;\n\nconst Component = () => {\n  const [searchValue, setSearchValue] = useState('');\n  const [options, setOptions] = useState<typeof catalog>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasOpened, setHasOpened] = useState(false);\n\n  useEffect(() => {\n    if (!hasOpened) {\n      return;\n    }\n\n    let isCancelled = false;\n    const query = searchValue.trim().toLowerCase();\n\n    setIsLoading(true);\n    setOptions([]);\n\n    const timeoutId = window.setTimeout(() => {\n      if (isCancelled) {\n        return;\n      }\n\n      setOptions(\n        query === ''\n          ? catalog\n          : catalog.filter((option) =>\n              option.label.toLowerCase().includes(query),\n            ),\n      );\n      setIsLoading(false);\n    }, SEARCH_DELAY_MS);\n\n    return () => {\n      isCancelled = true;\n      window.clearTimeout(timeoutId);\n    };\n  }, [hasOpened, searchValue]);\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-4\">\n      <Combobox\n        label=\"Products\"\n        // The consumer supplies already-filtered options, so internal\n        // filtering must be disabled.\n        filterOption={false}\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        onOpenChange={(isOpen) => {\n          if (isOpen) {\n            setIsLoading(true);\n            setHasOpened(true);\n          }\n        }}\n        options={options}\n        isLoading={isLoading}\n        searchPlaceholder=\"Search products\"\n      />\n      <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n        The consumer clears, fetches, and filters options after a short delay.\n        The loading state is shown while each request is in flight.\n      </Typography>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-async.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-async.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;CACvC,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,CAAC;AAE5B,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAE/C,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,UAAU,CAAC,EAAE,CAAC,CAAC;QAEf,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,WAAW,EAAE,CAAC;gBAChB,OAAO;YACT,CAAC;YAED,UAAU,CACR,KAAK,KAAK,EAAE;gBACV,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CACxB,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAC3C,CACN,CAAC;YACF,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EAAE,eAAe,CAAC,CAAC;QAEpB,OAAO,GAAG,EAAE;YACV,WAAW,GAAG,IAAI,CAAC;YACnB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,QAAQ,IACP,KAAK,EAAC,UAAU;gBAChB,8DAA8D;gBAC9D,8BAA8B;gBAC9B,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE;oBACvB,IAAI,MAAM,EAAE,CAAC;wBACX,YAAY,CAAC,IAAI,CAAC,CAAC;wBACnB,YAAY,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,EAAC,SAAS,EAAC,wBAAwB,mJAGtD,IACT,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst catalog = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Browser', value: 'browser' },\n  { label: 'Cypher', value: 'cypher' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL', value: 'graphql' },\n];\n\nconst SEARCH_DELAY_MS = 600;\n\nconst Component = () => {\n  const [searchValue, setSearchValue] = useState('');\n  const [options, setOptions] = useState<typeof catalog>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasOpened, setHasOpened] = useState(false);\n\n  useEffect(() => {\n    if (!hasOpened) {\n      return;\n    }\n\n    let isCancelled = false;\n    const query = searchValue.trim().toLowerCase();\n\n    setIsLoading(true);\n    setOptions([]);\n\n    const timeoutId = window.setTimeout(() => {\n      if (isCancelled) {\n        return;\n      }\n\n      setOptions(\n        query === ''\n          ? catalog\n          : catalog.filter((option) =>\n              option.label.toLowerCase().includes(query),\n            ),\n      );\n      setIsLoading(false);\n    }, SEARCH_DELAY_MS);\n\n    return () => {\n      isCancelled = true;\n      window.clearTimeout(timeoutId);\n    };\n  }, [hasOpened, searchValue]);\n\n  return (\n    <div className=\"flex flex-col gap-token-4\">\n      <Combobox\n        label=\"Products\"\n        // The consumer supplies already-filtered options, so internal\n        // filtering must be disabled.\n        filterOption={false}\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        onOpenChange={(isOpen) => {\n          if (isOpen) {\n            setIsLoading(true);\n            setHasOpened(true);\n          }\n        }}\n        options={options}\n        isLoading={isLoading}\n        searchPlaceholder=\"Search products\"\n      />\n      <Typography variant=\"body-small\" className=\"text-neutral-text-weak\">\n        The consumer clears, fetches, and filters options after a short delay.\n        The loading state is shown while each request is in flight.\n      </Typography>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-disabled.story.js

@@ -27,6 +27,6 @@ const options = [
     { label: 'Bloom', value: 'bloom' },
     { label: 'Data Importer', value: 'data-importer' },
 ];
-const Component = () => (_jsxs("div", { className: "n-flex n-flex-col n-items-start n-gap-token-16", children: [_jsx(Combobox, { label: "Disabled single select", defaultValue: options[0], isDisabled: true, options: options }), _jsx(Combobox, { label: "Disabled multi select", defaultValue: options.slice(0, 3), isDisabled: true, isMulti: true, options: options })] }));
+const Component = () => (_jsxs("div", { className: "flex flex-col items-start gap-token-16", children: [_jsx(Combobox, { label: "Disabled single select", defaultValue: options[0], isDisabled: true, options: options }), _jsx(Combobox, { label: "Disabled multi select", defaultValue: options.slice(0, 3), isDisabled: true, isMulti: true, options: options })] }));
 export default Component;
 //# sourceMappingURL=combobox-disabled.story.js.map

package/lib/esm/combobox/stories/combobox-disabled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-disabled.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-disabled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eAAK,SAAS,EAAC,gDAAgD,aAC7D,KAAC,QAAQ,IACP,KAAK,EAAC,wBAAwB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,UAAU,QACV,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,UAAU,QACV,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n  <div className=\"n-flex n-flex-col n-items-start n-gap-token-16\">\n    <Combobox\n      label=\"Disabled single select\"\n      defaultValue={options[0]}\n      isDisabled\n      options={options}\n    />\n    <Combobox\n      label=\"Disabled multi select\"\n      defaultValue={options.slice(0, 3)}\n      isDisabled\n      isMulti\n      options={options}\n    />\n  </div>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-disabled.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-disabled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,QAAQ,IACP,KAAK,EAAC,wBAAwB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,UAAU,QACV,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,UAAU,QACV,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n  <div className=\"flex flex-col items-start gap-token-16\">\n    <Combobox\n      label=\"Disabled single select\"\n      defaultValue={options[0]}\n      isDisabled\n      options={options}\n    />\n    <Combobox\n      label=\"Disabled multi select\"\n      defaultValue={options.slice(0, 3)}\n      isDisabled\n      isMulti\n      options={options}\n    />\n  </div>\n);\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-fluid.story.js

@@ -27,6 +27,6 @@ const options = [
     { label: 'Bloom', value: 'bloom' },
     { label: 'Data Importer', value: 'data-importer' },
 ];
-const Component = () => (_jsx("div", { className: "n-w-full", children: _jsx(Combobox, { label: "Product", helpText: "This combobox fills the width of its parent.", isClearable: true, isFluid: true, options: options }) }));
+const Component = () => (_jsx("div", { className: "w-full", children: _jsx(Combobox, { label: "Product", helpText: "This combobox fills the width of its parent.", isClearable: true, isFluid: true, options: options }) }));
 export default Component;
 //# sourceMappingURL=combobox-fluid.story.js.map

package/lib/esm/combobox/stories/combobox-fluid.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,SAAS,EAAC,UAAU,YACvB,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n  <div className=\"n-w-full\">\n    <Combobox\n      label=\"Product\"\n      helpText=\"This combobox fills the width of its parent.\"\n      isClearable\n      isFluid\n      options={options}\n    />\n  </div>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n  <div className=\"w-full\">\n    <Combobox\n      label=\"Product\"\n      helpText=\"This combobox fills the width of its parent.\"\n      isClearable\n      isFluid\n      options={options}\n    />\n  </div>\n);\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-hidden-label.story.js

@@ -26,6 +26,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-4", children: [_jsx(Typography, { variant: "body-medium", children: "Filter results by product" }), _jsx(Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
+const Component = () => (_jsxs("div", { className: "flex flex-col gap-token-4", children: [_jsx(Typography, { variant: "body-medium", children: "Filter results by product" }), _jsx(Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
 export default Component;
 //# sourceMappingURL=combobox-hidden-label.story.js.map

package/lib/esm/combobox/stories/combobox-hidden-label.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-hidden-label.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-hidden-label.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n  <div className=\"n-flex n-flex-col n-gap-token-4\">\n    <Typography variant=\"body-medium\">Filter results by product</Typography>\n    <Combobox\n      label=\"Product\"\n      hasVisuallyHiddenLabel\n      options={options}\n      placeholder=\"All products\"\n    />\n  </div>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-hidden-label.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-hidden-label.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n  <div className=\"flex flex-col gap-token-4\">\n    <Typography variant=\"body-medium\">Filter results by product</Typography>\n    <Combobox\n      label=\"Product\"\n      hasVisuallyHiddenLabel\n      options={options}\n      placeholder=\"All products\"\n    />\n  </div>\n);\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-in-popover-dialog.story.js

@@ -32,7 +32,7 @@ const options = [
 ];
 const Component = () => {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(FilledButton, { onClick: () => setIsOpen(true), children: "Open dialog" }), _jsxs(Dialog, { isOpen: isOpen, onClose: () => setIsOpen(false), size: "medium", children: [_jsx(Dialog.Header, { children: "Combobox in a popover in a dialog" }), _jsx(Dialog.Description, { children: "This exercises nested portals, fixed positioning, focus handling, and stacking across all three components." }), _jsx(Dialog.Content, { children: _jsxs(Popover, { isPortaled: true, hasAnchorPortal: true, strategy: "fixed", children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open popover" }) }), _jsx(Popover.Content, { className: "n-w-[400px] n-p-token-16", children: _jsx(Combobox, { label: "Product", errorText: "This error styling should inherit the dialog theme.", isFluid: true, options: options, searchPlaceholder: "Search products" }) })] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FilledButton, { onClick: () => setIsOpen(true), children: "Open dialog" }), _jsxs(Dialog, { isOpen: isOpen, onClose: () => setIsOpen(false), size: "medium", children: [_jsx(Dialog.Header, { children: "Combobox in a popover in a dialog" }), _jsx(Dialog.Description, { children: "This exercises nested portals, fixed positioning, focus handling, and stacking across all three components." }), _jsx(Dialog.Content, { children: _jsxs(Popover, { isPortaled: true, hasAnchorPortal: true, strategy: "fixed", children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open popover" }) }), _jsx(Popover.Content, { className: "w-[400px] p-token-16", children: _jsx(Combobox, { label: "Product", errorText: "This error styling should inherit the dialog theme.", isFluid: true, options: options, searchPlaceholder: "Search products" }) })] }) })] })] }));
 };
 export default Component;
 //# sourceMappingURL=combobox-in-popover-dialog.story.js.map

package/lib/esm/combobox/stories/combobox-in-popover-dialog.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-in-popover-dialog.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover-dialog.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,MAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,KAAC,MAAM,CAAC,MAAM,oDAAkD,EAChE,KAAC,MAAM,CAAC,WAAW,8HAGE,EACrB,KAAC,MAAM,CAAC,OAAO,cACb,MAAC,OAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,0BAA0B,YACnD,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,qDAAqD,EAC/D,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,GACc,IACV,GACK,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Dialog, FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL Library', value: 'graphql-library' },\n  { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <FilledButton onClick={() => setIsOpen(true)}>Open dialog</FilledButton>\n      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"medium\">\n        <Dialog.Header>Combobox in a popover in a dialog</Dialog.Header>\n        <Dialog.Description>\n          This exercises nested portals, fixed positioning, focus handling, and\n          stacking across all three components.\n        </Dialog.Description>\n        <Dialog.Content>\n          <Popover isPortaled hasAnchorPortal strategy=\"fixed\">\n            <Popover.Trigger hasButtonWrapper>\n              <FilledButton>Open popover</FilledButton>\n            </Popover.Trigger>\n            <Popover.Content className=\"n-w-[400px] n-p-token-16\">\n              <Combobox\n                label=\"Product\"\n                errorText=\"This error styling should inherit the dialog theme.\"\n                isFluid\n                options={options}\n                searchPlaceholder=\"Search products\"\n              />\n            </Popover.Content>\n          </Popover>\n        </Dialog.Content>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-in-popover-dialog.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover-dialog.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,MAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,KAAC,MAAM,CAAC,MAAM,oDAAkD,EAChE,KAAC,MAAM,CAAC,WAAW,8HAGE,EACrB,KAAC,MAAM,CAAC,OAAO,cACb,MAAC,OAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,sBAAsB,YAC/C,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,qDAAqD,EAC/D,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,GACc,IACV,GACK,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Dialog, FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL Library', value: 'graphql-library' },\n  { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <FilledButton onClick={() => setIsOpen(true)}>Open dialog</FilledButton>\n      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"medium\">\n        <Dialog.Header>Combobox in a popover in a dialog</Dialog.Header>\n        <Dialog.Description>\n          This exercises nested portals, fixed positioning, focus handling, and\n          stacking across all three components.\n        </Dialog.Description>\n        <Dialog.Content>\n          <Popover isPortaled hasAnchorPortal strategy=\"fixed\">\n            <Popover.Trigger hasButtonWrapper>\n              <FilledButton>Open popover</FilledButton>\n            </Popover.Trigger>\n            <Popover.Content className=\"w-[400px] p-token-16\">\n              <Combobox\n                label=\"Product\"\n                errorText=\"This error styling should inherit the dialog theme.\"\n                isFluid\n                options={options}\n                searchPlaceholder=\"Search products\"\n              />\n            </Popover.Content>\n          </Popover>\n        </Dialog.Content>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-in-popover.story.js

@@ -29,6 +29,6 @@ const options = [
     { label: 'GraphQL Library', value: 'graphql-library' },
     { label: 'Cypher', value: 'cypher' },
 ];
-const Component = () => (_jsxs(Popover, { isPortaled: true, children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open popover" }) }), _jsx(Popover.Content, { className: "n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16", children: _jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsx(Typography, { variant: "body-medium", children: "Scroll this popover while the combobox panel is open to verify that it remains anchored and is not clipped by the overflow container." }), _jsx("div", { className: "n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" }), _jsx(Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), _jsx("div", { className: "n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" })] }) })] }));
+const Component = () => (_jsxs(Popover, { isPortaled: true, children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open popover" }) }), _jsx(Popover.Content, { className: "max-h-[240px] w-[400px] overflow-y-auto p-token-16", children: _jsxs("div", { className: "flex flex-col gap-token-16", children: [_jsx(Typography, { variant: "body-medium", children: "Scroll this popover while the combobox panel is open to verify that it remains anchored and is not clipped by the overflow container." }), _jsx("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" }), _jsx(Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), _jsx("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" })] }) })] }));
 export default Component;
 //# sourceMappingURL=combobox-in-popover.story.js.map

package/lib/esm/combobox/stories/combobox-in-popover.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-in-popover.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE/E,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,MAAC,OAAO,IAAC,UAAU,mBACjB,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,4DAA4D,YACrF,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,cAAK,SAAS,EAAC,kGAAkG,GAAG,EACpH,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,cAAK,SAAS,EAAC,kGAAkG,GAAG,IAChH,GACU,IACV,CACX,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, FilledButton, Popover, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL Library', value: 'graphql-library' },\n  { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => (\n  <Popover isPortaled>\n    <Popover.Trigger hasButtonWrapper>\n      <FilledButton>Open popover</FilledButton>\n    </Popover.Trigger>\n    <Popover.Content className=\"n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16\">\n      <div className=\"n-flex n-flex-col n-gap-token-16\">\n        <Typography variant=\"body-medium\">\n          Scroll this popover while the combobox panel is open to verify that it\n          remains anchored and is not clipped by the overflow container.\n        </Typography>\n        <div className=\"n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak\" />\n        <Combobox\n          label=\"Product\"\n          helpText=\"The combobox panel is independently portaled above this popover.\"\n          isFluid\n          options={options}\n          searchPlaceholder=\"Search products\"\n        />\n        <div className=\"n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak\" />\n      </div>\n    </Popover.Content>\n  </Popover>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-in-popover.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE/E,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,MAAC,OAAO,IAAC,UAAU,mBACjB,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,oDAAoD,YAC7E,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,cAAK,SAAS,EAAC,sFAAsF,GAAG,EACxG,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,cAAK,SAAS,EAAC,sFAAsF,GAAG,IACpG,GACU,IACV,CACX,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, FilledButton, Popover, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL Library', value: 'graphql-library' },\n  { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => (\n  <Popover isPortaled>\n    <Popover.Trigger hasButtonWrapper>\n      <FilledButton>Open popover</FilledButton>\n    </Popover.Trigger>\n    <Popover.Content className=\"max-h-[240px] w-[400px] overflow-y-auto p-token-16\">\n      <div className=\"flex flex-col gap-token-16\">\n        <Typography variant=\"body-medium\">\n          Scroll this popover while the combobox panel is open to verify that it\n          remains anchored and is not clipped by the overflow container.\n        </Typography>\n        <div className=\"h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak\" />\n        <Combobox\n          label=\"Product\"\n          helpText=\"The combobox panel is independently portaled above this popover.\"\n          isFluid\n          options={options}\n          searchPlaceholder=\"Search products\"\n        />\n        <div className=\"h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak\" />\n      </div>\n    </Popover.Content>\n  </Popover>\n);\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-native-form.story.js

@@ -39,7 +39,7 @@ const Component = () => {
         event.preventDefault();
         setSubmittedValues(Array.from(new FormData(event.currentTarget).entries()).map(([name, value]) => `${name}: ${String(value)}`));
     };
-    return (_jsxs("form", { className: "n-flex n-max-w-xl n-flex-col n-gap-token-6", onSubmit: handleSubmit, children: [_jsx(Combobox, { label: "Product", name: "product", options: products, defaultValue: products[0], isRequired: true, hasRequiredIndicator: true, triggerRef: triggerRef }), _jsx(Combobox, { label: "Environments", name: "environment", options: environments, defaultValue: [environments[0], environments[1]], isMulti: true }), _jsxs("div", { className: "n-flex n-flex-wrap n-gap-token-2", children: [_jsx(FilledButton, { type: "submit", children: "Submit" }), _jsx(OutlinedButton, { type: "reset", children: "Reset" }), _jsx(TextButton, { type: "button", onClick: () => { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, children: "Focus product" })] }), _jsxs("div", { "aria-live": "polite", children: [_jsx(Typography, { variant: "body-medium", children: "Submitted form data" }), _jsx("pre", { className: "n-mt-token-2", children: submittedValues.length > 0
+    return (_jsxs("form", { className: "flex max-w-xl flex-col gap-token-6", onSubmit: handleSubmit, children: [_jsx(Combobox, { label: "Product", name: "product", options: products, defaultValue: products[0], isRequired: true, hasRequiredIndicator: true, triggerRef: triggerRef }), _jsx(Combobox, { label: "Environments", name: "environment", options: environments, defaultValue: [environments[0], environments[1]], isMulti: true }), _jsxs("div", { className: "flex flex-wrap gap-token-2", children: [_jsx(FilledButton, { type: "submit", children: "Submit" }), _jsx(OutlinedButton, { type: "reset", children: "Reset" }), _jsx(TextButton, { type: "button", onClick: () => { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, children: "Focus product" })] }), _jsxs("div", { "aria-live": "polite", children: [_jsx(Typography, { variant: "body-medium", children: "Submitted form data" }), _jsx("pre", { className: "mt-token-2", children: submittedValues.length > 0
                             ? submittedValues.join('\n')
                             : 'Submit the form to inspect its values.' })] })] }));
 };

package/lib/esm/combobox/stories/combobox-native-form.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-native-form.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-native-form.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,UAAU,EACV,UAAU,GACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAkB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,QAAQ,GAAG;IACf,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;CAC7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAChB,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CACzD,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAC/C,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,gBACE,SAAS,EAAC,4CAA4C,EACtD,QAAQ,EAAE,YAAY,aAEtB,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EACzB,UAAU,QACV,oBAAoB,QACpB,UAAU,EAAE,UAAU,GACtB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAChD,OAAO,SACP,EACF,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,4BAAe,QAAQ,aACrB,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,cAAK,SAAS,EAAC,cAAc,YAC1B,eAAe,CAAC,MAAM,GAAG,CAAC;4BACzB,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;4BAC5B,CAAC,CAAC,wCAAwC,GACxC,IACF,IACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Combobox,\n  FilledButton,\n  OutlinedButton,\n  TextButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { type FormEvent, useRef, useState } from 'react';\n\nconst products = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst environments = [\n  { label: 'Development', value: 'development' },\n  { label: 'Staging', value: 'staging' },\n  { label: 'Production', value: 'production' },\n];\n\nconst Component = () => {\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const [submittedValues, setSubmittedValues] = useState<string[]>([]);\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmittedValues(\n      Array.from(new FormData(event.currentTarget).entries()).map(\n        ([name, value]) => `${name}: ${String(value)}`,\n      ),\n    );\n  };\n\n  return (\n    <form\n      className=\"n-flex n-max-w-xl n-flex-col n-gap-token-6\"\n      onSubmit={handleSubmit}\n    >\n      <Combobox\n        label=\"Product\"\n        name=\"product\"\n        options={products}\n        defaultValue={products[0]}\n        isRequired\n        hasRequiredIndicator\n        triggerRef={triggerRef}\n      />\n      <Combobox\n        label=\"Environments\"\n        name=\"environment\"\n        options={environments}\n        defaultValue={[environments[0], environments[1]]}\n        isMulti\n      />\n      <div className=\"n-flex n-flex-wrap n-gap-token-2\">\n        <FilledButton type=\"submit\">Submit</FilledButton>\n        <OutlinedButton type=\"reset\">Reset</OutlinedButton>\n        <TextButton type=\"button\" onClick={() => triggerRef.current?.focus()}>\n          Focus product\n        </TextButton>\n      </div>\n      <div aria-live=\"polite\">\n        <Typography variant=\"body-medium\">Submitted form data</Typography>\n        <pre className=\"n-mt-token-2\">\n          {submittedValues.length > 0\n            ? submittedValues.join('\\n')\n            : 'Submit the form to inspect its values.'}\n        </pre>\n      </div>\n    </form>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-native-form.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-native-form.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,UAAU,EACV,UAAU,GACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAkB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,QAAQ,GAAG;IACf,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;CAC7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAChB,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CACzD,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAC/C,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,gBACE,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,YAAY,aAEtB,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EACzB,UAAU,QACV,oBAAoB,QACpB,UAAU,EAAE,UAAU,GACtB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAChD,OAAO,SACP,EACF,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,YAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,4BAAe,QAAQ,aACrB,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,cAAK,SAAS,EAAC,YAAY,YACxB,eAAe,CAAC,MAAM,GAAG,CAAC;4BACzB,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;4BAC5B,CAAC,CAAC,wCAAwC,GACxC,IACF,IACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Combobox,\n  FilledButton,\n  OutlinedButton,\n  TextButton,\n  Typography,\n} from '@neo4j-ndl/react';\nimport { type FormEvent, useRef, useState } from 'react';\n\nconst products = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst environments = [\n  { label: 'Development', value: 'development' },\n  { label: 'Staging', value: 'staging' },\n  { label: 'Production', value: 'production' },\n];\n\nconst Component = () => {\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const [submittedValues, setSubmittedValues] = useState<string[]>([]);\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmittedValues(\n      Array.from(new FormData(event.currentTarget).entries()).map(\n        ([name, value]) => `${name}: ${String(value)}`,\n      ),\n    );\n  };\n\n  return (\n    <form\n      className=\"flex max-w-xl flex-col gap-token-6\"\n      onSubmit={handleSubmit}\n    >\n      <Combobox\n        label=\"Product\"\n        name=\"product\"\n        options={products}\n        defaultValue={products[0]}\n        isRequired\n        hasRequiredIndicator\n        triggerRef={triggerRef}\n      />\n      <Combobox\n        label=\"Environments\"\n        name=\"environment\"\n        options={environments}\n        defaultValue={[environments[0], environments[1]]}\n        isMulti\n      />\n      <div className=\"flex flex-wrap gap-token-2\">\n        <FilledButton type=\"submit\">Submit</FilledButton>\n        <OutlinedButton type=\"reset\">Reset</OutlinedButton>\n        <TextButton type=\"button\" onClick={() => triggerRef.current?.focus()}>\n          Focus product\n        </TextButton>\n      </div>\n      <div aria-live=\"polite\">\n        <Typography variant=\"body-medium\">Submitted form data</Typography>\n        <pre className=\"mt-token-2\">\n          {submittedValues.length > 0\n            ? submittedValues.join('\\n')\n            : 'Submit the form to inspect its values.'}\n        </pre>\n      </div>\n    </form>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-sizes.story.js

@@ -26,6 +26,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => (_jsx("div", { className: "n-flex n-flex-col n-gap-token-16", children: ['small', 'medium', 'large'].map((size) => (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-4", children: [_jsx("p", { className: "n-capitalize", children: size }), _jsxs("div", { className: "n-flex n-flex-wrap n-items-start n-gap-token-16", children: [_jsx(Combobox, { label: `${size} single-select`, defaultValue: options[0], options: options, size: size }), _jsx(Combobox, { label: `${size} multi-select`, defaultValue: options.slice(0, 2), isMulti: true, options: options, size: size })] })] }, size))) }));
+const Component = () => (_jsx("div", { className: "flex flex-col gap-token-16", children: ['small', 'medium', 'large'].map((size) => (_jsxs("div", { className: "flex flex-col gap-token-4", children: [_jsx("p", { className: "capitalize", children: size }), _jsxs("div", { className: "flex flex-wrap items-start gap-token-16", children: [_jsx(Combobox, { label: `${size} single-select`, defaultValue: options[0], options: options, size: size }), _jsx(Combobox, { label: `${size} multi-select`, defaultValue: options.slice(0, 2), isMulti: true, options: options, size: size })] })] }, size))) }));
 export default Component;
 //# sourceMappingURL=combobox-sizes.story.js.map

package/lib/esm/combobox/stories/combobox-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-sizes.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,SAAS,EAAC,kCAAkC,YAC7C,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrD,eAAK,SAAS,EAAC,iCAAiC,aAC9C,YAAG,SAAS,EAAC,cAAc,YAAE,IAAI,GAAK,EACtC,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,IAAI,gBAAgB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,IAAI,eAAe,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,IACE,KAhB8C,IAAI,CAiBpD,CACP,CAAC,GACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n  <div className=\"n-flex n-flex-col n-gap-token-16\">\n    {(['small', 'medium', 'large'] as const).map((size) => (\n      <div className=\"n-flex n-flex-col n-gap-token-4\" key={size}>\n        <p className=\"n-capitalize\">{size}</p>\n        <div className=\"n-flex n-flex-wrap n-items-start n-gap-token-16\">\n          <Combobox\n            label={`${size} single-select`}\n            defaultValue={options[0]}\n            options={options}\n            size={size}\n          />\n          <Combobox\n            label={`${size} multi-select`}\n            defaultValue={options.slice(0, 2)}\n            isMulti\n            options={options}\n            size={size}\n          />\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-sizes.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,SAAS,EAAC,4BAA4B,YACvC,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrD,eAAK,SAAS,EAAC,2BAA2B,aACxC,YAAG,SAAS,EAAC,YAAY,YAAE,IAAI,GAAK,EACpC,eAAK,SAAS,EAAC,yCAAyC,aACtD,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,IAAI,gBAAgB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,IAAI,eAAe,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,IACE,KAhBwC,IAAI,CAiB9C,CACP,CAAC,GACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n  <div className=\"flex flex-col gap-token-16\">\n    {(['small', 'medium', 'large'] as const).map((size) => (\n      <div className=\"flex flex-col gap-token-4\" key={size}>\n        <p className=\"capitalize\">{size}</p>\n        <div className=\"flex flex-wrap items-start gap-token-16\">\n          <Combobox\n            label={`${size} single-select`}\n            defaultValue={options[0]}\n            options={options}\n            size={size}\n          />\n          <Combobox\n            label={`${size} multi-select`}\n            defaultValue={options.slice(0, 2)}\n            isMulti\n            options={options}\n            size={size}\n          />\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-validation.story.js

@@ -26,6 +26,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsx(Combobox, { label: "Product", helpText: "Pick the product the ticket is about.", isRequired: true, hasRequiredIndicator: true, options: options }), _jsx(Combobox, { label: "Product", errorText: "Select a product to continue.", isRequired: true, hasRequiredIndicator: true, options: options }), _jsx(Combobox, { label: "Environment", helpText: "Leave empty to include every environment.", hasRequiredIndicator: true, options: options })] }));
+const Component = () => (_jsxs("div", { className: "flex flex-col gap-token-16", children: [_jsx(Combobox, { label: "Product", helpText: "Pick the product the ticket is about.", isRequired: true, hasRequiredIndicator: true, options: options }), _jsx(Combobox, { label: "Product", errorText: "Select a product to continue.", isRequired: true, hasRequiredIndicator: true, options: options }), _jsx(Combobox, { label: "Environment", helpText: "Leave empty to include every environment.", hasRequiredIndicator: true, options: options })] }));
 export default Component;
 //# sourceMappingURL=combobox-validation.story.js.map

package/lib/esm/combobox/stories/combobox-validation.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-validation.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-validation.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,uCAAuC,EAChD,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,+BAA+B,EACzC,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,2CAA2C,EACpD,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n  <div className=\"n-flex n-flex-col n-gap-token-16\">\n    <Combobox\n      label=\"Product\"\n      helpText=\"Pick the product the ticket is about.\"\n      isRequired\n      hasRequiredIndicator\n      options={options}\n    />\n    <Combobox\n      label=\"Product\"\n      errorText=\"Select a product to continue.\"\n      isRequired\n      hasRequiredIndicator\n      options={options}\n    />\n    <Combobox\n      label=\"Environment\"\n      helpText=\"Leave empty to include every environment.\"\n      hasRequiredIndicator\n      options={options}\n    />\n  </div>\n);\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-validation.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-validation.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,uCAAuC,EAChD,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,+BAA+B,EACzC,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,2CAA2C,EACpD,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n  <div className=\"flex flex-col gap-token-16\">\n    <Combobox\n      label=\"Product\"\n      helpText=\"Pick the product the ticket is about.\"\n      isRequired\n      hasRequiredIndicator\n      options={options}\n    />\n    <Combobox\n      label=\"Product\"\n      errorText=\"Select a product to continue.\"\n      isRequired\n      hasRequiredIndicator\n      options={options}\n    />\n    <Combobox\n      label=\"Environment\"\n      helpText=\"Leave empty to include every environment.\"\n      hasRequiredIndicator\n      options={options}\n    />\n  </div>\n);\n\nexport default Component;\n"]}

package/lib/esm/conditional-wrap/stories/conditional-wrap-default.story.js

@@ -24,7 +24,7 @@ import { useState } from 'react';
 import { ConditionalWrap } from '../ConditionalWrap';
 const Component = () => {
     const [shouldWrap, setShouldWrap] = useState(false);
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-6", children: [_jsx(Switch, { isChecked: shouldWrap, onChange: () => setShouldWrap(!shouldWrap), label: "shouldWrap" }), _jsx(ConditionalWrap, { shouldWrap: shouldWrap, wrap: (children) => _jsx(StatusLabel, { children: children }), children: "Content" })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Switch, { isChecked: shouldWrap, onChange: () => setShouldWrap(!shouldWrap), label: "shouldWrap" }), _jsx(ConditionalWrap, { shouldWrap: shouldWrap, wrap: (children) => _jsx(StatusLabel, { children: children }), children: "Content" })] }));
 };
 export default Component;
 //# sourceMappingURL=conditional-wrap-default.story.js.map

package/lib/esm/conditional-wrap/stories/conditional-wrap-default.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditional-wrap-default.story.js","sourceRoot":"","sources":["../../../../src/conditional-wrap/stories/conditional-wrap-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EAC1C,KAAK,EAAC,YAAY,GAClB,EACF,KAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAC,WAAW,cAAE,QAAQ,GAAe,wBAGzC,IACd,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { StatusLabel, Switch } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nimport { ConditionalWrap } from '../ConditionalWrap';\n\nconst Component = () => {\n  const [shouldWrap, setShouldWrap] = useState(false);\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-6\">\n      <Switch\n        isChecked={shouldWrap}\n        onChange={() => setShouldWrap(!shouldWrap)}\n        label=\"shouldWrap\"\n      />\n      <ConditionalWrap\n        shouldWrap={shouldWrap}\n        wrap={(children) => <StatusLabel>{children}</StatusLabel>}\n      >\n        Content\n      </ConditionalWrap>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"conditional-wrap-default.story.js","sourceRoot":"","sources":["../../../../src/conditional-wrap/stories/conditional-wrap-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EAC1C,KAAK,EAAC,YAAY,GAClB,EACF,KAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAC,WAAW,cAAE,QAAQ,GAAe,wBAGzC,IACd,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { StatusLabel, Switch } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nimport { ConditionalWrap } from '../ConditionalWrap';\n\nconst Component = () => {\n  const [shouldWrap, setShouldWrap] = useState(false);\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <Switch\n        isChecked={shouldWrap}\n        onChange={() => setShouldWrap(!shouldWrap)}\n        label=\"shouldWrap\"\n      />\n      <ConditionalWrap\n        shouldWrap={shouldWrap}\n        wrap={(children) => <StatusLabel>{children}</StatusLabel>}\n      >\n        Content\n      </ConditionalWrap>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-compact-mode.story.js

@@ -69,7 +69,7 @@ const Component = () => {
             },
         },
     });
-    return (_jsx("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: _jsx(DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styling: {
+    return (_jsx("div", { className: "w-full bg-light-neutral-text-weakest", children: _jsx(DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styling: {
                 borderStyle: 'all-sides',
                 hasHoverEffects: true,
                 hasZebraStriping: false,

package/lib/esm/data-grid/stories/datagrid-compact-mode.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-compact-mode.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-compact-mode.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,0CAA0C,YACvD,KAAC,QAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;gBACvB,SAAS,EAAE,IAAI;aAChB,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n          isCompact: true,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-compact-mode.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-compact-mode.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,sCAAsC,YACnD,KAAC,QAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;gBACvB,SAAS,EAAE,IAAI;aAChB,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"w-full bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n          isCompact: true,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-component-overriding.story.js

@@ -80,9 +80,9 @@ const Component = () => {
             },
         },
     });
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-8", children: [_jsxs(Typography, { variant: "body-medium", as: "div", className: "n-flex n-flex-col n-gap-token-8 n-p-token-24 n-pb-token-16", children: [_jsx("div", { children: "Current container height: 400px" }), _jsx("div", { children: "Try updating height with Storybook' s story controls\uD83D\uDC47" })] }), _jsx("div", { style: {
+    return (_jsxs("div", { className: "flex flex-col gap-token-8", children: [_jsxs(Typography, { variant: "body-medium", as: "div", className: "flex flex-col gap-token-8 p-token-24 pb-token-16", children: [_jsx("div", { children: "Current container height: 400px" }), _jsx("div", { children: "Try updating height with Storybook' s story controls\uD83D\uDC47" })] }), _jsx("div", { style: {
                     height: '400px',
-                }, children: _jsx(DataGrid, { className: "n-h-full", isResizable: true, tableInstance: table, components: {
+                }, children: _jsx(DataGrid, { className: "h-full", isResizable: true, tableInstance: table, components: {
                         Body: (props) => _jsx(DataGrid.Body, Object.assign({}, props)),
                         HeaderTitle: ({ cell, children }) => {
                             const { column, id } = cell;

package/lib/esm/data-grid/stories/datagrid-component-overriding.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-component-overriding.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-component-overriding.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid, Tooltip, Typography } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8\">\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"n-flex n-flex-col n-gap-token-8 n-p-token-24 n-pb-token-16\"\n      >\n        <div>Current container height: 400px</div>\n        <div>Try updating height with Storybook&apos; s story controls👇</div>\n      </Typography>\n\n      <div\n        style={{\n          height: '400px',\n        }}\n      >\n        <DataGrid\n          className=\"n-h-full\"\n          isResizable={true}\n          tableInstance={table}\n          components={{\n            Body: (props) => <DataGrid.Body {...props} />,\n            HeaderTitle: ({ cell, children }) => {\n              const { column, id } = cell;\n              const title =\n                typeof column.columnDef.header === 'string'\n                  ? column.columnDef.header\n                  : id;\n              return (\n                <Tooltip type=\"simple\">\n                  <Tooltip.Trigger hasButtonWrapper>\n                    <span>{children}</span>\n                  </Tooltip.Trigger>\n                  <Tooltip.Content>{title}</Tooltip.Content>\n                </Tooltip>\n              );\n            },\n            PaginationNumericButton: ({ isSelected, style, ...restProps }) => {\n              return (\n                <DataGrid.PaginationNumericButton\n                  {...restProps}\n                  isSelected={isSelected}\n                  style={{\n                    ...style,\n                    ...(isSelected && {\n                      backgroundImage:\n                        'linear-gradient(90deg, #00C0FF 0%, #FFCF00 20%, #FC4F4F 40%, #00C0FF 100%)',\n                      backgroundSize: '200% auto',\n                      borderRadius: '10px',\n                      boxShadow: '0 0 20px #eee',\n                    }),\n                  }}\n                />\n              );\n            },\n            TableResults: () => (\n              <DataGrid.TableResults>\n                A table with a fixed height of 100px, custom result section and\n                custom pagination button\n              </DataGrid.TableResults>\n            ),\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-component-overriding.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-component-overriding.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid, Tooltip, Typography } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"flex flex-col gap-token-8\">\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"flex flex-col gap-token-8 p-token-24 pb-token-16\"\n      >\n        <div>Current container height: 400px</div>\n        <div>Try updating height with Storybook&apos; s story controls👇</div>\n      </Typography>\n\n      <div\n        style={{\n          height: '400px',\n        }}\n      >\n        <DataGrid\n          className=\"h-full\"\n          isResizable={true}\n          tableInstance={table}\n          components={{\n            Body: (props) => <DataGrid.Body {...props} />,\n            HeaderTitle: ({ cell, children }) => {\n              const { column, id } = cell;\n              const title =\n                typeof column.columnDef.header === 'string'\n                  ? column.columnDef.header\n                  : id;\n              return (\n                <Tooltip type=\"simple\">\n                  <Tooltip.Trigger hasButtonWrapper>\n                    <span>{children}</span>\n                  </Tooltip.Trigger>\n                  <Tooltip.Content>{title}</Tooltip.Content>\n                </Tooltip>\n              );\n            },\n            PaginationNumericButton: ({ isSelected, style, ...restProps }) => {\n              return (\n                <DataGrid.PaginationNumericButton\n                  {...restProps}\n                  isSelected={isSelected}\n                  style={{\n                    ...style,\n                    ...(isSelected && {\n                      backgroundImage:\n                        'linear-gradient(90deg, #00C0FF 0%, #FFCF00 20%, #FC4F4F 40%, #00C0FF 100%)',\n                      backgroundSize: '200% auto',\n                      borderRadius: '10px',\n                      boxShadow: '0 0 20px #eee',\n                    }),\n                  }}\n                />\n              );\n            },\n            TableResults: () => (\n              <DataGrid.TableResults>\n                A table with a fixed height of 100px, custom result section and\n                custom pagination button\n              </DataGrid.TableResults>\n            ),\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-custom-cell-with-style-rules.story.js

@@ -128,7 +128,7 @@ const Component = () => {
             },
         },
     });
-    return (_jsx("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: _jsx(DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styleRules: styleRules, components: {
+    return (_jsx("div", { className: "w-full bg-light-neutral-text-weakest", children: _jsx(DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styleRules: styleRules, components: {
                 BodyCell: CustomBodyCell,
             }, styling: {
                 borderStyle: 'all-sides',

package/lib/esm/data-grid/stories/datagrid-custom-cell-with-style-rules.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-custom-cell-with-style-rules.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-custom-cell-with-style-rules.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  DataGrid,\n  type DataGridStyleRule,\n  useDataGridCellStyle,\n} from '@neo4j-ndl/react';\nimport {\n  type Cell,\n  createColumnHelper,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type RowData,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\nconst styleRules: DataGridStyleRule[] = [\n  // Row coloring: all cells styled when name contains \"Alicia\"\n  {\n    apply: {\n      color: { value: '#000000' },\n      textColor: { value: '#ffffff' },\n    },\n    column: null,\n    priority: 3,\n    where: { contains: [{ column: 'name' }, 'Alicia'] },\n  },\n  // Cell coloring: cells in the \"age\" column with value 51 get green\n  {\n    apply: { color: { value: '#00bb00' } },\n    column: 'age',\n    priority: 3,\n    where: { equal: [{ column: 'age' }, 51] },\n  },\n  // Dual color ranges on the \"age\" column: independent gradients for background\n  // (driven by age, full 0-100 range) and text color (driven by age too, but\n  // with a narrower 20-80 band so the text contrast is calibrated separately).\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#f00000',\n        maxValue: 100,\n        midColor: '#a00000',\n        midValue: 50,\n        minColor: '#800000',\n        minValue: 0,\n        onColumn: 'age',\n      },\n      textColorRange: {\n        maxColor: '#aaaaaa',\n        maxValue: 80,\n        minColor: '#ffffff',\n        minValue: 20,\n        onColumn: 'age',\n      },\n    },\n    column: 'age',\n    priority: 2, // Lower priority so explicit green rule overrides\n  },\n  // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n  {\n    apply: {\n      color: { value: '#fef3c7' },\n      textColor: { value: '#000000' },\n    },\n    column: null,\n    priority: 0, // Lower priority so other rules take precedence\n    where: {\n      and: [\n        { greaterThan: [{ column: 'age' }, 50] },\n        { contains: [{ column: 'name' }, 'o'] },\n      ],\n    },\n  },\n];\n\n/**\n * A custom BodyCell that uses the `useDataGridCellStyle` hook to manually apply style rules to the cell.\n */\nconst CustomBodyCell = <T extends RowData>({\n  cell,\n}: {\n  cell: Cell<T, unknown>;\n}) => {\n  const ruleStyle = useDataGridCellStyle(cell);\n\n  return (\n    <div\n      className=\"ndl-data-grid-td\"\n      role=\"cell\"\n      style={{\n        ...ruleStyle,\n        width: cell.column.getSize(),\n      }}\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </div>\n  );\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      header: () => 'Name',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 10,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styleRules={styleRules}\n        components={{\n          BodyCell: CustomBodyCell,\n        }}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-custom-cell-with-style-rules.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-custom-cell-with-style-rules.story.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  DataGrid,\n  type DataGridStyleRule,\n  useDataGridCellStyle,\n} from '@neo4j-ndl/react';\nimport {\n  type Cell,\n  createColumnHelper,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type RowData,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\nconst styleRules: DataGridStyleRule[] = [\n  // Row coloring: all cells styled when name contains \"Alicia\"\n  {\n    apply: {\n      color: { value: '#000000' },\n      textColor: { value: '#ffffff' },\n    },\n    column: null,\n    priority: 3,\n    where: { contains: [{ column: 'name' }, 'Alicia'] },\n  },\n  // Cell coloring: cells in the \"age\" column with value 51 get green\n  {\n    apply: { color: { value: '#00bb00' } },\n    column: 'age',\n    priority: 3,\n    where: { equal: [{ column: 'age' }, 51] },\n  },\n  // Dual color ranges on the \"age\" column: independent gradients for background\n  // (driven by age, full 0-100 range) and text color (driven by age too, but\n  // with a narrower 20-80 band so the text contrast is calibrated separately).\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#f00000',\n        maxValue: 100,\n        midColor: '#a00000',\n        midValue: 50,\n        minColor: '#800000',\n        minValue: 0,\n        onColumn: 'age',\n      },\n      textColorRange: {\n        maxColor: '#aaaaaa',\n        maxValue: 80,\n        minColor: '#ffffff',\n        minValue: 20,\n        onColumn: 'age',\n      },\n    },\n    column: 'age',\n    priority: 2, // Lower priority so explicit green rule overrides\n  },\n  // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n  {\n    apply: {\n      color: { value: '#fef3c7' },\n      textColor: { value: '#000000' },\n    },\n    column: null,\n    priority: 0, // Lower priority so other rules take precedence\n    where: {\n      and: [\n        { greaterThan: [{ column: 'age' }, 50] },\n        { contains: [{ column: 'name' }, 'o'] },\n      ],\n    },\n  },\n];\n\n/**\n * A custom BodyCell that uses the `useDataGridCellStyle` hook to manually apply style rules to the cell.\n */\nconst CustomBodyCell = <T extends RowData>({\n  cell,\n}: {\n  cell: Cell<T, unknown>;\n}) => {\n  const ruleStyle = useDataGridCellStyle(cell);\n\n  return (\n    <div\n      className=\"ndl-data-grid-td\"\n      role=\"cell\"\n      style={{\n        ...ruleStyle,\n        width: cell.column.getSize(),\n      }}\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </div>\n  );\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      header: () => 'Name',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 10,\n      },\n    },\n  });\n\n  return (\n    <div className=\"w-full bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styleRules={styleRules}\n        components={{\n          BodyCell: CustomBodyCell,\n        }}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-in-dialog.story.js

@@ -36,7 +36,7 @@ const actionsColumn = (tableNav) => ({
         const [selected, setSelected] = useState(dropdownOptions[0]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { portalTarget } = useDataGridContext();
-        return (_jsx("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "n-flex n-flex-row n-gap-token-8", children: _jsx(Select, { ariaLabel: `actions-select-row-${row.index}`, type: "select", selectProps: {
+        return (_jsx("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "flex flex-row gap-token-8", children: _jsx(Select, { ariaLabel: `actions-select-row-${row.index}`, type: "select", selectProps: {
                     menuPortalTarget: portalTarget,
                     menuPosition: 'fixed',
                     onChange: (event) => {
@@ -197,7 +197,7 @@ const Component = () => {
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
     // DataGrid code
-    return (_jsxs("div", { className: "n-w-full", children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsx(Dialog, { className: "n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg", htmlAttributes: {
+    return (_jsxs("div", { className: "w-full", children: [_jsx("div", { className: "flex justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsx(Dialog, { className: "p-token-8 bg-neutral-10 max-w-max rounded-lg", htmlAttributes: {
                     id: 'default-menu',
                 }, onClose: handleClose, isOpen: isOpen, hasDisabledCloseButton: true, children: _jsx(Dialog.Content, { children: _jsx(DataGrid, { portalTarget: document.getElementById('default-menu'), isResizable: true, tableInstance: table, tableNavRef: tableNavRef, isKeyboardNavigable: true, styling: {
                             borderStyle: 'horizontal',