@startlibs/components 1.1.5 → 1.2.0-rc.1

package/lib/index.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var styled = require('styled-components');
 var utils = require('@startlibs/utils');
-var _extends = require('@babel/runtime/helpers/extends');
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var polished = require('polished');
 var _fromPairs = require('lodash/fp/fromPairs');
@@ -56,10 +56,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var _extends__default = /*#__PURE__*/_interopDefault(_extends);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var _extends__default = /*#__PURE__*/_interopDefault(_extends);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var _fromPairs__default = /*#__PURE__*/_interopDefault(_fromPairs);
 var _filter__default = /*#__PURE__*/_interopDefault(_filter);
@@ -85,7 +85,7 @@ var _set__default = /*#__PURE__*/_interopDefault(_set);
 var _pullAt__default = /*#__PURE__*/_interopDefault(_pullAt);
 var mitt__default = /*#__PURE__*/_interopDefault(mitt);
 
-const _excluded$m = ["icon", "children", "theme", "clickable", "customIcon", "colorSet", "color"];
+const _excluded$o = ["icon", "children", "theme", "clickable", "customIcon", "colorSet", "color"];
 class IconComponent extends React__default["default"].Component {
   constructor() {
     super(...arguments);
@@ -110,7 +110,7 @@ class IconComponent extends React__default["default"].Component {
         colorSet,
         color
       } = _this$props,
-      rest = _objectWithoutProperties__default["default"](_this$props, _excluded$m);
+      rest = _objectWithoutProperties__default["default"](_this$props, _excluded$o);
     if ((theme.svgIcons || {})[icon]) {
       if (this.state.Svg) {
         return /*#__PURE__*/React__default["default"].createElement(this.state.Svg, rest);
@@ -121,27 +121,52 @@ class IconComponent extends React__default["default"].Component {
     return /*#__PURE__*/React__default["default"].createElement("span", rest, theme.icons[icon] || customIcon && icon, children);
   }
 }
-const Icon = /*#__PURE__*/styled__default["default"](styled.withTheme(IconComponent)).withConfig({
+const ThemedIconComponent = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement(IconComponent, _extends__default["default"]({
+  ref: ref
+}, props, {
+  theme: styled.useTheme()
+})));
+const Icon = /*#__PURE__*/styled__default["default"](ThemedIconComponent).withConfig({
   displayName: "Icon",
   componentId: "sc-wsq54u-0"
-})(["font-family:'", "' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;", ""], props => {
+})(["font-family:", " !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;", ""], props => {
   var _props$theme;
-  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.iconFont;
+  return "'".concat((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.iconFont, "'");
 }, props => props.clickable && "\n    cursor: pointer;\n    &:hover {\n      opacity: 0.85;\n    }\n  ");
 
-const Loading = /*#__PURE__*/styled__default["default"].div.withConfig({
+const _excluded$n = ["color", "white", "size", "borderWidth", "absolute"];
+
+// 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 = () => utils.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 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let props = _objectWithoutProperties__default["default"](_ref, _excluded$n);
+  injectSpinKeyframes();
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref
+  }, props));
+});
+const Loading = /*#__PURE__*/styled__default["default"](LoadingBase).withConfig({
   displayName: "Loading",
   componentId: "sc-5t5spc-0"
-})(["z-index:1;--loading-color:", ";--loading-bw:", "px;width:", "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;", " @keyframes loading-spin{100%{transform:rotate(1turn)}}"], props => props.color || (props.white ? 'rgba(255,255,255,0.9)' : utils.getColor("main")(props)), props => props.borderWidth || 4, props => props.size || 26, props => props.absolute && "\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin: auto;\n    ");
+})(["z-index:1;--loading-color:", ";--loading-bw:", "px;width:", "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.color || (props.white ? 'rgba(255,255,255,0.9)' : utils.getColor("main")(props)), props => props.borderWidth || 4, props => props.size || 26, props => props.absolute && "\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin: auto;\n    ");
 
-const _excluded$l = ["href"],
-  _excluded2$2 = ["to", "onClick"],
-  _excluded3$1 = ["element", "children"];
+const _excluded$m = ["href"],
+  _excluded2$4 = ["to", "onClick"],
+  _excluded3$2 = ["element", "children"];
 const Link = _ref => {
   let {
       href
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$l);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$m);
   return _isString__default["default"](props.to) ? /*#__PURE__*/React__default["default"].createElement(Wouter__namespace.Link, props) : /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
     href: href === null || href === void 0 ? void 0 : href.replace("~", "")
   }));
@@ -151,7 +176,7 @@ const HistoryLink = _ref2 => {
       to,
       onClick
     } = _ref2,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded2$2);
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded2$4);
   return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({
     onClick: e => {
       if (onClick && !utils.callIfFunction(onClick, e)) {
@@ -186,7 +211,7 @@ const Route = _ref3 => {
       element,
       children
     } = _ref3,
-    props = _objectWithoutProperties__default["default"](_ref3, _excluded3$1);
+    props = _objectWithoutProperties__default["default"](_ref3, _excluded3$2);
   return /*#__PURE__*/React__default["default"].createElement(Wouter__namespace.Route, props, element || children);
 };
 const Routes = Wouter__namespace.Switch;
@@ -232,14 +257,14 @@ const useSearchParams = defaultParams => {
 };
 const Router = Wouter__namespace.Router;
 
-const _excluded$k = ["type", "locked", "color", "alpha", "success", "alert", "warning", "highlight", "light", "hover", "white", "icon", "onlyIcon", "small", "withDropdown", "onlyDropdown", "outline", "dashed", "textOnly", "isLoading", "isLoadingIcon", "dark", "innerAs", "className", "children", "rounded", "tabIndex", "focused", "noFocus", "colorSet", "concealed", "concealedModule", "buttonRef"];
-var _templateObject$8, _templateObject2$7, _templateObject3$5;
-const DropdownIcon = utils.styledExtend(Icon)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default["default"](["\n  position: absolute;\n  top: 51%;\n  transform: translateY(-50%);\n  right: 1rem;\n  font-size: 12px;\n"])));
+const _excluded$l = ["type", "locked", "color", "alpha", "success", "alert", "warning", "highlight", "light", "hover", "white", "icon", "onlyIcon", "small", "withDropdown", "onlyDropdown", "outline", "dashed", "textOnly", "isLoading", "isLoadingIcon", "dark", "innerAs", "className", "children", "rounded", "tabIndex", "focused", "noFocus", "colorSet", "concealed", "concealedModule", "buttonRef"];
+var _templateObject$7, _templateObject2$6, _templateObject3$5;
+const DropdownIcon = utils.styledExtend(Icon)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default["default"](["\n  position: absolute;\n  top: 51%;\n  transform: translateY(-50%);\n  right: 1rem;\n  font-size: 12px;\n"])));
 const LockIcon = /*#__PURE__*/styled__default["default"](Icon).withConfig({
   displayName: "Button__LockIcon",
   componentId: "sc-qe54pl-0"
 })(["position:absolute;bottom:10px;right:.75rem;left:auto;top:auto;font-size:18px;"]);
