@startlibs/components 1.0.4 → 1.1.0

package/src/FormatDate.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import {StartlibsConsumer} from '@startlibs/core'
+import {formatDate} from '@startlibs/utils'
+
+export const FormatDate = ({date,format, noUTC,children}) => <StartlibsConsumer>{({dateMessages}) => {
+  if (!date) { return null }
+  const formatted = formatDate(new Date(date), format, dateMessages, noUTC)
+  return children ? children(formatted) : formatted
+}}</StartlibsConsumer>

package/src/Icon.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import styled from 'styled-components'
+import { withTheme } from 'styled-components'
+
+
+class IconComponent extends React.Component {
+
+  state = {}
+
+  componentDidMount() {
+    const icon = this.props.icon
+    if ((this.props.theme.svgIcons || {})[icon]) {
+      this.props.theme.svgLoader(icon).then((i) => this.setState({Svg: i.default}))
+    }
+  }
+
+  render() {
+    const {icon, children, theme, clickable, customIcon, colorSet, color, ...rest} = this.props
+    if ((theme.svgIcons || {})[icon]) {
+      if (this.state.Svg) {
+        return <this.state.Svg {...rest} />
+      } else {
+        return null
+      }
+    }
+    return <span {...rest}>{theme.icons[icon] || (customIcon && icon)}{children}</span>
+  }
+}
+
+export const Icon = styled(withTheme(IconComponent))`
+  font-family: '${props => props.theme?.iconFont}' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none; 
+  ${props => props.clickable && `
+    cursor: pointer;
+    &:hover {
+      opacity: 0.85;
+    }
+  `}
+`

package/src/Image.jsx

@@ -0,0 +1,23 @@
+import React, {forwardRef, useEffect, useState} from 'react'
+
+export const Image = forwardRef(({dom,src,style, ...rest}, ref) => {
+
+  const [image, setImage] = useState(typeof src === 'string' ? src : (src && URL.createObjectURL(src)))
+
+  useEffect(() => {
+    if (src) {
+      const imageStr = typeof src === 'string' ? src : URL.createObjectURL(src)
+      const img = document.createElement('img')
+      img.onload = () => {
+        setImage(imageStr)
+      }
+      img.src = imageStr
+    } else {
+      setImage("")
+    }
+  }, [src])
+
+  return dom
+    ? <img {...rest} src={image} ref={ref}/>
+    : <div {...rest} style={{...style,backgroundImage:image && `url("${image}")`}} ref={ref}/>
+})

package/src/Link.jsx

