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

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

@@ -1,65 +1,31 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  typography: {
-    table: {
-      cell_header: cellTypography
-    },
-    _modes: {
-      compact: compactTypography
-    }
-  },
-  colors: {
-    text: {
-      static_icons__default: {
-        rgba: typographyColor
-      }
-    },
-    ui: {
-      background__medium: {
-        rgba: borderColor
-      }
-    },
-    interactive: {
-      table__header__fill_resting: {
-        rgba: backgroundColor
-      },
-      table__header__fill_hover: {
-        rgba: hoverBackgroundColor
-      },
-      table__header__fill_activated: {
-        rgba: activeBackgroundColor
-      },
-      primary__resting: {
-        rgba: primaryRestingColor
-      },
-      disabled__text: {
-        rgba: disabledTextColor
-      },
-      disabled__border: {
-        rgba: disabledBorderColor
-      },
-      focus: {
-        rgba: focusColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium
-    }
-  }
-} = tokens;
-const token = {
+var _tokens$typography = tokens.typography,
+    cellTypography = _tokens$typography.table.cell_header,
+    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__header__fill_resting.rgba,
+    hoverBackgroundColor = _tokens$colors$intera.table__header__fill_hover.rgba,
+    activeBackgroundColor = _tokens$colors$intera.table__header__fill_activated.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 token = {
   height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
   align: {
     vertical: 'var(--eds_table__cell__vertical_align, inherit)'
   },
-  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, ")")
+  }),
   border: {
     type: 'bordergroup',
     bottom: {
@@ -72,15 +38,15 @@ const token = {
   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, ")")
   },
   states: {
     active: {
       background: activeBackgroundColor,
-      typography: { ...cellTypography,
+      typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
         color: primaryRestingColor
-      },
+      }),
       border: {
         type: 'bordergroup',
         bottom: {
@@ -89,9 +55,9 @@ const token = {
       }
     },
     disabled: {
-      typography: { ...cellTypography,
+      typography: _objectSpread(_objectSpread({}, cellTypography), {}, {
         color: disabledTextColor
-      },
+      }),
       border: {
         type: 'bordergroup',
         bottom: {
@@ -118,8 +84,8 @@ const token = {
       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, ")")
       }
     }
   }

package/dist/esm/components/Table/Inner.context.js

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
-const initalState = {
+var initalState = {
   variant: 'body'
 };
-const InnerContext = /*#__PURE__*/createContext(initalState);
+var InnerContext = /*#__PURE__*/createContext(initalState);
 
 export { InnerContext };

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

@@ -1,17 +1,17 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { token } from './Row.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledRow = styled.tr.withConfig({
+var StyledRow = styled.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-12c5lns-0"
-})(_ref => {
+})(function (_ref) {
   var _token$states$active, _token$states$hover;
 
-  let {
-    active
-  } = _ref;
+  var active = _ref.active;
   return {
     background: active ? (_token$states$active = token.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
     '@media (hover: hover) and (pointer: fine)': {
@@ -21,16 +21,14 @@ const StyledRow = styled.tr.withConfig({
     }
   };
 });
-const Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
-  let { ...props
-  } = _ref2;
-  const {
-    children
-  } = props;
-  return /*#__PURE__*/jsx(StyledRow, { ...props,
+var Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
+  var props = _extends({}, _ref2);
+
+  var children = props.children;
+  return /*#__PURE__*/jsx(StyledRow, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: children
-  });
+  }));
 });
 
 export { Row };

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

