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

package/lib/cjs/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useEffect, useId, useState } from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { type ButtonBase } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { FilledButton } from '../filled-button';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { ExclamationTriangleIconSolid } from '../icons/generated/heroIcons/ExclamationTriangleIconSolid';\nimport { InformationCircleIconSolid } from '../icons/generated/heroIcons/InformationCircleIconSolid';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { Modal, ModalCloseReason } from '../modal';\nimport { OutlinedButton } from '../outlined-button';\nimport { TextButton } from '../text-button';\nimport { Typography } from '../typography';\nimport { DialogContext, useDialogContext } from './dialog-context';\nimport {\n  type DialogActionsProps,\n  DialogCloseReason,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogHeaderProps,\n  type DialogImageProps,\n  type DialogProps,\n  type DialogSubtitleProps,\n} from './dialog-types';\n\nconst convertCloseReason = (reason: ModalCloseReason): DialogCloseReason => {\n  const dialogReason = reason as unknown as DialogCloseReason;\n  if (Object.values(DialogCloseReason).includes(dialogReason)) {\n    return dialogReason;\n  }\n\n  throw new Error(`Unknown reason '${reason}' received from popup`);\n};\n/* Stroke width on regular icons is 1.5px */\nconst typeIcons: Record<\n  NonNullable<React.ComponentProps<typeof Dialog>['variant']>,\n  React.ReactNode\n> = {\n  danger: (\n    <ExclamationCircleIconSolid\n      htmlAttributes={{\n        'aria-hidden': undefined,\n        'aria-label': 'Danger',\n      }}\n    />\n  ),\n  info: (\n    <InformationCircleIconSolid\n      htmlAttributes={{\n        'aria-hidden': undefined,\n        'aria-label': 'Information',\n      }}\n    />\n  ),\n  warning: (\n    <ExclamationTriangleIconSolid\n      htmlAttributes={{\n        'aria-hidden': undefined,\n        'aria-label': 'Warning',\n      }}\n    />\n  ),\n};\n\nconst DialogComponent = ({\n  isOpen,\n  onClose,\n  children,\n  variant,\n  size,\n  container,\n  rootProps,\n  hasDisabledCloseButton = false,\n  htmlAttributes,\n  className,\n  style,\n  ref,\n  ...restProps\n}: CommonProps<'div', DialogProps>) => {\n  const generatedDescriptionId = useId();\n  const generatedHeaderId = useId();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>(\n    generatedDescriptionId,\n  );\n  const [headerId, setHeaderId] = useState<string | undefined>(\n    generatedHeaderId,\n  );\n\n  const handleCloseClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    onClose?.(event, DialogCloseReason.CLOSE_BUTTON_CLICK);\n  };\n\n  const handleClose = (\n    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    reason?: ModalCloseReason,\n  ) => {\n    // Dialog should not be closed when backdrop is clicked\n    if (reason === ModalCloseReason.BACKDROP_CLICK) {\n      return;\n    }\n\n    onClose?.(\n      event,\n      reason !== undefined ? convertCloseReason(reason) : undefined,\n    );\n  };\n\n  const hasHeaderChild = React.useMemo(() => {\n    const childrenArray = React.Children.toArray(children);\n    return childrenArray.some(\n      (child) => React.isValidElement(child) && child.type === Header,\n    );\n  }, [children]);\n\n  const hasDescriptionChild = React.useMemo(() => {\n    const childrenArray = React.Children.toArray(children);\n    return childrenArray.some(\n      (child) => React.isValidElement(child) && child.type === Description,\n    );\n  }, [children]);\n\n  const ariaLabelledBy =\n    htmlAttributes?.['aria-labelledby'] ??\n    (hasHeaderChild ? headerId : undefined);\n\n  const ariaDescribedBy =\n    htmlAttributes?.['aria-describedby'] ??\n    (hasDescriptionChild ? descriptionId : undefined);\n\n  const dialogRole =\n    variant === 'warning' || variant === 'danger' ? 'alertdialog' : 'dialog';\n\n  if (!isOpen) {\n    return null;\n  }\n\n  if (htmlAttributes?.['aria-label'] === undefined && !ariaLabelledBy) {\n    console.warn(\n      'The Dialog is missing aria-label and Header. Please add one of them for accessibility.',\n    );\n  }\n\n  const classes = classNames('ndl-dialog', className, {\n    'ndl-with-close-button': !hasDisabledCloseButton,\n    'ndl-with-icon': !!variant,\n  });\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={handleClose}\n      container={container}\n      rootProps={rootProps}\n      size={size}\n      htmlAttributes={{\n        ...htmlAttributes,\n        'aria-describedby': ariaDescribedBy,\n        'aria-labelledby': ariaLabelledBy,\n        role: dialogRole,\n      }}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n    >\n      <DialogContext.Provider\n        value={{\n          descriptionId,\n          headerId,\n          setDescriptionId,\n          setHeaderId,\n          variant,\n        }}\n      >\n        {!hasDisabledCloseButton && (\n          <CleanIconButton\n            size=\"medium\"\n            className=\"ndl-dialog-close\"\n            onClick={handleCloseClick}\n            description={null}\n            htmlAttributes={{\n              'aria-label': 'Close',\n              // TODO v5: remove data-testid\n              'data-testid': 'ndl-dialog-close',\n            }}\n          >\n            <XMarkIconOutline />\n          </CleanIconButton>\n        )}\n        <div className=\"ndl-dialog-content-wrapper\">\n          {variant && (\n            <div\n              className={`ndl-dialog-type-icon ndl-${variant}`}\n              // TODO v5: remove data-testid\n              data-testid=\"ndl-dialog-type-icon\"\n            >\n              {typeIcons[variant]}\n            </div>\n          )}\n          <div className=\"ndl-dialog-body\">{children}</div>\n        </div>\n      </DialogContext.Provider>\n    </Modal>\n  );\n};\n\nconst Actions = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogActionsProps>) => {\n  const { variant } = useDialogContext();\n  const classes = classNames('ndl-dialog-actions', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  let childrenToRender = children;\n\n  // For danger dialogs, we want to convert primary buttons to danger buttons by default\n  if (variant === 'danger') {\n    childrenToRender = React.Children.map(children, (element) => {\n      if (!React.isValidElement(element)) {\n        return;\n      }\n      if (\n        element.type === OutlinedButton ||\n        element.type === FilledButton ||\n        element.type === TextButton\n      ) {\n        const buttonElement = element as React.ReactElement<\n          React.ComponentProps<typeof ButtonBase>\n        >;\n\n        if (\n          buttonElement.props.variant === 'primary' ||\n          buttonElement.props.variant === undefined\n        ) {\n          return React.cloneElement(buttonElement, {\n            ...buttonElement.props,\n            variant: 'danger',\n          });\n        }\n      }\n      return element;\n    });\n  }\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {childrenToRender}\n    </Component>\n  );\n};\n\nconst Header = <T extends React.ElementType = 'span'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogHeaderProps>) => {\n  const { headerId, setHeaderId } = useDialogContext();\n  const classes = classNames('ndl-dialog-header', className);\n  const Component: React.ElementType = as ?? 'span';\n\n  useEffect(() => {\n    if (Boolean(htmlAttributes?.id) === true) {\n      setHeaderId?.(htmlAttributes?.id);\n    }\n  }, [htmlAttributes?.id, setHeaderId]);\n\n  return (\n    <Typography\n      as={Component}\n      className={classes}\n      ref={ref}\n      style={style}\n      variant=\"title-3\"\n      {...restProps}\n      htmlAttributes={{ ...htmlAttributes, id: headerId }}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Subtitle = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogSubtitleProps>) => {\n  const classes = classNames('ndl-dialog-subtitle', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Description = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogDescriptionProps>) => {\n  const { descriptionId, setDescriptionId } = useDialogContext();\n  const classes = classNames('ndl-dialog-description', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  useEffect(() => {\n    if (Boolean(htmlAttributes?.id) === true) {\n      setDescriptionId?.(htmlAttributes?.id);\n    }\n  }, [htmlAttributes?.id, setDescriptionId]);\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n      id={descriptionId}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Content = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogContentProps>) => {\n  const classes = classNames('ndl-dialog-content', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Image = ({\n  src,\n  alt,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'img', DialogImageProps>) => {\n  const classes = classNames('ndl-dialog-image', className);\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    />\n  );\n};\n\nconst Dialog = Object.assign(DialogComponent, {\n  Actions,\n  Content,\n  Description,\n  Header,\n  Image,\n  Subtitle,\n});\n\nexport { Dialog };\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport React, { useEffect, useId, useState } from 'react';\n\nimport {\n  type CommonProps,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { type ButtonBase } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { FilledButton } from '../filled-button';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { ExclamationTriangleIconSolid } from '../icons/generated/heroIcons/ExclamationTriangleIconSolid';\nimport { InformationCircleIconSolid } from '../icons/generated/heroIcons/InformationCircleIconSolid';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { Modal, ModalCloseReason } from '../modal';\nimport { OutlinedButton } from '../outlined-button';\nimport { TextButton } from '../text-button';\nimport { Typography } from '../typography';\nimport { DialogContext, useDialogContext } from './dialog-context';\nimport {\n  type DialogActionsProps,\n  DialogCloseReason,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogHeaderProps,\n  type DialogImageProps,\n  type DialogProps,\n  type DialogSubtitleProps,\n} from './dialog-types';\n\nconst convertCloseReason = (reason: ModalCloseReason): DialogCloseReason => {\n  const dialogReason = reason as unknown as DialogCloseReason;\n  if (Object.values(DialogCloseReason).includes(dialogReason)) {\n    return dialogReason;\n  }\n\n  throw new Error(`Unknown reason '${reason}' received from popup`);\n};\n/* Stroke width on regular icons is 1.5px */\nconst typeIcons: Record<\n  NonNullable<React.ComponentProps<typeof Dialog>['variant']>,\n  React.ReactNode\n> = {\n  danger: (\n    <ExclamationCircleIconSolid\n      htmlAttributes={{\n        'aria-hidden': undefined,\n        'aria-label': 'Danger',\n      }}\n    />\n  ),\n  info: (\n    <InformationCircleIconSolid\n      htmlAttributes={{\n        'aria-hidden': undefined,\n        'aria-label': 'Information',\n      }}\n    />\n  ),\n  warning: (\n    <ExclamationTriangleIconSolid\n      htmlAttributes={{\n        'aria-hidden': undefined,\n        'aria-label': 'Warning',\n      }}\n    />\n  ),\n};\n\nconst DialogComponent = ({\n  isOpen,\n  onClose,\n  children,\n  variant,\n  size,\n  container,\n  rootProps,\n  hasDisabledCloseButton = false,\n  htmlAttributes,\n  className,\n  style,\n  ref,\n  ...restProps\n}: CommonProps<'div', DialogProps>) => {\n  const generatedDescriptionId = useId();\n  const generatedHeaderId = useId();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>(\n    generatedDescriptionId,\n  );\n  const [headerId, setHeaderId] = useState<string | undefined>(\n    generatedHeaderId,\n  );\n\n  const handleCloseClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    onClose?.(event, DialogCloseReason.CLOSE_BUTTON_CLICK);\n  };\n\n  const handleClose = (\n    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n    reason?: ModalCloseReason,\n  ) => {\n    // Dialog should not be closed when backdrop is clicked\n    if (reason === ModalCloseReason.BACKDROP_CLICK) {\n      return;\n    }\n\n    onClose?.(\n      event,\n      reason !== undefined ? convertCloseReason(reason) : undefined,\n    );\n  };\n\n  const hasHeaderChild = React.useMemo(() => {\n    const childrenArray = React.Children.toArray(children);\n    return childrenArray.some(\n      (child) => React.isValidElement(child) && child.type === Header,\n    );\n  }, [children]);\n\n  const hasDescriptionChild = React.useMemo(() => {\n    const childrenArray = React.Children.toArray(children);\n    return childrenArray.some(\n      (child) => React.isValidElement(child) && child.type === Description,\n    );\n  }, [children]);\n\n  const ariaLabelledBy =\n    htmlAttributes?.['aria-labelledby'] ??\n    (hasHeaderChild ? headerId : undefined);\n\n  const ariaDescribedBy =\n    htmlAttributes?.['aria-describedby'] ??\n    (hasDescriptionChild ? descriptionId : undefined);\n\n  const dialogRole =\n    variant === 'warning' || variant === 'danger' ? 'alertdialog' : 'dialog';\n\n  if (!isOpen) {\n    return null;\n  }\n\n  if (htmlAttributes?.['aria-label'] === undefined && !ariaLabelledBy) {\n    console.warn(\n      'The Dialog is missing aria-label and Header. Please add one of them for accessibility.',\n    );\n  }\n\n  const classes = classNames('ndl-dialog', className, {\n    'ndl-with-close-button': !hasDisabledCloseButton,\n    'ndl-with-icon': !!variant,\n  });\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={handleClose}\n      container={container}\n      rootProps={rootProps}\n      size={size}\n      htmlAttributes={{\n        ...htmlAttributes,\n        'aria-describedby': ariaDescribedBy,\n        'aria-labelledby': ariaLabelledBy,\n        role: dialogRole,\n      }}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n    >\n      <DialogContext.Provider\n        value={{\n          descriptionId,\n          headerId,\n          setDescriptionId,\n          setHeaderId,\n          variant,\n        }}\n      >\n        {!hasDisabledCloseButton && (\n          <CleanIconButton\n            size=\"medium\"\n            className=\"ndl-dialog-close\"\n            onClick={handleCloseClick}\n            description={null}\n            htmlAttributes={{\n              'aria-label': 'Close',\n              'data-testid': 'ndl-dialog-close',\n            }}\n          >\n            <XMarkIconOutline />\n          </CleanIconButton>\n        )}\n        <div className=\"ndl-dialog-content-wrapper\">\n          {variant && (\n            <div\n              data-testid=\"ndl-dialog-type-icon\"\n              className={`ndl-dialog-type-icon ndl-${variant}`}\n            >\n              {typeIcons[variant]}\n            </div>\n          )}\n          <div className=\"ndl-dialog-body\">{children}</div>\n        </div>\n      </DialogContext.Provider>\n    </Modal>\n  );\n};\n\nconst Actions = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogActionsProps>) => {\n  const { variant } = useDialogContext();\n  const classes = classNames('ndl-dialog-actions', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  let childrenToRender = children;\n\n  // For danger dialogs, we want to convert primary buttons to danger buttons by default\n  if (variant === 'danger') {\n    childrenToRender = React.Children.map(children, (element) => {\n      if (!React.isValidElement(element)) {\n        return;\n      }\n      if (\n        element.type === OutlinedButton ||\n        element.type === FilledButton ||\n        element.type === TextButton\n      ) {\n        const buttonElement = element as React.ReactElement<\n          React.ComponentProps<typeof ButtonBase>\n        >;\n\n        if (\n          buttonElement.props.variant === 'primary' ||\n          buttonElement.props.variant === undefined\n        ) {\n          return React.cloneElement(buttonElement, {\n            ...buttonElement.props,\n            variant: 'danger',\n          });\n        }\n      }\n      return element;\n    });\n  }\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {childrenToRender}\n    </Component>\n  );\n};\n\nconst Header = <T extends React.ElementType = 'span'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogHeaderProps>) => {\n  const { headerId, setHeaderId } = useDialogContext();\n  const classes = classNames('ndl-dialog-header', className);\n  const Component: React.ElementType = as ?? 'span';\n\n  useEffect(() => {\n    if (Boolean(htmlAttributes?.id) === true) {\n      setHeaderId?.(htmlAttributes?.id);\n    }\n  }, [htmlAttributes?.id, setHeaderId]);\n\n  return (\n    <Typography\n      as={Component}\n      className={classes}\n      ref={ref}\n      style={style}\n      variant=\"title-3\"\n      {...restProps}\n      htmlAttributes={{ ...htmlAttributes, id: headerId }}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nconst Subtitle = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogSubtitleProps>) => {\n  const classes = classNames('ndl-dialog-subtitle', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Description = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogDescriptionProps>) => {\n  const { descriptionId, setDescriptionId } = useDialogContext();\n  const classes = classNames('ndl-dialog-description', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  useEffect(() => {\n    if (Boolean(htmlAttributes?.id) === true) {\n      setDescriptionId?.(htmlAttributes?.id);\n    }\n  }, [htmlAttributes?.id, setDescriptionId]);\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n      id={descriptionId}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Content = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DialogContentProps>) => {\n  const classes = classNames('ndl-dialog-content', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\nconst Image = ({\n  src,\n  alt,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'img', DialogImageProps>) => {\n  const classes = classNames('ndl-dialog-image', className);\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    />\n  );\n};\n\nconst Dialog = Object.assign(DialogComponent, {\n  Actions,\n  Content,\n  Description,\n  Header,\n  Image,\n  Subtitle,\n});\n\nexport { Dialog };\n"]}

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

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

package/lib/cjs/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,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,eAAe;iBACpB,EACD,OAAO,EAAC,QAAQ,aAEhB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"dialog-danger.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-danger.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,eAAe;iBACpB,EACD,OAAO,EAAC,QAAQ,aAEhB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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=\"flex 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/cjs/dialog/stories/dialog-default.story.js

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

package/lib/cjs/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,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAyC;AAEzC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,mFAAmF,aAE7F,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,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,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,uBAAC,cAAM,CAAC,OAAO,qDAAoD,EACnE,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"dialog-default.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAyC;AAEzC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,qEAAqE,aAE/E,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,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,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,uBAAC,cAAM,CAAC,OAAO,qDAAoD,EACnE,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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=\"flex flex-col items-center justify-center relative h-[500px] w-full\"\n    >\n      <div className=\"flex 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/cjs/dialog/stories/dialog-image.story.js

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

package/lib/cjs/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,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,mFAAuD;AAEvD,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,cAAc;iBACnB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,KAAK,IAAC,GAAG,EAAE,2BAAa,EAAE,GAAG,EAAC,eAAe,GAAG,EACxD,uBAAC,cAAM,CAAC,WAAW,yCAA4C,EAC/D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"dialog-image.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-image.story.tsx"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,mFAAuD;AAEvD,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,cAAc;iBACnB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,KAAK,IAAC,GAAG,EAAE,2BAAa,EAAE,GAAG,EAAC,eAAe,GAAG,EACxD,uBAAC,cAAM,CAAC,WAAW,yCAA4C,EAC/D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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=\"flex 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/cjs/dialog/stories/dialog-info.story.js

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

package/lib/cjs/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,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,aAAa;iBAClB,EACD,OAAO,EAAC,MAAM,aAEd,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"dialog-info.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-info.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,aAAa;iBAClB,EACD,OAAO,EAAC,MAAM,aAEd,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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=\"flex 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/cjs/dialog/stories/dialog-top-aligned.story.js

@@ -28,9 +28,9 @@ const Component = (props) => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(props.isOpen);
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-center", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { htmlAttributes: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, htmlAttributes: { 'aria-haspopup': 'dialog' }, children: "Open Dialog" }) }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { htmlAttributes: {
                     id: 'top-aligned-dialog',
-                }, className: "n-align-top n-mt-token-16", onClose: handleClose, isOpen: isOpen, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Header" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { children: "This is where you put your content" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Actions, { children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
+                }, className: "align-top mt-token-16", onClose: handleClose, isOpen: isOpen, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Header" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { children: "This is where you put your content" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Actions, { children: [(0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { onClick: handleClose, variant: "neutral", size: "medium", children: "Secondary" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClose, size: "medium", children: "Primary" })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=dialog-top-aligned.story.js.map

