@neo4j-ndl/react 4.1.5 → 4.1.7

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

@@ -1 +1 @@
-{"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch.stories.tsx"],"names":[],"mappings":";;;;AAsBA,uCAAqC;AACrC,yBAeY;AAEZ,MAAM,aAAa,GAAwB;IACzC,KAAK,EAAE,mBAAmB;IAC1B,EAAE,EAAE,mBAAmB;IACvB,SAAS,EAAE,cAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,WAAW,EAAE,4BAA4B;SAC1C;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,kBAAe,aAAa,CAAC;AAGhB,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,mBAAgB;gBACtB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,gBAAa;CACtB,CAAC;AAEW,QAAA,aAAa,GAAU;IAClC,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,sBAAmB;CAC5B,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,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,mBAAgB;CACzB,CAAC;AAEW,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,mBAAgB;gBACtB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,gBAAa;CACtB,CAAC;AAEW,QAAA,eAAe,GAAU;IACpC,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,0BAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,uBAAoB;CAC7B,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,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,iBAAc;CACvB,CAAC;AAEW,QAAA,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,gBAAa;gBACnB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,aAAU;CACnB,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 Meta, type StoryObj } from '@storybook/react-vite';\n\nimport { Switch } from '../../index';\nimport {\n  SwitchControlled,\n  SwitchControlledSrc,\n  SwitchDefault,\n  SwitchDefaultSrc,\n  SwitchDisabled,\n  SwitchDisabledSrc,\n  SwitchFull,\n  SwitchFullSrc,\n  SwitchHasLabelBefore,\n  SwitchHasLabelBeforeSrc,\n  SwitchIndeterminate,\n  SwitchIndeterminateSrc,\n  SwitchNoLabel,\n  SwitchNoLabelSrc,\n} from './';\n\nconst componentMeta: Meta<typeof Switch> = {\n  title: 'Components/Switch',\n  id: 'components-switch',\n  component: Switch,\n  tags: ['docsPage'],\n  argTypes: {\n    ref: {\n      description: 'Ref to the `input` element',\n    },\n  },\n  parameters: {\n    controls: { disable: true },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"n-flex n-justify-center\">\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\nexport const Default: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchDefaultSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchDefault,\n};\n\nexport const Indeterminate: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchIndeterminateSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchIndeterminate,\n};\n\nexport const Controlled: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchControlledSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchControlled,\n};\n\nexport const NoLabel: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchNoLabelSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchNoLabel,\n};\n\nexport const HasLeadingLabel: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchHasLabelBeforeSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchHasLabelBefore,\n};\n\nexport const Disabled: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchDisabledSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchDisabled,\n};\n\nexport const Full: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchFullSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchFull,\n};\n"]}
+{"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../../src/switch/stories/switch.stories.tsx"],"names":[],"mappings":";;;;AAsBA,uCAAqC;AACrC,wBAeW;AAEX,MAAM,aAAa,GAAwB;IACzC,KAAK,EAAE,mBAAmB;IAC1B,EAAE,EAAE,mBAAmB;IACvB,SAAS,EAAE,cAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,WAAW,EAAE,4BAA4B;SAC1C;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KAC5B;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,kBAAe,aAAa,CAAC;AAGhB,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,mBAAgB;gBACtB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,gBAAa;CACtB,CAAC;AAEW,QAAA,aAAa,GAAU;IAClC,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,sBAAmB;CAC5B,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,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,mBAAgB;CACzB,CAAC;AAEW,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,mBAAgB;gBACtB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,gBAAa;CACtB,CAAC;AAEW,QAAA,eAAe,GAAU;IACpC,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,0BAAuB;gBAC7B,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,uBAAoB;CAC7B,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,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,iBAAc;CACvB,CAAC;AAEW,QAAA,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI,EAAE,gBAAa;gBACnB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD,MAAM,EAAE,aAAU;CACnB,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 Meta, type StoryObj } from '@storybook/react-vite';\n\nimport { Switch } from '../../index';\nimport {\n  SwitchControlled,\n  SwitchControlledSrc,\n  SwitchDefault,\n  SwitchDefaultSrc,\n  SwitchDisabled,\n  SwitchDisabledSrc,\n  SwitchFull,\n  SwitchFullSrc,\n  SwitchHasLabelBefore,\n  SwitchHasLabelBeforeSrc,\n  SwitchIndeterminate,\n  SwitchIndeterminateSrc,\n  SwitchNoLabel,\n  SwitchNoLabelSrc,\n} from '.';\n\nconst componentMeta: Meta<typeof Switch> = {\n  title: 'Components/Switch',\n  id: 'components-switch',\n  component: Switch,\n  tags: ['docsPage'],\n  argTypes: {\n    ref: {\n      description: 'Ref to the `input` element',\n    },\n  },\n  parameters: {\n    controls: { disable: true },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"n-flex n-justify-center\">\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\nexport const Default: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchDefaultSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchDefault,\n};\n\nexport const Indeterminate: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchIndeterminateSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchIndeterminate,\n};\n\nexport const Controlled: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchControlledSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchControlled,\n};\n\nexport const NoLabel: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchNoLabelSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchNoLabel,\n};\n\nexport const HasLeadingLabel: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchHasLabelBeforeSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchHasLabelBefore,\n};\n\nexport const Disabled: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchDisabledSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchDisabled,\n};\n\nexport const Full: Story = {\n  args: {},\n  parameters: {\n    docs: {\n      source: {\n        code: SwitchFullSrc,\n        language: 'tsx',\n        type: 'code',\n      },\n    },\n  },\n  render: SwitchFull,\n};\n"]}

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

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { 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: "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", isDisabled: true, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '0', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '1', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '2', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { 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: "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", isDisabled: true, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-disabled.story.js.map

package/lib/cjs/tabs/stories/tabs-disabled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-disabled.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,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,EAAC,UAAU,EAAE,IAAI,sBAEtB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,YACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,YACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,YACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\" isDisabled={true}>\n          Tab 3\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId={'0'}>\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'1'}>\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'2'}>\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-disabled.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-disabled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,wBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,aAC9D,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,EAAC,UAAU,EAAE,IAAI,sBAEtB,IACN,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,YACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [value, setValue] = useState<TabValues>('0');\n\n  return (\n    <div>\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\n        <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n        <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n        <Tabs.Tab id=\"2\" isDisabled={true}>\n          Tab 3\n        </Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js

@@ -27,7 +27,7 @@ const react_2 = require("react");
 const Component = () => {
     const [underlineValue, setUnderlineValue] = (0, react_2.useState)('0');
     const [filledValue, setFilledValue] = (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-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, 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: underlineValue, tabId: '0', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: '1', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: '2', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (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: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", 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: filledValue, tabId: '0', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: '1', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: '2', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
+    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-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, 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: underlineValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (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: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", 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: filledValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-fill-variants.story.js.map

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,oCAAiC,EAC5D,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,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,cAAc,EAAE,KAAK,EAAE,GAAG,YAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,YAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,YAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,EAC/C,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,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,WAAW,EAAE,KAAK,EAAE,GAAG,YAC3C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,YAC3C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,YAC3C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n  const [filledValue, setFilledValue] = 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-32\">\n        <Typography variant=\"label\">Underline (Default)</Typography>\n        <div>\n          <Tabs\n            value={underlineValue}\n            onChange={setUnderlineValue}\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={underlineValue} tabId={'0'}>\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId={'1'}>\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId={'2'}>\n            <Typography variant=\"body-medium\">Tab 3 content</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\">Filled</Typography>\n        <div>\n          <Tabs\n            value={filledValue}\n            onChange={setFilledValue}\n            fill=\"filled\"\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={filledValue} tabId={'0'}>\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId={'1'}>\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId={'2'}>\n            <Typography variant=\"body-medium\">Tab 3 content</Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,oCAAiC,EAC5D,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,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,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,EAC/C,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,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,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' | '1' | '2';\n\nconst Component = () => {\n  const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n  const [filledValue, setFilledValue] = 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-32\">\n        <Typography variant=\"label\">Underline (Default)</Typography>\n        <div>\n          <Tabs\n            value={underlineValue}\n            onChange={setUnderlineValue}\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={underlineValue} tabId=\"0\">\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId=\"1\">\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={underlineValue} tabId=\"2\">\n            <Typography variant=\"body-medium\">Tab 3 content</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\">Filled</Typography>\n        <div>\n          <Tabs\n            value={filledValue}\n            onChange={setFilledValue}\n            fill=\"filled\"\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={filledValue} tabId=\"0\">\n            <Typography variant=\"body-medium\">Tab 1 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId=\"1\">\n            <Typography variant=\"body-medium\">Tab 2 content</Typography>\n          </Tabs.TabPanel>\n          <Tabs.TabPanel value={filledValue} tabId=\"2\">\n            <Typography variant=\"body-medium\">Tab 3 content</Typography>\n          </Tabs.TabPanel>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -26,7 +26,7 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [value, setValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-80", 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: "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.Tab, { id: "3", children: "Tab 4" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "4", children: "Tab 5" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "5", children: "Tab 6" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "6", children: "Tab 7" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "7", children: "Tab 8" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "8", children: "Tab 9" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "9", children: "Tab 10" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '0', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '1', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '2', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '3', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 4 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '4', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 5 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '5', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 6 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '6', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 7 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '7', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 8 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '8', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 9 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: '9', children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 10 content" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-80", 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: "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.Tab, { id: "3", children: "Tab 4" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "4", children: "Tab 5" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "5", children: "Tab 6" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "6", children: "Tab 7" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "7", children: "Tab 8" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "8", children: "Tab 9" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "9", children: "Tab 10" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "3", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 4 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "4", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 5 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "5", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 6 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "6", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 7 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "7", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 8 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "8", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 9 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: value, tabId: "9", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 10 content" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-overflow.story.js.map

package/lib/cjs/tabs/stories/tabs-overflow.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-overflow.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-overflow.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [value, setValue] = useState<string>('0');\n\n  return (\n    <div className=\"n-w-80\">\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\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.Tab id=\"3\">Tab 4</Tabs.Tab>\n        <Tabs.Tab id=\"4\">Tab 5</Tabs.Tab>\n        <Tabs.Tab id=\"5\">Tab 6</Tabs.Tab>\n        <Tabs.Tab id=\"6\">Tab 7</Tabs.Tab>\n        <Tabs.Tab id=\"7\">Tab 8</Tabs.Tab>\n        <Tabs.Tab id=\"8\">Tab 9</Tabs.Tab>\n        <Tabs.Tab id=\"9\">Tab 10</Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId={'0'}>\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'1'}>\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'2'}>\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'3'}>\n        <Typography variant=\"body-medium\">Tab 4 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'4'}>\n        <Typography variant=\"body-medium\">Tab 5 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'5'}>\n        <Typography variant=\"body-medium\">Tab 6 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'6'}>\n        <Typography variant=\"body-medium\">Tab 7 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'7'}>\n        <Typography variant=\"body-medium\">Tab 8 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'8'}>\n        <Typography variant=\"body-medium\">Tab 9 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId={'9'}>\n        <Typography variant=\"body-medium\">Tab 10 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"tabs-overflow.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-overflow.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [value, setValue] = useState<string>('0');\n\n  return (\n    <div className=\"n-w-80\">\n      <Tabs value={value} onChange={setValue} className=\"n-mb-token-8\">\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.Tab id=\"3\">Tab 4</Tabs.Tab>\n        <Tabs.Tab id=\"4\">Tab 5</Tabs.Tab>\n        <Tabs.Tab id=\"5\">Tab 6</Tabs.Tab>\n        <Tabs.Tab id=\"6\">Tab 7</Tabs.Tab>\n        <Tabs.Tab id=\"7\">Tab 8</Tabs.Tab>\n        <Tabs.Tab id=\"8\">Tab 9</Tabs.Tab>\n        <Tabs.Tab id=\"9\">Tab 10</Tabs.Tab>\n      </Tabs>\n      <Tabs.TabPanel value={value} tabId=\"0\">\n        <Typography variant=\"body-medium\">Tab 1 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"1\">\n        <Typography variant=\"body-medium\">Tab 2 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"2\">\n        <Typography variant=\"body-medium\">Tab 3 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"3\">\n        <Typography variant=\"body-medium\">Tab 4 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"4\">\n        <Typography variant=\"body-medium\">Tab 5 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"5\">\n        <Typography variant=\"body-medium\">Tab 6 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"6\">\n        <Typography variant=\"body-medium\">Tab 7 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"7\">\n        <Typography variant=\"body-medium\">Tab 8 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"8\">\n        <Typography variant=\"body-medium\">Tab 9 content</Typography>\n      </Tabs.TabPanel>\n      <Tabs.TabPanel value={value} tabId=\"9\">\n        <Typography variant=\"body-medium\">Tab 10 content</Typography>\n      </Tabs.TabPanel>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -27,7 +27,7 @@ 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", 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" }) })] })] }));
+    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,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","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,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,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,wCAEnB,GACC,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,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,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,YACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wCAAqC,GACxD,IACZ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}

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

@@ -30,8 +30,9 @@ const useTabsScrollOverflow = (scrollContainerRef) => {
     });
     const checkOverflow = (0, react_1.useCallback)(() => {
         const scrollContainer = scrollContainerRef.current;
-        if (!scrollContainer)
+        if (!scrollContainer) {
             return;
+        }
         const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
         const tolerance = 1;
         setScrollState({
@@ -41,11 +42,13 @@ const useTabsScrollOverflow = (scrollContainerRef) => {
     }, [scrollContainerRef]);
     const scrollToNextItem = (0, react_1.useCallback)((direction) => {
         const scrollContainer = scrollContainerRef.current;
-        if (!scrollContainer)
+        if (!scrollContainer) {
             return;
+        }
         const tabs = Array.from(scrollContainer.querySelectorAll('.ndl-tab'));
-        if (tabs.length === 0)
+        if (tabs.length === 0) {
             return;
+        }
         const containerRect = scrollContainer.getBoundingClientRect();
         const containerCenter = containerRect.left + containerRect.width / 2;
         let targetTab = null;
@@ -81,8 +84,9 @@ const useTabsScrollOverflow = (scrollContainerRef) => {
     // Consolidated effect for all scroll-related event listeners
     (0, react_1.useEffect)(() => {
         const scrollContainer = scrollContainerRef.current;
-        if (!scrollContainer)
+        if (!scrollContainer) {
             return;
+        }
         const handleScroll = () => checkOverflow();
         const resizeObserver = new ResizeObserver(() => checkOverflow());
         scrollContainer.addEventListener('scroll', handleScroll);

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

@@ -1 +1 @@
-{"version":3,"file":"use-tabs-scroll-overflow.js","sourceRoot":"","sources":["../../../src/tabs/use-tabs-scroll-overflow.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 { useCallback, useEffect, useState } from 'react';\n\n// Custom hook for managing scroll overflow behavior\nexport const useTabsScrollOverflow = (\n  scrollContainerRef: React.RefObject<HTMLDivElement | null>,\n) => {\n  const [scrollState, setScrollState] = useState({\n    isLeftVisible: false,\n    isRightVisible: false,\n  });\n\n  const checkOverflow = useCallback(() => {\n    const scrollContainer = scrollContainerRef.current;\n    if (!scrollContainer) return;\n\n    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;\n    const tolerance = 1;\n\n    setScrollState({\n      isLeftVisible: scrollLeft > 0,\n      isRightVisible: scrollLeft < scrollWidth - clientWidth - tolerance,\n    });\n  }, [scrollContainerRef]);\n\n  const scrollToNextItem = useCallback(\n    (direction: 'left' | 'right') => {\n      const scrollContainer = scrollContainerRef.current;\n      if (!scrollContainer) return;\n\n      const tabs = Array.from(\n        scrollContainer.querySelectorAll('.ndl-tab'),\n      ) as HTMLElement[];\n      if (tabs.length === 0) return;\n\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      let targetTab: HTMLElement | null = null;\n\n      if (direction === 'right') {\n        for (const tab of tabs) {\n          const tabRect = tab.getBoundingClientRect();\n          if (tabRect.right > containerRect.right) {\n            targetTab = tab;\n            break;\n          }\n        }\n      } else {\n        for (let i = tabs.length - 1; i >= 0; i--) {\n          const tab = tabs[i];\n          const tabRect = tab.getBoundingClientRect();\n          if (tabRect.left < containerRect.left) {\n            targetTab = tab;\n            break;\n          }\n        }\n      }\n\n      if (targetTab) {\n        const tabRect = targetTab.getBoundingClientRect();\n        const scrollLeft = scrollContainer.scrollLeft;\n        const targetScrollLeft =\n          scrollLeft + (tabRect.left - containerCenter + tabRect.width / 2);\n\n        scrollContainer.scrollTo({\n          behavior: 'smooth',\n          left: targetScrollLeft,\n        });\n      }\n    },\n    [scrollContainerRef],\n  );\n\n  // Consolidated effect for all scroll-related event listeners\n  useEffect(() => {\n    const scrollContainer = scrollContainerRef.current;\n    if (!scrollContainer) return;\n\n    const handleScroll = () => checkOverflow();\n    const resizeObserver = new ResizeObserver(() => checkOverflow());\n\n    scrollContainer.addEventListener('scroll', handleScroll);\n    resizeObserver.observe(scrollContainer);\n\n    // Initial check\n    checkOverflow();\n\n    return () => {\n      scrollContainer.removeEventListener('scroll', handleScroll);\n      resizeObserver.disconnect();\n    };\n  }, [checkOverflow, scrollContainerRef]);\n\n  return {\n    checkOverflow,\n    scrollState,\n    scrollToNextItem,\n  };\n};\n"]}
+{"version":3,"file":"use-tabs-scroll-overflow.js","sourceRoot":"","sources":["../../../src/tabs/use-tabs-scroll-overflow.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 { useCallback, useEffect, useState } from 'react';\n\n// Custom hook for managing scroll overflow behavior\nexport const useTabsScrollOverflow = (\n  scrollContainerRef: React.RefObject<HTMLDivElement | null>,\n) => {\n  const [scrollState, setScrollState] = useState({\n    isLeftVisible: false,\n    isRightVisible: false,\n  });\n\n  const checkOverflow = useCallback(() => {\n    const scrollContainer = scrollContainerRef.current;\n    if (!scrollContainer) {\n      return;\n    }\n\n    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;\n    const tolerance = 1;\n\n    setScrollState({\n      isLeftVisible: scrollLeft > 0,\n      isRightVisible: scrollLeft < scrollWidth - clientWidth - tolerance,\n    });\n  }, [scrollContainerRef]);\n\n  const scrollToNextItem = useCallback(\n    (direction: 'left' | 'right') => {\n      const scrollContainer = scrollContainerRef.current;\n      if (!scrollContainer) {\n        return;\n      }\n\n      const tabs = Array.from(\n        scrollContainer.querySelectorAll('.ndl-tab'),\n      ) as HTMLElement[];\n      if (tabs.length === 0) {\n        return;\n      }\n\n      const containerRect = scrollContainer.getBoundingClientRect();\n      const containerCenter = containerRect.left + containerRect.width / 2;\n\n      let targetTab: HTMLElement | null = null;\n\n      if (direction === 'right') {\n        for (const tab of tabs) {\n          const tabRect = tab.getBoundingClientRect();\n          if (tabRect.right > containerRect.right) {\n            targetTab = tab;\n            break;\n          }\n        }\n      } else {\n        for (let i = tabs.length - 1; i >= 0; i--) {\n          const tab = tabs[i];\n          const tabRect = tab.getBoundingClientRect();\n          if (tabRect.left < containerRect.left) {\n            targetTab = tab;\n            break;\n          }\n        }\n      }\n\n      if (targetTab) {\n        const tabRect = targetTab.getBoundingClientRect();\n        const scrollLeft = scrollContainer.scrollLeft;\n        const targetScrollLeft =\n          scrollLeft + (tabRect.left - containerCenter + tabRect.width / 2);\n\n        scrollContainer.scrollTo({\n          behavior: 'smooth',\n          left: targetScrollLeft,\n        });\n      }\n    },\n    [scrollContainerRef],\n  );\n\n  // Consolidated effect for all scroll-related event listeners\n  useEffect(() => {\n    const scrollContainer = scrollContainerRef.current;\n    if (!scrollContainer) {\n      return;\n    }\n\n    const handleScroll = () => checkOverflow();\n    const resizeObserver = new ResizeObserver(() => checkOverflow());\n\n    scrollContainer.addEventListener('scroll', handleScroll);\n    resizeObserver.observe(scrollContainer);\n\n    // Initial check\n    checkOverflow();\n\n    return () => {\n      scrollContainer.removeEventListener('scroll', handleScroll);\n      resizeObserver.disconnect();\n    };\n  }, [checkOverflow, scrollContainerRef]);\n\n  return {\n    checkOverflow,\n    scrollState,\n    scrollToNextItem,\n  };\n};\n"]}

package/lib/cjs/tag/Tag.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -32,14 +43,15 @@ const icons_1 = require("../icons");
  * Tag component is a small visual element that represents a tag.
  * A tag is always removable. If you want a non removable tag, use the StatusLabel component instead.
  */
-const Tag = ({ children, type = 'default', size = 'medium', onClick, className, style, htmlAttributes, ref, }) => {
+const Tag = (_a) => {
+    var { children, type = 'default', size = 'medium', onClick, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "type", "size", "onClick", "className", "style", "htmlAttributes", "ref"]);
     const classes = (0, classnames_1.default)(`ndl-tag`, className, {
         'ndl-destructive': type === 'destructive',
         'ndl-small': size === 'small',
         'ndl-medium': size === 'medium',
         'ndl-large': size === 'large',
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, ref: ref, style: style }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: type === 'destructive', wrap: (children) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, children: children })), children: (0, jsx_runtime_1.jsx)("span", { className: "ndl-tag-content", children: children }) }), type !== 'destructive' && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "ndl-remove-icon", onClick: onClick, "aria-label": "Remove tag", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, ref: ref, style: style }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: type === 'destructive', wrap: (children) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, children: children })), children: (0, jsx_runtime_1.jsx)("span", { className: "ndl-tag-content", children: children }) }), type !== 'destructive' && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "ndl-remove-icon", onClick: onClick, "aria-label": "Remove tag", children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) }))] })));
 };
 exports.Tag = Tag;
 //# sourceMappingURL=Tag.js.map

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

