UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

27 lines (24 loc) 1.48 kB
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 };