@@ -0,0 +1,68 @@
+import React, {useMemo} from 'react'
+import * as Wouter from 'wouter'
+import { useBrowserLocation } from "wouter/use-browser-location"
+import { useCallbackStable } from "@startlibs/core"
+import {callIfFunction, addQueryString} from "@startlibs/utils";
+import _ from 'lodash/fp'
+
+export const Link = ({href,...props}) => _.isString(props.to) ? <Wouter.Link {...props} /> : <a {...props} href={href?.replace("~","")}  />
+
+export const HistoryLink = ({to,onClick,...props}) => {
+  return <a onClick={(e) => {
+    if (onClick && !callIfFunction(onClick,e)) { return }
+    if (e.isDefaultPrevented()) { return }
+    if (!to) { return }
+    e.preventDefault()
+    const {state,pathname,search,hash} = _.isObject(to) ? to : {pathname:to}
+    const url = (pathname || "") + (search ? "?" + search.replace(/^\?/,"") : "") + (hash ? "#" + hash.replace(/^#/,"") : "")
+    window.history.pushState(state, '', url)
+    var popStateEvent = new PopStateEvent('popstate', { state: state });
+    window.dispatchEvent(popStateEvent);
+  }} {...props} />
+}
+
+export const Route = ({element,children,...props}) => <Wouter.Route {...props}>{element || children}</Wouter.Route>
+export const Routes = Wouter.Switch
+export const Navigate = Wouter.Redirect
+export const useLocation = () => {
+  const [path] = Wouter.useLocation()
+  const [search] = Wouter.useSearchParams()
+  return {pathname:path,search:search ? "?" + search : "",state:window.history.state}
+}
+export const useAbsolutePath = () => {
+  const router = Wouter.useRouter();
+  const [path] = Wouter.useLocation()
+  return router.base + path
+}
+export const useAbsoluteLocation = () => {
+  const router = Wouter.useRouter();
+  const {pathname,search} = useLocation()
+  return router.base + pathname + search
+}
+export const useNavigate = () => Wouter.useLocation()[1]
+export const useParams = Wouter.useParams
+export const useSearchParams = (defaultParams) => {
+  const [location, navigate] = Wouter.useLocation()
+  const search = Wouter.useSearch()
+  const searchParams = useMemo(() => _.assign(defaultParams,Object.fromEntries(new URLSearchParams(search).entries())), [search])
+
+  let tempSearchParams = searchParams
+
+  const setSearchParams = useCallbackStable((nextParams, options) => {
+    tempSearchParams = _.isFunction(nextParams) ? nextParams(tempSearchParams) : _.assign(tempSearchParams, nextParams)
+    const cleanParams = defaultParams
+      ? _.flow(
+        _.toPairs,
+        _.filter(([k,v]) => defaultParams[k] !== v),
+        _.fromPairs
+      )(tempSearchParams)
+      : tempSearchParams
+    navigate(addQueryString(location, cleanParams), options)
+  })
+
+  return [searchParams, setSearchParams]
+}
+
+export const Router = Wouter.Router
+
+export {useBrowserLocation}

package/src/Loading.jsx

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+import {getColor} from '@startlibs/utils'
+
+export const Loading = styled.div`
+    z-index:1;
+    --loading-color: ${props => props.color || (props.white ? 'rgba(255,255,255,0.9)' : getColor("main")(props))};
+    --loading-bw: ${props => props.borderWidth || 4}px;
+    width: ${props => props.size || 26}px;
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background:
+      radial-gradient(farthest-side, var(--loading-color) 94%, #0000) top/var(--loading-bw) var(--loading-bw) no-repeat,
+      conic-gradient(#0000 15%, var(--loading-color));
+    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);
+    mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);
+    animation: loading-spin 0.6s infinite linear;
+    ${props => props.absolute && `
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      margin: auto;
+    `}
+    @keyframes loading-spin {
+      100% {transform: rotate(1turn)}
+    }
+  `

package/src/LoadingDiv.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {willUseFlipSwitch} from './Flip'
+import {Loading} from './Loading'
+import {useEnsureRef, useLazyConstant} from '@startlibs/core'
+import {twoWayAnimation} from '@startlibs/utils'
+
+
+const [loadingEnter, loadingLeave] = twoWayAnimation('opacity:0;', 'opacity:1;')
+const [onEnter, onLeave] = twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)')
+
+const BlockContainer = styled.div`
+  position:relative;
+`
+
+const FlipDiv = ({useAnimation, outerRef, onEnter = onEnter, onLeave = onLeave, ...props}) => {
+  const ensuredRef = useEnsureRef(outerRef)
+  useAnimation(ensuredRef, onEnter, onLeave)
+  return <BlockContainer {...props} ref={ensuredRef}/>
+}
+
+const PaddingDiv = styled.div`
+  padding: ${props => props.height} 0;
+`
+
+export const LoadingDiv = ({defaultToSuspense = true, fallback, isLoading, className, height = 12, size = 32, borderWidth = 5, children}) => {
+  const flipAnimation = useLazyConstant(willUseFlipSwitch)
+
+  const loadingBlock = <PaddingDiv height={_.isString(height) ? borderWidth : (height+'rem')}>
+    <Loading autoFocus absolute size={size} borderWidth={borderWidth}/>
+  </PaddingDiv>
+
+  return <React.Suspense
+    fallback={<FlipDiv
+      key="loading"
+      padded
+      onEnter={loadingEnter}
+      onLeave={loadingLeave}
+      useAnimation={flipAnimation}
+      className={className}
+    >
+      {fallback}
+      {loadingBlock}
+    </FlipDiv>}
+  >
+    {
+      (typeof isLoading === 'boolean' || defaultToSuspense)
+        ? (isLoading
+          ? <FlipDiv
+            key="loading"
+            padded
+            onEnter={loadingEnter}
+            onLeave={loadingLeave}
+            useAnimation={flipAnimation}
+            className={className}
+          >
+            {fallback}
+            {loadingBlock}
+          </FlipDiv>
+          : <FlipDiv
+            key="loaded"
+            loaded
+            onEnter={loadingEnter}
+            onLeave={loadingLeave}
+            useAnimation={flipAnimation}
+            className={className}
+          >
+            {children}
+          </FlipDiv>
+        )
+        : children
+    }
+  </React.Suspense>
+}

package/src/Notifications.jsx

@@ -0,0 +1,89 @@
+import React, {useEffect, useRef} from 'react'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {Fill, useToggle, willUseSharedState} from '@startlibs/core'
+import {callIfFunction, getColor, oneWayAnimation} from '@startlibs/utils'
+import {useFlipAnimation} from './Flip'
+import {Icon} from './Icon'
+
+const NotificationContainer = styled.div `
+  position: fixed;
+  top: 0;
+  height: 1px;
+  left: 0;
+  right: 0;
+  text-align: center;
+`
+
+const Notification = styled.div `
+  padding: 1rem 4.5rem 1rem 1.5rem;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 10px;
+  color: white;
+  text-align: left;
+  background: ${props => getColor(props.type)(props)};
+  box-shadow: 0 2px 0px 0px rgba(0,0,0,0.1);
+  min-width: 12rem;
+  min-height: 48px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  top: 1rem;
+  ${Icon} {
+    color: white;
+    display: inline-block;
+    background-color: rgba(0,0,0,0.1);
+    font-size: 18px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 1rem;
+    &:hover {
+      background-color: rgba(0,0,0,0.2);
+    }
+  }
+`
+
+const [useNotification, useNotificationRef,setNotification] = willUseSharedState()
+export {useNotification, useNotificationRef, setNotification}
+export const willSetNotification = (str) => () => setNotification(str)
+
+const animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)')
+
+export const Notifications = () => {
+  const toggle = useToggle()
+  const [rawNotification,setNotification] = useNotification()
+
+  const {msg,type,timeout = 5000} = _.isObject(rawNotification) ? rawNotification : {type:"success",msg:rawNotification}
+
+  useEffect(() => {
+    if (msg) {
+      toggle.open()
+      setTimeout(toggle.willCloseAfter(timeout), 100)
+    }
+  },[msg])
+  useEffect(() => {
+    if (!toggle.isOpen) {
+      setNotification(null)
+    }
+  },[toggle.isOpen])
+
+  return toggle.isOpen && (<Fill name="Notifications">
+    <FlipNotification type={type}>
+      {callIfFunction(msg,toggle.close)}
+      <Icon icon="x" onClick={toggle.close}/>
+    </FlipNotification>
+  </Fill>)
+}
+const FlipNotification = (props) => {
+  const ref = useRef()
+  useFlipAnimation(ref,animation)
+  return <NotificationContainer ref={ref}><Notification id="js-share-notification" {...props}/></NotificationContainer>
+}

