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

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -1,3 +1,6 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, Children, Fragment } from 'react';
 import styled from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
@@ -5,44 +8,45 @@ import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-const {
-  spacings,
-  typography,
-  states
-} = breadcrumbs;
-const OrderedList = styled.ol.withConfig({
+var _excluded = ["children", "collapse"];
+var spacings = breadcrumbs.spacings,
+    typography = breadcrumbs.typography,
+    states = breadcrumbs.states;
+var OrderedList = styled.ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
 })(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;"]);
-const ListItem = styled.li.withConfig({
+var ListItem = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
 })(["display:inline-block;"]);
-const Separator = styled(Typography).withConfig({
+var Separator = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
 })(["color:", ";", ""], typography.color, spacingsTemplate(spacings));
-const Collapsed = styled(Typography).withConfig({
+var Collapsed = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states.hover.typography.color, typography.color);
-const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
-  let {
-    children,
-    collapse,
-    ...rest
-  } = _ref;
-  const props = { ...rest,
-    ref
-  };
-  const [expanded, setExpanded] = useState(false);
+var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
+  var children = _ref.children,
+      collapse = _ref.collapse,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
+  });
 
-  const collapsedCrumbs = allCrumbs => {
-    const handleExpandClick = e => {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var collapsedCrumbs = function collapsedCrumbs(allCrumbs) {
+    var handleExpandClick = function handleExpandClick(e) {
       setExpanded(true);
-      const {
-        key
-      } = e;
+      var _ref2 = e,
+          key = _ref2.key;
 
       if (key === 'Enter') {
         setExpanded(true);
@@ -74,26 +78,29 @@ const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
     }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
   };
 
-  const allCrumbs = Children.toArray(children).map((child, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(ListItem, {
-      children: child
-    }), index !== Children.toArray(children).length - 1 && /*#__PURE__*/jsx("li", {
-      "aria-hidden": true,
-      children: /*#__PURE__*/jsx(Separator, {
-        variant: "body_short",
-        children: "/"
-      })
-    })]
-  }, `breadcrumb-${index}`));
-  return /*#__PURE__*/jsx("nav", { ...props,
+  var allCrumbs = Children.toArray(children).map(function (child, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(ListItem, {
+          children: child
+        }), index !== Children.toArray(children).length - 1 && /*#__PURE__*/jsx("li", {
+          "aria-hidden": true,
+          children: /*#__PURE__*/jsx(Separator, {
+            variant: "body_short",
+            children: "/"
+          })
+        })]
+      }, "breadcrumb-".concat(index))
+    );
+  });
+  return /*#__PURE__*/jsx("nav", _objectSpread(_objectSpread({}, props), {}, {
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsx(OrderedList, {
       children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
     })
-  });
+  }));
 }); // Breadcrumbs.displayName = 'eds-breadcrumbs'
 
 export { Breadcrumbs };

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