-const focus = /*#__PURE__*/styled.css([":after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:", ";border:2px solid rgba(0,0,0,0.15);}"], props => props.rounded ? '100px' : '11px');
+const focus = /*#__PURE__*/styled.css(["&:after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:", ";border:2px solid rgba(0,0,0,0.15);}"], props => props.rounded ? '100px' : '11px');
 const Button = /*#__PURE__*/styled__default["default"](/*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
       type = "button",
@@ -276,11 +301,11 @@ const Button = /*#__PURE__*/styled__default["default"](/*#__PURE__*/React__defau
       concealedModule,
       buttonRef
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$k);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$l);
   return /*#__PURE__*/React__default["default"].createElement(Wrapper, _extends__default["default"]({
     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' : ''),
+    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 && /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
@@ -304,7 +329,7 @@ const Button = /*#__PURE__*/styled__default["default"](/*#__PURE__*/React__defau
 })).withConfig({
   displayName: "Button",
   componentId: "sc-qe54pl-1"
-})(["vertical-align:top;border:0;font-size:13px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:600;display:inline-block;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " & + &{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => props.rounded ? '100px' : '8px', utils.getColor, props => polished.darken(0.05, utils.getColor(props, true)), props => polished.darken(0.08, utils.getColor(props, true)), props => props.nowrap && "\n    white-space: nowrap;\n  ", props => !props.noFocus && !props.isLoading && styled.css([":focus{", "}", ""], focus, props => props.focused && focus), props => props.hasErrors && styled.css([":after{content:'';pointer-events:none;position:absolute;top:-4px;right:-4px;left:-4px;bottom:-4px;border-radius:", ";border:3px solid ", ";}"], props => props.rounded ? '100px' : '11px', props => polished.transparentize(0.7, utils.getColor("alert")(props))), props => props.icon && styled.css(["display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;", "{font-size:23px;margin-left:-4px;margin-right:8px;pointer-events:none;line-height:0;}"], Icon), props => props.onlyIcon && styled.css(["padding:0;", "{margin:0;}"], Icon), props => props.small && styled.css(["font-size:13px;padding:3px 1rem;min-width:2rem;min-height:2rem;font-weight:550;", " ", ""], props.icon && styled.css(["", "{font-size:18px;margin-left:-5px;margin-right:5px;line-height:0.9;}"], Icon), props.onlyIcon && styled.css(["padding:0;", "{margin:0;}"], Icon)), props => props.big && styled.css(["font-size:14px;padding:13px 1.75rem;min-height:42px;"]), props => props.withDropdown && styled.css(["padding-right:2.25rem;text-align:left;"]), props => props.onlyDropdown && styled.css(["", "{right:50%;transform:translate(50%,-50%);}"], DropdownIcon), props => props.light && styled.css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], utils.getColor('bluishGray'), utils.getColor('gray90'), props => polished.darken(0.05, utils.getColor('bluishGray')(props)), props => polished.darken(0.08, utils.getColor('bluishGray')(props))), props => props.lightAlert && styled.css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], props => polished.transparentize(0.86, utils.getColor("alert")(props)), utils.getColor('alert'), props => polished.transparentize(0.83, utils.getColor("alert")(props)), props => polished.transparentize(0.80, utils.getColor("alert")(props))), props => props.lightWarning && styled.css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], props => polished.transparentize(0.84, polished.darken(0.05, utils.getColor('warning')(props))), props => polished.darken(0.05, utils.getColor('warning')(props)), props => polished.transparentize(0.78, polished.darken(0.05, utils.getColor('warning')(props))), props => polished.transparentize(0.76, polished.darken(0.05, utils.getColor('warning')(props)))), props => (props.outline || props.dashed || props.textOnly) && styled.css(["color:", ";background:none;", ",", "{color:", ";}:before{content:'';border:1px ", " ", ";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";pointer-events:none;}:hover{background-color:rgba(0,0,0,0.05);}:active{background-color:rgba(0,0,0,0.08);}:focus{:before{box-shadow:0 0 0 2px rgba(0,0,0,0.1);", "}:after{content:none;}}"], props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.6)', Icon, DropdownIcon, props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '8px', props.textOnly && 'content: none;'), props => props.alpha && styled.css(["background:rgba(0,0,0,0.45);:hover{background:rgba(0,0,0,0.50);}:active{background:rgba(0,0,0,0.55);}"]), props => props.white && !props.outline && !props.dashed && styled.css(["color:", ";background:#FFFFFF;:hover{background:", ";}:active{background:", ";}"], utils.getColor('main'), polished.darken(0.05, '#FFFFFF'), polished.darken(0.08, '#FFFFFF')), props => props.isLoading && styled.css(["color:transparent !important;pointer-events:none;", "{visibility:hidden;}"], Icon), props => props.isLoadingIcon && styled.css(["pointer-events:none;", "{visibility:hidden;}", "{left:10px;position:absolute;}"], Icon, Loading), utils.media.mobile(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default["default"](["\n    ", "\n    ", "\n    ", "\n  "])), props => !props.small && !props.onlyIcon && styled.css(["padding:13px 1.5rem;font-size:14px;"]), props => !props.small && props.onlyIcon && styled.css(["min-width:3.5rem;min-height:3.5rem;"]), props => props.withDropdown && styled.css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon)), utils.media.max(359)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default["default"](["\n    ", "\n  "])), props => !props.small && !props.onlyIcon && !props.onlyDropdown && styled.css(["min-width:0;"])), props => props.fullwidth && "\n    width: 100%;\n  ", utils.customTheme("Button"));
+})(["vertical-align:top;border:0;font-size:13px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:600;display:inline-block;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;&:hover{background:", ";}&:active{background:", ";}", " ", " & + &{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => props.rounded ? '100px' : '8px', utils.getColor, props => polished.darken(0.05, utils.getColor(props, true)), props => polished.darken(0.08, utils.getColor(props, true)), props => props.nowrap && "\n    white-space: nowrap;\n  ", props => !props.noFocus && !props.isLoading && styled.css(["&:focus{", "}", ""], focus, props => props.focused && focus), props => props.hasErrors && styled.css(["&:after{content:'';pointer-events:none;position:absolute;top:-4px;right:-4px;left:-4px;bottom:-4px;border-radius:", ";border:3px solid ", ";}"], props => props.rounded ? '100px' : '11px', props => polished.transparentize(0.7, utils.getColor("alert")(props))), props => props.icon && styled.css(["display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;", "{font-size:23px;margin-left:-4px;margin-right:8px;pointer-events:none;line-height:0;}"], Icon), props => props.onlyIcon && styled.css(["padding:0;", "{margin:0;}"], Icon), props => props.small && styled.css(["font-size:13px;padding:3px 1rem;min-width:2rem;min-height:2rem;font-weight:550;", " ", ""], props => props.icon && styled.css(["", "{font-size:18px;margin-left:-5px;margin-right:5px;line-height:0.9;}"], Icon), props => props.onlyIcon && styled.css(["padding:0;", "{margin:0;}"], Icon)), props => props.big && styled.css(["font-size:14px;padding:13px 1.75rem;min-height:42px;"]), props => props.withDropdown && styled.css(["padding-right:2.25rem;text-align:left;"]), props => props.onlyDropdown && styled.css(["", "{right:50%;transform:translate(50%,-50%);}"], DropdownIcon), props => props.light && styled.css(["background:", ";color:", ";&:hover{background:", ";}&:active{background:", ";}"], utils.getColor('bluishGray'), utils.getColor('gray90'), props => polished.darken(0.05, utils.getColor('bluishGray')(props)), props => polished.darken(0.08, utils.getColor('bluishGray')(props))), props => props.lightAlert && styled.css(["background:", ";color:", ";&:hover{background:", ";}&:active{background:", ";}"], props => polished.transparentize(0.86, utils.getColor("alert")(props)), utils.getColor('alert'), props => polished.transparentize(0.83, utils.getColor("alert")(props)), props => polished.transparentize(0.80, utils.getColor("alert")(props))), props => props.lightWarning && styled.css(["background:", ";color:", ";&:hover{background:", ";}&:active{background:", ";}"], props => polished.transparentize(0.84, polished.darken(0.05, utils.getColor('warning')(props))), props => polished.darken(0.05, utils.getColor('warning')(props)), props => polished.transparentize(0.78, polished.darken(0.05, utils.getColor('warning')(props))), props => polished.transparentize(0.76, polished.darken(0.05, utils.getColor('warning')(props)))), props => (props.outline || props.dashed || props.textOnly) && styled.css(["color:", ";background:none;", ",", "{color:", ";}&:before{content:'';border:1px ", " ", ";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";pointer-events:none;}&:hover{background-color:rgba(0,0,0,0.05);}&:active{background-color:rgba(0,0,0,0.08);}&:focus{&:before{box-shadow:0 0 0 2px rgba(0,0,0,0.1);", "}&:after{content:none;}}"], props => props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.6)', Icon, DropdownIcon, props => props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.5)', props => props.outline ? 'solid' : props.dashed ? 'dashed' : 'none', props => props.white ? 'white' : props.highlight ? utils.getColor('main') : 'rgba(0,0,0,0.35)', props => props.rounded ? '100px' : '8px', props => props.textOnly && 'content: none;'), props => props.alpha && styled.css(["background:rgba(0,0,0,0.45);&:hover{background:rgba(0,0,0,0.50);}&:active{background:rgba(0,0,0,0.55);}"]), props => props.white && !props.outline && !props.dashed && styled.css(["color:", ";background:#FFFFFF;&:hover{background:", ";}&:active{background:", ";}"], utils.getColor('main'), polished.darken(0.05, '#FFFFFF'), polished.darken(0.08, '#FFFFFF')), props => props.isLoading && styled.css(["color:transparent !important;pointer-events:none;", "{visibility:hidden;}"], Icon), props => props.isLoadingIcon && styled.css(["pointer-events:none;", "{visibility:hidden;}", "{left:10px;position:absolute;}"], Icon, Loading), utils.media.mobile(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default["default"](["\n    ", "\n    ", "\n    ", "\n  "])), props => !props.small && !props.onlyIcon && styled.css(["padding:13px 1.5rem;font-size:14px;"]), props => !props.small && props.onlyIcon && styled.css(["min-width:3.5rem;min-height:3.5rem;"]), props => props.withDropdown && styled.css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon)), utils.media.max(359)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default["default"](["\n    ", "\n  "])), props => !props.small && !props.onlyIcon && !props.onlyDropdown && styled.css(["min-width:0;"])), props => props.fullwidth && "\n    width: 100%;\n  ", utils.customTheme("Button"));
 Button.a = props => /*#__PURE__*/React__default["default"].createElement(Button, _extends__default["default"]({}, props, {
   className: props.className,
   innerAs: "a"
@@ -314,7 +339,7 @@ Button.Link = props => /*#__PURE__*/React__default["default"].createElement(Butt
   innerAs: Link
 }));
 
-const _excluded$j = ["onClick", "children", "onSuccess", "as", "onFailure", "className"];
+const _excluded$k = ["onClick", "children", "onSuccess", "as", "onFailure", "className"];
 const OnClickLoadingButton = _ref => {
   let {
       onClick,
@@ -324,7 +349,7 @@ const OnClickLoadingButton = _ref => {
       onFailure,
       className
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$j);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$k);
   const loading = core.useToggle();
   const Element = as;
   return /*#__PURE__*/React__default["default"].createElement(Element, _extends__default["default"]({
@@ -341,7 +366,7 @@ const OnClickLoadingButton = _ref => {
   }), children);
 };
 
-const _excluded$i = ["className", "isLoading", "alert", "fontSize", "children", "innerAs"];
+const _excluded$j = ["className", "isLoading", "alert", "fontSize", "children", "innerAs"];
 const TextButton = /*#__PURE__*/styled__default["default"](_ref => {
   let {
       className,
@@ -351,7 +376,7 @@ const TextButton = /*#__PURE__*/styled__default["default"](_ref => {
       children,
       innerAs: Wrapper = 'div'
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$i);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$j);
   return /*#__PURE__*/React__default["default"].createElement(Wrapper, _extends__default["default"]({
     className: className
   }, props), children, " ", isLoading && /*#__PURE__*/React__default["default"].createElement(Loading, {
@@ -361,7 +386,7 @@ const TextButton = /*#__PURE__*/styled__default["default"](_ref => {
 }).withConfig({
   displayName: "TextButton",
   componentId: "sc-1eydmhc-0"
-})(["display:inline-block;font-weight:600;font-size:", "px;color:", ";cursor:pointer;text-decoration:none;:hover,:active{color:", ";}", "{display:inline-block;margin-left:0.25rem;vertical-align:-3px;}", " & ~ &{margin-left:1rem;}"], props => props.fontSize ? props.fontSize : "14", props => props.alert ? utils.getColor('alert') : utils.getColor('main'), props => props.alert ? polished.darken(0.1, utils.getColor("alert")(props)) : polished.darken(0.1, utils.getColor("main")(props)), Loading, props => props.nowrap && "\n    white-space: nowrap;\n  ");
+})(["display:inline-block;font-weight:600;font-size:", "px;color:", ";cursor:pointer;text-decoration:none;&:hover,&:active{color:", ";}", "{display:inline-block;margin-left:0.25rem;vertical-align:-3px;}", " & ~ &{margin-left:1rem;}"], props => props.fontSize ? props.fontSize : "14", props => props.alert ? utils.getColor('alert') : utils.getColor('main'), props => props.alert ? polished.darken(0.1, utils.getColor("alert")(props)) : polished.darken(0.1, utils.getColor("main")(props)), Loading, props => props.nowrap && "\n    white-space: nowrap;\n  ");
 TextButton.a = props => /*#__PURE__*/React__default["default"].createElement(TextButton, _extends__default["default"]({}, props, {
   className: props.className,
   innerAs: "a"
@@ -965,7 +990,7 @@ const useFlipAnimation = function (ref, onEnterOrBoth) {
   }));
 };
 
-const _excluded$h = ["useAnimation", "outerRef", "onEnter", "onLeave"];
+const _excluded$i = ["useAnimation", "outerRef", "onEnter", "onLeave"];
 const [loadingEnter, loadingLeave] = utils.twoWayAnimation('opacity:0;', 'opacity:1;');
 utils.twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)');
 const BlockContainer$1 = /*#__PURE__*/styled__default["default"].div.withConfig({
@@ -979,7 +1004,7 @@ const FlipDiv = _ref => {
       onEnter = onEnter,
       onLeave = onLeave
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$h);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$i);
   const ensuredRef = core.useEnsureRef(outerRef);
   useAnimation(ensuredRef, onEnter, onLeave);
   return /*#__PURE__*/React__default["default"].createElement(BlockContainer$1, _extends__default["default"]({}, props, {
@@ -1036,7 +1061,7 @@ const LoadingDiv = _ref2 => {
   }, children) : children);
 };
 
-var _templateObject$7, _templateObject2$6;
+const _excluded$h = ["viewportMinWidth", "twoColumnsBelowVW", "margin", "last", "className"];
 const getMarginFromFieldChild = props => {
   if (!props.last) return 0;
   const fields = React__default["default"].Children.toArray(props.children).filter(c => c.type.displayName === "Field" || c.type.displayName === "EnhancedInput");
@@ -1049,10 +1074,80 @@ const splitColumnMargins = {
   'default': 1,
   big: 2
 };
-const SplitColumnsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+
+// 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__default["default"].useState(getMatch);
+  React__default["default"].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 = utils.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 ? "(".concat(type, ": ").concat(breakpoint + utils.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 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  var _useTheme;
+  let {
+      viewportMinWidth = 0,
+      twoColumnsBelowVW,
+      margin,
+      last,
+      className
+    } = _ref,
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$h);
+  const overrideWidth = (_useTheme = styled.useTheme()) === null || _useTheme === void 0 ? void 0 : _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 /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: classes || undefined
+  }, rest));
+});
+const SplitColumnsContainer = /*#__PURE__*/styled__default["default"](SplitColumnsContainerBase).withConfig({
   displayName: "SplitColumnsContainer",
   componentId: "sc-1h4sw88-0"
-})(["margin-bottom:", "rem;", " ", ""], getMarginFromFieldChild, props => styled.css(["", ""], utils.media.min(props.viewportMinWidth || 0)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default["default"](["\n      display: flex;\n      flex-wrap: nowrap;\n      margin-left: -", "rem;\n      margin-right: -", "rem;\n      margin-top: -", "rem;\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n        margin-left: ", "rem;\n        margin-right: ", "rem;\n        margin-top: ", "rem;\n      }\n    "])), props => utils.getMargin(splitColumnMargins)(props) / 2, props => utils.getMargin(splitColumnMargins)(props) / 2, props => utils.getMargin(splitColumnMargins)(props), props => utils.getMargin(splitColumnMargins)(props) / 2, props => utils.getMargin(splitColumnMargins)(props) / 2, props => utils.getMargin(splitColumnMargins)(props))), props => props.twoColumnsBelowVW && styled.css(["", ""], utils.media.max(props.twoColumnsBelowVW)(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default["default"](["\n      flex-wrap: wrap;\n      > * {\n        flex-basis: 47%;\n      }\n    "])))));
+})(["margin-bottom:", "rem;&.JS-flex-columns{display:flex;flex-wrap:nowrap;margin-left:", "rem;margin-right:", "rem;margin-top:", "rem;> *{flex-basis:0;flex-grow:1;margin-left:", "rem;margin-right:", "rem;margin-top:", "rem;}}&.JS-two-columns{flex-wrap:wrap;> *{flex-basis:47%;}}"], props => getMarginFromFieldChild(props), props => -utils.getMargin(splitColumnMargins)(props) / 2, props => -utils.getMargin(splitColumnMargins)(props) / 2, props => -utils.getMargin(splitColumnMargins)(props), props => utils.getMargin(splitColumnMargins)(props) / 2, props => utils.getMargin(splitColumnMargins)(props) / 2, props => utils.getMargin(splitColumnMargins)(props));
+// 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';
 const fixDoubledLastMarginBottom = children => {
   let last = React__default["default"].Children.count(children) - 1;
   function processChild(child, i) {
@@ -1170,8 +1265,9 @@ class ErrorBoundary extends React__default["default"].Component {
 
 // StartlibsProvider.registerInternal('ErrorBoundary',ErrorBoundary)
 
-const _excluded$f = ["timing", "nestedFlip", "enterEffect", "leaveEffect", "modalIn", "modalOut", "blurBackdrop"];
 var _templateObject$6, _templateObject2$5;
+const _excluded$f = ["tagAs", "withScroll", "fullscreen", "fullscreenOnMobile"],
+  _excluded2$3 = ["timing", "nestedFlip", "enterEffect", "leaveEffect", "modalIn", "modalOut", "blurBackdrop"];
 const dialogFadeInDown = utils.oneWayAnimation('opacity: 0; transform: translateY(50px);', 'opacity: 1; transform: translateY(0);');
 const [dialogModalIn, dialogModalOut] = utils.twoWayAnimation('opacity: 0;', 'opacity: 1;');
 const Modal = /*#__PURE__*/styled__default["default"].div.withConfig({
@@ -1182,10 +1278,28 @@ const ModalContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "DialogContainer__ModalContainer",
   componentId: "sc-wendlg-1"
 })(["position:fixed;top:0;bottom:0;left:0;right:0;scrollbar-color:transparent transparent;"]);
-const DialogCenter = /*#__PURE__*/styled__default["default"].div.withConfig({
+
+// R6: "as" não existe no yak. tagAs troca a tag renderizada (form quando a dialog embute um
+// form, senão div). withScroll/fullscreen/fullscreenOnMobile são lidos pelo template abaixo,
+// mas não são atributos DOM válidos: como o alvo do styled() agora é um componente (não mais
+// styled.div puro), o styled-components para de filtrar prop inválida sozinho — tiram-se à mão
+// antes do spread no elemento real.
+const DialogCenterTagAs = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+      tagAs: Tag = 'div',
+      withScroll,
+      fullscreen,
+      fullscreenOnMobile
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$f);
+  return /*#__PURE__*/React__default["default"].createElement(Tag, _extends__default["default"]({
+    ref: ref
+  }, props));
+});
+const DialogCenter = /*#__PURE__*/styled__default["default"](DialogCenterTagAs).withConfig({
   displayName: "DialogContainer__DialogCenter",
   componentId: "sc-wendlg-2"
-})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:", ";overflow-x:hidden;scrollbar-color:rgba(255,255,255,0.6) transparent;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;", " ", ""], props => props.withScroll ? "scroll" : "hidden", utils.media.desktop(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default["default"](["\n    padding: ", ";\n  "])), props => props.fullscreen ? '1rem' : '3rem 0.5rem;'), utils.media.mobile(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default["default"](["\n    padding: ", ";\n  "])), props => props.fullscreenOnMobile ? '0' : '0.5rem'));
+})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:", ";overflow-x:hidden;scrollbar-color:rgba(255,255,255,0.6) transparent;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;", " ", ""], props => props.withScroll ? "scroll" : "hidden", utils.media.desktop(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default["default"](["\n    padding: ", ";\n  "])), props => props.fullscreen ? '1rem' : '3rem 0.5rem'), utils.media.mobile(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default["default"](["\n    padding: ", ";\n  "])), props => props.fullscreenOnMobile ? '0' : '0.5rem'));
 const PopupSlot = /*#__PURE__*/styled__default["default"](core.Slot).withConfig({
   displayName: "DialogContainer__PopupSlot",
   componentId: "sc-wendlg-3"
@@ -1304,7 +1418,7 @@ const removeWindowScroll = (opening, keepDisabledScroll) => {
   }
 };
 const [useDialogLayers, getDialogLayersSize] = core.willUseLayers(React__default["default"].useLayoutEffect);
-const DialogContainer = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
+const DialogContainer = /*#__PURE__*/React.forwardRef((_ref2, forwardedRef) => {
   let {
     children,
     title,
@@ -1333,7 +1447,7 @@ const DialogContainer = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     skipCheckFocus,
     autoComplete,
     blurBackdrop
-  } = _ref;
+  } = _ref2;
   const dialogRef = core.useEnsureRef(forwardedRef);
   const prevActiveElement = core.useRefState(document.activeElement);
   const modal = core.useEnsureRef(modalRef);
@@ -1540,13 +1654,13 @@ const DialogContainer = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
     fullscreen: fullscreen,
     fullscreenOnMobile: fullscreenOnMobile,
     ref: modalScroll,
-    as: usingForm ? 'form' : undefined,
+    tagAs: usingForm ? 'form' : undefined,
     onClick: checkClick,
     onSubmit: usingForm ? () => {} : undefined,
     onMouseDown: mouseDown
   }, content))));
 });
