@equinor/eds-core-react 0.16.1-dev.12072021 → 0.18.0-dev.20220210

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

@@ -1,48 +1,58 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const Input = styled(BaseInput).withConfig({
   displayName: "SwitchDefault__Input",
   componentId: "sc-16ym5pn-0"
-})(({
-  disabled,
-  theme
-}) => css(["&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background));
+})(_ref => {
+  let {
+    disabled,
+    theme
+  } = _ref;
+  return css(["&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background);
+});
 const Track = styled.span.withConfig({
   displayName: "SwitchDefault__Track",
   componentId: "sc-16ym5pn-1"
-})(({
-  isDisabled,
-  theme: {
-    states,
-    entities: {
-      track
+})(_ref2 => {
+  let {
+    isDisabled,
+    theme: {
+      states,
+      entities: {
+        track
+      }
     }
-  }
-}) => css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, isDisabled && {
-  backgroundColor: states.disabled.background
-}));
+  } = _ref2;
+  return css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, isDisabled && {
+    backgroundColor: states.disabled.background
+  });
+});
 const Handle = styled.span.withConfig({
   displayName: "SwitchDefault__Handle",
   componentId: "sc-16ym5pn-2"
-})(({
-  isDisabled,
-  theme: {
-    states,
-    entities: {
-      handle
+})(_ref3 => {
+  let {
+    isDisabled,
+    theme: {
+      states,
+      entities: {
+        handle
+      }
     }
-  }
-}) => css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
-  backgroundColor: states.disabled.background
-}, handle.boxShadow, handle.width, handle.height));
-const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault({
-  disabled,
-  ...rest
-}, ref) {
+  } = _ref3;
+  return css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
+    backgroundColor: states.disabled.background
+  }, handle.boxShadow, handle.width, handle.height);
+});
+const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault(_ref4, ref) {
+  let {
+    disabled,
+    ...rest
+  } = _ref4;
   return /*#__PURE__*/jsxs(GridWrapper, {
     children: [/*#__PURE__*/jsx(Input, { ...rest,
       ref: ref,

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

@@ -1,48 +1,58 @@
 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';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const Input = styled(BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
-})(({
-  disabled,
-  theme: {
-    states,
-    entities: {
-      handle,
-      track
+})(_ref => {
+  let {
+    disabled,
+    theme: {
+      states,
+      entities: {
+        handle,
+        track
+      }
     }
-  }
-}) => 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));
+  } = _ref;
+  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({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
-})(({
-  isDisabled,
-  theme: {
-    states,
-    entities: {
-      track
+})(_ref2 => {
+  let {
+    isDisabled,
+    theme: {
+      states,
+      entities: {
+        track
+      }
     }
-  }
-}) => 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));
+  } = _ref2;
+  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({
   displayName: "SwitchSmall__Handle",
   componentId: "sc-1a99mis-2"
-})(({
-  theme: {
-    entities: {
-      handle
+})(_ref3 => {
+  let {
+    theme: {
+      entities: {
+        handle
+      }
     }
-  }
-}) => 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({
-  disabled,
-  ...rest
-}, ref) {
+  } = _ref3;
+  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,
+    ...rest
+  } = _ref4;
   return /*#__PURE__*/jsxs(GridWrapper, {
     children: [/*#__PURE__*/jsx(Input, { ...rest,
       ref: ref,

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

@@ -7,10 +7,11 @@ const TableBase = styled.tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
-const Body = /*#__PURE__*/forwardRef(function Body({
-  children,
-  ...props
-}, ref) {
+const Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'body'

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

@@ -5,11 +5,14 @@ import { jsx } from 'react/jsx-runtime';
 const StyledCaption = styled.caption.withConfig({
   displayName: "Caption__StyledCaption",
   componentId: "sc-rtfr07-0"
-})(({
-  captionSide = 'top'
-}) => ({
-  captionSide
-}));
+})(_ref => {
+  let {
+    captionSide = 'top'
+  } = _ref;
+  return {
+    captionSide
+  };
+});
 const Caption = /*#__PURE__*/forwardRef(function Caption(props, ref) {
   return /*#__PURE__*/jsx(StyledCaption, { ...props,
     ref: ref

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

@@ -4,13 +4,16 @@ import { jsx } from 'react/jsx-runtime';
 import { TableDataCell } from './DataCell/DataCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
 
-const Cell = /*#__PURE__*/forwardRef(function Cell({ ...rest
-}, ref) {
+const Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
+  let { ...rest
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Consumer, {
-    children: ({
-      variant,
-      sticky
-    }) => {
+    children: _ref2 => {
+      let {
+        variant,
+        sticky
+      } = _ref2;
+
       switch (variant) {
         case 'head':
           return /*#__PURE__*/jsx(TableHeaderCell, {

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

@@ -1,36 +1,37 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { applyVariant, tableCell } from './DataCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../../utils/templates/index.js';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 
 const StyledTableCell = styled.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
-})(({
-  theme,
-  color
-}) => {
+})(_ref => {
   var _theme$validation$err;
 
+  let {
+    theme,
+    color
+  } = _ref;
   const {
     height,
     typography,
     spacings,
-    border
+    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:", ";", " ", " ", ""], height, height, backgroundColor, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
+  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
-const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
-  children,
-  variant = 'text',
-  ...rest
-}, ref) {
+const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell(_ref2, ref) {
+  let {
+    children,
+    variant = 'text',
+    ...rest
+  } = _ref2;
   const {
     density
   } = useEds();

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   typography: {
@@ -56,8 +56,11 @@ const {
   }
 } = tokens;
 const tableCell = {
-  height: '48px',
+  height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
+  align: {
+    vertical: 'var(--eds_table__cell__vertical_align, inherit)'
+  },
   border: {
     type: 'bordergroup',
     bottom: {
@@ -67,13 +70,14 @@ const tableCell = {
     }
   },
   spacings: {
-    top: '0',
-    bottom: '0',
-    left: medium,
-    right: medium
+    top: 'var(--eds_table__cell__padding_y, 0)',
+    bottom: 'var(--eds_table__cell__padding_y, 0)',
+    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
   },
   typography: { ...cellTypography,
-    color: typographyColor
+    color: typographyColor,
+    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
   },
   states: {
     active: {
@@ -112,9 +116,15 @@ const tableCell = {
   },
   modes: {
     compact: {
-      height: '32px',
+      height: 'var(--eds_table__cell__height_compact, 32px)',
       typography: { ...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, ".concat(medium, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
       }
     }
   },
@@ -141,7 +151,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight_1(token, token.variants.numeric);
+      return mergeDeepRight(token, token.variants.numeric);
 
     default:
       return token;

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

@@ -1,19 +1,20 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { token } from './Head.tokens.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { InnerContext } from '../Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 
 const StyledTableHead = styled.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
 })(["", " background:", ";"], bordersTemplate(token.border), token.background);
-const Head = /*#__PURE__*/forwardRef(function Head({
-  children,
-  sticky,
-  ...props
-}, ref) {
+const Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
+  let {
+    children,
+    sticky,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'head',

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

@@ -1,11 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { token } from './HeaderCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../../utils/templates/index.js';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 
 const StyledTableCell = styled.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
@@ -34,17 +32,18 @@ const StyledTableCell = styled.th.withConfig({
     sortStylingActive = css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
   }
 
-  return css(["min-height:", ";height:", ";background:", ";", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? css(["position:sticky;top:0;"]) : '');
+  return css(["min-height:", ";height:", ";background:", ";", " ", " ", " ", " ", " ", ""], 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({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
 })(["display:flex;align-items:center;"]);
-const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell({
-  children,
-  sort,
-  ...rest
-}, ref) {
+const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
+  let {
+    children,
+    sort,
+    ...rest
+  } = _ref;
   const {
     density
   } = useEds();

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

@@ -51,10 +51,14 @@ const {
   }
 } = tokens;
 const token = {
-  height: '48px',
+  height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
+  align: {
+    vertical: 'var(--eds_table__cell__vertical_align, inherit)'
+  },
   typography: { ...cellTypography,
-    color: typographyColor
+    color: typographyColor,
+    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
   },
   border: {
     type: 'bordergroup',
@@ -66,10 +70,10 @@ const token = {
     }
   },
   spacings: {
-    top: '0',
-    bottom: '0',
-    left: medium,
-    right: medium
+    top: 'var(--eds_table__cell__padding_y, 0)',
+    bottom: 'var(--eds_table__cell__padding_y, 0)',
+    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
   },
   states: {
     active: {
@@ -109,8 +113,14 @@ const token = {
   },
   modes: {
     compact: {
-      height: '32px',
-      typography: compactTypography.table.cell_header
+      height: 'var(--eds_table__cell__height_compact, 32px)',
+      typography: compactTypography.table.cell_header,
+      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, ".concat(medium, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
+      }
     }
   }
 };

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

@@ -6,11 +6,12 @@ import { jsx } from 'react/jsx-runtime';
 const StyledRow = styled.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-12c5lns-0"
-})(({
-  active
-}) => {
+})(_ref => {
   var _token$states$active, _token$states$hover;
 
+  let {
+    active
+  } = _ref;
   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)': {
@@ -20,8 +21,9 @@ const StyledRow = styled.tr.withConfig({
     }
   };
 });
-const Row = /*#__PURE__*/forwardRef(function Row({ ...props
-}, ref) {
+const Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
+  let { ...props
+  } = _ref2;
   const {
     children
   } = props;

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

@@ -7,10 +7,11 @@ const TableBase = styled.table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
-const Table = /*#__PURE__*/forwardRef(function Table({
-  children,
-  ...props
-}, ref) {
+const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(TableBase, { ...props,
     ref: ref,
     children: children

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

@@ -1,19 +1,22 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { tableOfContents } from './TableOfContents.tokens.js';
+import styled, { css } from 'styled-components';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const StyledLinkItem = styled.li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
-})(["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(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
-const LinkItem = /*#__PURE__*/forwardRef(function LinkItem({
-  children,
-  ...props
-}, ref) {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  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,
     ref: ref,
     children: children

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

@@ -1,17 +1,22 @@
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, ThemeProvider } from 'styled-components';
 import { List } from '../List/index.js';
+import { typographyTemplate, useToken } from '@equinor/eds-utils';
 import { tableOfContents } from './TableOfContents.tokens.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
-import { typographyTemplate } from '../../utils/templates/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const StyledTableOfContents = styled.nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",
   componentId: "sc-q23s6y-0"
-})(["margin-top:", ";margin-bottom:", ";", ""], tableOfContents.spacings.top, tableOfContents.spacings.bottom, ({
-  sticky
-}) => sticky && css(["position:fixed;top:", ";right:", ";"], tableOfContents.entities.sticky.spacings.top, tableOfContents.entities.sticky.spacings.right));
+})(_ref => {
+  let {
+    theme,
+    sticky
+  } = _ref;
+  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({
   displayName: "TableOfContents__TocList",
   componentId: "sc-q23s6y-1"
@@ -19,24 +24,39 @@ const TocList = styled(List).withConfig({
 const TocLabel = styled(Typography).withConfig({
   displayName: "TableOfContents__TocLabel",
   componentId: "sc-q23s6y-2"
-})(["", ""], typographyTemplate(tableOfContents.typography));
-const TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents({
-  children,
-  sticky = false,
-  label = '',
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsxs(StyledTableOfContents, {
-    ref: ref,
-    label: label,
-    sticky: sticky,
-    ...rest,
-    children: [/*#__PURE__*/jsx(TocLabel, {
-      variant: "overline",
-      children: label
-    }), /*#__PURE__*/jsx(TocList, {
-      children: children
-    })]
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  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
+  }, tableOfContents);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(StyledTableOfContents, {
+      ref: ref,
+      label: label,
+      sticky: sticky,
+      ...rest,
+      children: [/*#__PURE__*/jsx(TocLabel, {
+        variant: "overline",
+        children: label
+      }), /*#__PURE__*/jsx(TocList, {
+        children: children
+      })]
+    })
   });
 });
 

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

@@ -97,6 +97,9 @@ const tableOfContents = {
         color: primaryHover
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };