@equinor/eds-core-react 0.16.1-dev.12072021 → 0.18.0-envis.2

package/dist/esm/components/Accordion/Accordion.js

@@ -1,6 +1,10 @@
 import { forwardRef, Children, cloneElement } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { accordion } from './Accordion.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { useId } from '../../hooks/useId.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
 
 const Accordion = /*#__PURE__*/forwardRef(function Accordion({
   headerLevel = 'h2',
@@ -10,6 +14,12 @@ const Accordion = /*#__PURE__*/forwardRef(function Accordion({
   ...props
 }, ref) {
   const accordionId = useId(id, 'accordion');
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, accordion);
   const AccordionItems = Children.map(children, (child, index) => {
     if (!child) return null;
     return /*#__PURE__*/cloneElement(child, {
@@ -19,9 +29,12 @@ const Accordion = /*#__PURE__*/forwardRef(function Accordion({
       chevronPosition
     });
   });
-  return /*#__PURE__*/jsx("div", { ...props,
-    ref: ref,
-    children: AccordionItems
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx("div", { ...props,
+      ref: ref,
+      children: AccordionItems
+    })
   });
 }); // Accordion.displayName = 'Accordion'
 

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

@@ -106,6 +106,9 @@ const accordion = {
         color: defaultIconColor
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 

package/dist/esm/components/Accordion/AccordionHeader.js

@@ -11,9 +11,7 @@ import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   entities: {
-    header,
-    chevron: chevronToken,
-    icon: iconToken
+    chevron: chevronToken
   }
 } = accordion;
 const StyledAccordionHeader = styled.div.attrs(({
@@ -30,22 +28,31 @@ const StyledAccordionHeader = styled.div.attrs(({
 })).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(accordion.border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), ({
+})(({
+  theme,
+  disabled,
   parentIndex
-}) => parentIndex === 0 ? null : 'none', header.background, header.height, ({
-  disabled
-}) => disabled ? css({
-  color: header.states.disabled.typography.color,
-  cursor: 'not-allowed'
-}) : css({
-  color: header.typography.color,
-  cursor: 'pointer',
-  '@media (hover: hover) and (pointer: fine)': {
-    ':hover': {
-      background: header.states.hover.background
+}) => {
+  const {
+    entities: {
+      header,
+      icon: iconToken
+    },
+    border
+  } = theme;
+  return css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : css({
+    color: header.typography.color,
+    cursor: 'pointer',
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header.states.hover.background
+      }
     }
-  }
-}), iconToken.typography.color);
+  }), iconToken.typography.color);
+});
 const StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-1"

package/dist/esm/components/Accordion/AccordionHeaderTitle.js

@@ -1,18 +1,18 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { accordion } from './Accordion.tokens.js';
+import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledAccordionHeaderTitle = styled.span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
-})(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], ({
+})(({
+  theme,
   isExpanded,
   disabled
 }) => {
-  var _tokens$entities$head;
+  var _theme$entities$heade;
 
-  return isExpanded && !disabled ? (_tokens$entities$head = accordion.entities.header.states.active.typography) === null || _tokens$entities$head === void 0 ? void 0 : _tokens$entities$head.color : 'inherit';
+  return css(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], isExpanded && !disabled ? (_theme$entities$heade = theme.entities.header.states.active.typography) === null || _theme$entities$heade === void 0 ? void 0 : _theme$entities$heade.color : 'inherit');
 });
 const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle({
   isExpanded,

package/dist/esm/components/Accordion/AccordionPanel.js

@@ -1,16 +1,9 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { accordion } from './Accordion.tokens.js';
+import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 import { bordersTemplate } from '../../utils/templates/borders.js';
 import { spacingsTemplate } from '../../utils/templates/index.js';
 
-const {
-  entities: {
-    header,
-    panel
-  }
-} = accordion;
 const StyledAccordionPanel = styled.div.attrs(({
   headerId
 }) => ({
@@ -19,7 +12,18 @@ const StyledAccordionPanel = styled.div.attrs(({
 })).withConfig({
   displayName: "AccordionPanel__StyledAccordionPanel",
   componentId: "sc-suplv4-0"
-})(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(accordion.border), spacingsTemplate(panel.spacings), header.background);
+})(({
+  theme
+}) => {
+  const {
+    entities: {
+      header,
+      panel
+    },
+    border
+  } = theme;
+  return css(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), header.background);
+});
 const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel({
   id,
   headerId,

package/dist/esm/components/Banner/Banner.js

@@ -1,24 +1,26 @@
 import { forwardRef, Children, isValidElement } from 'react';
-import styled from 'styled-components';
-import * as Banner_tokens from './Banner.tokens.js';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { enabled } from './Banner.tokens.js';
 import { BannerIcon } from './BannerIcon.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { spacingsTemplate } from '../../utils/templates/index.js';
 import { Divider } from '../Divider/Divider.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
 
 const StyledBanner = styled.div.withConfig({
   displayName: "Banner__StyledBanner",
   componentId: "sc-1ju451i-0"
 })([""]);
-const {
-  enabled
-} = Banner_tokens;
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",
   componentId: "sc-1ju451i-1"
-})(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(enabled.spacings), ({
+})(({
+  theme,
   hasIcon
-}) => hasIcon ? 'min-content 1fr auto' : '1fr auto', enabled.background);
+}) => {
+  return css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
+});
 const NonMarginDivider = styled(Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
   componentId: "sc-1ju451i-2"
@@ -36,15 +38,24 @@ const Banner = /*#__PURE__*/forwardRef(function Banner({
     ref,
     ...rest
   };
-  return /*#__PURE__*/jsxs(StyledBanner, { ...props,
-    className: className,
-    role: "alert",
-    children: [/*#__PURE__*/jsx(Content, {
-      hasIcon: hasIcon,
-      children: children
-    }), /*#__PURE__*/jsx(NonMarginDivider, {
-      color: "light"
-    })]
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, enabled);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(StyledBanner, { ...props,
+      className: className,
+      role: "alert",
+      children: [/*#__PURE__*/jsx(Content, {
+        hasIcon: hasIcon,
+        children: children
+      }), /*#__PURE__*/jsx(NonMarginDivider, {
+        color: "light"
+      })]
+    })
   });
 });
 

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

