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

package/dist/esm/components/Switch/SwitchSmall.js

@@ -1,67 +1,54 @@
+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 { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
 import { outlineTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const Input = styled(BaseInput).withConfig({
+var _excluded = ["disabled", "className", "style"];
+var Input = styled(BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
-})(_ref => {
-  let {
-    disabled,
-    theme: {
-      states,
-      entities: {
-        handle,
-        track
-      }
-    }
-  } = _ref;
+})(function (_ref) {
+  var disabled = _ref.disabled,
+      _ref$theme = _ref.theme,
+      states = _ref$theme.states,
+      _ref$theme$entities = _ref$theme.entities,
+      handle = _ref$theme$entities.handle,
+      track = _ref$theme$entities.track;
   return css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background);
 });
-const Track = styled.span.withConfig({
+var Track = styled.span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
-})(_ref2 => {
-  let {
-    isDisabled,
-    theme: {
-      states,
-      entities: {
-        track
-      }
-    }
-  } = _ref2;
+})(function (_ref2) {
+  var isDisabled = _ref2.isDisabled,
+      _ref2$theme = _ref2.theme,
+      states = _ref2$theme.states,
+      track = _ref2$theme.entities.track;
   return css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, isDisabled ? states.disabled.background : track.states.disabled.background);
 });
-const Handle = styled.span.withConfig({
+var Handle = styled.span.withConfig({
   displayName: "SwitchSmall__Handle",
   componentId: "sc-1a99mis-2"
-})(_ref3 => {
-  let {
-    theme: {
-      entities: {
-        handle
-      }
-    }
-  } = _ref3;
+})(function (_ref3) {
+  var handle = _ref3.theme.entities.handle;
   return css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height);
 });
-const SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall(_ref4, ref) {
-  let {
-    disabled,
-    className,
-    style,
-    ...rest
-  } = _ref4;
+var SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall(_ref4, ref) {
+  var disabled = _ref4.disabled,
+      className = _ref4.className,
+      style = _ref4.style,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+
   return /*#__PURE__*/jsxs(GridWrapper, {
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(Input, { ...rest,
+    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
       disabled: disabled
-    }), /*#__PURE__*/jsxs(BaseInputWrapper, {
+    })), /*#__PURE__*/jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsx(Track, {
         isDisabled: disabled
       }), /*#__PURE__*/jsx(Handle, {})]

package/dist/esm/components/Table/Body.js

@@ -1,25 +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 { InnerContext } from './Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const TableBase = styled.tbody.withConfig({
+var _excluded = ["children"];
+var TableBase = styled.tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
-const Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
+var Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
     },
-    children: /*#__PURE__*/jsx(TableBase, { ...props,
+    children: /*#__PURE__*/jsx(TableBase, _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,
       children: children
-    })
+    }))
   });
 });
 

package/dist/esm/components/Table/Caption.js

