@startlibs/components 1.1.4 → 1.2.0-rc.1

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@startlibs/components",
-  "version": "1.1.4",
+  "version": "1.2.0-rc.1",
   "description": "Startlibs Components",
   "main": "lib/index.cjs",
   "exports": {
     ".": {
       "source": "./src/index.js",
+      "yak": "./lib-yak/index.mjs",
       "require": "./lib/index.cjs",
       "import": "./lib/index.mjs",
       "default": "./lib/index.mjs"
     },
     "./package.json": "./package.json",
     "./*": {
+      "yak": "./lib-yak/*.mjs",
       "import": "./lib/*.mjs"
     }
   },
@@ -19,7 +21,8 @@
   "source": "./src/index.js",
   "peerDependencies": {
     "@startlibs/core": "*",
-    "@startlibs/utils": "*",
+    "@startlibs/utils": ">=1.2.0-rc.1",
+    "@yak/react": "10.0.0",
     "lodash": "^4.17.21",
     "polished": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "react": ">=16.8",
@@ -28,6 +31,11 @@
     "styled-components": ">=5",
     "wouter": "*"
   },
+  "peerDependenciesMeta": {
+    "@yak/react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
@@ -50,7 +58,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c",
+    "build": "rollup -c && rollup -c --environment YAK",
     "prepare": "patch-package"
   },
   "repository": {
@@ -73,6 +81,7 @@
   },
   "files": [
     "lib",
+    "lib-yak",
     "src"
   ],
   "module": "lib/index.mjs",

package/src/BasicBulletList.jsx

@@ -9,7 +9,7 @@ export const BasicBulletList = styled.ul`
     padding-left: 1rem;
     position: relative;
 
-    :before {
+    &:before {
       content: '•';
       font-size: 17px;
       line-height: 0;

package/src/Button.jsx

@@ -25,7 +25,7 @@ const LockIcon = styled(Icon)`
 `
 
 const focus = css`