package/src/PageLoader.jsx

@@ -0,0 +1,48 @@
+import React, {useEffect} from 'react'
+import styled, {css} from 'styled-components'
+import {oneWayAnimation, getColor} from '@startlibs/utils'
+import {useToggle} from '@startlibs/core'
+import {useFlipLeave} from './Flip'
+import {animationTiming} from '@startlibs/utils'
+
+export const LoadingBar = styled.div`
+  width: 100%;
+  border-radius: 0 1px 1px 0;
+  height: 4px;
+  position: fixed;
+  background: ${props => props.bottom ? css`${getColor('main')}`:`#84D359`};
+  transform: translateX(-100%);
+  ${props => props.bottom ? "bottom:69px;" : "top: 0;"}
+  left: 0;
+  z-index: 99999;
+  box-shadow: ${props => props.bottom ? `0 0 1px 1px rgba(0,132,214,0.2);`:`0 0 2px 0 rgba(0,0,0,0.5);`};
+  ${props => props.loading && `
+    transform: translateX(-30%);
+    transition: transform 1.5s ease;
+  `}
+  ${props => props.closing && `
+    transform: translateX(0);
+    transition: transform 0.3s ease-in;
+  `}
+`
+
+
+export const PageLoader = ({isLoading}) => {
+  const loader = useToggle()
+  useEffect(() => {
+    if (isLoading) {
+      loader.open()
+    } else {
+      loader.closeAfter(500)
+    }
+  },[isLoading])
+
+  return <LoadingBar loading={loader.isOpen} closing={loader.closing}/>
+}
+
+const animation = oneWayAnimation('transform:translateX(-30%);','transform:translateX(0);')
+export const SuspenseLoadingBar = () => {
+  const ref = React.useRef()
+  useFlipLeave(ref,animation,{reverse: false,timing:animationTiming('0.3s ease-in')})
+  return <LoadingBar ref={ref} loading/>
+}

package/src/PersistentNotifications.jsx

@@ -0,0 +1,182 @@
+import React, {useRef} from 'react'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {Fill, willUseSharedState} from '@startlibs/core'
+import {media,getColor, callIfFunction, oneWayAnimation, printerMedia} from '@startlibs/utils'
+import {useFlipAnimation} from './Flip'
+import {Icon} from './Icon'
+import {darken, transparentize } from 'polished';
+import {Button} from './Button'
+
+export const PersistentNotification = styled.div`
+  color: ${getColor('warning')};
+  h4 {
+    font-size: 15px;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  p {
+    font-size: 13px;
+    margin-bottom: 0;
+  }
+`
+
+export const PersistentNotificationContent = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+`
+export const PersistentNotificationIcon = styled(Icon)`
+  font-size: 38px;
+  width: 4rem;
+  height: 4rem;
+  line-height: 4rem;
+  border-radius: 100px;
+  text-align: center;
+  background: ${props => transparentize(0.88, getColor("warning")(props))};
+  margin-right: 1rem;
+  flex-shrink: 0;
+  ${props => props.icon === 'warning' && `font-size:30px;`}
+`
+export const PersistentNotificationActions = styled.div`
+  display: flex;
+  margin-top: -0.25rem;
+  padding: 0 1.5rem 1.5rem;
+  ${Button} {
+    flex-grow: 1;
+  }
+  ${Button} ~ ${Button} {
+    margin-left: 0;
+    margin-right: 1rem;
+  }
+  ${media.max(390)`
+    display: block;
+    ${Button} {
+      width: 100%;
+    }
+    ${Button} ~ ${Button} {
+      margin-left: 0;
+      margin-top: 0.75rem;
+    }
+  `}
+`
+export const PersistentNotificationCloseIcon = styled(Icon).attrs({icon: 'x'})`
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    font-size: 20px;
+    line-height: 30px;
+    cursor: pointer;
+    border-radius: 50%;
+    text-align: center;
+    z-index: 1000;
+    top: 0.5rem;
+    right: 0.5rem;
+    color: ${props => props.type && props.type!== 'main' ? getColor(props.type)(props) : darken(0.1, getColor("main")(props))};
+    background: ${props => transparentize(0.90, getColor(props.type || "main")(props))};
+    :hover {
+      background: ${props => transparentize(0.85, getColor(props.type || "main")(props))};
+    }
+    :active {
+      background: ${props => transparentize(0.82, getColor(props.type || "main")(props))};
+    }
+  `
+
+
+const [useNotifications, ,setNotifications] = willUseSharedState([])
+
+export const openPersistentNotification = (notification) => {
+  const newNotification = {priority:0,type:"success",...(_.isObject(notification) ? notification : {content:notification})}
+
+  setNotifications(list => {
+    const nextIndex = list.findIndex(n => n.priority < newNotification.priority)
+    return nextIndex < 0
+      ? [...list,newNotification]
+      : [...list.slice(0,nextIndex),newNotification,...list.slice(nextIndex)]
+  })
+  return () => setNotifications(_.without([newNotification]))
+}
+
+
+const animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)')
+
+const NotificationContainer = styled.div `
+  position: fixed;
+  top: 0;
+  height: 0;
+  right: 0;
+  z-index:20;
+`
+
+const Notification = styled.div `
+  background: ${props => transparentize(0.9, getColor(props.type)(props))};
+  position: relative;
+  border-radius: 19px;
+`
+const NotificationWrapper = styled.div `
+  background: white;
+  margin-top: ${props => props.marginTop || "3.5rem"};
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+  padding: 5px;
+  border-radius: 22px;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1), 0 1px 2px 1px rgba(0,0,0,0.15);
+  max-width: 364px;
+  ${media.mobile`
+    margin-top: ${props => props.marginTop || "4rem"};
+  `}
+  ${printerMedia`
+    display: none;
+  `}
+`
+const [useIsHiddenPersistentNotifications,,hidePersistentNotifications] = willUseSharedState(false)
+export {useIsHiddenPersistentNotifications, hidePersistentNotifications}
+export const PersistentNotifications = () => {
+  const [notifications,setNotifications] = useNotifications()
+  const [isHidden] = useIsHiddenPersistentNotifications()
+
+  if (!notifications.length || isHidden) {
+    return null;
+  }
+  const closeMessage = (e) => {
+    setNotifications((list) => list.slice(1))
+  }
+
+  const {content,type,marginTop,...notification} = notifications[0]
+
+  return <Fill name="PersistentNotifications">
+    <FlipNotification type={type} marginTop={marginTop}>
+      {content
+        ? callIfFunction(content,closeMessage)
+        : <DefaultNotification type={type} _onClose={closeMessage} {...notification} />
+      }
+    </FlipNotification>
+  </Fill>
+}
+
+const DefaultNotification = ({type, title,body,actions, icon, skipClose,_onClose,onClose}) => {
+  return  <PersistentNotification>
+    <PersistentNotificationContent>
+      {(_.isString(icon) || !icon) ? <PersistentNotificationIcon icon={icon || type}/> : icon}
+      <div>
+        <h4>{title}</h4>
+        {body}
+      </div>
+    </PersistentNotificationContent>
+    {
+      actions &&
+      <PersistentNotificationActions>
+        {actions}
+      </PersistentNotificationActions>
+    }
+    {!skipClose && <PersistentNotificationCloseIcon type="warning" onClick={_.over([_onClose,onClose])}/>}
+  </PersistentNotification>
+}
+
+const FlipNotification = (props) => {
+  const ref = useRef()
+  useFlipAnimation(ref,animation)
+  return <NotificationContainer className="JS-fix-dialog-scroll" ref={ref}>
+    <NotificationWrapper marginTop={props.marginTop}><Notification id="js-share-notification" {...props}/></NotificationWrapper>
+  </NotificationContainer>
+}

