@equinor/eds-core-react 0.35.1 → 0.36.1

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

@@ -1,46 +1,76 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-var buttonTypography = tokens.typography.navigation.button,
-  _tokens$colors$intera = tokens.colors.interactive,
-  disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
-  disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
-  disabledColor = _tokens$colors$intera.disabled__fill.rgba,
-  medium = tokens.spacings.comfortable.medium,
-  _tokens$shape = tokens.shape,
-  _tokens$shape$button = _tokens$shape.button,
-  buttonHeight = _tokens$shape$button.minHeight,
-  buttonBorderRadius = _tokens$shape$button.borderRadius,
-  compactButtonHeight = _tokens$shape._modes.compact.button.minHeight,
-  outline = tokens.interactions.focused,
-  _tokens$clickbounds = tokens.clickbounds,
-  clicboundHeight = _tokens$clickbounds.default__base,
-  compactClickboundHeight = _tokens$clickbounds.compact__standard;
-var button = {
+const {
+  typography: {
+    navigation: {
+      button: buttonTypography
+    }
+  },
+  colors: {
+    interactive: {
+      disabled__text: {
+        rgba: disabledTextColor
+      },
+      disabled__border: {
+        rgba: disabledBorderColor
+      },
+      disabled__fill: {
+        rgba: disabledColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium
+    }
+  },
+  shape: {
+    button: {
+      minHeight: buttonHeight,
+      borderRadius: buttonBorderRadius
+    },
+    _modes: {
+      compact: {
+        button: {
+          minHeight: compactButtonHeight
+        }
+      }
+    }
+  },
+  interactions: {
+    focused: outline
+  },
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  }
+} = tokens;
+const button = {
   background: 'transparent',
-  height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
-  typography: _objectSpread(_objectSpread({}, buttonTypography), {}, {
+  height: `var(--eds_button__height, ${buttonHeight})`,
+  typography: {
+    ...buttonTypography,
     textAlign: 'center',
-    fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
-  }),
+    fontSize: `var(--eds_button__font_size, ${buttonTypography.fontSize})`
+  },
   border: {
     type: 'border',
-    width: "var(--eds_button__border_width, 1px)",
+    width: `var(--eds_button__border_width, 1px)`,
     color: 'transparent',
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
     style: 'solid'
   },
   spacings: {
     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, ")")
+    left: `var(--eds_button__padding_x, ${medium})`,
+    right: `var(--eds_button__padding_x, ${medium})`
   },
   clickbound: {
     height: clicboundHeight,
     width: '100%',
     offset: {
-      top: "".concat((parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1, "px"),
+      top: `${(parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1}px`,
       left: '0'
     }
   },
@@ -56,7 +86,7 @@ var button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
+        radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
         style: 'solid'
       }
     },
@@ -77,15 +107,16 @@ var button = {
         color: disabledBorderColor,
         style: 'solid'
       },
