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

package/dist/esm/components/Dialog/DialogTitle.js

@@ -1,30 +1,30 @@
+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 { typographyTemplate } from '@equinor/eds-utils';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-const StyledDialogTitle = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledDialogTitle = styled.div.withConfig({
   displayName: "DialogTitle__StyledDialogTitle",
   componentId: "sc-1t3jljt-0"
-})(_ref => {
-  let {
-    theme,
-    children
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
   return css(["", " min-height:", ";align-self:end;justify-self:start;margin-right:", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, theme.entities.children.spacings.right, !children && css(["min-height:initial;height:'8px';"]));
 });
-const DialogTitle = /*#__PURE__*/forwardRef(function DialogTitle(_ref2, ref) {
-  let {
-    children,
-    ...rest
-  } = _ref2;
+var DialogTitle = /*#__PURE__*/forwardRef(function DialogTitle(_ref2, ref) {
+  var children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
   return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsx(StyledDialogTitle, {
+    children: /*#__PURE__*/jsx(StyledDialogTitle, _objectSpread(_objectSpread({
       id: "eds-dialog-title",
-      ref: ref,
-      ...rest,
+      ref: ref
+    }, rest), {}, {
       children: children
-    })
+    }))
   });
 });
 

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

@@ -4,7 +4,7 @@ import { DialogTitle } from './DialogTitle.js';
 import { DialogContent } from './DialogContent.js';
 import { DialogHeader } from './DialogHeader.js';
 
-const Dialog = Dialog$1;
+var Dialog = Dialog$1;
 Dialog.Actions = DialogActions;
 Dialog.Title = DialogTitle;
 Dialog.CustomContent = DialogContent;

package/dist/esm/components/Divider/Divider.js

@@ -1,41 +1,44 @@
+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 * as Divider_tokens from './Divider.tokens.js';
+import { divider as divider$1 } from './Divider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  divider
-} = Divider_tokens;
-const StyledDivider = styled.hr.withConfig({
+var _excluded = ["color", "variant", "size"];
+var divider = divider$1;
+var StyledDivider = styled.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
-})(_ref => {
-  let {
-    backgroundColor,
-    marginTop,
-    marginBottom,
-    dividerHeight
-  } = _ref;
+})(function (_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      marginTop = _ref.marginTop,
+      marginBottom = _ref.marginBottom,
+      dividerHeight = _ref.dividerHeight;
   return css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], backgroundColor, marginTop, marginBottom, dividerHeight, dividerHeight);
 });
-const Divider = /*#__PURE__*/forwardRef(function Divider(_ref2, ref) {
-  let {
-    color = 'medium',
-    variant = 'medium',
-    size = '1',
-    ...rest
-  } = _ref2;
-  const colorValue = color === 'medium' ? 'mediumColor' : color;
-  const props = {
+var Divider = /*#__PURE__*/forwardRef(function Divider(_ref2, ref) {
+  var _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? 'medium' : _ref2$color,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? '1' : _ref2$size,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var colorValue = color === 'medium' ? 'mediumColor' : color;
+
+  var props = _objectSpread({
     backgroundColor: divider[colorValue].background,
     marginTop: Divider_tokens[variant].spacings.top,
     marginBottom: Divider_tokens[variant].spacings.bottom,
-    dividerHeight: parseInt(size),
-    ...rest
-  };
-  return /*#__PURE__*/jsx(StyledDivider, { ...props,
+    dividerHeight: parseInt(size)
+  }, rest);
+
+  return /*#__PURE__*/jsx(StyledDivider, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref
-  });
+  }));
 });
 
 export { Divider };

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

