@neo4j-ndl/react 4.9.18 → 4.9.20

package/lib/esm/_common/ButtonSpinner.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import classNames from 'classnames';
+const RADIUS = 7;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const ARC_FRACTION = 0.25;
+export const ButtonSpinner = (_a) => {
+    var { loadingMessage, size = 'small', htmlAttributes } = _a, restProps = __rest(_a, ["loadingMessage", "size", "htmlAttributes"]);
+    const classes = classNames('ndl-btn-spin', {
+        'ndl-large': size === 'large',
+        'ndl-medium': size === 'medium',
+        'ndl-small': size === 'small',
+    });
+    return (_jsxs("div", Object.assign({ className: "ndl-btn-spinner-wrapper" }, restProps, htmlAttributes, { children: [_jsx("svg", { className: classes, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("circle", { cx: "8", cy: "8", r: RADIUS, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: `${CIRCUMFERENCE * ARC_FRACTION} ${CIRCUMFERENCE * (1 - ARC_FRACTION)}` }) }), _jsx("span", { className: "ndl-btn-spinner-text", role: "status", children: loadingMessage })] })));
+};
+//# sourceMappingURL=ButtonSpinner.js.map

package/lib/esm/_common/ButtonSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSpinner.js","sourceRoot":"","sources":["../../../src/_common/ButtonSpinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,MAAM,MAAM,GAAG,CAAC,CAAC;AACjB,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;AAC3C,MAAM,YAAY,GAAG,IAAI,CAAC;AAO1B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAKW,EAAE,EAAE;QALf,EAC5B,cAAc,EACd,IAAI,GAAG,OAAO,EACd,cAAc,OAEyB,EADpC,SAAS,cAJgB,4CAK7B,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,EAAE;QACzC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB,IAAK,SAAS,EAAM,cAAc,eACxE,cACE,SAAS,EAAE,OAAO,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,YAElB,iBACE,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAE,MAAM,EACT,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,eAAe,EAAE,GAAG,aAAa,GAAG,YAAY,IAAI,aAAa,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,EAAE,GACxF,GACE,EACN,eAAM,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAC,QAAQ,YACjD,cAAc,GACV,KACH,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\n\nimport { type CommonProps } from './types';\n\nconst RADIUS = 7;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\nconst ARC_FRACTION = 0.25;\n\ntype ButtonSpinnerProps = {\n  loadingMessage: string;\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport const ButtonSpinner = ({\n  loadingMessage,\n  size = 'small',\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', ButtonSpinnerProps>) => {\n  const classes = classNames('ndl-btn-spin', {\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-small': size === 'small',\n  });\n\n  return (\n    <div className=\"ndl-btn-spinner-wrapper\" {...restProps} {...htmlAttributes}>\n      <svg\n        className={classes}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r={RADIUS}\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeDasharray={`${CIRCUMFERENCE * ARC_FRACTION} ${CIRCUMFERENCE * (1 - ARC_FRACTION)}`}\n        />\n      </svg>\n      <span className=\"ndl-btn-spinner-text\" role=\"status\">\n        {loadingMessage}\n      </span>\n    </div>\n  );\n};\n"]}

package/lib/esm/button/ButtonBase.js

