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

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

@@ -1,31 +1,22 @@
+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,
-  colors,
-  shape: {
-    straight,
-    corners: {
-      borderRadius
-    }
-  },
-  spacings: {
-    comfortable: {
-      small: spacingSmall,
-      medium_small: spacingMediumSmall,
-      medium: spacingMedium,
-      large: spacingLarge,
-      xx_small
-    }
-  },
-  elevation: {
-    temporary_nav: boxShadow
-  }
-} = tokens;
-const selectTokens = {
+var typography = tokens.typography,
+    colors = tokens.colors,
+    _tokens$shape = tokens.shape,
+    straight = _tokens$shape.straight,
+    borderRadius = _tokens$shape.corners.borderRadius,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    spacingSmall = _tokens$spacings$comf.small,
+    spacingMediumSmall = _tokens$spacings$comf.medium_small,
+    spacingMedium = _tokens$spacings$comf.medium,
+    spacingLarge = _tokens$spacings$comf.large,
+    xx_small = _tokens$spacings$comf.xx_small,
+    boxShadow = tokens.elevation.temporary_nav;
+var selectTokens = {
   background: colors.ui.background__default.rgba,
-  boxShadow,
+  boxShadow: boxShadow,
   minHeight: straight.minHeight,
   spacings: {
     top: spacingMedium,
@@ -33,9 +24,9 @@ const selectTokens = {
     bottom: spacingMedium,
     left: spacingLarge
   },
-  typography: { ...typography.navigation.menu_title,
+  typography: _objectSpread(_objectSpread({}, typography.navigation.menu_title), {}, {
     color: colors.text.static_icons__default.rgba
-  },
+  }),
   border: {
     type: 'border',
     radius: borderRadius
@@ -83,7 +74,7 @@ const selectTokens = {
     }
   }
 };
-const multiSelect = mergeDeepRight(selectTokens, {
+var multiSelect = mergeDeepRight(selectTokens, {
   spacings: {
     top: '0',
     bottom: '0',

package/dist/esm/components/Autocomplete/Option.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 } from 'styled-components';
 import { List } from '../List/index.js';
@@ -5,48 +7,48 @@ import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
-const StyledListItem = styled(List.Item).withConfig({
+var _excluded = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
+var StyledListItem = styled(List.Item).withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
-})(_ref => {
-  let {
-    theme,
-    highlighted,
-    active,
-    isdisabled
-  } = _ref;
-  const backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
+})(function (_ref) {
+  var theme = _ref.theme,
+      highlighted = _ref.highlighted,
+      active = _ref.active,
+      isdisabled = _ref.isdisabled;
+  var backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
   return css(["display:flex;align-items:center;margin:0;list-style:none;background-color:", ";user-select:none;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-const AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref2, ref) {
-  let {
-    value,
-    multiple,
-    isSelected,
-    isDisabled,
-    onClick,
-    'aria-selected': ariaSelected,
-    ...other
-  } = _ref2;
-  return /*#__PURE__*/jsxs(StyledListItem, {
+var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref2, ref) {
+  var value = _ref2.value,
+      multiple = _ref2.multiple,
+      isSelected = _ref2.isSelected,
+      isDisabled = _ref2.isDisabled,
+      _onClick = _ref2.onClick,
+      ariaSelected = _ref2['aria-selected'],
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/jsxs(StyledListItem, _objectSpread(_objectSpread({
     ref: ref,
     isdisabled: isDisabled ? 'true' : 'false',
     "aria-hidden": isDisabled,
     active: !multiple && isSelected ? 'true' : 'false',
-    onClick: e => !isDisabled && onClick(e),
-    "aria-selected": multiple ? isSelected : ariaSelected,
-    ...other,
+    onClick: function onClick(e) {
+      return !isDisabled && _onClick(e);
+    },
+    "aria-selected": multiple ? isSelected : ariaSelected
+  }, other), {}, {
     children: [multiple && /*#__PURE__*/jsx(Checkbox, {
       disabled: isDisabled,
       checked: isSelected,
       value: value,
-      onChange: () => {
+      onChange: function onChange() {
         return null;
       }
     }), /*#__PURE__*/jsx("span", {
       children: value
     })]
-  });
+  }));
 });
 
 export { AutocompleteOption };

package/dist/esm/components/Avatar/Avatar.js

@@ -1,46 +1,47 @@
+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 { bordersTemplate } from '@equinor/eds-utils';
 import { avatar } from './Avatar.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledAvatar = styled.div.withConfig({
+var _excluded = ["src", "alt", "size", "disabled"];
+var StyledAvatar = styled.div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
-})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), _ref => {
-  let {
-    size
-  } = _ref;
+})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), function (_ref) {
+  var size = _ref.size;
   return css(["height:", "px;width:", "px;"], size, size);
 });
-const StyledImage = styled.img.withConfig({
+var StyledImage = styled.img.withConfig({
   displayName: "Avatar__StyledImage",
   componentId: "sc-r7n7on-1"
-})(["height:100%;text-align:center;color:transparent;", ";"], _ref2 => {
-  let {
-    disabled
-  } = _ref2;
+})(["height:100%;text-align:center;color:transparent;", ";"], function (_ref2) {
+  var disabled = _ref2.disabled;
   return disabled && css(["opacity:", ";"], avatar.states.disabled.opacity);
 });
-const Avatar = /*#__PURE__*/forwardRef(function Avatar(_ref3, ref) {
-  let {
-    src = null,
-    alt,
-    size = 24,
-    disabled = false,
-    ...rest
-  } = _ref3;
-  return /*#__PURE__*/jsx(StyledAvatar, {
+var Avatar = /*#__PURE__*/forwardRef(function Avatar(_ref3, ref) {
+  var _ref3$src = _ref3.src,
+      src = _ref3$src === void 0 ? null : _ref3$src,
+      alt = _ref3.alt,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 24 : _ref3$size,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread({
     size: size,
     disabled: disabled,
-    ref: ref,
-    ...rest,
+    ref: ref
+  }, rest), {}, {
     children: /*#__PURE__*/jsx(StyledImage, {
       src: src,
       alt: alt,
       disabled: disabled
     })
-  });
+  }));
 });
 Avatar.displayName = 'Avatar';
 

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

@@ -1,4 +1,4 @@
-const avatar = {
+var avatar = {
   border: {
     type: 'border',
     radius: '50%'

package/dist/esm/components/Banner/Banner.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
@@ -8,44 +10,46 @@ import { Divider } from '../Divider/Divider.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Paper } from '../Paper/Paper.js';
 
-const Content = styled.div.withConfig({
+var _excluded = ["children", "className", "elevation"];
+var Content = styled.div.withConfig({
   displayName: "Banner__Content",
   componentId: "sc-1ju451i-0"
-})(_ref => {
-  let {
-    theme,
-    hasIcon
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      hasIcon = _ref.hasIcon;
   return css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
 });
-const NonMarginDivider = styled(Divider).withConfig({
+var NonMarginDivider = styled(Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
   componentId: "sc-1ju451i-1"
 })(["margin:0;height:2px;"]);
-const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
-  let {
-    children,
-    className,
-    elevation = 'none',
-    ...rest
-  } = _ref2;
-  const childrenWhereBannerIcon = Children.map(children, child => {
+var Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
+  var children = _ref2.children,
+      className = _ref2.className,
+      _ref2$elevation = _ref2.elevation,
+      elevation = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var childrenWhereBannerIcon = Children.map(children, function (child) {
     return /*#__PURE__*/isValidElement(child) && child.type === BannerIcon;
   });
-  const hasIcon = childrenWhereBannerIcon.some(bool => bool);
-  const props = {
-    ref,
-    ...rest
-  };
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+  var hasIcon = childrenWhereBannerIcon.some(function (bool) {
+    return bool;
+  });
+
+  var props = _objectSpread({
+    ref: ref
+  }, rest);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, enabled);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(Paper, { ...props,
+    children: /*#__PURE__*/jsxs(Paper, _objectSpread(_objectSpread({}, props), {}, {
       className: className,
       elevation: elevation,
       role: "alert",
@@ -55,7 +59,7 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
       }), /*#__PURE__*/jsx(NonMarginDivider, {
         color: "light"
       })]
-    })
+    }))
   });
 });
 

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

@@ -1,49 +1,21 @@
-import { tokens as tokens$1 } from '@equinor/eds-tokens';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { tokens } from '@equinor/eds-tokens';
 
-/* eslint-disable camelcase */
-const {
-  typography: {
-    paragraph: {
-      body_long: messageTypography
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium
-    }
-  },
-  colors: {
-    infographic: {
-      primary__moss_green_13: {
-        rgba: infoBackground
-      },
-      primary__energy_red_13: {
-        rgba: warningBackground
-      },
-      primary__moss_green_100: {
-        rgba: infoColor
-      },
-      primary__energy_red_100: {
-        rgba: warningColor
-      }
-    },
-    ui: {
-      background__default: {
-        rgba: backgroundColor
-      }
-    }
-  },
-  shape: {
-    circle: {
-      minHeight,
-      minWidth,
-      borderRadius
-    }
-  }
-} = tokens$1;
-const enabled = {
-  typography: { ...messageTypography
-  },
+var messageTypography = tokens.typography.paragraph.body_long,
+    medium = tokens.spacings.comfortable.medium,
+    _tokens$colors = tokens.colors,
+    _tokens$colors$infogr = _tokens$colors.infographic,
+    infoBackground = _tokens$colors$infogr.primary__moss_green_13.rgba,
+    warningBackground = _tokens$colors$infogr.primary__energy_red_13.rgba,
+    infoColor = _tokens$colors$infogr.primary__moss_green_100.rgba,
+    warningColor = _tokens$colors$infogr.primary__energy_red_100.rgba,
+    backgroundColor = _tokens$colors.ui.background__default.rgba,
+    _tokens$shape$circle = tokens.shape.circle,
+    minHeight = _tokens$shape$circle.minHeight,
+    minWidth = _tokens$shape$circle.minWidth,
+    borderRadius = _tokens$shape$circle.borderRadius;
+var enabled = {
+  typography: _objectSpread({}, messageTypography),
   background: backgroundColor,
   spacings: {
     left: medium,
@@ -65,7 +37,7 @@ const enabled = {
     compact: {}
   }
 };
-const info = {
+var info = {
   entities: {
     icon: {
       background: infoBackground,
@@ -78,7 +50,7 @@ const info = {
     compact: {}
   }
 };
-const warning = {
+var warning = {
   entities: {
     icon: {
       background: warningBackground,

package/dist/esm/components/Banner/BannerActions.js

@@ -1,35 +1,36 @@
+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 { jsx } from 'react/jsx-runtime';
 
-const StyledBannerActions = styled.div.withConfig({
+var _excluded = ["children", "placement"];
+var StyledBannerActions = styled.div.withConfig({
   displayName: "BannerActions__StyledBannerActions",
   componentId: "sc-1o38ds2-0"
-})(_ref => {
-  let {
-    theme,
-    placement
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      placement = _ref.placement;
   return css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, placement === 'bottom' ? '1/-1' : 'auto', placement === 'bottom' && {
     marginTop: theme.spacings.top,
     marginLeft: '0'
   });
 });
-const BannerActions = /*#__PURE__*/forwardRef(function BannerActions(_ref2, ref) {
-  let {
-    children,
-    placement = 'left',
-    ...rest
-  } = _ref2;
-  const props = {
-    ref,
-    ...rest
-  };
-  return /*#__PURE__*/jsx(StyledBannerActions, {
-    placement: placement,
-    ...props,
+var BannerActions = /*#__PURE__*/forwardRef(function BannerActions(_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$placement = _ref2.placement,
+      placement = _ref2$placement === void 0 ? 'left' : _ref2$placement,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread({
+    ref: ref
+  }, rest);
+
+  return /*#__PURE__*/jsx(StyledBannerActions, _objectSpread(_objectSpread({
+    placement: placement
+  }, props), {}, {
     children: children
-  });
+  }));
 });
 
 export { BannerActions };

package/dist/esm/components/Banner/BannerIcon.js

@@ -1,45 +1,45 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
-import * as Banner_tokens from './Banner.tokens.js';
+import { info as info$1, warning as warning$1 } from './Banner.tokens.js';
 import { Icon } from '../Icon/index.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  info,
-  warning
-} = Banner_tokens;
-const StyledBannerIcon = styled.span.withConfig({
+var _excluded = ["children", "variant"];
+var info = info$1,
+    warning = warning$1;
+var StyledBannerIcon = styled.span.withConfig({
   displayName: "BannerIcon__StyledBannerIcon",
   componentId: "sc-7ow3zc-0"
-})(_ref => {
-  let {
-    theme,
-    variant
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      variant = _ref.variant;
   return css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(theme.entities.icon.border), variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
 });
-const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon(_ref2, ref) {
-  let {
-    children,
-    variant = 'info',
-    ...rest
-  } = _ref2;
-  const childrenWithColor = Children.map(children, child => {
-    const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
+var BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon(_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'info' : _ref2$variant,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var childrenWithColor = Children.map(children, function (child) {
+    var color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
     return /*#__PURE__*/isValidElement(child) && child.type === Icon && /*#__PURE__*/cloneElement(child, {
-      color
+      color: color
     }) || child;
   });
-  const props = {
-    ref,
-    ...rest
-  };
-  return /*#__PURE__*/jsx(StyledBannerIcon, {
-    variant: variant,
-    ...props,
+
+  var props = _objectSpread({
+    ref: ref
+  }, rest);
+
+  return /*#__PURE__*/jsx(StyledBannerIcon, _objectSpread(_objectSpread({
+    variant: variant
+  }, props), {}, {
     children: childrenWithColor
-  });
+  }));
 });
 
 export { BannerIcon };

package/dist/esm/components/Banner/BannerMessage.js

@@ -1,26 +1,28 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-const StyledBannerMessage = styled(Typography).withConfig({
+var _excluded = ["children"];
+var StyledBannerMessage = styled(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
-const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage(_ref, ref) {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  const props = {
-    ref,
-    ...rest
-  };
-  return /*#__PURE__*/jsx(StyledBannerMessage, {
-    variant: "body_long",
-    ...props,
+var BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage(_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var props = _objectSpread({
+    ref: ref
+  }, rest);
+
+  return /*#__PURE__*/jsx(StyledBannerMessage, _objectSpread(_objectSpread({
+    variant: "body_long"
+  }, props), {}, {
     children: children
-  });
+  }));
 });
 
 export { BannerMessage };

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

@@ -3,7 +3,7 @@ import { BannerIcon } from './BannerIcon.js';
 import { BannerMessage } from './BannerMessage.js';
 import { BannerActions } from './BannerActions.js';
 
-const Banner = Banner$1;
+var Banner = Banner$1;
 Banner.Icon = BannerIcon;
 Banner.Message = BannerMessage;
 Banner.Actions = BannerActions;

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

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
@@ -5,45 +7,44 @@ import { jsx } from 'react/jsx-runtime';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Typography } from '../Typography/Typography.js';
 
-const {
-  states,
-  typography
-} = breadcrumbs;
-const StyledTypography = styled(Typography).withConfig({
+var _excluded = ["children", "maxWidth", "href", "as"];
+var states = breadcrumbs.states,
+    typography = breadcrumbs.typography;
+var StyledTypography = styled(Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
-})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography.color, _ref => {
-  let {
-    $maxWidth
-  } = _ref;
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography.color, function (_ref) {
+  var $maxWidth = _ref.$maxWidth;
   return css({
     maxWidth: $maxWidth
   });
 });
-const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
-  let {
-    children,
-    maxWidth,
-    href,
-    as,
-    ...other
-  } = _ref2;
-  const props = { ...other,
-    href,
-    ref
-  };
-  const showTooltip = maxWidth > 0;
-  const isHrefDefined = href !== undefined;
-  const forwardedAs = useMemo(() => as ? as : isHrefDefined ? 'a' : 'span', [as, isHrefDefined]);
+var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
+  var children = _ref2.children,
+      maxWidth = _ref2.maxWidth,
+      href = _ref2.href,
+      as = _ref2.as,
+      other = _objectWithoutProperties(_ref2, _excluded);
 
-  const crumb = /*#__PURE__*/jsx(StyledTypography, {
+  var props = _objectSpread(_objectSpread({}, other), {}, {
+    href: href,
+    ref: ref
+  });
+
+  var showTooltip = maxWidth > 0;
+  var isHrefDefined = href !== undefined;
+  var forwardedAs = useMemo(function () {
+    return as ? as : isHrefDefined ? 'a' : 'span';
+  }, [as, isHrefDefined]);
+
+  var crumb = /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({
     link: isHrefDefined,
     forwardedAs: forwardedAs,
     variant: "body_short",
-    $maxWidth: maxWidth,
-    ...props,
+    $maxWidth: maxWidth
+  }, props), {}, {
     children: children
-  });
+  }));
 
   return showTooltip ? /*#__PURE__*/jsx(Tooltip, {
     title: children,