@startlibs/components 1.0.4 → 1.1.0

package/src/SwitchDiv.jsx

@@ -0,0 +1,30 @@
+import React, {useRef} from 'react'
+import styled from 'styled-components'
+import {oneWayAnimation} from '@startlibs/utils'
+import {willUseFlipSwitch} from './Flip'
+import {useLazyConstant} from '@startlibs/core'
+import {callIfFunction, twoWayAnimation} from '@startlibs/utils'
+
+
+const BlockContainer = styled.div`
+position:relative;
+`
+
+const [fadeIn, relativeFadeout] = twoWayAnimation('opacity: 0;','opacity: 0;', 'opacity: 1;')
+const absoluteOnLeave = oneWayAnimation('position: absolute;', 'position: absolute;')
+const fadeOut = [absoluteOnLeave,relativeFadeout]
+
+export const SwitchDiv = styled(({children, className,enterAnimation = fadeIn, effect, leaveAnimation = fadeOut, skipChromeFix, on,...rest}) => {
+  const switchAnimation = useLazyConstant(willUseFlipSwitch)
+
+  return <SwitchContainer enterAnimation={enterAnimation} effect={effect} className={className} leaveAnimation={leaveAnimation} key={on + ""} switchAnimation={switchAnimation} children={children} />
+})``
+
+const SwitchContainer = ({children,switchAnimation, className, effect ,enterAnimation,leaveAnimation}) => {
+  const contentRef = useRef()
+  switchAnimation(contentRef,enterAnimation,leaveAnimation, {effect})
+
+  return <BlockContainer ref={contentRef} className={className}>
+    {callIfFunction(children)}
+  </BlockContainer>
+}

package/src/TextButton.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components';
+import {darken} from 'polished'
+import { getColor } from '@startlibs/utils';
+import {Link} from './Link'
+import {Loading} from './Loading'
+
+export const TextButton = styled(({className,isLoading,alert, fontSize, children, innerAs: Wrapper = 'div', ...props}) => <Wrapper className={className} {...props}>
+  {children} {isLoading && <Loading size={14} borderWidth={3} />}
+</Wrapper>)`
+  display: inline-block;
+  font-weight: 600;
+  font-size: ${props => props.fontSize ? fontSize : "14"}px;
+  color: ${props => props.alert ? getColor('alert') : getColor('main')};
+  cursor: pointer;
+  text-decoration: none;
+  :hover, :active {
+    color: ${props => props.alert ? darken(0.1, getColor("alert")(props)) : darken(0.1, getColor("main")(props))};
+  }
+  ${Loading} {
+    display: inline-block;
+    margin-left: 0.25rem;
+    vertical-align: -3px;
+  }
+  ${props => props.nowrap && `
+    white-space: nowrap;
+  `}
+  & ~ & {
+    margin-left: 1rem;
+  }
+`
+
+TextButton.a = (props) => <TextButton {...props} className={props.className} innerAs="a"/>
+TextButton.Link = (props) => <TextButton {...props} className={props.className} innerAs={Link}/>

package/src/ToastNotifications.jsx