@@ -1,18 +1,9 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    interactive: {
-      table__cell__fill_hover: {
-        rgba: hoverBackgroundColor
-      },
-      table__cell__fill_activated: {
-        rgba: activeBackgroundColor
-      }
-    }
-  }
-} = tokens;
-const token = {
+var _tokens$colors$intera = tokens.colors.interactive,
+    hoverBackgroundColor = _tokens$colors$intera.table__cell__fill_hover.rgba,
+    activeBackgroundColor = _tokens$colors$intera.table__cell__fill_activated.rgba;
+var token = {
   states: {
     active: {
       background: activeBackgroundColor

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

@@ -1,21 +1,23 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { tableCell } from './DataCell/DataCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const TableBase = styled.table.withConfig({
+var _excluded = ["children"];
+var TableBase = styled.table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
-const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/jsx(TableBase, { ...props,
+var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(TableBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: children
-  });
+  }));
 }); // Table.displayName = 'EdsTable'
 
 export { Table };

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

@@ -5,7 +5,7 @@ import { Caption } from './Caption.js';
 import { Head } from './Head/Head.js';
 import { Row } from './Row/Row.js';
 
-const Table = Table$1;
+var Table = Table$1;
 Table.Body = Body;
 Table.Cell = Cell;
 Table.Head = Head;

package/dist/esm/components/TableOfContents/LinkItem.js