@@ -1,25 +1,10 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    text: {
-      static_icons__tertiary: {
-        rgba: enabledColor
-      }
-    },
-    interactive: {
-      primary__resting: {
-        rgba: hoverColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium: spacingMedium
-    }
-  }
-} = tokens;
-const breadcrumbs = {
+var _tokens$colors = tokens.colors,
+    enabledColor = _tokens$colors.text.static_icons__tertiary.rgba,
+    hoverColor = _tokens$colors.interactive.primary__resting.rgba,
+    spacingMedium = tokens.spacings.comfortable.medium;
+var breadcrumbs = {
   spacings: {
     left: spacingMedium,
     right: spacingMedium

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

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

package/dist/esm/components/Button/Button.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 { token } from './tokens/index.js';
@@ -6,7 +8,9 @@ import { InnerFullWidth } from './InnerFullWidth.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const getVariant = (tokenSet, variant) => {
+var _excluded = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
+
+var getVariant = function getVariant(tokenSet, variant) {
   switch (variant) {
     case 'ghost':
       return tokenSet.ghost;
@@ -26,7 +30,7 @@ const getVariant = (tokenSet, variant) => {
   }
 };
 
-const getToken = (variant, color) => {
+var getToken = function getToken(variant, color) {
   switch (color) {
     case 'danger':
       return getVariant(token.danger, variant);
@@ -40,68 +44,67 @@ const getToken = (variant, color) => {
   }
 };
 
-const Inner = styled.span.withConfig({
+var Inner = styled.span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
 })(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& > :is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
-const ButtonBase = styled.button.withConfig({
+var ButtonBase = styled.button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"
-})(_ref => {
+})(function (_ref) {
   var _clickbound$offset, _clickbound$offset2, _hover$typography;
 
-  let {
-    theme
-  } = _ref;
-  const {
-    states,
-    clickbound
-  } = theme;
-  const {
-    focus,
-    hover,
-    disabled
-  } = states;
+  var theme = _ref.theme;
+  var states = theme.states,
+      clickbound = theme.clickbound;
+  var focus = states.focus,
+      hover = states.hover,
+      disabled = states.disabled;
   return css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
-const Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
-  let {
-    color = 'primary',
-    variant = 'contained',
-    children,
-    disabled = false,
-    href,
-    tabIndex = 0,
-    fullWidth = false,
-    ...other
-  } = _ref2;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
+  var _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? 'primary' : _ref2$color,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'contained' : _ref2$variant,
+      children = _ref2.children,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      href = _ref2.href,
+      _ref2$tabIndex = _ref2.tabIndex,
+      tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
+      _ref2$fullWidth = _ref2.fullWidth,
+      fullWidth = _ref2$fullWidth === void 0 ? false : _ref2$fullWidth,
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, getToken(variant, color));
-  const as = href && !disabled ? 'a' : other.as ? other.as : 'button';
-  const type = href || other.as ? undefined : 'button';
+  var as = href && !disabled ? 'a' : other.as ? other.as : 'button';
+  var type = href || other.as ? undefined : 'button';
   tabIndex = disabled ? -1 : tabIndex;
-  const buttonProps = {
-    ref,
-    as,
-    href,
-    type,
-    disabled,
-    tabIndex,
-    ...other
-  };
+
+  var buttonProps = _objectSpread({
+    ref: ref,
+    as: as,
+    href: href,
+    type: type,
+    disabled: disabled,
+    tabIndex: tabIndex
+  }, other);
+
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(ButtonBase, { ...buttonProps,
+    children: /*#__PURE__*/jsx(ButtonBase, _objectSpread(_objectSpread({}, buttonProps), {}, {
       children: fullWidth ? /*#__PURE__*/jsx(InnerFullWidth, {
         children: children
       }) : /*#__PURE__*/jsx(Inner, {
         children: children
       })
-    })
+    }))
   });
 });
 

package/dist/esm/components/Button/ButtonGroup/ButtonGroup.js

@@ -1,37 +1,35 @@
+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 { group } from './ButtonGroup.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  border
-} = group;
-const radius = border.type === 'border' && border.radius;
-const ButtonGroupBase = styled.div.withConfig({
+var _excluded = ["children", "vertical"];
+var border = group.border;
+var radius = border.type === 'border' && border.radius;
+var ButtonGroupBase = styled.div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"
-})(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], _ref => {
-  let {
-    vertical
-  } = _ref;
+})(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], function (_ref) {
+  var vertical = _ref.vertical;
   return vertical ? css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius, radius, radius, radius) : css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius, radius, radius, radius);
 });
-const ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(_ref2, ref) {
-  let {
-    children,
-    vertical,
-    ...rest
-  } = _ref2;
-  const props = {
-    ref,
-    vertical,
-    ...rest
-  };
-  return /*#__PURE__*/jsx(ButtonGroupBase, {
-    role: "group",
-    ...props,
+var ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(_ref2, ref) {
+  var children = _ref2.children,
+      vertical = _ref2.vertical,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread({
+    ref: ref,
+    vertical: vertical
+  }, rest);
+
+  return /*#__PURE__*/jsx(ButtonGroupBase, _objectSpread(_objectSpread({
+    role: "group"
+  }, props), {}, {
     children: children
-  });
+  }));
 });
 
 export { ButtonGroup };

package/dist/esm/components/Button/ButtonGroup/ButtonGroup.tokens.js

