@neo4j-ndl/react 4.0.0-alpha.0.c084490 → 4.0.0

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

@@ -25,9 +25,9 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
-    const [smallValue, setSmallValue] = (0, react_2.useState)(0);
-    const [largeValue, setLargeValue] = (0, react_2.useState)(0);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Small Size" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-w-fit", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: smallValue, onChange: setSmallValue, size: "small", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-2", value: smallValue, tabId: 0, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-2", value: smallValue, tabId: 1, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-2", value: smallValue, tabId: 2, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Large Size (Default)" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: largeValue, onChange: setLargeValue, size: "large", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 0, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 1, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: 2, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-8", value: largeValue, tabId: 0, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-8", value: largeValue, tabId: 1, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-8", value: largeValue, tabId: 2, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
+    const [smallValue, setSmallValue] = (0, react_2.useState)('0');
+    const [largeValue, setLargeValue] = (0, react_2.useState)('0');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Small Size" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-w-fit", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: smallValue, onChange: setSmallValue, size: "small", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: '0', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: '1', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: smallValue, tabId: '2', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", children: "Content for small tab 3" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Large Size (Default)" }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: largeValue, onChange: setLargeValue, size: "large", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: '0', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 1" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: '1', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 2" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: largeValue, tabId: '2', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Content for large tab 3" }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-sizes.story.js.map

package/lib/cjs/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,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,CAAC,CAAC,CAAC;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,2BAAwB,EACnD,iCAAK,SAAS,EAAC,SAAS,aACtB,wBAAC,YAAI,IAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAC,OAAO,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,IAC/B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qCAAkC,EAC7D,wBAAC,YAAI,IAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAC,OAAO,aAC5D,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,EACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAE,CAAC,sBAAkB,IAC/B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"tabs-sizes.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,2BAAwB,EACnD,iCAAK,SAAS,EAAC,SAAS,aACtB,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,qCAAkC,EAC7D,wBAAC,YAAI,IACH,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

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