@@ -1,26 +1,26 @@
+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, spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledLinkItem = styled.li.withConfig({
+var _excluded = ["children"];
+var StyledLinkItem = styled.li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
-})(_ref => {
-  let {
-    theme
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme;
   return css(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(theme.entities.links.typography), spacingsTemplate(theme.entities.links.spacings), theme.entities.links.typography.lineHeight, theme.entities.links.width, theme.entities.icon.background, theme.entities.icon.spacings.right, theme.entities.span.maxWidth, outlineTemplate(theme.states.focus.outline), typographyTemplate(theme.states.hover.typography), theme.states.hover.background, bordersTemplate(theme.states.hover.border), theme.states.hover.entities.icon.background);
 });
-const LinkItem = /*#__PURE__*/forwardRef(function LinkItem(_ref2, ref) {
-  let {
-    children,
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/jsx(StyledLinkItem, { ...props,
+var LinkItem = /*#__PURE__*/forwardRef(function LinkItem(_ref2, ref) {
+  var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/jsx(StyledLinkItem, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: children
-  });
+  }));
 });
 
 export { LinkItem };

package/dist/esm/components/TableOfContents/TableOfContents.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 { List } from '../List/index.js';
@@ -7,56 +9,54 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledTableOfContents = styled.nav.withConfig({
+var _excluded = ["children", "sticky", "label"];
+var StyledTableOfContents = styled.nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",
   componentId: "sc-q23s6y-0"
-})(_ref => {
-  let {
-    theme,
-    sticky
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      sticky = _ref.sticky;
   return css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, sticky && css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
 });
-const TocList = styled(List).withConfig({
+var TocList = styled(List).withConfig({
   displayName: "TableOfContents__TocList",
   componentId: "sc-q23s6y-1"
 })(["margin:0;padding:0;"]);
-const TocLabel = styled(Typography).withConfig({
+var TocLabel = styled(Typography).withConfig({
   displayName: "TableOfContents__TocLabel",
   componentId: "sc-q23s6y-2"
-})(_ref2 => {
-  let {
-    theme
-  } = _ref2;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return css(["", ""], typographyTemplate(theme.typography));
 });
-const TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents(_ref3, ref) {
-  let {
-    children,
-    sticky = false,
-    label = '',
-    ...rest
-  } = _ref3;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents(_ref3, ref) {
+  var children = _ref3.children,
+      _ref3$sticky = _ref3.sticky,
+      sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
+      _ref3$label = _ref3.label,
+      label = _ref3$label === void 0 ? '' : _ref3$label,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, tableOfContents);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(StyledTableOfContents, {
+    children: /*#__PURE__*/jsxs(StyledTableOfContents, _objectSpread(_objectSpread({
       ref: ref,
       label: label,
-      sticky: sticky,
-      ...rest,
+      sticky: sticky
+    }, rest), {}, {
       children: [/*#__PURE__*/jsx(TocLabel, {
         variant: "overline",
         children: label
       }), /*#__PURE__*/jsx(TocList, {
         children: children
       })]
-    })
+    }))
   });
 });
 

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

@@ -1,45 +1,23 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    interactive: {
-      primary__resting: {
-        rgba: primaryColor
-      },
-      primary__hover_alt: {
-        rgba: primaryHoverAlt
-      },
-      primary__hover: {
-        rgba: primaryHover
-      },
-      focus: {
-        rgba: focusColor
-      }
-    },
-    text: {
-      static_icons__tertiary: {
-        rgba: labelColor
-      }
-    }
-  },
-  shape: {
-    corners: {
-      borderRadius
-    }
-  },
-  spacings: {
-    comfortable: {
-      small,
-      x_large,
-      xxx_large
-    }
-  },
-  typography
-} = tokens;
-const tableOfContents = {
-  typography: { ...typography.navigation.button,
+var _tokens$colors = tokens.colors,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    primaryColor = _tokens$colors$intera.primary__resting.rgba,
+    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+    primaryHover = _tokens$colors$intera.primary__hover.rgba,
+    focusColor = _tokens$colors$intera.focus.rgba,
+    labelColor = _tokens$colors.text.static_icons__tertiary.rgba,
+    borderRadius = tokens.shape.corners.borderRadius,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    small = _tokens$spacings$comf.small,
+    x_large = _tokens$spacings$comf.x_large,
+    xxx_large = _tokens$spacings$comf.xxx_large,
+    typography = tokens.typography;
+var tableOfContents = {
+  typography: _objectSpread(_objectSpread({}, typography.navigation.button), {}, {
     color: labelColor
-  },
+  }),
   spacings: {
     top: xxx_large,
     bottom: x_large
@@ -53,9 +31,9 @@ const tableOfContents = {
     },
     links: {
       width: 'calc(189px - 36px)',
-      typography: { ...typography.navigation.button,
+      typography: _objectSpread(_objectSpread({}, typography.navigation.button), {}, {
         color: primaryColor
-      },
+      }),
       spacings: {
         top: '10px',
         bottom: '10px',
@@ -93,9 +71,9 @@ const tableOfContents = {
           background: primaryHover
         }
       },
-      typography: { ...typography.navigation.button,
+      typography: _objectSpread(_objectSpread({}, typography.navigation.button), {}, {
         color: primaryHover
-      }
+      })
     }
   },
   modes: {

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

@@ -1,7 +1,7 @@
 import { TableOfContents as TableOfContents$1 } from './TableOfContents.js';
 import { LinkItem } from './LinkItem.js';
 
-const TableOfContents = TableOfContents$1;
+var TableOfContents = TableOfContents$1;
 TableOfContents.LinkItem = LinkItem;
 TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem';
 

package/dist/esm/components/Tabs/Tab.js

@@ -1,13 +1,14 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { spacingsTemplate, typographyTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledTab = styled.button.attrs(_ref => {
-  let {
-    active = false,
-    disabled = false
-  } = _ref;
+var StyledTab = styled.button.attrs(function (_ref) {
+  var _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return {
     type: 'button',
     role: 'tab',
@@ -18,24 +19,17 @@ const StyledTab = styled.button.attrs(_ref => {
 }).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(_ref2 => {
-  let {
-    theme,
-    active,
-    disabled
-  } = _ref2;
-  const {
-    entities: {
-      tab
-    }
-  } = theme;
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      active = _ref2.active,
+      disabled = _ref2.disabled;
+  var tab = theme.entities.tab;
   return css(["appearance:none;box-sizing:border-box;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), typographyTemplate(tab.typography), active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), active && bordersTemplate(tab.states.active.border));
 });
-const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  return /*#__PURE__*/jsx(StyledTab, {
-    ref: ref,
-    ...props
-  });
+var Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  return /*#__PURE__*/jsx(StyledTab, _objectSpread({
+    ref: ref
+  }, props));
 });
 
 export { Tab };