@@ -1,22 +1,22 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledCaption = styled.caption.withConfig({
+var StyledCaption = styled.caption.withConfig({
   displayName: "Caption__StyledCaption",
   componentId: "sc-rtfr07-0"
-})(_ref => {
-  let {
-    captionSide = 'top'
-  } = _ref;
+})(function (_ref) {
+  var _ref$captionSide = _ref.captionSide,
+      captionSide = _ref$captionSide === void 0 ? 'top' : _ref$captionSide;
   return {
-    captionSide
+    captionSide: captionSide
   };
 });
-const Caption = /*#__PURE__*/forwardRef(function Caption(props, ref) {
-  return /*#__PURE__*/jsx(StyledCaption, { ...props,
+var Caption = /*#__PURE__*/forwardRef(function Caption(props, ref) {
+  return /*#__PURE__*/jsx(StyledCaption, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref
-  });
+  }));
 });
 
 export { Caption };

package/dist/esm/components/Table/Cell.js

@@ -1,33 +1,31 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import { InnerContext } from './Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
 import { TableDataCell } from './DataCell/DataCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
 
-const Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
-  let { ...rest
-  } = _ref;
+var Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
+  var rest = _extends({}, _ref);
+
   return /*#__PURE__*/jsx(InnerContext.Consumer, {
-    children: _ref2 => {
-      let {
-        variant,
-        sticky
-      } = _ref2;
+    children: function children(_ref2) {
+      var variant = _ref2.variant,
+          sticky = _ref2.sticky;
 
       switch (variant) {
         case 'head':
-          return /*#__PURE__*/jsx(TableHeaderCell, {
+          return /*#__PURE__*/jsx(TableHeaderCell, _objectSpread({
             ref: ref,
-            sticky: sticky,
-            ...rest
-          });
+            sticky: sticky
+          }, rest));
 
         default:
         case 'body':
-          return /*#__PURE__*/jsx(TableDataCell, {
-            ref: ref,
-            ...rest
-          });
+          return /*#__PURE__*/jsx(TableDataCell, _objectSpread({
+            ref: ref
+          }, rest));
       }
     }
   });

package/dist/esm/components/Table/DataCell/DataCell.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 { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
@@ -5,45 +7,42 @@ import { applyVariant, tableCell } from './DataCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
 
-const StyledTableCell = styled.td.withConfig({
+var _excluded = ["children", "variant"];
+var StyledTableCell = styled.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
-})(_ref => {
+})(function (_ref) {
   var _theme$validation$err;
 
-  let {
-    theme,
-    color
-  } = _ref;
-  const {
-    height,
-    typography,
-    spacings,
-    border,
-    align
-  } = theme;
-  const backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
-  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
+  var theme = _ref.theme,
+      color = _ref.color;
+  var height = theme.height,
+      typography = theme.typography,
+      spacings = theme.spacings,
+      border = theme.border,
+      align = theme.align;
+  var backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
+  var base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
-const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell(_ref2, ref) {
-  let {
-    children,
-    variant = 'text',
-    ...rest
-  } = _ref2;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell(_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, applyVariant(variant, tableCell));
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(StyledTableCell, { ...rest,
+    children: /*#__PURE__*/jsx(StyledTableCell, _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
       children: children
-    })
+    }))
   });
 });
 

package/dist/esm/components/Table/DataCell/DataCell.tokens.js

@@ -1,61 +1,26 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
-const {
-  typography: {
-    table: {
-      cell_text: cellTypography,
-      cell_numeric_monospaced: cellNumericTypography
-    },
-    _modes: {
-      compact: compactTypography
-    }
-  },
-  colors: {
-    text: {
-      static_icons__default: {
-        rgba: typographyColor
-      }
-    },
-    ui: {
-      background__medium: {
-        rgba: borderColor
-      }
-    },
-    interactive: {
-      table__cell__fill_resting: {
-        rgba: backgroundColor
-      },
-      table__cell__fill_hover: {
-        rgba: hoverBackgroundColor
-      },
-      table__cell__fill_activated: {
-        rgba: activeBackgroundColor
-      },
-      danger__highlight: {
-        rgba: errorColor
-      },
-      primary__resting: {
-        rgba: primaryRestingColor
-      },
-      disabled__text: {
-        rgba: disabledTextColor
-      },
-      disabled__border: {
-        rgba: disabledBorderColor
-      },
-      focus: {
-        rgba: focusColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium
-    }
-  }
-} = tokens;
-const tableCell = {
+var _tokens$typography = tokens.typography,
+    _tokens$typography$ta = _tokens$typography.table,
+    cellTypography = _tokens$typography$ta.cell_text,
+    cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
+    compactTypography = _tokens$typography._modes.compact,
+    _tokens$colors = tokens.colors,
+    typographyColor = _tokens$colors.text.static_icons__default.rgba,
+    borderColor = _tokens$colors.ui.background__medium.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    backgroundColor = _tokens$colors$intera.table__cell__fill_resting.rgba,
+    hoverBackgroundColor = _tokens$colors$intera.table__cell__fill_hover.rgba,
+    activeBackgroundColor = _tokens$colors$intera.table__cell__fill_activated.rgba,
+    errorColor = _tokens$colors$intera.danger__highlight.rgba,
+    primaryRestingColor = _tokens$colors$intera.primary__resting.rgba,
+    disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
+    disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
+    focusColor = _tokens$colors$intera.focus.rgba,
+    medium = tokens.spacings.comfortable.medium;
+var tableCell = {
   height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
   align: {
@@ -72,19 +37,19 @@ const tableCell = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: `var(--eds_table__cell__padding_x, ${medium})`,
-    right: `var(--eds_table__cell__padding_x, ${medium})`
+    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
   },
-  typography: { ...cellTypography,
+  typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
     color: typographyColor,
-    fontSize: `var(--eds_table__font_size, ${cellTypography.fontSize})`
-  },
+    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
+  }),
   states: {
     active: {
       background: activeBackgroundColor,
-      typography: { ...cellTypography,
+      typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
         color: primaryRestingColor
-      },
+      }),
       border: {
         bottom: {
           color: primaryRestingColor
@@ -92,9 +57,9 @@ const tableCell = {
       }
     },
     disabled: {
-      typography: { ...cellTypography,
+      typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
         color: disabledTextColor
-      },
+      }),
       border: {
         type: 'bordergroup',
         bottom: {
@@ -117,14 +82,14 @@ const tableCell = {
   modes: {
     compact: {
       height: 'var(--eds_table__cell__height_compact, 32px)',
-      typography: { ...compactTypography.table.cell_text,
+      typography: _objectSpread(_objectSpread({}, compactTypography.table.cell_text), {}, {
         color: typographyColor
-      },
+      }),
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: `var(--eds_table__cell__padding_x_compact, ${medium})`,
-        right: `var(--eds_table__cell__padding_x_compact, ${medium})`
+        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
       }
     }
   },
@@ -135,20 +100,20 @@ const tableCell = {
   },
   variants: {
     numeric: {
-      typography: { ...cellNumericTypography,
+      typography: _objectSpread(_objectSpread({}, cellNumericTypography), {}, {
         color: typographyColor
-      },
+      }),
       modes: {
         compact: {
-          typography: { ...compactTypography.table.cell_numeric_monospaced,
+          typography: _objectSpread(_objectSpread({}, compactTypography.table.cell_numeric_monospaced), {}, {
             color: typographyColor
-          }
+          })
         }
       }
     }
   }
 };
-const applyVariant = (variant, token) => {
+var applyVariant = function applyVariant(variant, token) {
   switch (variant) {
     case 'numeric':
       return mergeDeepRight(token, token.variants.numeric);

package/dist/esm/components/Table/Head/Head.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 { token } from './Head.tokens.js';
@@ -5,25 +7,25 @@ import { bordersTemplate } from '@equinor/eds-utils';
 import { InnerContext } from '../Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledTableHead = styled.thead.withConfig({
+var _excluded = ["children", "sticky"];
+var StyledTableHead = styled.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
 })(["", " background:", ";"], bordersTemplate(token.border), token.background);
-const Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
-  let {
-    children,
-    sticky,
-    ...props
-  } = _ref;
+var Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
+  var children = _ref.children,
+      sticky = _ref.sticky,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
-      sticky
+      sticky: sticky
     },
-    children: /*#__PURE__*/jsx(StyledTableHead, { ...props,
+    children: /*#__PURE__*/jsx(StyledTableHead, _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,
       children: children
-    })
+    }))
   });
 });
 

