@neo4j-ndl/react 4.25.7 → 5.0.0-alpha.0.3d763f7

package/lib/esm/clipboard-button/stories/clipboard-button-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clipboard-button/stories/clipboard-button-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,eAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,EACtE,KAAC,eAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,QAAQ,GAAG,EACvE,KAAC,eAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,IAClE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ClipboardButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"small\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"medium\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clipboard-button-sizes.story.js","sourceRoot":"","sources":["../../../../src/clipboard-button/stories/clipboard-button-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,eAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,EACtE,KAAC,eAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,QAAQ,GAAG,EACvE,KAAC,eAAe,IAAC,UAAU,EAAC,0BAA0B,EAAC,IAAI,EAAC,OAAO,GAAG,IAClE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ClipboardButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"flex gap-token-16\">\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"small\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"medium\" />\n      <ClipboardButton textToCopy=\"This is the text to copy\" size=\"large\" />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/code-block/CodeBlock.js

@@ -38,13 +38,9 @@ import { ChevronUpIconOutline } from '../icons/generated/heroIcons/ChevronUpIcon
 import { useCodeLanguage } from './hooks/use-code-language';
 import { useCodeTheme } from './hooks/use-code-theme';
 import { useExpandable } from './hooks/use-expandable';
-const defaultElement = 'div';
 export const CodeBlock = (_a) => {
     var _b, _c;
-    var { as, maxHeight, code, language, shouldShowLineNumbers, theme, heading, actions, isDisabled, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "maxHeight", "code", "language", "shouldShowLineNumbers", "theme", "heading", "actions", "isDisabled", "className", "style", "htmlAttributes", "ref"])
-    // TODO: Should not be polymorphic (at least not defaulting to a button)
-    ;
-    const Component = as !== null && as !== void 0 ? as : defaultElement;
+    var { maxHeight, code, language, shouldShowLineNumbers, theme, heading, actions, isDisabled, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["maxHeight", "code", "language", "shouldShowLineNumbers", "theme", "heading", "actions", "isDisabled", "className", "style", "htmlAttributes", "ref"]);
     const { containerHeight, isExpanded, toggleExpand, hasOverflowingContent, ref: syntaxHighlighterWrapperRef, } = useExpandable(maxHeight, code);
     const codeTheme = useCodeTheme(theme);
     const codeLanguage = useCodeLanguage(language);