@@ -1,13 +1,7 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  shape: {
-    corners: {
-      borderRadius
-    }
-  }
-} = tokens;
-const group = {
+var borderRadius = tokens.shape.corners.borderRadius;
+var group = {
   border: {
     type: 'border',
     radius: borderRadius

package/dist/esm/components/Button/InnerFullWidth.js

@@ -1,23 +1,24 @@
+import _typeof from '@babel/runtime/helpers/typeof';
 import { forwardRef, Children } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const FullWidthCenterContent = styled.span.withConfig({
+var FullWidthCenterContent = styled.span.withConfig({
   displayName: "InnerFullWidth__FullWidthCenterContent",
   componentId: "sc-qeawkb-0"
 })(["text-align:center;flex:1;"]);
-const FullWidthInner = styled.span.withConfig({
+var FullWidthInner = styled.span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
 })(["height:100%;display:flex;align-items:center;> :is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}> :is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
-const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth(_ref, ref) {
-  let {
-    children
-  } = _ref;
+var InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth(_ref, ref) {
+  var children = _ref.children;
   // We need everything in elements for proper flexing 💪
-  const updatedChildren = Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsx(FullWidthCenterContent, {
-    children: child
-  }) : child);
+  var updatedChildren = Children.map(children, function (child) {
+    return _typeof(child) !== 'object' ? /*#__PURE__*/jsx(FullWidthCenterContent, {
+      children: child
+    }) : child;
+  });
   return /*#__PURE__*/jsx(FullWidthInner, {
     ref: ref,
     children: updatedChildren

package/dist/esm/components/Button/ToggleButton/ToggleButton.js

@@ -1,38 +1,48 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { Button } from '../Button.js';
 import { jsx } from 'react/jsx-runtime';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 
-const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
-  let {
-    children,
-    multiple,
-    selectedIndexes,
-    onChange,
-    ...props
-  } = _ref;
-  const [pickedIndexes, setPickedIndexes] = useState(selectedIndexes || []);
-  useEffect(() => {
+var _excluded = ["children", "multiple", "selectedIndexes", "onChange"];
+var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
+  var children = _ref.children,
+      multiple = _ref.multiple,
+      selectedIndexes = _ref.selectedIndexes,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(selectedIndexes || []),
+      _useState2 = _slicedToArray(_useState, 2),
+      pickedIndexes = _useState2[0],
+      setPickedIndexes = _useState2[1];
+
+  useEffect(function () {
     if (Array.isArray(selectedIndexes)) {
       setPickedIndexes(selectedIndexes);
     }
   }, [selectedIndexes]);
-  const updatedChildren = Children.map(children, (child, index) => {
-    const isSelected = pickedIndexes.includes(index);
-    const childElement = child;
+  var updatedChildren = Children.map(children, function (child, index) {
+    var isSelected = pickedIndexes.includes(index);
+    var childElement = child;
 
     if ( /*#__PURE__*/isValidElement(child) && child.type === Button) {
-      const buttonProps = {
+      var buttonProps = {
         'aria-pressed': isSelected ? true : undefined,
         variant: isSelected ? 'contained' : 'outlined',
-        onClick: e => {
+        onClick: function onClick(e) {
           var _childElement$props, _childElement$props$o;
 
           (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
-          let updatedSelection = [index];
+          var updatedSelection = [index];
 
           if (multiple) {
-            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(i => i !== index) : [...pickedIndexes, index];
+            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(function (i) {
+              return i !== index;
+            }) : [].concat(_toConsumableArray(pickedIndexes), [index]);
           }
 
           setPickedIndexes(updatedSelection);
@@ -45,11 +55,11 @@ const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
       return /*#__PURE__*/cloneElement(child, buttonProps);
     }
   });
-  return /*#__PURE__*/jsx(ButtonGroup, {
-    ref: ref,
-    ...props,
+  return /*#__PURE__*/jsx(ButtonGroup, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     children: updatedChildren
-  });
+  }));
 });
 
 export { ToggleButton };

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

@@ -2,7 +2,7 @@ import { Button as Button$1 } from './Button.js';
 import { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
 import { ToggleButton } from './ToggleButton/ToggleButton.js';
 
-const Button = Button$1;
+var Button = Button$1;
 Button.Group = ButtonGroup;
 Button.Toggle = ToggleButton;
 Button.Group.displayName = 'Button.Group';

package/dist/esm/components/Button/tokens/button.js

@@ -1,75 +1,46 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  typography: {
-    navigation: {
-      button: buttonTypography
-    }
-  },
-  colors: {
-    interactive: {
-      disabled__text: {
-        rgba: disabledTextColor
-      },
-      disabled__border: {
-        rgba: disabledBorderColor
-      },
-      disabled__fill: {
-        rgba: disabledColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium
-    }
-  },
-  shape: {
-    button: {
-      minHeight: buttonHeight,
-      borderRadius: buttonBorderRadius
-    },
-    _modes: {
-      compact: {
-        button: {
-          minHeight: compactButtonHeight
-        }
-      }
-    }
-  },
-  interactions: {
-    focused: outline
-  },
-  clickbounds: {
-    default__base: clicboundHeight,
-    compact__standard: compactClickboundHeight
-  }
-} = tokens;
-const button = {
+var buttonTypography = tokens.typography.navigation.button,
+    _tokens$colors$intera = tokens.colors.interactive,
+    disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
+    disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
+    disabledColor = _tokens$colors$intera.disabled__fill.rgba,
+    medium = tokens.spacings.comfortable.medium,
+    _tokens$shape = tokens.shape,
+    _tokens$shape$button = _tokens$shape.button,
+    buttonHeight = _tokens$shape$button.minHeight,
+    buttonBorderRadius = _tokens$shape$button.borderRadius,
+    compactButtonHeight = _tokens$shape._modes.compact.button.minHeight,
+    outline = tokens.interactions.focused,
+    _tokens$clickbounds = tokens.clickbounds,
+    clicboundHeight = _tokens$clickbounds.default__base,
+    compactClickboundHeight = _tokens$clickbounds.compact__standard;
+var button = {
   background: 'transparent',
-  height: `var(--eds_button__height, ${buttonHeight})`,
-  typography: { ...buttonTypography,
+  height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
+  typography: _objectSpread(_objectSpread({}, buttonTypography), {}, {
     textAlign: 'center',
-    fontSize: `var(--eds_button__font_size, ${buttonTypography.fontSize})`
-  },
+    fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
+  }),
   border: {
     type: 'border',
-    width: `var(--eds_button__border_width, 1px)`,
+    width: "var(--eds_button__border_width, 1px)",
     color: 'transparent',
-    radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
     style: 'solid'
   },
   spacings: {
     top: 'var(--eds_button__padding_y, 0)',
     bottom: 'var(--eds_button__padding_y, 0)',
-    left: `var(--eds_button__padding_x, ${medium})`,
-    right: `var(--eds_button__padding_x, ${medium})`
+    left: "var(--eds_button__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_button__padding_x, ".concat(medium, ")")
   },
   clickbound: {
     height: clicboundHeight,
     width: '100%',
     offset: {
-      top: `${(parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1}px`,
+      top: "".concat((parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1, "px"),
       left: '0'
     }
   },
@@ -85,7 +56,7 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
+        radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
         style: 'solid'
       }
     },
@@ -106,15 +77,15 @@ const button = {
         color: disabledBorderColor,
         style: 'solid'
       },
-      typography: { ...buttonTypography,
+      typography: _objectSpread(_objectSpread({}, buttonTypography), {}, {
         color: disabledTextColor,
         textAlign: 'center'
-      }
+      })
     }
   },
   modes: {
     compact: {
-      height: `var(--eds_button__height_compact, ${compactButtonHeight})`,
+      height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
       spacings: {
         top: 'var(--eds_button__padding_y_compact, 0)',
         bottom: 'var(--eds_button__padding_y_compact, 0)'
@@ -123,7 +94,7 @@ const button = {
         height: compactClickboundHeight,
         width: '100%',
         offset: {
-          top: `${(parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1}px`,
+          top: "".concat((parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
           left: '0'
         }
       }