package/dist/esm/components/Table/Head/Head.tokens.js

@@ -1,20 +1,9 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__medium: {
-        rgba: borderColor
-      }
-    },
-    interactive: {
-      table__header__fill_resting: {
-        rgba: backgroundColor
-      }
-    }
-  }
-} = tokens;
-const token = {
+var _tokens$colors = tokens.colors,
+    borderColor = _tokens$colors.ui.background__medium.rgba,
+    backgroundColor = _tokens$colors.interactive.table__header__fill_resting.rgba;
+var token = {
   background: backgroundColor,
   border: {
     type: 'bordergroup',

package/dist/esm/components/Table/HeaderCell/HeaderCell.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 { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
@@ -5,24 +7,21 @@ import { token } from './HeaderCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
 
-const StyledTableCell = styled.th.withConfig({
+var _excluded = ["children", "sort"];
+var StyledTableCell = styled.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
-})(props => {
-  const {
-    theme,
-    sticky
-  } = props;
-  const {
-    background,
-    height,
-    typography,
-    spacings
-  } = theme;
-  const activeToken = theme.states.active;
-  const ariaSort = props['aria-sort'];
-  let sortStylingHover = css({});
-  let sortStylingActive = css({});
+})(function (props) {
+  var theme = props.theme,
+      sticky = props.sticky;
+  var background = theme.background,
+      height = theme.height,
+      typography = theme.typography,
+      spacings = theme.spacings;
+  var activeToken = theme.states.active;
+  var ariaSort = props['aria-sort'];
+  var sortStylingHover = css({});
+  var sortStylingActive = css({});
 
   if (ariaSort) {
     sortStylingHover = css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], theme.states.hover.background);
@@ -34,32 +33,31 @@ const StyledTableCell = styled.th.withConfig({
 
   return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
 });
-const CellInner = styled.div.withConfig({
+var CellInner = styled.div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
 })(["display:flex;align-items:center;"]);
-const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
-  let {
-    children,
-    sort,
-    ...rest
-  } = _ref;
-  const {
-    density
-  } = useEds();
-  const token$1 = useToken({
-    density
+var TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
+  var children = _ref.children,
+      sort = _ref.sort,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token$1 = useToken({
+    density: density
   }, token);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token$1,
-    children: /*#__PURE__*/jsx(StyledTableCell, {
-      "aria-sort": sort,
-      ...rest,
+    children: /*#__PURE__*/jsx(StyledTableCell, _objectSpread(_objectSpread({
+      "aria-sort": sort
+    }, rest), {}, {
       ref: ref,
       children: /*#__PURE__*/jsx(CellInner, {
         children: children
       })
-    })
+    }))
   });
 });