@@ -60,6 +60,9 @@ const enabled = {
         radius: borderRadius
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 const info = {
@@ -70,6 +73,9 @@ const info = {
         color: infoColor
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 const warning = {
@@ -80,6 +86,9 @@ const warning = {
         color: warningColor
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 

package/dist/esm/components/Banner/BannerActions.js

@@ -1,21 +1,18 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import * as Banner_tokens from './Banner.tokens.js';
+import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  enabled
-} = Banner_tokens;
 const StyledBannerActions = styled.div.withConfig({
   displayName: "BannerActions__StyledBannerActions",
   componentId: "sc-1o38ds2-0"
-})(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], enabled.spacings.left, ({
+})(({
+  theme,
   placement
-}) => placement === 'bottom' ? '1/-1' : 'auto', ({
-  placement
-}) => placement === 'bottom' && {
-  marginTop: enabled.spacings.top,
-  marginLeft: '0'
+}) => {
+  return css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, placement === 'bottom' ? '1/-1' : 'auto', placement === 'bottom' && {
+    marginTop: theme.spacings.top,
+    marginLeft: '0'
+  });
 });
 const BannerActions = /*#__PURE__*/forwardRef(function BannerActions({
   children,

package/dist/esm/components/Banner/BannerIcon.js

@@ -1,21 +1,23 @@
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import * as Banner_tokens from './Banner.tokens.js';
 import { Icon } from '../Icon/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const {
-  enabled,
   info,
   warning
 } = Banner_tokens;
 const StyledBannerIcon = styled.span.withConfig({
   displayName: "BannerIcon__StyledBannerIcon",
   componentId: "sc-7ow3zc-0"
-})(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(enabled.entities.icon.border), ({
+})(({
+  theme,
   variant
-}) => variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, enabled.entities.icon.width, enabled.entities.icon.height, enabled.spacings.right);
+}) => {
+  return css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(theme.entities.icon.border), variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
+});
 const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon({
   children,
   variant = 'info',

package/dist/esm/components/Button/Button.js

@@ -43,7 +43,7 @@ const getToken = (variant, color) => {
 const Inner = styled.span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;"]);
+})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
 const ButtonBase = styled.button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"

package/dist/esm/components/Button/InnerFullWidth.js

@@ -9,7 +9,7 @@ const FullWidthCenterContent = styled.span.withConfig({
 const FullWidthInner = styled.span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
-})(["height:100%;display:flex;align-items:center;> img:first-child,> svg:first-child{margin-right:8px;}> img:last-child,> svg:last-child{margin-left:8px;}> img:only-child,> svg:only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:32px;}> span:last-child{margin-right:32px;}> span:only-child{margin-right:0;margin-left:0;}"]);
+})(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}>:is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
 const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
   children
 }, ref) {

package/dist/esm/components/Button/tokens/button.js

@@ -47,20 +47,23 @@ const {
 } = tokens;
 const button = {
   background: 'transparent',
-  height: buttonHeight,
+  height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
   typography: { ...buttonTypography,
-    textAlign: 'center'
+    textAlign: 'center',
+    fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
   },
   border: {
     type: 'border',
-    width: '1px',
+    width: "var(--eds_button__border_width, 1px)",
     color: 'transparent',
-    radius: buttonBorderRadius,
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
     style: 'solid'
   },
   spacings: {
-    left: medium,
-    right: medium
+    top: 'var(--eds_button__padding_y, 0)',
+    bottom: 'var(--eds_button__padding_y, 0)',
+    left: "var(--eds_button__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_button__padding_x, ".concat(medium, ")")
   },
   clickbound: {
     height: clicboundHeight,
@@ -72,8 +75,8 @@ const button = {
   },
   entities: {
     icon: {
-      height: '24px',
-      width: '24px'
+      height: 'var(--eds_button__icon__size, 24px)',
+      width: 'var(--eds_button__icon__size, 24px)'
     }
   },
   states: {
@@ -82,7 +85,7 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: buttonBorderRadius,
+        radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
         style: 'solid'
       }
     },
@@ -111,7 +114,11 @@ const button = {
   },
   modes: {
     compact: {
-      height: compactButtonHeight,
+      height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
+      spacings: {
+        top: 'var(--eds_button__padding_y_compact, 0)',
+        bottom: 'var(--eds_button__padding_y_compact, 0)'
+      },
       clickbound: {
         height: compactClickboundHeight,
         width: '100%',

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

@@ -1,15 +1,17 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { dialog } from './Dialog.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { spacingsTemplate } from '../../utils/templates/index.js';
 
 const StyledActions = styled.div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1qfwg1m-0"
-})(["min-height:", ";", " align-self:end;justify-self:start;", ""], dialog.entities.actions.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
+})(({
+  theme,
   children
-}) => !children && css(["min-height:initial;height:'8px';"]));
+}) => {
+  return css(["min-height:", ";", " align-self:end;justify-self:start;", ""], theme.entities.actions.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && css(["min-height:initial;height:'8px';"]));
+});
 const Actions = /*#__PURE__*/forwardRef(function Actions({
   children,
   ...props

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

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { dialog } from './Dialog.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
 import { Divider } from '../Divider/Divider.js';
@@ -8,13 +7,20 @@ import { Divider } from '../Divider/Divider.js';
 const StyledCustomContent = styled.div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-17fsw6x-0"
-})(["", " min-height:", ";margin-bottom:", ";align-self:stretch;justify-self:stretch;", " ", ""], typographyTemplate(dialog.entities.content.typography), dialog.entities.content.minHeight, dialog.entities.content.spacings.bottom, spacingsTemplate(dialog.entities.children.spacings), ({
+})(({
+  theme,
   scrollable
-}) => scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], dialog.entities.content.height));
+}) => {
+  return css(["", " min-height:", ";margin-bottom:", ";align-self:stretch;justify-self:stretch;", " ", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.content.spacings.bottom, spacingsTemplate(theme.entities.children.spacings), scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+});
 const StyledDivider = styled(Divider).withConfig({
   displayName: "CustomContent__StyledDivider",
   componentId: "sc-17fsw6x-1"
-})(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
+})(({
+  theme
+}) => {
+  return css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
+});
 const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
   children,
   scrollable = false,

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

