@neo4j-ndl/react 4.25.2 → 4.25.4

package/lib/esm/ai/preview/Preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../../../src/ai/preview/Preview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { TruncatedTextWithTooltip } from '../../_common/TruncatedTextWithTooltip';\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\n\ntype PreviewProps = {\n  children: React.ReactNode;\n};\n\n/**\n * Component to use for previewing certain content in AI chat applications.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PreviewComponent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype PreviewHeaderProps = {\n  /** The content to display in the header. When a plain string is passed, it truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  children?: React.ReactNode;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  actions?: React.ReactNode;\n};\n\nconst PreviewHeader = ({\n  children,\n  actions,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewHeaderProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-header', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"code\"\n        as=\"div\"\n        className=\"ndl-ai-preview-header-leading-content\"\n      >\n        {typeof children === 'string' ? (\n          <TruncatedTextWithTooltip text={children} />\n        ) : (\n          children\n        )}\n      </Typography>\n\n      {actions && (\n        <div className=\"ndl-ai-preview-header-actions\">{actions}</div>\n      )}\n    </div>\n  );\n};\n\ntype PreviewConfirmationProps = {\n  /** The content to display in the confirmation */\n  children?: React.ReactNode;\n  /** The actions to display in the confirmation, usually two buttons; one for confirming and one for rejecting. */\n  actions: React.ReactNode;\n  /** Whether the confirmation is used as a footer */\n  isFooter?: boolean;\n  /** The status of the confirmation */\n  status?: 'pending' | 'confirmed' | 'rejected';\n  /** The text to display for the confirmed status */\n  confirmedActionText?: string;\n  /** The text to display for the rejected status */\n  rejectedActionText?: string;\n};\n\nconst PreviewConfirmation = ({\n  children,\n  actions,\n  isFooter = false,\n  status = 'pending',\n  confirmedActionText = 'Action confirmed',\n  rejectedActionText = 'Action rejected',\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewConfirmationProps>) => {\n  const classes = classNames('ndl-ai-preview-confirmation', className, {\n    'ndl-ai-preview-confirmation-footer': isFooter,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {!(isFooter && status !== 'pending') && (\n        <Typography\n          as=\"div\"\n          variant={isFooter ? 'subheading-small' : 'body-medium'}\n          className=\"ndl-ai-preview-confirmation-content\"\n        >\n          {children}\n        </Typography>\n      )}\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"ndl-ai-preview-confirmation-actions\"\n      >\n        {status === 'pending' && actions}\n        {status === 'confirmed' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <CheckIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {confirmedActionText}\n          </div>\n        )}\n        {status === 'rejected' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <XMarkIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {rejectedActionText}\n          </div>\n        )}\n      </Typography>\n    </div>\n  );\n};\n\ntype PreviewCodeProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block\n   * @deprecated - The query should be described in the heading property instead.\n   */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n  /** The heading to display in the header. If not provided, the language will be displayed. Truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  heading?: string;\n};\n\nconst PreviewCode = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  heading,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewCodeProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    PreviewCodeProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-code', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isLoading && (\n        <div className=\"ndl-ai-preview-code-loading\">\n          <LoadingSpinner size=\"medium\" />\n          <Typography variant=\"code\">\n            WRITING {language.toUpperCase()}\n          </Typography>\n        </div>\n      )}\n      {!isLoading && (\n        <>\n          <PreviewHeader\n            className=\"ndl-ai-preview-code-header\"\n            actions={\n              <>\n                <ClipboardButton\n                  textToCopy={code}\n                  type=\"clean-icon-button\"\n                  size=\"small\"\n                />\n                {headerActions}\n              </>\n            }\n          >\n            <TruncatedTextWithTooltip\n              className=\"ndl-ai-preview-code-header-heading\"\n              text={\n                heading ??\n                `${language}${language.toLowerCase() === 'cypher' ? ' QUERY' : ''}`\n              }\n            />\n            {label && (\n              <StatusLabel\n                variant={label === 'write' ? 'warning' : 'info'}\n                size=\"small\"\n                fill=\"semi-filled\"\n              >\n                {label.toUpperCase()}\n              </StatusLabel>\n            )}\n          </PreviewHeader>\n          <div className=\"ndl-ai-preview-code-content\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\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              codeTagProps={{ className: 'n-ai-preview-code' }}\n              showLineNumbers={false}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\ntype PreviewContentProps = {\n  children?: React.ReactNode;\n};\n\nconst PreviewContent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewContentProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-content', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const Preview = Object.assign(PreviewComponent, {\n  Code: PreviewCode,\n  Confirmation: PreviewConfirmation,\n  Content: PreviewContent,\n  Header: PreviewHeader,\n});\n"]}
+{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../../../src/ai/preview/Preview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { TruncatedTextWithTooltip } from '../../_common/TruncatedTextWithTooltip';\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\n\ntype PreviewProps = {\n  children: React.ReactNode;\n};\n\n/**\n * Component to use for previewing certain content in AI chat applications.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PreviewComponent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype PreviewHeaderProps = {\n  /** The content to display in the header. When a plain string is passed, it truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  children?: React.ReactNode;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  actions?: React.ReactNode;\n};\n\nconst PreviewHeader = ({\n  children,\n  actions,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewHeaderProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-header', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"code\"\n        as=\"div\"\n        className=\"ndl-ai-preview-header-leading-content\"\n      >\n        {typeof children === 'string' ? (\n          <TruncatedTextWithTooltip text={children} />\n        ) : (\n          children\n        )}\n      </Typography>\n\n      {actions && (\n        <div className=\"ndl-ai-preview-header-actions\">{actions}</div>\n      )}\n    </div>\n  );\n};\n\ntype PreviewConfirmationProps = {\n  /** The content to display in the confirmation */\n  children?: React.ReactNode;\n  /** The actions to display in the confirmation, usually two buttons; one for confirming and one for rejecting. */\n  actions: React.ReactNode;\n  /** Whether the confirmation is used as a footer */\n  isFooter?: boolean;\n  /** The status of the confirmation */\n  status?: 'pending' | 'confirmed' | 'rejected';\n  /** The text to display for the confirmed status */\n  confirmedActionText?: string;\n  /** The text to display for the rejected status */\n  rejectedActionText?: string;\n};\n\nconst PreviewConfirmation = ({\n  children,\n  actions,\n  isFooter = false,\n  status = 'pending',\n  confirmedActionText = 'Action confirmed',\n  rejectedActionText = 'Action rejected',\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewConfirmationProps>) => {\n  const classes = classNames('ndl-ai-preview-confirmation', className, {\n    'ndl-ai-preview-confirmation-footer': isFooter,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {!(isFooter && status !== 'pending') && (\n        <Typography\n          as=\"div\"\n          variant={isFooter ? 'subheading-small' : 'body-medium'}\n          className=\"ndl-ai-preview-confirmation-content\"\n        >\n          {children}\n        </Typography>\n      )}\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"ndl-ai-preview-confirmation-actions\"\n      >\n        {status === 'pending' && actions}\n        {status === 'confirmed' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <CheckIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {confirmedActionText}\n          </div>\n        )}\n        {status === 'rejected' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <XMarkIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {rejectedActionText}\n          </div>\n        )}\n      </Typography>\n    </div>\n  );\n};\n\ntype PreviewCodeProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block\n   * @deprecated - The query should be described in the heading property instead.\n   */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n  /** The heading to display in the header. If not provided, the language will be displayed. Truncates with an ellipsis and shows a tooltip with the full text when space is limited. */\n  heading?: string;\n};\n\nconst PreviewCode = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  heading,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewCodeProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    PreviewCodeProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-code', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isLoading && (\n        <div className=\"ndl-ai-preview-code-loading\">\n          <LoadingSpinner size=\"medium\" />\n          <Typography variant=\"code\">\n            WRITING {language.toUpperCase()}\n          </Typography>\n        </div>\n      )}\n      {!isLoading && (\n        <>\n          <PreviewHeader\n            className=\"ndl-ai-preview-code-header\"\n            actions={\n              <>\n                <ClipboardButton\n                  textToCopy={code}\n                  type=\"clean-icon-button\"\n                  size=\"small\"\n                />\n                {headerActions}\n              </>\n            }\n          >\n            <TruncatedTextWithTooltip\n              className=\"ndl-ai-preview-code-header-heading\"\n              text={\n                heading ??\n                `${language}${language.toLowerCase() === 'cypher' ? ' QUERY' : ''}`\n              }\n            />\n            {label && (\n              <StatusLabel\n                variant={label === 'write' ? 'warning' : 'info'}\n                size=\"small\"\n                fill=\"semi-filled\"\n              >\n                {label.toUpperCase()}\n              </StatusLabel>\n            )}\n          </PreviewHeader>\n          <div className=\"ndl-ai-preview-code-content\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\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={false}\n              // Any value on codeTagProps replaces the library default, which would inline the theme's code styles\n              codeTagProps={{}}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\ntype PreviewContentProps = {\n  children?: React.ReactNode;\n};\n\nconst PreviewContent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewContentProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-content', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const Preview = Object.assign(PreviewComponent, {\n  Code: PreviewCode,\n  Confirmation: PreviewConfirmation,\n  Content: PreviewContent,\n  Header: PreviewHeader,\n});\n"]}

package/lib/esm/ai/thinking/Thinking.js

@@ -31,6 +31,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
+import { Typography } from '../../typography';
 import { Presence } from '../presence';
 import { formatThinkingDuration } from './thinking-duration-formatter';
 /**
@@ -42,9 +43,9 @@ import { formatThinkingDuration } from './thinking-duration-formatter';
  */
 const Thinking = (_a) => {
     var { className, isThinking = true, style, htmlAttributes, ref, thinkingMs = 1000 } = _a, restProps = __rest(_a, ["className", "isThinking", "style", "htmlAttributes", "ref", "thinkingMs"]);
-    const classes = classNames('n-flex n-flex-col n-items-start n-gap-token-12', className);
+    const classes = classNames('ndl-ai-thinking', className);
     const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);
-    return (_jsx("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: isThinking === true ? (_jsxs(_Fragment, { children: [_jsx(Presence, { isThinking: isThinking, className: "n-size-token-32" }), _jsx("span", { className: "n-subheading-small n-text-neutral-text-default", children: "Thinking" })] })) : (_jsxs("span", { className: "n-subheading-small n-text-neutral-text-weak", children: ["Thought", ' ', _jsxs("span", { className: "n-font-normal", children: ["for ", thinkingDuration, " ", unit] })] })) })));
+    return (_jsx("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: isThinking === true ? (_jsxs(_Fragment, { children: [_jsx(Presence, { isThinking: isThinking, className: "ndl-ai-thinking-presence" }), _jsx(Typography, { variant: "subheading-small", className: "ndl-ai-thinking-label", children: "Thinking" })] })) : (_jsxs(Typography, { variant: "subheading-small", className: "ndl-ai-thinking-done", children: ["Thought", ' ', _jsxs("span", { className: "ndl-ai-thinking-duration", children: ["for ", thinkingDuration, " ", unit] })] })) })));
 };
 export { Thinking };
 //# sourceMappingURL=Thinking.js.map

package/lib/esm/ai/thinking/Thinking.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thinking.js","sourceRoot":"","sources":["../../../../src/ai/thinking/Thinking.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAYvE;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQkB,EAAE,EAAE;QARtB,EAChB,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,cAAc,EACd,GAAG,EACH,UAAU,GAAG,IAAI,OAEiB,EAD/B,SAAS,cAPI,2EAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CACxB,gDAAgD,EAChD,SAAS,CACV,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAE7E,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAEjB,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CACrB,8BACE,KAAC,QAAQ,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAC,iBAAiB,GAAG,EAChE,eAAM,SAAS,EAAC,gDAAgD,yBAEzD,IACN,CACJ,CAAC,CAAC,CAAC,CACF,gBAAM,SAAS,EAAC,6CAA6C,wBACnD,GAAG,EACX,gBAAM,SAAS,EAAC,eAAe,qBACxB,gBAAgB,OAAG,IAAI,IACvB,IACF,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,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 classNames from 'classnames';\n\nimport type { CommonProps } from '../../_common/types';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from './thinking-duration-formatter';\n\ntype ThinkingProps = {\n  /** Whether the AI is thinking.\n   * If true, will render a thinking presence icon and the text \"Thinking\".\n   * If false, will render the duration of the thinking.\n   */\n  isThinking?: boolean;\n  /** The duration of the thinking in milliseconds */\n  thinkingMs?: number;\n};\n\n/**\n * The component is used to display the thinking state of an LLM.\n * If the `isThinking` prop is true, it will render a thinking presence icon and the text \"Thinking\".\n * If the `isThinking` prop is false, it will render the duration of the thinking.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst Thinking = ({\n  className,\n  isThinking = true,\n  style,\n  htmlAttributes,\n  ref,\n  thinkingMs = 1000,\n  ...restProps\n}: CommonProps<'div', ThinkingProps>) => {\n  const classes = classNames(\n    'n-flex n-flex-col n-items-start n-gap-token-12',\n    className,\n  );\n\n  const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isThinking === true ? (\n        <>\n          <Presence isThinking={isThinking} className=\"n-size-token-32\" />\n          <span className=\"n-subheading-small n-text-neutral-text-default\">\n            Thinking\n          </span>\n        </>\n      ) : (\n        <span className=\"n-subheading-small n-text-neutral-text-weak\">\n          Thought{' '}\n          <span className=\"n-font-normal\">\n            for {thinkingDuration} {unit}\n          </span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport { Thinking };\n"]}
+{"version":3,"file":"Thinking.js","sourceRoot":"","sources":["../../../../src/ai/thinking/Thinking.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAYvE;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQkB,EAAE,EAAE;QARtB,EAChB,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,cAAc,EACd,GAAG,EACH,UAAU,GAAG,IAAI,OAEiB,EAD/B,SAAS,cAPI,2EAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAEzD,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAE7E,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAEjB,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CACrB,8BACE,KAAC,QAAQ,IACP,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,0BAA0B,GACpC,EACF,KAAC,UAAU,IACT,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAC,uBAAuB,yBAGtB,IACZ,CACJ,CAAC,CAAC,CAAC,CACF,MAAC,UAAU,IAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAC,sBAAsB,wBAC7D,GAAG,EACX,gBAAM,SAAS,EAAC,0BAA0B,qBACnC,gBAAgB,OAAG,IAAI,IACvB,IACI,CACd,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,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 classNames from 'classnames';\n\nimport type { CommonProps } from '../../_common/types';\nimport { Typography } from '../../typography';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from './thinking-duration-formatter';\n\ntype ThinkingProps = {\n  /** Whether the AI is thinking.\n   * If true, will render a thinking presence icon and the text \"Thinking\".\n   * If false, will render the duration of the thinking.\n   */\n  isThinking?: boolean;\n  /** The duration of the thinking in milliseconds */\n  thinkingMs?: number;\n};\n\n/**\n * The component is used to display the thinking state of an LLM.\n * If the `isThinking` prop is true, it will render a thinking presence icon and the text \"Thinking\".\n * If the `isThinking` prop is false, it will render the duration of the thinking.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst Thinking = ({\n  className,\n  isThinking = true,\n  style,\n  htmlAttributes,\n  ref,\n  thinkingMs = 1000,\n  ...restProps\n}: CommonProps<'div', ThinkingProps>) => {\n  const classes = classNames('ndl-ai-thinking', className);\n\n  const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isThinking === true ? (\n        <>\n          <Presence\n            isThinking={isThinking}\n            className=\"ndl-ai-thinking-presence\"\n          />\n          <Typography\n            variant=\"subheading-small\"\n            className=\"ndl-ai-thinking-label\"\n          >\n            Thinking\n          </Typography>\n        </>\n      ) : (\n        <Typography variant=\"subheading-small\" className=\"ndl-ai-thinking-done\">\n          Thought{' '}\n          <span className=\"ndl-ai-thinking-duration\">\n            for {thinkingDuration} {unit}\n          </span>\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport { Thinking };\n"]}

package/lib/esm/ai/tool-call/ToolCall.js

@@ -42,8 +42,8 @@ import { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutli
  */
 const ToolCall = (_a) => {
     var { children, isDone = false, ref, className, style, htmlAttributes } = _a, restProps = __rest(_a, ["children", "isDone", "ref", "className", "style", "htmlAttributes"]);
-    const classes = classNames('ndl-ai-tool n-inline-flex n-items-center n-gap-token-12 n-flex-row', className);
-    return (_jsxs(Typography, Object.assign({ variant: "body-medium", ref: ref, className: classes, style: style, htmlAttributes: htmlAttributes }, restProps, { children: [_jsx("span", { className: "n-text-neutral-text-weak n-capitalize n-inline-flex n-items-center n-gap-token-6 n-flex-row", children: isDone ? (_jsxs(_Fragment, { children: [_jsx(CheckIconOutline, { className: "n-size-token-16 n-text-neutral-text-weaker" }), "Ran"] })) : ('Using') }), _jsx(Code, { isRunnable: false, children: children })] })));
+    const classes = classNames('ndl-ai-tool', className);
+    return (_jsxs(Typography, Object.assign({ variant: "body-medium", ref: ref, className: classes, style: style, htmlAttributes: htmlAttributes }, restProps, { children: [_jsx("span", { className: "ndl-ai-tool-status", children: isDone ? (_jsxs(_Fragment, { children: [_jsx(CheckIconOutline, { className: "ndl-ai-tool-icon" }), "Ran"] })) : ('Using') }), _jsx(Code, { isRunnable: false, children: children })] })));
 };
 export { ToolCall };
 //# sourceMappingURL=ToolCall.js.map

package/lib/esm/ai/tool-call/ToolCall.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCall.js","sourceRoot":"","sources":["../../../../src/ai/tool-call/ToolCall.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AASpF;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQmB,EAAE,EAAE;QARvB,EAChB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,GAAG,EACH,SAAS,EACT,KAAK,EACL,cAAc,OAEqB,EADhC,SAAS,cAPI,qEAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CACxB,oEAAoE,EACpE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,kBACT,OAAO,EAAC,aAAa,EACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,IAC1B,SAAS,eAEb,eAAM,SAAS,EAAC,6FAA6F,YAC1G,MAAM,CAAC,CAAC,CAAC,CACR,8BACE,KAAC,gBAAgB,IAAC,SAAS,EAAC,4CAA4C,GAAG,WAE1E,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACI,EACP,KAAC,IAAI,IAAC,UAAU,EAAE,KAAK,YAAG,QAAQ,GAAQ,KAC/B,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,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 { Code, Typography } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport { type CommonProps } from '../../_common/types';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\n\ntype ToolCallProps = {\n  /** The content of the suggestion */\n  children?: React.ReactNode;\n  /** Whether the AI is done with using the tool */\n  isDone?: boolean;\n};\n\n/**\n * The component is used to display that an LLM is using a tool.\n * Per default, the component will display the text \"Using\".\n * If the `isDone` prop is true, the component will display the check icon and the text \"Ran\".\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ToolCall = ({\n  children,\n  isDone = false,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'span', ToolCallProps>) => {\n  const classes = classNames(\n    'ndl-ai-tool n-inline-flex n-items-center n-gap-token-12 n-flex-row',\n    className,\n  );\n\n  return (\n    <Typography\n      variant=\"body-medium\"\n      ref={ref}\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      <span className=\"n-text-neutral-text-weak n-capitalize n-inline-flex n-items-center n-gap-token-6 n-flex-row\">\n        {isDone ? (\n          <>\n            <CheckIconOutline className=\"n-size-token-16 n-text-neutral-text-weaker\" />\n            Ran\n          </>\n        ) : (\n          'Using'\n        )}\n      </span>\n      <Code isRunnable={false}>{children}</Code>\n    </Typography>\n  );\n};\n\nexport { ToolCall };\n"]}
+{"version":3,"file":"ToolCall.js","sourceRoot":"","sources":["../../../../src/ai/tool-call/ToolCall.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AASpF;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAQmB,EAAE,EAAE;QARvB,EAChB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,GAAG,EACH,SAAS,EACT,KAAK,EACL,cAAc,OAEqB,EADhC,SAAS,cAPI,qEAQjB,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,MAAC,UAAU,kBACT,OAAO,EAAC,aAAa,EACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,IAC1B,SAAS,eAEb,eAAM,SAAS,EAAC,oBAAoB,YACjC,MAAM,CAAC,CAAC,CAAC,CACR,8BACE,KAAC,gBAAgB,IAAC,SAAS,EAAC,kBAAkB,GAAG,WAEhD,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACI,EACP,KAAC,IAAI,IAAC,UAAU,EAAE,KAAK,YAAG,QAAQ,GAAQ,KAC/B,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,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 { Code, Typography } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport { type CommonProps } from '../../_common/types';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\n\ntype ToolCallProps = {\n  /** The content of the suggestion */\n  children?: React.ReactNode;\n  /** Whether the AI is done with using the tool */\n  isDone?: boolean;\n};\n\n/**\n * The component is used to display that an LLM is using a tool.\n * Per default, the component will display the text \"Using\".\n * If the `isDone` prop is true, the component will display the check icon and the text \"Ran\".\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ToolCall = ({\n  children,\n  isDone = false,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'span', ToolCallProps>) => {\n  const classes = classNames('ndl-ai-tool', className);\n\n  return (\n    <Typography\n      variant=\"body-medium\"\n      ref={ref}\n      className={classes}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      {...restProps}\n    >\n      <span className=\"ndl-ai-tool-status\">\n        {isDone ? (\n          <>\n            <CheckIconOutline className=\"ndl-ai-tool-icon\" />\n            Ran\n          </>\n        ) : (\n          'Using'\n        )}\n      </span>\n      <Code isRunnable={false}>{children}</Code>\n    </Typography>\n  );\n};\n\nexport { ToolCall };\n"]}

package/lib/esm/clipboard-button/ClipboardButton.js

@@ -148,6 +148,6 @@ export const ClipboardButton = ({ textToCopy, descriptionKbdProps, isDisabled, s
                 },
                 type: 'clean-icon-button',
             };
-    return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied", descriptionKbdProps: descriptionKbdProps }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: _jsx(Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
+    return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied", descriptionKbdProps: descriptionKbdProps }, props, { tooltipProps: tooltipProps, icon: _jsx(Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
 };
 //# sourceMappingURL=ClipboardButton.js.map

package/lib/esm/clipboard-button/ClipboardButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton.js","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.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 React from 'react';\n\nimport { type ButtonSizes } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useCopyToClipboard } from '../hooks';\nimport { IconButton } from '../icon-button';\nimport { Square2StackIconOutline } from '../icons/generated/heroIcons/Square2StackIconOutline';\nimport { Kbd } from '../kbd';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  actionFeedbackText: string;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  onClick?: React.ComponentPropsWithoutRef<'button'>['onClick'];\n  children: React.ReactNode;\n  className?: string;\n  icon: React.ReactNode;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n} & (\n  | {\n      type: 'clean-icon-button';\n      cleanIconButtonProps?: Omit<\n        React.ComponentProps<typeof CleanIconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'icon-button';\n      iconButtonProps?: Omit<\n        React.ComponentProps<typeof IconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'outlined-button';\n      outlinedButtonProps?: Omit<\n        React.ComponentProps<typeof OutlinedButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n);\n\nconst ConfirmationButton = ({\n  descriptionKbdProps,\n  description,\n  actionFeedbackText,\n  icon,\n  children,\n  onClick,\n  htmlAttributes,\n  tooltipProps,\n  type = 'clean-icon-button',\n  ...restProps\n}: ConfirmationButtonProps) => {\n  const [timeoutId, setTimeoutId] = React.useState<number | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const handleClick = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n    }\n\n    const newTimeoutId = window.setTimeout(() => {\n      setTimeoutId(null);\n    }, 2000);\n\n    setTimeoutId(newTimeoutId);\n  };\n\n  const handleCloseTooltip = () => {\n    setIsOpen(false);\n  };\n\n  const handleOpenTooltip = () => {\n    setIsOpen(true);\n  };\n\n  const content = timeoutId === null ? description : actionFeedbackText;\n  /* Controlling the tip to make it disappear in a timely manner */\n\n  if (type === 'clean-icon-button') {\n    return (\n      <CleanIconButton\n        {...(\n          restProps as {\n            cleanIconButtonProps: React.ComponentProps<typeof CleanIconButton>;\n          }\n        ).cleanIconButtonProps}\n        description={content}\n        descriptionKbdProps={descriptionKbdProps}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </CleanIconButton>\n    );\n  } else if (type === 'icon-button') {\n    return (\n      <IconButton\n        {...(\n          restProps as {\n            iconButtonProps: React.ComponentProps<typeof IconButton>;\n          }\n        ).iconButtonProps}\n        description={content}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </IconButton>\n    );\n  } else if (type === 'outlined-button') {\n    return (\n      <Tooltip\n        type=\"simple\"\n        isOpen={isOpen || timeoutId !== null}\n        {...tooltipProps}\n        onOpenChange={(open) => {\n          if (open) {\n            handleOpenTooltip();\n          } else {\n            handleCloseTooltip();\n          }\n          tooltipProps?.onOpenChange?.(open);\n        }}\n      >\n        <Tooltip.Trigger\n          hasButtonWrapper\n          htmlAttributes={{\n            'aria-label': content,\n            onBlur: handleCloseTooltip,\n            onFocus: handleOpenTooltip,\n            onMouseEnter: handleOpenTooltip,\n            onMouseLeave: handleCloseTooltip,\n          }}\n        >\n          <OutlinedButton\n            variant=\"neutral\"\n            {...(\n              restProps as {\n                buttonProps: React.ComponentProps<typeof OutlinedButton>;\n              }\n            ).buttonProps}\n            onClick={(event) => {\n              if (onClick) {\n                onClick(event);\n              }\n              handleClick();\n            }}\n            leadingVisual={icon}\n            className={restProps.className}\n            htmlAttributes={htmlAttributes}\n          >\n            {children}\n          </OutlinedButton>\n        </Tooltip.Trigger>\n        <Tooltip.Content>\n          {content}\n          {descriptionKbdProps && <Kbd {...descriptionKbdProps} />}\n        </Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\n/**\n * @remarks\n * For more information of the `TooltipProps` type, see the Tooltip component documentation.\n */\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  isDisabled?: boolean;\n  size?: ButtonSizes;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n  type?: 'outlined-button' | 'clean-icon-button' | 'icon-button';\n}\n\nexport const ClipboardButton = ({\n  textToCopy,\n  descriptionKbdProps,\n  isDisabled,\n  size,\n  tooltipProps,\n  htmlAttributes,\n  type,\n}: ClipboardButtonProps) => {\n  const [, copyFunction] = useCopyToClipboard();\n\n  const isOutlinedButton = type === 'outlined-button';\n  const isIconButton = type === 'icon-button';\n\n  const props = isOutlinedButton\n    ? {\n        outlinedButtonProps: {\n          isDisabled,\n          size,\n        },\n        type: 'outlined-button' as const,\n      }\n    : isIconButton\n      ? {\n          iconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'icon-button' as const,\n        }\n      : {\n          cleanIconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'clean-icon-button' as const,\n        };\n\n  return (\n    <ConfirmationButton\n      onClick={() => copyFunction(textToCopy)}\n      description=\"Copy to clipboard\"\n      actionFeedbackText=\"Copied\"\n      descriptionKbdProps={descriptionKbdProps}\n      {...props}\n      tooltipProps={tooltipProps}\n      className=\"n-gap-token-8\"\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={{\n        'aria-live': 'polite',\n        ...htmlAttributes,\n      }}\n    >\n      {type === 'outlined-button' && 'Copy'}\n    </ConfirmationButton>\n  );\n};\n"]}
+{"version":3,"file":"ClipboardButton.js","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.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 React from 'react';\n\nimport { type ButtonSizes } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useCopyToClipboard } from '../hooks';\nimport { IconButton } from '../icon-button';\nimport { Square2StackIconOutline } from '../icons/generated/heroIcons/Square2StackIconOutline';\nimport { Kbd } from '../kbd';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  actionFeedbackText: string;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  onClick?: React.ComponentPropsWithoutRef<'button'>['onClick'];\n  children: React.ReactNode;\n  className?: string;\n  icon: React.ReactNode;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n} & (\n  | {\n      type: 'clean-icon-button';\n      cleanIconButtonProps?: Omit<\n        React.ComponentProps<typeof CleanIconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'icon-button';\n      iconButtonProps?: Omit<\n        React.ComponentProps<typeof IconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'outlined-button';\n      outlinedButtonProps?: Omit<\n        React.ComponentProps<typeof OutlinedButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n);\n\nconst ConfirmationButton = ({\n  descriptionKbdProps,\n  description,\n  actionFeedbackText,\n  icon,\n  children,\n  onClick,\n  htmlAttributes,\n  tooltipProps,\n  type = 'clean-icon-button',\n  ...restProps\n}: ConfirmationButtonProps) => {\n  const [timeoutId, setTimeoutId] = React.useState<number | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const handleClick = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n    }\n\n    const newTimeoutId = window.setTimeout(() => {\n      setTimeoutId(null);\n    }, 2000);\n\n    setTimeoutId(newTimeoutId);\n  };\n\n  const handleCloseTooltip = () => {\n    setIsOpen(false);\n  };\n\n  const handleOpenTooltip = () => {\n    setIsOpen(true);\n  };\n\n  const content = timeoutId === null ? description : actionFeedbackText;\n  /* Controlling the tip to make it disappear in a timely manner */\n\n  if (type === 'clean-icon-button') {\n    return (\n      <CleanIconButton\n        {...(\n          restProps as {\n            cleanIconButtonProps: React.ComponentProps<typeof CleanIconButton>;\n          }\n        ).cleanIconButtonProps}\n        description={content}\n        descriptionKbdProps={descriptionKbdProps}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </CleanIconButton>\n    );\n  } else if (type === 'icon-button') {\n    return (\n      <IconButton\n        {...(\n          restProps as {\n            iconButtonProps: React.ComponentProps<typeof IconButton>;\n          }\n        ).iconButtonProps}\n        description={content}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </IconButton>\n    );\n  } else if (type === 'outlined-button') {\n    return (\n      <Tooltip\n        type=\"simple\"\n        isOpen={isOpen || timeoutId !== null}\n        {...tooltipProps}\n        onOpenChange={(open) => {\n          if (open) {\n            handleOpenTooltip();\n          } else {\n            handleCloseTooltip();\n          }\n          tooltipProps?.onOpenChange?.(open);\n        }}\n      >\n        <Tooltip.Trigger\n          hasButtonWrapper\n          htmlAttributes={{\n            'aria-label': content,\n            onBlur: handleCloseTooltip,\n            onFocus: handleOpenTooltip,\n            onMouseEnter: handleOpenTooltip,\n            onMouseLeave: handleCloseTooltip,\n          }}\n        >\n          <OutlinedButton\n            variant=\"neutral\"\n            {...(\n              restProps as {\n                buttonProps: React.ComponentProps<typeof OutlinedButton>;\n              }\n            ).buttonProps}\n            onClick={(event) => {\n              if (onClick) {\n                onClick(event);\n              }\n              handleClick();\n            }}\n            leadingVisual={icon}\n            className={restProps.className}\n            htmlAttributes={htmlAttributes}\n          >\n            {children}\n          </OutlinedButton>\n        </Tooltip.Trigger>\n        <Tooltip.Content>\n          {content}\n          {descriptionKbdProps && <Kbd {...descriptionKbdProps} />}\n        </Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\n/**\n * @remarks\n * For more information of the `TooltipProps` type, see the Tooltip component documentation.\n */\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\n  descriptionKbdProps?: React.ComponentProps<typeof Kbd>;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  isDisabled?: boolean;\n  size?: ButtonSizes;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n  type?: 'outlined-button' | 'clean-icon-button' | 'icon-button';\n}\n\nexport const ClipboardButton = ({\n  textToCopy,\n  descriptionKbdProps,\n  isDisabled,\n  size,\n  tooltipProps,\n  htmlAttributes,\n  type,\n}: ClipboardButtonProps) => {\n  const [, copyFunction] = useCopyToClipboard();\n\n  const isOutlinedButton = type === 'outlined-button';\n  const isIconButton = type === 'icon-button';\n\n  const props = isOutlinedButton\n    ? {\n        outlinedButtonProps: {\n          isDisabled,\n          size,\n        },\n        type: 'outlined-button' as const,\n      }\n    : isIconButton\n      ? {\n          iconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'icon-button' as const,\n        }\n      : {\n          cleanIconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'clean-icon-button' as const,\n        };\n\n  return (\n    <ConfirmationButton\n      onClick={() => copyFunction(textToCopy)}\n      description=\"Copy to clipboard\"\n      actionFeedbackText=\"Copied\"\n      descriptionKbdProps={descriptionKbdProps}\n      {...props}\n      tooltipProps={tooltipProps}\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={{\n        'aria-live': 'polite',\n        ...htmlAttributes,\n      }}\n    >\n      {type === 'outlined-button' && 'Copy'}\n    </ConfirmationButton>\n  );\n};\n"]}

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

@@ -55,7 +55,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: "n-flex n-flex-col n-h-full", children: [hasHeading && (_jsx("div", { className: classNames('ndl-code-block-title', {
+    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', {
                             '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)`,

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=\"n-flex n-flex-col n-h-full\">\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 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"]}

package/lib/esm/data-grid/Components.js

@@ -322,7 +322,7 @@ const TableResults = (_a) => {
     if (isSmallNavigation) {
         return null;
     }
-    return (_jsx(Skeleton, Object.assign({ as: "span", onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsx("span", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-results', className) }, restProps, htmlAttributes, { children: children || (_jsxs("span", { children: ["Showing", ' ', _jsx("span", { className: "n-font-bold", children: totalRows ? `${from}${to !== from ? `-${to}` : ''}` : 0 }), ' ', "of ", _jsx("span", { className: "n-font-bold", children: totalRows }), " ", resultsLabel] })) })) })));
+    return (_jsx(Skeleton, Object.assign({ as: "span", onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsx("span", Object.assign({ ref: ref, style: style, className: classNames('ndl-data-grid-results', className) }, restProps, htmlAttributes, { children: children || (_jsxs("span", { children: ["Showing", ' ', _jsx("span", { className: "ndl-data-grid-results-count", children: totalRows ? `${from}${to !== from ? `-${to}` : ''}` : 0 }), ' ', "of ", _jsx("span", { className: "ndl-data-grid-results-count", children: totalRows }), ' ', resultsLabel] })) })) })));
 };
 const RowsPerPage = (_a) => {
     var { portalTarget: portalTargetProp, children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["portalTarget", "children", "className", "style", "htmlAttributes", "ref"]);
@@ -486,7 +486,7 @@ const DropDownCell = (_a) => {
 };
 const NoDataIcon = (_a) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const classes = classNames('n-size-token-64', className);
+    const classes = classNames('ndl-data-grid-no-data-icon', className);
     return _jsx(DataGridCrossIcon, Object.assign({ className: classes }, restProps));
 };
 export { ResizingBar, Header, Body, BodyCell, BodyRow, InlineEditCell, DropDownCell, ActionCell, HeaderCell, HeaderTitle, Navigation, TableResults, RowsPerPage, Pagination, PaginationNumericButtons, PaginationArrowButton, PaginationNumericButton, NoDataPlaceholder, NoDataIcon, LoadingPlaceholder, Scrollable, };