package/lib/cjs/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,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,oBAAoB;iBACzB,EACD,SAAS,EAAC,2BAA2B,EACrC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,OAAO,qDAAoD,EACnE,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"dialog-top-aligned.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-top-aligned.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,oBAAoB;iBACzB,EACD,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,aAEd,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,OAAO,qDAAoD,EACnE,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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=\"flex 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=\"align-top 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/cjs/dialog/stories/dialog-variants.story.js

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

package/lib/cjs/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,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAEpC,SAAS,CAAC,CAAC;IACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAClC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EACrC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,+BAGhC,EACf,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EACpC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,8BAGhC,IACX,EACN,wBAAC,cAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,GAAG,OAAO,SAAS;iBACxB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,aAEhB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"dialog-variants.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAEpC,SAAS,CAAC,CAAC;IACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAClC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,EACf,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EACrC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,+BAGhC,EACf,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EACpC,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,8BAGhC,IACX,EACN,wBAAC,cAAM,IACL,cAAc,EAAE;oBACd,EAAE,EAAE,GAAG,OAAO,SAAS;iBACxB,EACD,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,aAEhB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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=\"flex justify-center 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/cjs/dialog/stories/dialog-warning.story.js

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

package/lib/cjs/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,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,yBAAyB,YACtC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,gBAAgB;iBACrB,EACD,OAAO,EAAC,SAAS,aAEjB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"dialog-warning.story.js","sourceRoot":"","sources":["../../../../src/dialog/stories/dialog-warning.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwE;AACxE,iCAAiC;AAEjC,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,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,6DACE,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,oBAAY,IACX,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,4BAGhC,GACX,EACN,wBAAC,cAAM,IACL,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE;oBACd,EAAE,EAAE,gBAAgB;iBACrB,EACD,OAAO,EAAC,SAAS,aAEjB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,QAAQ,qCAAqC,EACrD,uBAAC,cAAM,CAAC,WAAW,wCAA2C,EAC9D,wBAAC,cAAM,CAAC,OAAO,eACb,uBAAC,sBAAc,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,0BAEpD,EACjB,uBAAC,oBAAY,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,wBAElC,IACA,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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=\"flex 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/cjs/dismissible-tag/stories/dismissible-tag-colors.story.js

@@ -27,7 +27,7 @@ const Component = () => {
     const handleRemove = () => {
         console.info('onRemove was called');
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "1", onRemove: handleRemove, children: "Categorical color 1" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "2", onRemove: handleRemove, children: "Categorical color 2" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "3", onRemove: handleRemove, children: "Categorical color 3" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "4", onRemove: handleRemove, children: "Categorical color 4" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "5", onRemove: handleRemove, children: "Categorical color 5" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "6", onRemove: handleRemove, children: "Categorical color 6" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "7", onRemove: handleRemove, children: "Categorical color 7" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "8", onRemove: handleRemove, children: "Categorical color 8" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "1", onRemove: handleRemove, children: "Categorical color 1" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "2", onRemove: handleRemove, children: "Categorical color 2" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "3", onRemove: handleRemove, children: "Categorical color 3" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "4", onRemove: handleRemove, children: "Categorical color 4" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "5", onRemove: handleRemove, children: "Categorical color 5" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "6", onRemove: handleRemove, children: "Categorical color 6" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "7", onRemove: handleRemove, children: "Categorical color 7" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "8", onRemove: handleRemove, children: "Categorical color 8" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=dismissible-tag-colors.story.js.map

package/lib/cjs/dismissible-tag/stories/dismissible-tag-colors.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible-tag-colors.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <DismissibleTag color=\"1\" onRemove={handleRemove}>\n        Categorical color 1\n      </DismissibleTag>\n      <DismissibleTag color=\"2\" onRemove={handleRemove}>\n        Categorical color 2\n      </DismissibleTag>\n      <DismissibleTag color=\"3\" onRemove={handleRemove}>\n        Categorical color 3\n      </DismissibleTag>\n      <DismissibleTag color=\"4\" onRemove={handleRemove}>\n        Categorical color 4\n      </DismissibleTag>\n      <DismissibleTag color=\"5\" onRemove={handleRemove}>\n        Categorical color 5\n      </DismissibleTag>\n      <DismissibleTag color=\"6\" onRemove={handleRemove}>\n        Categorical color 6\n      </DismissibleTag>\n      <DismissibleTag color=\"7\" onRemove={handleRemove}>\n        Categorical color 7\n      </DismissibleTag>\n      <DismissibleTag color=\"8\" onRemove={handleRemove}>\n        Categorical color 8\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dismissible-tag-colors.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"flex flex-col gap-token-16\">\n      <DismissibleTag color=\"1\" onRemove={handleRemove}>\n        Categorical color 1\n      </DismissibleTag>\n      <DismissibleTag color=\"2\" onRemove={handleRemove}>\n        Categorical color 2\n      </DismissibleTag>\n      <DismissibleTag color=\"3\" onRemove={handleRemove}>\n        Categorical color 3\n      </DismissibleTag>\n      <DismissibleTag color=\"4\" onRemove={handleRemove}>\n        Categorical color 4\n      </DismissibleTag>\n      <DismissibleTag color=\"5\" onRemove={handleRemove}>\n        Categorical color 5\n      </DismissibleTag>\n      <DismissibleTag color=\"6\" onRemove={handleRemove}>\n        Categorical color 6\n      </DismissibleTag>\n      <DismissibleTag color=\"7\" onRemove={handleRemove}>\n        Categorical color 7\n      </DismissibleTag>\n      <DismissibleTag color=\"8\" onRemove={handleRemove}>\n        Categorical color 8\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/dismissible-tag/stories/dismissible-tag-sizes.story.js

@@ -27,7 +27,7 @@ const Component = () => {
     const handleRemove = () => {
         console.info('onRemove was called');
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "x-small", onRemove: handleRemove, children: "X-Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "small", onRemove: handleRemove, children: "Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "medium", onRemove: handleRemove, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "large", onRemove: handleRemove, children: "Large" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "x-small", onRemove: handleRemove, children: "X-Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "small", onRemove: handleRemove, children: "Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "medium", onRemove: handleRemove, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "large", onRemove: handleRemove, children: "Large" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=dismissible-tag-sizes.story.js.map

package/lib/cjs/dismissible-tag/stories/dismissible-tag-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible-tag-sizes.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,sBAAc,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAE,YAAY,wBAEpC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,YAAY,uBAEnC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"n-flex n-flex-row n-gap-token-8\">\n      <DismissibleTag size=\"x-small\" onRemove={handleRemove}>\n        X-Small\n      </DismissibleTag>\n      <DismissibleTag size=\"small\" onRemove={handleRemove}>\n        Small\n      </DismissibleTag>\n      <DismissibleTag size=\"medium\" onRemove={handleRemove}>\n        Medium\n      </DismissibleTag>\n      <DismissibleTag size=\"large\" onRemove={handleRemove}>\n        Large\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dismissible-tag-sizes.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,sBAAc,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAE,YAAY,wBAEpC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,YAAY,uBAEnC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"flex flex-row gap-token-8\">\n      <DismissibleTag size=\"x-small\" onRemove={handleRemove}>\n        X-Small\n      </DismissibleTag>\n      <DismissibleTag size=\"small\" onRemove={handleRemove}>\n        Small\n      </DismissibleTag>\n      <DismissibleTag size=\"medium\" onRemove={handleRemove}>\n        Medium\n      </DismissibleTag>\n      <DismissibleTag size=\"large\" onRemove={handleRemove}>\n        Large\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/Drawer.js

@@ -90,7 +90,7 @@ function DrawerResizeHandle({ handleSide, onResizeBy, valueMax, valueMin, valueN
 }
 const DrawerComponent = function DrawerComponent(_a) {
     var _b;
-    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, closeOnEscape = type === 'modal' ? true : false, closeOnClickOutside = false, ariaLabel, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "closeOnEscape", "closeOnClickOutside", "ariaLabel", "htmlAttributes", "style", "ref", "as"]);
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, shouldCloseOnEscape = type === 'push' ? false : true, shouldCloseOnClickOutside = false, ariaLabel, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "shouldCloseOnEscape", "shouldCloseOnClickOutside", "ariaLabel", "htmlAttributes", "style", "ref", "as"]);
     const resizableRef = (0, react_2.useRef)(null);
     const [resizeWidth, setResizeWidth] = (0, react_2.useState)(0);
     if ((type === 'modal' || type === 'overlay') && !ariaLabel) {
@@ -106,8 +106,8 @@ const DrawerComponent = function DrawerComponent(_a) {
         (type === 'overlay' && isPortaled);
     const dismiss = (0, react_1.useDismiss)(context, {
         enabled: shouldUseDismiss,
-        escapeKey: closeOnEscape && type !== 'push',
-        outsidePress: closeOnClickOutside && type !== 'push',
+        escapeKey: shouldCloseOnEscape && type !== 'push',
+        outsidePress: shouldCloseOnClickOutside && type !== 'push',
     });
     const role = (0, react_1.useRole)(context, {
         enabled: type === 'modal' || type === 'overlay',
@@ -196,12 +196,13 @@ const DrawerComponent = function DrawerComponent(_a) {
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {
-    var { children, className = '', htmlAttributes } = _a, restProps = __rest(_a, ["children", "className", "htmlAttributes"]);
+    var { as, children, className = '', style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "children", "className", "style", "htmlAttributes", "ref"]);
     const classes = (0, classnames_1.default)('ndl-drawer-header', className);
+    const Component = as !== null && as !== void 0 ? as : 'div';
     if (typeof children === 'string' || typeof children === 'number') {
-        return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ className: classes, variant: "title-3" }, restProps, htmlAttributes, { children: children })));
+        return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, className: classes, ref: ref, style: style, variant: "title-3" }, restProps, htmlAttributes, { children: children })));
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, restProps, htmlAttributes, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, ref: ref, style: style }, restProps, htmlAttributes, { children: children })));
 };
 const DrawerActions = (_a) => {
     var { children, className = '', htmlAttributes } = _a, restProps = __rest(_a, ["children", "className", "htmlAttributes"]);