@@ -1,30 +1,45 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css, ThemeProvider } from 'styled-components';
 import { dialog } from './Dialog.tokens.js';
 import { jsx } 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 { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.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));
+})(({
+  theme
+}) => {
+  return css(["width:", ";background:", ";display:grid;", " ", " ", ""], theme.width, theme.background, typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), bordersTemplate(theme.border));
+});
 const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/jsx(StyledDialog, {
-    elevation: "above_scrim",
-    ...props,
-    ref: ref,
-    children: children
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, dialog);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx(StyledDialog, {
+      elevation: "above_scrim",
+      ...props,
+      ref: ref,
+      children: children
+    })
   });
 }); // Dialog.displayName = 'EdsDialog'
 

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

@@ -67,6 +67,9 @@ const dialog = {
     actions: {
       minHeight: '48px'
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 

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

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { dialog } from './Dialog.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
@@ -8,13 +7,20 @@ import { typographyTemplate, spacingsTemplate } from '../../utils/templates/inde
 const StyledTitle = styled.div.withConfig({
   displayName: "Title__StyledTitle",
   componentId: "sc-i4qfl5-0"
-})(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(dialog.entities.title.typography), dialog.entities.title.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
+})(({
+  theme,
   children
-}) => !children && css(["min-height:initial;height:'8px';"]));
+}) => {
+  return css(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && css(["min-height:initial;height:'8px';"]));
+});
 const StyledDivider = styled(Divider).withConfig({
   displayName: "Title__StyledDivider",
   componentId: "sc-i4qfl5-1"
-})(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
+})(({
+  theme
+}) => {
+  return css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
+});
 const Title = /*#__PURE__*/forwardRef(function Title({
   children,
   ...rest

package/dist/esm/components/Menu/Menu.js

@@ -41,7 +41,7 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
-  });
+  }, [onClose, onCloseCallback, setOnClose]);
   useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -72,6 +72,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   ...rest
 }, ref) {
   const [containerEl, setContainerEl] = useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
   const isMounted = useIsMounted();
   const {
     density
@@ -79,10 +80,14 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   const token = useToken({
     density
   }, menu);
+  useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
   const {
     styles,
     attributes
-  } = usePopper(anchorEl, containerEl, null, placement, 4);
+  } = usePopper(storedAnchorEl, containerEl, null, placement, 4);
   const props = {
     open,
     style: { ...styles.popper,

package/dist/esm/components/Menu/MenuSection.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { memo } from 'react';
 import styled from 'styled-components';
 import { menu } from './Menu.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -12,7 +12,7 @@ const Header = styled.div.attrs(() => ({
   displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
-const MenuSection = /*#__PURE__*/React.memo(function MenuSection(props) {
+const MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
   const {
     children,
     title,