@@ -27,7 +27,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('database');
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: "database", tooltip: "Database", children: (0, jsx_runtime_1.jsx)(icons_1.CircleStackIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: "add", tooltip: "Add database", children: (0, jsx_runtime_1.jsx)(icons_1.DatabaseAddCircleIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { tabId: "inbox", tooltip: "Inbox", children: (0, jsx_runtime_1.jsx)(icons_1.InboxArrowDownIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-8", value: value, tabId: "database", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Database management and operations." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-8", value: value, tabId: "add", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Add new database or connection." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { className: "n-p-token-8", value: value, tabId: "inbox", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Inbox notifications and messages." }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-mt-5", children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: value, onChange: setValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "database", description: "Database", children: (0, jsx_runtime_1.jsx)(icons_1.CircleStackIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "add", description: "Add database", children: (0, jsx_runtime_1.jsx)(icons_1.DatabasePlusIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "inbox", description: "Inbox", children: (0, jsx_runtime_1.jsx)(icons_1.InboxArrowDownIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "database", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Database management and operations." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "add", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Add new database or connection." }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "inbox", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Inbox notifications and messages." }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-with-icons.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs-with-icons.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,kDAIgC;AAChC,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aACpC,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAC,UAAU,YAC3C,uBAAC,8BAAsB,KAAG,GACjB,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,cAAc,YAC1C,uBAAC,6BAAqB,KAAG,GAChB,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,YACrC,uBAAC,iCAAyB,KAAG,GACpB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,UAAU,YACnE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,KAAK,YAC9D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,gDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,YAChE,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,kDAEpB,GACC,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"tabs-with-icons.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-with-icons.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,kDAIgC;AAChC,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,iCAAK,SAAS,EAAC,QAAQ,aACrB,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,UAAU,EAAC,WAAW,EAAC,UAAU,YAC5C,uBAAC,8BAAsB,KAAG,GACjB,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,KAAK,EAAC,WAAW,EAAC,cAAc,YAC3C,uBAAC,wBAAgB,KAAG,GACX,EACX,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,YACtC,uBAAC,iCAAyB,KAAG,GACpB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,UAAU,YAC3C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,KAAK,YACtC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,gDAEpB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,YACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,kDAEpB,GACC,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/tabs/stories/tabs.stories.js

@@ -21,7 +21,7 @@
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Disabled = exports.WithIcons = exports.Sizes = exports.FillVariants = exports.Default = void 0;
+exports.Badge = exports.Overflow = exports.Disabled = exports.WithIcons = exports.Sizes = exports.FillVariants = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../../index");
 const _1 = require(".");
@@ -103,4 +103,30 @@ exports.Disabled = {
     },
     render: _1.TabsDisabled,
 };
+exports.Overflow = {
+    args: {},
+    parameters: {
+        docs: {
+            source: {
+                code: _1.TabsOverflowSource,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: _1.TabsOverflow,
+};
+exports.Badge = {
+    args: {},
+    parameters: {
+        docs: {
+            source: {
+                code: _1.TabsBadgeSource,
+                language: 'tsx',
+                type: 'code',
+            },
+        },
+    },
+    render: _1.TabsBadge,
+};
 //# sourceMappingURL=tabs.stories.js.map

package/lib/cjs/tabs/stories/tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs.stories.tsx"],"names":[],"mappings":";;;;AAuBA,uCAAmC;AACnC,wBAWW;AAEX,MAAM,aAAa,GAAsB;IACvC,SAAS,EAAE,YAAI;IACf,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,gCAAK,SAAS,EAAC,0BAA0B,YACvC,uBAAC,KAAK,KAAG,GACL,CACP;KACF;IACD,EAAE,EAAE,iBAAiB;IACrB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,iBAAiB;CACG,CAAC;AAE9B,kBAAe,aAAa,CAAC;AAGhB,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAiB;gBACvB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,cAAW;CACpB,CAAC;AAEW,QAAA,YAAY,GAAU;IACjC,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,yBAAsB;gBAC5B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,mBAAgB;CACzB,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,kBAAe;gBACrB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,YAAS;CAClB,CAAC;AAEW,QAAA,SAAS,GAAU;IAC9B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,sBAAmB;gBACzB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,gBAAa;CACtB,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,qBAAkB;gBACxB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,eAAY;CACrB,CAAC"}
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs.stories.tsx"],"names":[],"mappings":";;;;AAuBA,uCAAmC;AACnC,wBAeW;AAEX,MAAM,aAAa,GAAsB;IACvC,SAAS,EAAE,YAAI;IACf,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,gCAAK,SAAS,EAAC,0BAA0B,YACvC,uBAAC,KAAK,KAAG,GACL,CACP;KACF;IACD,EAAE,EAAE,iBAAiB;IACrB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,iBAAiB;CACG,CAAC;AAE9B,kBAAe,aAAa,CAAC;AAGhB,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAiB;gBACvB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,cAAW;CACpB,CAAC;AAEW,QAAA,YAAY,GAAU;IACjC,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,yBAAsB;gBAC5B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,mBAAgB;CACzB,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,kBAAe;gBACrB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,YAAS;CAClB,CAAC;AAEW,QAAA,SAAS,GAAU;IAC9B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,sBAAmB;gBACzB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,gBAAa;CACtB,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,qBAAkB;gBACxB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,eAAY;CACrB,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,qBAAkB;gBACxB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,eAAY;CACrB,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,kBAAe;gBACrB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,YAAS;CAClB,CAAC"}

package/lib/cjs/tabs/use-tabs-scroll-overflow.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsScrollOverflow = void 0;
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const react_1 = require("react");
+// Custom hook for managing scroll overflow behavior
+const useTabsScrollOverflow = (scrollContainerRef) => {
+    const [scrollState, setScrollState] = (0, react_1.useState)({
+        isLeftVisible: false,
+        isRightVisible: false,
+    });
+    const checkOverflow = (0, react_1.useCallback)(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+        const tolerance = 1;
+        setScrollState({
+            isLeftVisible: scrollLeft > 0,
+            isRightVisible: scrollLeft < scrollWidth - clientWidth - tolerance,
+        });
+    }, [scrollContainerRef]);
+    const scrollToNextItem = (0, react_1.useCallback)((direction) => {
+        const scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        const tabs = Array.from(scrollContainer.querySelectorAll('.ndl-tab'));
+        if (tabs.length === 0)
+            return;
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
+        let targetTab = null;
+        if (direction === 'right') {
+            for (const tab of tabs) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.right > containerRect.right) {
+                    targetTab = tab;
+                    break;
+                }
+            }
+        }
+        else {
+            for (let i = tabs.length - 1; i >= 0; i--) {
+                const tab = tabs[i];
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.left < containerRect.left) {
+                    targetTab = tab;
+                    break;
+                }
+            }
+        }
+        if (targetTab) {
+            const tabRect = targetTab.getBoundingClientRect();
+            const scrollLeft = scrollContainer.scrollLeft;
+            const targetScrollLeft = scrollLeft + (tabRect.left - containerCenter + tabRect.width / 2);
+            scrollContainer.scrollTo({
+                behavior: 'smooth',
+                left: targetScrollLeft,
+            });
+        }
+    }, [scrollContainerRef]);
+    // Consolidated effect for all scroll-related event listeners
+    (0, react_1.useEffect)(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        const handleScroll = () => checkOverflow();
+        const resizeObserver = new ResizeObserver(() => checkOverflow());
+        scrollContainer.addEventListener('scroll', handleScroll);
+        resizeObserver.observe(scrollContainer);
+        // Initial check
+        checkOverflow();
+        return () => {
+            scrollContainer.removeEventListener('scroll', handleScroll);
+            resizeObserver.disconnect();
+        };
+    }, [checkOverflow, scrollContainerRef]);
+    return {
+        checkOverflow,
+        scrollState,
+        scrollToNextItem,
+    };
+};
+exports.useTabsScrollOverflow = useTabsScrollOverflow;
+//# sourceMappingURL=use-tabs-scroll-overflow.js.map

package/lib/cjs/tabs/use-tabs-scroll-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-scroll-overflow.js","sourceRoot":"","sources":["../../../src/tabs/use-tabs-scroll-overflow.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/tag/Tag.js

@@ -1,3 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -18,12 +25,7 @@
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const defaultImports_1 = require("../_common/defaultImports");
+const classnames_1 = __importDefault(require("classnames"));
 const conditional_wrap_1 = require("../conditional-wrap");
 const icons_1 = require("../icons");
 /**
@@ -31,7 +33,7 @@ const icons_1 = require("../icons");
  * A tag is always removable. If you want a non removable tag, use the Label component instead.
  */
 const Tag = ({ children, type = 'default', size = 'medium', onClick, className, style, htmlAttributes, ref, }) => {
-    const classes = (0, defaultImports_1.classNames)(`ndl-tag`, className, {
+    const classes = (0, classnames_1.default)(`ndl-tag`, className, {
         'ndl-destructive': type === 'destructive',
         'ndl-small': size === 'small',
         'ndl-medium': size === 'medium',

package/lib/cjs/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/tag/Tag.tsx"],"names":[],"mappings":";;;;AAsBA,8DAAuD;AAEvD,0DAAsD;AACtD,oCAA4C;AAa5C;;;GAGG;AACI,MAAM,GAAG,GAAG,CAAC,EAClB,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,GAC0B,EAAE,EAAE;IACjC,MAAM,OAAO,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,SAAS,EAAE;QAC/C,iBAAiB,EAAE,IAAI,KAAK,aAAa;QACzC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,+CAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,IAAM,cAAc,eACjE,uBAAC,kCAAe,IACd,UAAU,EAAE,IAAI,KAAK,aAAa,EAClC,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAClB,mCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YACnC,QAAQ,GACF,CACV,YAED,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,GACnC,EACjB,IAAI,KAAK,aAAa,IAAI,CACzB,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,OAAO,gBACL,YAAY,YAEvB,uBAAC,wBAAgB,KAAG,GACb,CACV,KACG,CACP,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,GAAG,OAyCd"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/tag/Tag.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAIpC,0DAAsD;AACtD,oCAA4C;AAa5C;;;GAGG;AACI,MAAM,GAAG,GAAG,CAAC,EAClB,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,GAC0B,EAAE,EAAE;IACjC,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,SAAS,EAAE,SAAS,EAAE;QAC/C,iBAAiB,EAAE,IAAI,KAAK,aAAa;QACzC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,+CAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,IAAM,cAAc,eACjE,uBAAC,kCAAe,IACd,UAAU,EAAE,IAAI,KAAK,aAAa,EAClC,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAClB,mCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YACnC,QAAQ,GACF,CACV,YAED,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,GACnC,EACjB,IAAI,KAAK,aAAa,IAAI,CACzB,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,OAAO,gBACL,YAAY,YAEvB,uBAAC,wBAAgB,KAAG,GACb,CACV,KACG,CACP,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,GAAG,OAyCd"}

package/lib/cjs/text-area/TextArea.js

@@ -1,3 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -18,13 +25,8 @@
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-const defaultImports_1 = require("../_common/defaultImports");
 const messages_1 = require("../_common/messages");
 const utils_1 = require("../_common/utils");
 const icons_1 = require("../icons");
@@ -36,8 +38,8 @@ const tooltip_1 = require("../tooltip");
  *
  *
  */
-const TextArea = ({ label, isFluid = false, errorText, helpText, isOptional = false, informationIconText, size = 'medium', ariaLabel: ariaLabel, tooltipProps, isDisabled = false, className, isReadOnly = false, style, value, placeholder, htmlAttributes, ref, }) => {
-    const containerWrappingClasses = (0, defaultImports_1.classNames)(`ndl-text-area ndl-type-text`, className, {
+const TextArea = ({ label, isFluid = false, errorText, helpText, isOptional = false, moreInformationText, size = 'medium', ariaLabel: ariaLabel, tooltipProps, isDisabled = false, className, isReadOnly = false, style, value, placeholder, htmlAttributes, ref, }) => {
+    const containerWrappingClasses = (0, classnames_1.default)(`ndl-text-area ndl-type-text`, className, {
         'ndl-disabled': isDisabled,
         'ndl-small': size === 'small',
         'ndl-medium': size === 'medium',
@@ -47,7 +49,7 @@ const TextArea = ({ label, isFluid = false, errorText, helpText, isOptional = fa
         'ndl-has-icon': errorText,
     });
     const hasEmptyLabelValue = !label || label === '';
-    const labelWrappingClasses = (0, defaultImports_1.classNames)('ndl-text-area-label', {
+    const labelWrappingClasses = (0, classnames_1.default)('ndl-text-area-label', {
         'ndl-fluid': isFluid,
         'ndl-text-area-no-label': hasEmptyLabelValue,
     });
@@ -61,11 +63,11 @@ const TextArea = ({ label, isFluid = false, errorText, helpText, isOptional = fa
             (0, utils_1.needleWarningMessage)(messages_1.customLabelAndNoAriaLabelWarningMessage);
         }
     }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);
-    const informationIconClasses = (0, defaultImports_1.classNames)({
+    const informationIconClasses = (0, classnames_1.default)({
         'ndl-information-icon-small': size === 'small' || size === 'medium',
         'ndl-information-icon-large': size === 'large',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: containerWrappingClasses, children: [(0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-text-area-wrapper", children: (0, jsx_runtime_1.jsx)("textarea", Object.assign({ disabled: isDisabled, ref: ref, "aria-label": ariaLabel, readOnly: isReadOnly, value: value, placeholder: placeholder, style: style }, htmlAttributes)) }), !hasEmptyLabelValue && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-text-area-wrapper", children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-text-area-label-text", children: label }), informationIconText && ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { children: (0, jsx_runtime_1.jsx)("div", { className: informationIconClasses, "data-testid": "ndl-information-icon", children: (0, jsx_runtime_1.jsx)(icons_1.InformationCircleIconOutline, {}) }) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: informationIconText }))] }))), isOptional && ((0, jsx_runtime_1.jsx)("span", { className: "ndl-text-area-optional", children: "Optional" }))] }))] }), helpText && !errorText && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-text-area-msg", children: helpText })), errorText && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-text-area-msg", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-error-text", children: errorText })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: containerWrappingClasses, children: [(0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-text-area-wrapper", children: (0, jsx_runtime_1.jsx)("textarea", Object.assign({ disabled: isDisabled, ref: ref, "aria-label": ariaLabel, readOnly: isReadOnly, value: value, placeholder: placeholder, style: style }, htmlAttributes)) }), !hasEmptyLabelValue && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-text-area-wrapper", children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-text-area-label-text", children: label }), Boolean(moreInformationText) && ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { children: (0, jsx_runtime_1.jsx)("div", { className: informationIconClasses, "data-testid": "ndl-information-icon", children: (0, jsx_runtime_1.jsx)(icons_1.InformationCircleIconOutline, {}) }) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), isOptional && ((0, jsx_runtime_1.jsx)("span", { className: "ndl-text-area-optional", children: "Optional" }))] }))] }), helpText && !errorText && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-text-area-msg", children: helpText })), errorText && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-text-area-msg", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-error-text", children: errorText })] }))] }));
 };
 exports.TextArea = TextArea;
 //# sourceMappingURL=TextArea.js.map

package/lib/cjs/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAEpC,iCAAgD;AAEhD,kDAA8E;AAM9E,4CAAwD;AACxD,oCAGkB;AAClB,wCAAqC;AA4DrC;;;;;;GAMG;AAEI,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,mBAAmB,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EACZ,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,GAAG,GACoC,EAAE,EAAE;IAC3C,MAAM,wBAAwB,GAAG,IAAA,oBAAU,EACzC,6BAA6B,EAC7B,SAAS,EACT;QACE,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,eAAe,EAAE,SAAS;QAC1B,uBAAuB,EAAE,SAAS;QAClC,cAAc,EAAE,SAAS;KAC1B,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC;IAElD,MAAM,oBAAoB,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE;QAC7D,WAAW,EAAE,OAAO;QACpB,wBAAwB,EAAE,kBAAkB;KAC7C,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;IACzD,MAAM,4BAA4B,GAAG,aAAa,IAAI,CAAC,SAAS,CAAC;IAEjE,IAAA,eAAO,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACzB,IAAA,4BAAoB,EAClB,sLAAsL,CACvL,CAAC;QACJ,CAAC;QAED,IAAI,4BAA4B,EAAE,CAAC;YACjC,IAAA,4BAAoB,EAAC,kDAAuC,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAErD,MAAM,sBAAsB,GAAG,IAAA,oBAAU,EAAC;QACxC,4BAA4B,EAAE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;QACnE,4BAA4B,EAAE,IAAI,KAAK,OAAO;KAC/C,CAAC,CAAC;IAEH,OAAO,CACL,iCAAK,SAAS,EAAE,wBAAwB,aAGtC,mCAAO,SAAS,EAAE,oBAAoB,aACpC,gCAAK,SAAS,EAAC,uBAAuB,YACpC,mDACE,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,GAAG,gBACI,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,IACR,cAAc,EAClB,GACE,EACL,CAAC,kBAAkB,IAAI,CACtB,iCAAK,SAAS,EAAC,uBAAuB,aACpC,iCAAM,SAAS,EAAC,0BAA0B,YAAE,KAAK,GAAQ,EACxD,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAC/B,wBAAC,iBAAO,kBAAC,IAAI,EAAC,QAAQ,IAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,eAC3C,uBAAC,iBAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACxC,gCACE,SAAS,EAAE,sBAAsB,iBACrB,sBAAsB,YAElC,uBAAC,oCAA4B,KAAG,GAC5B,IACU,EAClB,uBAAC,iBAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,mBAAmB,IACJ,KACV,CACX,EACA,UAAU,IAAI,CACb,iCAAM,SAAS,EAAC,wBAAwB,yBAAgB,CACzD,IACG,CACP,IACK,EACP,QAAQ,IAAI,CAAC,SAAS,IAAI,CACzB,gCAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,CACpD,EACA,SAAS,IAAI,CACZ,iCAAK,SAAS,EAAC,mBAAmB,aAChC,gCAAK,SAAS,EAAC,gBAAgB,YAC7B,uBAAC,kCAA0B,KAAG,GAC1B,EACN,gCAAK,SAAS,EAAC,gBAAgB,YAAE,SAAS,GAAO,IAC7C,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAlHW,QAAA,QAAQ,YAkHnB"}

package/lib/cjs/text-area/stories/text-area-information-icon.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Label", informationIconText: "Information icon text", tooltipProps: {
+    return ((0, jsx_runtime_1.jsx)(react_1.TextArea, { label: "Label", moreInformationText: "Information icon text", tooltipProps: {
             root: {
                 placement: 'right',
             },

package/lib/cjs/text-input/TextInput.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -22,8 +25,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-const defaultImports_1 = require("../_common/defaultImports");
 const messages_1 = require("../_common/messages");
 const utils_1 = require("../_common/utils");
 const icons_1 = require("../icons");
@@ -37,8 +40,8 @@ const typography_1 = require("../typography");
  *
  *
  */
-const TextInput = ({ label, isFluid, errorText, helpText, leadingElement, trailingElement, isOptional = false, informationIconText, size = 'medium', placeholder, value, tooltipProps, htmlAttributes, isDisabled, isReadOnly, isRequired, onChange, className, style, isSkeletonLoading = false, skeletonProps, ref, }) => {
-    const containerWrappingClasses = (0, defaultImports_1.classNames)(`ndl-text-input`, className, {
+const TextInput = ({ label, isFluid, errorText, helpText, leadingElement, trailingElement, showRequiredOrOptionalLabel = false, moreInformationText, size = 'medium', placeholder, value, tooltipProps, htmlAttributes, isDisabled, isReadOnly, isRequired, onChange, className, style, isSkeletonLoading = false, skeletonProps, ref, }) => {
+    const containerWrappingClasses = (0, classnames_1.default)(`ndl-text-input`, className, {
         'ndl-disabled': isDisabled,
         'ndl-has-error': errorText,
         'ndl-has-icon': leadingElement || trailingElement || errorText,
@@ -50,11 +53,11 @@ const TextInput = ({ label, isFluid, errorText, helpText, leadingElement, traili
         'ndl-small': size === 'small',
     });
     const hasEmptyLabelValue = label === undefined || label === null || label === '';
-    const labelWrappingClasses = (0, defaultImports_1.classNames)('ndl-form-item-label', {
+    const labelWrappingClasses = (0, classnames_1.default)('ndl-form-item-label', {
         'ndl-fluid': isFluid,
         'ndl-form-item-no-label': hasEmptyLabelValue,
     });
-    const combinedHtmlInputAttributes = Object.assign(Object.assign({}, htmlAttributes), { className: (0, defaultImports_1.classNames)('ndl-input', htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.className) });
+    const combinedHtmlInputAttributes = Object.assign(Object.assign({}, htmlAttributes), { className: (0, classnames_1.default)('ndl-input', htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.className) });
     const ariaLabel = combinedHtmlInputAttributes['aria-label'];
     const isCustomLabel = Boolean(label) && typeof label !== 'string';
     const hasCustomLabelAndNoAriaLabel = isCustomLabel && (ariaLabel === undefined || ariaLabel === '');
@@ -66,14 +69,14 @@ const TextInput = ({ label, isFluid, errorText, helpText, leadingElement, traili
             (0, utils_1.needleWarningMessage)(messages_1.customLabelAndNoAriaLabelWarningMessage);
         }
     }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);
-    const informationIconClasses = (0, defaultImports_1.classNames)({
+    const informationIconClasses = (0, classnames_1.default)({
         'ndl-information-icon-large': size === 'large',
         'ndl-information-icon-small': size === 'small' || size === 'medium',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: containerWrappingClasses, style: style, children: [(0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-label-text-wrapper", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(informationIconText) && ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, children: (0, jsx_runtime_1.jsx)(icons_1.InformationCircleIconOutline, {}) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: informationIconText }))] }))), isOptional && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-form-item-optional", children: "Optional" }))] }) }))), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-input-wrapper", children: [leadingElement && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-leading ndl-element", children: leadingElement })), (0, jsx_runtime_1.jsx)("input", Object.assign({ readOnly: isReadOnly, disabled: isDisabled, required: isRequired, value: value, placeholder: placeholder, type: "text", onChange: onChange }, combinedHtmlInputAttributes, { ref: ref })), trailingElement && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-trailing ndl-element", children: trailingElement }))] }) }))] }), Boolean(helpText) && !errorText && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { onBackground: "weak", variant: "rectangular", isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-form-message", children: helpText }) })), Boolean(errorText) && (
+    return ((0, jsx_runtime_1.jsxs)("div", { className: containerWrappingClasses, style: style, children: [(0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-label-text-wrapper", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(moreInformationText) && ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", children: (0, jsx_runtime_1.jsx)(icons_1.InformationCircleIconOutline, {}) }) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), showRequiredOrOptionalLabel && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-form-item-optional", children: isRequired === true ? 'Required' : 'Optional' }))] }) }))), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-input-wrapper", children: [leadingElement && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-leading ndl-element", children: leadingElement })), (0, jsx_runtime_1.jsx)("input", Object.assign({ readOnly: isReadOnly, disabled: isDisabled, required: isRequired, value: value, placeholder: placeholder, type: "text", onChange: onChange }, combinedHtmlInputAttributes, { ref: ref })), trailingElement && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-trailing ndl-element", children: trailingElement }))] }) }))] }), Boolean(helpText) && !errorText && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { onBackground: "weak", shape: "rectangular", isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-form-message", children: helpText }) })), Boolean(errorText) && (
             // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.
             // Currently the message fills 100% of the width while the rest of the text input has a set width.
-            (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular", width: "fit-content" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-form-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, {}) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-error-text", variant: size === 'large' ? 'body-medium' : 'body-small', children: errorText })] }) })))] }));
+            (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "fit-content" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-form-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, {}) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-error-text", variant: size === 'large' ? 'body-medium' : 'body-small', children: errorText })] }) })))] }));
 };
 exports.TextInput = TextInput;
 //# sourceMappingURL=TextInput.js.map