-const AnimatedModal = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+const AnimatedModal = /*#__PURE__*/React__default["default"].forwardRef((_ref3, ref) => {
   let {
       timing,
       nestedFlip,
@@ -1555,8 +1669,8 @@ const AnimatedModal = /*#__PURE__*/React__default["default"].forwardRef((_ref2,
       modalIn = dialogModalIn,
       modalOut = dialogModalOut,
       blurBackdrop
-    } = _ref2,
-    props = _objectWithoutProperties__default["default"](_ref2, _excluded$f);
+    } = _ref3,
+    props = _objectWithoutProperties__default["default"](_ref3, _excluded2$3);
   const modal = core.useEnsureRef(ref);
   useFlipAnimation(modal, modalIn, modalOut, {
     timing,
@@ -1594,7 +1708,28 @@ const BOTTOM_TRIGGER = (posInfo, refInfo) => {
 const SentinelStyle = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "willUseIsSticky__SentinelStyle",
   componentId: "sc-1nsyca-0"
-})(["position:absolute;visibility:hidden;height:1px;width:1px;", ""], props => props.addCss);
+})(["position:absolute;visibility:hidden;height:1px;width:1px;"]);
+
+// addCss é texto livre de declarações CSS (ex.: Combobox.jsx em @startlibs/form passa
+// "margin-top:-3px;"), decidido em tempo de execução pelo chamador — não dá pra virar
+// `css\`\`` (precisaria do texto na hora do build) nem ficar como interpolação solta no
+// template (R14: o yak ignora em silêncio uma função que devolve texto livre numa posição de
+// declaração). Vira `style` inline nos dois modos: mesmo resultado visual, sem CSS-in-JS aqui.
+const cssTextToStyle = text => {
+  const style = {};
+  for (const declaration of (text || '').split(';')) {
+    const colonIndex = declaration.indexOf(':');
+    if (colonIndex === -1) continue;
+    const property = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+    if (!property || !value) continue;
+    // Custom property (--foo) mantém o nome; o resto vira camelCase (margin-top -> marginTop),
+    // igual ao que o React espera num objeto de `style`.
+    const camelProperty = property.startsWith('--') ? property : property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    style[camelProperty] = value;
+  }
+  return Object.keys(style).length ? style : undefined;
+};
 const willUseIsSticky = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const [useRegister, onChange] = core.willUseSharedCallback();
@@ -1673,7 +1808,7 @@ const willUseIsSticky = function () {
     const renderSentinel = function () {
       let css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
       return /*#__PURE__*/React__default["default"].createElement(SentinelStyle, {
-        addCss: css,
+        style: cssTextToStyle(css),
         className: className,
         ref: ensuredRef
       });
@@ -1683,8 +1818,11 @@ const willUseIsSticky = function () {
   return [WithIsSticky, useSharedIsSticky, resetObservers];
 };
 
-const _excluded$e = ["className", "skipWrap", "wrapChildren", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container", "onClose"];
-var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
+const _excluded$e = ["fixTitleMargin"],
+  _excluded2$2 = ["sticky", "isSticky"],
+  _excluded3$1 = ["className", "style", "skipWrap", "wrapChildren", "stickyFooter", "fixTitleMargin", "skipCloseIcon", "isLoading", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions", "container", "onClose"],
+  _excluded4$1 = ["tagAs"];
+var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10;
 const DialogIcon = /*#__PURE__*/styled__default["default"](Icon).withConfig({
   displayName: "Dialog__DialogIcon",
   componentId: "sc-gai4ey-0"
@@ -1707,14 +1845,31 @@ const DialogContent = /*#__PURE__*/styled__default["default"](props => /*#__PURE
   displayName: "Dialog__DialogContent",
   componentId: "sc-gai4ey-3"
 })(["outline:none;width:100%;position:relative;min-height:5rem;", " ", " p{font-size:14px;}"], props => props.icon && styled.css(["padding-right:8rem;min-height:6rem;"]), props => props.illustration && styled.css(["padding-right:15rem;", ""], utils.media.mobile(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default["default"](["\n        padding-right: 1.5rem;\n      "])))));
-const DialogTitle = /*#__PURE__*/styled__default["default"].h2.withConfig({
+
+// 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 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let props = _objectWithoutProperties__default["default"](_ref, _excluded$e);
+  return /*#__PURE__*/React__default["default"].createElement("h2", _extends__default["default"]({
+    ref: ref
+  }, props));
+});
+const DialogTitle = /*#__PURE__*/styled__default["default"](TitleBase).withConfig({
   displayName: "Dialog__DialogTitle",
   componentId: "sc-gai4ey-4"
 })(["margin-bottom:1rem;padding-bottom:1rem;", " ", ""], props => props.fixTitleMargin && "\n      padding-bottom: 0;\n    ", utils.media.mobile(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default["default"](["\n      font-size: 19px;\n    "]))));
-const DialogFooter = /*#__PURE__*/styled__default["default"].div.withConfig({
+
+// Mesma razão do TitleBase acima: sticky/isSticky só existem pro template, tiram-se antes do DOM.
+const FooterBase = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+  let props = _objectWithoutProperties__default["default"](_ref2, _excluded2$2);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref
+  }, props));
+});
+const DialogFooter = /*#__PURE__*/styled__default["default"](FooterBase).withConfig({
   displayName: "Dialog__DialogFooter",
   componentId: "sc-gai4ey-5"
-})(["display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", " ", " ", ":not(.styled-button-colored){background:", ";color:", ";&:hover{background:", ";}&:active{background:", ";}}"], props => props.sticky && styled.css(["position:sticky;background:white;width:inherit;z-index:50;", " ", " ", ""], utils.media.desktop(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral__default["default"](["\n        bottom: -3rem;\n        margin-left: -2rem;\n        margin-right: -2rem;\n        margin-bottom: -1.5rem;\n        margin-top: 0.5rem;\n        padding: 1.5rem 2rem;\n        border-radius: 0 0 1rem 1rem;\n      "]))), utils.media.mobile(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral__default["default"](["\n        bottom: -0.5rem;\n        padding: 0.75rem 1.75rem;\n        margin-bottom: -1rem;\n        margin-left: -1.75rem;\n        margin-right: -1.75rem;\n      "]))), props => props.isSticky && "\n        box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);\n        border-radius: 0;\n      "), utils.media.max(370)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default["default"](["\n      ", " {\n        min-width: unset;\n        padding-left: 1.25rem;\n        padding-right: 1.25rem;\n      }\n    "])), Button), Button, props => polished.darken(0.03, utils.getColor('bluishGray')(props)), utils.getColor('gray90'), props => polished.darken(0.06, utils.getColor('bluishGray')(props)), props => polished.darken(0.09, utils.getColor('bluishGray')(props)));
+})(["display:block;padding-top:1rem;margin-top:1rem;align-items:stretch;text-align:right;", " ", " ", ":not(.styled-button-colored){background:", ";color:", ";&:hover{background:", ";}&:active{background:", ";}}"], props => props.sticky && styled.css(["position:sticky;background:white;width:inherit;z-index:50;", " ", " ", ""], props => props.isSticky && "\n        box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);\n        border-radius: 0;\n      ", utils.media.desktop(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral__default["default"](["\n        bottom: -3rem;\n        margin-left: -2rem;\n        margin-right: -2rem;\n        margin-bottom: -1.5rem;\n        margin-top: 0.5rem;\n        padding: 1.5rem 2rem;\n        border-radius: 0 0 1rem 1rem;\n      "]))), utils.media.mobile(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral__default["default"](["\n        bottom: -0.5rem;\n        padding: 0.75rem 1.75rem;\n        margin-bottom: -1rem;\n        margin-left: -1.75rem;\n        margin-right: -1.75rem;\n      "])))), utils.media.max(370)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default["default"](["\n      ", " {\n        min-width: unset;\n        padding-left: 1.25rem;\n        padding-right: 1.25rem;\n      }\n    "])), Button), Button, props => polished.darken(0.03, utils.getColor('bluishGray')(props)), utils.getColor('gray90'), props => polished.darken(0.06, utils.getColor('bluishGray')(props)), props => polished.darken(0.09, utils.getColor('bluishGray')(props)));
 const FooterAuxiliaryContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "Dialog__FooterAuxiliaryContainer",
   componentId: "sc-gai4ey-6"
