@neo4j-ndl/react 4.7.1 → 4.7.3

package/lib/cjs/avatar/Avatar.js

@@ -66,6 +66,16 @@ function StatusIndicator({ size, status, }) {
     const statusClasses = `ndl-avatar-status ndl-avatar-status-${status}`;
     return ((0, jsx_runtime_1.jsx)("div", { className: statusClasses, title: status.charAt(0).toUpperCase() + status.slice(1), role: "presentation", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: diameter, width: diameter, viewBox: `0 0 ${diameter} ${diameter}`, fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: cxAndCy, cy: cxAndCy, r: rOuter, className: "ndl-avatar-status-circle-outer" }), (0, jsx_runtime_1.jsx)("circle", { cx: cxAndCy, cy: cxAndCy, r: status === 'unknown' ? rInner - 1 : rInner, className: "ndl-avatar-status-circle-inner" })] }) }));
 }
+const getLettersDisplay = (displayName) => {
+    const words = displayName.trim().split(/\s+/).filter(Boolean);
+    if (words.length <= 1) {
+        return displayName.trim();
+    }
+    return words
+        .map((word) => word.charAt(0))
+        .join('')
+        .toUpperCase();
+};
 const Avatar = (_a) => {
     var { as, hasStatus = false, isDisabled = false, name, shape = 'circle', size = 'medium', source, status, type: initialType = 'image', className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "hasStatus", "isDisabled", "name", "shape", "size", "source", "status", "type", "className", "style", "htmlAttributes", "ref"]);
     // If source is not provided, fallback to icon
@@ -82,7 +92,7 @@ const Avatar = (_a) => {
     const renderImageType = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { "data-testid": "ndl-avatar-image", src: source, alt: name }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "ndl-avatar-image-overlay", className: `${shapeClasses} ndl-avatar-image-overlay` })] }));
     const renderIconType = () => (0, jsx_runtime_1.jsx)(icons_1.UserIconOutline, {});
     const renderLettersType = () => {
-        return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "subheading-small", className: "ndl-avatar-typography", children: name }));
+        return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "subheading-small", className: "ndl-avatar-typography", children: getLettersDisplay(name !== null && name !== void 0 ? name : '') }));
     };
     const TypeComponent = type === 'image'
         ? renderImageType()