@@ -31,9 +31,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
-import { LoadingSpinner } from '../loading-spinner';
+import { ButtonSpinner } from '../_common/ButtonSpinner';
 export const ButtonBase = (_a) => {
-    var { as, buttonFill = 'filled', children, className, variant = 'primary', htmlAttributes, isDisabled = false, isFloating = false, isFluid = false, isLoading = false, leadingVisual, onClick, ref, size = 'medium', style, type = 'button' } = _a, restProps = __rest(_a, ["as", "buttonFill", "children", "className", "variant", "htmlAttributes", "isDisabled", "isFloating", "isFluid", "isLoading", "leadingVisual", "onClick", "ref", "size", "style", "type"]);
+    var { as, buttonFill = 'filled', children, className, variant = 'primary', htmlAttributes, isDisabled = false, isFloating = false, isFluid = false, isLoading = false, leadingVisual, onClick, ref, size = 'medium', style, type = 'button', 
+    // TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label
+    loadingMessage = 'Loading content' } = _a, restProps = __rest(_a, ["as", "buttonFill", "children", "className", "variant", "htmlAttributes", "isDisabled", "isFloating", "isFluid", "isLoading", "leadingVisual", "onClick", "ref", "size", "style", "type", "loadingMessage"]);
     const Component = as !== null && as !== void 0 ? as : 'button';
     const isInteractable = !isDisabled && !isLoading;
     const classes = classNames(className, 'ndl-btn', {
@@ -59,6 +61,6 @@ export const ButtonBase = (_a) => {
             onClick(e);
         }
     };
-    return (_jsx(Component, Object.assign({ type: type, onClick: handleClick, disabled: isDisabled, "aria-disabled": !isInteractable, className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: _jsxs("div", { className: "ndl-btn-inner", children: [isLoading && (_jsx("span", { className: "ndl-btn-spinner-wrapper", children: _jsx(LoadingSpinner, { size: size }) })), Boolean(leadingVisual) && (_jsx("div", { className: "ndl-btn-leading-element", children: leadingVisual })), Boolean(children) && (_jsx("span", { className: "ndl-btn-content", children: children }))] }) })));
+    return (_jsx(Component, Object.assign({ type: type, onClick: handleClick, disabled: isDisabled, "aria-disabled": !isInteractable, className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: _jsxs("div", { className: "ndl-btn-inner", children: [Boolean(leadingVisual) && (_jsx("div", { className: "ndl-btn-leading-element", children: leadingVisual })), Boolean(children) && (_jsx("span", { className: "ndl-btn-content", children: children })), isLoading && (_jsx(ButtonSpinner, { loadingMessage: loadingMessage, size: size }))] }) })));
 };
 //# sourceMappingURL=ButtonBase.js.map

package/lib/esm/button/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/button/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AA0DpD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAyC,EAkBtB,EAAE,EAAE;QAlBkB,EACjE,EAAE,EACF,UAAU,GAAG,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,aAAa,EACb,OAAO,EACP,GAAG,EACH,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,IAAI,GAAG,QAAQ,OAE4B,EADxC,SAAS,cAjBqD,0LAkBlE,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IAEpD,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,EAAE;QAC/C,cAAc,EAAE,UAAU;QAC1B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,OAAO;QACpB,aAAa,EAAE,SAAS;QACxB,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,IAAI;QACrB,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,UAAU;QACxC,CAAC,OAAO,OAAO,EAAE,CAAC,EAAE,OAAO;KAC5B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,CAAkD,EAAE,EAAE;QACzE,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,8EAA8E;YAC9E,yEAAyE;YACzE,iFAAiF;YACjF,4CAA4C;YAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,kBACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,UAAU,mBACL,CAAC,cAAc,EAC9B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,cAElB,eAAK,SAAS,EAAC,eAAe,aAC3B,SAAS,IAAI,CACZ,eAAM,SAAS,EAAC,yBAAyB,YACvC,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,GAAI,GACzB,CACR,EACA,OAAO,CAAC,aAAa,CAAC,IAAI,CACzB,cAAK,SAAS,EAAC,yBAAyB,YAAE,aAAa,GAAO,CAC/D,EACA,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,CACpD,IACG,IACI,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { LoadingSpinner } from '../loading-spinner';\n\n/**\n *\n * Types\n *\n */\n\ntype ButtonTypes = 'submit' | 'button' | 'reset';\nexport type ButtonSizes = 'small' | 'medium' | 'large';\nexport type ButtonVariants = 'primary' | 'danger' | 'neutral';\n\nexport type CommonButtonProps = {\n  children?: React.ReactNode;\n  /** Icon to display before the button content */\n  leadingVisual?: React.ReactNode;\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n  /** If the button is in disabled state */\n  isDisabled?: boolean;\n  /** If the button is fluid, it will take the full width of its container */\n  isFluid?: boolean;\n  /** Type of button */\n  type?: ButtonTypes;\n  /** Size of button */\n  size?: ButtonSizes;\n  /** onClick callback*/\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** onKeyDown callback */\n  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n} /**\n * If `as=\"a\"`, `href` is required and `target` is available.\n * For all other elements, these props are not present.\n */ & (\n  | {\n      as: 'a';\n      /** The URL to link to. Only applies when `as=\"a\"` */\n      href?: HtmlAttributes<'a'>['href'];\n      /**\n       * The target window for the link. Only applies when `as=\"a\"`.\n       * Not present or required for other element types.\n       */\n      target?: HtmlAttributes<'a'>['target'];\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\ntype ButtonBaseProps = CommonButtonProps & {\n  /** If the button is in floating state */\n  isFloating?: boolean;\n  /** variant of the button */\n  variant?: ButtonVariants;\n  /** fill of the button */\n  buttonFill?: 'filled' | 'outlined' | 'text';\n};\n\nexport const ButtonBase = <T extends React.ElementType = 'button'>({\n  as,\n  buttonFill = 'filled',\n  children,\n  className,\n  variant = 'primary',\n  htmlAttributes,\n  isDisabled = false,\n  isFloating = false,\n  isFluid = false,\n  isLoading = false,\n  leadingVisual,\n  onClick,\n  ref,\n  size = 'medium',\n  style,\n  type = 'button',\n  ...restProps\n}: PolymorphicCommonProps<T, ButtonBaseProps>) => {\n  const Component: React.ElementType = as ?? 'button';\n\n  const isInteractable = !isDisabled && !isLoading;\n\n  const classes = classNames(className, 'ndl-btn', {\n    'ndl-disabled': isDisabled,\n    'ndl-floating': isFloating,\n    'ndl-fluid': isFluid,\n    'ndl-loading': isLoading,\n    [`ndl-${size}`]: size,\n    [`ndl-${buttonFill}-button`]: buttonFill,\n    [`ndl-${variant}`]: variant,\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (!isInteractable) {\n      // By default, a <button /> element with disabled set to true will not get its\n      // on click handler called. To support the same behavior on <a /> tags we\n      // swallow the event here when disabled, since the <a /> tag with disabled set to\n      // true will have its onClick handler called\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <Component\n      type={type}\n      onClick={handleClick}\n      disabled={isDisabled}\n      aria-disabled={!isInteractable}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-btn-inner\">\n        {isLoading && (\n          <span className=\"ndl-btn-spinner-wrapper\">\n            <LoadingSpinner size={size} />\n          </span>\n        )}\n        {Boolean(leadingVisual) && (\n          <div className=\"ndl-btn-leading-element\">{leadingVisual}</div>\n        )}\n        {Boolean(children) && (\n          <span className=\"ndl-btn-content\">{children}</span>\n        )}\n      </div>\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/button/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAgEzD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAyC,EAoBtB,EAAE,EAAE;QApBkB,EACjE,EAAE,EACF,UAAU,GAAG,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,aAAa,EACb,OAAO,EACP,GAAG,EACH,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,IAAI,GAAG,QAAQ;IACf,oIAAoI;IACpI,cAAc,GAAG,iBAAiB,OAES,EADxC,SAAS,cAnBqD,4MAoBlE,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IACpD,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,EAAE;QAC/C,cAAc,EAAE,UAAU;QAC1B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,OAAO;QACpB,aAAa,EAAE,SAAS;QACxB,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,IAAI;QACrB,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,UAAU;QACxC,CAAC,OAAO,OAAO,EAAE,CAAC,EAAE,OAAO;KAC5B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,CAAkD,EAAE,EAAE;QACzE,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,8EAA8E;YAC9E,yEAAyE;YACzE,iFAAiF;YACjF,4CAA4C;YAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,kBACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,UAAU,mBACL,CAAC,cAAc,EAC9B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,cAElB,eAAK,SAAS,EAAC,eAAe,aAC3B,OAAO,CAAC,aAAa,CAAC,IAAI,CACzB,cAAK,SAAS,EAAC,yBAAyB,YAAE,aAAa,GAAO,CAC/D,EACA,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,CACpD,EACA,SAAS,IAAI,CACZ,KAAC,aAAa,IAAC,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI,CAC9D,IACG,IACI,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { ButtonSpinner } from '../_common/ButtonSpinner';\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\n\n/**\n *\n * Types\n *\n */\n\ntype ButtonTypes = 'submit' | 'button' | 'reset';\nexport type ButtonSizes = 'small' | 'medium' | 'large';\nexport type ButtonVariants = 'primary' | 'danger' | 'neutral';\n\nexport type CommonButtonProps = {\n  children?: React.ReactNode;\n  /** Icon to display before the button content */\n  leadingVisual?: React.ReactNode;\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n  /** If the button is in disabled state */\n  isDisabled?: boolean;\n  /** If the button is fluid, it will take the full width of its container */\n  isFluid?: boolean;\n  /** Type of button */\n  type?: ButtonTypes;\n  /** Size of button */\n  size?: ButtonSizes;\n  /** onClick callback*/\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** onKeyDown callback */\n  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  /** Accessible message for screen readers when the button is in a loading state */\n  loadingMessage?: string;\n} /**\n * If `as=\"a\"`, `href` is required and `target` is available.\n * For all other elements, these props are not present.\n */ & (\n  | {\n      as: 'a';\n      /** The URL to link to. Only applies when `as=\"a\"` */\n      href?: HtmlAttributes<'a'>['href'];\n      /**\n       * The target window for the link. Only applies when `as=\"a\"`.\n       * Not present or required for other element types.\n       */\n      target?: HtmlAttributes<'a'>['target'];\n    }\n  | {\n      as?: React.ElementType;\n    }\n);\n\ntype ButtonBaseProps = CommonButtonProps & {\n  /** If the button is in floating state */\n  isFloating?: boolean;\n  /** variant of the button */\n  variant?: ButtonVariants;\n  /** fill of the button */\n  buttonFill?: 'filled' | 'outlined' | 'text';\n};\n\nexport const ButtonBase = <T extends React.ElementType = 'button'>({\n  as,\n  buttonFill = 'filled',\n  children,\n  className,\n  variant = 'primary',\n  htmlAttributes,\n  isDisabled = false,\n  isFloating = false,\n  isFluid = false,\n  isLoading = false,\n  leadingVisual,\n  onClick,\n  ref,\n  size = 'medium',\n  style,\n  type = 'button',\n  // TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label\n  loadingMessage = 'Loading content',\n  ...restProps\n}: PolymorphicCommonProps<T, ButtonBaseProps>) => {\n  const Component: React.ElementType = as ?? 'button';\n  const isInteractable = !isDisabled && !isLoading;\n\n  const classes = classNames(className, 'ndl-btn', {\n    'ndl-disabled': isDisabled,\n    'ndl-floating': isFloating,\n    'ndl-fluid': isFluid,\n    'ndl-loading': isLoading,\n    [`ndl-${size}`]: size,\n    [`ndl-${buttonFill}-button`]: buttonFill,\n    [`ndl-${variant}`]: variant,\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (!isInteractable) {\n      // By default, a <button /> element with disabled set to true will not get its\n      // on click handler called. To support the same behavior on <a /> tags we\n      // swallow the event here when disabled, since the <a /> tag with disabled set to\n      // true will have its onClick handler called\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <Component\n      type={type}\n      onClick={handleClick}\n      disabled={isDisabled}\n      aria-disabled={!isInteractable}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-btn-inner\">\n        {Boolean(leadingVisual) && (\n          <div className=\"ndl-btn-leading-element\">{leadingVisual}</div>\n        )}\n        {Boolean(children) && (\n          <span className=\"ndl-btn-content\">{children}</span>\n        )}\n        {isLoading && (\n          <ButtonSpinner loadingMessage={loadingMessage} size={size} />\n        )}\n      </div>\n    </Component>\n  );\n};\n"]}

package/lib/esm/button/stories/button-loading.story.js

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { FilledButton } from '@neo4j-ndl/react';
 const Component = () => {
-    return _jsx(FilledButton, { isLoading: true, children: "Loading" });
+    return (_jsx(FilledButton, { isLoading: true, loadingMessage: "Loading", children: "Confirm" }));
 };
 export default Component;
 //# sourceMappingURL=button-loading.story.js.map

package/lib/esm/button/stories/button-loading.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-loading.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-loading.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,KAAC,YAAY,IAAC,SAAS,8BAAuB,CAAC;AACxD,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 { FilledButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return <FilledButton isLoading>Loading</FilledButton>;\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"button-loading.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-loading.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,YAAY,IAAC,SAAS,QAAC,cAAc,EAAC,SAAS,wBAEjC,CAChB,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 { FilledButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <FilledButton isLoading loadingMessage=\"Loading\">\n      Confirm\n    </FilledButton>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/clean-icon-button/stories/clean-icon-button-loading.story.js

@@ -23,7 +23,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { CleanIconButton } from '@neo4j-ndl/react';
 import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
 const Component = () => {
-    return (_jsx(CleanIconButton, { description: "Loading data...", isLoading: true, children: _jsx(MagnifyingGlassIconOutline, {}) }));
+    return (_jsx(CleanIconButton, { description: "Search", isLoading: true, loadingMessage: "Loading", children: _jsx(MagnifyingGlassIconOutline, {}) }));
 };
 export default Component;
 //# sourceMappingURL=clean-icon-button-loading.story.js.map

package/lib/esm/clean-icon-button/stories/clean-icon-button-loading.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"clean-icon-button-loading.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-loading.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,eAAe,IAAC,WAAW,EAAC,iBAAiB,EAAC,SAAS,kBACtD,KAAC,0BAA0B,KAAG,GACd,CACnB,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 { CleanIconButton } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <CleanIconButton description=\"Loading data...\" isLoading>\n      <MagnifyingGlassIconOutline />\n    </CleanIconButton>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"clean-icon-button-loading.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-loading.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,eAAe,IAAC,WAAW,EAAC,QAAQ,EAAC,SAAS,QAAC,cAAc,EAAC,SAAS,YACtE,KAAC,0BAA0B,KAAG,GACd,CACnB,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 { CleanIconButton } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <CleanIconButton description=\"Search\" isLoading loadingMessage=\"Loading\">\n      <MagnifyingGlassIconOutline />\n    </CleanIconButton>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -91,7 +91,7 @@ export const ColorPicker = forwardRef(function ColorPicker({ color, onChange, sw
                                 .finally(() => {
                                 setIsEyeDropperActiveState(false);
                             });
-                        }, description: "Pick color", children: _jsx(EyeDropperIconOutline, {}) })), _jsx(Hue, { className: "ndl-color-picker-hue", hue: hsva.h, onChange: (newHue) => {
+                        }, description: "Pick color from the screen with eye dropper tool", children: _jsx(EyeDropperIconOutline, {}) })), _jsx(Hue, { className: "ndl-color-picker-hue", hue: hsva.h, onChange: (newHue) => {
                             handleChange(Object.assign(Object.assign({}, hsva), { h: newHue.h }));
                         }, radius: tokens.borderRadius['lg'], pointer: (props) => (_jsx(Pointer, Object.assign({}, props, { hsva: {
                                 a: 1,

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n  type HexColor,\n  hexToHsva,\n  type HsvaColor,\n  hsvaToHex,\n  hsvaToRgba,\n  Hue,\n  type PointerProps,\n  type RgbaColor,\n  rgbaToHex,\n  rgbaToHsva,\n  Saturation,\n  validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\ntype ColorPickerProps = {\n  /** The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. */\n  color: HsvaColor | RgbaColor | HexColor;\n  /** Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. */\n  swatches?: (HsvaColor | RgbaColor | HexColor)[];\n  /** Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. */\n  shouldShowEyeDropper?: boolean;\n  /** Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. */\n  onChange: (newColor: {\n    hex: HexColor;\n    rgb: RgbaColor;\n    hsva: HsvaColor;\n  }) => void;\n  /** Additional class name to apply to the root color picker container. */\n  className?: string;\n  /** Additional inline styles to apply to the root color picker container. */\n  style?: React.CSSProperties;\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  function ColorPicker(\n    {\n      color,\n      onChange,\n      swatches = Object.values(tokens.graph).filter(validHex),\n      shouldShowEyeDropper = true,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n      useState(false);\n\n    const derivedHsva = useMemo(() => {\n      if (typeof color === 'string') {\n        return hexToHsva(color);\n      }\n      if (typeof color === 'object' && 'r' in color) {\n        return rgbaToHsva(color);\n      }\n      return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor;\n    }, [color]);\n\n    const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n    const [format, setFormat] = useState<{\n      label: string;\n      value: string;\n    }>({\n      label: 'Hex',\n      value: 'hex',\n    });\n\n    const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n    const handleChange = (hsva: HsvaColor) => {\n      setHsva(hsva);\n      const hex = hsvaToHex(hsva);\n      const rgb = hsvaToRgba(hsva);\n      onChange({\n        // used since typescript cannot infer the type of the color\n        hex: `#${hex.split('#')[1]}`,\n        hsva,\n        rgb,\n      });\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('ndl-color-picker', className)}\n        style={style}\n      >\n        <Saturation\n          hsva={hsva}\n          className=\"ndl-color-picker-saturation\"\n          onChange={(newColor) => {\n            handleChange({ ...hsva, ...newColor, a: hsva.a });\n          }}\n          pointer={({ left, top, ...props }) => (\n            <Pointer\n              left={left?.toString()}\n              top={top?.toString()}\n              {...props}\n              hsva={hsva}\n            />\n          )}\n          radius={tokens.borderRadius['lg']}\n        />\n        <Swatch\n          colors={swatches}\n          hsva={hsva}\n          onChange={(newColor) => {\n            handleChange(newColor);\n          }}\n        />\n\n        <div className=\"ndl-color-picker-hue-container\">\n          {isEyeDropperActive && (\n            <CleanIconButton\n              size=\"small\"\n              isActive={isEyeDropperActiveState}\n              onClick={() => {\n                setIsEyeDropperActiveState(true);\n                // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n                // Type assertion to handle the unknown type\n                // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n                const eyeDropper = new (window as any).EyeDropper();\n                eyeDropper\n                  .open()\n                  .then((result: { sRGBHex: string }) => {\n                    handleChange(hexToHsva(result.sRGBHex));\n                  })\n                  .catch((err: Error) => {\n                    console.error(err);\n                  })\n                  .finally(() => {\n                    setIsEyeDropperActiveState(false);\n                  });\n              }}\n              description=\"Pick color\"\n            >\n              <EyeDropperIconOutline />\n            </CleanIconButton>\n          )}\n          <Hue\n            className=\"ndl-color-picker-hue\"\n            hue={hsva.h}\n            onChange={(newHue) => {\n              handleChange({ ...hsva, h: newHue.h });\n            }}\n            radius={tokens.borderRadius['lg']}\n            pointer={(props) => (\n              <Pointer\n                {...props}\n                hsva={{\n                  a: 1,\n                  h: hsva.h,\n                  s: 100,\n                  v: 100,\n                }}\n              />\n            )}\n          />\n        </div>\n\n        <div className=\"ndl-color-picker-inputs\">\n          <Select\n            size=\"small\"\n            type=\"select\"\n            ariaLabel=\"Color format\"\n            style={{\n              flexShrink: 0,\n            }}\n            selectProps={{\n              isSearchable: false,\n              onChange: (newFormat) => {\n                if (!newFormat) {\n                  return;\n                }\n                setFormat({\n                  label: newFormat.label,\n                  value: newFormat.value,\n                });\n              },\n              options: [\n                {\n                  label: 'Hex',\n                  value: 'hex',\n                },\n                {\n                  label: 'RGB',\n                  value: 'rgb',\n                },\n              ],\n              value: { label: format.label, value: format.value },\n            }}\n          />\n          {format.value === 'hex' && (\n            <HexInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n          {format.value === 'rgb' && (\n            <RgbInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const [inputValue, setInputValue] = useState<string>(() =>\n    removeHashPrefix(hsvaToHex(hsva)),\n  );\n\n  // Update input value when hsva changes from outside\n  useEffect(() => {\n    setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n  }, [hsva]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = removeHashPrefix(e.target.value);\n\n    // Always update the input value for immediate feedback\n    setInputValue(value);\n\n    // Check if the input is a valid hex color (only 6 characters)\n    const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n    if (isValidHex) {\n      onChange(`#${value}`);\n    }\n  };\n\n  const hexValue = hsvaToHex(hsva);\n\n  return (\n    <TextInput\n      size=\"small\"\n      value={inputValue}\n      leadingElement={\n        <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n      }\n      onChange={handleChange}\n      isFluid\n      htmlAttributes={{\n        'aria-label': 'Hex color code',\n        maxLength: 6,\n        onCopy: (e) => {\n          e.preventDefault();\n          navigator.clipboard.writeText(hexValue);\n        },\n      }}\n    />\n  );\n};\n\nconst RgbInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const rgba = hsvaToRgba(hsva);\n  const [rgbValues, setRgbValues] = useState({\n    b: rgba.b,\n    g: rgba.g,\n    r: rgba.r,\n  });\n\n  // Update input values when hsva changes from outside\n  useEffect(() => {\n    const newRgba = hsvaToRgba(hsva);\n    setRgbValues({\n      b: newRgba.b,\n      g: newRgba.g,\n      r: newRgba.r,\n    });\n  }, [hsva]);\n\n  const handleChange = (\n    channel: 'r' | 'g' | 'b',\n    e: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const value = parseInt(e.target.value, 10);\n\n    // Validate the input is a number between 0-255\n    const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n    const newRgbValues = {\n      ...rgbValues,\n      [channel]: validValue,\n    };\n\n    setRgbValues(newRgbValues);\n\n    // Convert RGB to hex and call onChange\n    const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n    onChange(hexColor);\n  };\n\n  return (\n    <div className=\"ndl-color-picker-rgb-inputs\">\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.r.toString()}\n        onChange={(e) => handleChange('r', e)}\n        htmlAttributes={{\n          'aria-label': 'Red',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.g.toString()}\n        onChange={(e) => handleChange('g', e)}\n        htmlAttributes={{\n          'aria-label': 'Green',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.b.toString()}\n        onChange={(e) => handleChange('b', e)}\n        htmlAttributes={{\n          'aria-label': 'Blue',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n    </div>\n  );\n};\n\nconst Swatch = ({\n  colors,\n  onChange,\n  hsva,\n}: {\n  colors: (HsvaColor | RgbaColor | HexColor)[];\n  hsva: HsvaColor;\n  onChange: (newColor: HsvaColor) => void;\n}) => {\n  return (\n    <div className=\"ndl-color-picker-swatch\">\n      {colors.map((color) => {\n        const hexColor =\n          typeof color === 'string'\n            ? color\n            : typeof color === 'object' && 'r' in color\n              ? rgbaToHex(color)\n              : hsvaToHex(color);\n        const hsvaColor =\n          typeof color === 'string'\n            ? hexToHsva(color)\n            : 'r' in color\n              ? rgbaToHsva(color)\n              : color;\n\n        const isActive =\n          hsva.h === hsvaColor.h &&\n          hsva.s === hsvaColor.s &&\n          hsva.v === hsvaColor.v;\n\n        return (\n          <button\n            type=\"button\"\n            key={hexColor}\n            aria-label={hexColor}\n            className={classNames('ndl-color-picker-swatch-color', {\n              'ndl-color-picker-swatch-color-active': isActive,\n            })}\n            style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n            onClick={() => onChange(hsvaColor)}\n          />\n        );\n      })}\n    </div>\n  );\n};\nconst Pointer = ({\n  prefixCls,\n  left,\n  top,\n  hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n  const rgba = hsvaToRgba(hsva);\n  return (\n    <div\n      style={{\n        backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n        left,\n        top,\n      }}\n      className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n    />\n  );\n};\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAEL,SAAS,EAET,SAAS,EACT,UAAU,EACV,GAAG,EAGH,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,GACT,MAAM,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAqB1C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EACvD,oBAAoB,GAAG,IAAI,EAC3B,SAAS,EACT,KAAK,GACN,EACD,GAAG;IAEH,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GACzD,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElB,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;YAC9C,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,8BAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAM,KAAgB,KAAE,CAAC,EAAE,CAAC,GAAe,CAAC;IACvE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAY,WAAW,CAAC,CAAC;IAEzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAGjC;QACD,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,KAAK;KACb,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,YAAY,IAAI,MAAM,IAAI,oBAAoB,CAAC;IAE1E,MAAM,YAAY,GAAG,CAAC,IAAe,EAAE,EAAE;QACvC,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAC5B,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAC7B,QAAQ,CAAC;YACP,2DAA2D;YAC3D,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;YAC5B,IAAI;YACJ,GAAG;SACJ,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,EACpD,KAAK,EAAE,KAAK,aAEZ,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,6BAA6B,EACvC,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACrB,YAAY,+CAAM,IAAI,GAAK,QAAQ,KAAE,CAAC,EAAE,IAAI,CAAC,CAAC,IAAG,CAAC;gBACpD,CAAC,EACD,OAAO,EAAE,CAAC,EAAuB,EAAE,EAAE;wBAA3B,EAAE,IAAI,EAAE,GAAG,OAAY,EAAP,KAAK,cAArB,eAAuB,CAAF;oBAAO,OAAA,CACpC,KAAC,OAAO,kBACN,IAAI,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE,EACtB,GAAG,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,EAAE,IAChB,KAAK,IACT,IAAI,EAAE,IAAI,IACV,CACH,CAAA;iBAAA,EACD,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,EACF,KAAC,MAAM,IACL,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACrB,YAAY,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,GACD,EAEF,eAAK,SAAS,EAAC,gCAAgC,aAC5C,kBAAkB,IAAI,CACrB,KAAC,eAAe,IACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,0BAA0B,CAAC,IAAI,CAAC,CAAC;4BACjC,kIAAkI;4BAClI,4CAA4C;4BAC5C,8DAA8D;4BAC9D,MAAM,UAAU,GAAG,IAAK,MAAc,CAAC,UAAU,EAAE,CAAC;4BACpD,UAAU;iCACP,IAAI,EAAE;iCACN,IAAI,CAAC,CAAC,MAA2B,EAAE,EAAE;gCACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;4BAC1C,CAAC,CAAC;iCACD,KAAK,CAAC,CAAC,GAAU,EAAE,EAAE;gCACpB,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;4BACrB,CAAC,CAAC;iCACD,OAAO,CAAC,GAAG,EAAE;gCACZ,0BAA0B,CAAC,KAAK,CAAC,CAAC;4BACpC,CAAC,CAAC,CAAC;wBACP,CAAC,EACD,WAAW,EAAC,kDAAkD,YAE9D,KAAC,qBAAqB,KAAG,GACT,CACnB,EACD,KAAC,GAAG,IACF,SAAS,EAAC,sBAAsB,EAChC,GAAG,EAAE,IAAI,CAAC,CAAC,EACX,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;4BACnB,YAAY,iCAAM,IAAI,KAAE,CAAC,EAAE,MAAM,CAAC,CAAC,IAAG,CAAC;wBACzC,CAAC,EACD,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAClB,KAAC,OAAO,oBACF,KAAK,IACT,IAAI,EAAE;gCACJ,CAAC,EAAE,CAAC;gCACJ,CAAC,EAAE,IAAI,CAAC,CAAC;gCACT,CAAC,EAAE,GAAG;gCACN,CAAC,EAAE,GAAG;6BACP,IACD,CACH,GACD,IACE,EAEN,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE;4BACL,UAAU,EAAE,CAAC;yBACd,EACD,WAAW,EAAE;4BACX,YAAY,EAAE,KAAK;4BACnB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE;gCACtB,IAAI,CAAC,SAAS,EAAE,CAAC;oCACf,OAAO;gCACT,CAAC;gCACD,SAAS,CAAC;oCACR,KAAK,EAAE,SAAS,CAAC,KAAK;oCACtB,KAAK,EAAE,SAAS,CAAC,KAAK;iCACvB,CAAC,CAAC;4BACL,CAAC;4BACD,OAAO,EAAE;gCACP;oCACE,KAAK,EAAE,KAAK;oCACZ,KAAK,EAAE,KAAK;iCACb;gCACD;oCACE,KAAK,EAAE,KAAK;oCACZ,KAAK,EAAE,KAAK;iCACb;6BACF;4BACD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE;yBACpD,GACD,EACD,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,CACzB,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;4BACrB,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;wBACpC,CAAC,GACD,CACH,EACA,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,CACzB,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;4BACrB,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;wBACpC,CAAC,GACD,CACH,IACG,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AAEvE,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CACxD,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAClC,CAAC;IAEF,oDAAoD;IACpD,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE/C,uDAAuD;QACvD,aAAa,CAAC,KAAK,CAAC,CAAC;QAErB,8DAA8D;QAC9D,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAElD,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAEjC,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAU,EACjB,cAAc,EACZ,cAAK,SAAS,EAAC,mCAAmC,kBAAQ,EAE5D,QAAQ,EAAE,YAAY,EACtB,OAAO,QACP,cAAc,EAAE;YACd,YAAY,EAAE,gBAAgB;YAC9B,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAC1C,CAAC;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC;QACzC,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,CAAC,EAAE,IAAI,CAAC,CAAC;KACV,CAAC,CAAC;IAEH,qDAAqD;IACrD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QACjC,YAAY,CAAC;YACX,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,CAAC,EAAE,OAAO,CAAC,CAAC;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,YAAY,GAAG,CACnB,OAAwB,EACxB,CAAsC,EACtC,EAAE;QACF,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAE3C,+CAA+C;QAC/C,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;QAExE,MAAM,YAAY,mCACb,SAAS,KACZ,CAAC,OAAO,CAAC,EAAE,UAAU,GACtB,CAAC;QAEF,YAAY,CAAC,YAAY,CAAC,CAAC;QAE3B,uCAAuC;QACvC,MAAM,QAAQ,GAAG,IAAI,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;QAClK,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,6BAA6B,aAC1C,KAAC,SAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EACrC,cAAc,EAAE;oBACd,YAAY,EAAE,KAAK;oBACnB,GAAG,EAAE,KAAK;oBACV,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,QAAQ;iBACf,GACD,EACF,KAAC,SAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EACrC,cAAc,EAAE;oBACd,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,KAAK;oBACV,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,QAAQ;iBACf,GACD,EACF,KAAC,SAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EACrC,cAAc,EAAE;oBACd,YAAY,EAAE,MAAM;oBACpB,GAAG,EAAE,KAAK;oBACV,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,QAAQ;iBACf,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,QAAQ,EACR,IAAI,GAKL,EAAE,EAAE;IACH,OAAO,CACL,cAAK,SAAS,EAAC,yBAAyB,YACrC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACpB,MAAM,QAAQ,GACZ,OAAO,KAAK,KAAK,QAAQ;gBACvB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,GAAG,IAAI,KAAK;oBACzC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;oBAClB,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACzB,MAAM,SAAS,GACb,OAAO,KAAK,KAAK,QAAQ;gBACvB,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;gBAClB,CAAC,CAAC,GAAG,IAAI,KAAK;oBACZ,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC;oBACnB,CAAC,CAAC,KAAK,CAAC;YAEd,MAAM,QAAQ,GACZ,IAAI,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;gBACtB,IAAI,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;gBACtB,IAAI,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC;YAEzB,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBAED,QAAQ,EACpB,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE;oBACrD,sCAAsC,EAAE,QAAQ;iBACjD,CAAC,EACF,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,EAAE,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,IAN7B,QAAQ,CAOb,CACH,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,CAAC,EACf,SAAS,EACT,IAAI,EACJ,GAAG,EACH,IAAI,GAC+B,EAAE,EAAE;IACvC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9B,OAAO,CACL,cACE,KAAK,EAAE;YACL,eAAe,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG;YACnE,IAAI;YACJ,GAAG;SACJ,EACD,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,0BAA0B,CAAC,GAC5D,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n  type HexColor,\n  hexToHsva,\n  type HsvaColor,\n  hsvaToHex,\n  hsvaToRgba,\n  Hue,\n  type PointerProps,\n  type RgbaColor,\n  rgbaToHex,\n  rgbaToHsva,\n  Saturation,\n  validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\ntype ColorPickerProps = {\n  /** The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. */\n  color: HsvaColor | RgbaColor | HexColor;\n  /** Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. */\n  swatches?: (HsvaColor | RgbaColor | HexColor)[];\n  /** Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. */\n  shouldShowEyeDropper?: boolean;\n  /** Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. */\n  onChange: (newColor: {\n    hex: HexColor;\n    rgb: RgbaColor;\n    hsva: HsvaColor;\n  }) => void;\n  /** Additional class name to apply to the root color picker container. */\n  className?: string;\n  /** Additional inline styles to apply to the root color picker container. */\n  style?: React.CSSProperties;\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  function ColorPicker(\n    {\n      color,\n      onChange,\n      swatches = Object.values(tokens.graph).filter(validHex),\n      shouldShowEyeDropper = true,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n      useState(false);\n\n    const derivedHsva = useMemo(() => {\n      if (typeof color === 'string') {\n        return hexToHsva(color);\n      }\n      if (typeof color === 'object' && 'r' in color) {\n        return rgbaToHsva(color);\n      }\n      return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor;\n    }, [color]);\n\n    const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n    const [format, setFormat] = useState<{\n      label: string;\n      value: string;\n    }>({\n      label: 'Hex',\n      value: 'hex',\n    });\n\n    const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n    const handleChange = (hsva: HsvaColor) => {\n      setHsva(hsva);\n      const hex = hsvaToHex(hsva);\n      const rgb = hsvaToRgba(hsva);\n      onChange({\n        // used since typescript cannot infer the type of the color\n        hex: `#${hex.split('#')[1]}`,\n        hsva,\n        rgb,\n      });\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('ndl-color-picker', className)}\n        style={style}\n      >\n        <Saturation\n          hsva={hsva}\n          className=\"ndl-color-picker-saturation\"\n          onChange={(newColor) => {\n            handleChange({ ...hsva, ...newColor, a: hsva.a });\n          }}\n          pointer={({ left, top, ...props }) => (\n            <Pointer\n              left={left?.toString()}\n              top={top?.toString()}\n              {...props}\n              hsva={hsva}\n            />\n          )}\n          radius={tokens.borderRadius['lg']}\n        />\n        <Swatch\n          colors={swatches}\n          hsva={hsva}\n          onChange={(newColor) => {\n            handleChange(newColor);\n          }}\n        />\n\n        <div className=\"ndl-color-picker-hue-container\">\n          {isEyeDropperActive && (\n            <CleanIconButton\n              size=\"small\"\n              isActive={isEyeDropperActiveState}\n              onClick={() => {\n                setIsEyeDropperActiveState(true);\n                // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n                // Type assertion to handle the unknown type\n                // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n                const eyeDropper = new (window as any).EyeDropper();\n                eyeDropper\n                  .open()\n                  .then((result: { sRGBHex: string }) => {\n                    handleChange(hexToHsva(result.sRGBHex));\n                  })\n                  .catch((err: Error) => {\n                    console.error(err);\n                  })\n                  .finally(() => {\n                    setIsEyeDropperActiveState(false);\n                  });\n              }}\n              description=\"Pick color from the screen with eye dropper tool\"\n            >\n              <EyeDropperIconOutline />\n            </CleanIconButton>\n          )}\n          <Hue\n            className=\"ndl-color-picker-hue\"\n            hue={hsva.h}\n            onChange={(newHue) => {\n              handleChange({ ...hsva, h: newHue.h });\n            }}\n            radius={tokens.borderRadius['lg']}\n            pointer={(props) => (\n              <Pointer\n                {...props}\n                hsva={{\n                  a: 1,\n                  h: hsva.h,\n                  s: 100,\n                  v: 100,\n                }}\n              />\n            )}\n          />\n        </div>\n\n        <div className=\"ndl-color-picker-inputs\">\n          <Select\n            size=\"small\"\n            type=\"select\"\n            ariaLabel=\"Color format\"\n            style={{\n              flexShrink: 0,\n            }}\n            selectProps={{\n              isSearchable: false,\n              onChange: (newFormat) => {\n                if (!newFormat) {\n                  return;\n                }\n                setFormat({\n                  label: newFormat.label,\n                  value: newFormat.value,\n                });\n              },\n              options: [\n                {\n                  label: 'Hex',\n                  value: 'hex',\n                },\n                {\n                  label: 'RGB',\n                  value: 'rgb',\n                },\n              ],\n              value: { label: format.label, value: format.value },\n            }}\n          />\n          {format.value === 'hex' && (\n            <HexInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n          {format.value === 'rgb' && (\n            <RgbInput\n              hsva={hsva}\n              onChange={(newColor) => {\n                handleChange(hexToHsva(newColor));\n              }}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const [inputValue, setInputValue] = useState<string>(() =>\n    removeHashPrefix(hsvaToHex(hsva)),\n  );\n\n  // Update input value when hsva changes from outside\n  useEffect(() => {\n    setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n  }, [hsva]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = removeHashPrefix(e.target.value);\n\n    // Always update the input value for immediate feedback\n    setInputValue(value);\n\n    // Check if the input is a valid hex color (only 6 characters)\n    const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n    if (isValidHex) {\n      onChange(`#${value}`);\n    }\n  };\n\n  const hexValue = hsvaToHex(hsva);\n\n  return (\n    <TextInput\n      size=\"small\"\n      value={inputValue}\n      leadingElement={\n        <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n      }\n      onChange={handleChange}\n      isFluid\n      htmlAttributes={{\n        'aria-label': 'Hex color code',\n        maxLength: 6,\n        onCopy: (e) => {\n          e.preventDefault();\n          navigator.clipboard.writeText(hexValue);\n        },\n      }}\n    />\n  );\n};\n\nconst RgbInput = ({\n  hsva,\n  onChange,\n}: {\n  hsva: HsvaColor;\n  onChange: (newColor: string) => void;\n}) => {\n  const rgba = hsvaToRgba(hsva);\n  const [rgbValues, setRgbValues] = useState({\n    b: rgba.b,\n    g: rgba.g,\n    r: rgba.r,\n  });\n\n  // Update input values when hsva changes from outside\n  useEffect(() => {\n    const newRgba = hsvaToRgba(hsva);\n    setRgbValues({\n      b: newRgba.b,\n      g: newRgba.g,\n      r: newRgba.r,\n    });\n  }, [hsva]);\n\n  const handleChange = (\n    channel: 'r' | 'g' | 'b',\n    e: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const value = parseInt(e.target.value, 10);\n\n    // Validate the input is a number between 0-255\n    const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n    const newRgbValues = {\n      ...rgbValues,\n      [channel]: validValue,\n    };\n\n    setRgbValues(newRgbValues);\n\n    // Convert RGB to hex and call onChange\n    const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n    onChange(hexColor);\n  };\n\n  return (\n    <div className=\"ndl-color-picker-rgb-inputs\">\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.r.toString()}\n        onChange={(e) => handleChange('r', e)}\n        htmlAttributes={{\n          'aria-label': 'Red',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.g.toString()}\n        onChange={(e) => handleChange('g', e)}\n        htmlAttributes={{\n          'aria-label': 'Green',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n      <TextInput\n        size=\"small\"\n        className=\"ndl-color-picker-rgb-input\"\n        value={rgbValues.b.toString()}\n        onChange={(e) => handleChange('b', e)}\n        htmlAttributes={{\n          'aria-label': 'Blue',\n          max: '255',\n          min: '0',\n          type: 'number',\n        }}\n      />\n    </div>\n  );\n};\n\nconst Swatch = ({\n  colors,\n  onChange,\n  hsva,\n}: {\n  colors: (HsvaColor | RgbaColor | HexColor)[];\n  hsva: HsvaColor;\n  onChange: (newColor: HsvaColor) => void;\n}) => {\n  return (\n    <div className=\"ndl-color-picker-swatch\">\n      {colors.map((color) => {\n        const hexColor =\n          typeof color === 'string'\n            ? color\n            : typeof color === 'object' && 'r' in color\n              ? rgbaToHex(color)\n              : hsvaToHex(color);\n        const hsvaColor =\n          typeof color === 'string'\n            ? hexToHsva(color)\n            : 'r' in color\n              ? rgbaToHsva(color)\n              : color;\n\n        const isActive =\n          hsva.h === hsvaColor.h &&\n          hsva.s === hsvaColor.s &&\n          hsva.v === hsvaColor.v;\n\n        return (\n          <button\n            type=\"button\"\n            key={hexColor}\n            aria-label={hexColor}\n            className={classNames('ndl-color-picker-swatch-color', {\n              'ndl-color-picker-swatch-color-active': isActive,\n            })}\n            style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n            onClick={() => onChange(hsvaColor)}\n          />\n        );\n      })}\n    </div>\n  );\n};\nconst Pointer = ({\n  prefixCls,\n  left,\n  top,\n  hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n  const rgba = hsvaToRgba(hsva);\n  return (\n    <div\n      style={{\n        backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n        left,\n        top,\n      }}\n      className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n    />\n  );\n};\n"]}

package/lib/esm/dialog/stories/dialog-danger.story.js

@@ -26,7 +26,7 @@ const Component = (props) => {
     const [isOpen, setIsOpen] = useState(props.isOpen);
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, htmlAttributes: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, htmlAttributes: {
                     id: 'danger-dialog',
                 }, variant: "danger", children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Subtitle, { children: "This is a subtitle" }), _jsx(Dialog.Description, { children: "This is a description" }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };

package/lib/esm/dialog/stories/dialog-danger.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-danger.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-danger.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,eAAe;iBACpB,EACD,OAAO,EAAC,QAAQ,aAEhB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        htmlAttributes={{\n          id: 'danger-dialog',\n        }}\n        variant=\"danger\"\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dialog-danger.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-danger.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,eAAe;iBACpB,EACD,OAAO,EAAC,QAAQ,aAEhB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton\n          onClick={handleClick}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Open Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        htmlAttributes={{\n          id: 'danger-dialog',\n        }}\n        variant=\"danger\"\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dialog/stories/dialog-default.story.js

@@ -27,7 +27,7 @@ const Component = (props) => {
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
     const ref = useRef(null);
-    return (_jsxs("div", { ref: ref, className: "n-flex n-flex-col n-items-center n-justify-center n-relative n-h-[500px] n-w-full", children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, container: (ref === null || ref === void 0 ? void 0 : ref.current) || undefined, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Description, { children: "This is a description" }), _jsx(Dialog.Content, { children: "This is where you put your content" }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
+    return (_jsxs("div", { ref: ref, className: "n-flex n-flex-col n-items-center n-justify-center n-relative n-h-[500px] n-w-full", children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, container: (ref === null || ref === void 0 ? void 0 : ref.current) || undefined, htmlAttributes: { id: 'default-dialog' }, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Description, { children: "This is a description" }), _jsx(Dialog.Content, { children: "This is where you put your content" }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };
 export default Component;
 //# sourceMappingURL=dialog-default.story.js.map

package/lib/esm/dialog/stories/dialog-default.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-default.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,mFAAmF,aAE7F,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI,SAAS,aAEpC,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,KAAC,MAAM,CAAC,OAAO,qDAAoD,EACnE,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <div\n      ref={ref}\n      className=\"n-flex n-flex-col n-items-center n-justify-center n-relative n-h-[500px] n-w-full\"\n    >\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        container={ref?.current || undefined}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Content>This is where you put your content</Dialog.Content>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dialog-default.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,mFAAmF,aAE7F,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI,SAAS,EACpC,cAAc,EAAE,EAAE,EAAE,EAAE,gBAAgB,EAAE,aAExC,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,KAAC,MAAM,CAAC,OAAO,qDAAoD,EACnE,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <div\n      ref={ref}\n      className=\"n-flex n-flex-col n-items-center n-justify-center n-relative n-h-[500px] n-w-full\"\n    >\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton\n          onClick={handleClick}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Open Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        container={ref?.current || undefined}\n        htmlAttributes={{ id: 'default-dialog' }}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Content>This is where you put your content</Dialog.Content>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dialog/stories/dialog-image.story.js

@@ -27,7 +27,7 @@ const Component = (props) => {
     const [isOpen, setIsOpen] = useState(props.isOpen);
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { htmlAttributes: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), _jsxs(Dialog, { htmlAttributes: {
                     id: 'image-dialog',
                 }, onClose: handleClose, isOpen: isOpen, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Image, { src: DialogExample, alt: "Example image" }), _jsx(Dialog.Description, { children: "This is a description." }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };

package/lib/esm/dialog/stories/dialog-image.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-image.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-image.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAEvD,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,cAAc;iBACnB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,KAAK,IAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAC,eAAe,GAAG,EACxD,KAAC,MAAM,CAAC,WAAW,yCAA4C,EAC/D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nimport DialogExample from './assets/DialogExample.png';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{\n          id: 'image-dialog',\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Image src={DialogExample} alt=\"Example image\" />\n        <Dialog.Description>This is a description.</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dialog-image.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-image.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAEvD,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,MAAC,MAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,cAAc;iBACnB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,KAAK,IAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAC,eAAe,GAAG,EACxD,KAAC,MAAM,CAAC,WAAW,yCAA4C,EAC/D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nimport DialogExample from './assets/DialogExample.png';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton\n          onClick={handleClick}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Open Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{\n          id: 'image-dialog',\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Image src={DialogExample} alt=\"Example image\" />\n        <Dialog.Description>This is a description.</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dialog/stories/dialog-info.story.js

@@ -26,7 +26,7 @@ const Component = (props) => {
     const [isOpen, setIsOpen] = useState(props.isOpen);
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, htmlAttributes: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, htmlAttributes: {
                     id: 'info-dialog',
                 }, variant: "info", children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Subtitle, { children: "This is a subtitle" }), _jsx(Dialog.Description, { children: "This is a description" }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };

package/lib/esm/dialog/stories/dialog-info.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-info.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-info.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,aAAa;iBAClB,EACD,OAAO,EAAC,MAAM,aAEd,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        htmlAttributes={{\n          id: 'info-dialog',\n        }}\n        variant=\"info\"\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dialog-info.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-info.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,aAAa;iBAClB,EACD,OAAO,EAAC,MAAM,aAEd,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton\n          onClick={handleClick}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Open Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        htmlAttributes={{\n          id: 'info-dialog',\n        }}\n        variant=\"info\"\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dialog/stories/dialog-top-aligned.story.js

@@ -26,7 +26,7 @@ const Component = (props) => {
     const [isOpen, setIsOpen] = useState(props.isOpen);
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { htmlAttributes: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), _jsxs(Dialog, { htmlAttributes: {
                     id: 'top-aligned-dialog',
                 }, className: "n-align-top n-mt-token-16", onClose: handleClose, isOpen: isOpen, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Content, { children: "This is where you put your content" }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };

package/lib/esm/dialog/stories/dialog-top-aligned.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-top-aligned.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-top-aligned.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,oBAAoB;iBACzB,EACD,SAAS,EAAC,2BAA2B,EACrC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,OAAO,qDAAoD,EACnE,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{\n          id: 'top-aligned-dialog',\n        }}\n        className=\"n-align-top n-mt-token-16\"\n        onClose={handleClose}\n        isOpen={isOpen}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Content>This is where you put your content</Dialog.Content>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dialog-top-aligned.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-top-aligned.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,MAAC,MAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,oBAAoB;iBACzB,EACD,SAAS,EAAC,2BAA2B,EACrC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,OAAO,qDAAoD,EACnE,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton\n          onClick={handleClick}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Open Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{\n          id: 'top-aligned-dialog',\n        }}\n        className=\"n-align-top n-mt-token-16\"\n        onClose={handleClose}\n        isOpen={isOpen}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Content>This is where you put your content</Dialog.Content>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dialog/stories/dialog-variants.story.js

@@ -30,7 +30,7 @@ const Component = (props) => {
         setIsOpen((prev) => !prev);
     };
     const handleClose = () => setIsOpen(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "n-flex n-justify-center n-gap-token-16", children: [_jsx(FilledButton, { onClick: () => handleClick('info'), children: "Info Dialog" }), _jsx(FilledButton, { onClick: () => handleClick('warning'), children: "Warning Dialog" }), _jsx(FilledButton, { onClick: () => handleClick('danger'), children: "Danger Dialog" })] }), _jsxs(Dialog, { htmlAttributes: {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "n-flex n-justify-center n-gap-token-16", children: [_jsx(FilledButton, { onClick: () => handleClick('info'), htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Info Dialog" }), _jsx(FilledButton, { onClick: () => handleClick('warning'), htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Warning Dialog" }), _jsx(FilledButton, { onClick: () => handleClick('danger'), htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Danger Dialog" })] }), _jsxs(Dialog, { htmlAttributes: {
                     id: `${variant}-dialog`,
                 }, onClose: handleClose, isOpen: isOpen, variant: variant, children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Subtitle, { children: "This is a subtitle" }), _jsx(Dialog.Description, { children: "This is a description" }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };

package/lib/esm/dialog/stories/dialog-variants.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-variants.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-variants.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAEpC,SAAS,CAAC,CAAC;IACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,CAClB,OAAuD,EACvD,EAAE;QACF,UAAU,CAAC,OAAO,CAAC,CAAC;QACpB,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,4BAEjC,EACf,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,+BAEpC,EACf,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,8BAEnC,IACX,EACN,MAAC,MAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,GAAG,OAAO,SAAS;iBACxB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,aAEhB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [variant, setVariant] = useState<\n    React.ComponentProps<typeof Dialog>['variant'] | undefined\n  >(undefined);\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = (\n    variant: React.ComponentProps<typeof Dialog>['variant'],\n  ) => {\n    setVariant(variant);\n    setIsOpen((prev) => !prev);\n  };\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center n-gap-token-16\">\n        <FilledButton onClick={() => handleClick('info')}>\n          Info Dialog\n        </FilledButton>\n        <FilledButton onClick={() => handleClick('warning')}>\n          Warning Dialog\n        </FilledButton>\n        <FilledButton onClick={() => handleClick('danger')}>\n          Danger Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{\n          id: `${variant}-dialog`,\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n        variant={variant}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dialog-variants.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-variants.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAEpC,SAAS,CAAC,CAAC;IACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,CAClB,OAAuD,EACvD,EAAE;QACF,UAAU,CAAC,OAAO,CAAC,CAAC;QACpB,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,wCAAwC,aACrD,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAClC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EACrC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,+BAGhC,EACf,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EACpC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,8BAGhC,IACX,EACN,MAAC,MAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,GAAG,OAAO,SAAS;iBACxB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,aAEhB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [variant, setVariant] = useState<\n    React.ComponentProps<typeof Dialog>['variant'] | undefined\n  >(undefined);\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = (\n    variant: React.ComponentProps<typeof Dialog>['variant'],\n  ) => {\n    setVariant(variant);\n    setIsOpen((prev) => !prev);\n  };\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center n-gap-token-16\">\n        <FilledButton\n          onClick={() => handleClick('info')}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Info Dialog\n        </FilledButton>\n        <FilledButton\n          onClick={() => handleClick('warning')}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Warning Dialog\n        </FilledButton>\n        <FilledButton\n          onClick={() => handleClick('danger')}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Danger Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{\n          id: `${variant}-dialog`,\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n        variant={variant}\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dialog/stories/dialog-warning.story.js

@@ -26,7 +26,7 @@ const Component = (props) => {
     const [isOpen, setIsOpen] = useState(props.isOpen);
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, htmlAttributes: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), _jsxs(Dialog, { onClose: handleClose, isOpen: isOpen, htmlAttributes: {
                     id: 'warning-dialog',
                 }, variant: "warning", children: [_jsx(Dialog.Header, { children: "Header" }), _jsx(Dialog.Subtitle, { children: "This is a subtitle" }), _jsx(Dialog.Description, { children: "This is a description" }), _jsxs(Dialog.Actions, { children: [_jsx(OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), _jsx(FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };

package/lib/esm/dialog/stories/dialog-warning.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-warning.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-warning.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,gBAAgB;iBACrB,EACD,OAAO,EAAC,SAAS,aAEjB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        htmlAttributes={{\n          id: 'warning-dialog',\n        }}\n        variant=\"warning\"\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dialog-warning.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-warning.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,MAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,gBAAgB;iBACrB,EACD,OAAO,EAAC,SAAS,aAEjB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,QAAQ,qCAAqC,EACrD,KAAC,MAAM,CAAC,WAAW,wCAA2C,EAC9D,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,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 { Dialog, FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = (props: { isOpen: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton\n          onClick={handleClick}\n          htmlAttributes={{ 'aria-haspopup': 'dialog' }}\n        >\n          Open Dialog\n        </FilledButton>\n      </div>\n      <Dialog\n        onClose={handleClose}\n        isOpen={isOpen}\n        htmlAttributes={{\n          id: 'warning-dialog',\n        }}\n        variant=\"warning\"\n      >\n        <Dialog.Header>Header</Dialog.Header>\n        <Dialog.Subtitle>This is a subtitle</Dialog.Subtitle>\n        <Dialog.Description>This is a description</Dialog.Description>\n        <Dialog.Actions>\n          <OutlinedButton onClick={handleClose} variant=\"neutral\" size=\"medium\">\n            Secondary\n          </OutlinedButton>\n          <FilledButton onClick={handleClose} size=\"medium\">\n            Primary\n          </FilledButton>\n        </Dialog.Actions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dropdown-button/DropdownButton.js

@@ -31,6 +31,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
+import { ButtonSpinner } from '../_common/ButtonSpinner';
 import { ChevronDownIconOutline } from '../icons';
 /**
  *
@@ -40,18 +41,31 @@ import { ChevronDownIconOutline } from '../icons';
  *
  */
 export const DropdownButton = function DropdownButton(_a) {
-    var { as, children, size = 'medium', isDisabled = false, isFloating = false, leadingElement, isOpen = false, onClick, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "children", "size", "isDisabled", "isFloating", "leadingElement", "isOpen", "onClick", "className", "style", "htmlAttributes", "ref"]);
+    var { as, children, size = 'medium', isDisabled = false, isFloating = false, leadingElement, isOpen = false, onClick, className, style, htmlAttributes, ref, isLoading = false, loadingMessage = 'Loading' } = _a, restProps = __rest(_a, ["as", "children", "size", "isDisabled", "isFloating", "leadingElement", "isOpen", "onClick", "className", "style", "htmlAttributes", "ref", "isLoading", "loadingMessage"]);
+    const Component = as !== null && as !== void 0 ? as : 'button';
     const classes = classNames('ndl-dropdown-btn', className, {
         'ndl-disabled': isDisabled,
         'ndl-floating-btn': isFloating,
         'ndl-large': size === 'large',
+        'ndl-loading': isLoading,
         'ndl-medium': size === 'medium',
         'ndl-open': isOpen,
         'ndl-small': size === 'small',
     });
-    const Component = as !== null && as !== void 0 ? as : 'button';
-    return (_jsx(Component, Object.assign({ className: classes, disabled: isDisabled, onClick: onClick, "aria-expanded": isOpen, ref: ref, style: style }, restProps, htmlAttributes, { children: _jsxs("div", { className: "ndl-dropdown-btn-inner", children: [_jsxs("div", { className: "ndl-dropdown-btn-leading-wrapper", children: [leadingElement, _jsx("span", { className: "ndl-dropdown-btn-content", children: children })] }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-dropdown-button-icon', {
+    const isInteractable = !isDisabled && !isLoading;
+    const handleClick = (e) => {
+        // If the button is disabled or loading, we don't want to call the onClick handler. The loading is only aria-disabled, so we need this.
+        if (!isInteractable) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (_jsx(Component, Object.assign({ className: classes, disabled: isDisabled, "aria-disabled": !isInteractable, onClick: handleClick, "aria-expanded": isOpen, ref: ref, style: style }, restProps, htmlAttributes, { children: _jsxs("div", { className: "ndl-dropdown-btn-inner", children: [_jsxs("div", { className: "ndl-dropdown-btn-leading-wrapper", children: [leadingElement, _jsx("span", { className: "ndl-dropdown-btn-content", children: children })] }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-dropdown-button-icon', {
                         'ndl-dropdown-button-icon-open': isOpen,
-                    }) })] }) })));
+                    }) }), isLoading && (_jsx(ButtonSpinner, { loadingMessage: loadingMessage, size: size }))] }) })));
 };
 //# sourceMappingURL=DropdownButton.js.map