@@ -1725,16 +1880,17 @@ const FooterAuxiliaryContainer = /*#__PURE__*/styled__default["default"].div.wit
 const DialogContentWrapper = /*#__PURE__*/styled__default["default"](LoadingDiv).withConfig({
   displayName: "Dialog__DialogContentWrapper",
   componentId: "sc-gai4ey-7"
-})(["padding:2rem;margin:-2rem;", ""], utils.media.mobile(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default["default"](["\n    padding: 1.75rem;\n    margin: -1.75rem;\n  "]))));
+})(["padding:2rem;margin:-2rem;", ""], utils.media.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n    padding: 1.75rem;\n    margin: -1.75rem;\n  "]))));
 const DialogAlwaysVisibleDiv = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "Dialog__DialogAlwaysVisibleDiv",
   componentId: "sc-gai4ey-8"
 })(["padding:2rem 2rem 0;margin:-2rem;", ""], utils.media.mobile(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default["default"](["\n    padding: 1.75rem 1.75rem 0;\n    margin: -1.75rem;\n  "]))));
 // END
 
-const Dialog = /*#__PURE__*/styled__default["default"](/*#__PURE__*/React__default["default"].forwardRef((_ref, outerRef) => {
+const DialogInner = /*#__PURE__*/React__default["default"].forwardRef((_ref3, outerRef) => {
   let {
       className,
+      style,
       skipWrap,
       wrapChildren,
       stickyFooter,
@@ -1750,8 +1906,8 @@ const Dialog = /*#__PURE__*/styled__default["default"](/*#__PURE__*/React__defau
       auxiliarActions,
       container = true,
       onClose
-    } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$e);
+    } = _ref3,
+    props = _objectWithoutProperties__default["default"](_ref3, _excluded3$1);
   const ref = core.useEnsureRef(outerRef);
   const [WithIsSticky] = willUseIsSticky();
   const handleClose = React__default["default"].useCallback(async () => {
@@ -1778,6 +1934,7 @@ const Dialog = /*#__PURE__*/styled__default["default"](/*#__PURE__*/React__defau
   }, auxiliarActions && /*#__PURE__*/React__default["default"].createElement(FooterAuxiliaryContainer, null, utils.callIfFunction(auxiliarActions)), utils.callIfFunction(footer)), sentinel())));
   const dialog = confirmCloseDialog => /*#__PURE__*/React__default["default"].createElement("div", {
     className: className + " JS-has-wc JS-dialog",
+    style: style,
     ref: ref
   }, skipWrap ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, alwaysVisible(confirmCloseDialog), content) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DialogAlwaysVisibleDiv, null, alwaysVisible(confirmCloseDialog)), /*#__PURE__*/React__default["default"].createElement(DialogContentWrapper, {
     isLoading: isLoading
@@ -1787,23 +1944,37 @@ const Dialog = /*#__PURE__*/styled__default["default"](/*#__PURE__*/React__defau
     ref: ref,
     title: title,
     closeDialog: handleClose
-  }), _ref2 => {
+  }), _ref4 => {
     let {
       confirmCloseDialog
-    } = _ref2;
+    } = _ref4;
     return dialog(confirmCloseDialog);
   }) : dialog(handleClose);
