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

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

@@ -1,9 +1,9 @@
 import { forwardRef, useState, Children, Fragment } from 'react';
 import styled from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 
 const {
   spacings,
@@ -26,11 +26,12 @@ const Collapsed = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states.hover.typography.color, typography.color);
-const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs({
-  children,
-  collapse,
-  ...rest
-}, ref) {
+const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
+  let {
+    children,
+    collapse,
+    ...rest
+  } = _ref;
   const props = { ...rest,
     ref
   };

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

@@ -1,13 +1,10 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { token } from './tokens/index.js';
+import { spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
 import { InnerFullWidth } from './InnerFullWidth.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {
@@ -43,15 +40,16 @@ 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"
-})(({
-  theme
-}) => {
+})(_ref => {
   var _clickbound$offset, _clickbound$offset2, _hover$typography;
 
+  let {
+    theme
+  } = _ref;
   const {
     states,
     clickbound
@@ -63,16 +61,17 @@ const ButtonBase = styled.button.withConfig({
   } = states;
   return css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
-const Button = /*#__PURE__*/forwardRef(function Button({
-  color = 'primary',
-  variant = 'contained',
-  children,
-  disabled = false,
-  href,
-  tabIndex = 0,
-  fullWidth = false,
-  ...other
-}, ref) {
+const Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
+  let {
+    color = 'primary',
+    variant = 'contained',
+    children,
+    disabled = false,
+    href,
+    tabIndex = 0,
+    fullWidth = false,
+    ...other
+  } = _ref2;
   const {
     density
   } = useEds();

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

@@ -9,10 +9,11 @@ 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;}"]);
-const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
-  children
-}, ref) {
+})(["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(_ref, ref) {
+  let {
+    children
+  } = _ref;
   // We need everything in elements for proper flexing 💪
   const updatedChildren = Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsx(FullWidthCenterContent, {
     children: child

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/Button/tokens/contained.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   colors: {
@@ -36,7 +36,7 @@ const {
     }
   }
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   background: primaryColor,
   typography: {
     color: primaryWhite
@@ -46,7 +46,7 @@ const primary = mergeDeepRight_1(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: buttonBorderRadius
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
   },
   states: {
     hover: {
@@ -54,7 +54,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   background: secondaryColor,
   border: {
     color: secondaryColor
@@ -68,7 +68,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   background: dangerColor,
   border: {
     color: dangerColor

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -35,7 +35,7 @@ const {
     }
   }
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   typography: {
     color: primaryColor
   },
@@ -54,7 +54,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -67,7 +67,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -37,7 +37,7 @@ const {
   },
   shape
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   height: shape.icon_button.minHeight,
   width: shape.icon_button.minWidth,
   typography: {
@@ -93,7 +93,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -106,7 +106,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -40,7 +40,7 @@ const {
     }
   }
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   typography: {
     color: primaryColor
   },
@@ -49,7 +49,7 @@ const primary = mergeDeepRight_1(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: buttonBorderRadius
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
   },
   states: {
     hover: {
@@ -69,7 +69,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -88,7 +88,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

package/dist/esm/components/Card/Card.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import * as Card_tokens from './Card.tokens.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const {
   primary
@@ -10,17 +10,24 @@ const {
 const StyledCard = styled.div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], ({
-  background
-}) => background, ({
-  cursor
-}) => cursor, bordersTemplate(primary.border));
-const Card = /*#__PURE__*/forwardRef(function Card({
-  children,
-  variant = 'default',
-  onClick,
-  ...rest
-}, ref) {
+})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], _ref => {
+  let {
+    background
+  } = _ref;
+  return background;
+}, _ref2 => {
+  let {
+    cursor
+  } = _ref2;
+  return cursor;
+}, bordersTemplate(primary.border));
+const Card = /*#__PURE__*/forwardRef(function Card(_ref3, ref) {
+  let {
+    children,
+    variant = 'default',
+    onClick,
+    ...rest
+  } = _ref3;
   const cursor = onClick ? 'pointer' : 'default';
   const cardVariant = variant === 'default' ? 'primary' : variant;
   const token = Card_tokens[cardVariant];

package/dist/esm/components/Card/CardActions.js

@@ -10,15 +10,19 @@ const {
 const StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], ({
-  justifyContent
-}) => justifyContent, spacings.right, spacings.left, spacings.top, spacings.bottom);
-const CardActions = /*#__PURE__*/forwardRef(function CardActions({
-  children,
-  alignRight = false,
-  meta = '',
-  ...rest
-}, ref) {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
+  let {
+    justifyContent
+  } = _ref;
+  return justifyContent;
+}, spacings.right, spacings.left, spacings.top, spacings.bottom);
+const CardActions = /*#__PURE__*/forwardRef(function CardActions(_ref2, ref) {
+  let {
+    children,
+    alignRight = false,
+    meta = '',
+    ...rest
+  } = _ref2;
   const justifyContent = alignRight ? 'flex-end' : 'flex-start';
   const props = {
     ref,

package/dist/esm/components/Card/CardContent.js

@@ -10,10 +10,11 @@ const StyledCardContent = styled.div.withConfig({
   displayName: "CardContent__StyledCardContent",
   componentId: "sc-esm4ym-0"
 })(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.bottom);
-const CardContent = /*#__PURE__*/forwardRef(function CardContent({
-  children,
-  ...props
-}, ref) {
+const CardContent = /*#__PURE__*/forwardRef(function CardContent(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledCardContent, {
     ref: ref,
     ...props,

package/dist/esm/components/Card/CardHeader.js

@@ -10,10 +10,11 @@ const StyledCardHeader = styled.div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
 })(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.left, spacings.top, spacings.bottom);
-const CardHeader = /*#__PURE__*/forwardRef(function CardHeader({
-  children,
-  ...rest
-}, ref) {
+const CardHeader = /*#__PURE__*/forwardRef(function CardHeader(_ref, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const props = { ...rest,
     ref
   };

package/dist/esm/components/Card/CardHeaderTitle.js

@@ -6,10 +6,11 @@ const StyledCardHeaderTitle = styled.div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
-const CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle({
-  children,
-  ...rest
-}, ref) {
+const CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle(_ref, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const props = { ...rest,
     ref
   };

package/dist/esm/components/Card/CardMedia.js

@@ -10,14 +10,18 @@ const {
 const StyledCardMedia = styled.div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
-})(["display:flex;width:auto;", ""], ({
-  fullWidth
-}) => fullWidth ? css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left));
-const CardMedia = /*#__PURE__*/forwardRef(function CardMedia({
-  children,
-  fullWidth = false,
-  ...rest
-}, ref) {
+})(["display:flex;width:auto;", ""], _ref => {
+  let {
+    fullWidth
+  } = _ref;
+  return fullWidth ? css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left);
+});
+const CardMedia = /*#__PURE__*/forwardRef(function CardMedia(_ref2, ref) {
+  let {
+    children,
+    fullWidth = false,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     ref,
     fullWidth

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

@@ -1,28 +1,32 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { checkbox } from './Checkbox.tokens.js';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { CheckboxInput } from './Input.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 /* eslint camelcase: "off" */
 const StyledLabel = styled.label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
-})(["display:inline-flex;align-items:center;cursor:", ";"], ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer');
+})(["display:inline-flex;align-items:center;cursor:", ";"], _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'pointer';
+});
 const LabelText = styled.span.withConfig({
   displayName: "Checkbox__LabelText",
   componentId: "sc-yg6l8h-1"
 })(["", ";"], typographyTemplate(checkbox.typography));
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
-  label,
-  disabled = false,
-  indeterminate,
-  className,
-  ...rest
-}, ref) {
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
+  let {
+    label,
+    disabled = false,
+    indeterminate,
+    className,
+    ...rest
+  } = _ref2;
   return label ? /*#__PURE__*/jsxs(StyledLabel, {
     disabled: disabled,
     className: className,