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

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

@@ -1,15 +1,25 @@
 import { forwardRef, Children, cloneElement } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { accordion } from './Accordion.tokens.js';
+import { useId, useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { useId } from '../../hooks/useId.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
-const Accordion = /*#__PURE__*/forwardRef(function Accordion({
-  headerLevel = 'h2',
-  chevronPosition = 'left',
-  children,
-  id,
-  ...props
-}, ref) {
+const Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
+  let {
+    headerLevel = 'h2',
+    chevronPosition = 'left',
+    children,
+    id,
+    ...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

@@ -4,70 +4,84 @@ import { chevron_up, chevron_down } from '@equinor/eds-icons';
 import { Icon } from '../Icon/index.js';
 import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
 import { accordion } from './Accordion.tokens.js';
+import { typographyTemplate, bordersTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   entities: {
-    header,
-    chevron: chevronToken,
-    icon: iconToken
+    chevron: chevronToken
   }
 } = accordion;
-const StyledAccordionHeader = styled.div.attrs(({
-  panelId,
-  isExpanded,
-  disabled
-}) => ({
-  'aria-expanded': isExpanded,
-  'aria-controls': panelId,
-  role: 'button',
-  'aria-disabled': isExpanded && disabled,
-  tabIndex: disabled ? -1 : 0,
-  disabled
-})).withConfig({
+const StyledAccordionHeader = styled.div.attrs(_ref => {
+  let {
+    panelId,
+    isExpanded,
+    disabled
+  } = _ref;
+  return {
+    'aria-expanded': isExpanded,
+    'aria-controls': panelId,
+    role: 'button',
+    'aria-disabled': isExpanded && disabled,
+    tabIndex: disabled ? -1 : 0,
+    disabled
+  };
+}).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), ({
-  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
+})(_ref2 => {
+  let {
+    theme,
+    disabled,
+    parentIndex
+  } = _ref2;
+  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"
-})(({
-  chevronPosition
-}) => chevronPosition === 'left' ? {
-  marginRight: '32px'
-} : {
-  marginLeft: '16px'
+})(_ref3 => {
+  let {
+    chevronPosition
+  } = _ref3;
+  return chevronPosition === 'left' ? {
+    marginRight: '32px'
+  } : {
+    marginLeft: '16px'
+  };
 });
-const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
-  parentIndex,
-  headerLevel,
-  chevronPosition,
-  panelId,
-  id,
-  isExpanded = false,
-  children,
-  toggleExpanded,
-  disabled,
-  ...props
-}, ref) {
+const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4, ref) {
+  let {
+    parentIndex,
+    headerLevel,
+    chevronPosition,
+    panelId,
+    id,
+    isExpanded = false,
+    children,
+    toggleExpanded,
+    disabled,
+    ...props
+  } = _ref4;
+
   const handleClick = () => {
     if (!disabled) {
       toggleExpanded();

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

@@ -1,24 +1,26 @@
 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:", ";"], ({
-  isExpanded,
-  disabled
-}) => {
-  var _tokens$entities$head;
+})(_ref => {
+  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';
+  let {
+    theme,
+    isExpanded,
+    disabled
+  } = _ref;
+  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,
-  disabled,
-  children
-}, ref) {
+const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
+  let {
+    isExpanded,
+    disabled,
+    children
+  } = _ref2;
   return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, {
     ref: ref,
     isExpanded: isExpanded,

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

@@ -1,16 +1,17 @@
 import { forwardRef, useState, Children, cloneElement, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
-  headerLevel,
-  chevronPosition,
-  index = 0,
-  accordionId,
-  isExpanded,
-  children,
-  disabled,
-  ...props
-}, ref) {
+const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
+  let {
+    headerLevel,
+    chevronPosition,
+    index = 0,
+    accordionId,
+    isExpanded,
+    children,
+    disabled,
+    ...props
+  } = _ref;
   const [expanded, setExpanded] = useState(isExpanded);
 
   const toggleExpanded = () => {

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

@@ -1,32 +1,40 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { accordion } from './Accordion.tokens.js';
+import styled, { css } from 'styled-components';
+import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
 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
-}) => ({
-  role: 'region',
-  'aria-labelledby': headerId
-})).withConfig({
+const StyledAccordionPanel = styled.div.attrs(_ref => {
+  let {
+    headerId
+  } = _ref;
+  return {
+    role: 'region',
+    'aria-labelledby': headerId
+  };
+}).withConfig({
   displayName: "AccordionPanel__StyledAccordionPanel",
   componentId: "sc-suplv4-0"
-})(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(accordion.border), spacingsTemplate(panel.spacings), header.background);
-const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel({
-  id,
-  headerId,
-  hidden,
-  children,
-  ...props
-}, ref) {
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  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(_ref3, ref) {
+  let {
+    id,
+    headerId,
+    hidden,
+    children,
+    ...props
+  } = _ref3;
   return /*#__PURE__*/jsx(StyledAccordionPanel, {
     headerId: headerId,
     id: id,

package/dist/esm/components/Avatar/Avatar.js

@@ -1,28 +1,35 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { avatar } from './Avatar.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const StyledAvatar = styled.div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
-})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), ({
-  size
-}) => css(["height:", "px;width:", "px;"], size, size));
+})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), _ref => {
+  let {
+    size
+  } = _ref;
+  return css(["height:", "px;width:", "px;"], size, size);
+});
 const StyledImage = styled.img.withConfig({
   displayName: "Avatar__StyledImage",
   componentId: "sc-r7n7on-1"
-})(["height:100%;text-align:center;color:transparent;", ";"], ({
-  disabled
-}) => disabled && css(["opacity:", ";"], avatar.states.disabled.opacity));
-const Avatar = /*#__PURE__*/forwardRef(function Avatar({
-  src = null,
-  alt,
-  size = 24,
-  disabled = false,
-  ...rest
-}, ref) {
+})(["height:100%;text-align:center;color:transparent;", ";"], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css(["opacity:", ";"], avatar.states.disabled.opacity);
+});
+const Avatar = /*#__PURE__*/forwardRef(function Avatar(_ref3, ref) {
+  let {
+    src = null,
+    alt,
+    size = 24,
+    disabled = false,
+    ...rest
+  } = _ref3;
   return /*#__PURE__*/jsx(StyledAvatar, {
     size: size,
     disabled: disabled,

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

@@ -1,33 +1,36 @@
 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 { spacingsTemplate, useToken } from '@equinor/eds-utils';
+import { enabled } from './Banner.tokens.js';
 import { BannerIcon } from './BannerIcon.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
+import { useEds } from '../EdsProvider/eds.context.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), ({
-  hasIcon
-}) => hasIcon ? 'min-content 1fr auto' : '1fr auto', enabled.background);
+})(_ref => {
+  let {
+    theme,
+    hasIcon
+  } = _ref;
+  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"
 })(["margin:0;height:2px;"]);