package/lib/cjs/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/text-input/stories/text-input-disabled.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", isDisabled: true, helpText: "Help text" });
+    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", isDisabled: true, helpText: "Help text", value: "Value" }));
 };
 exports.default = Component;
 //# sourceMappingURL=text-input-disabled.story.js.map

package/lib/cjs/text-input/stories/text-input-disabled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-disabled.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,uBAAC,iBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,QAAC,QAAQ,EAAC,WAAW,GAAG,CAAC;AACrE,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"text-input-disabled.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,QAAC,QAAQ,EAAC,WAAW,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1E,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/text-input/stories/text-input-full.story.js

@@ -27,11 +27,11 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const react_2 = require("react");
 const Component = () => {
     const [textValue, setTextValue] = (0, react_2.useState)('');
-    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", helpText: "Help text", placeholder: "Placeholder", value: textValue, onChange: (e) => setTextValue(e.target.value), leadingElement: (0, jsx_runtime_1.jsx)(icons_1.UserIconOutline, {}), trailingElement: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: () => setTextValue(''), tooltip: "clear text", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) }), size: "medium", informationIconText: "Information icon text", tooltipProps: {
+    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", helpText: "Help text", placeholder: "Placeholder", value: textValue, onChange: (e) => setTextValue(e.target.value), leadingElement: (0, jsx_runtime_1.jsx)(icons_1.UserIconOutline, {}), trailingElement: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: () => setTextValue(''), description: "clear text", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) }), size: "medium", moreInformationText: "Information icon text", tooltipProps: {
             root: { placement: 'top' },
-        }, isRequired: false, isOptional: true, isDisabled: false, isReadOnly: false, isFluid: false, isSkeletonLoading: false, skeletonProps: {
+        }, isRequired: false, showRequiredOrOptionalLabel: true, isDisabled: false, isReadOnly: false, isFluid: false, isSkeletonLoading: false, skeletonProps: {
             onBackground: 'weak',
-            variant: 'rectangular',
+            shape: 'rectangular',
         } }));
 };
 exports.default = Component;