@@ -1,27 +1,13 @@
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__default: {
-        rgba: lighter
-      },
-      background__light: {
-        rgba: light
-      },
-      background__medium: {
-        rgba: mediumColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      small: spacingSmall,
-      medium: spacingMedium
-    }
-  }
-} = tokens$1;
-const divider = {
+var _tokens$colors$ui = tokens$1.colors.ui,
+    lighter = _tokens$colors$ui.background__default.rgba,
+    light = _tokens$colors$ui.background__light.rgba,
+    mediumColor = _tokens$colors$ui.background__medium.rgba,
+    _tokens$spacings$comf = tokens$1.spacings.comfortable,
+    spacingSmall = _tokens$spacings$comf.small,
+    spacingMedium = _tokens$spacings$comf.medium;
+var divider = {
   lighter: {
     background: lighter
   },
@@ -32,13 +18,13 @@ const divider = {
     background: mediumColor
   }
 };
-const small = {
+var small = {
   spacings: {
     top: spacingSmall,
     bottom: spacingSmall
   }
 };
-const medium = {
+var medium = {
   spacings: {
     top: spacingMedium,
     bottom: spacingMedium

package/dist/esm/components/EdsProvider/eds.context.js

@@ -1,38 +1,48 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const initalState = {
+var initalState = {
   /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
-const EdsContext = /*#__PURE__*/createContext(initalState);
-const EdsProvider = _ref => {
-  let {
-    children,
-    density
-  } = _ref;
-  const [state, setState] = useState({ ...initalState,
+var EdsContext = /*#__PURE__*/createContext(initalState);
+var EdsProvider = function EdsProvider(_ref) {
+  var children = _ref.children,
+      density = _ref.density;
+
+  var _useState = useState(_objectSpread(_objectSpread({}, initalState), {}, {
     density: density || 'comfortable'
-  });
+  })),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
 
-  const setDensity = density => setState(prevState => ({ ...prevState,
-    density
-  }));
+  var setDensity = function setDensity(density) {
+    return setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        density: density
+      });
+    });
+  };
 
-  useEffect(() => {
+  useEffect(function () {
     if (typeof density !== 'undefined' && density !== state.density) {
       setDensity(density);
     }
   }, [density, state.density]);
-  const value = {
+  var value = {
     density: state.density,
-    setDensity
+    setDensity: setDensity
   };
   return /*#__PURE__*/jsx(EdsContext.Provider, {
     value: value,
     children: children
   });
 };
-const useEds = () => useContext(EdsContext);
+var useEds = function useEds() {
+  return useContext(EdsContext);
+};
 
 export { EdsProvider, useEds };

package/dist/esm/components/Icon/Icon.js

@@ -1,59 +1,58 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { get } from './library.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const transform = _ref => {
-  let {
-    rotation
-  } = _ref;
-  return rotation ? `transform: rotate(${rotation}deg)` : '';
+var _excluded = ["size", "color", "name", "rotation", "title", "data"];
+
+var transform = function transform(_ref) {
+  var rotation = _ref.rotation;
+  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
 };
 
-const StyledSvg = styled.svg.attrs(_ref2 => {
-  let {
-    height,
-    width,
-    fill
-  } = _ref2;
+var StyledSvg = styled.svg.attrs(function (_ref2) {
+  var height = _ref2.height,
+      width = _ref2.width,
+      fill = _ref2.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height: `${height}px`,
-    width: `${width}px`,
-    fill
+    height: "".concat(height, "px"),
+    width: "".concat(width, "px"),
+    fill: fill
   };
 }).withConfig({
   displayName: "Icon__StyledSvg",
   componentId: "sc-6evbi1-0"
 })(["", ""], transform);
-const StyledPath = styled.path.attrs(_ref3 => {
-  let {
-    height,
-    size
-  } = _ref3;
+var StyledPath = styled.path.attrs(function (_ref3) {
+  var height = _ref3.height,
+      size = _ref3.size;
   return {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / height !== 1 ? `scale(${size / height})` : null
+    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
 
-const customIcon = icon => ({
-  icon,
-  count: Math.floor(Math.random() * 1000)
-});
+var customIcon = function customIcon(icon) {
+  return {
+    icon: icon,
+    count: Math.floor(Math.random() * 1000)
+  };
+};
 
-const findIcon = (name, data, size) => {
+var findIcon = function findIcon(name, data, size) {
   // eslint-disable-next-line prefer-const
-  let {
-    icon,
-    count
-  } = data ? customIcon(data) : get(name);
+  var _ref4 = data ? customIcon(data) : get(name),
+      icon = _ref4.icon,
+      count = _ref4.count;
 
   if (size < 24) {
     var _icon$sizes;
@@ -63,71 +62,68 @@ const findIcon = (name, data, size) => {
   }
 
   return {
-    icon,
-    count
+    icon: icon,
+    count: count
   };
 };
 
-const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
-  let {
-    size,
-    color = 'currentColor',
-    name,
-    rotation,
-    title,
-    data,
-    ...rest
-  } = _ref4;
+var Icon = /*#__PURE__*/forwardRef(function Icon(_ref5, ref) {
+  var size = _ref5.size,
+      _ref5$color = _ref5.color,
+      color = _ref5$color === void 0 ? 'currentColor' : _ref5$color,
+      name = _ref5.name,
+      rotation = _ref5.rotation,
+      title = _ref5.title,
+      data = _ref5.data,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+
   // eslint-disable-next-line prefer-const
-  const {
-    icon,
-    count
-  } = findIcon(name, data, size);
+  var _findIcon = findIcon(name, data, size),
+      icon = _findIcon.icon,
+      count = _findIcon.count;
 
   if (typeof icon === 'undefined') {
-    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
+    throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
 
-  const height = size ? size : parseInt(icon.width);
-  const width = size ? size : parseInt(icon.height);
-  let svgProps = {
-    height,
-    width,
+  var height = size ? size : parseInt(icon.width);
+  var width = size ? size : parseInt(icon.height);
+  var svgProps = {
+    height: height,
+    width: width,
     fill: color,
-    viewBox: `0 0 ${width} ${height}`,
-    rotation,
-    name,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    rotation: rotation,
+    name: name,
     'aria-hidden': true
   };
-  const pathProps = {
+  var pathProps = {
     d: icon.svgPathData,
     height: icon.height ? icon.height : size,
     size: size || icon.height
   }; // Accessibility
 
-  let titleId = '';
+  var titleId = '';
 
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`;
-    svgProps = { ...svgProps,
-      title,
+    titleId = "".concat(icon.prefix, "-").concat(icon.name, "-").concat(count);
+    svgProps = _objectSpread(_objectSpread({}, svgProps), {}, {
+      title: title,
       role: 'img',
       'aria-hidden': undefined,
       'aria-labelledby': titleId
-    };
+    });
   }
 
-  return /*#__PURE__*/jsxs(StyledSvg, { ...svgProps,
-    ...rest,
+  return /*#__PURE__*/jsxs(StyledSvg, _objectSpread(_objectSpread(_objectSpread({}, svgProps), rest), {}, {
     ref: ref,
     children: [title && /*#__PURE__*/jsx("title", {
       id: titleId,
       children: title
-    }), /*#__PURE__*/jsx(StyledPath, {
-      "data-testid": "eds-icon-path",
-      ...pathProps
-    })]
-  });
+    }), /*#__PURE__*/jsx(StyledPath, _objectSpread({
+      "data-testid": "eds-icon-path"
+    }, pathProps))]
+  }));
 }); // Icon.displayName = 'EdsIcon'
 
 export { Icon };

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

@@ -1,7 +1,7 @@
 import { Icon as Icon$1 } from './Icon.js';
 import { add } from './library.js';
 
-const Icon = Icon$1;
+var Icon = Icon$1;
 Icon.add = add;
 
 export { Icon };

package/dist/esm/components/Icon/library.js

@@ -1,18 +1,18 @@
-let _icons = {};
-let count = 0;
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+
+var _icons = {};
+var count = 0;
 /** Add icons to library to be used for rendering using name.
 This needs to be done lonly once */
 
-const add = icons => {
-  _icons = { ..._icons,
-    ...icons
-  };
+var add = function add(icons) {
+  _icons = _objectSpread(_objectSpread({}, _icons), icons);
 };
-const get = name => {
+var get = function get(name) {
   count += 1;
   return {
     icon: _icons[name],
-    count
+    count: count
   };
 };
 

package/dist/esm/components/Input/Input.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, { css, ThemeProvider } from 'styled-components';
 import { inputToken } from './Input.tokens.js';
@@ -5,53 +7,48 @@ import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledInput = styled.input.withConfig({
+var _excluded = ["variant", "disabled", "type"];
+var StyledInput = styled.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "sc-1ykv024-0"
-})(_ref => {
-  let {
-    theme
-  } = _ref;
-  const {
-    states: {
-      focus: {
-        outline: focusOutline
-      },
-      active: {
-        outline: activeOutline
-      },
-      disabled,
-      readOnly
-    },
-    boxShadow
-  } = theme;
+})(function (_ref) {
+  var theme = _ref.theme;
+  var _theme$states = theme.states,
+      focusOutline = _theme$states.focus.outline,
+      activeOutline = _theme$states.active.outline,
+      disabled = _theme$states.disabled,
+      readOnly = _theme$states.readOnly,
+      boxShadow = theme.boxShadow;
   return css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
 });
-const Input = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
-  let {
-    variant = 'default',
-    disabled = false,
-    type = 'text',
-    ...other
-  } = _ref2;
-  const actualVariant = variant === 'default' ? 'input' : variant;
-  const inputVariant = inputToken[actualVariant];
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var Input = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+  var _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'text' : _ref2$type,
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  var actualVariant = variant === 'default' ? 'input' : variant;
+  var inputVariant = inputToken[actualVariant];
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, inputVariant);
-  const inputProps = {
-    ref,
-    type,
-    disabled,
-    ...other
-  };
+
+  var inputProps = _objectSpread({
+    ref: ref,
+    type: type,
+    disabled: disabled
+  }, other);
+
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(StyledInput, { ...inputProps
-    })
+    children: /*#__PURE__*/jsx(StyledInput, _objectSpread({}, inputProps))
   });
 });