@neo4j-ndl/react 4.21.1 → 4.21.2-alpha.585cb7c.16.1

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

@@ -25,7 +25,7 @@ import { useState } from 'react';
 const Component = () => {
     const [smallValue, setSmallValue] = useState('0');
     const [largeValue, setLargeValue] = useState('0');
-    return (_jsxs("div", { className: "n-flex n-gap-token-8", children: [_jsxs("div", { className: "n-flex n-flex-col n-gap-token-8", children: [_jsx(Typography, { variant: "label", children: "Small Size" }), _jsxs("div", { className: "n-w-fit", children: [_jsxs(Tabs, { value: smallValue, onChange: setSmallValue, size: "small", className: "n-mb-token-8", children: [_jsx(Tabs.Tab, { id: "0", children: "Tab 1" }), _jsx(Tabs.Tab, { id: "1", children: "Tab 2" }), _jsx(Tabs.Tab, { id: "2", children: "Tab 3" })] }), _jsx(Tabs.TabPanel, { value: smallValue, tabId: "0", children: _jsx(Typography, { variant: "body-small", children: "Content for small tab 1" }) }), _jsx(Tabs.TabPanel, { value: smallValue, tabId: "1", children: _jsx(Typography, { variant: "body-small", children: "Content for small tab 2" }) }), _jsx(Tabs.TabPanel, { value: smallValue, tabId: "2", children: _jsx(Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), _jsxs("div", { className: "n-flex n-flex-col n-gap-token-8", children: [_jsx(Typography, { variant: "label", children: "Large Size (Default)" }), _jsxs(Tabs, { value: largeValue, onChange: setLargeValue, size: "large", className: "n-mb-token-8", children: [_jsx(Tabs.Tab, { id: "0", children: "Tab 1" }), _jsx(Tabs.Tab, { id: "1", children: "Tab 2" }), _jsx(Tabs.Tab, { id: "2", children: "Tab 3" })] }), _jsx(Tabs.TabPanel, { value: largeValue, tabId: "0", children: _jsx(Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), _jsx(Tabs.TabPanel, { value: largeValue, tabId: "1", children: _jsx(Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), _jsx(Tabs.TabPanel, { value: largeValue, tabId: "2", children: _jsx(Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
+    return (_jsxs("div", { className: "n-flex n-gap-token-8", children: [_jsxs("div", { className: "n-flex n-flex-col n-gap-token-8", children: [_jsx(Typography, { variant: "title-3", children: "Small Size" }), _jsxs("div", { className: "n-w-fit", children: [_jsxs(Tabs, { value: smallValue, onChange: setSmallValue, size: "small", className: "n-mb-token-8", children: [_jsx(Tabs.Tab, { id: "0", children: "Tab 1" }), _jsx(Tabs.Tab, { id: "1", children: "Tab 2" }), _jsx(Tabs.Tab, { id: "2", children: "Tab 3" })] }), _jsx(Tabs.TabPanel, { value: smallValue, tabId: "0", children: _jsx(Typography, { variant: "body-small", children: "Content for small tab 1" }) }), _jsx(Tabs.TabPanel, { value: smallValue, tabId: "1", children: _jsx(Typography, { variant: "body-small", children: "Content for small tab 2" }) }), _jsx(Tabs.TabPanel, { value: smallValue, tabId: "2", children: _jsx(Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), _jsxs("div", { className: "n-flex n-flex-col n-gap-token-8", children: [_jsx(Typography, { variant: "title-3", children: "Large Size (Default)" }), _jsxs(Tabs, { value: largeValue, onChange: setLargeValue, size: "large", className: "n-mb-token-8", children: [_jsx(Tabs.Tab, { id: "0", children: "Tab 1" }), _jsx(Tabs.Tab, { id: "1", children: "Tab 2" }), _jsx(Tabs.Tab, { id: "2", children: "Tab 3" })] }), _jsx(Tabs.TabPanel, { value: largeValue, tabId: "0", children: _jsx(Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), _jsx(Tabs.TabPanel, { value: largeValue, tabId: "1", children: _jsx(Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), _jsx(Tabs.TabPanel, { value: largeValue, tabId: "2", children: _jsx(Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
 };
 export default Component;
 //# sourceMappingURL=tabs-sizes.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs-sizes.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAY,GAAG,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAY,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,aACnC,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,2BAAwB,EACnD,eAAK,SAAS,EAAC,SAAS,aACtB,MAAC,IAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,qCAAkC,EAC7D,MAAC,IAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,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 { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [smallValue, setSmallValue] = useState<TabValues>('0');\n  const [largeValue, setLargeValue] = useState<TabValues>('0');\n\n  return (\n    <div className=\"n-flex n-gap-token-8\">\n      <div className=\"n-flex n-flex-col n-gap-token-8\">\n        <Typography variant=\"label\">Small Size</Typography>\n        <div className=\"n-w-fit\">\n          <Tabs\n            value={smallValue}\n            onChange={setSmallValue}\n            size=\"small\"\n            className=\"n-mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={smallValue} tabId=\"0\">\n            <Typography variant=\"body-small\">\n              Content for small tab 1\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"1\">\n            <Typography variant=\"body-small\">\n              Content for small tab 2\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"2\">\n            <Typography variant=\"body-small\">\n              Content for small tab 3\n            </Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n\n      <div className=\"n-flex n-flex-col n-gap-token-8\">\n        <Typography variant=\"label\">Large Size (Default)</Typography>\n        <Tabs\n          value={largeValue}\n          onChange={setLargeValue}\n          size=\"large\"\n          className=\"n-mb-token-8\"\n        >\n          <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel value={largeValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Content for large tab 1</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Content for large tab 2</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Content for large tab 3</Typography>\n        </Tabs.TabPanel>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-sizes.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAY,GAAG,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAY,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,aACnC,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,2BAAwB,EACrD,eAAK,SAAS,EAAC,SAAS,aACtB,MAAC,IAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,qCAAkC,EAC/D,MAAC,IAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,KAAC,IAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,KAAC,IAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,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 { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [smallValue, setSmallValue] = useState<TabValues>('0');\n  const [largeValue, setLargeValue] = useState<TabValues>('0');\n\n  return (\n    <div className=\"n-flex n-gap-token-8\">\n      <div className=\"n-flex n-flex-col n-gap-token-8\">\n        <Typography variant=\"title-3\">Small Size</Typography>\n        <div className=\"n-w-fit\">\n          <Tabs\n            value={smallValue}\n            onChange={setSmallValue}\n            size=\"small\"\n            className=\"n-mb-token-8\"\n          >\n            <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n            <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n            <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n          </Tabs>\n          <Tabs.TabPanel value={smallValue} tabId=\"0\">\n            <Typography variant=\"body-small\">\n              Content for small tab 1\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"1\">\n            <Typography variant=\"body-small\">\n              Content for small tab 2\n            </Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={smallValue} tabId=\"2\">\n            <Typography variant=\"body-small\">\n              Content for small tab 3\n            </Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n\n      <div className=\"n-flex n-flex-col n-gap-token-8\">\n        <Typography variant=\"title-3\">Large Size (Default)</Typography>\n        <Tabs\n          value={largeValue}\n          onChange={setLargeValue}\n          size=\"large\"\n          className=\"n-mb-token-8\"\n        >\n          <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n          <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n          <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n        </Tabs>\n        <Tabs.TabPanel value={largeValue} tabId=\"0\">\n          <Typography variant=\"body-medium\">Content for large tab 1</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"1\">\n          <Typography variant=\"body-medium\">Content for large tab 2</Typography>\n        </Tabs.TabPanel>\n        <Tabs.TabPanel value={largeValue} tabId=\"2\">\n          <Typography variant=\"body-medium\">Content for large tab 3</Typography>\n        </Tabs.TabPanel>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/timezone-picker/stories/timezone-picker-both-mode.story.js

@@ -24,7 +24,7 @@ import { Typography } from '../../typography';
 import { TimeZonePicker } from '../TimeZonePicker';
 export const TimeZonePickerBothMode = () => {
     const [selectedTimezone, setSelectedTimezone] = useState('America/New_York');
-    return (_jsxs("div", { style: { maxWidth: '400px', padding: '20px' }, children: [_jsx(Typography, { variant: "title-4", style: { marginBottom: '16px' }, children: "Both Mode - UTC and City-Based Timezones" }), _jsx(Typography, { variant: "body-medium", style: { marginBottom: '24px' }, children: "This mode displays both UTC offsets and city-based timezones in separate sections within the dropdown. Perfect for users who need flexibility in choosing between precise UTC offsets or familiar city names." }), _jsx(TimeZonePicker, { label: "Select Timezone", mode: "both", value: selectedTimezone, onChange: (tz) => {
+    return (_jsxs("div", { style: { maxWidth: '400px', padding: '20px' }, children: [_jsx(Typography, { variant: "title-3", style: { marginBottom: '16px' }, children: "Both Mode - UTC and City-Based Timezones" }), _jsx(Typography, { variant: "body-medium", style: { marginBottom: '24px' }, children: "This mode displays both UTC offsets and city-based timezones in separate sections within the dropdown. Perfect for users who need flexibility in choosing between precise UTC offsets or familiar city names." }), _jsx(TimeZonePicker, { label: "Select Timezone", mode: "both", value: selectedTimezone, onChange: (tz) => {
                     setSelectedTimezone(tz);
                 }, htmlAttributes: { id: 'time-zone-input' } }), _jsxs("div", { style: {
                     backgroundColor: '#f5f5f5',

package/lib/esm/timezone-picker/stories/timezone-picker-both-mode.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"timezone-picker-both-mode.story.js","sourceRoot":"","sources":["../../../../src/timezone-picker/stories/timezone-picker-both-mode.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAC3C,QAAQ,CAAS,kBAAkB,CAAC,CAAC;IAEvC,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAChD,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,yDAEhD,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,8NAIpD,EAEb,KAAC,cAAc,IACb,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;oBACf,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC1B,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,GACzC,EAEF,eACE,KAAK,EAAE;oBACL,eAAe,EAAE,SAAS;oBAC1B,YAAY,EAAE,KAAK;oBACnB,SAAS,EAAE,MAAM;oBACjB,OAAO,EAAE,MAAM;iBAChB,aAED,KAAC,UAAU,IACT,OAAO,EAAC,YAAY,EACpB,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,mCAGpC,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,YAC9B,gBAAgB,IAAI,MAAM,GAChB,IACT,EAEN,cAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YAC/B,MAAC,UAAU,IAAC,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aACvD,yCAA0B,EAC1B,cAAI,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAClD,+FAGK,EACL,sEAAmD,EACnD,qEAAkD,EAClD,0EAAuD,EACvD,yEAAsD,IACnD,IACM,GACT,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,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 { useState } from 'react';\n\nimport { Typography } from '../../typography';\nimport { TimeZonePicker } from '../TimeZonePicker';\n\nexport const TimeZonePickerBothMode = () => {\n  const [selectedTimezone, setSelectedTimezone] =\n    useState<string>('America/New_York');\n\n  return (\n    <div style={{ maxWidth: '400px', padding: '20px' }}>\n      <Typography variant=\"title-4\" style={{ marginBottom: '16px' }}>\n        Both Mode - UTC and City-Based Timezones\n      </Typography>\n      <Typography variant=\"body-medium\" style={{ marginBottom: '24px' }}>\n        This mode displays both UTC offsets and city-based timezones in separate\n        sections within the dropdown. Perfect for users who need flexibility in\n        choosing between precise UTC offsets or familiar city names.\n      </Typography>\n\n      <TimeZonePicker\n        label=\"Select Timezone\"\n        mode=\"both\"\n        value={selectedTimezone}\n        onChange={(tz) => {\n          setSelectedTimezone(tz);\n        }}\n        htmlAttributes={{ id: 'time-zone-input' }}\n      />\n\n      <div\n        style={{\n          backgroundColor: '#f5f5f5',\n          borderRadius: '4px',\n          marginTop: '24px',\n          padding: '16px',\n        }}\n      >\n        <Typography\n          variant=\"body-small\"\n          style={{ fontWeight: 600, marginBottom: '8px' }}\n        >\n          Selected Timezone:\n        </Typography>\n        <Typography variant=\"body-medium\">\n          {selectedTimezone || 'None'}\n        </Typography>\n      </div>\n\n      <div style={{ marginTop: '16px' }}>\n        <Typography variant=\"body-small\" style={{ color: '#666' }}>\n          <strong>Features:</strong>\n          <ul style={{ marginTop: '8px', paddingLeft: '20px' }}>\n            <li>\n              Two separate sections: &quot;UTC Offsets&quot; and\n              &quot;City-Based Timezones&quot;\n            </li>\n            <li>Search across both sections simultaneously</li>\n            <li>Custom UTC input support (e.g., UTC+5:30)</li>\n            <li>All standard UTC offsets from UTC-12 to UTC+14</li>\n            <li>All IANA timezone identifiers with city names</li>\n          </ul>\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default TimeZonePickerBothMode;\n"]}
+{"version":3,"file":"timezone-picker-both-mode.story.js","sourceRoot":"","sources":["../../../../src/timezone-picker/stories/timezone-picker-both-mode.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAC3C,QAAQ,CAAS,kBAAkB,CAAC,CAAC;IAEvC,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAChD,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,yDAEhD,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,8NAIpD,EAEb,KAAC,cAAc,IACb,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;oBACf,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC1B,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,GACzC,EAEF,eACE,KAAK,EAAE;oBACL,eAAe,EAAE,SAAS;oBAC1B,YAAY,EAAE,KAAK;oBACnB,SAAS,EAAE,MAAM;oBACjB,OAAO,EAAE,MAAM;iBAChB,aAED,KAAC,UAAU,IACT,OAAO,EAAC,YAAY,EACpB,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,mCAGpC,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,YAC9B,gBAAgB,IAAI,MAAM,GAChB,IACT,EAEN,cAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YAC/B,MAAC,UAAU,IAAC,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aACvD,yCAA0B,EAC1B,cAAI,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAClD,+FAGK,EACL,sEAAmD,EACnD,qEAAkD,EAClD,0EAAuD,EACvD,yEAAsD,IACnD,IACM,GACT,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,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 { useState } from 'react';\n\nimport { Typography } from '../../typography';\nimport { TimeZonePicker } from '../TimeZonePicker';\n\nexport const TimeZonePickerBothMode = () => {\n  const [selectedTimezone, setSelectedTimezone] =\n    useState<string>('America/New_York');\n\n  return (\n    <div style={{ maxWidth: '400px', padding: '20px' }}>\n      <Typography variant=\"title-3\" style={{ marginBottom: '16px' }}>\n        Both Mode - UTC and City-Based Timezones\n      </Typography>\n      <Typography variant=\"body-medium\" style={{ marginBottom: '24px' }}>\n        This mode displays both UTC offsets and city-based timezones in separate\n        sections within the dropdown. Perfect for users who need flexibility in\n        choosing between precise UTC offsets or familiar city names.\n      </Typography>\n\n      <TimeZonePicker\n        label=\"Select Timezone\"\n        mode=\"both\"\n        value={selectedTimezone}\n        onChange={(tz) => {\n          setSelectedTimezone(tz);\n        }}\n        htmlAttributes={{ id: 'time-zone-input' }}\n      />\n\n      <div\n        style={{\n          backgroundColor: '#f5f5f5',\n          borderRadius: '4px',\n          marginTop: '24px',\n          padding: '16px',\n        }}\n      >\n        <Typography\n          variant=\"body-small\"\n          style={{ fontWeight: 600, marginBottom: '8px' }}\n        >\n          Selected Timezone:\n        </Typography>\n        <Typography variant=\"body-medium\">\n          {selectedTimezone || 'None'}\n        </Typography>\n      </div>\n\n      <div style={{ marginTop: '16px' }}>\n        <Typography variant=\"body-small\" style={{ color: '#666' }}>\n          <strong>Features:</strong>\n          <ul style={{ marginTop: '8px', paddingLeft: '20px' }}>\n            <li>\n              Two separate sections: &quot;UTC Offsets&quot; and\n              &quot;City-Based Timezones&quot;\n            </li>\n            <li>Search across both sections simultaneously</li>\n            <li>Custom UTC input support (e.g., UTC+5:30)</li>\n            <li>All standard UTC offsets from UTC-12 to UTC+14</li>\n            <li>All IANA timezone identifiers with city names</li>\n          </ul>\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default TimeZonePickerBothMode;\n"]}

package/lib/esm/tree-view/TreeViewTextItem.js

@@ -134,7 +134,7 @@ export const TreeViewTextItem = (_a) => {
                             }
                         }
                         onItemsChanged(newItems, { item, reason: 'selected' });
-                    }, "aria-label": item.data.text }) }))), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", height: "20px" }, item.skeletonProps, { isLoading: item.isSkeletonLoading, children: _jsx(ConditionalWrap, { shouldWrap: item.data.onTextClick !== undefined, wrap: (children) => (_jsx("button", { type: "button", onClick: item.data.onTextClick, className: "ndl-tree-view-text-clickable", tabIndex: tabIndex, children: children })), children: _jsx(Typography, { variant: item.canHaveSubItems ? 'subheading-small' : 'body-medium', htmlAttributes: {
+                    }, "aria-label": item.data.text }) }))), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", height: "20px" }, item.skeletonProps, { isLoading: item.isSkeletonLoading, children: _jsx(ConditionalWrap, { shouldWrap: item.data.onTextClick !== undefined, wrap: (children) => (_jsx("button", { type: "button", onClick: item.data.onTextClick, className: "ndl-tree-view-text-clickable", tabIndex: tabIndex, children: children })), children: _jsx(Typography, { variant: item.canHaveSubItems ? 'subheading-medium' : 'body-medium', htmlAttributes: {
                             style: {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',

package/lib/esm/tree-view/TreeViewTextItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewTextItem.js","sourceRoot":"","sources":["../../../src/tree-view/TreeViewTextItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport type React from 'react';\n\nimport { Checkbox } from '../checkbox';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronRightIconOutline } from '../icons/generated/heroIcons/ChevronRightIconOutline';\nimport { Skeleton } from '../skeleton';\nimport { Typography } from '../typography';\nimport {\n  type FlattenedTreeItem,\n  type TextItemData,\n  type TreeItemComponentProps,\n} from './tree-view-types';\nimport { TreeItemWrapper } from './TreeItemWrapper';\n\n/**\n * checks if any parent is checked\n * @param item - Tree item\n * @param items - Flattened tree items\n * @returns\n */\nconst parentIsCheckedRecursively = (\n  item: FlattenedTreeItem<TextItemData>,\n  items: FlattenedTreeItem<TextItemData>[],\n): boolean => {\n  const parent = items.find((parentItem) => parentItem.id === item.parentId);\n  if (parent) {\n    if (parent.isSelected) {\n      return true;\n    }\n    return parentIsCheckedRecursively(parent, items);\n  }\n  return false;\n};\n\n/**\n * checks if any children are checked\n * @param item - Tree item\n * @param items - Flattened tree items\n * @returns\n */\nconst childrenCheckedRecursively = (\n  item: FlattenedTreeItem<TextItemData>,\n  items: FlattenedTreeItem<TextItemData>[],\n): boolean => {\n  const children = items.filter((childItem) => childItem.parentId === item.id);\n  if (children.length === 0) {\n    return false;\n  }\n  return children.some(\n    (childItem) =>\n      childItem.isSelected || childrenCheckedRecursively(childItem, items),\n  );\n};\n\nexport const TreeViewTextItem = <T extends TextItemData>({\n  depth,\n  shouldDisableInteraction,\n  shouldDisableSorting,\n  isGhost,\n  indentationWidth,\n  isIndicator,\n  isCollapsed,\n  onCollapse,\n  item,\n  parent,\n  isOver,\n  isOverParent,\n  setNodeRef,\n  setActivatorNodeRef,\n  dragHandleProps,\n  style,\n  trails,\n  onItemsChanged,\n  items,\n  tabIndex,\n  ref,\n  ...restProps\n}: TreeItemComponentProps<T> & { ref?: React.Ref<HTMLElement> }) => {\n  const isAnyParentChecked = parentIsCheckedRecursively(item, items);\n  const isAnyChildChecked = childrenCheckedRecursively(item, items);\n\n  const isIndeterminate =\n    isAnyChildChecked === true &&\n    isAnyParentChecked === false &&\n    item.isSelected === false\n      ? true\n      : false;\n\n  return (\n    <TreeItemWrapper\n      depth={depth}\n      shouldDisableInteraction={shouldDisableInteraction}\n      shouldDisableSorting={shouldDisableSorting}\n      isGhost={isGhost}\n      indentationWidth={indentationWidth}\n      isIndicator={isIndicator}\n      isCollapsed={isCollapsed}\n      onCollapse={onCollapse}\n      item={item}\n      parent={parent}\n      isOver={isOver}\n      isOverParent={isOverParent}\n      setNodeRef={setNodeRef}\n      setActivatorNodeRef={setActivatorNodeRef}\n      dragHandleProps={dragHandleProps}\n      style={style}\n      trails={trails}\n      // oxlint-disable-next-line @typescript-eslint/no-empty-function\n      onItemsChanged={() => {}}\n      ref={ref}\n      items={items}\n      tabIndex={tabIndex}\n      {...restProps}\n    >\n      {item.canHaveSubItems && onCollapse && (\n        <button\n          type=\"button\"\n          className=\"ndl-tree-view-collapse-button\"\n          onClick={() => onCollapse()}\n          aria-label={item.isCollapsed ? 'Expand' : 'Collapse'}\n          aria-expanded={item.isCollapsed ? 'false' : 'true'}\n          /**\n           * Tab index is set to -1 to prevent the item from being focused when the tree is navigated with tab\n           * since we use the arrow keys instead\n           */\n          tabIndex={tabIndex}\n        >\n          {item.isCollapsed && <ChevronRightIconOutline className=\"ndl-icon\" />}\n          {!item.isCollapsed && <ChevronDownIconOutline className=\"ndl-icon\" />}\n        </button>\n      )}\n      {item.isSelected !== undefined && (\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          {...item.skeletonProps}\n          isLoading={item.isSkeletonLoading}\n        >\n          <Checkbox\n            isIndeterminate={isIndeterminate}\n            isChecked={item.isSelected}\n            ariaLabel={item.data.text}\n            htmlAttributes={{\n              tabIndex,\n            }}\n            onChange={(event) => {\n              const newItems = items.map((treeItem) => {\n                if (treeItem.id === item.id) {\n                  return {\n                    ...treeItem,\n                    isSelected: event.target.checked,\n                  };\n                }\n                return treeItem;\n              });\n\n              // Uncheck parents if a child is unchecked\n              if (!event.target.checked) {\n                let parentId = item.parentId;\n                while (parentId !== null) {\n                  const parent = newItems.find(\n                    (newItem) => newItem.id === parentId,\n                  );\n                  if (parent) {\n                    newItems.forEach((newItem) => {\n                      if (newItem.id === parent.id) {\n                        newItem.isSelected = false;\n                      }\n                    });\n                    parentId = parent.parentId;\n                  } else {\n                    parentId = null;\n                  }\n                }\n              }\n              // Check children if a parent is checked\n              if (item.canHaveSubItems) {\n                const childIdsToUncheck = items\n                  .filter((childItem) => childItem.parentId === item.id)\n                  .map((childItem) => childItem.id);\n                while (childIdsToUncheck.length > 0) {\n                  const childId = childIdsToUncheck.pop();\n                  const child = items.find(\n                    (childItem) => childItem.id === childId,\n                  );\n                  if (child) {\n                    newItems.forEach((newItem) => {\n                      if (newItem.id === child.id) {\n                        newItem.isSelected = event.target.checked;\n                      }\n                    });\n                    newItems\n                      .filter((childItem) => childItem.parentId === child.id)\n                      .forEach((childItem) => {\n                        childIdsToUncheck.push(childItem.id);\n                      });\n                  }\n                }\n              }\n              onItemsChanged(newItems, { item, reason: 'selected' });\n            }}\n            aria-label={item.data.text}\n          />\n        </Skeleton>\n      )}\n\n      <Skeleton\n        onBackground=\"weak\"\n        shape=\"rectangular\"\n        height=\"20px\"\n        {...item.skeletonProps}\n        isLoading={item.isSkeletonLoading}\n      >\n        <ConditionalWrap\n          shouldWrap={item.data.onTextClick !== undefined}\n          wrap={(children) => (\n            <button\n              type=\"button\"\n              onClick={item.data.onTextClick}\n              className=\"ndl-tree-view-text-clickable\"\n              tabIndex={tabIndex}\n            >\n              {children}\n            </button>\n          )}\n        >\n          <Typography\n            variant={item.canHaveSubItems ? 'subheading-small' : 'body-medium'}\n            htmlAttributes={{\n              style: {\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n              },\n            }}\n          >\n            {item.data.text}\n          </Typography>\n        </ConditionalWrap>\n      </Skeleton>\n      <div className=\"ndl-tree-view-actions\">\n        {item.data.actions &&\n          item.data.actions.map((action, index) => {\n            return (\n              <CleanIconButton\n                key={index}\n                className=\"ndl-tree-view-action\"\n                size=\"small\"\n                {...action.buttonProps}\n                htmlAttributes={{\n                  tabIndex,\n                  ...action.buttonProps.htmlAttributes,\n                }}\n              >\n                {action.icon}\n              </CleanIconButton>\n            );\n          })}\n      </div>\n    </TreeItemWrapper>\n  );\n};\n"]}
+{"version":3,"file":"TreeViewTextItem.js","sourceRoot":"","sources":["../../../src/tree-view/TreeViewTextItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport type React from 'react';\n\nimport { Checkbox } from '../checkbox';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronRightIconOutline } from '../icons/generated/heroIcons/ChevronRightIconOutline';\nimport { Skeleton } from '../skeleton';\nimport { Typography } from '../typography';\nimport {\n  type FlattenedTreeItem,\n  type TextItemData,\n  type TreeItemComponentProps,\n} from './tree-view-types';\nimport { TreeItemWrapper } from './TreeItemWrapper';\n\n/**\n * checks if any parent is checked\n * @param item - Tree item\n * @param items - Flattened tree items\n * @returns\n */\nconst parentIsCheckedRecursively = (\n  item: FlattenedTreeItem<TextItemData>,\n  items: FlattenedTreeItem<TextItemData>[],\n): boolean => {\n  const parent = items.find((parentItem) => parentItem.id === item.parentId);\n  if (parent) {\n    if (parent.isSelected) {\n      return true;\n    }\n    return parentIsCheckedRecursively(parent, items);\n  }\n  return false;\n};\n\n/**\n * checks if any children are checked\n * @param item - Tree item\n * @param items - Flattened tree items\n * @returns\n */\nconst childrenCheckedRecursively = (\n  item: FlattenedTreeItem<TextItemData>,\n  items: FlattenedTreeItem<TextItemData>[],\n): boolean => {\n  const children = items.filter((childItem) => childItem.parentId === item.id);\n  if (children.length === 0) {\n    return false;\n  }\n  return children.some(\n    (childItem) =>\n      childItem.isSelected || childrenCheckedRecursively(childItem, items),\n  );\n};\n\nexport const TreeViewTextItem = <T extends TextItemData>({\n  depth,\n  shouldDisableInteraction,\n  shouldDisableSorting,\n  isGhost,\n  indentationWidth,\n  isIndicator,\n  isCollapsed,\n  onCollapse,\n  item,\n  parent,\n  isOver,\n  isOverParent,\n  setNodeRef,\n  setActivatorNodeRef,\n  dragHandleProps,\n  style,\n  trails,\n  onItemsChanged,\n  items,\n  tabIndex,\n  ref,\n  ...restProps\n}: TreeItemComponentProps<T> & { ref?: React.Ref<HTMLElement> }) => {\n  const isAnyParentChecked = parentIsCheckedRecursively(item, items);\n  const isAnyChildChecked = childrenCheckedRecursively(item, items);\n\n  const isIndeterminate =\n    isAnyChildChecked === true &&\n    isAnyParentChecked === false &&\n    item.isSelected === false\n      ? true\n      : false;\n\n  return (\n    <TreeItemWrapper\n      depth={depth}\n      shouldDisableInteraction={shouldDisableInteraction}\n      shouldDisableSorting={shouldDisableSorting}\n      isGhost={isGhost}\n      indentationWidth={indentationWidth}\n      isIndicator={isIndicator}\n      isCollapsed={isCollapsed}\n      onCollapse={onCollapse}\n      item={item}\n      parent={parent}\n      isOver={isOver}\n      isOverParent={isOverParent}\n      setNodeRef={setNodeRef}\n      setActivatorNodeRef={setActivatorNodeRef}\n      dragHandleProps={dragHandleProps}\n      style={style}\n      trails={trails}\n      // oxlint-disable-next-line @typescript-eslint/no-empty-function\n      onItemsChanged={() => {}}\n      ref={ref}\n      items={items}\n      tabIndex={tabIndex}\n      {...restProps}\n    >\n      {item.canHaveSubItems && onCollapse && (\n        <button\n          type=\"button\"\n          className=\"ndl-tree-view-collapse-button\"\n          onClick={() => onCollapse()}\n          aria-label={item.isCollapsed ? 'Expand' : 'Collapse'}\n          aria-expanded={item.isCollapsed ? 'false' : 'true'}\n          /**\n           * Tab index is set to -1 to prevent the item from being focused when the tree is navigated with tab\n           * since we use the arrow keys instead\n           */\n          tabIndex={tabIndex}\n        >\n          {item.isCollapsed && <ChevronRightIconOutline className=\"ndl-icon\" />}\n          {!item.isCollapsed && <ChevronDownIconOutline className=\"ndl-icon\" />}\n        </button>\n      )}\n      {item.isSelected !== undefined && (\n        <Skeleton\n          onBackground=\"weak\"\n          shape=\"rectangular\"\n          {...item.skeletonProps}\n          isLoading={item.isSkeletonLoading}\n        >\n          <Checkbox\n            isIndeterminate={isIndeterminate}\n            isChecked={item.isSelected}\n            ariaLabel={item.data.text}\n            htmlAttributes={{\n              tabIndex,\n            }}\n            onChange={(event) => {\n              const newItems = items.map((treeItem) => {\n                if (treeItem.id === item.id) {\n                  return {\n                    ...treeItem,\n                    isSelected: event.target.checked,\n                  };\n                }\n                return treeItem;\n              });\n\n              // Uncheck parents if a child is unchecked\n              if (!event.target.checked) {\n                let parentId = item.parentId;\n                while (parentId !== null) {\n                  const parent = newItems.find(\n                    (newItem) => newItem.id === parentId,\n                  );\n                  if (parent) {\n                    newItems.forEach((newItem) => {\n                      if (newItem.id === parent.id) {\n                        newItem.isSelected = false;\n                      }\n                    });\n                    parentId = parent.parentId;\n                  } else {\n                    parentId = null;\n                  }\n                }\n              }\n              // Check children if a parent is checked\n              if (item.canHaveSubItems) {\n                const childIdsToUncheck = items\n                  .filter((childItem) => childItem.parentId === item.id)\n                  .map((childItem) => childItem.id);\n                while (childIdsToUncheck.length > 0) {\n                  const childId = childIdsToUncheck.pop();\n                  const child = items.find(\n                    (childItem) => childItem.id === childId,\n                  );\n                  if (child) {\n                    newItems.forEach((newItem) => {\n                      if (newItem.id === child.id) {\n                        newItem.isSelected = event.target.checked;\n                      }\n                    });\n                    newItems\n                      .filter((childItem) => childItem.parentId === child.id)\n                      .forEach((childItem) => {\n                        childIdsToUncheck.push(childItem.id);\n                      });\n                  }\n                }\n              }\n              onItemsChanged(newItems, { item, reason: 'selected' });\n            }}\n            aria-label={item.data.text}\n          />\n        </Skeleton>\n      )}\n\n      <Skeleton\n        onBackground=\"weak\"\n        shape=\"rectangular\"\n        height=\"20px\"\n        {...item.skeletonProps}\n        isLoading={item.isSkeletonLoading}\n      >\n        <ConditionalWrap\n          shouldWrap={item.data.onTextClick !== undefined}\n          wrap={(children) => (\n            <button\n              type=\"button\"\n              onClick={item.data.onTextClick}\n              className=\"ndl-tree-view-text-clickable\"\n              tabIndex={tabIndex}\n            >\n              {children}\n            </button>\n          )}\n        >\n          <Typography\n            variant={item.canHaveSubItems ? 'subheading-medium' : 'body-medium'}\n            htmlAttributes={{\n              style: {\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n              },\n            }}\n          >\n            {item.data.text}\n          </Typography>\n        </ConditionalWrap>\n      </Skeleton>\n      <div className=\"ndl-tree-view-actions\">\n        {item.data.actions &&\n          item.data.actions.map((action, index) => {\n            return (\n              <CleanIconButton\n                key={index}\n                className=\"ndl-tree-view-action\"\n                size=\"small\"\n                {...action.buttonProps}\n                htmlAttributes={{\n                  tabIndex,\n                  ...action.buttonProps.htmlAttributes,\n                }}\n              >\n                {action.icon}\n              </CleanIconButton>\n            );\n          })}\n      </div>\n    </TreeItemWrapper>\n  );\n};\n"]}

package/lib/esm/typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAqBA,OAAO,UAAU,MAAM,YAAY,CAAC;AAapC,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,KAAiD,EACtB,EAAE;IAC7B,MAAM,EACJ,EAAE,EACF,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,OAAO,EACP,cAAc,EACd,GAAG,KAED,KAAK,EADJ,SAAS,UACV,KAAK,EARH,mEAQL,CAAQ,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,MAAM,CAAC;IAE/B,OAAO,CACL,KAAC,SAAS,kBAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,EAAM,cAAc,cACvE,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { type tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\n\nexport type TypographyVariants = keyof typeof tokens.typography;\n\ntype TypographyProps = {\n  /** The typography variant to use for the text. */\n  variant: TypographyVariants;\n  /** Content displayed inside the component */\n  children?: React.ReactNode;\n};\n\nexport const Typography = <T extends React.ElementType = 'span'>(\n  props: PolymorphicCommonProps<T, TypographyProps>,\n): React.ReactElement | null => {\n  const {\n    as,\n    className = '',\n    children,\n    variant,\n    htmlAttributes,\n    ref,\n    ...restProps\n  } = props;\n\n  const classes = classNames(`n-${variant}`, className);\n  const Component = as ?? 'span';\n\n  return (\n    <Component className={classes} ref={ref} {...restProps} {...htmlAttributes}>\n      {children}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAqBA,OAAO,UAAU,MAAM,YAAY,CAAC;AAkBpC,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,KAAiD,EACtB,EAAE;IAC7B,MAAM,EACJ,EAAE,EACF,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,OAAO,EACP,cAAc,EACd,GAAG,KAED,KAAK,EADJ,SAAS,UACV,KAAK,EARH,mEAQL,CAAQ,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,MAAM,CAAC;IAE/B,OAAO,CACL,KAAC,SAAS,kBAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,EAAM,cAAc,cACvE,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { type tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\n\nexport type TypographyVariants = keyof typeof tokens.typography;\n\ntype TypographyProps = {\n  /**\n   * The typography variant to use for the text.\n   *\n   * `label` is deprecated: it is identical to `title-4`, which should be used\n   * instead.\n   */\n  variant: TypographyVariants;\n  /** Content displayed inside the component */\n  children?: React.ReactNode;\n};\n\nexport const Typography = <T extends React.ElementType = 'span'>(\n  props: PolymorphicCommonProps<T, TypographyProps>,\n): React.ReactElement | null => {\n  const {\n    as,\n    className = '',\n    children,\n    variant,\n    htmlAttributes,\n    ref,\n    ...restProps\n  } = props;\n\n  const classes = classNames(`n-${variant}`, className);\n  const Component = as ?? 'span';\n\n  return (\n    <Component className={classes} ref={ref} {...restProps} {...htmlAttributes}>\n      {children}\n    </Component>\n  );\n};\n"]}

package/lib/esm/typography/stories/typography-anchor.story.js

@@ -16,7 +16,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Typography } from '../Typography';
 const Component = () => {
-    const variant = 'title-1';
+    const variant = 'title-2';
     return (_jsxs(Typography, { as: "a", htmlAttributes: { href: '/index' }, variant: variant, children: [variant, ": The quick brown fox jumps over the lazy dog"] }));
 };
 export default Component;

package/lib/esm/typography/stories/typography-anchor.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography-anchor.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-anchor.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,OAAO,GAAG,SAAS,CAAC;IAE1B,OAAO,CACL,MAAC,UAAU,IAAC,EAAE,EAAC,GAAG,EAAC,cAAc,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,aACpE,OAAO,qDACG,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Typography } from '../Typography';\n\nconst Component = () => {\n  const variant = 'title-1';\n\n  return (\n    <Typography as=\"a\" htmlAttributes={{ href: '/index' }} variant={variant}>\n      {variant}: The quick brown fox jumps over the lazy dog\n    </Typography>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"typography-anchor.story.js","sourceRoot":"","sources":["../../../../src/typography/stories/typography-anchor.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,OAAO,GAAG,SAAS,CAAC;IAE1B,OAAO,CACL,MAAC,UAAU,IAAC,EAAE,EAAC,GAAG,EAAC,cAAc,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,aACpE,OAAO,qDACG,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *  This file is part of Neo4j.\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 *  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 *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { Typography } from '../Typography';\n\nconst Component = () => {\n  const variant = 'title-2';\n\n  return (\n    <Typography as=\"a\" htmlAttributes={{ href: '/index' }} variant={variant}>\n      {variant}: The quick brown fox jumps over the lazy dog\n    </Typography>\n  );\n};\n\nexport default Component;\n"]}

package/lib/types/typography/Typography.d.ts

@@ -22,7 +22,12 @@ import { type tokens } from '@neo4j-ndl/base';
 import { type PolymorphicCommonProps } from '../_common/types';
 export type TypographyVariants = keyof typeof tokens.typography;
 type TypographyProps = {
-    /** The typography variant to use for the text. */
+    /**
+     * The typography variant to use for the text.
+     *
+     * `label` is deprecated: it is identical to `title-4`, which should be used
+     * instead.
+     */
     variant: TypographyVariants;
     /** Content displayed inside the component */
     children?: React.ReactNode;

package/lib/types/typography/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAEhE,KAAK,eAAe,GAAG;IACrB,kDAAkD;IAClD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAC7D,OAAO,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,KAChD,KAAK,CAAC,YAAY,GAAG,IAmBvB,CAAC"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAEhE,KAAK,eAAe,GAAG;IACrB;;;;;OAKG;IACH,OAAO,EAAE,kBAAkB,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAC7D,OAAO,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,KAChD,KAAK,CAAC,YAAY,GAAG,IAmBvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.21.1",
+  "version": "4.21.2-alpha.585cb7c.16.1",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -404,7 +404,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.20.1"
+    "@neo4j-ndl/base": "^4.20.2-alpha.585cb7c.16.1"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",

package/skills/ndl-react/components/clean-icon-button.md

@@ -242,19 +242,19 @@ const Component = () => {
         <CleanIconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -278,13 +278,13 @@ const Component = () => {
         <CleanIconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label">Default</Typography>
+        <Typography variant="title-4">Default</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/color-picker.md

@@ -36,10 +36,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -62,10 +62,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -74,28 +74,28 @@ const Component = () => {
       onChange={(newColor) => setColor(newColor.rgb)}
       swatches={[
         {
-          a: 1,
-          b: 0,
-          g: 0,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 255,
-          g: 0,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 255, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 0,
-          g: 255,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 255, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 0,
-          g: 0,
-          r: 255,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 255, // oxlint-disable-line id-length
         },
       ]}
     />
@@ -119,10 +119,10 @@ const Component = () => {
   const handleClose = () => setIsOpen(false);
 
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -190,10 +190,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (

package/skills/ndl-react/components/date-picker.md

@@ -689,7 +689,7 @@ export const DatePickerWithTimeZoneBothMode = () => {
           padding: '16px',
         }}
       >
-        <Typography variant="label">Selected Values:</Typography>
+        <Typography variant="title-4">Selected Values:</Typography>
         <Typography variant="body-small">
           <strong>Date: </strong>
           {selectedDate?.toISOString() ?? 'None'}

package/skills/ndl-react/components/dropzone.md

@@ -157,11 +157,11 @@ import {
 
 // Configuration constants
 const CONFIG = {
-  MAX_FILES: 3,
+  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
   MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
+  MAX_FILES: 3,
   PROGRESS_INCREMENT: 5,
   UPDATE_INTERVAL: 100,
-  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
 } as const;
 
 enum UploadState {
@@ -198,9 +198,9 @@ const Component = () => {
   const simulateUpload = useCallback((files: File[]) => {
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Uploading,
       files,
       progress: 0,
+      state: UploadState.Uploading,
     }));
 
     const interval = setInterval(() => {
@@ -244,7 +244,7 @@ const Component = () => {
         (file) =>
           `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,
       );
-      setUploadData((prev) => ({ ...prev, state: UploadState.Error, errors }));
+      setUploadData((prev) => ({ ...prev, errors, state: UploadState.Error }));
     },
     [],
   );
@@ -253,8 +253,8 @@ const Component = () => {
     console.error('Dropzone error:', error);
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Error,
       errors: [error.message],
+      state: UploadState.Error,
     }));
   }, []);
 
@@ -296,7 +296,7 @@ const Component = () => {
               {errors.map((message, index) => (
                 <Typography
                   key={index}
-                  variant="label"
+                  variant="title-4"
                   className="n-text-danger-text n-font-semibold"
                   htmlAttributes={{ role: 'alert' }}
                 >

package/skills/ndl-react/components/icon-button.md

@@ -141,19 +141,19 @@ const Component = () => {
         <IconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -177,13 +177,13 @@ const Component = () => {
         <IconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label">Default</Typography>
+        <Typography variant="title-4">Default</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/radio.md

@@ -75,7 +75,7 @@ import { Radio, Typography } from '@neo4j-ndl/react';
 const Component = () => {
   return (
     <Radio
-      label={<Typography variant="label">Custom label</Typography>}
+      label={<Typography variant="title-4">Custom label</Typography>}
       ariaLabel="example aria label"
     />
   );

package/skills/ndl-react/components/select-icon-button.md

@@ -55,19 +55,19 @@ const Component = () => {
         <SelectIconButton description="Select" size="small" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="medium" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="large" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -96,13 +96,13 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Disabled</Typography>
+        <Typography variant="title-4"> Disabled</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="small" isOpen={true}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Active</Typography>
+        <Typography variant="title-4"> Active</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton
@@ -114,7 +114,7 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Loading</Typography>
+        <Typography variant="title-4"> Loading</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/status-indicator.md

@@ -31,23 +31,23 @@ const Component = () => {
     <div className="n-flex n-gap-token-16">
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="unknown" />
-        <Typography variant="label">Unknown</Typography>
+        <Typography variant="title-4">Unknown</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="success" />
-        <Typography variant="label">Success</Typography>
+        <Typography variant="title-4">Success</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="info" />
-        <Typography variant="label">Info</Typography>
+        <Typography variant="title-4">Info</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="warning" />
-        <Typography variant="label">Warning</Typography>
+        <Typography variant="title-4">Warning</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="danger" />
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );