@equinor/eds-core-react 0.23.0 → 0.24.0-dev.20221006

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

@@ -2,41 +2,17 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
-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, {
+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, {
   background: primaryColor,
   typography: {
     color: primaryWhite
@@ -46,7 +22,7 @@ const primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
   },
   states: {
     hover: {
@@ -54,7 +30,7 @@ const primary = mergeDeepRight(button, {
     }
   }
 });
-const secondary = mergeDeepRight(primary, {
+var secondary = mergeDeepRight(primary, {
   background: secondaryColor,
   border: {
     color: secondaryColor
@@ -68,7 +44,7 @@ const secondary = mergeDeepRight(primary, {
     }
   }
 });
-const danger = mergeDeepRight(primary, {
+var danger = mergeDeepRight(primary, {
   background: dangerColor,
   border: {
     color: dangerColor

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

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

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

@@ -2,40 +2,17 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
-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, {
+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, {
   typography: {
     color: primaryColor
   },
@@ -54,7 +31,7 @@ const primary = mergeDeepRight(button, {
     }
   }
 });
-const secondary = mergeDeepRight(primary, {
+var secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -67,7 +44,7 @@ const secondary = mergeDeepRight(primary, {
     }
   }
 });
-const danger = mergeDeepRight(primary, {
+var danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -2,47 +2,21 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
-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, {
+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, {
   height: shape.icon_button.minHeight,
   width: shape.icon_button.minWidth,
   typography: {
@@ -61,7 +35,7 @@ const primary = mergeDeepRight(button, {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px`
+      left: "".concat((parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2, "px")
     }
   },
   states: {
@@ -80,7 +54,7 @@ const primary = mergeDeepRight(button, {
     },
     focus: {
       outline: {
-        offset: `-${parseInt(focusOutlineWidth)}px`
+        offset: "-".concat(parseInt(focusOutlineWidth), "px")
       }
     }
   },
@@ -92,13 +66,13 @@ const primary = mergeDeepRight(button, {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
         }
       }
     }
   }
 });
-const secondary = mergeDeepRight(primary, {
+var secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -111,7 +85,7 @@ const secondary = mergeDeepRight(primary, {
     }
   }
 });
-const danger = mergeDeepRight(primary, {
+var 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';
 
-const token = {
+var token = {
   primary: {
     contained: primary,
     outlined: primary$1,

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

@@ -2,45 +2,18 @@ import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
-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, {
+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, {
   typography: {
     color: primaryColor
   },
@@ -49,7 +22,7 @@ const primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
   },
   states: {
     hover: {
@@ -69,7 +42,7 @@ const primary = mergeDeepRight(button, {
     }
   }
 });
-const secondary = mergeDeepRight(primary, {
+var secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -88,7 +61,7 @@ const secondary = mergeDeepRight(primary, {
     }
   }
 });
-const danger = mergeDeepRight(primary, {
+var danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

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

@@ -1,41 +1,43 @@
+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';
 
-const {
-  primary
-} = Card_tokens;
-const StyledCard = styled(Paper).withConfig({
+var _excluded = ["children", "variant", "elevation"];
+var primary = primary$1;
+var 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;", ";"], _ref => {
-  let {
-    background
-  } = _ref;
+})(["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));
-const Card = /*#__PURE__*/forwardRef(function Card(_ref2, ref) {
-  let {
-    children,
-    variant = 'default',
-    elevation = 'none',
-    ...rest
-  } = _ref2;
-  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,
+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), {}, {
     children: children
-  });
+  }));
 });
 
 export { Card };

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

@@ -1,34 +1,13 @@
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
 
-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$1;
-const primary = {
+var _tokens$colors$ui = tokens$1.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$1.spacings.comfortable.medium,
+    borderRadius = tokens$1.shape.corners.borderRadius;
+var primary = {
   background: background,
   border: {
     type: 'border',
@@ -41,13 +20,13 @@ const primary = {
     top: spacingMedium
   }
 };
-const info = {
+var info = {
   background: backgroundInfo
 };
-const danger = {
+var danger = {
   background: backgroundDanger
 };
-const warning = {
+var warning = {
   background: backgroundWarning
 };
 

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

@@ -1,40 +1,41 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { primary } from './Card.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-const {
-  spacings
-} = primary;
-const StyledCardActions = styled.div.withConfig({
+var _excluded = ["children", "alignRight", "meta"];
+var spacings = primary.spacings;
+var 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 ", ";margin-top:auto;:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
-  let {
-    justifyContent
-  } = _ref;
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], function (_ref) {
+  var justifyContent = _ref.justifyContent;
   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,
-    justifyContent,
-    ...rest
-  };
-  return /*#__PURE__*/jsxs(StyledCardActions, { ...props,
+var CardActions = /*#__PURE__*/forwardRef(function CardActions(_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$alignRight = _ref2.alignRight,
+      alignRight = _ref2$alignRight === void 0 ? false : _ref2$alignRight,
+      _ref2$meta = _ref2.meta,
+      meta = _ref2$meta === void 0 ? '' : _ref2$meta,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var justifyContent = alignRight ? 'flex-end' : 'flex-start';
+
+  var props = _objectSpread({
+    ref: ref,
+    justifyContent: justifyContent
+  }, rest);
+
+  return /*#__PURE__*/jsxs(StyledCardActions, _objectSpread(_objectSpread({}, props), {}, {
     children: [children, meta !== '' && /*#__PURE__*/jsx(Typography, {
       variant: "caption",
       children: meta
     })]
-  });
+  }));
 });
 
 export { CardActions };

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

@@ -1,25 +1,25 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { primary } from './Card.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  spacings
-} = primary;
-const StyledCardContent = styled.div.withConfig({
+var _excluded = ["children"];
+var spacings = primary.spacings;
+var 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(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/jsx(StyledCardContent, {
-    ref: ref,
-    ...props,
+var CardContent = /*#__PURE__*/forwardRef(function CardContent(_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledCardContent, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     children: children
-  });
+  }));
 });
 
 export { CardContent };