@neo4j-ndl/react 4.0.16 → 4.0.17

package/lib/cjs/drawer/Drawer.js

@@ -44,7 +44,8 @@ const clean_icon_button_1 = require("../clean-icon-button");
 const conditional_wrap_1 = require("../conditional-wrap");
 const icons_1 = require("../icons");
 const typography_1 = require("../typography");
-const DrawerComponent = function DrawerComponent({ children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, ref, }) {
+const DrawerComponent = function DrawerComponent(_a) {
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "htmlAttributes", "style", "ref", "as"]);
     const setOnExpandedChange = (0, react_2.useCallback)(() => {
         if (onExpandedChange)
             onExpandedChange(!isExpanded);
@@ -58,14 +59,15 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
     });
     const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';
     const shouldRenderInPortal = isPortaled && type === 'overlay';
+    const Component = as !== null && as !== void 0 ? as : 'div';
     const Close = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isCloseable && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { className: "ndl-drawer-close-button", onClick: setOnExpandedChange, description: "Close", size: "medium", htmlAttributes: {
                 title: 'Close drawer',
             }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })) }));
     if (isResizeable) {
-        return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ defaultSize: {
+        return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ as: Component, defaultSize: {
                     height: '100%',
                     width: 'auto',
-                } }, resizeableProps, { className: classes, style: Object.assign({ position: resizableStylePosition }, resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
+                } }, resizeableProps, { className: classes, style: Object.assign(Object.assign({ position: resizableStylePosition }, style), resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
                     /*
                      * adding a small offset to the handle to make it easier to click
                      * if the content of the drawer is scrollable, most noticeable if not using
@@ -83,9 +85,9 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
                     top: false,
                     topLeft: false,
                     topRight: false,
-                }, ref: ref, children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
+                }, ref: ref }, restProps, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
     }
-    return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, ref: ref }, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
+    return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {

package/lib/cjs/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.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 { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  ref,\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <div className={classes} ref={ref} {...htmlAttributes}>\n        {children}\n        <Close />\n      </div>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.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 { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n  const Component = as ?? 'div';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          as={Component}\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...style,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <Component\n        className={classes}\n        style={style}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n        <Close />\n      </Component>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}

package/lib/esm/drawer/Drawer.js

@@ -38,7 +38,8 @@ import { CleanIconButton } from '../clean-icon-button';
 import { ConditionalWrap } from '../conditional-wrap';
 import { XMarkIconOutline } from '../icons';
 import { Typography } from '../typography';
-const DrawerComponent = function DrawerComponent({ children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, ref, }) {
+const DrawerComponent = function DrawerComponent(_a) {
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "htmlAttributes", "style", "ref", "as"]);
     const setOnExpandedChange = useCallback(() => {
         if (onExpandedChange)
             onExpandedChange(!isExpanded);
@@ -52,14 +53,15 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
     });
     const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';
     const shouldRenderInPortal = isPortaled && type === 'overlay';
+    const Component = as !== null && as !== void 0 ? as : 'div';
     const Close = () => (_jsx(_Fragment, { children: isCloseable && (_jsx(CleanIconButton, { className: "ndl-drawer-close-button", onClick: setOnExpandedChange, description: "Close", size: "medium", htmlAttributes: {
                 title: 'Close drawer',
             }, children: _jsx(XMarkIconOutline, {}) })) }));
     if (isResizeable) {
-        return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs(Resizable, Object.assign({ defaultSize: {
+        return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs(Resizable, Object.assign({ as: Component, defaultSize: {
                     height: '100%',
                     width: 'auto',
-                } }, resizeableProps, { className: classes, style: Object.assign({ position: resizableStylePosition }, resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
+                } }, resizeableProps, { className: classes, style: Object.assign(Object.assign({ position: resizableStylePosition }, style), resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
                     /*
                      * adding a small offset to the handle to make it easier to click
                      * if the content of the drawer is scrollable, most noticeable if not using
@@ -77,9 +79,9 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
                     top: false,
                     topLeft: false,
                     topRight: false,
-                }, ref: ref, children: [children, _jsx(Close, {})] })) }));
+                }, ref: ref }, restProps, htmlAttributes, { children: [children, _jsx(Close, {})] })) }));
     }
-    return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs("div", Object.assign({ className: classes, ref: ref }, htmlAttributes, { children: [children, _jsx(Close, {})] })) }));
+    return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [children, _jsx(Close, {})] })) }));
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {

package/lib/esm/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.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 { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  ref,\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <div className={classes} ref={ref} {...htmlAttributes}>\n        {children}\n        <Close />\n      </div>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.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 { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n  const Component = as ?? 'div';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          as={Component}\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...style,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <Component\n        className={classes}\n        style={style}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n        <Close />\n      </Component>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}

package/lib/types/drawer/Drawer.d.ts

@@ -68,7 +68,7 @@ type DrawerBodyProps = {
     htmlAttributes?: HtmlAttributes<'div'>;
 };
 declare const Drawer: {
-    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, htmlAttributes, ref, }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, htmlAttributes, style, ref, as, ...restProps }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Actions: ({ children, className, ...restProps }: DrawerActionsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAM1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAErC,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,CAAC;AA2HF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAwBF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAgBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAkBF,QAAA,MAAM,MAAM;KA9LV,CAAC,SAAS,KAAK,CAAC,WAAW,4KAe1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qDA+ItC,kBAAkB;kDAoBlB,eAAe;oDAhDf,iBAAiB;CAgElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAM1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAErC,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,CAAC;AAyIF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAwBF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAgBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAkBF,QAAA,MAAM,MAAM;KA5MV,CAAC,SAAS,KAAK,CAAC,WAAW,oMAkB1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qDA0JtC,kBAAkB;kDAoBlB,eAAe;oDAhDf,iBAAiB;CAgElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.0.16",
+  "version": "4.0.17",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [