@equinor/eds-core-react 0.16.1 → 0.17.0-dev.20220209

package/dist/esm/components/Checkbox/Input.js

@@ -2,67 +2,93 @@ import { forwardRef } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
 import { checkbox } from './Checkbox.tokens.js';
+import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 /* eslint camelcase: "off" */
-const StyledPath = styled.path.attrs(({
-  icon
-}) => ({
-  fillRule: 'evenodd',
-  clipRule: 'evenodd',
-  d: icon.svgPathData
-})).withConfig({
+const StyledPath = styled.path.attrs(_ref => {
+  let {
+    icon
+  } = _ref;
+  return {
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    d: icon.svgPathData
+  };
+}).withConfig({
   displayName: "Input__StyledPath",
   componentId: "sc-rqj7qf-0"
 })([""]);
-const Input = styled.input.attrs(({
-  type = 'checkbox'
-}) => ({
-  type
-})).withConfig({
+const Input = styled.input.attrs(_ref2 => {
+  let {
+    type = 'checkbox'
+  } = _ref2;
+  return {
+    type
+  };
+}).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
-  theme,
-  iconSize
-}) => parseFloat(theme.clickbound.height) / iconSize, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  theme
-}) => outlineTemplate(theme.states.focus.outline), ({
-  theme
-}) => outlineTemplate(theme.states.focus.outline));
-const Svg = styled.svg.attrs(({
-  height,
-  width,
-  fill
-}) => ({
-  name: null,
-  xmlns: 'http://www.w3.org/2000/svg',
-  height,
-  width,
-  fill
-})).withConfig({
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], _ref3 => {
+  let {
+    theme,
+    iconSize
+  } = _ref3;
+  return parseFloat(theme.clickbound.height) / iconSize;
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled ? 'not-allowed' : 'pointer';
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return outlineTemplate(theme.states.focus.outline);
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return outlineTemplate(theme.states.focus.outline);
+});
+const Svg = styled.svg.attrs(_ref7 => {
+  let {
+    height,
+    width,
+    fill
+  } = _ref7;
+  return {
+    name: null,
+    xmlns: 'http://www.w3.org/2000/svg',
+    height,
+    width,
+    fill
+  };
+}).withConfig({
   displayName: "Input__Svg",
   componentId: "sc-rqj7qf-2"
 })(["grid-area:input;pointer-events:none;"]);
 const InputWrapper = styled.span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], ({
-  theme
-}) => spacingsTemplate(theme.spacings), ({
-  disabled
-}) => disabled ? 'transparent' : checkbox.states.hover.background);
-const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput({
-  disabled = false,
-  indeterminate,
-  ...rest
-}, ref) {
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return spacingsTemplate(theme.spacings);
+}, _ref9 => {
+  let {
+    disabled
+  } = _ref9;
+  return disabled ? 'transparent' : checkbox.states.hover.background;
+});
+const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref) {
+  let {
+    disabled = false,
+    indeterminate,
+    ...rest
+  } = _ref10;
   const {
     density
   } = useEds();

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

@@ -2,10 +2,8 @@ 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 { outlineTemplate, bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   enabled,
@@ -19,20 +17,28 @@ const {
   border,
   states
 } = enabled;
-const StyledChips = styled.div.attrs(({
-  clickable,
-  deletable
-}) => ({
-  tabIndex: clickable || deletable ? 0 : null,
-  role: clickable ? 'button' : null
-})).withConfig({
+const StyledChips = styled.div.attrs(_ref => {
+  let {
+    clickable,
+    deletable
+  } = _ref;
+  return {
+    tabIndex: clickable || deletable ? 0 : null,
+    role: clickable ? 'button' : null
+  };
+}).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;z-index:10;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), ({
-  clickable
-}) => clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]), ({
-  variant
-}) => {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;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;
+  return clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
+}, _ref3 => {
+  let {
+    variant
+  } = _ref3;
+
   switch (variant) {
     case 'active':
       return css(["background:", ";"], states.active.background);
@@ -43,21 +49,31 @@ const StyledChips = styled.div.attrs(({
     default:
       return '';
   }
-}, ({
-  disabled
-}) => 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), ({
-  deletable
-}) => deletable && css(["padding-right:4px;"]), ({
-  onlyChild
-}) => onlyChild ? css(["padding-left:8px;"]) : '');
-const Chip = /*#__PURE__*/forwardRef(function Chip({
-  children,
-  onDelete,
-  disabled = false,
-  onClick,
-  variant = 'default',
-  ...other
-}, ref) {
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  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;
+  return deletable && css(["padding-right:4px;"]);
+}, _ref6 => {
+  let {
+    onlyChild
+  } = _ref6;
+  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;

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

@@ -2,7 +2,7 @@ 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 { bordersTemplate } from '../../utils/templates/borders.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 
 Icon$1.add({
   close
@@ -14,9 +14,11 @@ const {
 const Icon = styled(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), ({
-  variant
-}) => {
+})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), _ref => {
+  let {
+    variant
+  } = _ref;
+
   switch (variant) {
     case 'error':
       return css(["background:", ";svg{fill:", ";}"], error.entities.icon.background, error.entities.icon.typography.color);
@@ -24,8 +26,11 @@ const Icon = styled(Icon$1).withConfig({
     default:
       return css(["background:", ";svg{fill:", ";}"], enabled.entities.icon.states.hover.background, enabled.states.hover.typography.color);
   }
-}, ({
-  disabled
-}) => disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]));
+}, _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]);
+});
 
 export { Icon };

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

