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

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 };

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

@@ -1,26 +1,27 @@
+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 StyledCardHeader = styled.div.withConfig({
+var _excluded = ["children"];
+var spacings = primary.spacings;
+var 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(_ref, ref) {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  const props = { ...rest,
-    ref
-  };
-  return /*#__PURE__*/jsx(StyledCardHeader, { ...props,
-    children: children
+var CardHeader = /*#__PURE__*/forwardRef(function CardHeader(_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
   });
+
+  return /*#__PURE__*/jsx(StyledCardHeader, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
 });
 
 export { CardHeader };

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

@@ -1,22 +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 { jsx } from 'react/jsx-runtime';
 
-const StyledCardHeaderTitle = styled.div.withConfig({
+var _excluded = ["children"];
+var 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(_ref, ref) {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  const props = { ...rest,
-    ref
-  };
-  return /*#__PURE__*/jsx(StyledCardHeaderTitle, { ...props,
-    children: children
+var CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle(_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
   });
+
+  return /*#__PURE__*/jsx(StyledCardHeaderTitle, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
 });
 
 export { CardHeaderTitle };

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

@@ -1,34 +1,34 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { primary } from './Card.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  spacings,
-  border
-} = primary;
-const StyledCardMedia = styled.div.withConfig({
+var _excluded = ["children", "fullWidth"];
+var spacings = primary.spacings,
+    border = primary.border;
+var StyledCardMedia = styled.div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
-})(["display:flex;width:auto;", ""], _ref => {
-  let {
-    fullWidth
-  } = _ref;
+})(["display:flex;width:auto;", ""], function (_ref) {
+  var fullWidth = _ref.fullWidth;
   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
-  };
-  return /*#__PURE__*/jsx(StyledCardMedia, { ...props,
-    children: children
+var CardMedia = /*#__PURE__*/forwardRef(function CardMedia(_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$fullWidth = _ref2.fullWidth,
+      fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
+    fullWidth: fullWidth
   });
+
+  return /*#__PURE__*/jsx(StyledCardMedia, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
 });
 
 export { CardMedia };

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

@@ -5,7 +5,7 @@ import { CardMedia } from './CardMedia.js';
 import { CardHeader } from './CardHeader.js';
 import { CardHeaderTitle } from './CardHeaderTitle.js';
 
-const Card = Card$1;
+var Card = Card$1;
 Card.Actions = CardActions;
 Card.Content = CardContent;
 Card.Header = CardHeader;

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

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { checkbox } from './Checkbox.tokens.js';
@@ -5,47 +7,45 @@ import { typographyTemplate } from '@equinor/eds-utils';
 import { CheckboxInput } from './Input.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-/* eslint camelcase: "off" */
-const StyledLabel = styled.label.withConfig({
+var _excluded = ["label", "disabled", "indeterminate", "className", "style"];
+var StyledLabel = styled.label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
-})(["display:inline-flex;align-items:center;cursor:", ";"], _ref => {
-  let {
-    disabled
-  } = _ref;
+})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref) {
+  var disabled = _ref.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 });
-const LabelText = styled.span.withConfig({
+var LabelText = styled.span.withConfig({
   displayName: "Checkbox__LabelText",
   componentId: "sc-yg6l8h-1"
 })(["", ";"], typographyTemplate(checkbox.typography));
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
-  let {
-    label,
-    disabled = false,
-    indeterminate,
-    className,
-    style,
-    ...rest
-  } = _ref2;
+var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
+  var label = _ref2.label,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      indeterminate = _ref2.indeterminate,
+      className = _ref2.className,
+      style = _ref2.style,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
   return label ? /*#__PURE__*/jsxs(StyledLabel, {
     disabled: disabled,
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(CheckboxInput, { ...rest,
+    children: [/*#__PURE__*/jsx(CheckboxInput, _objectSpread(_objectSpread({}, rest), {}, {
       disabled: disabled,
       ref: ref,
       indeterminate: indeterminate
-    }), /*#__PURE__*/jsx(LabelText, {
+    })), /*#__PURE__*/jsx(LabelText, {
       children: label
     })]
-  }) : /*#__PURE__*/jsx(CheckboxInput, { ...rest,
+  }) : /*#__PURE__*/jsx(CheckboxInput, _objectSpread(_objectSpread({}, rest), {}, {
     className: className,
     style: style,
     disabled: disabled,
     ref: ref,
     indeterminate: indeterminate
-  });
+  }));
 });
 Checkbox.displayName = 'Checkbox';
 

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

@@ -1,44 +1,19 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    interactive: {
-      primary__resting: {
-        rgba: primaryColor
-      },
-      primary__hover_alt: {
-        rgba: primaryHoverAlt
-      },
-      focus: {
-        rgba: focusOutlineColor
-      },
-      disabled__text: {
-        rgba: disabledText
-      }
-    }
-  },
-  typography: {
-    navigation: {
-      menu_title: labelTypography
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium_small,
-      x_small
-    }
-  },
-  clickbounds: {
-    default__base: clicboundSize,
-    compact__standard: compactClickboundSize
-  },
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  }
-} = tokens;
-const checkbox = {
+var _tokens$colors$intera = tokens.colors.interactive,
+    primaryColor = _tokens$colors$intera.primary__resting.rgba,
+    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+    focusOutlineColor = _tokens$colors$intera.focus.rgba,
+    disabledText = _tokens$colors$intera.disabled__text.rgba,
+    labelTypography = tokens.typography.navigation.menu_title,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    medium_small = _tokens$spacings$comf.medium_small,
+    x_small = _tokens$spacings$comf.x_small,
+    _tokens$clickbounds = tokens.clickbounds,
+    clicboundSize = _tokens$clickbounds.default__base,
+    compactClickboundSize = _tokens$clickbounds.compact__standard,
+    focusOutlineWidth = tokens.interactions.focused.width;
+var checkbox = {
   background: primaryColor,
   typography: labelTypography,
   spacings: {

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

@@ -1,3 +1,6 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
@@ -6,11 +9,9 @@ import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils'
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-/* eslint camelcase: "off" */
-const StyledPath = styled.path.attrs(_ref => {
-  let {
-    icon
-  } = _ref;
+var _excluded = ["disabled", "indeterminate", "style", "className"];
+var StyledPath = styled.path.attrs(function (_ref) {
+  var icon = _ref.icon;
   return {
     fillRule: 'evenodd',
     clipRule: 'evenodd',
@@ -20,106 +21,90 @@ const StyledPath = styled.path.attrs(_ref => {
   displayName: "Input__StyledPath",
   componentId: "sc-rqj7qf-0"
 })([""]);
-const Input = styled.input.attrs(_ref2 => {
-  let {
-    type = 'checkbox'
-  } = _ref2;
+var Input = styled.input.attrs(function (_ref2) {
+  var _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'checkbox' : _ref2$type;
   return {
-    type
+    type: type
   };
 }).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], _ref3 => {
-  let {
-    theme,
-    iconSize
-  } = _ref3;
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
+  var theme = _ref3.theme,
+      iconSize = _ref3.iconSize;
   return parseFloat(theme.clickbound.height) / iconSize;
-}, _ref4 => {
-  let {
-    disabled
-  } = _ref4;
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
   return disabled ? 'not-allowed' : 'pointer';
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return outlineTemplate(theme.states.focus.outline);
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
+}, function (_ref6) {
+  var theme = _ref6.theme;
   return outlineTemplate(theme.states.focus.outline);
 });
-const Svg = styled.svg.attrs(_ref7 => {
-  let {
-    height,
-    width,
-    fill
-  } = _ref7;
+var Svg = styled.svg.attrs(function (_ref7) {
+  var height = _ref7.height,
+      width = _ref7.width,
+      fill = _ref7.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height,
-    width,
-    fill
+    height: height,
+    width: width,
+    fill: fill
   };
 }).withConfig({
   displayName: "Input__Svg",
   componentId: "sc-rqj7qf-2"
 })(["grid-area:input;pointer-events:none;"]);
-const InputWrapper = styled.span.withConfig({
+var InputWrapper = styled.span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], _ref8 => {
-  let {
-    theme
-  } = _ref8;
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref8) {
+  var theme = _ref8.theme;
   return spacingsTemplate(theme.spacings);
-}, _ref9 => {
-  let {
-    disabled
-  } = _ref9;
+}, function (_ref9) {
+  var disabled = _ref9.disabled;
   return disabled ? 'transparent' : checkbox.states.hover.background;
 });
-const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref) {
-  let {
-    disabled = false,
-    indeterminate,
-    style,
-    className,
-    ...rest
-  } = _ref10;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref) {
+  var _ref10$disabled = _ref10.disabled,
+      disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+      indeterminate = _ref10.indeterminate,
+      style = _ref10.style,
+      className = _ref10.className,
+      rest = _objectWithoutProperties(_ref10, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, checkbox);
-  const iconSize = 24;
-  const fill = disabled ? checkbox.states.disabled.background : checkbox.background;
-  const inputWrapperProps = {
-    disabled,
-    style,
-    className
-  };
-  const inputProps = {
-    ref,
-    disabled,
-    ['data-indeterminate']: indeterminate,
-    ...rest
+  var iconSize = 24;
+  var fill = disabled ? checkbox.states.disabled.background : checkbox.background;
+  var inputWrapperProps = {
+    disabled: disabled,
+    style: style,
+    className: className
   };
+
+  var inputProps = _objectSpread(_defineProperty({
+    ref: ref,
+    disabled: disabled
+  }, 'data-indeterminate', indeterminate), rest);
+
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(InputWrapper, { ...inputWrapperProps,
-      children: [/*#__PURE__*/jsx(Input, {
-        iconSize: iconSize,
-        ...inputProps
-      }), indeterminate ? /*#__PURE__*/jsx(Svg, {
+    children: /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({}, inputWrapperProps), {}, {
+      children: [/*#__PURE__*/jsx(Input, _objectSpread({
+        iconSize: iconSize
+      }, inputProps)), indeterminate ? /*#__PURE__*/jsx(Svg, {
         width: iconSize,
         height: iconSize,
-        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsx(StyledPath, {
@@ -129,7 +114,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
       }) : /*#__PURE__*/jsxs(Svg, {
         width: iconSize,
         height: iconSize,
-        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsx(StyledPath, {
@@ -140,7 +125,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
           name: "not-checked"
         })]
       })]
-    })
+    }))
   });
 });