package/src/Popup.jsx

@@ -0,0 +1,49 @@
+import React, {useMemo} from 'react'
+import styled, {css} from 'styled-components'
+import {Fill, useEnsureRef} from '@startlibs/core'
+import {useFlipAnimation} from './Flip'
+import {getDialogLayersSize} from './containers/DialogContainer'
+import {usePositioning} from './containers/usePositioning'
+import {twoWayAnimation, customTheme} from '@startlibs/utils'
+
+const [fadeIn, fadeOut] = twoWayAnimation(`opacity:0;`, `opacity:1;`)
+
+const PopupDiv = styled.div`
+    position: absolute;
+    background-color: #FFF;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 10px -2px rgba(0,0,0,0.15), 0 0px 2px 0px rgba(0,0,0,0.2);
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: initial;
+    line-height: 140%;
+    font-size: 14px;
+    z-index: 999;
+    ${props => props.atTop && css`
+        margin-top: -0.25rem;
+    `}
+    ${props => props.atBottom && css`
+        margin-top: 0.25rem;
+    `}
+    ${customTheme('Popup')}
+`
+
+export const Popup = React.forwardRef(({slot = 'Popup',skipPortal, animation = fadeIn, leaveAnimation = true, animationOptions, arrowRef, className, onClick, children, ...rest},ref) => {
+  const popupRef = useEnsureRef(ref)
+  const [positionInfo, placeholder, arrow] = usePositioning(popupRef, rest, arrowRef)
+
+  // leaveAnimation=false → sem animação de saída (nenhum clone no unmount): útil quando
+  // o popup é portalado num slot persistente (ex: NavbarPopup) e o dono desmonta na
+  // navegação — senão o clone da saída fica órfão no slot. Default true = comportamento atual.
+  useFlipAnimation(popupRef, animation, leaveAnimation, animationOptions)
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : (slot + '-' + (getDialogLayersSize() - 1)), [])
+  const popupContainer = <PopupDiv {...positionInfo} onClick={onClick} className={className} ref={popupRef}>
+    {arrow}
+    {children}
+  </PopupDiv>
+  return skipPortal ? popupContainer : <>
+    {placeholder}
+    <Fill name={slotName}>
+      {popupContainer}
+    </Fill>
+  </>
+})