@@ -1,30 +1,69 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import { createPortal } from 'react-dom';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { dialog } from './Dialog.tokens.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
+import { Scrim } from '../Scrim/Scrim.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledDialog = styled(Paper).attrs(() => ({
+const StyledDialog = styled(Paper).attrs({
   tabIndex: 0,
   role: 'dialog',
   'aria-labelledby': 'eds-dialog-title',
   'aria-describedby': 'eds-dialog-customcontent',
   'aria-modal': true
-})).withConfig({
+}).withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
-})(["width:", ";background:", ";display:grid;", " ", " ", ""], dialog.width, dialog.background, typographyTemplate(dialog.typography), spacingsTemplate(dialog.spacings), bordersTemplate(dialog.border));
-const Dialog = /*#__PURE__*/forwardRef(function Dialog({
-  children,
-  ...props
-}, ref) {
-  return /*#__PURE__*/jsx(StyledDialog, {
-    elevation: "above_scrim",
-    ...props,
-    ref: ref,
-    children: children
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  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 rest = { ...props,
+    open,
+    ref
+  };
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, dialog);
+
+  const handleDismiss = () => {
+    onClose && onClose();
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ThemeProvider, {
+      theme: token,
+      children: /*#__PURE__*/jsx(Scrim, {
+        open: true,
+        isDismissable: isDismissable,
+        onClose: handleDismiss,
+        children: /*#__PURE__*/jsx(StyledDialog, {
+          elevation: "above_scrim",
+          ...rest,
+          children: children
+        })
+      })
+    }), document.body)
   });
 }); // Dialog.displayName = 'EdsDialog'
 

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