package/lib/cjs/text-input/stories/text-input-full.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-full.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA8D;AAC9D,kDAA2E;AAC3E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,uBAAC,iBAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,cAAc,EAAE,uBAAC,uBAAe,KAAG,EACnC,eAAe,EACb,uBAAC,uBAAe,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,OAAO,EAAC,YAAY,YACpE,uBAAC,wBAAgB,KAAG,GACJ,EAEpB,IAAI,EAAC,QAAQ,EACb,mBAAmB,EAAC,uBAAuB,EAC3C,YAAY,EAAE;YACZ,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC3B,EACD,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,KAAK,EACd,iBAAiB,EAAE,KAAK,EACxB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,aAAa;SACvB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"text-input-full.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA8D;AAC9D,kDAA2E;AAC3E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,uBAAC,iBAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,WAAW,EAAC,aAAa,EACzB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,cAAc,EAAE,uBAAC,uBAAe,KAAG,EACnC,eAAe,EACb,uBAAC,uBAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAC/B,WAAW,EAAC,YAAY,YAExB,uBAAC,wBAAgB,KAAG,GACJ,EAEpB,IAAI,EAAC,QAAQ,EACb,mBAAmB,EAAC,uBAAuB,EAC3C,YAAY,EAAE;YACZ,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC3B,EACD,UAAU,EAAE,KAAK,EACjB,2BAA2B,EAAE,IAAI,EACjC,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,KAAK,EACd,iBAAiB,EAAE,KAAK,EACxB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa;SACrB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/text-input/stories/text-input-information-icon.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", informationIconText: "Information icon text" }));
+    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", moreInformationText: "Information icon text" }));
 };
 exports.default = Component;
 //# sourceMappingURL=text-input-information-icon.story.js.map

