@neo4j-ndl/react 4.21.1 → 4.21.2-alpha.c774957.15.1

package/lib/cjs/ai/reasoning/Reasoning.js

@@ -56,7 +56,7 @@ const ReasoningComponent = (_a) => {
     const buttonId = (0, react_2.useId)();
     const panelId = (0, react_2.useId)();
     const { value: thinkingDuration, unit } = (0, thinking_duration_formatter_1.formatThinkingDuration)(thinkingMs);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(react_1.Typography, Object.assign({ variant: "label", className: (0, classnames_1.default)('ndl-ai-reasoning-header', {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(react_1.Typography, Object.assign({ variant: "title-4", className: (0, classnames_1.default)('ndl-ai-reasoning-header', {
                     'ndl-expanded': isExpanded,
                 }) }, (!isThinking
                 ? {

package/lib/cjs/ai/reasoning/Reasoning.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.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 { Typography } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useId, useState } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\nimport { ChevronDownIconOutline } from '../../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from '../thinking/thinking-duration-formatter';\n\ntype ReasoningProps = {\n  /** What should be displayed inside the reasoning component. */\n  children?: React.ReactNode;\n  /** Whether the AI is thinking */\n  isThinking?: boolean;\n  /** The duration of the thinking in milliseconds */\n  thinkingMs?: number;\n  /** The current action the AI is performing */\n  currentAction?: string;\n};\n\n/**\n * The component is used to display the reasoning state of an LLM.\n * It has an accordion like behavior to show the reasoning steps.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ReasoningComponent = ({\n  isThinking = true,\n  thinkingMs = 1000,\n  currentAction = 'Thinking',\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'div', ReasoningProps>) => {\n  const classes = classNames('ndl-ai-reasoning', className);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const shouldShowChildren = isExpanded && isThinking === false;\n  const buttonId = useId();\n  const panelId = useId();\n\n  const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"label\"\n        className={classNames('ndl-ai-reasoning-header', {\n          'ndl-expanded': isExpanded,\n        })}\n        {...(!isThinking\n          ? {\n              as: 'button',\n              htmlAttributes: {\n                'aria-controls': panelId,\n                'aria-expanded': isExpanded,\n                id: buttonId,\n                onClick: () => setIsExpanded(!isExpanded),\n                type: 'button',\n              },\n            }\n          : { as: 'div', htmlAttributes: { id: buttonId } })}\n      >\n        {isThinking === true ? (\n          <>\n            <Presence\n              isThinking={isThinking}\n              className=\"ndl-ai-reasoning-presence\"\n            />\n            <span className=\"ndl-ai-reasoning-header-text\">\n              {currentAction}...\n            </span>\n          </>\n        ) : (\n          <>\n            <span>\n              Thought for {thinkingDuration} {unit}\n            </span>\n            <ChevronDownIconOutline\n              className={classNames('ndl-ai-reasoning-chevron', {\n                'ndl-expanded': isExpanded,\n              })}\n            />\n          </>\n        )}\n      </Typography>\n      <div\n        className={classNames('ndl-ai-reasoning-content', {\n          'ndl-expanded': shouldShowChildren,\n        })}\n        inert={!shouldShowChildren}\n        aria-hidden={!shouldShowChildren}\n        aria-labelledby={buttonId}\n        role=\"region\"\n        id={panelId}\n      >\n        <div className=\"ndl-ai-reasoning-content-inner\">\n          <div className=\"ndl-ai-reasoning-content-inner-2\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype SectionProps = {\n  /** The heading of the section */\n  heading?: React.ReactNode;\n  /** The children of the section */\n  children?: React.ReactNode;\n  /** The visual leading the section */\n  leadingVisual?: React.ReactNode;\n  // TODO v5: remove this prop\n  /** Whether the section is expanded.\n   * @deprecated - Does nothing, will be removed in v5 */\n  isExpanded?: boolean;\n  // TODO v5: remove this prop\n  /** The default value of the section is expanded.\n   * @deprecated - Does nothing, will be removed in v5 */\n  isDefaultExpanded?: boolean;\n  // TODO v5: remove this prop\n  /** Callback function triggered when the section is expanded.\n   * @deprecated - Does nothing, will be removed in v5 */\n  onExpandChange?: (isExpanded: boolean) => void;\n};\n\nconst Section = ({\n  heading,\n  leadingVisual,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  isExpanded: _isExpanded,\n  isDefaultExpanded: _isDefaultExpanded,\n  onExpandChange: _onExpandChange,\n  ...restProps\n}: CommonProps<'div', SectionProps>) => {\n  const classes = classNames('ndl-ai-reasoning-section', className);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-ai-reasoning-section-header\">\n        <div className=\"ndl-ai-reasoning-section-leading\">{leadingVisual}</div>\n        <Typography variant=\"subheading-small\">{heading}</Typography>\n      </div>\n      <div className=\"ndl-ai-reasoning-section-content\">\n        <div className=\"ndl-ai-reasoning-section-content-line-container\">\n          <div className=\"ndl-ai-reasoning-section-content-line\" />\n        </div>\n        <div className=\"ndl-ai-reasoning-section-content-children\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst Footer = ({\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'div', { children: React.ReactNode }>) => {\n  const classes = classNames('ndl-ai-reasoning-footer', className);\n  return (\n    <Typography\n      as=\"div\"\n      variant=\"body-small\"\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Reasoning = Object.assign(ReasoningComponent, {\n  Footer,\n  Section,\n});\n\nexport { Reasoning };\n"]}
+{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.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 { Typography } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useId, useState } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\nimport { ChevronDownIconOutline } from '../../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from '../thinking/thinking-duration-formatter';\n\ntype ReasoningProps = {\n  /** What should be displayed inside the reasoning component. */\n  children?: React.ReactNode;\n  /** Whether the AI is thinking */\n  isThinking?: boolean;\n  /** The duration of the thinking in milliseconds */\n  thinkingMs?: number;\n  /** The current action the AI is performing */\n  currentAction?: string;\n};\n\n/**\n * The component is used to display the reasoning state of an LLM.\n * It has an accordion like behavior to show the reasoning steps.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ReasoningComponent = ({\n  isThinking = true,\n  thinkingMs = 1000,\n  currentAction = 'Thinking',\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'div', ReasoningProps>) => {\n  const classes = classNames('ndl-ai-reasoning', className);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const shouldShowChildren = isExpanded && isThinking === false;\n  const buttonId = useId();\n  const panelId = useId();\n\n  const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"title-4\"\n        className={classNames('ndl-ai-reasoning-header', {\n          'ndl-expanded': isExpanded,\n        })}\n        {...(!isThinking\n          ? {\n              as: 'button',\n              htmlAttributes: {\n                'aria-controls': panelId,\n                'aria-expanded': isExpanded,\n                id: buttonId,\n                onClick: () => setIsExpanded(!isExpanded),\n                type: 'button',\n              },\n            }\n          : { as: 'div', htmlAttributes: { id: buttonId } })}\n      >\n        {isThinking === true ? (\n          <>\n            <Presence\n              isThinking={isThinking}\n              className=\"ndl-ai-reasoning-presence\"\n            />\n            <span className=\"ndl-ai-reasoning-header-text\">\n              {currentAction}...\n            </span>\n          </>\n        ) : (\n          <>\n            <span>\n              Thought for {thinkingDuration} {unit}\n            </span>\n            <ChevronDownIconOutline\n              className={classNames('ndl-ai-reasoning-chevron', {\n                'ndl-expanded': isExpanded,\n              })}\n            />\n          </>\n        )}\n      </Typography>\n      <div\n        className={classNames('ndl-ai-reasoning-content', {\n          'ndl-expanded': shouldShowChildren,\n        })}\n        inert={!shouldShowChildren}\n        aria-hidden={!shouldShowChildren}\n        aria-labelledby={buttonId}\n        role=\"region\"\n        id={panelId}\n      >\n        <div className=\"ndl-ai-reasoning-content-inner\">\n          <div className=\"ndl-ai-reasoning-content-inner-2\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype SectionProps = {\n  /** The heading of the section */\n  heading?: React.ReactNode;\n  /** The children of the section */\n  children?: React.ReactNode;\n  /** The visual leading the section */\n  leadingVisual?: React.ReactNode;\n  // TODO v5: remove this prop\n  /** Whether the section is expanded.\n   * @deprecated - Does nothing, will be removed in v5 */\n  isExpanded?: boolean;\n  // TODO v5: remove this prop\n  /** The default value of the section is expanded.\n   * @deprecated - Does nothing, will be removed in v5 */\n  isDefaultExpanded?: boolean;\n  // TODO v5: remove this prop\n  /** Callback function triggered when the section is expanded.\n   * @deprecated - Does nothing, will be removed in v5 */\n  onExpandChange?: (isExpanded: boolean) => void;\n};\n\nconst Section = ({\n  heading,\n  leadingVisual,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  isExpanded: _isExpanded,\n  isDefaultExpanded: _isDefaultExpanded,\n  onExpandChange: _onExpandChange,\n  ...restProps\n}: CommonProps<'div', SectionProps>) => {\n  const classes = classNames('ndl-ai-reasoning-section', className);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-ai-reasoning-section-header\">\n        <div className=\"ndl-ai-reasoning-section-leading\">{leadingVisual}</div>\n        <Typography variant=\"subheading-small\">{heading}</Typography>\n      </div>\n      <div className=\"ndl-ai-reasoning-section-content\">\n        <div className=\"ndl-ai-reasoning-section-content-line-container\">\n          <div className=\"ndl-ai-reasoning-section-content-line\" />\n        </div>\n        <div className=\"ndl-ai-reasoning-section-content-children\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst Footer = ({\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'div', { children: React.ReactNode }>) => {\n  const classes = classNames('ndl-ai-reasoning-footer', className);\n  return (\n    <Typography\n      as=\"div\"\n      variant=\"body-small\"\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Reasoning = Object.assign(ReasoningComponent, {\n  Footer,\n  Section,\n});\n\nexport { Reasoning };\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"clean-icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,YACjD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"small\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Small</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"medium\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Medium</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"large\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clean-icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,YACjD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAChD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"small\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"title-4\"> Small</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"medium\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"title-4\"> Medium</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" size=\"large\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"title-4\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"clean-icon-button-tone.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-tone.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,YACrD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YACpD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" variant=\"neutral\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\">Default</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" variant=\"danger\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"label\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clean-icon-button-tone.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-tone.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,YACrD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,uBAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YACpD,uBAAC,kCAA0B,KAAG,GACd,EAClB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" variant=\"neutral\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"title-4\">Default</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton description=\"Search\" variant=\"danger\">\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n        <Typography variant=\"title-4\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/date-picker/stories/date-picker-with-timezone-both-mode.story.js

@@ -55,7 +55,7 @@ const DatePickerWithTimeZoneBothMode = () => {
                     flexDirection: 'column',
                     marginTop: '24px',
                     padding: '16px',
-                }, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "label", children: "Selected Values:" }), (0, jsx_runtime_1.jsxs)(typography_1.Typography, { variant: "body-small", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Date: " }), (_a = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString()) !== null && _a !== void 0 ? _a : 'None'] }), (0, jsx_runtime_1.jsxs)(typography_1.Typography, { variant: "body-small", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Timezone:" }), " ", selectedTimeZone || 'None'] })] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "title-4", children: "Selected Values:" }), (0, jsx_runtime_1.jsxs)(typography_1.Typography, { variant: "body-small", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Date: " }), (_a = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString()) !== null && _a !== void 0 ? _a : 'None'] }), (0, jsx_runtime_1.jsxs)(typography_1.Typography, { variant: "body-small", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Timezone:" }), " ", selectedTimeZone || 'None'] })] })] }));
 };
 exports.DatePickerWithTimeZoneBothMode = DatePickerWithTimeZoneBothMode;
 exports.default = exports.DatePickerWithTimeZoneBothMode;