@@ -0,0 +1,298 @@
+import React, {useEffect, useMemo, useRef} from 'react'
+import {oneWayAnimation, constrainEvent} from '@startlibs/utils'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {rgba} from 'polished'
+import {Fill, useToggle, willUseSharedState} from '@startlibs/core'
+import {getUID, ifUndefined, media, callIfFunction, getColor} from '@startlibs/utils'
+import {css} from "styled-components/macro";
+import {FlipList} from './FlipList'
+import {Icon} from './Icon'
+import {Loading} from './Loading'
+import {SwitchDiv} from './SwitchDiv'
+
+const NotificationContainer = styled.div `
+  position: fixed;
+  bottom: 0;
+  max-height: 100%;
+  z-index: 999999;  
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  overflow-y: auto;
+  right: 1.5rem;
+  ${media.desktop`
+    padding-bottom: 1.5rem;
+  `}
+  ${media.mobile`
+    padding-bottom: 0.75rem;
+  `}
+  ::-webkit-scrollbar {
+    width: 21px;
+    height: 21px;
+  }
+  ::-webkit-scrollbar-thumb {
+    pointer-events: all;
+    background: rgba(0,0,0,0.4);
+    border-radius: 100px;
+    background-clip: padding-box;
+    border: 6px solid transparent;
+    min-height: 30px;
+    min-width: 30px;
+    &:hover {
+      background: rgba(0,0,0,0.5);
+      background-clip: padding-box;
+      border: 6px solid transparent;
+    }
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  ${media.desktop`
+    &.JS-dialog-open {
+      right: 2.75rem;
+    }
+  `}
+  ${media.mobile`
+    left: 0.75rem;
+    right: 0.75rem;
+  `}
+`
+
+const ToastBox = styled.div`
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 12px;
+  flex-shrink: 0;
+  margin-top: 0.5rem;
+  overflow: hidden;
+  transition: 0.3s background ease, 0.4s opacity 1.5s;
+  ${media.desktop`
+    background: ${props => rgba(getColor(props.type)(props),ifUndefined(props.opacity,0.7))};
+    max-width: 300px;
+  `}
+  ${media.mobile`
+    background: ${props => rgba(getColor(props.type)(props),ifUndefined(props.opacity,0.8))};
+  `}
+  ${props => css`background: ${getColor(props.type)};`}
+`
+const NotificationTitleContainer = styled.div`
+  background: rgba(0,0,0,0.1);
+  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+  border-radius: 12px 12px 0 0;
+  position: relative;
+  min-height: 30px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  ${props => props.onClick && "cursor: pointer;"}
+`
+const NotificationTitle = styled.div`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`
+const NotificationContent = styled.div`
+  display: flex;
+  align-items: center;
+  text-align: left;
+  padding: 1rem 1.5rem;
+  ${media.mobile`
+    justify-content: center;
+  `}
+`
+const NotificationIconWrapper = styled.div`
+  margin-right: 1rem;
+  position: relative;
+  width: 36px;
+  text-align: center;
+  flex-shrink: 0;
+  ${Icon} {
+    font-size: ${props => (props.isLoading ? 22 : (props.iconFontSize || 40))}px;
+  }
+`
+const CloseIcon = styled(Icon).attrs({icon: 'x'})`
+  font-size: 20px;
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  right: 0.25rem;
+  transform: translateY(-50%);
+  border-radius: 100px;
+  opacity: 0.8;
+  :hover, :active {
+    background: rgba(0,0,0,0.1);
+    opacity: 1;
+  }
+`
+const NotificationDetails = styled.div`
+  background: rgba(0,0,0,0.1);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 0 1rem 1rem;
+  font-weight: 400;
+  font-size: 13px;
+`
+
+const [useToastNotifications, _useToastNotificationsRef,setToastNotifications] = willUseSharedState([])
+export {useToastNotifications}
+const formatNotification = (notification,extra) =>
+  _.isObject(notification)
+    ? {...notification,...extra, _key: getUID()}
+    : {type:"success",content:notification,...extra, _key: getUID()}
+
+export const createToastNotification = (notification,timeout, closeCallback) => {
+  const uid = getUID()
+  let currentTimer = -1;
+  let hasClosed = false;
+  const close = () => {
+    clearTimeout(currentTimer);
+    if (hasClosed) return
+    setToastNotifications(_.differenceBy('uid',_, [{uid}]))
+    hasClosed = true
+    callIfFunction(closeCallback)
+  }
+  const notificationObj = formatNotification(notification,{uid,close})
+  setToastNotifications(_.concat(notificationObj))
+  if (timeout>0) {
+    currentTimer = setTimeout(close,timeout)
+  }
+  return {
+    close,
+    openWith:(obj,timeout) => {
+      clearTimeout(currentTimer);
+      if (timeout > 0) {
+        currentTimer = setTimeout(close,timeout)
+      }
+      const notificationObj = formatNotification(obj,{uid,close})
+      if (hasClosed) {
+        hasClosed = false
+        setToastNotifications(_.concat(notificationObj))
+      } else {
+        setToastNotifications(_.map(n => n.uid === uid ? {...notificationObj, _key: n._key} : n))
+      }
+    }
+  }
+}
+export const useToastNotificationToggle = (notification,timeout) => {
+  const toggle = useToggle()
+  const extraProps = useMemo(() => notification.content || notification.element ? {} : notification,[])
+  const make = (notification,timeout) => notification && createToastNotification(formatNotification(notification,extraProps),timeout,() => toggle.close())
+  useEffect(() => {
+    if (notification.content || notification.element) {
+      toggle.openWith(make(notification))
+    }
+  },[])
+
+  return useMemo(() => ({
+    close: () => toggle.get()?.close(),
+    openWith: (notification,timeout) => toggle.get() ? toggle.get().openWith(formatNotification(notification,extraProps),timeout) : toggle.openWith(make(notification,timeout)),
+    open: () => toggle.get() ? toggle.get().openWith(formatNotification(notification,extraProps),timeout) : toggle.openWith(make(notification,timeout))
+  }),[toggle.isOpen])
+}
+export const willShowToastNotification = (str) => () => showToastNotification(str)
+
+const EXIT_ANIMATION_MS = 300
+const TOAST_EASING = 'cubic-bezier(0.22, 0.61, 0.36, 1)'
+const TOAST_TIMING = `${EXIT_ANIMATION_MS}ms ${TOAST_EASING}`
+
+const animation = oneWayAnimation(
+  'transform: translateY(0); opacity: 1;',
+  'transform: translateY(0.25rem); opacity: 1;',
+  'transform: translateY(1rem); opacity: 0;'
+)
+const removeAnimationReinsertPosition = e => e.style.position=''
+export const ToastNotifications = () => {
+  const [notifications,setNotifications] = useToastNotifications()
+  const containerRef = useRef(null)
+  const {lockWidth, unlockWidth} = useNotificationContainerWidthLock(containerRef)
+
+  return (<Fill name="Notifications">
+    <NotificationContainer ref={containerRef} className="JS-on-open-dialog">
+      <FlipList animation={animation} timing={TOAST_TIMING} onReinsert={removeAnimationReinsertPosition} skipParentMorph anchoredDownList>
+        {
+          notifications.map(notification => {
+          const closeWithLock = () => {
+            lockWidth()
+            notification.close()
+              setTimeout(unlockWidth, EXIT_ANIMATION_MS)
+          }
+
+          return (
+            callIfFunction(notification.element,closeWithLock) ||
+            <ToastBox
+              key={`toast-${notification.uid}`}
+              type={notification.type}
+              onClick={notification.onClick}
+              opacity={notification.opacity}
+            >
+              {notification.title ? 
+                <NotificationTitleContainer onClick={notification.onClickTitle ? (e) => notification.onClickTitle(e,closeWithLock) : undefined}>
+                  <NotificationTitle>{notification.title}</NotificationTitle>
+                  {notification.closeOnX && <CloseIcon onClick={constrainEvent(closeWithLock)}/>}
+                </NotificationTitleContainer>
+                :
+                notification.closeOnX && <CloseIcon onClick={closeWithLock}/>
+              }
+              <SwitchDiv on={notification._key}>
+                <NotificationContent>
+                  {notification.icon &&
+                    <NotificationIconWrapper
+                      isLoading={notification.isLoading}
+                      iconFontSize={notification.iconFontSize}
+                    >
+                      <Icon icon={notification.icon}/>
+                      {notification.isLoading && <Loading size={36} white absolute/>}
+                    </NotificationIconWrapper>
+                  }
+                  <div css="min-width: 0;">{callIfFunction(notification.content,closeWithLock)}</div>
+                </NotificationContent>
+                {notification.details &&
+                  <NotificationDetails onClick={constrainEvent()}>
+                    {notification.details}
+                  </NotificationDetails>
+                }
+              </SwitchDiv>
+            </ToastBox>
+          )
+        })
+        }
+      </FlipList>
+    </NotificationContainer>
+  </Fill>)
+}
+
+const useNotificationContainerWidthLock = (containerRef) => {
+  const lockCountRef = useRef(0)
+  const prevWidthRef = useRef(null)
+
+  const lockWidth = () => {
+    const el = containerRef.current
+    if (!el) return
+    if (lockCountRef.current === 0) {
+      prevWidthRef.current = el.style.width
+      const measured = el.getBoundingClientRect().width
+      el.style.width = measured + 'px'
+    }
+    lockCountRef.current = lockCountRef.current + 1
+  }
+
+  const unlockWidth = () => {
+    const el = containerRef.current
+    if (!el) return
+    const next = Math.max(0, lockCountRef.current - 1)
+    lockCountRef.current = next
+    if (next === 0) {
+      el.style.width = prevWidthRef.current || ''
+      prevWidthRef.current = null
+    }
+  }
+
+  return {lockWidth, unlockWidth}
+}

