@equinor/eds-core-react/dist/esm/components/Button/InnerFullWidth.js

The React implementation of the Equinor Design System

import { forwardRef, Children } from 'react';
import styled from 'styled-components';
import { jsx } from 'react/jsx-runtime';

const FullWidthCenterContent = styled.span.withConfig({
  displayName: "InnerFullWidth__FullWidthCenterContent",
  componentId: "sc-qeawkb-0"
})(["text-align:center;flex:1;"]);
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;}"]);
const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
  children
}, ref) {
  // We need everything in elements for proper flexing 💪
  const updatedChildren = Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsx(FullWidthCenterContent, {
    children: child
  }) : child);
  return /*#__PURE__*/jsx(FullWidthInner, {
    ref: ref,
    children: updatedChildren
  });
});

export { InnerFullWidth };