-})).withConfig({
+});
+
+// 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 = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref) => {
+  let {
+      tagAs: Tag = DialogInner
+    } = _ref5,
+    props = _objectWithoutProperties__default["default"](_ref5, _excluded4$1);
+  return /*#__PURE__*/React__default["default"].createElement(Tag, _extends__default["default"]({
+    ref: ref
+  }, props));
+});
+const Dialog = /*#__PURE__*/styled__default["default"](DialogTagAs).withConfig({
   displayName: "Dialog",
   componentId: "sc-gai4ey-9"
-})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:24px;padding:2rem;background-color:white;width:100%;max-width:45rem;", " margin:auto;position:relative;align-self:baseline;display:block;> h3:first-child{margin-top:0.5rem;}p{line-height:140%;}", " ", " ", ""], props => props.$maxWidth && styled.css(["max-width:", ";"], props.$maxWidth), utils.media.mobile(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n    padding: 1.75rem;\n    max-width: 100%;\n    ", ";\n  "])), props => props.fullscreenOnMobile && "\n      border-radius: 0;\n      min-height: 100%;\n    "), props => props.closeDialog && styled.css(["", "{padding-right:2rem;}"], DialogTitle), utils.customTheme('Dialog'));
+})(["@supports (position:sticky){will-change:transform,opacity;&.JS-wc-off{will-change:auto;}}border-radius:24px;padding:2rem;background-color:white;width:100%;max-width:45rem;", " margin:auto;position:relative;align-self:baseline;display:block;overflow:clip;> h3:first-child{margin-top:0.5rem;}p{line-height:140%;}", " ", " ", ""], props => props.$maxWidth && styled.css(["max-width:", ";"], props => props.$maxWidth), utils.media.mobile(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n    padding: 1.75rem;\n    max-width: 100%;\n    ", ";\n  "])), props => props.fullscreenOnMobile && "\n      border-radius: 0;\n      min-height: 100%;\n    "), props => props.closeDialog && styled.css(["", "{padding-right:2rem;}"], DialogTitle), utils.customTheme('Dialog'));
 const ConfirmDialog = props => /*#__PURE__*/React__default["default"].createElement(Dialog, _extends__default["default"]({}, props, {
   placement: "Confirm-Dialog"
 }), props.children);
-const DefaultConfirmDialog = props => /*#__PURE__*/React__default["default"].createElement(core.StartlibsConsumer, null, _ref3 => {
+const DefaultConfirmDialog = props => /*#__PURE__*/React__default["default"].createElement(core.StartlibsConsumer, null, _ref6 => {
   let {
     confirmDialogLabels
-  } = _ref3;
+  } = _ref6;
   const handleCancel = async () => {
     if (props.onCancel) props.onCancel();
     if (props.onClose) await props.onClose().catch(console.error);
@@ -1838,26 +2009,26 @@ const DialogErrorBadge = /*#__PURE__*/styled__default["default"].div.withConfig(
   displayName: "Dialog__DialogErrorBadge",
   componentId: "sc-gai4ey-11"
 })(["width:72px;height:72px;margin:0 auto 1.5rem;border-radius:50%;background:rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;", "{font-size:40px;color:rgba(0,0,0,0.4);}"], Icon);
-const DialogErrorContent = _ref4 => {
+const DialogErrorContent = _ref7 => {
   let {
     closeDialog,
     onClose,
     title
-  } = _ref4;
+  } = _ref7;
   const handleClose = React__default["default"].useCallback(async () => {
     if (onClose) await onClose().catch(console.error);
     if (closeDialog) closeDialog();
   }, [onClose, closeDialog]);
-  return /*#__PURE__*/React__default["default"].createElement(core.StartlibsConsumer, null, _ref5 => {
+  return /*#__PURE__*/React__default["default"].createElement(core.StartlibsConsumer, null, _ref8 => {
     let {
       ErrorDialog: {
         title,
         content,
         close
       }
-    } = _ref5;
+    } = _ref8;
     return /*#__PURE__*/React__default["default"].createElement(Dialog, {
-      as: "div",
+      tagAs: "div",
       $maxWidth: "30rem"
     }, closeDialog && /*#__PURE__*/React__default["default"].createElement(CloseIcon$1, {
       onClick: handleClose
@@ -1872,21 +2043,21 @@ const DialogErrorContent = _ref4 => {
     }, close))));
   });
 };
-const DialogError = _ref6 => {
+const DialogError = _ref9 => {
   let {
     closeDialog,
     onClose
-  } = _ref6;
+  } = _ref9;
   const handleClose = React__default["default"].useCallback(async () => {
     if (onClose) await onClose().catch(console.error);
     if (closeDialog) closeDialog();
   }, [onClose, closeDialog]);
-  return /*#__PURE__*/React__default["default"].createElement(core.StartlibsConsumer, null, _ref7 => {
+  return /*#__PURE__*/React__default["default"].createElement(core.StartlibsConsumer, null, _ref10 => {
     let {
       ErrorDialog: {
         title
       }
-    } = _ref7;
+    } = _ref10;
     return /*#__PURE__*/React__default["default"].createElement(Dialog, {
       closeDialog: handleClose,
       title: title
@@ -2262,17 +2433,17 @@ const SwitchContainer = _ref2 => {
   }, utils.callIfFunction(children));
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const NotificationContainer$1 = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToastNotifications__NotificationContainer",
   componentId: "sc-inycsj-0"
-})(["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;", " ", " ::-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;}", " ", ""], utils.media.desktop(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default["default"](["\n    padding-bottom: 1.5rem;\n  "]))), utils.media.mobile(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default["default"](["\n    padding-bottom: 0.75rem;\n  "]))), utils.media.desktop(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default["default"](["\n    &.JS-dialog-open {\n      right: 2.75rem;\n    }\n  "]))), utils.media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default["default"](["\n    left: 0.75rem;\n    right: 0.75rem;\n  "]))));
+})(["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;", " ", " &::-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;}", " ", ""], utils.media.desktop(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default["default"](["\n    padding-bottom: 1.5rem;\n  "]))), utils.media.mobile(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default["default"](["\n    padding-bottom: 0.75rem;\n  "]))), utils.media.desktop(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default["default"](["\n    &.JS-dialog-open {\n      right: 2.75rem;\n    }\n  "]))), utils.media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default["default"](["\n    left: 0.75rem;\n    right: 0.75rem;\n  "]))));
 const ToastBox = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToastNotifications__ToastBox",
   componentId: "sc-inycsj-1"