package/lib/cjs/text-input/stories/text-input-loading.story.js

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
     return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", helpText: "Help text", isSkeletonLoading: true, skeletonProps: {
             onBackground: 'weak',
-            variant: 'rectangular',
+            shape: 'rectangular',
         } }));
 };
 exports.default = Component;

package/lib/cjs/text-input/stories/text-input-loading.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-loading.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-loading.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,iBAAiB,EAAE,IAAI,EACvB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,aAAa;SACvB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"text-input-loading.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-loading.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,WAAW,EACpB,iBAAiB,EAAE,IAAI,EACvB,aAAa,EAAE;YACb,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa;SACrB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/text-input/stories/text-input-optional.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", isOptional: true, helpText: "Help text" });
+    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", helpText: "Help text", showRequiredOrOptionalLabel: true }));
 };
 exports.default = Component;
 //# sourceMappingURL=text-input-optional.story.js.map

package/lib/cjs/text-input/stories/text-input-optional.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-optional.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-optional.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,uBAAC,iBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,QAAC,QAAQ,EAAC,WAAW,GAAG,CAAC;AACrE,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"text-input-optional.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-optional.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,WAAW,EAAC,2BAA2B,SAAG,CAC7E,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/text-input/stories/text-input-password.story.js

@@ -27,7 +27,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const react_2 = require("react");
 const Component = () => {
     const [isPasswordVisible, setIsPasswordVisible] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Password", trailingElement: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: () => setIsPasswordVisible(!isPasswordVisible), tooltip: "toggle password visibility", children: isPasswordVisible ? (0, jsx_runtime_1.jsx)(icons_1.EyeIconOutline, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeSlashIconOutline, {}) }), placeholder: "Enter password", htmlAttributes: {
+    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Password", trailingElement: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: () => setIsPasswordVisible(!isPasswordVisible), description: "toggle password visibility", children: isPasswordVisible ? (0, jsx_runtime_1.jsx)(icons_1.EyeIconOutline, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeSlashIconOutline, {}) }), placeholder: "Enter password", htmlAttributes: {
             type: isPasswordVisible ? 'text' : 'password',
         } }));
 };