package/src/Tooltip.jsx

@@ -0,0 +1,158 @@
+import React, {useEffect, useMemo} from 'react'
+import _ from 'lodash/fp'
+import styled, {css} from 'styled-components'
+import {Popup} from './Popup'
+import {useRefState, useToggle} from '@startlibs/core'
+import {customTheme,twoWayAnimation} from '@startlibs/utils'
+
+const TooltipContainer = styled.div`
+  display: inline-block;
+  ${props => props.isWrapper ?
+             `position:relative;` :
+             css`
+    position:absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:0;
+    ${props => props.isOpen && 'pointer-events: none;'}
+  `}   
+`
+const TooltipPopup = styled(Popup)`
+  font-size: 12px;
+  pointer-events: none;
+  background-color: rgba(0,0,0,0.6);
+  box-shadow: none;
+  color: white;
+  padding: 0.25rem 1rem;
+  border-radius: 100px;
+  ${customTheme('Tooltip')}
+`
+
+const [fadeIn, fadeOut] = twoWayAnimation(`opacity:0;`, `opacity:1;`)
+
+const isEllipsis = (event) => event.currentTarget.firstChild && event.currentTarget.firstChild.offsetWidth < event.currentTarget.firstChild.scrollWidth
+
+const RECENTLY_CLOSED_TIMEOUT = 200
+let recentlyClosed = false
+const openRef = {current:null}
+
+export const Tooltip = ({children, delay = 400, instant, whenEllipsis, content, showOnClick, showOnMount, clickTimeout = 3000, ...rest}) => {
+
+  const tooltip = useToggle()
+  const timeout = useRefState(-1)
+
+  // showOnMount (ms): abre sozinho ao montar (hint) e some após o tempo dado. O
+  // hover continua normal — se o usuário passa o mouse durante a janela, o open
+  // cancela o closeAfter (clearClosing) e o tooltip fica até o mouseleave.
+  useEffect(() => {
+    if (!showOnMount) return
+    tooltip.open()
+    tooltip.closeAfter(showOnMount)
+    // Dispensa o hint na primeira interação do usuário: clique em qualquer lugar
+    // (o popup tem pointer-events:none, então todo clique é "fora") ou scroll.
+    // O assentamento da página é resize (não scroll), então não dispara isso.
+    const dismiss = () => tooltip.close()
+    document.addEventListener('click', dismiss, {once: true})
+    window.addEventListener('scroll', dismiss, {once: true, passive: true})
+    // O conteúdo da página pode assentar depois do mount (imagens/dados async),
+    // mudando a posição do âncora — mas o popup fixed só reposiciona em scroll/
+    // resize, então ficava travado no lugar antigo. Enquanto o hint está visível,
+    // observa o crescimento da página e reposiciona (portalReposition → setPosition).
+    const ro = new ResizeObserver(() => window.dispatchEvent(new CustomEvent('portalReposition')))
+    ro.observe(document.body)
+    const stopRO = setTimeout(() => ro.disconnect(), showOnMount)
+    return () => {
+      document.removeEventListener('click', dismiss)
+      window.removeEventListener('scroll', dismiss)
+      ro.disconnect()
+      clearTimeout(stopRO)
+    }
+  }, [])
+
+  // Modo clique: abre no clique e some sozinho após clickTimeout (closeAfter é
+  // à prova de unmount). Não borbulha stopPropagation — quem usa decide isso.
+  const openOnClick = () => {
+    tooltip.open()
+    tooltip.closeAfter(clickTimeout)
+  }
+
+  // Long-press no mobile: hover não existe e "segurar" não dispara mouseenter, então
+  // sem isso o tooltip não reaparece no toque. touchstart arma um timer; se segurou
+  // além do delay, reusa o openOnClick. Se o press disparou, preventDefault no touchend
+  // suprime o clique sintético (segurar espia, não aciona).
+  const touchTimer = useRefState(-1)
+  const didLongPress = useRefState(false)
+  const onTouchStart = () => {
+    didLongPress.set(false)
+    touchTimer.set(setTimeout(() => {
+      didLongPress.set(true)
+      openOnClick()
+      // Dispensa no scroll em QUALQUER lugar (como o hint do showOnMount): o touchmove do
+      // container só pegaria scroll com o dedo ainda no alvo — soltar e rolar não fecharia.
+      // tooltip.close é estável (useMemo []) e no-op após unmount; {once} se auto-remove.
+      window.addEventListener('scroll', tooltip.close, {once: true, passive: true})
+    }, delay))
+  }
+  const onTouchEnd = (e) => {
+    clearTimeout(touchTimer.get())
+    if (didLongPress.get()) e.preventDefault()
+  }
+  // Só cancela o press pendente — não abrir no meio de um scroll iniciado sobre o alvo.
+  const onTouchMove = () => clearTimeout(touchTimer.get())
+
+  // Remove o listener de scroll pendente se desmontar antes de rolar (evita leak da closure).
+  useEffect(() => () => window.removeEventListener('scroll', tooltip.close), [])
+
+  const mouseEnter = (e) => {
+    if (!whenEllipsis || (_.isFunction(whenEllipsis) ? whenEllipsis : isEllipsis)(e)) {
+      timeout.set(setTimeout(() => {
+
+        tooltip.open()
+        if (recentlyClosed && openRef.current) {
+          openRef.current.remove()
+        }
+      },(instant || recentlyClosed) ? 0 : delay))
+      !children && e.currentTarget.parentNode.addEventListener('mouseleave', onMouseLeave)
+    }
+  }
+
+  const onMouseLeave = (e) => {
+    clearTimeout(timeout.get())
+    if (tooltip.get()) {
+      timeout.set(false)
+      !children && e.currentTarget.removeEventListener('mouseleave', onMouseLeave)
+      const currentlyClosed = recentlyClosed = setTimeout(() => {
+        recentlyClosed = recentlyClosed === currentlyClosed ? false : recentlyClosed
+      },RECENTLY_CLOSED_TIMEOUT)
+      tooltip.close()
+    }
+  }
+
+  const getAnimation = () => {
+    if (recentlyClosed && timeout.get()!==false) {
+      return ''
+    } else {
+      return fadeIn
+    }
+  }
+
+  const canLongPress = content && !showOnClick
+
+  return <TooltipContainer isOpen={tooltip.isOpen} isWrapper={!!children}
+                           onMouseUp={showOnClick ? undefined : onMouseLeave}
+                           onMouseLeave={(children && !showOnClick) ? onMouseLeave : undefined}
+                           onMouseEnter={showOnClick ? undefined : mouseEnter}
+                           onTouchStart={canLongPress ? onTouchStart : undefined}
+                           onTouchEnd={canLongPress ? onTouchEnd : undefined}
+                           onTouchMove={canLongPress ? onTouchMove : undefined}
+                           onClick={showOnClick ? openOnClick : undefined}>
+    {
+      tooltip.isOpen && content &&
+      <TooltipPopup  animation={getAnimation} animationOptions={{ref:openRef}}  top={!(rest.bottom || rest.left || rest.right || rest.at || rest.my)} {...rest}>
+        {content}
+      </TooltipPopup>
+    }
+    {children}
+  </TooltipContainer>
+}

