@equinor/eds-core-react 0.18.0-envis.1 → 0.19.0-dev.20220404

package/dist/esm/components/Accordion/Accordion.js

@@ -1,18 +1,18 @@
 import { forwardRef, Children, cloneElement } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { accordion } from './Accordion.tokens.js';
+import { useId, useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { useId } from '../../hooks/useId.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
-const Accordion = /*#__PURE__*/forwardRef(function Accordion({
-  headerLevel = 'h2',
-  chevronPosition = 'left',
-  children,
-  id,
-  ...props
-}, ref) {
+const Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
+  let {
+    headerLevel = 'h2',
+    chevronPosition = 'left',
+    children,
+    id,
+    ...props
+  } = _ref;
   const accordionId = useId(id, 'accordion');
   const {
     density

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

@@ -42,6 +42,11 @@ const {
     comfortable: {
       medium: mediumSpacing
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const accordion = {
@@ -74,7 +79,7 @@ const accordion = {
             type: 'outline',
             color: focusOutlineColor,
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth,
             offset: '2px'
           }
         },

package/dist/esm/components/Accordion/AccordionHeader.js

@@ -4,35 +4,40 @@ import { chevron_up, chevron_down } from '@equinor/eds-icons';
 import { Icon } from '../Icon/index.js';
 import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
 import { accordion } from './Accordion.tokens.js';
+import { typographyTemplate, bordersTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   entities: {
     chevron: chevronToken
   }
 } = accordion;
-const StyledAccordionHeader = styled.div.attrs(({
-  panelId,
-  isExpanded,
-  disabled
-}) => ({
-  'aria-expanded': isExpanded,
-  'aria-controls': panelId,
-  role: 'button',
-  'aria-disabled': isExpanded && disabled,
-  tabIndex: disabled ? -1 : 0,
-  disabled
-})).withConfig({
+const StyledAccordionHeader = styled.div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(({
-  theme,
-  disabled,
-  parentIndex
-}) => {
+})(["margin:0;padding:0;"]);
+const StyledAccordionHeaderButton = styled.button.attrs(_ref => {
+  let {
+    panelId,
+    isExpanded,
+    disabled
+  } = _ref;
+  return {
+    'aria-expanded': isExpanded,
+    'aria-controls': panelId,
+    'aria-disabled': isExpanded && disabled,
+    tabIndex: disabled ? -1 : 0,
+    disabled
+  };
+}).withConfig({
+  displayName: "AccordionHeader__StyledAccordionHeaderButton",
+  componentId: "sc-cu2e95-1"
+})(_ref2 => {
+  let {
+    theme,
+    disabled,
+    parentIndex
+  } = _ref2;
   const {
     entities: {
       header,
@@ -40,7 +45,7 @@ const StyledAccordionHeader = styled.div.attrs(({
     },
     border
   } = theme;
-  return css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? css({
+  return css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";width:100%;background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
   }) : css({
@@ -55,26 +60,31 @@ const StyledAccordionHeader = styled.div.attrs(({
 });
 const StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
-  componentId: "sc-cu2e95-1"
-})(({
-  chevronPosition
-}) => chevronPosition === 'left' ? {
-  marginRight: '32px'
-} : {
-  marginLeft: '16px'
+  componentId: "sc-cu2e95-2"
+})(_ref3 => {
+  let {
+    chevronPosition
+  } = _ref3;
+  return chevronPosition === 'left' ? {
+    marginRight: '32px'
+  } : {
+    marginLeft: '16px'
+  };
 });
-const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
-  parentIndex,
-  headerLevel,
-  chevronPosition,
-  panelId,
-  id,
-  isExpanded = false,
-  children,
-  toggleExpanded,
-  disabled,
-  ...props
-}, ref) {
+const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4, ref) {
+  let {
+    parentIndex,
+    headerLevel,
+    chevronPosition,
+    panelId,
+    id,
+    isExpanded = false,
+    children,
+    toggleExpanded,
+    disabled,
+    ...props
+  } = _ref4;
+
   const handleClick = () => {
     if (!disabled) {
       toggleExpanded();
@@ -128,16 +138,18 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
   });
   const newChildren = [chevron, headerChildren];
   return /*#__PURE__*/jsx(StyledAccordionHeader, {
-    isExpanded: isExpanded,
-    parentIndex: parentIndex,
     as: headerLevel,
-    disabled: disabled,
-    ...props,
-    panelId: panelId,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    ref: ref,
-    children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+    children: /*#__PURE__*/jsx(StyledAccordionHeaderButton, {
+      isExpanded: isExpanded,
+      parentIndex: parentIndex,
+      disabled: disabled,
+      panelId: panelId,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: ref,
+      ...props,
+      children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+    })
   });
 }); // AccordionHeader.displayName = 'EdsAccordionHeader'
 

package/dist/esm/components/Accordion/AccordionHeaderTitle.js

@@ -5,20 +5,22 @@ import { jsx } from 'react/jsx-runtime';
 const StyledAccordionHeaderTitle = styled.span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
-})(({
-  theme,
-  isExpanded,
-  disabled
-}) => {
+})(_ref => {
   var _theme$entities$heade;
 
+  let {
+    theme,
+    isExpanded,
+    disabled
+  } = _ref;
   return css(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], isExpanded && !disabled ? (_theme$entities$heade = theme.entities.header.states.active.typography) === null || _theme$entities$heade === void 0 ? void 0 : _theme$entities$heade.color : 'inherit');
 });
-const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle({
-  isExpanded,
-  disabled,
-  children
-}, ref) {
+const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
+  let {
+    isExpanded,
+    disabled,
+    children
+  } = _ref2;
   return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, {
     ref: ref,
     isExpanded: isExpanded,

package/dist/esm/components/Accordion/AccordionItem.js

@@ -1,16 +1,17 @@
 import { forwardRef, useState, Children, cloneElement, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
-  headerLevel,
-  chevronPosition,
-  index = 0,
-  accordionId,
-  isExpanded,
-  children,
-  disabled,
-  ...props
-}, ref) {
+const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
+  let {
+    headerLevel,
+    chevronPosition,
+    index = 0,
+    accordionId,
+    isExpanded,
+    children,
+    disabled,
+    ...props
+  } = _ref;
   const [expanded, setExpanded] = useState(isExpanded);
 
   const toggleExpanded = () => {

package/dist/esm/components/Accordion/AccordionPanel.js

@@ -1,20 +1,23 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 
-const StyledAccordionPanel = styled.div.attrs(({
-  headerId
-}) => ({
-  role: 'region',
-  'aria-labelledby': headerId
-})).withConfig({
+const StyledAccordionPanel = styled.div.attrs(_ref => {
+  let {
+    headerId
+  } = _ref;
+  return {
+    role: 'region',
+    'aria-labelledby': headerId
+  };
+}).withConfig({
   displayName: "AccordionPanel__StyledAccordionPanel",
   componentId: "sc-suplv4-0"
-})(({
-  theme
-}) => {
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
   const {
     entities: {
       header,
@@ -24,13 +27,14 @@ const StyledAccordionPanel = styled.div.attrs(({
   } = theme;
   return css(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), header.background);
 });
-const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel({
-  id,
-  headerId,
-  hidden,
-  children,
-  ...props
-}, ref) {
+const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel(_ref3, ref) {
+  let {
+    id,
+    headerId,
+    hidden,
+    children,
+    ...props
+  } = _ref3;
   return /*#__PURE__*/jsx(StyledAccordionPanel, {
     headerId: headerId,
     id: id,

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

@@ -1,28 +1,35 @@
 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';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const 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), ({
-  size
-}) => css(["height:", "px;width:", "px;"], size, size));
+})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), _ref => {
+  let {
+    size
+  } = _ref;
+  return css(["height:", "px;width:", "px;"], size, size);
+});
 const StyledImage = styled.img.withConfig({
   displayName: "Avatar__StyledImage",
   componentId: "sc-r7n7on-1"
-})(["height:100%;text-align:center;color:transparent;", ";"], ({
-  disabled
-}) => disabled && css(["opacity:", ";"], avatar.states.disabled.opacity));
-const Avatar = /*#__PURE__*/forwardRef(function Avatar({
-  src = null,
-  alt,
-  size = 24,
-  disabled = false,
-  ...rest
-}, ref) {
+})(["height:100%;text-align:center;color:transparent;", ";"], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  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, {
     size: size,
     disabled: disabled,

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

@@ -1,12 +1,11 @@
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { enabled } from './Banner.tokens.js';
 import { BannerIcon } from './BannerIcon.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 import { Divider } from '../Divider/Divider.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledBanner = styled.div.withConfig({
   displayName: "Banner__StyledBanner",
@@ -15,21 +14,23 @@ const StyledBanner = styled.div.withConfig({
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",
   componentId: "sc-1ju451i-1"
-})(({
-  theme,
-  hasIcon
-}) => {
+})(_ref => {
+  let {
+    theme,
+    hasIcon
+  } = _ref;
   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({
   displayName: "Banner__NonMarginDivider",
   componentId: "sc-1ju451i-2"
 })(["margin:0;height:2px;"]);
-const Banner = /*#__PURE__*/forwardRef(function Banner({
-  children,
-  className,
-  ...rest
-}, ref) {
+const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
   const childrenWhereBannerIcon = Children.map(children, child => {
     return /*#__PURE__*/isValidElement(child) && child.type === BannerIcon;
   });

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

@@ -5,20 +5,22 @@ import { jsx } from 'react/jsx-runtime';
 const StyledBannerActions = styled.div.withConfig({
   displayName: "BannerActions__StyledBannerActions",
   componentId: "sc-1o38ds2-0"
-})(({
-  theme,
-  placement
-}) => {
+})(_ref => {
+  let {
+    theme,
+    placement
+  } = _ref;
   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({
-  children,
-  placement = 'left',
-  ...rest
-}, ref) {
+const BannerActions = /*#__PURE__*/forwardRef(function BannerActions(_ref2, ref) {
+  let {
+    children,
+    placement = 'left',
+    ...rest
+  } = _ref2;
   const props = {
     ref,
     ...rest

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

@@ -2,8 +2,8 @@ import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
 import * as Banner_tokens from './Banner.tokens.js';
 import { Icon } from '../Icon/index.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const {
   info,
@@ -12,17 +12,19 @@ const {
 const StyledBannerIcon = styled.span.withConfig({
   displayName: "BannerIcon__StyledBannerIcon",
   componentId: "sc-7ow3zc-0"
-})(({
-  theme,
-  variant
-}) => {
+})(_ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
   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({
-  children,
-  variant = 'info',
-  ...rest
-}, ref) {
+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;
     return /*#__PURE__*/isValidElement(child) && child.type === Icon && /*#__PURE__*/cloneElement(child, {

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

@@ -7,10 +7,11 @@ const StyledBannerMessage = styled(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
-const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage({
-  children,
-  ...rest
-}, ref) {
+const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage(_ref, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const props = {
     ref,
     ...rest

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

@@ -12,17 +12,21 @@ const {
 const 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, ({
-  maxWidth
-}) => css({
-  maxWidth
-}));
-const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
-  children,
-  maxWidth,
-  href,
-  ...other
-}, 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, _ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return css({
+    maxWidth
+  });
+});
+const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
+  let {
+    children,
+    maxWidth,
+    href,
+    ...other
+  } = _ref2;
   const props = { ...other,
     href,
     ref,
@@ -33,7 +37,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
 
   const crumb = /*#__PURE__*/jsx(StyledTypography, {
     link: isHrefDefined,
-    as: isHrefDefined ? null : 'span',
+    forwardedAs: isHrefDefined ? null : 'span',
     variant: "body_short",
     ...props,
     children: children

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

@@ -1,9 +1,9 @@
 import { forwardRef, useState, Children, Fragment } from 'react';
 import styled from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 
 const {
   spacings,
@@ -26,11 +26,12 @@ const 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({
-  children,
-  collapse,
-  ...rest
-}, ref) {
+const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
+  let {
+    children,
+    collapse,
+    ...rest
+  } = _ref;
   const props = { ...rest,
     ref
   };

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

@@ -1,13 +1,10 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { token } from './tokens/index.js';
+import { spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
 import { InnerFullWidth } from './InnerFullWidth.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {
@@ -43,15 +40,16 @@ const getToken = (variant, color) => {
 const Inner = styled.span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
-})(["display:grid;grid-gap:0.5714em;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:-4px;margin-bottom:-4px;}"]);
+})(["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({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"
-})(({
-  theme
-}) => {
+})(_ref => {
   var _clickbound$offset, _clickbound$offset2, _hover$typography;
 
+  let {
+    theme
+  } = _ref;
   const {
     states,
     clickbound
@@ -63,16 +61,17 @@ const ButtonBase = styled.button.withConfig({
   } = states;
   return css(["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({
-  color = 'primary',
-  variant = 'contained',
-  children,
-  disabled = false,
-  href,
-  tabIndex = 0,
-  fullWidth = false,
-  ...other
-}, ref) {
+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();