@@ -1 +1 @@
-{"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type CommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\n\ninterface TagProps {\n  /** The content of the tag */\n  children: React.ReactNode;\n  /** Type of the tag */\n  type?: 'destructive' | 'default';\n  /** Size of the tag */\n  size?: 'small' | 'medium' | 'large';\n  /** Callback function triggered when tag should be removed */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * Tag component is a small visual element that represents a tag.\n * A tag is always removable. If you want a non removable tag, use the StatusLabel component instead.\n */\nexport const Tag = ({\n  children,\n  type = 'default',\n  size = 'medium',\n  onClick,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n}: CommonProps<'div', TagProps>) => {\n  const classes = classNames(`ndl-tag`, className, {\n    'ndl-destructive': type === 'destructive',\n    'ndl-small': size === 'small',\n    'ndl-medium': size === 'medium',\n    'ndl-large': size === 'large',\n  });\n\n  return (\n    <div className={classes} ref={ref} style={style} {...htmlAttributes}>\n      <ConditionalWrap\n        shouldWrap={type === 'destructive'}\n        wrap={(children) => (\n          <button type=\"button\" onClick={onClick}>\n            {children}\n          </button>\n        )}\n      >\n        <span className=\"ndl-tag-content\">{children}</span>\n      </ConditionalWrap>\n      {type !== 'destructive' && (\n        <button\n          type=\"button\"\n          className=\"ndl-remove-icon\"\n          onClick={onClick}\n          aria-label=\"Remove tag\"\n        >\n          <XMarkIconOutline />\n        </button>\n      )}\n    </div>\n  );\n};\n"]}
+{"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,EAUW,EAAE,EAAE;QAVf,EAClB,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAE0B,EAD1B,SAAS,cATM,sFAUnB,CADa;IAEZ,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,+CACE,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,eAElB,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;AAhDW,QAAA,GAAG,OAgDd","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type CommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\n\ninterface TagProps {\n  /** The content of the tag */\n  children: React.ReactNode;\n  /** Type of the tag */\n  type?: 'destructive' | 'default';\n  /** Size of the tag */\n  size?: 'small' | 'medium' | 'large';\n  /** Callback function triggered when tag should be removed */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * Tag component is a small visual element that represents a tag.\n * A tag is always removable. If you want a non removable tag, use the StatusLabel component instead.\n */\nexport const Tag = ({\n  children,\n  type = 'default',\n  size = 'medium',\n  onClick,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'div', TagProps>) => {\n  const classes = classNames(`ndl-tag`, className, {\n    'ndl-destructive': type === 'destructive',\n    'ndl-small': size === 'small',\n    'ndl-medium': size === 'medium',\n    'ndl-large': size === 'large',\n  });\n\n  return (\n    <div\n      className={classes}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ConditionalWrap\n        shouldWrap={type === 'destructive'}\n        wrap={(children) => (\n          <button type=\"button\" onClick={onClick}>\n            {children}\n          </button>\n        )}\n      >\n        <span className=\"ndl-tag-content\">{children}</span>\n      </ConditionalWrap>\n      {type !== 'destructive' && (\n        <button\n          type=\"button\"\n          className=\"ndl-remove-icon\"\n          onClick={onClick}\n          aria-label=\"Remove tag\"\n        >\n          <XMarkIconOutline />\n        </button>\n      )}\n    </div>\n  );\n};\n"]}

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

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -38,7 +49,8 @@ const tooltip_1 = require("../tooltip");
  *
  *
  */