package/src/TransitionDiv.jsx

@@ -0,0 +1,34 @@
+import React, {useRef} from 'react'
+import styled from 'styled-components'
+import {FlipList} from './FlipList'
+import {oneWayAnimation} from '@startlibs/utils'
+
+
+const DEFAULT_ANIMATION = oneWayAnimation(`opacity: 1;`, `opacity: 0;`)
+
+export const AnimationBlockContainer = styled.div`
+  ${props => props.inline ? 'display: inline-block; ' : ''}
+  position:relative;
+`
+
+
+export const TransitionDiv = ({children,animation, skipChromeFix, className, block, inline,...rest}) => {
+
+  const blockRef = useRef()
+
+  const overflowEffect = () => {
+    if (blockRef.current) {
+      const prevOverflow = blockRef.current.style.overflow
+      blockRef.current.style.overflow = 'hidden'
+      return () => {
+        blockRef.current.style.overflow = prevOverflow
+      }
+    }
+  }
+
+  const content = children
+    ? <FlipList smallJumpFix={inline && -3} effect={overflowEffect} skipChromeFix={skipChromeFix} animation={animation || DEFAULT_ANIMATION} {...rest}>{[<div className={(block || inline) ? "" : className} key="first">{children}</div>]}</FlipList>
+    : <FlipList smallJumpFix={inline && -3} effect={overflowEffect} skipChromeFix={skipChromeFix} animation={animation || DEFAULT_ANIMATION} {...rest}>{[]}</FlipList>
+
+  return (block || inline) ? <AnimationBlockContainer inline={inline} ref={blockRef} className={className}>{content}</AnimationBlockContainer> : content
+}

