@equinor/eds-core-react 0.23.0-dev.20221003 → 0.24.0-dev.20221006

package/dist/esm/components/Chip/Chip.js

@@ -1,27 +1,24 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from './Icon.js';
-import * as Chip_tokens from './Chip.tokens.js';
+import { error as error$1, enabled as enabled$1 } from './Chip.tokens.js';
 import { outlineTemplate, bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const {
-  enabled,
-  error
-} = Chip_tokens;
-const {
-  background,
-  height,
-  typography,
-  spacings,
-  border,
-  states
-} = enabled;
-const StyledChips = styled.div.attrs(_ref => {
-  let {
-    clickable,
-    deletable
-  } = _ref;
+var _excluded = ["children", "onDelete", "disabled", "onClick", "variant"];
+var enabled = enabled$1,
+    error = error$1;
+var background = enabled.background,
+    height = enabled.height,
+    typography = enabled.typography,
+    spacings = enabled.spacings,
+    border = enabled.border,
+    states = enabled.states;
+var StyledChips = styled.div.attrs(function (_ref) {
+  var clickable = _ref.clickable,
+      deletable = _ref.deletable;
   return {
     tabIndex: clickable || deletable ? 0 : null,
     role: clickable ? 'button' : null
@@ -29,15 +26,11 @@ const StyledChips = styled.div.attrs(_ref => {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), _ref2 => {
-  let {
-    clickable
-  } = _ref2;
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), function (_ref2) {
+  var clickable = _ref2.clickable;
   return clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
-}, _ref3 => {
-  let {
-    variant
-  } = _ref3;
+}, function (_ref3) {
+  var variant = _ref3.variant;
 
   switch (variant) {
     case 'active':
@@ -49,49 +42,44 @@ const StyledChips = styled.div.attrs(_ref => {
     default:
       return '';
   }
-}, _ref4 => {
-  let {
-    disabled
-  } = _ref4;
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
   return disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color);
-}, _ref5 => {
-  let {
-    deletable
-  } = _ref5;
+}, function (_ref5) {
+  var deletable = _ref5.deletable;
   return deletable && css(["padding-right:4px;"]);
-}, _ref6 => {
-  let {
-    onlyChild
-  } = _ref6;
+}, function (_ref6) {
+  var onlyChild = _ref6.onlyChild;
   return onlyChild ? css(["padding-left:8px;"]) : '';
 });
-const Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
-  let {
-    children,
-    onDelete,
-    disabled = false,
-    onClick,
-    variant = 'default',
-    ...other
-  } = _ref7;
-  const handleDelete = disabled ? undefined : onDelete;
-  const handleClick = disabled ? undefined : onClick;
-  const deletable = handleDelete !== undefined;
-  const clickable = handleClick !== undefined;
-  const onlyChild = typeof children === 'string';
-  const chipProps = { ...other,
-    ref,
-    disabled,
-    deletable,
-    clickable,
-    onlyChild,
-    variant
-  };
+var Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
+  var children = _ref7.children,
+      onDelete = _ref7.onDelete,
+      _ref7$disabled = _ref7.disabled,
+      disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+      onClick = _ref7.onClick,
+      _ref7$variant = _ref7.variant,
+      variant = _ref7$variant === void 0 ? 'default' : _ref7$variant,
+      other = _objectWithoutProperties(_ref7, _excluded);
+
+  var handleDelete = disabled ? undefined : onDelete;
+  var handleClick = disabled ? undefined : onClick;
+  var deletable = handleDelete !== undefined;
+  var clickable = handleClick !== undefined;
+  var onlyChild = typeof children === 'string';
 
-  const handleKeyPress = event => {
-    const {
-      key
-    } = event;
+  var chipProps = _objectSpread(_objectSpread({}, other), {}, {
+    ref: ref,
+    disabled: disabled,
+    deletable: deletable,
+    clickable: clickable,
+    onlyChild: onlyChild,
+    variant: variant
+  });
+
+  var handleKeyPress = function handleKeyPress(event) {
+    var _ref8 = event,
+        key = _ref8.key;
 
     if (key === 'Enter') {
       if (deletable) {
@@ -105,19 +93,19 @@ const Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
     }
   };
 
-  const resizedChildren = Children.map(children, child => {
+  var resizedChildren = Children.map(children, function (child) {
     // We force size on Icon & Avatar component
     if (child.props) {
       return /*#__PURE__*/cloneElement(child, {
         size: 16,
-        disabled
+        disabled: disabled
       });
     }
 
     return child;
   });
 
-  const onDeleteClick = event => {
+  var onDeleteClick = function onDeleteClick(event) {
     event.stopPropagation();
 
     if (deletable) {
@@ -125,8 +113,10 @@ const Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
     }
   };
 
-  return /*#__PURE__*/jsxs(StyledChips, { ...chipProps,
-    onClick: event => clickable && handleClick(event),
+  return /*#__PURE__*/jsxs(StyledChips, _objectSpread(_objectSpread({}, chipProps), {}, {
+    onClick: function onClick(event) {
+      return clickable && handleClick(event);
+    },
     onKeyPress: handleKeyPress,
     children: [resizedChildren, onDelete && /*#__PURE__*/jsx(Icon, {
       name: "close",
@@ -136,7 +126,7 @@ const Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
       onClick: onDeleteClick,
       size: 16
     })]
-  });
+  }));
 }); // Chip.displayName = 'eds-chip'
 
 export { Chip };

package/dist/esm/components/Chip/Chip.tokens.js

@@ -1,69 +1,28 @@
-import { tokens as tokens$1 } from '@equinor/eds-tokens';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { tokens } from '@equinor/eds-tokens';
 
-const {
-  spacings: {
-    comfortable: {
-      x_small,
-      small,
-      medium
-    }
-  },
-  typography: {
-    ui: {
-      chip__badge: chipTypography
-    }
-  },
-  colors: {
-    ui: {
-      background__default: {
-        rgba: backgroundColorDefault
-      },
-      background__light: {
-        rgba: backgroundColor
-      }
-    },
-    interactive: {
-      primary__resting: {
-        rgba: primaryColor
-      },
-      primary__hover_alt: {
-        rgba: primaryHoverAlt
-      },
-      primary__hover: {
-        rgba: primaryHover
-      },
-      disabled__text: {
-        rgba: disabledColor
-      },
-      focus: {
-        rgba: focusOutlineColor
-      },
-      primary__selected_highlight: {
-        rgba: activeColor
-      },
-      danger__resting: {
-        rgba: errorColor
-      },
-      danger__hover: {
-        rgba: errorColorHover
-      },
-      danger__highlight: {
-        rgba: errorBackgroundHover
-      }
-    }
-  },
-  shape: {
-    rounded: {
-      borderRadius
-    }
-  },
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  }
-} = tokens$1;
-const enabled = {
+var _tokens$spacings$comf = tokens.spacings.comfortable,
+    x_small = _tokens$spacings$comf.x_small,
+    small = _tokens$spacings$comf.small,
+    medium = _tokens$spacings$comf.medium,
+    chipTypography = tokens.typography.ui.chip__badge,
+    _tokens$colors = tokens.colors,
+    _tokens$colors$ui = _tokens$colors.ui,
+    backgroundColorDefault = _tokens$colors$ui.background__default.rgba,
+    backgroundColor = _tokens$colors$ui.background__light.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    primaryColor = _tokens$colors$intera.primary__resting.rgba,
+    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+    primaryHover = _tokens$colors$intera.primary__hover.rgba,
+    disabledColor = _tokens$colors$intera.disabled__text.rgba,
+    focusOutlineColor = _tokens$colors$intera.focus.rgba,
+    activeColor = _tokens$colors$intera.primary__selected_highlight.rgba,
+    errorColor = _tokens$colors$intera.danger__resting.rgba,
+    errorColorHover = _tokens$colors$intera.danger__hover.rgba,
+    errorBackgroundHover = _tokens$colors$intera.danger__highlight.rgba,
+    borderRadius = tokens.shape.rounded.borderRadius,
+    focusOutlineWidth = tokens.interactions.focused.width;
+var enabled = {
   background: backgroundColor,
   height: '22px',
   border: {
@@ -77,9 +36,9 @@ const enabled = {
     left: x_small,
     right: small
   },
-  typography: { ...chipTypography,
+  typography: _objectSpread(_objectSpread({}, chipTypography), {}, {
     color: primaryColor
-  },
+  }),
   states: {
     hover: {
       typography: {
@@ -121,7 +80,7 @@ const enabled = {
     }
   }
 };
-const error = {
+var error = {
   background: backgroundColorDefault,
   border: {
     type: 'border',

package/dist/esm/components/Chip/Icon.js

@@ -1,23 +1,19 @@
 import styled, { css } from 'styled-components';
 import { close } from '@equinor/eds-icons';
 import { Icon as Icon$1 } from '../Icon/index.js';
-import * as Chip_tokens from './Chip.tokens.js';
+import { enabled as enabled$1, error as error$1 } from './Chip.tokens.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 
 Icon$1.add({
-  close
+  close: close
 });
-const {
-  enabled,
-  error
-} = Chip_tokens;
-const Icon = styled(Icon$1).withConfig({
+var enabled = enabled$1,
+    error = error$1;
+var Icon = styled(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), _ref => {
-  let {
-    variant
-  } = _ref;
+})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), function (_ref) {
+  var variant = _ref.variant;
 
   switch (variant) {
     case 'error':
@@ -26,10 +22,8 @@ const Icon = styled(Icon$1).withConfig({
     default:
       return css(["background:", ";svg{fill:", ";}"], enabled.entities.icon.states.hover.background, enabled.states.hover.typography.color);
   }
-}, _ref2 => {
-  let {
-    disabled
-  } = _ref2;
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
   return disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]);
 });
 

package/dist/esm/components/Dialog/Dialog.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, useToken, mergeRefs } from '@equinor/eds-utils';
@@ -8,7 +10,8 @@ import { Scrim } from '../Scrim/Scrim.js';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledDialog = styled(Paper).attrs({
+var _excluded = ["children", "open", "onClose", "isDismissable"];
+var StyledDialog = styled(Paper).attrs({
   tabIndex: 0,
   role: 'dialog',
   'aria-labelledby': 'eds-dialog-title',
@@ -17,39 +20,41 @@ const StyledDialog = styled(Paper).attrs({
 }).withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
-})(_ref => {
-  let {
-    theme
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme;
   return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", " ", " grid-gap:", ";"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
 });
-const Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
-  let {
-    children,
-    open,
-    onClose,
-    isDismissable = false,
-    ...props
-  } = _ref2;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
+  var children = _ref2.children,
+      open = _ref2.open,
+      onClose = _ref2.onClose,
+      _ref2$isDismissable = _ref2.isDismissable,
+      isDismissable = _ref2$isDismissable === void 0 ? false : _ref2$isDismissable,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, dialog);
-  const {
-    floating,
-    context
-  } = useFloating();
 
-  const handleDismiss = () => {
+  var _useFloating = useFloating(),
+      floating = _useFloating.floating,
+      context = _useFloating.context;
+
+  var handleDismiss = function handleDismiss() {
     onClose && onClose();
   };
 
-  const dialogRef = useMemo(() => mergeRefs(floating, ref), [floating, ref]);
-  const rest = { ...props,
-    open
-  };
+  var dialogRef = useMemo(function () {
+    return mergeRefs(floating, ref);
+  }, [floating, ref]);
+
+  var rest = _objectSpread(_objectSpread({}, props), {}, {
+    open: open
+  });
+
   return /*#__PURE__*/jsx(FloatingPortal, {
     id: "eds-dialog-container",
     children: /*#__PURE__*/jsx(ThemeProvider, {
@@ -62,12 +67,12 @@ const Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
           context: context,
           modal: true,
           returnFocus: true,
-          children: /*#__PURE__*/jsx(StyledDialog, {
-            elevation: "above_scrim",
-            ...rest,
+          children: /*#__PURE__*/jsx(StyledDialog, _objectSpread(_objectSpread({
+            elevation: "above_scrim"
+          }, rest), {}, {
             ref: dialogRef,
             children: children
-          })
+          }))
         })
       })
     })

package/dist/esm/components/Dialog/Dialog.tokens.js

@@ -1,35 +1,14 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  spacings: {
-    comfortable: {
-      medium: spacingMedium
-    }
-  },
-  typography: {
-    ui: {
-      accordion_header
-    },
-    paragraph: {
-      body_long
-    }
-  },
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background
-      }
-    }
-  },
-  shape: {
-    corners: {
-      borderRadius
-    }
-  }
-} = tokens;
-const dialog = {
+var spacingMedium = tokens.spacings.comfortable.medium,
+    _tokens$typography = tokens.typography,
+    accordion_header = _tokens$typography.ui.accordion_header,
+    body_long = _tokens$typography.paragraph.body_long,
+    background = tokens.colors.ui.background__default.rgba,
+    borderRadius = tokens.shape.corners.borderRadius;
+var dialog = {
   width: '252px',
-  background,
+  background: background,
   typography: accordion_header,
   border: {
     type: 'border',

package/dist/esm/components/Dialog/DialogActions.js

@@ -1,27 +1,27 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledDialogActions = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledDialogActions = styled.div.withConfig({
   displayName: "DialogActions__StyledDialogActions",
   componentId: "sc-16ydtxd-0"
-})(_ref => {
-  let {
-    theme,
-    children
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
   return css(["align-self:end;justify-self:start;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, !children && css(["min-height:initial;height:'8px';"]));
 });
-const DialogActions = /*#__PURE__*/forwardRef(function DialogActions(_ref2, ref) {
-  let {
-    children,
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/jsx(StyledDialogActions, {
-    ref: ref,
-    ...props,
+var DialogActions = /*#__PURE__*/forwardRef(function DialogActions(_ref2, ref) {
+  var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/jsx(StyledDialogActions, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     children: children
-  });
+  }));
 }); // Actions.displayName = 'EdsDialogActions'
 
 export { DialogActions };

package/dist/esm/components/Dialog/DialogContent.js

@@ -1,40 +1,41 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 
-const StyledDialogContent = styled.div.withConfig({
+var _excluded = ["children", "scrollable"];
+var StyledDialogContent = styled.div.withConfig({
   displayName: "DialogContent__StyledDialogContent",
   componentId: "sc-1tze18k-0"
-})(_ref => {
-  let {
-    theme,
-    scrollable
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      scrollable = _ref.scrollable;
   return css(["", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
 });
-const StyledDivider = styled(Divider).withConfig({
+var StyledDivider = styled(Divider).withConfig({
   displayName: "DialogContent__StyledDivider",
   componentId: "sc-1tze18k-1"
 })(["width:100%;margin-bottom:0;"]);
-const DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref2, ref) {
-  let {
-    children,
-    scrollable = false,
-    ...rest
-  } = _ref2;
-  const props = {
-    scrollable,
-    ref,
-    ...rest
-  };
+var DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$scrollable = _ref2.scrollable,
+      scrollable = _ref2$scrollable === void 0 ? false : _ref2$scrollable,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread({
+    scrollable: scrollable,
+    ref: ref
+  }, rest);
+
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(StyledDialogContent, {
-      id: "eds-dialog-customcontent",
-      ...props,
+    children: [/*#__PURE__*/jsx(StyledDialogContent, _objectSpread(_objectSpread({
+      id: "eds-dialog-customcontent"
+    }, props), {}, {
       children: children
-    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
+    })), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
       color: "medium",
       variant: "small"
     })]

package/dist/esm/components/Dialog/DialogHeader.js

@@ -1,37 +1,38 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 
-const StyledDialogHeader = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledDialogHeader = styled.div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",
   componentId: "sc-mbwcos-0"
-})(_ref => {
-  let {
-    theme
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme;
   return css(["display:flex;justify-content:space-betweene;algin-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
 });
-const StyledDivider = styled(Divider).withConfig({
+var StyledDivider = styled(Divider).withConfig({
   displayName: "DialogHeader__StyledDivider",
   componentId: "sc-mbwcos-1"
 })(["margin-bottom:0;"]);
-const DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader(_ref2, ref) {
-  let {
-    children,
-    ...rest
-  } = _ref2;
-  const props = { ...rest,
-    ref
-  };
-  return /*#__PURE__*/jsxs("div", { ...props,
+var DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader(_ref2, ref) {
+  var children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
+  });
+
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StyledDialogHeader, {
       children: children
     }), /*#__PURE__*/jsx(StyledDivider, {
       variant: "small",
       color: "medium"
     })]
-  });
+  }));
 });
 
 export { DialogHeader };