@equinor/eds-core-react 0.35.0 → 0.36.0

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

@@ -1,5 +1,3 @@
-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';
@@ -7,42 +5,42 @@ import { jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-var _excluded = ["children", "maxWidth", "forceTooltip", "href", "as"];
-var states = breadcrumbs.states,
-  typography = breadcrumbs.typography;
-var StyledTypography = styled(Typography).withConfig({
+const {
+  states,
+  typography
+} = breadcrumbs;
+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:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography.color, function (_ref) {
-  var $maxWidth = _ref.$maxWidth;
-  return css({
-    maxWidth: $maxWidth
-  });
-});
-var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
-  var children = _ref2.children,
-    maxWidth = _ref2.maxWidth,
-    forceTooltip = _ref2.forceTooltip,
-    href = _ref2.href,
-    as = _ref2.as,
-    other = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, other), {}, {
-    href: href,
-    ref: ref
-  });
-  var showTooltip = maxWidth > 0 || forceTooltip;
-  var isHrefDefined = href !== undefined;
-  var forwardedAs = useMemo(function () {
-    return as ? as : isHrefDefined ? 'a' : 'span';
-  }, [as, isHrefDefined]);
-  var crumb = /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography.color, ({
+  $maxWidth
+}) => css({
+  maxWidth: $maxWidth
+}));
+const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
+  children,
+  maxWidth,
+  forceTooltip,
+  href,
+  as,
+  ...other
+}, ref) {
+  const props = {
+    ...other,
+    href,
+    ref
+  };
+  const showTooltip = maxWidth > 0 || forceTooltip;
+  const isHrefDefined = href !== undefined;
+  const forwardedAs = useMemo(() => as ? as : isHrefDefined ? 'a' : 'span', [as, isHrefDefined]);
+  const crumb = /*#__PURE__*/jsx(StyledTypography, {
     link: isHrefDefined,
     forwardedAs: forwardedAs,
     variant: "body_short",
-    $maxWidth: maxWidth
-  }, props), {}, {
+    $maxWidth: maxWidth,
+    ...props,
     children: children
-  }));
+  });
   return showTooltip ? /*#__PURE__*/jsx(Tooltip, {
     title: children,
     placement: "top",

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

@@ -1,6 +1,3 @@
-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';
@@ -8,49 +5,47 @@ import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-var _excluded = ["children", "collapse", "wrap", "separator"];
-var spacings = breadcrumbs.spacings,
-  typography = breadcrumbs.typography,
-  states = breadcrumbs.states;
-var OrderedList = styled.ol.withConfig({
+const {
+  spacings,
+  typography,
+  states
+} = breadcrumbs;
+const OrderedList = styled.ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
-})(["list-style:none;display:flex;gap:0.45em 0;align-items:center;padding:0;margin:0;flex-wrap:", ";"], function (_ref) {
-  var $wrap = _ref.$wrap;
-  return $wrap ? 'wrap' : 'nowrap';
-});
-var ListItem = styled.li.withConfig({
+})(["list-style:none;display:flex;gap:0.45em 0;align-items:center;padding:0;margin:0;flex-wrap:", ";"], ({
+  $wrap
+}) => $wrap ? 'wrap' : 'nowrap');
+const ListItem = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
 })(["display:block;min-width:30px;"]);
-var Separator = styled(Typography).withConfig({
+const Separator = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
 })(["color:", ";", " display:block;line-height:1;display:flex;& > svg{margin-inline:-9px;}"], typography.color, spacingsTemplate(spacings));