@@ -55,7 +51,7 @@ export const CodeBlock = (_a) => {
     const rightPadding = hasHeading
         ? 0
         : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;
-    return (_jsxs(Component, Object.assign({ ref: ref, className: classNames('ndl-code-block-container', className), style: Object.assign({ height: containerHeight }, style) }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "ndl-code-block-layout", children: [hasHeading && (_jsx("div", { className: classNames('ndl-code-block-title', {
+    return (_jsxs("div", Object.assign({ ref: ref, className: classNames('ndl-code-block-container', className), style: Object.assign({ height: containerHeight }, style) }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "ndl-code-block-layout", children: [hasHeading && (_jsx("div", { className: classNames('ndl-code-block-title', {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             maxWidth: `calc(100% - ${((_c = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _c !== void 0 ? _c : 0) * 36 + 20}px)`,
@@ -69,7 +65,7 @@ export const CodeBlock = (_a) => {
                                         lineHeight: '1',
                                         padding: `0 ${rightPadding}px 0.75em 0.75em`,
                                         width: 'fit-content',
-                                    } }), codeTagProps: { className: 'n-code' }, 
+                                    } }), codeTagProps: { className: 'ndl-typography-code' }, 
                                 // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong
                                 // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402
                                 // wrapLongLines

package/lib/esm/code-block/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { type IconButton } from '../icon-button';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronUpIconOutline } from '../icons/generated/heroIcons/ChevronUpIconOutline';\nimport { type LanguageProp } from './code-languages';\nimport { type CodeTheme } from './code-themes';\nimport { useCodeLanguage } from './hooks/use-code-language';\nimport { useCodeTheme } from './hooks/use-code-theme';\nimport { useExpandable } from './hooks/use-expandable';\n\ninterface CodeBlockProps {\n  code: string;\n  isDisabled?: boolean;\n  maxHeight?: number;\n  language: LanguageProp | 'text';\n  shouldShowLineNumbers?: boolean;\n  theme?: CodeTheme;\n  heading?: React.ReactNode;\n  actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n  as,\n  maxHeight,\n  code,\n  language,\n  shouldShowLineNumbers,\n  theme,\n  heading,\n  actions,\n  isDisabled,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n  // TODO: Should not be polymorphic (at least not defaulting to a button)\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n  const Component: React.ElementType = as ?? defaultElement;\n\n  const {\n    containerHeight,\n    isExpanded,\n    toggleExpand,\n    hasOverflowingContent,\n    ref: syntaxHighlighterWrapperRef,\n  } = useExpandable(maxHeight, code);\n  const codeTheme = useCodeTheme(theme);\n  const codeLanguage = useCodeLanguage(language);\n\n  const hasMaxHeight = maxHeight !== undefined;\n  const hasHeading = Boolean(heading);\n  const numberOfActions = actions?.length ?? 0;\n\n  const shouldShowExpandButton = hasMaxHeight && hasOverflowingContent;\n  const rightPadding = hasHeading\n    ? 0\n    : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;\n\n  return (\n    <Component\n      ref={ref}\n      className={classNames('ndl-code-block-container', className)}\n      style={{ height: containerHeight, ...style }}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-code-block-layout\">\n        {hasHeading && (\n          <div\n            className={classNames('ndl-code-block-title', {\n              'ndl-disabled': isDisabled,\n            })}\n            style={{\n              maxWidth: `calc(100% - ${(actions?.length ?? 0) * 36 + 20}px)`,\n            }}\n            data-testid=\"ndl-code-block-title\"\n          >\n            {heading}\n          </div>\n        )}\n        <div\n          className={classNames('ndl-code-content-container', {\n            'ndl-disabled': isDisabled,\n          })}\n          style={{\n            height: hasHeading ? 'calc(100% - 24px - 12px)' : '100%',\n          }}\n        >\n          <div\n            ref={syntaxHighlighterWrapperRef}\n            className=\"ndl-highlight-wrapper\"\n            tabIndex={0}\n            role=\"region\"\n            aria-label={`Code content ${isDisabled ? '(disabled)' : ''}`}\n          >\n            <SyntaxHighlighter\n              language={codeLanguage}\n              style={{\n                ...codeTheme,\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  padding: `0 ${rightPadding}px 0.75em 0.75em`,\n                  width: 'fit-content',\n                },\n              }}\n              codeTagProps={{ className: 'n-code' }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={shouldShowLineNumbers}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      </div>\n      <div\n        className={classNames('ndl-code-block-actions', {\n          'ndl-disabled': isDisabled,\n        })}\n      >\n        {actions?.map((iconButtonProps, index) => (\n          <CleanIconButton\n            key={index}\n            isDisabled={isDisabled}\n            {...iconButtonProps}\n            description={`${iconButtonProps.description ?? 'CodeBlock Action'}`}\n            htmlAttributes={{\n              'data-testid': `ndl-action-button-${index}`,\n              ...iconButtonProps.htmlAttributes,\n            }}\n          />\n        ))}\n      </div>\n      {shouldShowExpandButton && (\n        <div className=\"ndl-code-block-expand-button\">\n          <CleanIconButton\n            description={isExpanded ? 'Collapse' : 'Expand'}\n            tooltipProps={{\n              root: {\n                shouldCloseOnReferenceClick: true,\n              },\n            }}\n            onClick={toggleExpand}\n          >\n            {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n          </CleanIconButton>\n        </div>\n      )}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { type IconButton } from '../icon-button';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { ChevronUpIconOutline } from '../icons/generated/heroIcons/ChevronUpIconOutline';\nimport { type LanguageProp } from './code-languages';\nimport { type CodeTheme } from './code-themes';\nimport { useCodeLanguage } from './hooks/use-code-language';\nimport { useCodeTheme } from './hooks/use-code-theme';\nimport { useExpandable } from './hooks/use-expandable';\n\ninterface CodeBlockProps {\n  code: string;\n  isDisabled?: boolean;\n  maxHeight?: number;\n  language: LanguageProp | 'text';\n  shouldShowLineNumbers?: boolean;\n  theme?: CodeTheme;\n  heading?: React.ReactNode;\n  actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nexport const CodeBlock = ({\n  maxHeight,\n  code,\n  language,\n  shouldShowLineNumbers,\n  theme,\n  heading,\n  actions,\n  isDisabled,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'div', CodeBlockProps>) => {\n  const {\n    containerHeight,\n    isExpanded,\n    toggleExpand,\n    hasOverflowingContent,\n    ref: syntaxHighlighterWrapperRef,\n  } = useExpandable(maxHeight, code);\n  const codeTheme = useCodeTheme(theme);\n  const codeLanguage = useCodeLanguage(language);\n\n  const hasMaxHeight = maxHeight !== undefined;\n  const hasHeading = Boolean(heading);\n  const numberOfActions = actions?.length ?? 0;\n\n  const shouldShowExpandButton = hasMaxHeight && hasOverflowingContent;\n  const rightPadding = hasHeading\n    ? 0\n    : Math.max(numberOfActions * 36, (shouldShowExpandButton ? 1 : 0) * 36) + 8;\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('ndl-code-block-container', className)}\n      style={{ height: containerHeight, ...style }}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-code-block-layout\">\n        {hasHeading && (\n          <div\n            className={classNames('ndl-code-block-title', {\n              'ndl-disabled': isDisabled,\n            })}\n            style={{\n              maxWidth: `calc(100% - ${(actions?.length ?? 0) * 36 + 20}px)`,\n            }}\n            data-testid=\"ndl-code-block-title\"\n          >\n            {heading}\n          </div>\n        )}\n        <div\n          className={classNames('ndl-code-content-container', {\n            'ndl-disabled': isDisabled,\n          })}\n          style={{\n            height: hasHeading ? 'calc(100% - 24px - 12px)' : '100%',\n          }}\n        >\n          <div\n            ref={syntaxHighlighterWrapperRef}\n            className=\"ndl-highlight-wrapper\"\n            tabIndex={0}\n            role=\"region\"\n            aria-label={`Code content ${isDisabled ? '(disabled)' : ''}`}\n          >\n            <SyntaxHighlighter\n              language={codeLanguage}\n              style={{\n                ...codeTheme,\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  padding: `0 ${rightPadding}px 0.75em 0.75em`,\n                  width: 'fit-content',\n                },\n              }}\n              codeTagProps={{ className: 'ndl-typography-code' }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              showLineNumbers={shouldShowLineNumbers}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </div>\n      </div>\n      <div\n        className={classNames('ndl-code-block-actions', {\n          'ndl-disabled': isDisabled,\n        })}\n      >\n        {actions?.map((iconButtonProps, index) => (\n          <CleanIconButton\n            key={index}\n            isDisabled={isDisabled}\n            {...iconButtonProps}\n            description={`${iconButtonProps.description ?? 'CodeBlock Action'}`}\n            htmlAttributes={{\n              'data-testid': `ndl-action-button-${index}`,\n              ...iconButtonProps.htmlAttributes,\n            }}\n          />\n        ))}\n      </div>\n      {shouldShowExpandButton && (\n        <div className=\"ndl-code-block-expand-button\">\n          <CleanIconButton\n            description={isExpanded ? 'Collapse' : 'Expand'}\n            tooltipProps={{\n              root: {\n                shouldCloseOnReferenceClick: true,\n              },\n            }}\n            onClick={toggleExpand}\n          >\n            {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n          </CleanIconButton>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/esm/code-block/stories/code-disabled.story.js

@@ -26,13 +26,13 @@ import { SHORT_CODE_EXAMPLE } from './example-code-snippets';
 const Component = () => {
     return (_jsx(CodeBlock, { code: SHORT_CODE_EXAMPLE, language: "typescript", heading: "Code Header", isDisabled: true, actions: [
             {
-                children: (_jsx(Square2StackIconOutline, { className: "n-text-neutral-text-icon" })),
+                children: (_jsx(Square2StackIconOutline, { className: "text-neutral-text-icon" })),
                 description: 'copy',
                 htmlAttributes: { title: 'copy' },
                 onClick: () => alert('This should not trigger when disabled'),
             },
             {
-                children: _jsx(PlayCircleIconOutline, { className: "n-text-primary-icon" }),
+                children: _jsx(PlayCircleIconOutline, { className: "text-primary-icon" }),
                 description: 'run',
                 htmlAttributes: { title: 'run' },
                 onClick: () => alert('This should not trigger when disabled'),

package/lib/esm/code-block/stories/code-disabled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-disabled.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-disabled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,aAAa,EACrB,UAAU,QACV,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,KAAC,uBAAuB,IAAC,SAAS,EAAC,0BAA0B,GAAG,CACjE;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;YACD;gBACE,QAAQ,EAAE,KAAC,qBAAqB,IAAC,SAAS,EAAC,qBAAqB,GAAG;gBACnE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={SHORT_CODE_EXAMPLE}\n      language=\"typescript\"\n      heading=\"Code Header\"\n      isDisabled\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"n-text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"n-text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n      ]}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"code-disabled.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-disabled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,aAAa,EACrB,UAAU,QACV,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,KAAC,uBAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;YACD;gBACE,QAAQ,EAAE,KAAC,qBAAqB,IAAC,SAAS,EAAC,mBAAmB,GAAG;gBACjE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;aAC9D;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={SHORT_CODE_EXAMPLE}\n      language=\"typescript\"\n      heading=\"Code Header\"\n      isDisabled\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('This should not trigger when disabled'),\n        },\n      ]}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/code-block/stories/code-full.story.js

@@ -26,13 +26,13 @@ import { LONG_CODE_EXAMPLE } from './example-code-snippets';
 const Component = () => {
     return (_jsx(CodeBlock, { code: LONG_CODE_EXAMPLE, maxHeight: 320, language: "typescript", shouldShowLineNumbers: true, theme: "ndl-code-light", heading: "Code Header", actions: [
             {
-                children: (_jsx(Square2StackIconOutline, { className: "n-text-neutral-text-icon" })),
+                children: (_jsx(Square2StackIconOutline, { className: "text-neutral-text-icon" })),
                 description: 'copy',
                 htmlAttributes: { title: 'copy' },
                 onClick: () => alert('copied'),
             },
             {
-                children: _jsx(PlayCircleIconOutline, { className: "n-text-primary-icon" }),
+                children: _jsx(PlayCircleIconOutline, { className: "text-primary-icon" }),
                 description: 'run',
                 htmlAttributes: { title: 'run' },
                 onClick: () => alert('running'),

package/lib/esm/code-block/stories/code-full.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-full.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,iBAAiB,EACvB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAC,YAAY,EACrB,qBAAqB,QACrB,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,KAAC,uBAAuB,IAAC,SAAS,EAAC,0BAA0B,GAAG,CACjE;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC;aAC/B;YACD;gBACE,QAAQ,EAAE,KAAC,qBAAqB,IAAC,SAAS,EAAC,qBAAqB,GAAG;gBACnE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;aAChC;SACF,EACD,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { LONG_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={LONG_CODE_EXAMPLE}\n      maxHeight={320}\n      language=\"typescript\"\n      shouldShowLineNumbers\n      theme=\"ndl-code-light\"\n      heading=\"Code Header\"\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"n-text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('copied'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"n-text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('running'),\n        },\n      ]}\n      isDisabled={false}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"code-full.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,iBAAiB,EACvB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAC,YAAY,EACrB,qBAAqB,QACrB,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,KAAC,uBAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC;aAC/B;YACD;gBACE,QAAQ,EAAE,KAAC,qBAAqB,IAAC,SAAS,EAAC,mBAAmB,GAAG;gBACjE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;aAChC;SACF,EACD,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { LONG_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={LONG_CODE_EXAMPLE}\n      maxHeight={320}\n      language=\"typescript\"\n      shouldShowLineNumbers\n      theme=\"ndl-code-light\"\n      heading=\"Code Header\"\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('copied'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('running'),\n        },\n      ]}\n      isDisabled={false}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/code-block/stories/code-languages.story.js

@@ -23,7 +23,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { CodeBlock } from '@neo4j-ndl/react';
 import { LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES } from './example-code-snippets';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-8", children: [_jsx(CodeBlock, { code: LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT, language: "typescript", heading: "TypeScript", shouldShowLineNumbers: true }), _jsx(CodeBlock, { code: LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER, language: "cypher", heading: "Cypher Query Language", shouldShowLineNumbers: true }), _jsx(CodeBlock, { code: LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON, language: "json", heading: "JSON Configuration", shouldShowLineNumbers: true })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-token-8", children: [_jsx(CodeBlock, { code: LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT, language: "typescript", heading: "TypeScript", shouldShowLineNumbers: true }), _jsx(CodeBlock, { code: LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER, language: "cypher", heading: "Cypher Query Language", shouldShowLineNumbers: true }), _jsx(CodeBlock, { code: LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON, language: "json", heading: "JSON Configuration", shouldShowLineNumbers: true })] }));
 };
 export default Component;
 //# sourceMappingURL=code-languages.story.js.map

package/lib/esm/code-block/stories/code-languages.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-languages.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-languages.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,qCAAqC,EAAE,MAAM,yBAAyB,CAAC;AAEhF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,SAAS,IACR,IAAI,EAAE,qCAAqC,CAAC,UAAU,EACtD,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,YAAY,EACpB,qBAAqB,SACrB,EAEF,KAAC,SAAS,IACR,IAAI,EAAE,qCAAqC,CAAC,MAAM,EAClD,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,uBAAuB,EAC/B,qBAAqB,SACrB,EAEF,KAAC,SAAS,IACR,IAAI,EAAE,qCAAqC,CAAC,IAAI,EAChD,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,oBAAoB,EAC5B,qBAAqB,SACrB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\n\nimport { LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-8\">\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT}\n        language=\"typescript\"\n        heading=\"TypeScript\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER}\n        language=\"cypher\"\n        heading=\"Cypher Query Language\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON}\n        language=\"json\"\n        heading=\"JSON Configuration\"\n        shouldShowLineNumbers\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"code-languages.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-languages.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,qCAAqC,EAAE,MAAM,yBAAyB,CAAC;AAEhF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,SAAS,IACR,IAAI,EAAE,qCAAqC,CAAC,UAAU,EACtD,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,YAAY,EACpB,qBAAqB,SACrB,EAEF,KAAC,SAAS,IACR,IAAI,EAAE,qCAAqC,CAAC,MAAM,EAClD,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,uBAAuB,EAC/B,qBAAqB,SACrB,EAEF,KAAC,SAAS,IACR,IAAI,EAAE,qCAAqC,CAAC,IAAI,EAChD,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,oBAAoB,EAC5B,qBAAqB,SACrB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\n\nimport { LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-8\">\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT}\n        language=\"typescript\"\n        heading=\"TypeScript\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER}\n        language=\"cypher\"\n        heading=\"Cypher Query Language\"\n        shouldShowLineNumbers\n      />\n\n      <CodeBlock\n        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON}\n        language=\"json\"\n        heading=\"JSON Configuration\"\n        shouldShowLineNumbers\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/code-block/stories/code-with-actions.story.js

@@ -26,13 +26,13 @@ import { SHORT_CODE_EXAMPLE } from './example-code-snippets';
 const Component = () => {
     return (_jsx(CodeBlock, { code: SHORT_CODE_EXAMPLE, language: "typescript", maxHeight: 320, actions: [
             {
-                children: (_jsx(Square2StackIconOutline, { className: "n-text-neutral-text-icon" })),
+                children: (_jsx(Square2StackIconOutline, { className: "text-neutral-text-icon" })),
                 description: 'copy',
                 htmlAttributes: { title: 'copy' },
                 onClick: () => alert('Code copied to clipboard!'),
             },
             {
-                children: _jsx(PlayCircleIconOutline, { className: "n-text-primary-icon" }),
+                children: _jsx(PlayCircleIconOutline, { className: "text-primary-icon" }),
                 description: 'run',
                 htmlAttributes: { title: 'run' },
                 onClick: () => alert('Running code...'),

package/lib/esm/code-block/stories/code-with-actions.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-with-actions.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-with-actions.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,KAAC,uBAAuB,IAAC,SAAS,EAAC,0BAA0B,GAAG,CACjE;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,2BAA2B,CAAC;aAClD;YACD;gBACE,QAAQ,EAAE,KAAC,qBAAqB,IAAC,SAAS,EAAC,qBAAqB,GAAG;gBACnE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;aACxC;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={SHORT_CODE_EXAMPLE}\n      language=\"typescript\"\n      maxHeight={320}\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"n-text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('Code copied to clipboard!'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"n-text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('Running code...'),\n        },\n      ]}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"code-with-actions.story.js","sourceRoot":"","sources":["../../../../src/code-block/stories/code-with-actions.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,GAAG,EACd,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,CACR,KAAC,uBAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D;gBACD,WAAW,EAAE,MAAM;gBACnB,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,2BAA2B,CAAC;aAClD;YACD;gBACE,QAAQ,EAAE,KAAC,qBAAqB,IAAC,SAAS,EAAC,mBAAmB,GAAG;gBACjE,WAAW,EAAE,KAAK;gBAClB,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;gBAChC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;aACxC;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CodeBlock } from '@neo4j-ndl/react';\nimport {\n  PlayCircleIconOutline,\n  Square2StackIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nimport { SHORT_CODE_EXAMPLE } from './example-code-snippets';\n\nconst Component = () => {\n  return (\n    <CodeBlock\n      code={SHORT_CODE_EXAMPLE}\n      language=\"typescript\"\n      maxHeight={320}\n      actions={[\n        {\n          children: (\n            <Square2StackIconOutline className=\"text-neutral-text-icon\" />\n          ),\n          description: 'copy',\n          htmlAttributes: { title: 'copy' },\n          onClick: () => alert('Code copied to clipboard!'),\n        },\n        {\n          children: <PlayCircleIconOutline className=\"text-primary-icon\" />,\n          description: 'run',\n          htmlAttributes: { title: 'run' },\n          onClick: () => alert('Running code...'),\n        },\n      ]}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/color-picker/ColorPicker.js

@@ -76,9 +76,6 @@ export const ColorPicker = forwardRef(function ColorPicker({ color, onChange, sw
                     handleChange(newColor);
                 } }), _jsxs("div", { className: "ndl-color-picker-hue-container", children: [isEyeDropperActive && (_jsx(CleanIconButton, { size: "small", isActive: isEyeDropperActiveState, onClick: () => {
                             setIsEyeDropperActiveState(true);
-                            // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper
-                            // Type assertion to handle the unknown type
-                            // oxlint-disable-next-line @typescript-eslint/no-explicit-any
                             const eyeDropper = new window.EyeDropper();
                             eyeDropper
                                 .open()

package/lib/esm/color-picker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.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 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n  type HexColor,\n  hexToHsva,\n  type HsvaColor,\n  hsvaToHex,\n  hsvaToRgba,\n  Hue,\n  type PointerProps,\n  type RgbaColor,\n  rgbaToHex,\n  rgbaToHsva,\n  Saturation,\n  validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons/generated/heroIcons/EyeDropperIconOutline';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\n/**\n * @remarks\n * By default the `swatches` prop is set to the available graph colors (`tokens.graph`) from `@neo4j-ndl/base`.\n *\n * @remarks\n * Where `HsvaColor`, `RgbaColor`, and `HexColor` types are from `@uiw/react-color`, and represent different color formats:\n *\n * - `HexColor`: A string in the format `#RRGGBB` (e.g., `#ff0000`).\n * - `RgbaColor`: An object with numeric properties `{ r, g, b, a }` for red, green, blue (0–255), and alpha (0–1).\n * - `HsvaColor`: An object with numeric properties `{ h, s, v, a }` for hue (0–360), saturation (0–100), value (0–100), and alpha (0–1).\n *\n * Visit [react-color](https://uiwjs.github.io/react-color/#/) for more information.\n */\ntype ColorPickerProps = {\n  /** The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. */\n  color: HsvaColor | RgbaColor | HexColor;\n  /** Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. */\n  swatches?: (HsvaColor | RgbaColor | HexColor)[];\n  /** Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. */\n  shouldShowEyeDropper?: boolean;\n  /** Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. */\n  onChange: (newColor: {\n    hex: HexColor;\n    rgb: RgbaColor;\n    hsva: HsvaColor;\n  }) => void;\n  /** Additional class name to apply to the root color picker container. */\n  className?: string;\n  /** Additional inline styles to apply to the root color picker container. */\n  style?: React.CSSProperties;\n\n  /** The target element to portal the menu to. If not provided, the menu will not be portaled. */\n  portalTarget?: HTMLElement | null;\n  /** The floating strategy to use for the menu. If not provided, the menu will be positioned absolutely. */\n  floatingStrategy?: 'absolute' | 'fixed';\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  function ColorPicker(\n    {\n      color,\n      onChange,\n      swatches = Object.values(tokens.graph).filter(validHex),\n      shouldShowEyeDropper = true,\n      className,\n      style,\n      portalTarget,\n      floatingStrategy = 'absolute',\n    },\n    ref,\n  ) {\n    const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n      useState(false);\n\n    const derivedHsva = useMemo(() => {\n      if (typeof color === 'string') {\n        return hexToHsva(color);\n      }\n      if (typeof color === 'object' && 'r' in color) {\n        return rgbaToHsva(color);\n      }\n      return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor; // oxlint-disable-line id-length\n    }, [color]);\n\n    const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n    const [format, setFormat] = useState<{\n      label: string;\n      value: string;\n    }>({\n      label: 'Hex',\n      value: 'hex',\n    });\n\n    const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n    const handleChange = (hsva: HsvaColor) => {\n      setHsva(hsva);\n      const hex = hsvaToHex(hsva);\n      const rgb = hsvaToRgba(hsva);\n      onChange({\n        // used since typescript cannot infer the type of the color\n        hex: `#${hex.split('#')[1]}`,\n        hsva,\n        rgb,\n      });\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('ndl-color-picker', className)}\n        style={style}\n      >\n        <Saturation\n          hsva={hsva}\n          className=\"ndl-color-picker-saturation\"\n          onChange={(newColor) => {\n            handleChange({ ...hsva, ...newColor, a: hsva.a }); // oxlint-disable-line id-length\n          }}\n          pointer={({ left, top, ...props }) => (\n            <Pointer\n              left={left?.toString()}\n              top={top?.toString()}\n              {...props}\n              hsva={hsva}\n            />\n          )}\n          radius={tokens.borderRadius['lg']}\n        />\n        <Swatch\n          colors={swatches}\n          hsva={hsva}\n          onChange={(newColor) => {\n            handleChange(newColor);\n          }}\n        />\n\n        <div className=\"ndl-color-picker-hue-container\">\n          {isEyeDropperActive && (\n            <CleanIconButton\n              size=\"small\"\n              isActive={isEyeDropperActiveState}\n              onClick={() => {\n                setIsEyeDropperActiveState(true);\n                // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n                // Type assertion to handle the unknown type\n                // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n                const eyeDropper = new (window as any).EyeDropper();\n                eyeDropper\n                  .open()\n                  .then((result: { sRGBHex: string }) => {\n                    handleChange(hexToHsva(result.sRGBHex));\n                  })\n                  .catch((err: Error) => {\n                    console.error(err);\n                  })\n                  .finally(() => {\n                    setIsEyeDropperActiveState(false);\n                  });\n              }}\n              description=\"Pick color from the screen with eye dropper tool\"\n            >\n              <EyeDropperIconOutline />\n            </CleanIconButton>\n          )}\n          <Hue\n            className=\"ndl-color-picker-hue\"\n            hue={hsva.h}\n            onChange={(newHue) => {\n              handleChange({ ...hsva, h: newHue.h }); // oxlint-disable-line id-length\n            }}\n            radius={tokens.borderRadius['lg']}\n            pointer={(props) => (\n              <Pointer\n                {...props}\n                hsva={{\n                  a: 1, // oxlint-disable-line id-length\n                  h: hsva.h, // oxlint-disable-line id-length\n                  s: 100, // oxlint-disable-line id-length\n                  v: 100, // oxlint-disable-line id-length\n                }}\n              />\n            )}\n          />\n        </div>\n\n        <div className=\"ndl-color-picker-inputs\">\n          <Select\n            size=\"small\"\n            type=\"select\"\n            ariaLabel=\"Color format\"\n            style={{\n              flexShrink: 0,\n            }}\n            selectProps={{\n              isSearchable: false,\n              menuPortalTarget: portalTarget,\n              menuPosition: floatingStrategy,\n              onChange: (newFormat) => {\n                if (!newFormat) {\n                  return;\n                }\n                setFormat({\n                  label: newFormat.label,\n                  value: newFormat.value,\n                });\n              },\n              options: [\n                {\n                  label: 'Hex',\n                  value: 'hex',\n                },\n                {\n                  label: 'RGB',\n                  value: 'rgb',\n                },\n              ],\n              value: { label: format.label, value: format.value },\n            }}\n          />\n          {format.value === 'hex' && (\n            <HexInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n          {format.value === 'rgb' && (\n            <RgbInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const [inputValue, setInputValue] = useState<string>(() =>\n    removeHashPrefix(hsvaToHex(hsva)),\n  );\n\n  // Update input value when hsva changes from outside\n  useEffect(() => {\n    setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n  }, [hsva]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const value = removeHashPrefix(event.target.value);\n\n    // Always update the input value for immediate feedback\n    setInputValue(value);\n\n    // Check if the input is a valid hex color (only 6 characters)\n    const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n    if (isValidHex) {\n      onChange(`#${value}`);\n    }\n  };\n\n  const hexValue = hsvaToHex(hsva);\n\n  return (\n    <TextInput\n      size=\"small\"\n      value={inputValue}\n      leadingElement={\n        <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n      }\n      onChange={handleChange}\n      isFluid\n      htmlAttributes={{\n        'aria-label': 'Hex color code',\n        maxLength: 6,\n        onCopy: (event) => {\n          event.preventDefault();\n          navigator.clipboard.writeText(hexValue);\n        },\n      }}\n    />\n  );\n};\n\nconst RgbInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const rgba = hsvaToRgba(hsva);\n  const [rgbValues, setRgbValues] = useState({\n    b: rgba.b, // oxlint-disable-line id-length\n    g: rgba.g, // oxlint-disable-line id-length\n    r: rgba.r, // oxlint-disable-line id-length\n  });\n\n  // Update input values when hsva changes from outside\n  useEffect(() => {\n    const newRgba = hsvaToRgba(hsva);\n    setRgbValues({\n      b: newRgba.b, // oxlint-disable-line id-length\n      g: newRgba.g, // oxlint-disable-line id-length\n      r: newRgba.r, // oxlint-disable-line id-length\n    });\n  }, [hsva]);\n\n  const handleChange = (\n    channel: 'r' | 'g' | 'b',\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const value = parseInt(event.target.value, 10);\n\n    // Validate the input is a number between 0-255\n    const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n    const newRgbValues = {\n      ...rgbValues,\n      [channel]: validValue,\n    };\n\n    setRgbValues(newRgbValues);\n\n    // Convert RGB to hex and call onChange\n    const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n    onChange(hexColor);\n  };\n\n  return (\n    <div className=\"ndl-color-picker-rgb-inputs\">\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.r.toString()}\n        onChange={(event) => handleChange('r', event)}\n        htmlAttributes={{\n          'aria-label': 'Red',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.g.toString()}\n        onChange={(event) => handleChange('g', event)}\n        htmlAttributes={{\n          'aria-label': 'Green',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.b.toString()}\n        onChange={(event) => handleChange('b', event)}\n        htmlAttributes={{\n          'aria-label': 'Blue',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n    </div>\n  );\n};\n\nconst Swatch = ({\n  colors,\n  onChange,\n  hsva,\n}: {\n  colors: (HsvaColor | RgbaColor | HexColor)[];\n  hsva: HsvaColor;\n  onChange: (newColor: HsvaColor) => void;\n}) => {\n  return (\n    <div className=\"ndl-color-picker-swatch\">\n      {colors.map((color) => {\n        const hexColor =\n          typeof color === 'string'\n            ? color\n            : typeof color === 'object' && 'r' in color\n              ? rgbaToHex(color)\n              : hsvaToHex(color);\n        const hsvaColor =\n          typeof color === 'string'\n            ? hexToHsva(color)\n            : 'r' in color\n              ? rgbaToHsva(color)\n              : color;\n\n        const isActive =\n          hsva.h === hsvaColor.h &&\n          hsva.s === hsvaColor.s &&\n          hsva.v === hsvaColor.v;\n\n        return (\n          <button\n            type=\"button\"\n            key={hexColor}\n            aria-label={hexColor}\n            className={classNames('ndl-color-picker-swatch-color', {\n              'ndl-color-picker-swatch-color-active': isActive,\n            })}\n            style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n            onClick={() => onChange(hsvaColor)}\n          />\n        );\n      })}\n    </div>\n  );\n};\nconst Pointer = ({\n  prefixCls,\n  left,\n  top,\n  hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n  const rgba = hsvaToRgba(hsva);\n  return (\n    <div\n      style={{\n        backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n        left,\n        top,\n      }}\n      className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n    />\n  );\n};\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.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 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n  type HexColor,\n  hexToHsva,\n  type HsvaColor,\n  hsvaToHex,\n  hsvaToRgba,\n  Hue,\n  type PointerProps,\n  type RgbaColor,\n  rgbaToHex,\n  rgbaToHsva,\n  Saturation,\n  validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons/generated/heroIcons/EyeDropperIconOutline';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\n/**\n * @remarks\n * By default the `swatches` prop is set to the available graph colors (`tokens.graph`) from `@neo4j-ndl/base`.\n *\n * @remarks\n * Where `HsvaColor`, `RgbaColor`, and `HexColor` types are from `@uiw/react-color`, and represent different color formats:\n *\n * - `HexColor`: A string in the format `#RRGGBB` (e.g., `#ff0000`).\n * - `RgbaColor`: An object with numeric properties `{ r, g, b, a }` for red, green, blue (0–255), and alpha (0–1).\n * - `HsvaColor`: An object with numeric properties `{ h, s, v, a }` for hue (0–360), saturation (0–100), value (0–100), and alpha (0–1).\n *\n * Visit [react-color](https://uiwjs.github.io/react-color/#/) for more information.\n */\ntype ColorPickerProps = {\n  /** The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. */\n  color: HsvaColor | RgbaColor | HexColor;\n  /** Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. */\n  swatches?: (HsvaColor | RgbaColor | HexColor)[];\n  /** Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. */\n  shouldShowEyeDropper?: boolean;\n  /** Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. */\n  onChange: (newColor: {\n    hex: HexColor;\n    rgb: RgbaColor;\n    hsva: HsvaColor;\n  }) => void;\n  /** Additional class name to apply to the root color picker container. */\n  className?: string;\n  /** Additional inline styles to apply to the root color picker container. */\n  style?: React.CSSProperties;\n\n  /** The target element to portal the menu to. If not provided, the menu will not be portaled. */\n  portalTarget?: HTMLElement | null;\n  /** The floating strategy to use for the menu. If not provided, the menu will be positioned absolutely. */\n  floatingStrategy?: 'absolute' | 'fixed';\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  function ColorPicker(\n    {\n      color,\n      onChange,\n      swatches = Object.values(tokens.graph).filter(validHex),\n      shouldShowEyeDropper = true,\n      className,\n      style,\n      portalTarget,\n      floatingStrategy = 'absolute',\n    },\n    ref,\n  ) {\n    const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n      useState(false);\n\n    const derivedHsva = useMemo(() => {\n      if (typeof color === 'string') {\n        return hexToHsva(color);\n      }\n      if (typeof color === 'object' && 'r' in color) {\n        return rgbaToHsva(color);\n      }\n      return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor; // oxlint-disable-line id-length\n    }, [color]);\n\n    const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n    const [format, setFormat] = useState<{\n      label: string;\n      value: string;\n    }>({\n      label: 'Hex',\n      value: 'hex',\n    });\n\n    const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n    const handleChange = (hsva: HsvaColor) => {\n      setHsva(hsva);\n      const hex = hsvaToHex(hsva);\n      const rgb = hsvaToRgba(hsva);\n      onChange({\n        // used since typescript cannot infer the type of the color\n        hex: `#${hex.split('#')[1]}`,\n        hsva,\n        rgb,\n      });\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('ndl-color-picker', className)}\n        style={style}\n      >\n        <Saturation\n          hsva={hsva}\n          className=\"ndl-color-picker-saturation\"\n          onChange={(newColor) => {\n            handleChange({ ...hsva, ...newColor, a: hsva.a }); // oxlint-disable-line id-length\n          }}\n          pointer={({ left, top, ...props }) => (\n            <Pointer\n              left={left?.toString()}\n              top={top?.toString()}\n              {...props}\n              hsva={hsva}\n            />\n          )}\n          radius={tokens.borderRadius['lg']}\n        />\n        <Swatch\n          colors={swatches}\n          hsva={hsva}\n          onChange={(newColor) => {\n            handleChange(newColor);\n          }}\n        />\n\n        <div className=\"ndl-color-picker-hue-container\">\n          {isEyeDropperActive && (\n            <CleanIconButton\n              size=\"small\"\n              isActive={isEyeDropperActiveState}\n              onClick={() => {\n                setIsEyeDropperActiveState(true);\n                const eyeDropper = new window.EyeDropper();\n                eyeDropper\n                  .open()\n                  .then((result: { sRGBHex: string }) => {\n                    handleChange(hexToHsva(result.sRGBHex));\n                  })\n                  .catch((err: Error) => {\n                    console.error(err);\n                  })\n                  .finally(() => {\n                    setIsEyeDropperActiveState(false);\n                  });\n              }}\n              description=\"Pick color from the screen with eye dropper tool\"\n            >\n              <EyeDropperIconOutline />\n            </CleanIconButton>\n          )}\n          <Hue\n            className=\"ndl-color-picker-hue\"\n            hue={hsva.h}\n            onChange={(newHue) => {\n              handleChange({ ...hsva, h: newHue.h }); // oxlint-disable-line id-length\n            }}\n            radius={tokens.borderRadius['lg']}\n            pointer={(props) => (\n              <Pointer\n                {...props}\n                hsva={{\n                  a: 1, // oxlint-disable-line id-length\n                  h: hsva.h, // oxlint-disable-line id-length\n                  s: 100, // oxlint-disable-line id-length\n                  v: 100, // oxlint-disable-line id-length\n                }}\n              />\n            )}\n          />\n        </div>\n\n        <div className=\"ndl-color-picker-inputs\">\n          <Select\n            size=\"small\"\n            type=\"select\"\n            ariaLabel=\"Color format\"\n            style={{\n              flexShrink: 0,\n            }}\n            selectProps={{\n              isSearchable: false,\n              menuPortalTarget: portalTarget,\n              menuPosition: floatingStrategy,\n              onChange: (newFormat) => {\n                if (!newFormat) {\n                  return;\n                }\n                setFormat({\n                  label: newFormat.label,\n                  value: newFormat.value,\n                });\n              },\n              options: [\n                {\n                  label: 'Hex',\n                  value: 'hex',\n                },\n                {\n                  label: 'RGB',\n                  value: 'rgb',\n                },\n              ],\n              value: { label: format.label, value: format.value },\n            }}\n          />\n          {format.value === 'hex' && (\n            <HexInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n          {format.value === 'rgb' && (\n            <RgbInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const [inputValue, setInputValue] = useState<string>(() =>\n    removeHashPrefix(hsvaToHex(hsva)),\n  );\n\n  // Update input value when hsva changes from outside\n  useEffect(() => {\n    setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n  }, [hsva]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const value = removeHashPrefix(event.target.value);\n\n    // Always update the input value for immediate feedback\n    setInputValue(value);\n\n    // Check if the input is a valid hex color (only 6 characters)\n    const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n    if (isValidHex) {\n      onChange(`#${value}`);\n    }\n  };\n\n  const hexValue = hsvaToHex(hsva);\n\n  return (\n    <TextInput\n      size=\"small\"\n      value={inputValue}\n      leadingElement={\n        <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n      }\n      onChange={handleChange}\n      isFluid\n      htmlAttributes={{\n        'aria-label': 'Hex color code',\n        maxLength: 6,\n        onCopy: (event) => {\n          event.preventDefault();\n          navigator.clipboard.writeText(hexValue);\n        },\n      }}\n    />\n  );\n};\n\nconst RgbInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const rgba = hsvaToRgba(hsva);\n  const [rgbValues, setRgbValues] = useState({\n    b: rgba.b, // oxlint-disable-line id-length\n    g: rgba.g, // oxlint-disable-line id-length\n    r: rgba.r, // oxlint-disable-line id-length\n  });\n\n  // Update input values when hsva changes from outside\n  useEffect(() => {\n    const newRgba = hsvaToRgba(hsva);\n    setRgbValues({\n      b: newRgba.b, // oxlint-disable-line id-length\n      g: newRgba.g, // oxlint-disable-line id-length\n      r: newRgba.r, // oxlint-disable-line id-length\n    });\n  }, [hsva]);\n\n  const handleChange = (\n    channel: 'r' | 'g' | 'b',\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const value = parseInt(event.target.value, 10);\n\n    // Validate the input is a number between 0-255\n    const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n    const newRgbValues = {\n      ...rgbValues,\n      [channel]: validValue,\n    };\n\n    setRgbValues(newRgbValues);\n\n    // Convert RGB to hex and call onChange\n    const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n    onChange(hexColor);\n  };\n\n  return (\n    <div className=\"ndl-color-picker-rgb-inputs\">\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.r.toString()}\n        onChange={(event) => handleChange('r', event)}\n        htmlAttributes={{\n          'aria-label': 'Red',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.g.toString()}\n        onChange={(event) => handleChange('g', event)}\n        htmlAttributes={{\n          'aria-label': 'Green',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.b.toString()}\n        onChange={(event) => handleChange('b', event)}\n        htmlAttributes={{\n          'aria-label': 'Blue',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n    </div>\n  );\n};\n\nconst Swatch = ({\n  colors,\n  onChange,\n  hsva,\n}: {\n  colors: (HsvaColor | RgbaColor | HexColor)[];\n  hsva: HsvaColor;\n  onChange: (newColor: HsvaColor) => void;\n}) => {\n  return (\n    <div className=\"ndl-color-picker-swatch\">\n      {colors.map((color) => {\n        const hexColor =\n          typeof color === 'string'\n            ? color\n            : typeof color === 'object' && 'r' in color\n              ? rgbaToHex(color)\n              : hsvaToHex(color);\n        const hsvaColor =\n          typeof color === 'string'\n            ? hexToHsva(color)\n            : 'r' in color\n              ? rgbaToHsva(color)\n              : color;\n\n        const isActive =\n          hsva.h === hsvaColor.h &&\n          hsva.s === hsvaColor.s &&\n          hsva.v === hsvaColor.v;\n\n        return (\n          <button\n            type=\"button\"\n            key={hexColor}\n            aria-label={hexColor}\n            className={classNames('ndl-color-picker-swatch-color', {\n              'ndl-color-picker-swatch-color-active': isActive,\n            })}\n            style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n            onClick={() => onChange(hsvaColor)}\n          />\n        );\n      })}\n    </div>\n  );\n};\nconst Pointer = ({\n  prefixCls,\n  left,\n  top,\n  hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n  const rgba = hsvaToRgba(hsva);\n  return (\n    <div\n      style={{\n        backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n        left,\n        top,\n      }}\n      className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n    />\n  );\n};\n"]}

package/lib/esm/color-picker/stories/color-picker-dialog.story.js

@@ -32,7 +32,7 @@ const Component = () => {
         g: 0, // oxlint-disable-line id-length
         r: 0, // oxlint-disable-line id-length
     });
-    return (_jsxs("div", { className: "n-flex n-items-center n-justify-centern-w-full", children: [_jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Content, { className: "n-max-h-96 n-overflow-y-auto", children: _jsx(ColorPicker, { color: color, onChange: (newColor) => setColor(newColor.rgb), floatingStrategy: "fixed" }) })] })] }));
+    return (_jsxs("div", { className: "flex items-center justify-centern-w-full", children: [_jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Content, { className: "max-h-96 overflow-y-auto", children: _jsx(ColorPicker, { color: color, onChange: (newColor) => setColor(newColor.rgb), floatingStrategy: "fixed" }) })] })] }));
 };
 export default Component;
 //# sourceMappingURL=color-picker-dialog.story.js.map

package/lib/esm/color-picker/stories/color-picker-dialog.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-dialog.story.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-dialog.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC;QACjC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;KACvC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAC,gDAAgD,aAC7D,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,MAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAC1C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,8BAA8B,YACtD,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAC9C,gBAAgB,EAAC,OAAO,GACxB,GACa,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ColorPicker, Dialog, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  const [color, setColor] = useState({\n    a: 1, // oxlint-disable-line id-length\n    b: 0, // oxlint-disable-line id-length\n    g: 0, // oxlint-disable-line id-length\n    r: 0, // oxlint-disable-line id-length\n  });\n\n  return (\n    <div className=\"n-flex n-items-center n-justify-centern-w-full\">\n      <FilledButton\n        onClick={handleClick}\n        htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n      >\n        Open Dialog\n      </FilledButton>\n      <Dialog onClose={handleClose} isOpen={isOpen}>\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Content className=\"n-max-h-96 n-overflow-y-auto\">\n          <ColorPicker\n            color={color}\n            onChange={(newColor) => setColor(newColor.rgb)}\n            floatingStrategy=\"fixed\"\n          />\n        </Dialog.Content>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"color-picker-dialog.story.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-dialog.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC;QACjC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;QACtC,CAAC,EAAE,CAAC,EAAE,gCAAgC;KACvC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAC,0CAA0C,aACvD,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,MAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAC1C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,0BAA0B,YAClD,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAC9C,gBAAgB,EAAC,OAAO,GACxB,GACa,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ColorPicker, Dialog, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  const [color, setColor] = useState({\n    a: 1, // oxlint-disable-line id-length\n    b: 0, // oxlint-disable-line id-length\n    g: 0, // oxlint-disable-line id-length\n    r: 0, // oxlint-disable-line id-length\n  });\n\n  return (\n    <div className=\"flex items-center justify-centern-w-full\">\n      <FilledButton\n        onClick={handleClick}\n        htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n      >\n        Open Dialog\n      </FilledButton>\n      <Dialog onClose={handleClose} isOpen={isOpen}>\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Content className=\"max-h-96 overflow-y-auto\">\n          <ColorPicker\n            color={color}\n            onChange={(newColor) => setColor(newColor.rgb)}\n            floatingStrategy=\"fixed\"\n          />\n        </Dialog.Content>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/color-picker/stories/color-picker-popover.story.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { ColorPicker, FilledButton, Popover } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsxs(Popover, { children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open Popover" }) }), _jsxs(Popover.Content, { className: "n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64", children: ["Popover content", _jsx(ColorPicker, { color: "#ff0000", onChange: () => {
+    return (_jsxs(Popover, { children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open Popover" }) }), _jsxs(Popover.Content, { className: "overflow-y-auto overflow-x-hidden p-4 max-h-64", children: ["Popover content", _jsx(ColorPicker, { color: "#ff0000", onChange: () => {
                             console.info('color changed');
                         }, floatingStrategy: "fixed", portalTarget: document.body })] })] }));
 };

package/lib/esm/color-picker/stories/color-picker-popover.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-popover.story.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-popover.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,MAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,wDAAwD,gCAEjF,KAAC,WAAW,IACV,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,GAAG,EAAE;4BACb,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;wBAChC,CAAC,EACD,gBAAgB,EAAC,OAAO,EACxB,YAAY,EAAE,QAAQ,CAAC,IAAI,GAC3B,IACc,IACV,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ColorPicker, FilledButton, Popover } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Popover>\n      <Popover.Trigger hasButtonWrapper>\n        <FilledButton>Open Popover</FilledButton>\n      </Popover.Trigger>\n      <Popover.Content className=\"n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64\">\n        Popover content\n        <ColorPicker\n          color=\"#ff0000\"\n          onChange={() => {\n            console.info('color changed');\n          }}\n          floatingStrategy=\"fixed\"\n          portalTarget={document.body}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"color-picker-popover.story.js","sourceRoot":"","sources":["../../../../src/color-picker/stories/color-picker-popover.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,MAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,gDAAgD,gCAEzE,KAAC,WAAW,IACV,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,GAAG,EAAE;4BACb,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;wBAChC,CAAC,EACD,gBAAgB,EAAC,OAAO,EACxB,YAAY,EAAE,QAAQ,CAAC,IAAI,GAC3B,IACc,IACV,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ColorPicker, FilledButton, Popover } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <Popover>\n      <Popover.Trigger hasButtonWrapper>\n        <FilledButton>Open Popover</FilledButton>\n      </Popover.Trigger>\n      <Popover.Content className=\"overflow-y-auto overflow-x-hidden p-4 max-h-64\">\n        Popover content\n        <ColorPicker\n          color=\"#ff0000\"\n          onChange={() => {\n            console.info('color changed');\n          }}\n          floatingStrategy=\"fixed\"\n          portalTarget={document.body}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/combobox/stories/combobox-action-on-select.story.js

@@ -55,7 +55,7 @@ const Component = () => {
     const [terminalValue, setTerminalValue] = useState('');
     const [searchValue, setSearchValue] = useState('');
     const textAreaRef = useRef(null);
-    return (_jsxs("div", { className: "n-flex n-gap-token-2 n-items-center", children: [_jsx(TextArea, { ref: textAreaRef, label: "Command input", value: terminalValue, htmlAttributes: {
+    return (_jsxs("div", { className: "flex gap-token-2 items-center", children: [_jsx(TextArea, { ref: textAreaRef, label: "Command input", value: terminalValue, htmlAttributes: {
                     onChange: (event) => setTerminalValue(event.target.value),
                     rows: 5,
                 }, helpText: "Use the button below to search for a command." }), _jsx(Combobox, { label: "Insert command", options: commands, searchPlaceholder: "Search commands", searchValue: searchValue, onSearchChange: setSearchValue, 

package/lib/esm/combobox/stories/combobox-action-on-select.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-action-on-select.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-action-on-select.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,QAAQ,GAAG;IACf;QACE,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,6BAA6B;KACrC;IACD;QACE,WAAW,EAAE,mDAAmD;QAChE,KAAK,EAAE,kBAAkB;QACzB,KAAK,EAAE,gCAAgC;KACxC;IACD;QACE,WAAW,EAAE,gDAAgD;QAC7D,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,cAAc;KACtB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACtD,OAAO,CACL,eAAK,SAAS,EAAC,qCAAqC,aAClD,KAAC,QAAQ,IACP,GAAG,EAAE,WAAW,EAChB,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,aAAa,EACpB,cAAc,EAAE;oBACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;oBACzD,IAAI,EAAE,CAAC;iBACR,EACD,QAAQ,EAAC,+CAA+C,GACxD,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,QAAQ,EACjB,iBAAiB,EAAC,iBAAiB,EACnC,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc;gBAC9B,kEAAkE;gBAClE,yEAAyE;gBACzE,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;;oBACpB,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;wBACrB,OAAO;oBACT,CAAC;oBAED,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChC,YAAY,KAAK,EAAE;wBACjB,CAAC,CAAC,OAAO,CAAC,KAAK;wBACf,CAAC,CAAC,GAAG,YAAY,KAAK,OAAO,CAAC,KAAK,EAAE,CACxC,CAAC;oBACF,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC/B,CAAC,EACD,aAAa,EAAE,CAAC,EAAwB,EAAE,EAAE;wBAA5B,EAAE,GAAG,OAAmB,EAAd,YAAY,cAAtB,OAAwB,CAAF;oBAAO,OAAA,CAC3C,KAAC,UAAU,IACT,GAAG,EAAE,GAAmC,EACxC,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE,YAAY,YAE5B,KAAC,sBAAsB,KAAG,GACf,CACd,CAAA;iBAAA,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, IconButton, TextArea } from '@neo4j-ndl/react';\nimport { CommandLineIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst commands = [\n  {\n    description: 'Return a small sample of nodes',\n    label: 'Match nodes',\n    value: 'MATCH (n) RETURN n LIMIT 25',\n  },\n  {\n    description: 'Show the labels and relationships in the database',\n    label: 'Visualize schema',\n    value: 'CALL db.schema.visualization()',\n  },\n  {\n    description: 'List the indexes available to the current user',\n    label: 'Show indexes',\n    value: 'SHOW INDEXES',\n  },\n];\n\nconst Component = () => {\n  const [terminalValue, setTerminalValue] = useState('');\n  const [searchValue, setSearchValue] = useState('');\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  return (\n    <div className=\"n-flex n-gap-token-2 n-items-center\">\n      <TextArea\n        ref={textAreaRef}\n        label=\"Command input\"\n        value={terminalValue}\n        htmlAttributes={{\n          onChange: (event) => setTerminalValue(event.target.value),\n          rows: 5,\n        }}\n        helpText=\"Use the button below to search for a command.\"\n      />\n      <Combobox\n        label=\"Insert command\"\n        options={commands}\n        searchPlaceholder=\"Search commands\"\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        // The picker activates an option but never keeps it as its value.\n        // Keeping the controlled value empty avoids a persistent selected state.\n        value={null}\n        onChange={(command) => {\n          if (command === null) {\n            return;\n          }\n\n          setTerminalValue((currentValue) =>\n            currentValue === ''\n              ? command.value\n              : `${currentValue}\\n${command.value}`,\n          );\n          setSearchValue('');\n          textAreaRef.current?.focus();\n        }}\n        renderTrigger={({ ref, ...triggerProps }) => (\n          <IconButton\n            ref={ref as React.Ref<HTMLButtonElement>}\n            description=\"Insert command\"\n            htmlAttributes={triggerProps}\n          >\n            <CommandLineIconOutline />\n          </IconButton>\n        )}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-action-on-select.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-action-on-select.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,QAAQ,GAAG;IACf;QACE,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,6BAA6B;KACrC;IACD;QACE,WAAW,EAAE,mDAAmD;QAChE,KAAK,EAAE,kBAAkB;QACzB,KAAK,EAAE,gCAAgC;KACxC;IACD;QACE,WAAW,EAAE,gDAAgD;QAC7D,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,cAAc;KACtB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACtD,OAAO,CACL,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,QAAQ,IACP,GAAG,EAAE,WAAW,EAChB,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,aAAa,EACpB,cAAc,EAAE;oBACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;oBACzD,IAAI,EAAE,CAAC;iBACR,EACD,QAAQ,EAAC,+CAA+C,GACxD,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,QAAQ,EACjB,iBAAiB,EAAC,iBAAiB,EACnC,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc;gBAC9B,kEAAkE;gBAClE,yEAAyE;gBACzE,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;;oBACpB,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;wBACrB,OAAO;oBACT,CAAC;oBAED,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChC,YAAY,KAAK,EAAE;wBACjB,CAAC,CAAC,OAAO,CAAC,KAAK;wBACf,CAAC,CAAC,GAAG,YAAY,KAAK,OAAO,CAAC,KAAK,EAAE,CACxC,CAAC;oBACF,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC/B,CAAC,EACD,aAAa,EAAE,CAAC,EAAwB,EAAE,EAAE;wBAA5B,EAAE,GAAG,OAAmB,EAAd,YAAY,cAAtB,OAAwB,CAAF;oBAAO,OAAA,CAC3C,KAAC,UAAU,IACT,GAAG,EAAE,GAAmC,EACxC,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE,YAAY,YAE5B,KAAC,sBAAsB,KAAG,GACf,CACd,CAAA;iBAAA,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, IconButton, TextArea } from '@neo4j-ndl/react';\nimport { CommandLineIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst commands = [\n  {\n    description: 'Return a small sample of nodes',\n    label: 'Match nodes',\n    value: 'MATCH (n) RETURN n LIMIT 25',\n  },\n  {\n    description: 'Show the labels and relationships in the database',\n    label: 'Visualize schema',\n    value: 'CALL db.schema.visualization()',\n  },\n  {\n    description: 'List the indexes available to the current user',\n    label: 'Show indexes',\n    value: 'SHOW INDEXES',\n  },\n];\n\nconst Component = () => {\n  const [terminalValue, setTerminalValue] = useState('');\n  const [searchValue, setSearchValue] = useState('');\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  return (\n    <div className=\"flex gap-token-2 items-center\">\n      <TextArea\n        ref={textAreaRef}\n        label=\"Command input\"\n        value={terminalValue}\n        htmlAttributes={{\n          onChange: (event) => setTerminalValue(event.target.value),\n          rows: 5,\n        }}\n        helpText=\"Use the button below to search for a command.\"\n      />\n      <Combobox\n        label=\"Insert command\"\n        options={commands}\n        searchPlaceholder=\"Search commands\"\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        // The picker activates an option but never keeps it as its value.\n        // Keeping the controlled value empty avoids a persistent selected state.\n        value={null}\n        onChange={(command) => {\n          if (command === null) {\n            return;\n          }\n\n          setTerminalValue((currentValue) =>\n            currentValue === ''\n              ? command.value\n              : `${currentValue}\\n${command.value}`,\n          );\n          setSearchValue('');\n          textAreaRef.current?.focus();\n        }}\n        renderTrigger={({ ref, ...triggerProps }) => (\n          <IconButton\n            ref={ref as React.Ref<HTMLButtonElement>}\n            description=\"Insert command\"\n            htmlAttributes={triggerProps}\n          >\n            <CommandLineIconOutline />\n          </IconButton>\n        )}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -50,7 +50,7 @@ const options = [
     { label: 'Digital twin', value: 'digital-twin' },
 ];
 const Component = () => {
-    return (_jsx("div", { className: "n-flex n-flex-col n-gap-token-4", children: _jsx(Combobox, { label: "Project", placeholder: "Select project", searchPlaceholder: "Search projects", options: options, 
+    return (_jsx("div", { className: "flex flex-col gap-token-4", children: _jsx(Combobox, { label: "Project", placeholder: "Select project", searchPlaceholder: "Search projects", options: options, 
             // An action never becomes part of the value. It runs, the panel closes,
             // and the selection is left as it was, which is what makes it usable for
             // leaving the combobox entirely.

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-actions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-actions.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\n\nconst options = [\n  { label: 'Movie recommendations', value: 'movie-recommendations' },\n  { label: 'Fraud detection', value: 'fraud-detection' },\n  { label: 'Supply chain', value: 'supply-chain' },\n  { label: 'Customer 360', value: 'customer-360' },\n  { label: 'Knowledge graph', value: 'knowledge-graph' },\n  { label: 'Network topology', value: 'network-topology' },\n  { label: 'Identity resolution', value: 'identity-resolution' },\n  { label: 'Master data management', value: 'master-data-management' },\n  { label: 'Social network analysis', value: 'social-network-analysis' },\n  { label: 'Route optimization', value: 'route-optimization' },\n  { label: 'Recommendation engine', value: 'recommendation-engine' },\n  { label: 'Access control', value: 'access-control' },\n  { label: 'Data lineage', value: 'data-lineage' },\n  { label: 'Entity resolution', value: 'entity-resolution' },\n  { label: 'Bill of materials', value: 'bill-of-materials' },\n  { label: 'Impact analysis', value: 'impact-analysis' },\n  { label: 'Anti money laundering', value: 'anti-money-laundering' },\n  { label: 'Dependency mapping', value: 'dependency-mapping' },\n  { label: 'Patient journey', value: 'patient-journey' },\n  { label: 'Content personalization', value: 'content-personalization' },\n  { label: 'Risk assessment', value: 'risk-assessment' },\n  { label: 'Churn prediction', value: 'churn-prediction' },\n  { label: 'Inventory tracking', value: 'inventory-tracking' },\n  { label: 'Semantic search', value: 'semantic-search' },\n  { label: 'Digital twin', value: 'digital-twin' },\n];\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-4\">\n      <Combobox\n        label=\"Project\"\n        placeholder=\"Select project\"\n        searchPlaceholder=\"Search projects\"\n        options={options}\n        // An action never becomes part of the value. It runs, the panel closes,\n        // and the selection is left as it was, which is what makes it usable for\n        // leaving the combobox entirely.\n        actions={[\n          {\n            label: 'All projects',\n            onSelect: () => console.info('all projects'),\n          },\n          {\n            // A divider above the action separates it from the actions before\n            // it. The first action never needs one: it already sits below the\n            // divider that separates actions from options.\n            hasDivider: true,\n            label: 'Create project',\n            leadingVisual: <PlusIconOutline />,\n            // The search value comes along, so an unmatched query can prefill\n            // the flow the action leads to.\n            onSelect: ({ searchValue }) =>\n              console.info('create project with search value', searchValue),\n          },\n        ]}\n        helpText=\"actions stay pinned below the scrolling options, and are exempt from searching\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-actions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-actions.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\n\nconst options = [\n  { label: 'Movie recommendations', value: 'movie-recommendations' },\n  { label: 'Fraud detection', value: 'fraud-detection' },\n  { label: 'Supply chain', value: 'supply-chain' },\n  { label: 'Customer 360', value: 'customer-360' },\n  { label: 'Knowledge graph', value: 'knowledge-graph' },\n  { label: 'Network topology', value: 'network-topology' },\n  { label: 'Identity resolution', value: 'identity-resolution' },\n  { label: 'Master data management', value: 'master-data-management' },\n  { label: 'Social network analysis', value: 'social-network-analysis' },\n  { label: 'Route optimization', value: 'route-optimization' },\n  { label: 'Recommendation engine', value: 'recommendation-engine' },\n  { label: 'Access control', value: 'access-control' },\n  { label: 'Data lineage', value: 'data-lineage' },\n  { label: 'Entity resolution', value: 'entity-resolution' },\n  { label: 'Bill of materials', value: 'bill-of-materials' },\n  { label: 'Impact analysis', value: 'impact-analysis' },\n  { label: 'Anti money laundering', value: 'anti-money-laundering' },\n  { label: 'Dependency mapping', value: 'dependency-mapping' },\n  { label: 'Patient journey', value: 'patient-journey' },\n  { label: 'Content personalization', value: 'content-personalization' },\n  { label: 'Risk assessment', value: 'risk-assessment' },\n  { label: 'Churn prediction', value: 'churn-prediction' },\n  { label: 'Inventory tracking', value: 'inventory-tracking' },\n  { label: 'Semantic search', value: 'semantic-search' },\n  { label: 'Digital twin', value: 'digital-twin' },\n];\n\nconst Component = () => {\n  return (\n    <div className=\"flex flex-col gap-token-4\">\n      <Combobox\n        label=\"Project\"\n        placeholder=\"Select project\"\n        searchPlaceholder=\"Search projects\"\n        options={options}\n        // An action never becomes part of the value. It runs, the panel closes,\n        // and the selection is left as it was, which is what makes it usable for\n        // leaving the combobox entirely.\n        actions={[\n          {\n            label: 'All projects',\n            onSelect: () => console.info('all projects'),\n          },\n          {\n            // A divider above the action separates it from the actions before\n            // it. The first action never needs one: it already sits below the\n            // divider that separates actions from options.\n            hasDivider: true,\n            label: 'Create project',\n            leadingVisual: <PlusIconOutline />,\n            // The search value comes along, so an unmatched query can prefill\n            // the flow the action leads to.\n            onSelect: ({ searchValue }) =>\n              console.info('create project with search value', searchValue),\n          },\n        ]}\n        helpText=\"actions stay pinned below the scrolling options, and are exempt from searching\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-async.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-async.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst catalog = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Browser', value: 'browser' },\n  { label: 'Cypher', value: 'cypher' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL', value: 'graphql' },\n];\n\nconst SEARCH_DELAY_MS = 600;\n\nconst Component = () => {\n  const [searchValue, setSearchValue] = useState('');\n  const [options, setOptions] = useState<typeof catalog>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasOpened, setHasOpened] = useState(false);\n\n  useEffect(() => {\n    if (!hasOpened) {\n      return;\n    }\n\n    let isCancelled = false;\n    const query = searchValue.trim().toLowerCase();\n\n    setIsLoading(true);\n    setOptions([]);\n\n    const timeoutId = window.setTimeout(() => {\n      if (isCancelled) {\n        return;\n      }\n\n      setOptions(\n        query === ''\n          ? catalog\n          : catalog.filter((option) =>\n              option.label.toLowerCase().includes(query),\n            ),\n      );\n      setIsLoading(false);\n    }, SEARCH_DELAY_MS);\n\n    return () => {\n      isCancelled = true;\n      window.clearTimeout(timeoutId);\n    };\n  }, [hasOpened, searchValue]);\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-4\">\n      <Combobox\n        label=\"Products\"\n        // The consumer supplies already-filtered options, so internal\n        // filtering must be disabled.\n        filterOption={false}\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        onOpenChange={(isOpen) => {\n          if (isOpen) {\n            setIsLoading(true);\n            setHasOpened(true);\n          }\n        }}\n        options={options}\n        isLoading={isLoading}\n        searchPlaceholder=\"Search products\"\n      />\n      <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n        The consumer clears, fetches, and filters options after a short delay.\n        The loading state is shown while each request is in flight.\n      </Typography>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"combobox-async.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-async.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst catalog = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Browser', value: 'browser' },\n  { label: 'Cypher', value: 'cypher' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL', value: 'graphql' },\n];\n\nconst SEARCH_DELAY_MS = 600;\n\nconst Component = () => {\n  const [searchValue, setSearchValue] = useState('');\n  const [options, setOptions] = useState<typeof catalog>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasOpened, setHasOpened] = useState(false);\n\n  useEffect(() => {\n    if (!hasOpened) {\n      return;\n    }\n\n    let isCancelled = false;\n    const query = searchValue.trim().toLowerCase();\n\n    setIsLoading(true);\n    setOptions([]);\n\n    const timeoutId = window.setTimeout(() => {\n      if (isCancelled) {\n        return;\n      }\n\n      setOptions(\n        query === ''\n          ? catalog\n          : catalog.filter((option) =>\n              option.label.toLowerCase().includes(query),\n            ),\n      );\n      setIsLoading(false);\n    }, SEARCH_DELAY_MS);\n\n    return () => {\n      isCancelled = true;\n      window.clearTimeout(timeoutId);\n    };\n  }, [hasOpened, searchValue]);\n\n  return (\n    <div className=\"flex flex-col gap-token-4\">\n      <Combobox\n        label=\"Products\"\n        // The consumer supplies already-filtered options, so internal\n        // filtering must be disabled.\n        filterOption={false}\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        onOpenChange={(isOpen) => {\n          if (isOpen) {\n            setIsLoading(true);\n            setHasOpened(true);\n          }\n        }}\n        options={options}\n        isLoading={isLoading}\n        searchPlaceholder=\"Search products\"\n      />\n      <Typography variant=\"body-small\" className=\"text-neutral-text-weak\">\n        The consumer clears, fetches, and filters options after a short delay.\n        The loading state is shown while each request is in flight.\n      </Typography>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

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