package/src/WarningDialog.jsx

@@ -0,0 +1,70 @@
+import {willUseSharedState} from '@startlibs/core'
+import {Button} from './Button'
+import {Dialog} from './Dialog'
+import {Icon} from './Icon'
+import {useDialogWithToggle} from './useDialogWithToggle'
+import { getColor, callIfFunction } from '@startlibs/utils';
+import React from 'react'
+import _ from 'lodash/fp'
+import styled from 'styled-components';
+
+export const WarningDialog = styled(({content, footer, withX ,closeDialog,leftButton,additionalContent,title,rightButton,className, color = "alert", icon = "warning",confirmLabel = "Entendi",noActions,children}) => {
+  return <Dialog className={className} closeDialog={withX && closeDialog}>
+    {_.isString(icon) ? <WarningDialogIcon icon={icon} color={color}/> : icon}
+    {title && <WarningDialogTitle color={color}>{title}</WarningDialogTitle>}
+    {content && <Content noTitle={!title} noActions={noActions}>{content}</Content>}
+    {additionalContent}
+    {callIfFunction(leftButton,closeDialog)}
+    {confirmLabel !== false && <Button highlight onClick={closeDialog}>{confirmLabel}</Button>}
+    {callIfFunction(rightButton,closeDialog)}
+    {callIfFunction(footer,closeDialog)}
+    {children}
+  </Dialog>
+})`
+  text-align: center;
+  max-width: 36rem;
+  padding: 2.5rem;
+  ${Button} {
+    margin: 0.5rem !important;
+  }
+`
+export const WarningDialogTitle = styled.h3 `
+  color: ${props => getColor(props.color)(props)};
+  font-weight: 500;
+  font-size: 20px;
+`
+const Content = styled.div `
+  font-size: 15px;
+  max-width: 27rem;
+  margin: 0 auto;
+  line-height: 130%;
+  ${props => !props.noActions && `
+    margin: 0 auto 1.5rem;
+  `}
+  ${props => props.noTitle &&`
+    font-weight: 500;
+    font-size: 16px;
+  `}
+`
+export const WarningDialogIcon = styled(Icon)`
+  color: ${props => getColor(props.color)(props)};;
+  font-size: 46px;
+  display: block;
+  margin-bottom: 1.25rem;
+`
+
+export const useWarningDialog = () => useDialogWithToggle((toggle) =>
+  <WarningDialog {...toggle.isOpen} closeDialog={toggle.close} />
+
+)
+const [useRenderDefaultWarningDialog,,_setWarningDialog] = willUseSharedState()
+
+export const setWarningDialog = ({as: Dialog = WarningDialog,...props}) => _setWarningDialog(<Dialog {...props} closeDialog={() => _setWarningDialog(null)}/>)
+
+export const DefaultWarningDialog = () => {
+  const [warningDialog] = useRenderDefaultWarningDialog()
+  if (warningDialog) {
+    return warningDialog
+  }
+  return null
+}