-var Collapsed = styled(Typography).withConfig({
+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);
-var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref2, ref) {
-  var children = _ref2.children,
-    collapse = _ref2.collapse,
-    _ref2$wrap = _ref2.wrap,
-    wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
-    _ref2$separator = _ref2.separator,
-    separator = _ref2$separator === void 0 ? '/' : _ref2$separator,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expanded = _useState2[0],
-    setExpanded = _useState2[1];
-  var collapsedCrumbs = function collapsedCrumbs(allCrumbs) {
-    var handleExpandClick = function handleExpandClick(e) {
+const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs({
+  children,
+  collapse,
+  wrap = true,
+  separator = '/',
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  const [expanded, setExpanded] = useState(false);
+  const collapsedCrumbs = allCrumbs => {
+    const handleExpandClick = e => {
       setExpanded(true);
-      var _ref3 = e,
-        key = _ref3.key;
+      const {
+        key
+      } = e;
       if (key === 'Enter') {
         setExpanded(true);
       }
@@ -81,30 +76,28 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref2, ref) {
       })]
     }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
   };
-  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: separator
-          })
-        })]
-      }, "breadcrumb-".concat(index))
-    );
-  });
-  return /*#__PURE__*/jsx("nav", _objectSpread(_objectSpread({}, props), {}, {
+  const allCrumbs = Children.toArray(children).map((child, index) =>
+  
+  // 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: separator
+      })
+    })]
+  }, `breadcrumb-${index}`));
+  return /*#__PURE__*/jsx("nav", {
+    ...props,
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsx(OrderedList, {
       $wrap: wrap,
       children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
     })
-  }));
+  });
 });
 
 // Breadcrumbs.displayName = 'eds-breadcrumbs'

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

@@ -1,10 +1,25 @@
 import { tokens } from '@equinor/eds-tokens';
 