-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 TextArea = (_a) => {
+    var { label, isFluid = false, errorText, helpText, isOptional = false, moreInformationText, size = 'medium', ariaLabel, tooltipProps, isDisabled = false, className, isReadOnly = false, style, value, placeholder, htmlAttributes, ref } = _a, restProps = __rest(_a, ["label", "isFluid", "errorText", "helpText", "isOptional", "moreInformationText", "size", "ariaLabel", "tooltipProps", "isDisabled", "className", "isReadOnly", "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',
@@ -67,7 +79,7 @@ const TextArea = ({ label, isFluid = false, errorText, helpText, isOptional = fa
         '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 }), 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 })] }))] }));
+    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 }, restProps, 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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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useMemo } from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n  type CommonProps,\n  type HtmlAttributes,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport {\n  ExclamationCircleIconSolid,\n  InformationCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype TextAreaProps = {\n  /** The label displayed above the textarea */\n  label?: ReactNode;\n\n  /** Whether the textarea should take the full available width */\n  isFluid?: boolean;\n\n  /** Assistive text displayed below the textarea */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Size of the textarea */\n  size?: 'small' | 'medium' | 'large';\n\n  /** Whether to display the Optional label next to the field label */\n  isOptional?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether the textarea is disabled */\n  isDisabled?: boolean;\n\n  /** Additional HTML attributes passed to the textarea element */\n  htmlAttributes?: HtmlAttributes<'textarea'>;\n\n  /** Aria label for accessibility when no visible label is provided */\n  ariaLabel?: string;\n\n  /** Additional class names */\n  className?: string;\n\n  /** Additional styles applied to the root element */\n  style?: React.CSSProperties;\n\n  /** Whether the textarea is read-only */\n  isReadOnly?: boolean;\n\n  /** The current value of the textarea */\n  value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n  /** Placeholder text displayed when the textarea is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/**\n *\n *\n * TextArea Component\n *\n *\n */\n\nexport const TextArea = ({\n  label,\n  isFluid = false,\n  errorText,\n  helpText,\n  isOptional = false,\n  moreInformationText,\n  size = 'medium',\n  ariaLabel: ariaLabel,\n  tooltipProps,\n  isDisabled = false,\n  className,\n  isReadOnly = false,\n  style,\n  value,\n  placeholder,\n  htmlAttributes,\n  ref,\n}: CommonProps<'textarea', TextAreaProps>) => {\n  const containerWrappingClasses = classNames(\n    `ndl-text-area ndl-type-text`,\n    className,\n    {\n      'ndl-disabled': isDisabled,\n      'ndl-small': size === 'small',\n      'ndl-medium': size === 'medium',\n      'ndl-large': size === 'large',\n      'ndl-has-error': errorText,\n      'ndl-has-trailing-icon': errorText,\n      'ndl-has-icon': errorText,\n    },\n  );\n\n  const hasEmptyLabelValue = !label || label === '';\n\n  const labelWrappingClasses = classNames('ndl-text-area-label', {\n    'ndl-fluid': isFluid,\n    'ndl-text-area-no-label': hasEmptyLabelValue,\n  });\n\n  const isCustomLabel = label && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  const informationIconClasses = classNames({\n    'ndl-information-icon-small': size === 'small' || size === 'medium',\n    'ndl-information-icon-large': size === 'large',\n  });\n\n  return (\n    <div className={containerWrappingClasses}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        <div className=\"ndl-text-area-wrapper\">\n          <textarea\n            disabled={isDisabled}\n            ref={ref}\n            aria-label={ariaLabel}\n            readOnly={isReadOnly}\n            value={value}\n            placeholder={placeholder}\n            style={style}\n            {...htmlAttributes}\n          />\n        </div>\n        {!hasEmptyLabelValue && (\n          <div className=\"ndl-text-area-wrapper\">\n            <span className=\"ndl-text-area-label-text\">{label}</span>\n            {Boolean(moreInformationText) && (\n              <Tooltip type=\"simple\" {...tooltipProps?.root}>\n                <Tooltip.Trigger {...tooltipProps?.trigger}>\n                  <div\n                    className={informationIconClasses}\n                    data-testid=\"ndl-information-icon\"\n                  >\n                    <InformationCircleIconOutline />\n                  </div>\n                </Tooltip.Trigger>\n                <Tooltip.Content {...tooltipProps?.content}>\n                  {moreInformationText}\n                </Tooltip.Content>\n              </Tooltip>\n            )}\n            {isOptional && (\n              <span className=\"ndl-text-area-optional\">Optional</span>\n            )}\n          </div>\n        )}\n      </label>\n      {helpText && !errorText && (\n        <div className=\"ndl-text-area-msg\">{helpText}</div>\n      )}\n      {errorText && (\n        <div className=\"ndl-text-area-msg\">\n          <div className=\"ndl-error-icon\">\n            <ExclamationCircleIconSolid />\n          </div>\n          <div className=\"ndl-error-text\">{errorText}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useMemo } from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n  type CommonProps,\n  type HtmlAttributes,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport {\n  ExclamationCircleIconSolid,\n  InformationCircleIconOutline,\n} from '../icons';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype TextAreaProps = {\n  /** The label displayed above the textarea */\n  label?: ReactNode;\n\n  /** Whether the textarea should take the full available width */\n  isFluid?: boolean;\n\n  /** Assistive text displayed below the textarea */\n  helpText?: string | ReactNode;\n\n  /** Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon */\n  errorText?: string | ReactNode;\n\n  /** Size of the textarea */\n  size?: 'small' | 'medium' | 'large';\n\n  /** Whether to display the Optional label next to the field label */\n  isOptional?: boolean;\n\n  /** Text displayed in the information tooltip shown next to the label */\n  moreInformationText?: React.ReactNode;\n\n  /** Props for the Tooltip component used by the information icon */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Whether the textarea is disabled */\n  isDisabled?: boolean;\n\n  /** Additional HTML attributes passed to the textarea element */\n  htmlAttributes?: HtmlAttributes<'textarea'>;\n\n  /** Aria label for accessibility when no visible label is provided */\n  ariaLabel?: string;\n\n  /** Additional class names */\n  className?: string;\n\n  /** Additional styles applied to the root element */\n  style?: React.CSSProperties;\n\n  /** Whether the textarea is read-only */\n  isReadOnly?: boolean;\n\n  /** The current value of the textarea */\n  value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n  /** Placeholder text displayed when the textarea is empty */\n  placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/**\n *\n *\n * TextArea Component\n *\n *\n */\n\nexport const TextArea = ({\n  label,\n  isFluid = false,\n  errorText,\n  helpText,\n  isOptional = false,\n  moreInformationText,\n  size = 'medium',\n  ariaLabel,\n  tooltipProps,\n  isDisabled = false,\n  className,\n  isReadOnly = false,\n  style,\n  value,\n  placeholder,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'textarea', TextAreaProps>) => {\n  const containerWrappingClasses = classNames(\n    `ndl-text-area ndl-type-text`,\n    className,\n    {\n      'ndl-disabled': isDisabled,\n      'ndl-small': size === 'small',\n      'ndl-medium': size === 'medium',\n      'ndl-large': size === 'large',\n      'ndl-has-error': errorText,\n      'ndl-has-trailing-icon': errorText,\n      'ndl-has-icon': errorText,\n    },\n  );\n\n  const hasEmptyLabelValue = !label || label === '';\n\n  const labelWrappingClasses = classNames('ndl-text-area-label', {\n    'ndl-fluid': isFluid,\n    'ndl-text-area-no-label': hasEmptyLabelValue,\n  });\n\n  const isCustomLabel = label && typeof label !== 'string';\n  const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n  useMemo(() => {\n    if (!label && !ariaLabel) {\n      needleWarningMessage(\n        'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n\n    if (hasCustomLabelAndNoAriaLabel) {\n      needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n    }\n  }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n  const informationIconClasses = classNames({\n    'ndl-information-icon-small': size === 'small' || size === 'medium',\n    'ndl-information-icon-large': size === 'large',\n  });\n\n  return (\n    <div className={containerWrappingClasses}>\n      {/* We enable implicit label wrapping */}\n      {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n      <label className={labelWrappingClasses}>\n        <div className=\"ndl-text-area-wrapper\">\n          <textarea\n            disabled={isDisabled}\n            ref={ref}\n            aria-label={ariaLabel}\n            readOnly={isReadOnly}\n            value={value}\n            placeholder={placeholder}\n            style={style}\n            {...restProps}\n            {...htmlAttributes}\n          />\n        </div>\n        {!hasEmptyLabelValue && (\n          <div className=\"ndl-text-area-wrapper\">\n            <span className=\"ndl-text-area-label-text\">{label}</span>\n            {Boolean(moreInformationText) && (\n              <Tooltip type=\"simple\" {...tooltipProps?.root}>\n                <Tooltip.Trigger {...tooltipProps?.trigger}>\n                  <div\n                    className={informationIconClasses}\n                    data-testid=\"ndl-information-icon\"\n                  >\n                    <InformationCircleIconOutline />\n                  </div>\n                </Tooltip.Trigger>\n                <Tooltip.Content {...tooltipProps?.content}>\n                  {moreInformationText}\n                </Tooltip.Content>\n              </Tooltip>\n            )}\n            {isOptional && (\n              <span className=\"ndl-text-area-optional\">Optional</span>\n            )}\n          </div>\n        )}\n      </label>\n      {helpText && !errorText && (\n        <div className=\"ndl-text-area-msg\">{helpText}</div>\n      )}\n      {errorText && (\n        <div className=\"ndl-text-area-msg\">\n          <div className=\"ndl-error-icon\">\n            <ExclamationCircleIconSolid />\n          </div>\n          <div className=\"ndl-error-text\">{errorText}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

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

@@ -24,7 +24,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InformationIcon = exports.Sizes = exports.Fluid = exports.Disabled = exports.Error = exports.Optional = exports.Resizable = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../../index");
-const _1 = require("./");
+const _1 = require(".");
 const componentMeta = {
     title: 'Components/TextArea',
     id: 'components-text-area',

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

@@ -1 +1 @@
-{"version":3,"file":"text-area.stories.js","sourceRoot":"","sources":["../../../../src/text-area/stories/text-area.stories.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 Meta, type StoryObj } from '@storybook/react-vite';\n\nimport { TextArea } from '../../index';\nimport {\n  TextAreaDefault,\n  TextAreaDefaultSrc,\n  TextAreaDisabled,\n  TextAreaDisabledSrc,\n  TextAreaError,\n  TextAreaErrorSrc,\n  TextAreaFluid,\n  TextAreaFluidSrc,\n  TextAreaInformationIcon,\n  TextAreaInformationIconSrc,\n  TextAreaOptional,\n  TextAreaOptionalSrc,\n  TextAreaResizable,\n  TextAreaResizableSrc,\n  TextAreaSizes,\n  TextAreaSizesSrc,\n} from './';\n\nconst componentMeta: Meta<typeof TextArea> = {\n  title: 'Components/TextArea',\n  id: 'components-text-area',\n  component: TextArea,\n  tags: ['docsPage'],\n  parameters: {\n    controls: { disable: true },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"n-flex n-justify-center\">\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\nexport const Default: Story = {\n  args: {},\n  render: TextAreaDefault,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaDefaultSrc,\n      },\n    },\n  },\n};\n\nexport const Resizable: Story = {\n  args: {},\n  render: TextAreaResizable,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaResizableSrc,\n      },\n    },\n  },\n};\n\nexport const Optional: Story = {\n  args: {},\n  render: TextAreaOptional,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaOptionalSrc,\n      },\n    },\n  },\n};\n\nexport const Error: Story = {\n  args: {},\n  render: TextAreaError,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaErrorSrc,\n      },\n    },\n  },\n};\n\nexport const Disabled: Story = {\n  args: {},\n  render: TextAreaDisabled,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaDisabledSrc,\n      },\n    },\n  },\n};\n\nexport const Fluid: Story = {\n  args: {},\n  render: TextAreaFluid,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaFluidSrc,\n      },\n    },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"n-w-full\">\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport const Sizes: Story = {\n  args: {},\n  render: TextAreaSizes,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaSizesSrc,\n      },\n    },\n  },\n};\n\nexport const InformationIcon: Story = {\n  args: {},\n  render: TextAreaInformationIcon,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaInformationIconSrc,\n      },\n    },\n  },\n};\n"]}
+{"version":3,"file":"text-area.stories.js","sourceRoot":"","sources":["../../../../src/text-area/stories/text-area.stories.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 Meta, type StoryObj } from '@storybook/react-vite';\n\nimport { TextArea } from '../../index';\nimport {\n  TextAreaDefault,\n  TextAreaDefaultSrc,\n  TextAreaDisabled,\n  TextAreaDisabledSrc,\n  TextAreaError,\n  TextAreaErrorSrc,\n  TextAreaFluid,\n  TextAreaFluidSrc,\n  TextAreaInformationIcon,\n  TextAreaInformationIconSrc,\n  TextAreaOptional,\n  TextAreaOptionalSrc,\n  TextAreaResizable,\n  TextAreaResizableSrc,\n  TextAreaSizes,\n  TextAreaSizesSrc,\n} from '.';\n\nconst componentMeta: Meta<typeof TextArea> = {\n  title: 'Components/TextArea',\n  id: 'components-text-area',\n  component: TextArea,\n  tags: ['docsPage'],\n  parameters: {\n    controls: { disable: true },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"n-flex n-justify-center\">\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport default componentMeta;\ntype Story = StoryObj<typeof componentMeta>;\n\nexport const Default: Story = {\n  args: {},\n  render: TextAreaDefault,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaDefaultSrc,\n      },\n    },\n  },\n};\n\nexport const Resizable: Story = {\n  args: {},\n  render: TextAreaResizable,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaResizableSrc,\n      },\n    },\n  },\n};\n\nexport const Optional: Story = {\n  args: {},\n  render: TextAreaOptional,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaOptionalSrc,\n      },\n    },\n  },\n};\n\nexport const Error: Story = {\n  args: {},\n  render: TextAreaError,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaErrorSrc,\n      },\n    },\n  },\n};\n\nexport const Disabled: Story = {\n  args: {},\n  render: TextAreaDisabled,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaDisabledSrc,\n      },\n    },\n  },\n};\n\nexport const Fluid: Story = {\n  args: {},\n  render: TextAreaFluid,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaFluidSrc,\n      },\n    },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"n-w-full\">\n        <Story />\n      </div>\n    ),\n  ],\n};\n\nexport const Sizes: Story = {\n  args: {},\n  render: TextAreaSizes,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaSizesSrc,\n      },\n    },\n  },\n};\n\nexport const InformationIcon: Story = {\n  args: {},\n  render: TextAreaInformationIcon,\n  parameters: {\n    docs: {\n      source: {\n        language: 'tsx',\n        type: 'code',\n        code: TextAreaInformationIconSrc,\n      },\n    },\n  },\n};\n"]}

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

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,7 +51,8 @@ const typography_1 = require("../typography");
  *
  *
  */
-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 TextInput = (_a) => {
+    var { 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 } = _a, restProps = __rest(_a, ["label", "isFluid", "errorText", "helpText", "leadingElement", "trailingElement", "showRequiredOrOptionalLabel", "moreInformationText", "size", "placeholder", "value", "tooltipProps", "htmlAttributes", "isDisabled", "isReadOnly", "isRequired", "onChange", "className", "style", "isSkeletonLoading", "skeletonProps", "ref"]);
     const containerWrappingClasses = (0, classnames_1.default)(`ndl-text-input`, className, {
         'ndl-disabled': isDisabled,
         'ndl-has-error': errorText,
@@ -73,7 +85,7 @@ const TextInput = ({ label, isFluid, errorText, helpText, leadingElement, traili
         '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", 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) && (
+    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, restProps, { 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", 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 })] }) })))] }));