@@ -36,22 +36,17 @@ const dialog = {
     radius: borderRadius
   },
   spacings: {
-    top: spacingMedium
+    bottom: spacingMedium
   },
   entities: {
     children: {
       spacings: {
-        top: '0px',
-        bottom: '0px',
+        top: spacingMedium,
+        bottom: spacingMedium,
         left: spacingMedium,
         right: spacingMedium
       }
     },
-    divider: {
-      spacings: {
-        bottom: spacingMedium
-      }
-    },
     title: {
       minHeight: '24px',
       typography: accordion_header
@@ -59,14 +54,14 @@ const dialog = {
     content: {
       minHeight: '80px',
       height: '104px',
-      typography: body_long,
-      spacings: {
-        bottom: spacingMedium
-      }
+      typography: body_long
     },
     actions: {
       minHeight: '48px'
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 

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

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledDialogActions = styled.div.withConfig({
+  displayName: "DialogActions__StyledDialogActions",
+  componentId: "sc-16ydtxd-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  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,
+    children: children
+  });
+}); // Actions.displayName = 'EdsDialogActions'
+
+export { DialogActions };

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

@@ -0,0 +1,44 @@
+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({
+  displayName: "DialogContent__StyledDialogContent",
+  componentId: "sc-1tze18k-0"
+})(_ref => {
+  let {
+    theme,
+    scrollable
+  } = _ref;
+  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({
+  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
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledDialogContent, {
+      id: "eds-dialog-customcontent",
+      ...props,
+      children: children
+    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
+});
+
+export { DialogContent };

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

@@ -0,0 +1,37 @@
+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({
+  displayName: "DialogHeader__StyledDialogHeader",
+  componentId: "sc-mbwcos-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  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({
+  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,
+    children: [/*#__PURE__*/jsx(StyledDialogHeader, {
+      children: children
+    }), /*#__PURE__*/jsx(StyledDivider, {
+      variant: "small",
+      color: "medium"
+    })]
+  });
+});
+
+export { DialogHeader };

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

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const StyledDialogTitle = styled.div.withConfig({
+  displayName: "DialogTitle__StyledDialogTitle",
+  componentId: "sc-1t3jljt-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return css(["", " min-height:", ";align-self:end;justify-self:start;margin-right:", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, theme.entities.children.spacings.right, !children && css(["min-height:initial;height:'8px';"]));
+});
+const DialogTitle = /*#__PURE__*/forwardRef(function DialogTitle(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx(StyledDialogTitle, {
+      id: "eds-dialog-title",
+      ref: ref,
+      ...rest,
+      children: children
+    })
+  });
+});
+
+export { DialogTitle };

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

@@ -1,14 +1,18 @@
 import { Dialog as Dialog$1 } from './Dialog.js';
-import { Actions } from './Actions.js';
-import { Title } from './Title.js';
-import { CustomContent } from './CustomContent.js';
+import { DialogActions } from './DialogActions.js';
+import { DialogTitle } from './DialogTitle.js';
+import { DialogContent } from './DialogContent.js';
+import { DialogHeader } from './DialogHeader.js';
 
 const Dialog = Dialog$1;
-Dialog.Actions = Actions;
-Dialog.Title = Title;
-Dialog.CustomContent = CustomContent;
+Dialog.Actions = DialogActions;
+Dialog.Title = DialogTitle;
+Dialog.CustomContent = DialogContent;
+Dialog.Content = DialogContent;
+Dialog.Header = DialogHeader;
 Dialog.Actions.displayName = 'Dialog.Actions';
 Dialog.Title.displayName = 'Dialog.Title';
-Dialog.CustomContent.displayName = 'Dialog.CustomContent';
+Dialog.Content.displayName = 'Dialog.Content';
+Dialog.Header.displayName = 'Dialog.Header';
 
 export { Dialog };

package/dist/esm/components/Divider/Divider.js

@@ -11,11 +11,12 @@ const StyledDivider = styled.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
 })(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/forwardRef(function Divider({
-  color = 'medium',
-  variant = 'medium',
-  ...rest
-}, ref) {
+const Divider = /*#__PURE__*/forwardRef(function Divider(_ref, ref) {
+  let {
+    color = 'medium',
+    variant = 'medium',
+    ...rest
+  } = _ref;
   const colorValue = color === 'medium' ? 'mediumColor' : color;
   const props = {
     backgroundColor: divider[colorValue].background,

package/dist/esm/components/EdsProvider/eds.context.js

@@ -5,10 +5,11 @@ const initalState = {
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/createContext(initalState);
-const EdsProvider = ({
-  children,
-  density = 'comfortable'
-}) => {
+const EdsProvider = _ref => {
+  let {
+    children,
+    density = 'comfortable'
+  } = _ref;
   const [state, setState] = useState({ ...initalState,
     density
   });