package/lib/cjs/text-input/stories/text-input-password.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-password.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-password.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA8D;AAC9D,kDAA6E;AAC7E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,uBAAC,iBAAS,IACR,KAAK,EAAC,UAAU,EAChB,eAAe,EACb,uBAAC,uBAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,EACvD,OAAO,EAAC,4BAA4B,YAEnC,iBAAiB,CAAC,CAAC,CAAC,uBAAC,sBAAc,KAAG,CAAC,CAAC,CAAC,uBAAC,2BAAmB,KAAG,GACjD,EAEpB,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE;YACd,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;SAC9C,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"text-input-password.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-password.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA8D;AAC9D,kDAA6E;AAC7E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,uBAAC,iBAAS,IACR,KAAK,EAAC,UAAU,EAChB,eAAe,EACb,uBAAC,uBAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,EACvD,WAAW,EAAC,4BAA4B,YAEvC,iBAAiB,CAAC,CAAC,CAAC,uBAAC,sBAAc,KAAG,CAAC,CAAC,CAAC,uBAAC,2BAAmB,KAAG,GACjD,EAEpB,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE;YACd,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;SAC9C,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/text-input/stories/text-input-required.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", isRequired: true, helpText: "Help text" });
+    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Label", isRequired: true, helpText: "Help text", showRequiredOrOptionalLabel: true }));
 };
 exports.default = Component;
 //# sourceMappingURL=text-input-required.story.js.map

package/lib/cjs/text-input/stories/text-input-required.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-required.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-required.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,uBAAC,iBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,QAAC,QAAQ,EAAC,WAAW,GAAG,CAAC;AACrE,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"text-input-required.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-required.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6C;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,iBAAS,IACR,KAAK,EAAC,OAAO,EACb,UAAU,QACV,QAAQ,EAAC,WAAW,EACpB,2BAA2B,SAC3B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/text-input/stories/text-input-with-icons.story.js

@@ -27,7 +27,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
 const react_2 = require("react");
 const Component = () => {
     const [searchValue, setSearchValue] = (0, react_2.useState)('');
-    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Search", leadingElement: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), trailingElement: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: () => setSearchValue(''), tooltip: "clear search", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) }), placeholder: "Search...", value: searchValue, onChange: (e) => setSearchValue(e.target.value), htmlAttributes: {
+    return ((0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Search", leadingElement: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), trailingElement: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: () => setSearchValue(''), description: "clear search", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) }), placeholder: "Search...", value: searchValue, onChange: (e) => setSearchValue(e.target.value), htmlAttributes: {
             type: 'text',
         } }));
 };