package/lib/cjs/date-picker/stories/date-picker-with-timezone-both-mode.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker-with-timezone-both-mode.story.js","sourceRoot":"","sources":["../../../../src/date-picker/stories/date-picker-with-timezone-both-mode.story.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iCAAiC;AAEjC,iDAA8C;AAC9C,8CAA2C;AAEpC,MAAM,8BAA8B,GAAG,GAAG,EAAE;;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ;IAC9C,sCAAsC;IACtC,IAAI,IAAI,CAAC,YAAY,CAAC,CACvB,CAAC;IACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAC3C,IAAA,gBAAQ,EAAS,kBAAkB,CAAC,CAAC;IAEvC,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAChD,uBAAC,uBAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,qDAEhD,EACb,uBAAC,uBAAU,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,uKAIpD,EAEb,uBAAC,uBAAU,IACT,cAAc,EAAE;oBACd,KAAK,EAAE,oCAAoC;iBAC5C,EACD,eAAe,EAAE;oBACf,MAAM,EAAE,OAAO;iBAChB,EACD,mBAAmB,EAAE;oBACnB,IAAI,EAAE,MAAM;oBACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;wBACf,mBAAmB,CAAC,EAAE,CAAC,CAAC;oBAC1B,CAAC;oBACD,KAAK,EAAE,gBAAgB;iBACxB,EACD,oBAAoB,EAAE;oBACpB,UAAU,EAAE,kBAAkB;oBAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;wBACjB,eAAe,CAAC,IAAI,CAAC,CAAC;oBACxB,CAAC;oBACD,QAAQ,EAAE,YAAY;oBACtB,aAAa,EAAE,IAAI;iBACpB,GACD,EAEF,iCACE,KAAK,EAAE;oBACL,eAAe,EAAE,uCAAuC;oBACxD,YAAY,EAAE,KAAK;oBACnB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,SAAS,EAAE,MAAM;oBACjB,OAAO,EAAE,MAAM;iBAChB,aAED,uBAAC,uBAAU,IAAC,OAAO,EAAC,OAAO,iCAA8B,EACzD,wBAAC,uBAAU,IAAC,OAAO,EAAC,YAAY,aAC9B,wDAAuB,EACtB,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,EAAE,mCAAI,MAAM,IAC3B,EACb,wBAAC,uBAAU,IAAC,OAAO,EAAC,YAAY,aAC9B,2DAA0B,OAAE,gBAAgB,IAAI,MAAM,IAC3C,IACT,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAhEW,QAAA,8BAA8B,kCAgEzC;AAEF,kBAAe,sCAA8B,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useState } from 'react';\n\nimport { Typography } from '../../typography';\nimport { DatePicker } from '../DatePicker';\n\nexport const DatePickerWithTimeZoneBothMode = () => {\n  const [selectedDate, setSelectedDate] = useState<Date | null>(\n    // Every day is Christmas in Needle :)\n    new Date('2025-12-24'),\n  );\n  const [selectedTimeZone, setSelectedTimeZone] =\n    useState<string>('America/New_York');\n\n  return (\n    <div style={{ maxWidth: '400px', padding: '20px' }}>\n      <Typography variant=\"title-4\" style={{ marginBottom: '16px' }}>\n        DatePicker with TimeZone (Both Mode)\n      </Typography>\n      <Typography variant=\"body-medium\" style={{ marginBottom: '24px' }}>\n        This example shows the DatePicker with the TimeZonePicker in\n        &quot;both&quot; mode, displaying both UTC offsets and city-based\n        timezones in separate sections.\n      </Typography>\n\n      <DatePicker\n        textInputProps={{\n          label: 'Select Date and Time with Timezone',\n        }}\n        timePickerProps={{\n          format: 'hh:mm',\n        }}\n        timeZonePickerProps={{\n          mode: 'both',\n          onChange: (tz) => {\n            setSelectedTimeZone(tz);\n          },\n          value: selectedTimeZone,\n        }}\n        reactDatePickerProps={{\n          dateFormat: 'yyyy-MM-dd hh:mm',\n          onChange: (date) => {\n            setSelectedDate(date);\n          },\n          selected: selectedDate,\n          showTimeInput: true,\n        }}\n      />\n\n      <div\n        style={{\n          backgroundColor: 'var(--theme-color-neutral-bg-default)',\n          borderRadius: '4px',\n          display: 'flex',\n          flexDirection: 'column',\n          marginTop: '24px',\n          padding: '16px',\n        }}\n      >\n        <Typography variant=\"label\">Selected Values:</Typography>\n        <Typography variant=\"body-small\">\n          <strong>Date: </strong>\n          {selectedDate?.toISOString() ?? 'None'}\n        </Typography>\n        <Typography variant=\"body-small\">\n          <strong>Timezone:</strong> {selectedTimeZone || 'None'}\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default DatePickerWithTimeZoneBothMode;\n"]}
+{"version":3,"file":"date-picker-with-timezone-both-mode.story.js","sourceRoot":"","sources":["../../../../src/date-picker/stories/date-picker-with-timezone-both-mode.story.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iCAAiC;AAEjC,iDAA8C;AAC9C,8CAA2C;AAEpC,MAAM,8BAA8B,GAAG,GAAG,EAAE;;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ;IAC9C,sCAAsC;IACtC,IAAI,IAAI,CAAC,YAAY,CAAC,CACvB,CAAC;IACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAC3C,IAAA,gBAAQ,EAAS,kBAAkB,CAAC,CAAC;IAEvC,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAChD,uBAAC,uBAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,qDAEhD,EACb,uBAAC,uBAAU,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,uKAIpD,EAEb,uBAAC,uBAAU,IACT,cAAc,EAAE;oBACd,KAAK,EAAE,oCAAoC;iBAC5C,EACD,eAAe,EAAE;oBACf,MAAM,EAAE,OAAO;iBAChB,EACD,mBAAmB,EAAE;oBACnB,IAAI,EAAE,MAAM;oBACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;wBACf,mBAAmB,CAAC,EAAE,CAAC,CAAC;oBAC1B,CAAC;oBACD,KAAK,EAAE,gBAAgB;iBACxB,EACD,oBAAoB,EAAE;oBACpB,UAAU,EAAE,kBAAkB;oBAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;wBACjB,eAAe,CAAC,IAAI,CAAC,CAAC;oBACxB,CAAC;oBACD,QAAQ,EAAE,YAAY;oBACtB,aAAa,EAAE,IAAI;iBACpB,GACD,EAEF,iCACE,KAAK,EAAE;oBACL,eAAe,EAAE,uCAAuC;oBACxD,YAAY,EAAE,KAAK;oBACnB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,SAAS,EAAE,MAAM;oBACjB,OAAO,EAAE,MAAM;iBAChB,aAED,uBAAC,uBAAU,IAAC,OAAO,EAAC,SAAS,iCAA8B,EAC3D,wBAAC,uBAAU,IAAC,OAAO,EAAC,YAAY,aAC9B,wDAAuB,EACtB,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,EAAE,mCAAI,MAAM,IAC3B,EACb,wBAAC,uBAAU,IAAC,OAAO,EAAC,YAAY,aAC9B,2DAA0B,OAAE,gBAAgB,IAAI,MAAM,IAC3C,IACT,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAhEW,QAAA,8BAA8B,kCAgEzC;AAEF,kBAAe,sCAA8B,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useState } from 'react';\n\nimport { Typography } from '../../typography';\nimport { DatePicker } from '../DatePicker';\n\nexport const DatePickerWithTimeZoneBothMode = () => {\n  const [selectedDate, setSelectedDate] = useState<Date | null>(\n    // Every day is Christmas in Needle :)\n    new Date('2025-12-24'),\n  );\n  const [selectedTimeZone, setSelectedTimeZone] =\n    useState<string>('America/New_York');\n\n  return (\n    <div style={{ maxWidth: '400px', padding: '20px' }}>\n      <Typography variant=\"title-4\" style={{ marginBottom: '16px' }}>\n        DatePicker with TimeZone (Both Mode)\n      </Typography>\n      <Typography variant=\"body-medium\" style={{ marginBottom: '24px' }}>\n        This example shows the DatePicker with the TimeZonePicker in\n        &quot;both&quot; mode, displaying both UTC offsets and city-based\n        timezones in separate sections.\n      </Typography>\n\n      <DatePicker\n        textInputProps={{\n          label: 'Select Date and Time with Timezone',\n        }}\n        timePickerProps={{\n          format: 'hh:mm',\n        }}\n        timeZonePickerProps={{\n          mode: 'both',\n          onChange: (tz) => {\n            setSelectedTimeZone(tz);\n          },\n          value: selectedTimeZone,\n        }}\n        reactDatePickerProps={{\n          dateFormat: 'yyyy-MM-dd hh:mm',\n          onChange: (date) => {\n            setSelectedDate(date);\n          },\n          selected: selectedDate,\n          showTimeInput: true,\n        }}\n      />\n\n      <div\n        style={{\n          backgroundColor: 'var(--theme-color-neutral-bg-default)',\n          borderRadius: '4px',\n          display: 'flex',\n          flexDirection: 'column',\n          marginTop: '24px',\n          padding: '16px',\n        }}\n      >\n        <Typography variant=\"title-4\">Selected Values:</Typography>\n        <Typography variant=\"body-small\">\n          <strong>Date: </strong>\n          {selectedDate?.toISOString() ?? 'None'}\n        </Typography>\n        <Typography variant=\"body-small\">\n          <strong>Timezone:</strong> {selectedTimeZone || 'None'}\n        </Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default DatePickerWithTimeZoneBothMode;\n"]}

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

@@ -26,11 +26,11 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 // Configuration constants
 const CONFIG = {
-    MAX_FILES: 3,
+    ACCEPTED_EXTENSIONS: ['.txt', '.json'],
     MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
+    MAX_FILES: 3,
     PROGRESS_INCREMENT: 5,
     UPDATE_INTERVAL: 100,
-    ACCEPTED_EXTENSIONS: ['.txt', '.json'],
 };
 var UploadState;
 (function (UploadState) {
@@ -55,7 +55,7 @@ const Component = () => {
         });
     }, []);
     const simulateUpload = (0, react_2.useCallback)((files) => {
-        setUploadData((prev) => (Object.assign(Object.assign({}, prev), { state: UploadState.Uploading, files, progress: 0 })));
+        setUploadData((prev) => (Object.assign(Object.assign({}, prev), { files, progress: 0, state: UploadState.Uploading })));
         const interval = setInterval(() => {
             setUploadData((prev) => {
                 const newProgress = prev.progress + CONFIG.PROGRESS_INCREMENT;
@@ -76,11 +76,11 @@ const Component = () => {
     }, [simulateUpload]);
     const handleDropRejected = (0, react_2.useCallback)((rejectedFiles) => {
         const errors = rejectedFiles.map((file) => `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`);
-        setUploadData((prev) => (Object.assign(Object.assign({}, prev), { state: UploadState.Error, errors })));
+        setUploadData((prev) => (Object.assign(Object.assign({}, prev), { errors, state: UploadState.Error })));
     }, []);
     const handleError = (0, react_2.useCallback)((error) => {
         console.error('Dropzone error:', error);
-        setUploadData((prev) => (Object.assign(Object.assign({}, prev), { state: UploadState.Error, errors: [error.message] })));
+        setUploadData((prev) => (Object.assign(Object.assign({}, prev), { errors: [error.message], state: UploadState.Error })));
     }, []);
     const renderStatusContent = () => {
         const { state, progress, files, errors } = uploadData;
@@ -90,7 +90,7 @@ const Component = () => {
             case UploadState.Success:
                 return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", className: "n-text-success-text n-font-semibold", children: "Upload Complete!" }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: ["Successfully uploaded: ", files.map((file) => file.name).join(', ')] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: resetUpload, children: "Upload More Files" })] }));
             case UploadState.Error:
-                return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32", children: [(0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "n-w-token-32 n-h-token-32 n-text-danger-text" }), (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-y-token-2", children: errors.map((message, index) => ((0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", className: "n-text-danger-text n-font-semibold", htmlAttributes: { role: 'alert' }, children: message }, index))) }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: resetUpload, children: "Try Again" })] }));
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32", children: [(0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "n-w-token-32 n-h-token-32 n-text-danger-text" }), (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-y-token-2", children: errors.map((message, index) => ((0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", className: "n-text-danger-text n-font-semibold", htmlAttributes: { role: 'alert' }, children: message }, index))) }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: resetUpload, children: "Try Again" })] }));
             default:
                 return undefined;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"dropzone-full.story.js","sourceRoot":"","sources":["../../../../src/dropzone/stories/dropzone-full.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 */\nimport { XMarkIcon } from '@heroicons/react/24/solid';\nimport { Dropzone, FilledButton, Typography } from '@neo4j-ndl/react';\nimport { useCallback, useState } from 'react';\nimport {\n  type DropEvent,\n  type DropzoneOptions,\n  type FileRejection,\n} from 'react-dropzone';\n\n// Configuration constants\nconst CONFIG = {\n  MAX_FILES: 3,\n  MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB\n  PROGRESS_INCREMENT: 5,\n  UPDATE_INTERVAL: 100,\n  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],\n} as const;\n\nenum UploadState {\n  Idle = 'idle',\n  Uploading = 'uploading',\n  Success = 'success',\n  Error = 'error',\n}\n\ninterface UploadData {\n  state: UploadState;\n  progress: number;\n  files: File[];\n  errors: string[];\n}\n\nconst Component = () => {\n  const [uploadData, setUploadData] = useState<UploadData>({\n    errors: [],\n    files: [],\n    progress: 0,\n    state: UploadState.Idle,\n  });\n\n  const resetUpload = useCallback(() => {\n    setUploadData({\n      errors: [],\n      files: [],\n      progress: 0,\n      state: UploadState.Idle,\n    });\n  }, []);\n\n  const simulateUpload = useCallback((files: File[]) => {\n    setUploadData((prev) => ({\n      ...prev,\n      state: UploadState.Uploading,\n      files,\n      progress: 0,\n    }));\n\n    const interval = setInterval(() => {\n      setUploadData((prev) => {\n        const newProgress = prev.progress + CONFIG.PROGRESS_INCREMENT;\n        if (newProgress >= 100) {\n          clearInterval(interval);\n          setTimeout(\n            () =>\n              setUploadData((current) => ({\n                ...current,\n                state: UploadState.Success,\n              })),\n            500,\n          );\n          return { ...prev, progress: 100 };\n        }\n        return { ...prev, progress: newProgress };\n      });\n    }, CONFIG.UPDATE_INTERVAL);\n  }, []);\n\n  const handleDrop: DropzoneOptions['onDrop'] = useCallback(\n    (\n      acceptedFiles: File[],\n      rejectedFiles: FileRejection[],\n      event: DropEvent,\n    ) => {\n      console.info('Drop event:', { acceptedFiles, event, rejectedFiles });\n\n      if (acceptedFiles.length > 0) {\n        simulateUpload(acceptedFiles);\n      }\n    },\n    [simulateUpload],\n  );\n\n  const handleDropRejected: DropzoneOptions['onDropRejected'] = useCallback(\n    (rejectedFiles: FileRejection[]) => {\n      const errors = rejectedFiles.map(\n        (file) =>\n          `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,\n      );\n      setUploadData((prev) => ({ ...prev, state: UploadState.Error, errors }));\n    },\n    [],\n  );\n\n  const handleError = useCallback((error: Error) => {\n    console.error('Dropzone error:', error);\n    setUploadData((prev) => ({\n      ...prev,\n      state: UploadState.Error,\n      errors: [error.message],\n    }));\n  }, []);\n\n  const renderStatusContent = () => {\n    const { state, progress, files, errors } = uploadData;\n\n    switch (state) {\n      case UploadState.Uploading:\n        return (\n          <Dropzone.LoadingProgressBar\n            progressBarPrecentage={Math.round(progress)}\n          />\n        );\n\n      case UploadState.Success:\n        return (\n          <div className=\"n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32\">\n            <Typography\n              variant=\"title-4\"\n              className=\"n-text-success-text n-font-semibold\"\n            >\n              Upload Complete!\n            </Typography>\n            <Typography\n              variant=\"body-small\"\n              className=\"n-text-neutral-text-weak\"\n            >\n              Successfully uploaded: {files.map((file) => file.name).join(', ')}\n            </Typography>\n            <FilledButton onClick={resetUpload}>Upload More Files</FilledButton>\n          </div>\n        );\n\n      case UploadState.Error:\n        return (\n          <div className=\"n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32\">\n            <XMarkIcon className=\"n-w-token-32 n-h-token-32 n-text-danger-text\" />\n            <div className=\"n-flex n-flex-col n-gap-y-token-2\">\n              {errors.map((message, index) => (\n                <Typography\n                  key={index}\n                  variant=\"label\"\n                  className=\"n-text-danger-text n-font-semibold\"\n                  htmlAttributes={{ role: 'alert' }}\n                >\n                  {message}\n                </Typography>\n              ))}\n            </div>\n            <FilledButton onClick={resetUpload}>Try Again</FilledButton>\n          </div>\n        );\n\n      default:\n        return undefined;\n    }\n  };\n\n  return (\n    <Dropzone\n      dropZoneOptions={{\n        disabled: uploadData.state === UploadState.Uploading,\n        maxFiles: CONFIG.MAX_FILES,\n        maxSize: CONFIG.MAX_FILE_SIZE,\n        multiple: true,\n        onDrop: handleDrop,\n        onDropRejected: handleDropRejected,\n        onError: handleError,\n      }}\n      supportedFilesDescription={\n        <div className=\"n-text-center n-flex n-flex-col n-gap-y-token-2\">\n          <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n            Supports: Text files (.txt, .json) only\n          </Typography>\n          <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n            Max {CONFIG.MAX_FILES} files •{' '}\n            {CONFIG.MAX_FILE_SIZE / (1024 * 1024)}MB per file\n          </Typography>\n        </div>\n      }\n      acceptedFileExtensions={CONFIG.ACCEPTED_EXTENSIONS}\n      loadingElement={renderStatusContent()}\n      rejectedText=\"Error: Please make sure to only upload .json or .txt files\"\n      heading=\"Drag & Drop your files\"\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dropzone-full.story.js","sourceRoot":"","sources":["../../../../src/dropzone/stories/dropzone-full.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 */\nimport { XMarkIcon } from '@heroicons/react/24/solid';\nimport { Dropzone, FilledButton, Typography } from '@neo4j-ndl/react';\nimport { useCallback, useState } from 'react';\nimport {\n  type DropEvent,\n  type DropzoneOptions,\n  type FileRejection,\n} from 'react-dropzone';\n\n// Configuration constants\nconst CONFIG = {\n  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],\n  MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB\n  MAX_FILES: 3,\n  PROGRESS_INCREMENT: 5,\n  UPDATE_INTERVAL: 100,\n} as const;\n\nenum UploadState {\n  Idle = 'idle',\n  Uploading = 'uploading',\n  Success = 'success',\n  Error = 'error',\n}\n\ninterface UploadData {\n  state: UploadState;\n  progress: number;\n  files: File[];\n  errors: string[];\n}\n\nconst Component = () => {\n  const [uploadData, setUploadData] = useState<UploadData>({\n    errors: [],\n    files: [],\n    progress: 0,\n    state: UploadState.Idle,\n  });\n\n  const resetUpload = useCallback(() => {\n    setUploadData({\n      errors: [],\n      files: [],\n      progress: 0,\n      state: UploadState.Idle,\n    });\n  }, []);\n\n  const simulateUpload = useCallback((files: File[]) => {\n    setUploadData((prev) => ({\n      ...prev,\n      files,\n      progress: 0,\n      state: UploadState.Uploading,\n    }));\n\n    const interval = setInterval(() => {\n      setUploadData((prev) => {\n        const newProgress = prev.progress + CONFIG.PROGRESS_INCREMENT;\n        if (newProgress >= 100) {\n          clearInterval(interval);\n          setTimeout(\n            () =>\n              setUploadData((current) => ({\n                ...current,\n                state: UploadState.Success,\n              })),\n            500,\n          );\n          return { ...prev, progress: 100 };\n        }\n        return { ...prev, progress: newProgress };\n      });\n    }, CONFIG.UPDATE_INTERVAL);\n  }, []);\n\n  const handleDrop: DropzoneOptions['onDrop'] = useCallback(\n    (\n      acceptedFiles: File[],\n      rejectedFiles: FileRejection[],\n      event: DropEvent,\n    ) => {\n      console.info('Drop event:', { acceptedFiles, event, rejectedFiles });\n\n      if (acceptedFiles.length > 0) {\n        simulateUpload(acceptedFiles);\n      }\n    },\n    [simulateUpload],\n  );\n\n  const handleDropRejected: DropzoneOptions['onDropRejected'] = useCallback(\n    (rejectedFiles: FileRejection[]) => {\n      const errors = rejectedFiles.map(\n        (file) =>\n          `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,\n      );\n      setUploadData((prev) => ({ ...prev, errors, state: UploadState.Error }));\n    },\n    [],\n  );\n\n  const handleError = useCallback((error: Error) => {\n    console.error('Dropzone error:', error);\n    setUploadData((prev) => ({\n      ...prev,\n      errors: [error.message],\n      state: UploadState.Error,\n    }));\n  }, []);\n\n  const renderStatusContent = () => {\n    const { state, progress, files, errors } = uploadData;\n\n    switch (state) {\n      case UploadState.Uploading:\n        return (\n          <Dropzone.LoadingProgressBar\n            progressBarPrecentage={Math.round(progress)}\n          />\n        );\n\n      case UploadState.Success:\n        return (\n          <div className=\"n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32\">\n            <Typography\n              variant=\"title-4\"\n              className=\"n-text-success-text n-font-semibold\"\n            >\n              Upload Complete!\n            </Typography>\n            <Typography\n              variant=\"body-small\"\n              className=\"n-text-neutral-text-weak\"\n            >\n              Successfully uploaded: {files.map((file) => file.name).join(', ')}\n            </Typography>\n            <FilledButton onClick={resetUpload}>Upload More Files</FilledButton>\n          </div>\n        );\n\n      case UploadState.Error:\n        return (\n          <div className=\"n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32\">\n            <XMarkIcon className=\"n-w-token-32 n-h-token-32 n-text-danger-text\" />\n            <div className=\"n-flex n-flex-col n-gap-y-token-2\">\n              {errors.map((message, index) => (\n                <Typography\n                  key={index}\n                  variant=\"title-4\"\n                  className=\"n-text-danger-text n-font-semibold\"\n                  htmlAttributes={{ role: 'alert' }}\n                >\n                  {message}\n                </Typography>\n              ))}\n            </div>\n            <FilledButton onClick={resetUpload}>Try Again</FilledButton>\n          </div>\n        );\n\n      default:\n        return undefined;\n    }\n  };\n\n  return (\n    <Dropzone\n      dropZoneOptions={{\n        disabled: uploadData.state === UploadState.Uploading,\n        maxFiles: CONFIG.MAX_FILES,\n        maxSize: CONFIG.MAX_FILE_SIZE,\n        multiple: true,\n        onDrop: handleDrop,\n        onDropRejected: handleDropRejected,\n        onError: handleError,\n      }}\n      supportedFilesDescription={\n        <div className=\"n-text-center n-flex n-flex-col n-gap-y-token-2\">\n          <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n            Supports: Text files (.txt, .json) only\n          </Typography>\n          <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n            Max {CONFIG.MAX_FILES} files •{' '}\n            {CONFIG.MAX_FILE_SIZE / (1024 * 1024)}MB per file\n          </Typography>\n        </div>\n      }\n      acceptedFileExtensions={CONFIG.ACCEPTED_EXTENSIONS}\n      loadingElement={renderStatusContent()}\n      rejectedText=\"Error: Please make sure to only upload .json or .txt files\"\n      heading=\"Drag & Drop your files\"\n    />\n  );\n};\n\nexport default Component;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/icon-button/stories/icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0D;AAC1D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAC3C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,YAC5C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAC3C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { IconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" size=\"small\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"label\"> Small</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" size=\"medium\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"label\"> Medium</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" size=\"large\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"label\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/icon-button/stories/icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0D;AAC1D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAC3C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,YAC5C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAC3C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,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 { IconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" size=\"small\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"title-4\"> Small</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" size=\"medium\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"title-4\"> Medium</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" size=\"large\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"title-4\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button-tone.story.js","sourceRoot":"","sources":["../../../../src/icon-button/stories/icon-button-tone.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0D;AAC1D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,YAChD,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YAC/C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { IconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" variant=\"neutral\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"label\">Default</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" variant=\"danger\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"label\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"icon-button-tone.story.js","sourceRoot":"","sources":["../../../../src/icon-button/stories/icon-button-tone.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0D;AAC1D,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,YAChD,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,kBAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YAC/C,uBAAC,kCAA0B,KAAG,GACnB,EACb,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,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 { IconButton, Typography } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" variant=\"neutral\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"title-4\">Default</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <IconButton description=\"Search\" variant=\"danger\">\n          <MagnifyingGlassIconOutline />\n        </IconButton>\n        <Typography variant=\"title-4\">Danger</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/radio/stories/radio-custom-label.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { label: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Custom label" }), ariaLabel: "example aria label" }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { label: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", children: "Custom label" }), ariaLabel: "example aria label" }));
 };
 exports.default = Component;
 //# sourceMappingURL=radio-custom-label.story.js.map

package/lib/cjs/radio/stories/radio-custom-label.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-custom-label.story.js","sourceRoot":"","sources":["../../../../src/radio/stories/radio-custom-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAqD;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,aAAK,IACJ,KAAK,EAAE,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,6BAA0B,EAC5D,SAAS,EAAC,oBAAoB,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Radio, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Radio\n      label={<Typography variant=\"label\">Custom label</Typography>}\n      ariaLabel=\"example aria label\"\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"radio-custom-label.story.js","sourceRoot":"","sources":["../../../../src/radio/stories/radio-custom-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAqD;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,aAAK,IACJ,KAAK,EAAE,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,6BAA0B,EAC9D,SAAS,EAAC,oBAAoB,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Radio, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Radio\n      label={<Typography variant=\"title-4\">Custom label</Typography>}\n      ariaLabel=\"example aria label\"\n    />\n  );\n};\n\nexport default Component;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"select-icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/select-icon-button/stories/select-icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgE;AAChE,kDAAoD;AAEpD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,YAC/D,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAE,KAAK,YAChE,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,YAC/D,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,uBAAoB,IAC3C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SelectIconButton, Typography } from '@neo4j-ndl/react';\nimport { SelectIcon } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"small\" isOpen={false}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Small</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"medium\" isOpen={false}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Medium</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"large\" isOpen={false}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"select-icon-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/select-icon-button/stories/select-icon-button-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgE;AAChE,kDAAoD;AAEpD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,YAC/D,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAE,KAAK,YAChE,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,YAC/D,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,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 { SelectIconButton, Typography } from '@neo4j-ndl/react';\nimport { SelectIcon } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"small\" isOpen={false}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"title-4\"> Small</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"medium\" isOpen={false}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"title-4\"> Medium</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"large\" isOpen={false}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"title-4\"> Large</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/select-icon-button/stories/select-icon-button-states.story.js

@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const icons_1 = require("@neo4j-ndl/react/icons");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.SelectIconButton, { description: "Select", size: "small", isDisabled: true, isOpen: false, children: (0, jsx_runtime_1.jsx)(icons_1.SelectIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Disabled" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.SelectIconButton, { description: "Select", size: "small", isOpen: true, children: (0, jsx_runtime_1.jsx)(icons_1.SelectIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Active" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.SelectIconButton, { description: "Select", size: "small", isLoading: true, loadingMessage: "Loading", isOpen: false, children: (0, jsx_runtime_1.jsx)(icons_1.SelectIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: " Loading" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.SelectIconButton, { description: "Select", size: "small", isDisabled: true, isOpen: false, children: (0, jsx_runtime_1.jsx)(icons_1.SelectIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", children: " Disabled" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.SelectIconButton, { description: "Select", size: "small", isOpen: true, children: (0, jsx_runtime_1.jsx)(icons_1.SelectIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", children: " Active" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.SelectIconButton, { description: "Select", size: "small", isLoading: true, loadingMessage: "Loading", isOpen: false, children: (0, jsx_runtime_1.jsx)(icons_1.SelectIcon, {}) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", children: " Loading" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=select-icon-button-states.story.js.map

package/lib/cjs/select-icon-button/stories/select-icon-button-states.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-icon-button-states.story.js","sourceRoot":"","sources":["../../../../src/select-icon-button/stories/select-icon-button-states.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgE;AAChE,kDAAoD;AAEpD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,UAAU,QACV,MAAM,EAAE,KAAK,YAEb,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,0BAAuB,IAC9C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,YAC9D,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,wBAAqB,IAC5C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,SAAS,QACT,cAAc,EAAC,SAAS,EACxB,MAAM,EAAE,KAAK,YAEb,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,OAAO,yBAAsB,IAC7C,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 { SelectIconButton, Typography } from '@neo4j-ndl/react';\nimport { SelectIcon } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isDisabled\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Disabled</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"small\" isOpen={true}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Active</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isLoading\n          loadingMessage=\"Loading\"\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"label\"> Loading</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"select-icon-button-states.story.js","sourceRoot":"","sources":["../../../../src/select-icon-button/stories/select-icon-button-states.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgE;AAChE,kDAAoD;AAEpD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,UAAU,QACV,MAAM,EAAE,KAAK,YAEb,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,0BAAuB,IAChD,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IAAC,WAAW,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,YAC9D,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,iDAAiD,aAC9D,uBAAC,wBAAgB,IACf,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,EACZ,SAAS,QACT,cAAc,EAAC,SAAS,EACxB,MAAM,EAAE,KAAK,YAEb,uBAAC,kBAAU,KAAG,GACG,EACnB,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,yBAAsB,IAC/C,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 { SelectIconButton, Typography } from '@neo4j-ndl/react';\nimport { SelectIcon } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isDisabled\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"title-4\"> Disabled</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton description=\"Select\" size=\"small\" isOpen={true}>\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"title-4\"> Active</Typography>\n      </div>\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <SelectIconButton\n          description=\"Select\"\n          size=\"small\"\n          isLoading\n          loadingMessage=\"Loading\"\n          isOpen={false}\n        >\n          <SelectIcon />\n        </SelectIconButton>\n        <Typography variant=\"title-4\"> Loading</Typography>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/side-navigation/SideNavigation.js

@@ -305,7 +305,7 @@ const CategoryHeader = (_a) => {
     const classes = (0, classnames_1.default)('ndl-side-nav-category-header', className, {
         'ndl-side-nav-category-header-expanded': isExpanded || isHovered,
     });
-    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ ref: ref, variant: "label", as: "li", className: classes, htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { role: 'separator' }), style: style }, restProps, { children: isExpanded || isHovered ? children : (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) })));
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ ref: ref, variant: "title-4", as: "li", className: classes, htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { role: 'separator' }), style: style }, restProps, { children: isExpanded || isHovered ? children : (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) })));
 };
 /**
  * SelectedIndicator