-const Banner = /*#__PURE__*/forwardRef(function Banner({
-  children,
-  className,
-  ...rest
-}, ref) {
+const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
   const childrenWhereBannerIcon = Children.map(children, child => {
     return /*#__PURE__*/isValidElement(child) && child.type === BannerIcon;
   });
@@ -36,15 +39,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,27 +1,26 @@
 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, ({
-  placement
-}) => placement === 'bottom' ? '1/-1' : 'auto', ({
-  placement
-}) => placement === 'bottom' && {
-  marginTop: enabled.spacings.top,
-  marginLeft: '0'
+})(_ref => {
+  let {
+    theme,
+    placement
+  } = _ref;
+  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,
-  placement = 'left',
-  ...rest
-}, ref) {
+const BannerActions = /*#__PURE__*/forwardRef(function BannerActions(_ref2, ref) {
+  let {
+    children,
+    placement = 'left',
+    ...rest
+  } = _ref2;
   const props = {
     ref,
     ...rest

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

@@ -1,26 +1,30 @@
 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 { bordersTemplate } from '@equinor/eds-utils';
 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), ({
-  variant
-}) => variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, enabled.entities.icon.width, enabled.entities.icon.height, enabled.spacings.right);
-const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon({
-  children,
-  variant = 'info',
-  ...rest
-}, ref) {
+})(_ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  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(_ref2, ref) {
+  let {
+    children,
+    variant = 'info',
+    ...rest
+  } = _ref2;
   const childrenWithColor = Children.map(children, child => {
     const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
     return /*#__PURE__*/isValidElement(child) && child.type === Icon && /*#__PURE__*/cloneElement(child, {

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

@@ -7,10 +7,11 @@ const StyledBannerMessage = styled(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
-const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage({
-  children,
-  ...rest
-}, ref) {
+const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage(_ref, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const props = {
     ref,
     ...rest

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -12,17 +12,21 @@ const {
 const StyledTypography = styled(Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
-})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography.color, ({
-  maxWidth
-}) => css({
-  maxWidth
-}));
-const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
-  children,
-  maxWidth,
-  href,
-  ...other
-}, ref) {
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography.color, _ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return css({
+    maxWidth
+  });
+});
+const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
+  let {
+    children,
+    maxWidth,
+    href,
+    ...other
+  } = _ref2;
   const props = { ...other,
     href,
     ref,
@@ -33,7 +37,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
 
   const crumb = /*#__PURE__*/jsx(StyledTypography, {
     link: isHrefDefined,
-    as: isHrefDefined ? null : 'span',
+    forwardedAs: isHrefDefined ? null : 'span',
     variant: "body_short",
     ...props,
     children: children