package/src/SplitColumnsContainer.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import {getMargin, media} from '@startlibs/utils'
+import styled, {css} from 'styled-components'
+
+const getMarginFromFieldChild = (props) => {
+  if (!props.last) return 0;
+  const fields = React.Children.toArray(props.children).filter(c => c.type.displayName === "Field" || c.type.displayName === "EnhancedInput")
+  if (!fields.length) return 0
+  const lastField = fields.slice(-1)[0]
+  return '-' + getMargin(props.theme.Field.margins)(lastField.props)
+}
+
+
+const splitColumnMargins = {small:0.5,'default':1, big:2}
+
+export const SplitColumnsContainer = styled.div`
+
+  margin-bottom: ${getMarginFromFieldChild}rem;
+  
+  ${props => css`
+    ${media.min(props.viewportMinWidth || 0)`
+      display: flex;
+      flex-wrap: nowrap;
+      margin-left: -${props=>getMargin(splitColumnMargins)(props)/2}rem;
+      margin-right: -${props=>getMargin(splitColumnMargins)(props)/2}rem;
+      margin-top: -${props=>getMargin(splitColumnMargins)(props)}rem;
+      > * {
+        flex-basis: 0;
+        flex-grow: 1;
+        margin-left: ${props=>getMargin(splitColumnMargins)(props)/2}rem;
+        margin-right: ${props=>getMargin(splitColumnMargins)(props)/2}rem;
+        margin-top: ${props=>getMargin(splitColumnMargins)(props)}rem;
+      }
+    `}
+  `}
+  ${props => props.twoColumnsBelowVW && css`
+    ${media.max(props.twoColumnsBelowVW)`
+      flex-wrap: wrap;
+      > * {
+        flex-basis: 47%;
+      }
+    `}
+  `}
+`
+
+export const fixDoubledLastMarginBottom = (children) => {
+  let last = React.Children.count(children)-1
+
+  function processChild(child, i) {
+    if (i === last && child && child.type && child.type.displayName === SplitColumnsContainer.displayName) {
+      return React.cloneElement(child, {last: true})
+    }
+    return child
+  }
+  if (!Array.isArray(children) || children.length===0) {
+    return processChild(children,0)
+  }
+  while ((!children[last] || (children[last] && children[last].type && children[last].type.displayName === "Errors")) && last > 0) {
+    last--
+  }
+  return React.Children.map(children,processChild)
+}