-})(["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;", " ", " ", ""], utils.media.desktop(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n    background: ", ";\n    max-width: 300px;\n  "])), props => polished.rgba(utils.getColor(props.type)(props), utils.ifUndefined(props.opacity, 0.7))), utils.media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n    background: ", ";\n  "])), props => polished.rgba(utils.getColor(props.type)(props), utils.ifUndefined(props.opacity, 0.8))), props => styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["background: ", ";"])), utils.getColor(props.type)));
+})(["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;", " ", " ", ""], props => styled.css(["background:", ";"], utils.getColor(props.type)), utils.media.desktop(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n    background: ", ";\n    max-width: 300px;\n  "])), props => polished.rgba(utils.getColor(props.type)(props), utils.ifUndefined(props.opacity, 0.7))), utils.media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n    background: ", ";\n  "])), props => polished.rgba(utils.getColor(props.type)(props), utils.ifUndefined(props.opacity, 0.8))));
 const NotificationTitleContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToastNotifications__NotificationTitleContainer",
   componentId: "sc-inycsj-2"
@@ -2284,20 +2455,26 @@ const NotificationTitle = /*#__PURE__*/styled__default["default"].div.withConfig
 const NotificationContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToastNotifications__NotificationContent",
   componentId: "sc-inycsj-4"