package/src/alt/buttons/OnClickLoadingButton.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {useToggle} from '@startlibs/core'
+import {callIfFunction} from '@startlibs/utils'
+import {Button} from '../../Button'
+
+export const OnClickLoadingButton = ({onClick,children,onSuccess, as = Button, onFailure, className,...props}) => {
+  const loading = useToggle()
+  const Element = as
+  return <Element className={className} isLoading={loading.isOpen} {...props} onClick={(e) => loading.wait(onClick(e).then(async (e) => {
+    await callIfFunction(onSuccess,e)
+    return e
+  },async (e) => {
+    await callIfFunction(onFailure,e)
+    throw e
+  }))}>{children}</Element>
+}

package/src/alt/dialogs/DialogWithImageHeader.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import styled from 'styled-components'
+import {media, getColor} from '@startlibs/utils'
+import {CloseIcon, Dialog} from '../../Dialog'
+
+export const DialogWithImageHeader = styled(Dialog)`
+  max-width: 51rem;
+  
+  ${CloseIcon} {
+    background: ${getColor('gray240')};
+    text-shadow: none;
+    color: rgba(120,120,120,1);
+    font-size: 20px;
+    box-shadow: rgba(0,0,0,0.2) 0px 1px 3px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px;
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
+    transition: 0.1s ease-out;
+    :hover {
+      background-color: rgb(230,230,230);
+    }
+    :active {
+      background-color: rgb(220,220,220);
+      transition: 0s ease-out;
+    }
+    @supports (position: sticky) {
+      position: sticky;
+      top: -2.5rem;
+      right: 0rem;
+      float: right;
+      margin-right: -1.25rem;
+      margin-top: 0.75rem;
+    }
+    ${media.mobile`
+      @supports (position: sticky) {
+        top: 0;
+        margin-right: -1rem;
+      }
+    `}
+    
+  }
+`