-:after{
+&:after{
   content: '';
   pointer-events: none;
   position: absolute;
@@ -43,7 +43,7 @@ export const Button = styled(React.forwardRef(({
                                 innerAs: Wrapper = 'button', className, children, rounded, tabIndex = 1, focused, noFocus,
                                 colorSet, concealed, concealedModule, buttonRef, ...props
                               },ref) =>
-  <Wrapper ref={ref || buttonRef} tabIndex={tabIndex} className={className + ' styled-button' + ((color || success || alert || warning || highlight || dark || hover || outline || dashed || textOnly || white || alpha || props.lightAlert || props.lightWarning) ? ' styled-button-colored' : '')} type={Wrapper === 'button' ? type : ''} {...props}>
+  <Wrapper ref={ref || buttonRef} tabIndex={tabIndex} className={className + ' styled-button' + ((color || success || alert || warning || highlight || dark || hover || outline || dashed || textOnly || white || alpha || props.lightAlert || props.lightWarning) ? ' styled-button-colored' : '') + (small ? ' styled-button-small' : '')} type={Wrapper === 'button' ? type : ''} {...props}>
     {icon && <Icon icon={icon} aria-hidden="true"/>}
     {isLoadingIcon && <Loading white={!light && !outline && !dashed && !white} size={small ? '10' : '18'} borderWidth={small ? '2' : '3'}/>}
     {(withDropdown || onlyDropdown) && !locked && <DropdownIcon icon='arrow-down' aria-hidden="true"/>}
@@ -60,7 +60,7 @@ export const Button = styled(React.forwardRef(({
   min-width: 8rem;
   font-weight: 600;
   display: inline-block;
-  // line-height: 16px;
+  /* line-height: 16px; */
   text-align: center;
   padding: 10px 1.25rem;
   outline: none;
@@ -69,17 +69,17 @@ export const Button = styled(React.forwardRef(({
   text-decoration: none;
   user-select: none;
   flex-shrink: 0;
-  :hover {
+  &:hover {
     background: ${props => darken(0.05, getColor(props, true))};
   }
-  :active {
+  &:active {
     background: ${props => darken(0.08, getColor(props, true))};
   }
   ${props => props.nowrap && `
     white-space: nowrap;
   `}
   ${props => !props.noFocus && !props.isLoading && css`
-    :focus {
+    &:focus {
       ${focus}
     }
     ${props => props.focused && focus}
@@ -89,7 +89,7 @@ export const Button = styled(React.forwardRef(({
   }
   
   ${props => props.hasErrors && css`
-    :after {
+    &:after {
       content: '';
       pointer-events: none;
       position: absolute;
@@ -127,7 +127,7 @@ export const Button = styled(React.forwardRef(({
     min-width: 2rem;
     min-height: 2rem;
     font-weight: 550;
-    ${props.icon && css`
+    ${props => props.icon && css`
       ${Icon} {
         font-size: 18px;
         margin-left: -5px;
@@ -135,7 +135,7 @@ export const Button = styled(React.forwardRef(({
         line-height: 0.9;
       }
     `}
-    ${props.onlyIcon && css`
+    ${props => props.onlyIcon && css`
       padding: 0;
       ${Icon} {
         margin: 0;
@@ -160,82 +160,88 @@ export const Button = styled(React.forwardRef(({
   ${props => props.light && css`
     background: ${getColor('bluishGray')};
     color: ${getColor('gray90')};
-    :hover {
+    &:hover {
       background: ${props => darken(0.05, getColor('bluishGray')(props))};
     }
-    :active {
+    &:active {
       background: ${props => darken(0.08, getColor('bluishGray')(props))};
     }
   `}
   ${props => props.lightAlert && css`
     background: ${props => transparentize(0.86, getColor("alert")(props))};
     color: ${getColor('alert')};
-    :hover {
+    &:hover {
       background: ${props => transparentize(0.83, getColor("alert")(props))};
     }
-    :active {
+    &:active {
       background: ${props => transparentize(0.80, getColor("alert")(props))};
     }
   `}
   ${props => props.lightWarning && css`
     background: ${props => transparentize(0.84, darken(0.05, getColor('warning')(props)))};
     color: ${props => darken(0.05, getColor('warning')(props))};
-    :hover {
+    &:hover {
       background: ${props => transparentize(0.78, darken(0.05, getColor('warning')(props)))};
     }
-    :active {
+    &:active {
       background: ${props => transparentize(0.76, darken(0.05, getColor('warning')(props)))};
     }
   `}
   ${props => (props.outline || props.dashed || props.textOnly) && css`
-    color: ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.6)'};
+    color: ${props => props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.6)'};
     background: none;
     ${Icon}, ${DropdownIcon} {
-      color: ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)'};
+      color: ${props => props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)'};
     }
-    :before {
+    &:before {
       content: '';
-      border: 1px ${props.outline ? 'solid' : props.dashed ? 'dashed' : ''} ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)'};
+      /* 'none' explícito (não ''); yak representa cada interpolação como uma CSS custom property
+         (var()) — um var() que resolve pra string vazia dentro do shorthand "border" invalida a
+         declaração inteira pro navegador (diferente de uma string já resolvida como "1px  cor",
+         que o parser aceita, tratando o espaço duplo como o token de estilo ausente). Com 'none'
+         (mesmo efeito visual de estilo ausente: computed border-width vira 0 de qualquer jeito),
+         o var() nunca fica vazio e o shorthand permanece válido nos dois modos. */
+      border: 1px ${props => props.outline ? 'solid' : props.dashed ? 'dashed' : 'none'} ${props => props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)'};
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
-      border-radius: ${props.rounded ? '100px' : '8px'};
+      border-radius: ${props => props.rounded ? '100px' : '8px'};
       pointer-events: none;
     }
-    :hover {
+    &:hover {
         background-color: rgba(0,0,0,0.05);
     }
-    :active {
+    &:active {
         background-color: rgba(0,0,0,0.08);
     }
-    :focus {
-      :before {
+    &:focus {
+      &:before {
         box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
-        ${props.textOnly && 'content: none;'}
+        ${props => props.textOnly && 'content: none;'}
       }
-      :after {
+      &:after {
         content: none;
       }
     }
   `}
   ${props => props.alpha && css`
     background: rgba(0,0,0,0.45);
-    :hover {
+    &:hover {
       background: rgba(0,0,0,0.50);
     }
-    :active {
+    &:active {
       background: rgba(0,0,0,0.55);
     }
   `}
   ${props => props.white && !props.outline && !props.dashed && css`
     color: ${getColor('main')};
     background: #FFFFFF;
-    :hover {
+    &:hover {
       background: ${darken(0.05, '#FFFFFF')};
     }
-    :active {
+    &:active {
       background: ${darken(0.08, '#FFFFFF')};
     }
   `}

package/src/ContextMenu.jsx

@@ -1,6 +1,6 @@
 import React, {useState, useMemo, useEffect, useRef, forwardRef} from 'react';
 import ReactDOM from 'react-dom'
-import styled, {css, isStyledComponent} from 'styled-components'
+import styled, {css} from 'styled-components'
 
 import {
   Fill,
@@ -44,7 +44,12 @@ const popupAnimation = animationTiming('0.2s ease-out')
 
 const areComponentsEqual = (a,b) => a === b
 
-export const ListItem = styled.li`
+// Variantes como classe: no yak, o override de theme.startlibs.ListItem não lê props.
+// Sem variante, sem a chave className: o yak sobrescreveria a do app com undefined.
+export const ListItem = styled.li.attrs((props) => {
+  const variants = [props.hover && 'styled-list-item-hover', props.highlight && 'styled-list-item-highlight'].filter(Boolean)
+  return variants.length ? {className: variants.join(' ')} : {}
+})`
   position: relative;
   font-size: 13px;
   & > * {
@@ -207,7 +212,7 @@ export const ListHeading = styled.li`
   color: rgba(0,0,0,0.4);
   font-size: 12px;
   text-transform: uppercase;
-  :after {
+  &:after {
     content: '';
     flex-grow: 1;
     margin-left: 0.75rem;
@@ -216,13 +221,22 @@ export const ListHeading = styled.li`
   }
 `
 
+/* No sc, styledExtend(Icon) cria uma identidade própria: o seletor ${Icon} do ListItem
+   acima não bate aqui. No yak, styledExtend vira styled(Icon) (plugin, R10) e essa seta
+   herda a classe do Icon, então aquele ${Icon} (2 classes, mais específico) passa a
+   também valer pra ela, incluindo um "left: 0" que nunca existiu aqui. Com left, right
+   e width todos setados o box fica sobreconstrangido e o browser ignora o "right"
+   (ganha left+width): a seta migra pra esquerda. !important nas propriedades em comum,
+   e left:auto explícito, devolvem o tamanho e a posição próprios nos dois modos. */
 const SubmenuArrowIcon = styledExtend(Icon)`
-  font-size: 13px;
+  font-size: 13px !important;
   position: absolute;
+  left: auto !important;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
-  width: 3rem;
+  width: 3rem !important;
+  padding-left: 0 !important;
   text-align: center;
 `
 
@@ -523,7 +537,7 @@ export const ContextMenuComponent = forwardRef((
     let sum = 0
     React.Children.forEach(children, child => {
         if (child && !child.props.disabled && !child.props.readOnly) {
-          if ((!isStyledComponent(child.type) && child.type === Li) || child.type.isKeyboardNavigable) {
+          if (child.type === Li || child.type.isKeyboardNavigable) {
             sum += 1
           }
           if (areComponentsEqual(child.type, StickyContainer) || child.props.nested) {
@@ -548,7 +562,7 @@ export const ContextMenuComponent = forwardRef((
       ? (
         child.props.nested
         ? React.cloneElement(child, child.props, formatChildren(child.props.children, indexRef))
-        : ((!isStyledComponent(child.type) && !isMemo(child.type) && areComponentsEqual(child.type, Li)) || child.type.isKeyboardNavigable)
+        : ((!isMemo(child.type) && areComponentsEqual(child.type, Li)) || child.type.isKeyboardNavigable)
           ? React.cloneElement(child, {
             fixedPosition:props.fixed,
             hover: hoverCursor === indexRef.current && layerIndex === layerCursor,

package/src/Dialog.jsx

@@ -81,7 +81,10 @@ const DialogContent = styled((props) =>
     }
     `
 
-const DialogTitle = styled.h2`
+// Host tag (styled.h2) com prop lida só no template: o styled-components filtra sozinho antes do
+// DOM, mas o yak não filtra atributo inválido em host tag puro — tira-se fixTitleMargin à mão.
+const TitleBase = React.forwardRef(({fixTitleMargin, ...props}, ref) => <h2 ref={ref} {...props}/>)
+const DialogTitle = styled(TitleBase)`
     margin-bottom: 1rem;
     padding-bottom: 1rem;
     ${props => props.fixTitleMargin && `
@@ -92,7 +95,9 @@ const DialogTitle = styled.h2`
     `}
 `
 
-const DialogFooter = styled.div`
+// Mesma razão do TitleBase acima: sticky/isSticky só existem pro template, tiram-se antes do DOM.
+const FooterBase = React.forwardRef(({sticky, isSticky, ...props}, ref) => <div ref={ref} {...props}/>)
+const DialogFooter = styled(FooterBase)`
     display: block;
     padding-top: 1rem;
     margin-top: 1rem;
@@ -103,6 +108,15 @@ const DialogFooter = styled.div`
       background: white;
       width: inherit;
       z-index: 50;
+      /* isSticky ANTES dos blocos media.* de propósito: stylis (sc) hoisteia @media pro fim do
+         CSS gerado, então mesmo escrito aqui em cima, o border-radius do media.desktop sempre
+         ganhava do border-radius:0 daqui em produção — o box-shadow/border-radius:0 nunca eram
+         vistos no desktop. O yak mantém a ordem literal do fonte; colocando isSticky antes, as
+         duas saem iguais (idem Task 12, ToastBox). */
+      ${props => props.isSticky && `
+        box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);
+        border-radius: 0;
+      `}
       ${media.desktop`
         bottom: -3rem;
         margin-left: -2rem;
@@ -119,10 +133,6 @@ const DialogFooter = styled.div`
         margin-left: -1.75rem;
         margin-right: -1.75rem;
       `}
-      ${props => props.isSticky && `
-        box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);
-        border-radius: 0;
-      `}
     `}
     ${media.max(370)`
       ${Button} {
@@ -131,8 +141,8 @@ const DialogFooter = styled.div`
         padding-right: 1.25rem;
       }
     `}
-    // Footer's plain (non-colored) buttons use the "light" look; colored variants keep their color.
-    // ponytail: for a plain footer button that shows a loading spinner, pass \`light\` explicitly so the spinner renders dark instead of white-on-light.
+    /* Footer's plain (non-colored) buttons use the "light" look; colored variants keep their color. */
+    /* ponytail: for a plain footer button that shows a loading spinner, pass \`light\` explicitly so the spinner renders dark instead of white-on-light. */
     ${Button}:not(.styled-button-colored) {
       background: ${props => darken(0.03, getColor('bluishGray')(props))};
       color: ${getColor('gray90')};
@@ -173,7 +183,7 @@ const DialogAlwaysVisibleDiv = styled.div`
 `
 // END
 
-const Dialog = styled(React.forwardRef(({className, skipWrap, wrapChildren, stickyFooter, fixTitleMargin, skipCloseIcon, isLoading, footer, Content, children, title, illustration, icon, auxiliarActions, container = true, onClose, ...props}, outerRef) => {
+const DialogInner = React.forwardRef(({className, style, skipWrap, wrapChildren, stickyFooter, fixTitleMargin, skipCloseIcon, isLoading, footer, Content, children, title, illustration, icon, auxiliarActions, container = true, onClose, ...props}, outerRef) => {
   const ref = useEnsureRef(outerRef)
   const [WithIsSticky] = willUseIsSticky()
 
@@ -220,6 +230,7 @@ const Dialog = styled(React.forwardRef(({className, skipWrap, wrapChildren, stic
 
   const dialog = (confirmCloseDialog) => <div
     className={className + " JS-has-wc JS-dialog"}
+    style={style}
     ref={ref}
   >
     {skipWrap
@@ -245,7 +256,14 @@ const Dialog = styled(React.forwardRef(({className, skipWrap, wrapChildren, stic
                           closeDialog={handleClose}
   >{({confirmCloseDialog}) => dialog(confirmCloseDialog)}</DialogContainer>
     : dialog(handleClose)
-}))`
+})
+
+// R6: "as" não existe no yak. tagAs troca o componente/tag renderizado (ex.: DialogErrorContent
+// usa tagAs="div" pra reaproveitar o CSS do Dialog sem a lógica interna; DialogWithSidebar usa
+// tagAs={DialogWithSidebarPresentation}); sem tagAs, renderiza o Dialog de verdade (DialogInner).
+const DialogTagAs = React.forwardRef(({tagAs: Tag = DialogInner, ...props}, ref) => <Tag ref={ref} {...props}/>)
+
+const Dialog = styled(DialogTagAs)`
   @supports (position:sticky) {
     will-change: transform, opacity;
     &.JS-wc-off {
@@ -261,7 +279,7 @@ const Dialog = styled(React.forwardRef(({className, skipWrap, wrapChildren, stic
   /* Override opcional via prop. Fica ANTES do media.mobile de propósito: no mobile
      o max-width:100% de lá continua ganhando. Inerte sem a prop → zero efeito em
      quem já ajusta a largura por css="max-width:...". */
-  ${props => props.$maxWidth && css`max-width: ${props.$maxWidth};`}
+  ${props => props.$maxWidth && css`max-width: ${props => props.$maxWidth};`}
   margin: auto;
   position: relative;
   align-self: baseline;
@@ -379,7 +397,7 @@ export const DialogErrorContent = ({ closeDialog, onClose, title }) => {
   return (
     <StartlibsConsumer>
       {({ ErrorDialog: { title, content, close } }) => (
-        <Dialog as="div" $maxWidth="30rem">
+        <Dialog tagAs="div" $maxWidth="30rem">
           {closeDialog && <CloseIcon onClick={handleClose} />}
           <DialogErrorLayout>
             <DialogErrorBadge><Icon icon="warning"/></DialogErrorBadge>

package/src/Icon.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
-import { withTheme } from 'styled-components'
+import styled, {useTheme} from 'styled-components'
 
 
 class IconComponent extends React.Component {
@@ -27,8 +26,10 @@ class IconComponent extends React.Component {
   }
 }
 
-export const Icon = styled(withTheme(IconComponent))`
-  font-family: '${props => props.theme?.iconFont}' !important;
+const ThemedIconComponent = React.forwardRef((props, ref) => <IconComponent ref={ref} {...props} theme={useTheme()}/>)
+
+export const Icon = styled(ThemedIconComponent)`
+  font-family: ${props => `'${props.theme?.iconFont}'`} !important;
   speak: none;
   font-style: normal;
   font-weight: normal;

package/src/Loading.jsx

@@ -1,7 +1,24 @@
+import React from 'react'
 import styled from 'styled-components'
-import {getColor} from '@startlibs/utils'
+import {getColor, insertKeyframes} from '@startlibs/utils'
 
-export const Loading = styled.div`
+// Nome fixo do @keyframes preservado: um `keyframes` do styled-components geraria um nome
+// com hash, diferente do atual "loading-spin" (quebraria quem lê animationName). Por isso
+// o bloco fica fora de um template styled/css/keyframes, registrado pelo CSSOM (sem nonce)
+// no primeiro render do Loading (não no import: o pacote declara "sideEffects": false e
+// código de topo de módulo pode ser descartado por um bundler mais agressivo se achar as
+// exportações não usadas).
+const injectSpinKeyframes = () => insertKeyframes('loading-spin', '100% { transform: rotate(1turn) }')
+
+// styled(LoadingBase) mira num componente, não numa tag: ao contrário do antigo styled.div,
+// o styled-components não filtra prop inválida pra <div> nesse caso. Por isso tira aqui,
+// à mão, cada prop que o template do Loading lê, antes de espalhar o resto no elemento real.
+const LoadingBase = React.forwardRef(({color, white, size, borderWidth, absolute, ...props}, ref) => {
+  injectSpinKeyframes()
+  return <div ref={ref} {...props}/>
+})
+
+export const Loading = styled(LoadingBase)`
     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;
@@ -23,7 +40,4 @@ export const Loading = styled.div`
       left: 0;
       margin: auto;
     `}
-    @keyframes loading-spin {
-      100% {transform: rotate(1turn)}
-    }
   `

package/src/PageLoader.jsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import {oneWayAnimation, getColor} from '@startlibs/utils'
 import {useToggle} from '@startlibs/core'
 import {useFlipLeave} from './Flip'
@@ -10,12 +10,12 @@ export const LoadingBar = styled.div`
   border-radius: 0 1px 1px 0;
   height: 4px;
   position: fixed;
-  background: ${props => props.bottom ? css`${getColor('main')}`:`#84D359`};
+  background: ${props => props.bottom ? 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);`};
+  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;

package/src/PersistentNotifications.jsx

@@ -74,10 +74,10 @@ export const PersistentNotificationCloseIcon = styled(Icon).attrs({icon: 'x'})`
     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 {
+    &:hover {
       background: ${props => transparentize(0.85, getColor(props.type || "main")(props))};
     }
-    :active {
+    &:active {
       background: ${props => transparentize(0.82, getColor(props.type || "main")(props))};
     }
   `

package/src/SplitColumnsContainer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import {getMargin, media} from '@startlibs/utils'
-import styled, {css} from 'styled-components'
+import {callIfFunction, getMargin, scrollWidth} from '@startlibs/utils'
+import styled, {useTheme} from 'styled-components'
 
 const getMarginFromFieldChild = (props) => {
   if (!props.last) return 0;
@@ -14,35 +14,94 @@ const getMarginFromFieldChild = (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%;
-      }
-    `}
-  `}
+// viewportMinWidth/twoColumnsBelowVW vêm de props: não tem CSS estático possível pra eles (yak
+// extrai @media em tempo de build, não a partir de uma prop em tempo de render). Troca o
+// `media.min`/`media.max` (que embutiam um `@media` dinâmico) por um hook que ouve
+// `matchMedia` e liga/desliga classe — as duas regras de CSS ficam estáticas, e a mesma soma de
+// `scrollWidth` que `media()` já fazia entra aqui, pro breakpoint bater igual em px (inclusive
+// a 610px, entre 600 e 600 + barra de rolagem).
+const useMatchMedia = (query) => {
+  const getMatch = () => (typeof window !== 'undefined' && window.matchMedia) ? window.matchMedia(query).matches : false
+  const [matches, setMatches] = React.useState(getMatch)
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia(query)
+    const onChange = () => setMatches(mql.matches)
+    onChange()
+    const addListener = mql.addEventListener ? (cb) => mql.addEventListener('change', cb) : (cb) => mql.addListener(cb)
+    const removeListener = mql.removeEventListener ? (cb) => mql.removeEventListener('change', cb) : (cb) => mql.removeListener(cb)
+    addListener(onChange)
+    return () => removeListener(onChange)
+  }, [query])
+  return matches
+}
+
+// Mesma comparação que checkCustomScreenWidth (utils/src/styled.js) fazia pro theme.overrideMediaWidth:
+// ignora o browser de verdade e compara direto contra o breakpoint (sem somar scrollWidth — o
+// override já é uma largura "combinada", não a viewport física). Usado em testes/impressão.
+const matchesOverrideWidth = (overrideWidth, breakpoint, type) => {
+  const currentWidth = callIfFunction(overrideWidth)
+  return type === 'min-width' ? currentWidth >= breakpoint : currentWidth <= breakpoint
+}
+
+// `breakpoint` null/undefined == bloco original não tinha condição nenhuma pra testar (o `&&`
+// de `props.twoColumnsBelowVW &&`): nem entra no matchMedia, nem no overrideMediaWidth.
+const useBreakpointMatch = (breakpoint, type, overrideWidth) => {
+  const hasBreakpoint = breakpoint !== undefined && breakpoint !== null
+  const useOverride = hasBreakpoint && overrideWidth !== undefined
+  const query = (hasBreakpoint && !useOverride)
+    ? `(${type}: ${breakpoint + scrollWidth}px)`
+    : 'not all'
+  const mediaMatch = useMatchMedia(query)
+  if (!hasBreakpoint) return false
+  return useOverride ? matchesOverrideWidth(overrideWidth, breakpoint, type) : mediaMatch
+}
+
+// styled(Base) mira num componente, não numa tag: ao contrário do antigo styled.div, o
+// styled-components não filtra prop inválida pra <div> nesse caso. Por isso tira aqui, à mão,
+// toda prop que ou é lida só pelo template (margin, last) ou só existe pra decidir a classe
+// aqui dentro (viewportMinWidth, twoColumnsBelowVW), antes de espalhar o resto no elemento real.
+const SplitColumnsContainerBase = React.forwardRef(({viewportMinWidth = 0, twoColumnsBelowVW, margin, last, className, ...rest}, ref) => {
+  const overrideWidth = useTheme()?.overrideMediaWidth
+  const isFlex = useBreakpointMatch(viewportMinWidth, 'min-width', overrideWidth)
+  const isTwoColumns = useBreakpointMatch(twoColumnsBelowVW, 'max-width', overrideWidth)
+  const classes = [className, isFlex && 'JS-flex-columns', isTwoColumns && 'JS-two-columns'].filter(Boolean).join(' ')
+  return <div ref={ref} className={classes || undefined} {...rest}/>
+})
+
+export const SplitColumnsContainer = styled(SplitColumnsContainerBase)`
+  margin-bottom: ${props => getMarginFromFieldChild(props)}rem;
+
+  &.JS-flex-columns {
+    display: flex;
+    flex-wrap: nowrap;
+    /* O yak extrai essas interpolações pra var(--...): um sinal de menos solto no texto estático,
+       logo antes da interpolação, vira "-var(--x)" na folha final — sintaxe de CSS inválida
+       (margin cai pro valor inicial, 0px). O sinal de menos tem que estar DENTRO do valor
+       calculado, não no texto ao redor. */
+    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;
+    }
+  }
+  &.JS-two-columns {
+    flex-wrap: wrap;
+    > * {
+      flex-basis: 47%;
+    }
+  }
 `
+// O plugin/babel-plugin-styled-components infere o displayName do nome da variável — mas só
+// quando o import `styled` vem de 'styled-components' (modo sc). No lib-yak o arquivo passa a
+// importar `styled` de '@yak/react' e isso não acontece mais, então fica explícito aqui, nos dois
+// modos: fixDoubledLastMarginBottom precisa do mesmo valor em "SplitColumnsContainer.displayName".
+SplitColumnsContainer.displayName = 'SplitColumnsContainer'
 
 export const fixDoubledLastMarginBottom = (children) => {
   let last = React.Children.count(children)-1