-})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""], utils.media.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n    justify-content: center;\n  "]))));
+})(["display:flex;align-items:center;text-align:left;padding:1rem 1.5rem;", ""], utils.media.mobile(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n    justify-content: center;\n  "]))));
+// Task 13c: substitui a prop JSX `css="min-width: 0;"` (R13 proíbe essa forma no yak) por um
+// styled component equivalente.
+const NotificationContentBody = /*#__PURE__*/styled__default["default"].div.withConfig({
+  displayName: "ToastNotifications__NotificationContentBody",
+  componentId: "sc-inycsj-5"
+})(["min-width:0;"]);
 const NotificationIconWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToastNotifications__NotificationIconWrapper",
-  componentId: "sc-inycsj-5"
+  componentId: "sc-inycsj-6"
 })(["margin-right:1rem;position:relative;width:36px;text-align:center;flex-shrink:0;", "{font-size:", "px;}"], Icon, props => props.isLoading ? 22 : props.iconFontSize || 40);
 const CloseIcon = /*#__PURE__*/styled__default["default"](Icon).attrs({
   icon: 'x'
 }).withConfig({
   displayName: "ToastNotifications__CloseIcon",
-  componentId: "sc-inycsj-6"
-})(["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;}"]);
+  componentId: "sc-inycsj-7"
+})(["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 = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToastNotifications__NotificationDetails",
-  componentId: "sc-inycsj-7"
+  componentId: "sc-inycsj-8"
 })(["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] = core.willUseSharedState([]);
 const formatNotification = (notification, extra) => _isObject__default["default"](notification) ? _objectSpread$4(_objectSpread$4(_objectSpread$4({}, notification), extra), {}, {
@@ -2421,7 +2598,7 @@ const ToastNotifications = () => {
       size: 36,
       white: true,
       absolute: true
-    })), /*#__PURE__*/React__default["default"].createElement(_StyledDiv, null, utils.callIfFunction(notification.content, closeWithLock))), notification.details && /*#__PURE__*/React__default["default"].createElement(NotificationDetails, {
+    })), /*#__PURE__*/React__default["default"].createElement(NotificationContentBody, null, utils.callIfFunction(notification.content, closeWithLock))), notification.details && /*#__PURE__*/React__default["default"].createElement(NotificationDetails, {
       onClick: utils.constrainEvent()
     }, notification.details)));
   }))));
@@ -2454,10 +2631,6 @@ const useNotificationContainerWidthLock = containerRef => {
     unlockWidth
   };
 };
-var _StyledDiv = /*#__PURE__*/styled__default["default"]("div").withConfig({
-  displayName: "ToastNotifications___StyledDiv",
-  componentId: "sc-inycsj-8"
-})(["min-width:0;"]);
 
 const _excluded$a = ["content", "type", "marginTop"];
 var _templateObject$3, _templateObject2$2, _templateObject3$2;
@@ -2484,7 +2657,7 @@ const PersistentNotificationCloseIcon = /*#__PURE__*/styled__default["default"](
 }).withConfig({
   displayName: "PersistentNotifications__PersistentNotificationCloseIcon",
   componentId: "sc-1t7i0dh-4"
-})(["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:", ";background:", ";:hover{background:", ";}:active{background:", ";}"], props => props.type && props.type !== 'main' ? utils.getColor(props.type)(props) : polished.darken(0.1, utils.getColor("main")(props)), props => polished.transparentize(0.90, utils.getColor(props.type || "main")(props)), props => polished.transparentize(0.85, utils.getColor(props.type || "main")(props)), props => polished.transparentize(0.82, utils.getColor(props.type || "main")(props)));
+})(["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:", ";background:", ";&:hover{background:", ";}&:active{background:", ";}"], props => props.type && props.type !== 'main' ? utils.getColor(props.type)(props) : polished.darken(0.1, utils.getColor("main")(props)), props => polished.transparentize(0.90, utils.getColor(props.type || "main")(props)), props => polished.transparentize(0.85, utils.getColor(props.type || "main")(props)), props => polished.transparentize(0.82, utils.getColor(props.type || "main")(props)));
 const [useNotifications,, setNotifications] = core.willUseSharedState([]);
 const openPersistentNotification = notification => {
   const newNotification = _objectSpread$3({
@@ -3951,7 +4124,15 @@ const slideRight = utils.oneWayAnimation('transform: translateX(-10px)', 'transf
 const slideLeftOnLeft = utils.oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none');
 utils.animationTiming('0.2s ease-out');
 const areComponentsEqual = (a, b) => a === b;
-const ListItem = /*#__PURE__*/styled__default["default"].li.withConfig({
+
+// 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.
+const ListItem = /*#__PURE__*/styled__default["default"].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(' ')
+  } : {};
+}).withConfig({
   displayName: "ContextMenu__ListItem",
   componentId: "sc-13y1vvt-0"
 })(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:", "px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], props => props.hasSubmenu && "\n    & > * {\n      padding-right: 3rem;\n    }\n  ", Icon, props => props.iconSize || 23, utils.media.mobile(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default["default"](["\n    font-size: 15px;\n    & > * {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n    ", ", .icon {\n      font-size: ", "px;\n    }\n  "])), Icon, props => (props.iconSize || 23) + 2), utils.ifProp('hover', styled.css(["& > a,& > label{background:", ";color:", ";}"], props => polished.transparentize(0.88, utils.getColor("main")(props)), props => polished.darken(0.03, utils.getColor("main")(props)))), utils.ifProp('highlight', styled.css(["color:", ";"], utils.getColor('main'))), utils.ifProp('noActions', "\n    max-width: 17rem;\n    color: rgba(0,0,0,0.4);\n    pointer-events: none;\n    text-align: center;\n    white-space: normal;\n  "), utils.ifProp('withButton', styled.css(["padding:0.25rem 1rem;", "{width:100%;color:white;font-weight:500;padding:10px 1.25rem;", "}"], Button, utils.media.mobile(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default["default"](["\n        padding: 13px 1.25rem;\n      "]))))), utils.ifProp('smallPaddingRight', styled.css(["& > *{padding-right:1.5rem;}"])), utils.customTheme('ListItem'));