-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 = {
+const {
+  colors: {
+    text: {
+      static_icons__tertiary: {
+        rgba: enabledColor
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: hoverColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium
+    }
+  }
+} = tokens;
+const 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';
 
-var Breadcrumbs = Breadcrumbs$1;
+const Breadcrumbs = Breadcrumbs$1;
 Breadcrumbs.Breadcrumb = Breadcrumb;
 Breadcrumbs.Breadcrumb.displayName = 'Breadcrumbs.Breadcrumb';
 

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

@@ -1,5 +1,3 @@
-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';
@@ -8,8 +6,7 @@ import { InnerFullWidth } from './InnerFullWidth.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth"];
-var getVariant = function getVariant(tokenSet, variant) {
+const getVariant = (tokenSet, variant) => {
   switch (variant) {
     case 'ghost':
       return tokenSet.ghost;
@@ -24,7 +21,7 @@ var getVariant = function getVariant(tokenSet, variant) {
       return tokenSet.contained;
   }
 };
-var getToken = function getToken(variant, color) {
+const getToken = (variant, color) => {
   switch (color) {
     case 'danger':
       return getVariant(token.danger, variant);
@@ -35,62 +32,65 @@ var getToken = function getToken(variant, color) {
       return getVariant(token.primary, variant);
   }
 };
-var Inner = styled.span.withConfig({
+const 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);}"]);
-var ButtonBase = styled.button.withConfig({
+const ButtonBase = styled.button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"
-})(function (_ref) {
-  var _clickbound$offset, _clickbound$offset2, _hover$typography;
-  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,&[aria-disabled='true']{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 || (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === 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);
+})(({
+  theme
+}) => {
+  const {
+    states,
+    clickbound
+  } = theme;
+  const {
+    focus,
+    hover,
+    disabled
+  } = states;
+  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,&[aria-disabled='true']{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?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, bordersTemplate(hover?.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
-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
+const Button = /*#__PURE__*/forwardRef(function Button({
+  color = 'primary',
+  variant = 'contained',
+  children,
+  disabled = false,
+  href,
+  tabIndex = 0,
+  fullWidth = false,
+  ...other
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, getToken(variant, color));
-  var as = href && !disabled ? 'a' : other.as ? other.as : 'button';
-  var type = href || other.as ? undefined : 'button';
+  const as = href && !disabled ? 'a' : other.as ? other.as : 'button';
+  const type = href || other.as ? undefined : 'button';
   tabIndex = disabled ? -1 : tabIndex;
-  var buttonProps = _objectSpread({
-    ref: ref,
-    as: as,
-    href: href,
-    type: type,
-    disabled: disabled,
-    tabIndex: tabIndex
-  }, other);
+  const buttonProps = {
+    ref,
+    as,
+    href,
+    type,
+    disabled,
+    tabIndex,
+    ...other
+  };
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(ButtonBase, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    children: /*#__PURE__*/jsx(ButtonBase, {
+      ...buttonProps,
       children: fullWidth ? /*#__PURE__*/jsx(InnerFullWidth, {
         children: children
       }) : /*#__PURE__*/jsx(Inner, {
         children: children
       })
-    }))
+    })
   });
 });
 

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

@@ -1,33 +1,33 @@
-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';
 
-var _excluded = ["children", "vertical"];
-var border = group.border;
-var radius = border.radius;
-var ButtonGroupBase = styled.div.withConfig({
+const {
+  border
+} = group;
+const radius = border.type === 'border' && border.radius;
+const 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;}}}", ""], 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);
-});
-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), {}, {
+})(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], ({
+  $vertical
+}) => $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({
+  children,
+  vertical,
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    $vertical: vertical,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(ButtonGroupBase, {
+    role: "group",
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { ButtonGroup };

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

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

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

@@ -1,24 +1,22 @@
-import _typeof from '@babel/runtime/helpers/typeof';
 import { forwardRef, Children } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var FullWidthCenterContent = styled.span.withConfig({
+const FullWidthCenterContent = styled.span.withConfig({
   displayName: "InnerFullWidth__FullWidthCenterContent",
   componentId: "sc-qeawkb-0"
 })(["text-align:center;flex:1;"]);
-var FullWidthInner = styled.span.withConfig({
+const 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;}"]);
-var InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth(_ref, ref) {
-  var children = _ref.children;
+const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
+  children
+}, ref) {
   // We need everything in elements for proper flexing 💪
-  var updatedChildren = Children.map(children, function (child) {
-    return _typeof(child) !== 'object' ? /*#__PURE__*/jsx(FullWidthCenterContent, {
-      children: child
-    }) : child;
-  });
+  const updatedChildren = Children.map(children, child => 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,43 +1,33 @@
-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 { Tooltip } from '../../Tooltip/Tooltip.js';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 
-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 () {
+const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton({
+  children,
+  multiple,
+  selectedIndexes,
+  onChange,
+  ...props
+}, ref) {
+  const [pickedIndexes, setPickedIndexes] = useState(selectedIndexes || []);
+  useEffect(() => {
     if (Array.isArray(selectedIndexes)) {
       setPickedIndexes(selectedIndexes);
     }
   }, [selectedIndexes]);
   function updateProps(child, isSelected, index) {
-    var childElement = child;
+    const childElement = child;
     if ( /*#__PURE__*/isValidElement(child) && child.type === Button) {
-      var buttonProps = {
+      const buttonProps = {
         'aria-pressed': isSelected ? true : undefined,
         variant: isSelected ? 'contained' : 'outlined',
-        onClick: function onClick(e) {
-          var _childElement$props, _childElement$props$o;
-          (_childElement$props = childElement.props) === null || _childElement$props === void 0 || (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props, e);
-          var updatedSelection = [index];
+        onClick: e => {
+          childElement.props?.onClick?.(e);
+          let updatedSelection = [index];
           if (multiple) {
-            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(function (i) {
-              return i !== index;
-            }) : [].concat(_toConsumableArray(pickedIndexes), [index]);
+            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(i => i !== index) : [...pickedIndexes, index];
           }
           setPickedIndexes(updatedSelection);
           if (onChange) {
@@ -48,11 +38,11 @@ var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
       return /*#__PURE__*/cloneElement(child, buttonProps);
     }
   }
-  var updatedChildren = Children.map(children, function (child, index) {
-    var isSelected = pickedIndexes.includes(index);
-    var childElement = child;
+  const updatedChildren = Children.map(children, (child, index) => {
+    const isSelected = pickedIndexes.includes(index);
+    const childElement = child;
     if ( /*#__PURE__*/isValidElement(child) && child.type === Tooltip) {
-      var updatedGrandChildren = Children.map(childElement.props.children, function (grandChild) {
+      const updatedGrandChildren = Children.map(childElement.props.children, grandChild => {
         return updateProps(grandChild, isSelected, index);
       });
       return /*#__PURE__*/cloneElement(childElement, null, updatedGrandChildren[0]);
@@ -60,11 +50,11 @@ var ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
       return updateProps(childElement, isSelected, index);
     }
   });
-  return /*#__PURE__*/jsx(ButtonGroup, _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+  return /*#__PURE__*/jsx(ButtonGroup, {
+    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';
 
-var Button = Button$1;
+const Button = Button$1;
 Button.Group = ButtonGroup;
 Button.Toggle = ToggleButton;
 Button.Group.displayName = 'Button.Group';