-      typography: _objectSpread(_objectSpread({}, buttonTypography), {}, {
+      typography: {
+        ...buttonTypography,
         color: disabledTextColor,
         textAlign: 'center'
-      })
+      }
     }
   },
   modes: {
     compact: {
-      height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
+      height: `var(--eds_button__height_compact, ${compactButtonHeight})`,
       spacings: {
         top: 'var(--eds_button__padding_y_compact, 0)',
         bottom: 'var(--eds_button__padding_y_compact, 0)'
@@ -94,7 +125,7 @@ var button = {
         height: compactClickboundHeight,
         width: '100%',
         offset: {
-          top: "".concat((parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
+          top: `${(parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1}px`,
           left: '0'
         }
       }

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

@@ -2,17 +2,41 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
-var _tokens$colors = tokens.colors,
-  primaryWhite = _tokens$colors.text.static_icons__primary_white.rgba,
-  _tokens$colors$intera = _tokens$colors.interactive,
-  primaryColor = _tokens$colors$intera.primary__resting.rgba,
-  primaryHoverColor = _tokens$colors$intera.primary__hover.rgba,
-  secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
-  secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
-  dangerColor = _tokens$colors$intera.danger__resting.rgba,
-  dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
-  buttonBorderRadius = tokens.shape.button.borderRadius;
-var primary = mergeDeepRight(button, {
+const {
+  colors: {
+    text: {
+      static_icons__primary_white: {
+        rgba: primaryWhite
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover: {
+        rgba: primaryHoverColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      }
+    }
+  },
+  shape: {
+    button: {
+      borderRadius: buttonBorderRadius
+    }
+  }
+} = tokens;
+const primary = mergeDeepRight(button, {
   background: primaryColor,
   typography: {
     color: primaryWhite
@@ -22,7 +46,7 @@ var primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {
@@ -30,7 +54,7 @@ var primary = mergeDeepRight(button, {
     }
   }
 });
-var secondary = mergeDeepRight(primary, {
+const secondary = mergeDeepRight(primary, {
   background: secondaryColor,
   border: {
     color: secondaryColor
@@ -44,7 +68,7 @@ var secondary = mergeDeepRight(primary, {
     }
   }
 });
-var danger = mergeDeepRight(primary, {
+const danger = mergeDeepRight(primary, {
   background: dangerColor,
   border: {
     color: dangerColor

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

@@ -2,11 +2,14 @@ import { tokens } from '@equinor/eds-tokens';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
-var _tokens$clickbounds = tokens.clickbounds,
-  clicboundHeight = _tokens$clickbounds.default__base,
-  compactClickboundHeight = _tokens$clickbounds.compact__standard,
-  shape = tokens.shape;
-var contained_icon = {
+const {
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape
+} = tokens;
+const contained_icon = {
   height: shape.icon_button.minHeight,
   width: shape.icon_button.minWidth,
   border: {
@@ -21,7 +24,7 @@ var contained_icon = {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt('40px')) / 2}px`
     }
   },
   states: {
@@ -40,14 +43,14 @@ var contained_icon = {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }
   }
 };
-var primary = mergeDeepRight(primary$1, contained_icon);
-var secondary = mergeDeepRight(secondary$1, contained_icon);
-var danger = mergeDeepRight(danger$1, contained_icon);
+const primary = mergeDeepRight(primary$1, contained_icon);
+const secondary = mergeDeepRight(secondary$1, contained_icon);
+const danger = mergeDeepRight(danger$1, contained_icon);
 
 export { danger, primary, secondary };

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

@@ -2,17 +2,40 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
-var _tokens$colors$intera = tokens.colors.interactive,
-  primaryColor = _tokens$colors$intera.primary__resting.rgba,
-  primaryHoverColor = _tokens$colors$intera.primary__hover.rgba,
-  primaryHoverAltColor = _tokens$colors$intera.primary__hover_alt.rgba,
-  secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
-  secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
-  secondaryHoverAltColor = _tokens$colors$intera.secondary__highlight.rgba,
-  dangerColor = _tokens$colors$intera.danger__resting.rgba,
-  dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
-  dangerHoverAltColor = _tokens$colors$intera.danger__highlight.rgba;
-var primary = mergeDeepRight(button, {
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover: {
+        rgba: primaryHoverColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAltColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      secondary__highlight: {
+        rgba: secondaryHoverAltColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      },
+      danger__highlight: {
+        rgba: dangerHoverAltColor
+      }
+    }
+  }
+} = tokens;
+const primary = mergeDeepRight(button, {
   typography: {
     color: primaryColor
   },
@@ -31,7 +54,7 @@ var primary = mergeDeepRight(button, {
     }
   }
 });
-var secondary = mergeDeepRight(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -44,7 +67,7 @@ var secondary = mergeDeepRight(primary, {
     }
   }
 });
-var danger = mergeDeepRight(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -2,21 +2,47 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
-var _tokens$colors$intera = tokens.colors.interactive,
-  primaryColor = _tokens$colors$intera.primary__resting.rgba,
-  primaryHoverAltColor = _tokens$colors$intera.primary__hover_alt.rgba,
-  secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
-  secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
-  secondaryHoverAltColor = _tokens$colors$intera.secondary__highlight.rgba,
-  dangerColor = _tokens$colors$intera.danger__resting.rgba,
-  dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
-  dangerHoverAltColor = _tokens$colors$intera.danger__highlight.rgba,
-  _tokens$clickbounds = tokens.clickbounds,
-  clicboundHeight = _tokens$clickbounds.default__base,
-  compactClickboundHeight = _tokens$clickbounds.compact__standard,
-  shape = tokens.shape,
-  focusOutlineWidth = tokens.interactions.focused.width;
-var primary = mergeDeepRight(button, {
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAltColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      secondary__highlight: {
+        rgba: secondaryHoverAltColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      },
+      danger__highlight: {
+        rgba: dangerHoverAltColor
+      }
+    }
+  },
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape,
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
+  }
+} = tokens;
+const primary = mergeDeepRight(button, {
   height: shape.icon_button.minHeight,
   width: shape.icon_button.minWidth,
   typography: {
@@ -35,7 +61,7 @@ var primary = mergeDeepRight(button, {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px`
     }
   },
   states: {
@@ -54,7 +80,7 @@ var primary = mergeDeepRight(button, {
     },
     focus: {
       outline: {
-        offset: "-".concat(parseInt(focusOutlineWidth), "px")
+        offset: `-${parseInt(focusOutlineWidth)}px`
       }
     }
   },
@@ -66,13 +92,13 @@ var primary = mergeDeepRight(button, {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }
   }
 });
-var secondary = mergeDeepRight(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -85,7 +111,7 @@ var secondary = mergeDeepRight(primary, {
     }
   }
 });
-var danger = mergeDeepRight(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -4,7 +4,7 @@ import { primary as primary$2, secondary as secondary$2, danger as danger$2 } fr
 import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
 import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './contained_icon.js';
 
-var token = {
+const token = {
   primary: {
     contained: primary,
     outlined: primary$1,

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

@@ -2,18 +2,45 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.1/node_modules/ramda/es/mergeDeepRight.js';
 
-var _tokens$colors$intera = tokens.colors.interactive,
-  primaryColor = _tokens$colors$intera.primary__resting.rgba,
-  primaryHoverColor = _tokens$colors$intera.primary__hover.rgba,
-  primaryHoverAltColor = _tokens$colors$intera.primary__hover_alt.rgba,
-  secondaryColor = _tokens$colors$intera.secondary__resting.rgba,
-  secondaryHoverColor = _tokens$colors$intera.secondary__link_hover.rgba,
-  secondaryHoverAltColor = _tokens$colors$intera.secondary__highlight.rgba,
-  dangerColor = _tokens$colors$intera.danger__resting.rgba,
-  dangerHoverColor = _tokens$colors$intera.danger__hover.rgba,
-  dangerHoverAltColor = _tokens$colors$intera.danger__highlight.rgba,
-  buttonBorderRadius = tokens.shape.button.borderRadius;
-var primary = mergeDeepRight(button, {
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover: {
+        rgba: primaryHoverColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAltColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      secondary__highlight: {
+        rgba: secondaryHoverAltColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      },
+      danger__highlight: {
+        rgba: dangerHoverAltColor
+      }
+    }
+  },
+  shape: {
+    button: {
+      borderRadius: buttonBorderRadius
+    }
+  }
+} = tokens;
+const primary = mergeDeepRight(button, {
   typography: {
     color: primaryColor
   },
@@ -22,7 +49,7 @@ var primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {
@@ -42,7 +69,7 @@ var primary = mergeDeepRight(button, {
     }
   }
 });
-var secondary = mergeDeepRight(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -61,7 +88,7 @@ var secondary = mergeDeepRight(primary, {
     }
   }
 });
-var danger = mergeDeepRight(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -1,40 +1,37 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import * as Card_tokens from './Card.tokens.js';
-import { primary as primary$1 } from './Card.tokens.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 
-var _excluded = ["children", "variant", "elevation"];
-var primary = primary$1;
-var StyledCard = styled(Paper).withConfig({
+const {
+  primary
+} = Card_tokens;
+const StyledCard = styled(Paper).withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], function (_ref) {
-  var $background = _ref.$background;
-  return $background;
-}, bordersTemplate(primary.border));
-var Card = /*#__PURE__*/forwardRef(function Card(_ref2, ref) {
-  var children = _ref2.children,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-    _ref2$elevation = _ref2.elevation,
-    elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var cardVariant = variant === 'default' ? 'primary' : variant;
-  var token = Card_tokens[cardVariant];
-  var props = _objectSpread({
-    ref: ref,
-    $background: token.background
-  }, rest);
-  return /*#__PURE__*/jsx(StyledCard, _objectSpread(_objectSpread({
-    elevation: elevation
-  }, props), {}, {
+})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], ({
+  $background
+}) => $background, bordersTemplate(primary.border));
+const Card = /*#__PURE__*/forwardRef(function Card({
+  children,
+  variant = 'default',
+  elevation = 'none',
+  ...rest
+}, ref) {
+  const cardVariant = variant === 'default' ? 'primary' : variant;
+  const token = Card_tokens[cardVariant];
+  const props = {
+    ref,
+    $background: token.background,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledCard, {
+    elevation: elevation,
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { Card };

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

@@ -1,13 +1,34 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors$ui = tokens.colors.ui,
-  background = _tokens$colors$ui.background__default.rgba,
-  backgroundInfo = _tokens$colors$ui.background__info.rgba,
-  backgroundWarning = _tokens$colors$ui.background__warning.rgba,
-  backgroundDanger = _tokens$colors$ui.background__danger.rgba,
-  spacingMedium = tokens.spacings.comfortable.medium,
-  borderRadius = tokens.shape.corners.borderRadius;
-var primary = {
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      },
+      background__info: {
+        rgba: backgroundInfo
+      },
+      background__warning: {
+        rgba: backgroundWarning
+      },
+      background__danger: {
+        rgba: backgroundDanger
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const primary = {
   background: background,
   border: {
     type: 'border',
@@ -20,13 +41,13 @@ var primary = {
     top: spacingMedium
   }
 };
-var info = {
+const info = {
   background: backgroundInfo
 };
-var danger = {
+const danger = {
   background: backgroundDanger
 };
-var warning = {
+const warning = {
   background: backgroundWarning
 };