@@ -3982,8 +4163,16 @@ const ListSeparator = /*#__PURE__*/styled__default["default"].li.withConfig({
 const ListHeading = /*#__PURE__*/styled__default["default"].li.withConfig({
   displayName: "ContextMenu__ListHeading",
   componentId: "sc-13y1vvt-7"
-})(["display:flex;align-items:center;padding:.5rem 1rem;color:rgba(0,0,0,0.4);font-size:12px;text-transform:uppercase;:after{content:'';flex-grow:1;margin-left:0.75rem;height:1px;background:rgba(0,0,0,0.15);}"]);
-const SubmenuArrowIcon = utils.styledExtend(Icon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  font-size: 13px;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3rem;\n  text-align: center;\n"])));
+})(["display:flex;align-items:center;padding:.5rem 1rem;color:rgba(0,0,0,0.4);font-size:12px;text-transform:uppercase;&:after{content:'';flex-grow:1;margin-left:0.75rem;height:1px;background:rgba(0,0,0,0.15);}"]);
+
+/* 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 = utils.styledExtend(Icon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  font-size: 13px !important;\n  position: absolute;\n  left: auto !important;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3rem !important;\n  padding-left: 0 !important;\n  text-align: center;\n"])));
 class SimpleLi extends React__default["default"].Component {
   constructor() {
     super(...arguments);
@@ -4286,7 +4475,7 @@ const ContextMenuComponent = /*#__PURE__*/React.forwardRef((_ref2, unesuredRef)
     let sum = 0;
     React__default["default"].Children.forEach(children, child => {
       if (child && !child.props.disabled && !child.props.readOnly) {
-        if (!styled.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) {
@@ -4306,7 +4495,7 @@ const ContextMenuComponent = /*#__PURE__*/React.forwardRef((_ref2, unesuredRef)
     let indexRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       current: 0
     };
-    return React__default["default"].Children.map(children, (child, j) => child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? /*#__PURE__*/React__default["default"].cloneElement(child, child.props, formatChildren(child.props.children, indexRef)) : !styled.isStyledComponent(child.type) && !reactIs.isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+    return React__default["default"].Children.map(children, (child, j) => child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? /*#__PURE__*/React__default["default"].cloneElement(child, child.props, formatChildren(child.props.children, indexRef)) : !reactIs.isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? /*#__PURE__*/React__default["default"].cloneElement(child, {
       fixedPosition: props.fixed,
       hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
       hoverCursor: hoverCursor,
@@ -4380,7 +4569,7 @@ ContextMenu.ListItem = ListItem;
 const LoadingBar = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "PageLoader__LoadingBar",
   componentId: "sc-96jeob-0"
-})(["width:100%;border-radius:0 1px 1px 0;height:4px;position:fixed;background:", ";transform:translateX(-100%);", " left:0;z-index:99999;box-shadow:", ";", " ", ""], props => props.bottom ? styled.css(["", ""], utils.getColor('main')) : "#84D359", props => props.bottom ? "bottom:69px;" : "top: 0;", 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 && "\n    transform: translateX(-30%);\n    transition: transform 1.5s ease;\n  ", props => props.closing && "\n    transform: translateX(0);\n    transition: transform 0.3s ease-in;\n  ");
+})(["width:100%;border-radius:0 1px 1px 0;height:4px;position:fixed;background:", ";transform:translateX(-100%);", " left:0;z-index:99999;box-shadow:", ";", " ", ""], props => props.bottom ? utils.getColor('main') : "#84D359", props => props.bottom ? "bottom:69px;" : "top: 0;", 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 && "\n    transform: translateX(-30%);\n    transition: transform 1.5s ease;\n  ", props => props.closing && "\n    transform: translateX(0);\n    transition: transform 0.3s ease-in;\n  ");
 const PageLoader = _ref => {
   let {
     isLoading
@@ -4746,9 +4935,9 @@ var _templateObject$1;
 const DialogWithImageHeader = /*#__PURE__*/styled__default["default"](Dialog).withConfig({
   displayName: "DialogWithImageHeader",
   componentId: "sc-1f1ry4g-0"
-})(["max-width:51rem;", "{background:", ";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;}", "}"], CloseIcon$1, utils.getColor('gray240'), utils.media.mobile(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default["default"](["\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -1rem;\n      }\n    "]))));
+})(["max-width:51rem;", "{background:", ";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;}", "}"], CloseIcon$1, utils.getColor('gray240'), utils.media.mobile(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default["default"](["\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -1rem;\n      }\n    "]))));
 
-const _excluded$1 = ["className", "tabIsOpen", "menuIsOpen", "sidebar", "Content", "openTab", "children", "title"];
+const _excluded$1 = ["className", "style", "tabIsOpen", "menuIsOpen", "sidebar", "Content", "openTab", "children", "title"];
 var _templateObject, _templateObject2, _templateObject3;
 const SideMenu = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "DialogWithSidebar__SideMenu",
@@ -4757,7 +4946,7 @@ const SideMenu = /*#__PURE__*/styled__default["default"].div.withConfig({
 const DialogTabMenu = /*#__PURE__*/styled__default["default"].ul.withConfig({
   displayName: "DialogWithSidebar__DialogTabMenu",
   componentId: "sc-suvg9r-1"
-})(["cursor:default;overflow:auto;text-align:left;color:inherit;user-select:none;li{position:relative;padding:1rem 2rem 1rem 4.1rem;font-size:14px;", ":hover{background-color:", ";cursor:pointer;}&.selected{color:", ";background:rgba(0,132,214,0.125);pointer-events:none;}}.icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:3rem;text-align:center;line-height:0;font-size:26px;}", ""], utils.media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n      font-size: 16px;\n    "]))), utils.getColor('bluishGray'), utils.getColor('main'), props => props.menuTabIsOpen && "\n    li {\n      padding: 1.25rem 2rem 1.25rem 3.25rem;\n      border-radius: 6px\n    }\n    .icon{\n      left: 0;\n    }\n  ");
+})(["cursor:default;overflow:auto;text-align:left;color:inherit;user-select:none;li{position:relative;padding:1rem 2rem 1rem 4.1rem;font-size:14px;", " &:hover{background-color:", ";cursor:pointer;}&.selected{color:", ";background:rgba(0,132,214,0.125);pointer-events:none;}}.icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:3rem;text-align:center;line-height:0;font-size:26px;}", ""], utils.media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n      font-size: 16px;\n    "]))), utils.getColor('bluishGray'), utils.getColor('main'), props => props.menuTabIsOpen && "\n    li {\n      padding: 1.25rem 2rem 1.25rem 3.25rem;\n      border-radius: 6px;\n    }\n    .icon{\n      left: 0;\n    }\n  ");
 const [fadeIn, relativeFadeout] = utils.twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;');
 const absoluteOnLeave = utils.oneWayAnimation('position: absolute;', 'position: absolute;');
 const fadeOut = [absoluteOnLeave, relativeFadeout];
@@ -4767,6 +4956,7 @@ const MENU_TAB = '$menu$';
 const DialogWithSidebarPresentation = _ref => {
   let {
       className,
+      style,
       tabIsOpen,
       menuIsOpen,
       sidebar,
@@ -4789,6 +4979,7 @@ const DialogWithSidebarPresentation = _ref => {
     } = _ref2;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: className + " JS-has-wc",
+      style: style,
       ref: ref
     }, props.closeDialog && /*#__PURE__*/React__default["default"].createElement(CloseIcon$1, {
       onClick: confirmCloseDialog
@@ -4832,9 +5023,11 @@ const TabContent = _ref3 => {
     className: "dialog-content"
   }, utils.callIfFunction(Content, tab), utils.callIfFunction(children, tab));
 };
+
+// R6: "as" não existe no yak. Dialog expõe "tagAs" no lugar (ver Dialog.jsx).
 const DialogWithSidebar = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/React__default["default"].createElement(Dialog, _extends__default["default"]({
   fullscreenOnMobile: true,
-  as: DialogWithSidebarPresentation
+  tagAs: DialogWithSidebarPresentation
 }, props))).withConfig({
   displayName: "DialogWithSidebar",
   componentId: "sc-suvg9r-2"
@@ -4844,7 +5037,7 @@ const _excluded = ["className", "footer", "Content", "children", "title", "illus
 const MobileBubbleDialogFooter = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "MobileBubbleDialog__MobileBubbleDialogFooter",
   componentId: "sc-riqrem-0"
-})(["background-color:", ";min-height:5rem;color:", ";font-size:13px;font-weight:500;text-transform:uppercase;padding:1rem;user-select:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border-bottom-left-radius:10px;border-bottom-right-radius:10px;:active{background:rgb(232,232,232);}"], utils.getColor('gray240'), utils.getColor('main'));
+})(["background-color:", ";min-height:5rem;color:", ";font-size:13px;font-weight:500;text-transform:uppercase;padding:1rem;user-select:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border-bottom-left-radius:10px;border-bottom-right-radius:10px;&:active{background:rgb(232,232,232);}"], utils.getColor('gray240'), utils.getColor('main'));
 const MobileBubbleDialog = /*#__PURE__*/styled__default["default"](_ref => {
   let {
       className,
@@ -4882,7 +5075,7 @@ const MobileBubbleDialog = /*#__PURE__*/styled__default["default"](_ref => {
 const BasicBulletList = /*#__PURE__*/styled__default["default"].ul.withConfig({
   displayName: "BasicBulletList",
   componentId: "sc-1u3hhup-0"
-})(["margin-bottom:0;font-size:13px;li{margin-top:4px;padding-left:1rem;position:relative;:before{content:'\u2022';font-size:17px;line-height:0;position:absolute;left:0;top:7px;}}"]);
+})(["margin-bottom:0;font-size:13px;li{margin-top:4px;padding-left:1rem;position:relative;&:before{content:'\u2022';font-size:17px;line-height:0;position:absolute;left:0;top:7px;}}"]);
 
 Object.defineProperty(exports, 'useBrowserLocation', {
   enumerable: true,