package/lib/cjs/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/avatar/Avatar.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';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { UserIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype SizeType = AvatarProps['size'];\ntype StatusType = NonNullable<AvatarProps['status']>;\n\ninterface CircleProperties {\n  /** Center coordinates of the circles */\n  cxAndCy: number;\n  /** Diameter of the circles */\n  diameter: number;\n  /** Radius of the inner circle */\n  rInner: number;\n  /** Radius of the outer circle */\n  rOuter: number;\n}\n\nfunction circleSizeFactory(size: SizeType): CircleProperties {\n  switch (size) {\n    case 'x-small':\n    case 'small':\n    case 'medium':\n      return {\n        cxAndCy: 4.5,\n        diameter: 9,\n        rInner: 3,\n        rOuter: 4.5,\n      };\n    case 'large':\n    case 'x-large':\n    default:\n      return {\n        cxAndCy: 6,\n        diameter: 12,\n        rInner: 4,\n        rOuter: 6,\n      };\n  }\n}\n\nfunction StatusIndicator({\n  size,\n  status,\n}: {\n  size: SizeType;\n  status: StatusType;\n}) {\n  const { cxAndCy, diameter, rInner, rOuter } = circleSizeFactory(size);\n  const statusClasses = `ndl-avatar-status ndl-avatar-status-${status}`;\n\n  return (\n    <div\n      className={statusClasses}\n      title={status.charAt(0).toUpperCase() + status.slice(1)}\n      role=\"presentation\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height={diameter}\n        width={diameter}\n        viewBox={`0 0 ${diameter} ${diameter}`}\n        fill=\"none\"\n      >\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={rOuter}\n          className=\"ndl-avatar-status-circle-outer\"\n        />\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={status === 'unknown' ? rInner - 1 : rInner}\n          className=\"ndl-avatar-status-circle-inner\"\n        />\n      </svg>\n    </div>\n  );\n}\n\ntype AvatarProps = {\n  /** Whether to display a status indicator */\n  hasStatus?: boolean;\n  /** Whether the avatar is disabled. When disabled, status indicators are hidden and `onClick` handlers are disabled when cast as a button */\n  isDisabled?: boolean;\n  /** The name associated with the avatar. Used for alt text and aria-label. For letters type, this text is displayed */\n  name?: string;\n  /** The shape of the avatar */\n  shape?: 'circle' | 'square';\n  /** The size of the avatar */\n  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\n  /** Source URI for the image. When provided with `type=\"image`\", displays the image */\n  source?: string;\n  /** The status to display. Only shown when `hasStatus` is `true` and component is not disabled */\n  status?: 'offline' | 'online' | 'unknown';\n  /** The type of avatar content. If `type=\"image\"` and no source is provided, automatically falls back to `icon` */\n  type?: 'icon' | 'image' | 'letters';\n} & (\n  | {\n      as: 'button';\n      onClick: () => void;\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\nexport const Avatar = <T extends React.ElementType = 'div'>({\n  as,\n  hasStatus = false,\n  isDisabled = false,\n  name,\n  shape = 'circle',\n  size = 'medium',\n  source,\n  status,\n  type: initialType = 'image',\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, AvatarProps>) => {\n  // If source is not provided, fallback to icon\n  const type =\n    initialType === 'image' && (source === undefined || source === '')\n      ? 'icon'\n      : initialType;\n\n  const Component: React.ElementType = as ?? 'div';\n  const isButton = Component === 'button';\n  const classes = classNames(\n    `ndl-avatar ndl-avatar-${shape} ndl-avatar-${size}`,\n    className,\n  );\n  const shapeClasses = classNames(\n    `ndl-avatar-shape ndl-avatar-${shape} ndl-avatar-${shape}-${size}`,\n    {\n      'ndl-avatar-disabled': isDisabled,\n    },\n  );\n\n  const typeClass = `ndl-avatar-${type}`;\n\n  const renderImageType = () => (\n    <>\n      <img data-testid=\"ndl-avatar-image\" src={source} alt={name} />\n      <div\n        data-testid=\"ndl-avatar-image-overlay\"\n        className={`${shapeClasses} ndl-avatar-image-overlay`}\n      />\n    </>\n  );\n\n  const renderIconType = () => <UserIconOutline />;\n\n  const renderLettersType = () => {\n    return (\n      <Typography variant=\"subheading-small\" className=\"ndl-avatar-typography\">\n        {name}\n      </Typography>\n    );\n  };\n\n  const TypeComponent =\n    type === 'image'\n      ? renderImageType()\n      : type === 'icon'\n        ? renderIconType()\n        : type === 'letters' && Boolean(name)\n          ? renderLettersType()\n          : null;\n\n  const isStatusIndicatorVisible =\n    hasStatus && !isDisabled && status !== undefined;\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      aria-hidden={!isButton}\n      {...(isButton && {\n        disabled: isDisabled,\n      })}\n      aria-label={`Avatar ${name}`}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className={classNames(shapeClasses, typeClass)}>{TypeComponent}</div>\n      {isStatusIndicatorVisible && (\n        <StatusIndicator size={size} status={status} />\n      )}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/avatar/Avatar.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';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { UserIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype SizeType = AvatarProps['size'];\ntype StatusType = NonNullable<AvatarProps['status']>;\n\ninterface CircleProperties {\n  /** Center coordinates of the circles */\n  cxAndCy: number;\n  /** Diameter of the circles */\n  diameter: number;\n  /** Radius of the inner circle */\n  rInner: number;\n  /** Radius of the outer circle */\n  rOuter: number;\n}\n\nfunction circleSizeFactory(size: SizeType): CircleProperties {\n  switch (size) {\n    case 'x-small':\n    case 'small':\n    case 'medium':\n      return {\n        cxAndCy: 4.5,\n        diameter: 9,\n        rInner: 3,\n        rOuter: 4.5,\n      };\n    case 'large':\n    case 'x-large':\n    default:\n      return {\n        cxAndCy: 6,\n        diameter: 12,\n        rInner: 4,\n        rOuter: 6,\n      };\n  }\n}\n\nfunction StatusIndicator({\n  size,\n  status,\n}: {\n  size: SizeType;\n  status: StatusType;\n}) {\n  const { cxAndCy, diameter, rInner, rOuter } = circleSizeFactory(size);\n  const statusClasses = `ndl-avatar-status ndl-avatar-status-${status}`;\n\n  return (\n    <div\n      className={statusClasses}\n      title={status.charAt(0).toUpperCase() + status.slice(1)}\n      role=\"presentation\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height={diameter}\n        width={diameter}\n        viewBox={`0 0 ${diameter} ${diameter}`}\n        fill=\"none\"\n      >\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={rOuter}\n          className=\"ndl-avatar-status-circle-outer\"\n        />\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={status === 'unknown' ? rInner - 1 : rInner}\n          className=\"ndl-avatar-status-circle-inner\"\n        />\n      </svg>\n    </div>\n  );\n}\n\ntype AvatarProps = {\n  /** Whether to display a status indicator */\n  hasStatus?: boolean;\n  /** Whether the avatar is disabled. When disabled, status indicators are hidden and `onClick` handlers are disabled when cast as a button */\n  isDisabled?: boolean;\n  /** The name associated with the avatar. Used for alt text and aria-label. For letters type, this text is displayed */\n  name?: string;\n  /** The shape of the avatar */\n  shape?: 'circle' | 'square';\n  /** The size of the avatar */\n  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\n  /** Source URI for the image. When provided with `type=\"image`\", displays the image */\n  source?: string;\n  /** The status to display. Only shown when `hasStatus` is `true` and component is not disabled */\n  status?: 'offline' | 'online' | 'unknown';\n  /** The type of avatar content. If `type=\"image\"` and no source is provided, automatically falls back to `icon` */\n  type?: 'icon' | 'image' | 'letters';\n} & (\n  | {\n      as: 'button';\n      onClick: () => void;\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\nconst getLettersDisplay = (displayName: string) => {\n  const words = displayName.trim().split(/\\s+/).filter(Boolean);\n  if (words.length <= 1) {\n    return displayName.trim();\n  }\n  return words\n    .map((word) => word.charAt(0))\n    .join('')\n    .toUpperCase();\n};\n\nexport const Avatar = <T extends React.ElementType = 'div'>({\n  as,\n  hasStatus = false,\n  isDisabled = false,\n  name,\n  shape = 'circle',\n  size = 'medium',\n  source,\n  status,\n  type: initialType = 'image',\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, AvatarProps>) => {\n  // If source is not provided, fallback to icon\n  const type =\n    initialType === 'image' && (source === undefined || source === '')\n      ? 'icon'\n      : initialType;\n\n  const Component: React.ElementType = as ?? 'div';\n  const isButton = Component === 'button';\n  const classes = classNames(\n    `ndl-avatar ndl-avatar-${shape} ndl-avatar-${size}`,\n    className,\n  );\n  const shapeClasses = classNames(\n    `ndl-avatar-shape ndl-avatar-${shape} ndl-avatar-${shape}-${size}`,\n    {\n      'ndl-avatar-disabled': isDisabled,\n    },\n  );\n\n  const typeClass = `ndl-avatar-${type}`;\n\n  const renderImageType = () => (\n    <>\n      <img data-testid=\"ndl-avatar-image\" src={source} alt={name} />\n      <div\n        data-testid=\"ndl-avatar-image-overlay\"\n        className={`${shapeClasses} ndl-avatar-image-overlay`}\n      />\n    </>\n  );\n\n  const renderIconType = () => <UserIconOutline />;\n\n  const renderLettersType = () => {\n    return (\n      <Typography variant=\"subheading-small\" className=\"ndl-avatar-typography\">\n        {getLettersDisplay(name ?? '')}\n      </Typography>\n    );\n  };\n\n  const TypeComponent =\n    type === 'image'\n      ? renderImageType()\n      : type === 'icon'\n        ? renderIconType()\n        : type === 'letters' && Boolean(name)\n          ? renderLettersType()\n          : null;\n\n  const isStatusIndicatorVisible =\n    hasStatus && !isDisabled && status !== undefined;\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      aria-hidden={!isButton}\n      {...(isButton && {\n        disabled: isDisabled,\n      })}\n      aria-label={`Avatar ${name}`}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className={classNames(shapeClasses, typeClass)}>{TypeComponent}</div>\n      {isStatusIndicatorVisible && (\n        <StatusIndicator size={size} status={status} />\n      )}\n    </Component>\n  );\n};\n"]}

package/lib/cjs/avatar/stories/avatar-types.story.js

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "KM" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "letters", name: "KM" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "image", name: "KM", source: "https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "icon", name: "Karl Morrison" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "letters", name: "Karl Morrison" }), (0, jsx_runtime_1.jsx)(react_1.Avatar, { type: "image", name: "Karl Morrison", source: "https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=avatar-types.story.js.map

package/lib/cjs/avatar/stories/avatar-types.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-types.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-types.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,EAChC,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAG,EACnC,uBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,MAAM,EAAC,uIAAuI,GAC9I,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar type=\"icon\" name=\"KM\" />\n      <Avatar type=\"letters\" name=\"KM\" />\n      <Avatar\n        type=\"image\"\n        name=\"KM\"\n        source=\"https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"avatar-types.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-types.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,uBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,EAC3C,uBAAC,cAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,GAAG,EAC9C,uBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,eAAe,EACpB,MAAM,EAAC,uIAAuI,GAC9I,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar type=\"icon\" name=\"Karl Morrison\" />\n      <Avatar type=\"letters\" name=\"Karl Morrison\" />\n      <Avatar\n        type=\"image\"\n        name=\"Karl Morrison\"\n        source=\"https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -111,6 +111,7 @@ const ConfirmationButton = (_a) => {
                 }
                 (_a = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(tooltipProps, open);
             }, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, { hasButtonWrapper: true, htmlAttributes: {
+                        'aria-label': content,
                         onBlur: handleCloseTooltip,
                         onFocus: handleOpenTooltip,
                         onMouseEnter: handleOpenTooltip,
@@ -152,7 +153,7 @@ const ClipboardButton = ({ textToCopy, isDisabled, size, tooltipProps, htmlAttri
                 },
                 type: 'clean-icon-button',
             };
-    return ((0, jsx_runtime_1.jsx)(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied" }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: htmlAttributes, children: type === 'outlined-button' && 'Copy' })));
+    return ((0, jsx_runtime_1.jsx)(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied" }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
 };
 exports.ClipboardButton = ClipboardButton;
 //# sourceMappingURL=ClipboardButton.js.map

package/lib/cjs/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';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\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  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        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            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>{content}</Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\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  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      {...props}\n      tooltipProps={tooltipProps}\n      className=\"n-gap-token-8\"\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={htmlAttributes}\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":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,kDAA0B;AAG1B,4DAAuD;AACvD,oCAA8C;AAC9C,gDAA4C;AAC5C,oCAAmD;AACnD,wDAAoD;AACpD,wCAAqC;AAmCrC,MAAM,kBAAkB,GAAG,CAAC,EAUF,EAAE,EAAE;QAVF,EAC1B,WAAW,EACX,kBAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,cAAc,EACd,YAAY,EACZ,IAAI,GAAG,mBAAmB,OAEF,EADrB,SAAS,cATc,8GAU3B,CADa;IAEZ,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YACvB,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC;QAED,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC1C,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,YAAY,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC;IACtE,gEAAgE;IAEhE,IAAI,IAAI,KAAK,mBAAmB,EAAE,CAAC;QACjC,OAAO,CACL,uBAAC,mCAAe,oBAEZ,SAGD,CAAC,oBAAoB,IACtB,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE;gBACZ,IAAI,kCACC,YAAY,KACf,MAAM,EAAE,MAAM,IAAI,SAAS,KAAK,IAAI,GACrC;gBACD,OAAO,EAAE;oBACP,cAAc,EAAE;wBACd,MAAM,EAAE,kBAAkB;wBAC1B,OAAO,EAAE,iBAAiB;wBAC1B,YAAY,EAAE,iBAAiB;wBAC/B,YAAY,EAAE,kBAAkB;qBACjC;iBACF;aACF,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,IAAI,OAAO,EAAE,CAAC;oBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC;gBACD,WAAW,EAAE,CAAC;YAChB,CAAC,EACD,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,cAAc,EAAE,cAAc,YAE7B,IAAI,IACW,CACnB,CAAC;IACJ,CAAC;SAAM,IAAI,IAAI,KAAK,aAAa,EAAE,CAAC;QAClC,OAAO,CACL,uBAAC,wBAAU,oBAEP,SAGD,CAAC,eAAe,IACjB,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE;gBACZ,IAAI,kCACC,YAAY,KACf,MAAM,EAAE,MAAM,IAAI,SAAS,KAAK,IAAI,GACrC;gBACD,OAAO,EAAE;oBACP,cAAc,EAAE;wBACd,MAAM,EAAE,kBAAkB;wBAC1B,OAAO,EAAE,iBAAiB;wBAC1B,YAAY,EAAE,iBAAiB;wBAC/B,YAAY,EAAE,kBAAkB;qBACjC;iBACF;aACF,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,IAAI,OAAO,EAAE,CAAC;oBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC;gBACD,WAAW,EAAE,CAAC;YAChB,CAAC,EACD,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,cAAc,EAAE,cAAc,YAE7B,IAAI,IACM,CACd,CAAC;IACJ,CAAC;SAAM,IAAI,IAAI,KAAK,iBAAiB,EAAE,CAAC;QACtC,OAAO,CACL,wBAAC,iBAAO,kBACN,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,IAAI,SAAS,KAAK,IAAI,IAChC,YAAY,IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;;gBACrB,IAAI,IAAI,EAAE,CAAC;oBACT,iBAAiB,EAAE,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,kBAAkB,EAAE,CAAC;gBACvB,CAAC;gBACD,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,6DAAG,IAAI,CAAC,CAAC;YACrC,CAAC,aAED,uBAAC,iBAAO,CAAC,OAAO,IACd,gBAAgB,QAChB,cAAc,EAAE;wBACd,YAAY,EAAE,OAAO;wBACrB,MAAM,EAAE,kBAAkB;wBAC1B,OAAO,EAAE,iBAAiB;wBAC1B,YAAY,EAAE,iBAAiB;wBAC/B,YAAY,EAAE,kBAAkB;qBACjC,YAED,uBAAC,gCAAc,kBACb,OAAO,EAAC,SAAS,IAEf,SAGD,CAAC,WAAW,IACb,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;4BACjB,IAAI,OAAO,EAAE,CAAC;gCACZ,OAAO,CAAC,KAAK,CAAC,CAAC;4BACjB,CAAC;4BACD,WAAW,EAAE,CAAC;wBAChB,CAAC,EACD,aAAa,EAAE,IAAI,EACnB,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,cAAc,EAAE,cAAc,YAE7B,QAAQ,IACM,GACD,EAClB,uBAAC,iBAAO,CAAC,OAAO,cAAE,OAAO,GAAmB,KACpC,CACX,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAYK,MAAM,eAAe,GAAG,CAAC,EAC9B,UAAU,EACV,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,IAAI,GACiB,EAAE,EAAE;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC,GAAG,IAAA,0BAAkB,GAAE,CAAC;IAE9C,MAAM,gBAAgB,GAAG,IAAI,KAAK,iBAAiB,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,KAAK,aAAa,CAAC;IAE5C,MAAM,KAAK,GAAG,gBAAgB;QAC5B,CAAC,CAAC;YACE,mBAAmB,EAAE;gBACnB,UAAU;gBACV,IAAI;aACL;YACD,IAAI,EAAE,iBAA0B;SACjC;QACH,CAAC,CAAC,YAAY;YACZ,CAAC,CAAC;gBACE,eAAe,EAAE;oBACf,WAAW,EAAE,mBAAmB;oBAChC,UAAU;oBACV,IAAI;iBACL;gBACD,IAAI,EAAE,aAAsB;aAC7B;YACH,CAAC,CAAC;gBACE,oBAAoB,EAAE;oBACpB,WAAW,EAAE,mBAAmB;oBAChC,UAAU;oBACV,IAAI;iBACL;gBACD,IAAI,EAAE,mBAA4B;aACnC,CAAC;IAER,OAAO,CACL,uBAAC,kBAAkB,kBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EACvC,WAAW,EAAC,mBAAmB,EAC/B,kBAAkB,EAAC,QAAQ,IACvB,KAAK,IACT,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,eAAe,EACzB,IAAI,EAAE,uBAAC,+BAAuB,IAAC,SAAS,EAAC,cAAc,GAAG,EAC1D,cAAc,kBACZ,WAAW,EAAE,QAAQ,IAClB,cAAc,aAGlB,IAAI,KAAK,iBAAiB,IAAI,MAAM,IAClB,CACtB,CAAC;AACJ,CAAC,CAAC;AAxDW,QAAA,eAAe,mBAwD1B","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';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\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  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        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>{content}</Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\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  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      {...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"]}

package/lib/esm/avatar/Avatar.js

@@ -60,6 +60,16 @@ function StatusIndicator({ size, status, }) {
     const statusClasses = `ndl-avatar-status ndl-avatar-status-${status}`;
     return (_jsx("div", { className: statusClasses, title: status.charAt(0).toUpperCase() + status.slice(1), role: "presentation", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", height: diameter, width: diameter, viewBox: `0 0 ${diameter} ${diameter}`, fill: "none", children: [_jsx("circle", { cx: cxAndCy, cy: cxAndCy, r: rOuter, className: "ndl-avatar-status-circle-outer" }), _jsx("circle", { cx: cxAndCy, cy: cxAndCy, r: status === 'unknown' ? rInner - 1 : rInner, className: "ndl-avatar-status-circle-inner" })] }) }));
 }
+const getLettersDisplay = (displayName) => {
+    const words = displayName.trim().split(/\s+/).filter(Boolean);
+    if (words.length <= 1) {
+        return displayName.trim();
+    }
+    return words
+        .map((word) => word.charAt(0))
+        .join('')
+        .toUpperCase();
+};
 export const Avatar = (_a) => {
     var { as, hasStatus = false, isDisabled = false, name, shape = 'circle', size = 'medium', source, status, type: initialType = 'image', className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "hasStatus", "isDisabled", "name", "shape", "size", "source", "status", "type", "className", "style", "htmlAttributes", "ref"]);
     // If source is not provided, fallback to icon
@@ -76,7 +86,7 @@ export const Avatar = (_a) => {
     const renderImageType = () => (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "ndl-avatar-image", src: source, alt: name }), _jsx("div", { "data-testid": "ndl-avatar-image-overlay", className: `${shapeClasses} ndl-avatar-image-overlay` })] }));
     const renderIconType = () => _jsx(UserIconOutline, {});
     const renderLettersType = () => {
-        return (_jsx(Typography, { variant: "subheading-small", className: "ndl-avatar-typography", children: name }));
+        return (_jsx(Typography, { variant: "subheading-small", className: "ndl-avatar-typography", children: getLettersDisplay(name !== null && name !== void 0 ? name : '') }));
     };
     const TypeComponent = type === 'image'
         ? renderImageType()

package/lib/esm/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/avatar/Avatar.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';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { UserIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype SizeType = AvatarProps['size'];\ntype StatusType = NonNullable<AvatarProps['status']>;\n\ninterface CircleProperties {\n  /** Center coordinates of the circles */\n  cxAndCy: number;\n  /** Diameter of the circles */\n  diameter: number;\n  /** Radius of the inner circle */\n  rInner: number;\n  /** Radius of the outer circle */\n  rOuter: number;\n}\n\nfunction circleSizeFactory(size: SizeType): CircleProperties {\n  switch (size) {\n    case 'x-small':\n    case 'small':\n    case 'medium':\n      return {\n        cxAndCy: 4.5,\n        diameter: 9,\n        rInner: 3,\n        rOuter: 4.5,\n      };\n    case 'large':\n    case 'x-large':\n    default:\n      return {\n        cxAndCy: 6,\n        diameter: 12,\n        rInner: 4,\n        rOuter: 6,\n      };\n  }\n}\n\nfunction StatusIndicator({\n  size,\n  status,\n}: {\n  size: SizeType;\n  status: StatusType;\n}) {\n  const { cxAndCy, diameter, rInner, rOuter } = circleSizeFactory(size);\n  const statusClasses = `ndl-avatar-status ndl-avatar-status-${status}`;\n\n  return (\n    <div\n      className={statusClasses}\n      title={status.charAt(0).toUpperCase() + status.slice(1)}\n      role=\"presentation\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height={diameter}\n        width={diameter}\n        viewBox={`0 0 ${diameter} ${diameter}`}\n        fill=\"none\"\n      >\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={rOuter}\n          className=\"ndl-avatar-status-circle-outer\"\n        />\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={status === 'unknown' ? rInner - 1 : rInner}\n          className=\"ndl-avatar-status-circle-inner\"\n        />\n      </svg>\n    </div>\n  );\n}\n\ntype AvatarProps = {\n  /** Whether to display a status indicator */\n  hasStatus?: boolean;\n  /** Whether the avatar is disabled. When disabled, status indicators are hidden and `onClick` handlers are disabled when cast as a button */\n  isDisabled?: boolean;\n  /** The name associated with the avatar. Used for alt text and aria-label. For letters type, this text is displayed */\n  name?: string;\n  /** The shape of the avatar */\n  shape?: 'circle' | 'square';\n  /** The size of the avatar */\n  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\n  /** Source URI for the image. When provided with `type=\"image`\", displays the image */\n  source?: string;\n  /** The status to display. Only shown when `hasStatus` is `true` and component is not disabled */\n  status?: 'offline' | 'online' | 'unknown';\n  /** The type of avatar content. If `type=\"image\"` and no source is provided, automatically falls back to `icon` */\n  type?: 'icon' | 'image' | 'letters';\n} & (\n  | {\n      as: 'button';\n      onClick: () => void;\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\nexport const Avatar = <T extends React.ElementType = 'div'>({\n  as,\n  hasStatus = false,\n  isDisabled = false,\n  name,\n  shape = 'circle',\n  size = 'medium',\n  source,\n  status,\n  type: initialType = 'image',\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, AvatarProps>) => {\n  // If source is not provided, fallback to icon\n  const type =\n    initialType === 'image' && (source === undefined || source === '')\n      ? 'icon'\n      : initialType;\n\n  const Component: React.ElementType = as ?? 'div';\n  const isButton = Component === 'button';\n  const classes = classNames(\n    `ndl-avatar ndl-avatar-${shape} ndl-avatar-${size}`,\n    className,\n  );\n  const shapeClasses = classNames(\n    `ndl-avatar-shape ndl-avatar-${shape} ndl-avatar-${shape}-${size}`,\n    {\n      'ndl-avatar-disabled': isDisabled,\n    },\n  );\n\n  const typeClass = `ndl-avatar-${type}`;\n\n  const renderImageType = () => (\n    <>\n      <img data-testid=\"ndl-avatar-image\" src={source} alt={name} />\n      <div\n        data-testid=\"ndl-avatar-image-overlay\"\n        className={`${shapeClasses} ndl-avatar-image-overlay`}\n      />\n    </>\n  );\n\n  const renderIconType = () => <UserIconOutline />;\n\n  const renderLettersType = () => {\n    return (\n      <Typography variant=\"subheading-small\" className=\"ndl-avatar-typography\">\n        {name}\n      </Typography>\n    );\n  };\n\n  const TypeComponent =\n    type === 'image'\n      ? renderImageType()\n      : type === 'icon'\n        ? renderIconType()\n        : type === 'letters' && Boolean(name)\n          ? renderLettersType()\n          : null;\n\n  const isStatusIndicatorVisible =\n    hasStatus && !isDisabled && status !== undefined;\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      aria-hidden={!isButton}\n      {...(isButton && {\n        disabled: isDisabled,\n      })}\n      aria-label={`Avatar ${name}`}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className={classNames(shapeClasses, typeClass)}>{TypeComponent}</div>\n      {isStatusIndicatorVisible && (\n        <StatusIndicator size={size} status={status} />\n      )}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/avatar/Avatar.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';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { UserIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype SizeType = AvatarProps['size'];\ntype StatusType = NonNullable<AvatarProps['status']>;\n\ninterface CircleProperties {\n  /** Center coordinates of the circles */\n  cxAndCy: number;\n  /** Diameter of the circles */\n  diameter: number;\n  /** Radius of the inner circle */\n  rInner: number;\n  /** Radius of the outer circle */\n  rOuter: number;\n}\n\nfunction circleSizeFactory(size: SizeType): CircleProperties {\n  switch (size) {\n    case 'x-small':\n    case 'small':\n    case 'medium':\n      return {\n        cxAndCy: 4.5,\n        diameter: 9,\n        rInner: 3,\n        rOuter: 4.5,\n      };\n    case 'large':\n    case 'x-large':\n    default:\n      return {\n        cxAndCy: 6,\n        diameter: 12,\n        rInner: 4,\n        rOuter: 6,\n      };\n  }\n}\n\nfunction StatusIndicator({\n  size,\n  status,\n}: {\n  size: SizeType;\n  status: StatusType;\n}) {\n  const { cxAndCy, diameter, rInner, rOuter } = circleSizeFactory(size);\n  const statusClasses = `ndl-avatar-status ndl-avatar-status-${status}`;\n\n  return (\n    <div\n      className={statusClasses}\n      title={status.charAt(0).toUpperCase() + status.slice(1)}\n      role=\"presentation\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height={diameter}\n        width={diameter}\n        viewBox={`0 0 ${diameter} ${diameter}`}\n        fill=\"none\"\n      >\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={rOuter}\n          className=\"ndl-avatar-status-circle-outer\"\n        />\n        <circle\n          cx={cxAndCy}\n          cy={cxAndCy}\n          r={status === 'unknown' ? rInner - 1 : rInner}\n          className=\"ndl-avatar-status-circle-inner\"\n        />\n      </svg>\n    </div>\n  );\n}\n\ntype AvatarProps = {\n  /** Whether to display a status indicator */\n  hasStatus?: boolean;\n  /** Whether the avatar is disabled. When disabled, status indicators are hidden and `onClick` handlers are disabled when cast as a button */\n  isDisabled?: boolean;\n  /** The name associated with the avatar. Used for alt text and aria-label. For letters type, this text is displayed */\n  name?: string;\n  /** The shape of the avatar */\n  shape?: 'circle' | 'square';\n  /** The size of the avatar */\n  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';\n  /** Source URI for the image. When provided with `type=\"image`\", displays the image */\n  source?: string;\n  /** The status to display. Only shown when `hasStatus` is `true` and component is not disabled */\n  status?: 'offline' | 'online' | 'unknown';\n  /** The type of avatar content. If `type=\"image\"` and no source is provided, automatically falls back to `icon` */\n  type?: 'icon' | 'image' | 'letters';\n} & (\n  | {\n      as: 'button';\n      onClick: () => void;\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\nconst getLettersDisplay = (displayName: string) => {\n  const words = displayName.trim().split(/\\s+/).filter(Boolean);\n  if (words.length <= 1) {\n    return displayName.trim();\n  }\n  return words\n    .map((word) => word.charAt(0))\n    .join('')\n    .toUpperCase();\n};\n\nexport const Avatar = <T extends React.ElementType = 'div'>({\n  as,\n  hasStatus = false,\n  isDisabled = false,\n  name,\n  shape = 'circle',\n  size = 'medium',\n  source,\n  status,\n  type: initialType = 'image',\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, AvatarProps>) => {\n  // If source is not provided, fallback to icon\n  const type =\n    initialType === 'image' && (source === undefined || source === '')\n      ? 'icon'\n      : initialType;\n\n  const Component: React.ElementType = as ?? 'div';\n  const isButton = Component === 'button';\n  const classes = classNames(\n    `ndl-avatar ndl-avatar-${shape} ndl-avatar-${size}`,\n    className,\n  );\n  const shapeClasses = classNames(\n    `ndl-avatar-shape ndl-avatar-${shape} ndl-avatar-${shape}-${size}`,\n    {\n      'ndl-avatar-disabled': isDisabled,\n    },\n  );\n\n  const typeClass = `ndl-avatar-${type}`;\n\n  const renderImageType = () => (\n    <>\n      <img data-testid=\"ndl-avatar-image\" src={source} alt={name} />\n      <div\n        data-testid=\"ndl-avatar-image-overlay\"\n        className={`${shapeClasses} ndl-avatar-image-overlay`}\n      />\n    </>\n  );\n\n  const renderIconType = () => <UserIconOutline />;\n\n  const renderLettersType = () => {\n    return (\n      <Typography variant=\"subheading-small\" className=\"ndl-avatar-typography\">\n        {getLettersDisplay(name ?? '')}\n      </Typography>\n    );\n  };\n\n  const TypeComponent =\n    type === 'image'\n      ? renderImageType()\n      : type === 'icon'\n        ? renderIconType()\n        : type === 'letters' && Boolean(name)\n          ? renderLettersType()\n          : null;\n\n  const isStatusIndicatorVisible =\n    hasStatus && !isDisabled && status !== undefined;\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      aria-hidden={!isButton}\n      {...(isButton && {\n        disabled: isDisabled,\n      })}\n      aria-label={`Avatar ${name}`}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className={classNames(shapeClasses, typeClass)}>{TypeComponent}</div>\n      {isStatusIndicatorVisible && (\n        <StatusIndicator size={size} status={status} />\n      )}\n    </Component>\n  );\n};\n"]}

package/lib/esm/avatar/stories/avatar-types.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 { Avatar } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-gap-token-16", children: [_jsx(Avatar, { type: "icon", name: "KM" }), _jsx(Avatar, { type: "letters", name: "KM" }), _jsx(Avatar, { type: "image", name: "KM", source: "https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=" })] }));
+    return (_jsxs("div", { className: "n-flex n-gap-token-16", children: [_jsx(Avatar, { type: "icon", name: "Karl Morrison" }), _jsx(Avatar, { type: "letters", name: "Karl Morrison" }), _jsx(Avatar, { type: "image", name: "Karl Morrison", source: "https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=" })] }));
 };
 export default Component;
 //# sourceMappingURL=avatar-types.story.js.map

package/lib/esm/avatar/stories/avatar-types.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-types.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-types.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,EAChC,KAAC,MAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAG,EACnC,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,MAAM,EAAC,uIAAuI,GAC9I,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar type=\"icon\" name=\"KM\" />\n      <Avatar type=\"letters\" name=\"KM\" />\n      <Avatar\n        type=\"image\"\n        name=\"KM\"\n        source=\"https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"avatar-types.story.js","sourceRoot":"","sources":["../../../../src/avatar/stories/avatar-types.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,EAC3C,KAAC,MAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,GAAG,EAC9C,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,eAAe,EACpB,MAAM,EAAC,uIAAuI,GAC9I,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 { Avatar } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-gap-token-16\">\n      <Avatar type=\"icon\" name=\"Karl Morrison\" />\n      <Avatar type=\"letters\" name=\"Karl Morrison\" />\n      <Avatar\n        type=\"image\"\n        name=\"Karl Morrison\"\n        source=\"https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -105,6 +105,7 @@ const ConfirmationButton = (_a) => {
                 }
                 (_a = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(tooltipProps, open);
             }, children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, htmlAttributes: {
+                        'aria-label': content,
                         onBlur: handleCloseTooltip,
                         onFocus: handleOpenTooltip,
                         onMouseEnter: handleOpenTooltip,
@@ -146,6 +147,6 @@ export const ClipboardButton = ({ textToCopy, isDisabled, size, tooltipProps, ht
                 },
                 type: 'clean-icon-button',
             };
-    return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied" }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: _jsx(Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: htmlAttributes, children: type === 'outlined-button' && 'Copy' })));
+    return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied" }, 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' })));
 };
 //# 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';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\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  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        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            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>{content}</Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\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  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      {...props}\n      tooltipProps={tooltipProps}\n      className=\"n-gap-token-8\"\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={htmlAttributes}\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';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\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  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        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>{content}</Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\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  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      {...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"]}

package/lib/types/avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAiF/D,KAAK,WAAW,GAAG;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4IAA4I;IAC5I,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sHAAsH;IACtH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5D,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iGAAiG;IACjG,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1C,kHAAkH;IAClH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACrC,GAAG,CACA;IACE,EAAE,EAAE,QAAQ,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GACD;IACE,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,0IAezD,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,4CAyExC,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAiF/D,KAAK,WAAW,GAAG;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4IAA4I;IAC5I,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sHAAsH;IACtH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5D,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iGAAiG;IACjG,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1C,kHAAkH;IAClH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACrC,GAAG,CACA;IACE,EAAE,EAAE,QAAQ,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GACD;IACE,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,CACJ,CAAC;AAaF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,0IAezD,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,4CAyExC,CAAC"}

package/lib/types/clipboard-button/ClipboardButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton.d.ts","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAM7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAgMrC,UAAU,oBAAoB;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IAC1D,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,aAAa,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,GAAI,uEAO7B,oBAAoB,4CA8CtB,CAAC"}
+{"version":3,"file":"ClipboardButton.d.ts","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAM7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAiMrC,UAAU,oBAAoB;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IAC1D,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,aAAa,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,GAAI,uEAO7B,oBAAoB,4CAiDtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.7.1",
+  "version": "4.7.3",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -85,7 +85,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.7.0"
+    "@neo4j-ndl/base": "^4.7.1"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",