@startlibs/form 1.1.3 → 1.2.0-rc.1

package/lib/index.cjs

@@ -235,33 +235,43 @@ const Errors = _ref9 => {
   }, [uniqErrors]);
   return /*#__PURE__*/React__default["default"].createElement(components.TransitionDiv, {
     block: true
-  }, uniqErrors.length > 0 && /*#__PURE__*/React__default["default"].createElement(Errors.Container, {
+  }, uniqErrors.length > 0 && /*#__PURE__*/React__default["default"].createElement(ErrorsContainer, {
     ref: ref,
     className: className
   }, uniqErrors.map(_ref1 => {
     let [value] = _ref1;
-    return value && value !== true && /*#__PURE__*/React__default["default"].createElement(Errors.Item, {
+    return value && value !== true && /*#__PURE__*/React__default["default"].createElement(ErrorsItem, {
       key: value
-    }, value, /*#__PURE__*/React__default["default"].createElement(Errors.CloseIcon, {
+    }, value, /*#__PURE__*/React__default["default"].createElement(ErrorsCloseIcon, {
       onClick: willRemoveError(value, path)
     }));
   })));
 };
 Errors.displayName = 'Errors';
-Errors.Container = styled__default["default"].ul.withConfig({
-  displayName: "Errors__Container",
+
+// Nomes próprios (não `Errors.Container = ...`) porque o yak resolve `${Errors.Item}` num outro
+// arquivo tentando avaliar o módulo inteiro de `Errors` (um componente React de verdade, com
+// hooks) em tempo de build — e falha ("rename Errors.mjs so its exports run at build time (or
+// replace Errors.Item with a literal value)"). Um export próprio resolve direto, sem depender do
+// componente. `Errors.Container`/`Errors.Item`/`Errors.CloseIcon` continuam existindo (uso
+// interno e compatibilidade de quem já importa `Errors` e lê essas propriedades).
+const ErrorsContainer = /*#__PURE__*/styled__default["default"].ul.withConfig({
+  displayName: "Errors__ErrorsContainer",
   componentId: "sc-1vuw7bx-0"
 })(["list-style-type:none;margin:0;padding:0;"]);
-Errors.Item = styled__default["default"].li.withConfig({
-  displayName: "Errors__Item",
+const ErrorsItem = /*#__PURE__*/styled__default["default"].li.withConfig({
+  displayName: "Errors__ErrorsItem",
   componentId: "sc-1vuw7bx-1"
 })(["background-color:", ";padding:1rem 3.5rem 1rem 1rem;border-radius:8px;border:1px solid ", ";color:", ";position:relative;text-align:left;font-size:13px;line-height:130%;& ~ &{margin-top:0.5rem;}", ""], props => polished.lighten(0.42, props.theme.colors.alert), props => polished.lighten(0.35, props.theme.colors.alert), utils.getColor('alert'), utils.customTheme('ErrorItem'));
-Errors.CloseIcon = styled__default["default"](components.Icon).attrs({
+const ErrorsCloseIcon = /*#__PURE__*/styled__default["default"](components.Icon).attrs({
   icon: 'x'
 }).withConfig({
-  displayName: "Errors__CloseIcon",
+  displayName: "Errors__ErrorsCloseIcon",
   componentId: "sc-1vuw7bx-2"
 })(["color:", ";font-weight:600;display:inline-block;background-color:", ";width:21px;height:21px;line-height:21px;text-align:center;border-radius:50%;cursor:pointer;position:absolute;top:10px;right:10px;font-size:14px;z-index:2;&:hover{background-color:", ";}"], utils.getColor('alert'), props => polished.lighten(0.35, props.theme.colors.alert), props => polished.lighten(0.32, props.theme.colors.alert));
+Errors.Container = ErrorsContainer;
+Errors.Item = ErrorsItem;
+Errors.CloseIcon = ErrorsCloseIcon;
 
 const useDraftConfirmation = (submit, discard, meta) => {
   const loading = core.useToggle();
@@ -747,8 +757,13 @@ const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "Field__Container",
   componentId: "sc-p9woft-1"
 })(["position:relative;margin-bottom:", ";text-align:left;"], props => utils.getMargin(props.theme.Field.margins)(props));
-const Label = /*#__PURE__*/styled__default["default"].label.withConfig({
-  displayName: "Field__Label",
+// Nome próprio (não só `Field.Label = ...`): TextInput.jsx usa `${Field.Label}` como seletor
+// (FloatingFieldType) num ARQUIVO DIFERENTE, e o yak tenta resolver isso avaliando o módulo
+// inteiro de `Field` (um componente React de verdade) em tempo de build — falha com um
+// `undefined` na saída (mesmo problema do Errors.Item, ver Errors.jsx). `Field.Label` continua
+// existindo (uso interno e compatibilidade).
+const FieldLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
+  displayName: "Field__FieldLabel",
   componentId: "sc-p9woft-2"
 })(["font-weight:550;display:inline-block;font-size:", "px;margin-bottom:.75rem;", " ", ""], props => props.labelFontSize ? props.labelFontSize : '15', props => props.isOnImage && 'color: #fff;', utils.customTheme("FieldLabel"));
 const HelpText = /*#__PURE__*/styled__default["default"].span.withConfig({
@@ -782,14 +797,14 @@ const Field = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
     ref: ref
   }, rest, {
     className: className
-  }), label && /*#__PURE__*/React__default["default"].createElement(Label, _extends__default["default"]({}, rest, {
+  }), label && /*#__PURE__*/React__default["default"].createElement(FieldLabel, _extends__default["default"]({}, rest, {
     onClick: labelClick,
     labelFontSize: labelFontSize
   }), label, mandatory && /*#__PURE__*/React__default["default"].createElement(Mandatory, {
     mandatory: mandatory
   }, "*"), helpText && /*#__PURE__*/React__default["default"].createElement(HelpText, null, " ", helpText), descText && /*#__PURE__*/React__default["default"].createElement(FieldDescription, null, descText)), children, bellowDescText && /*#__PURE__*/React__default["default"].createElement(BellowFieldDescription, null, bellowDescText));
 });
-Field.Label = Label;
+Field.Label = FieldLabel;
 Field.Container = Container;
 Field.HelpText = HelpText;
 Field.Description = FieldDescription;
@@ -818,13 +833,13 @@ const DeleteButton = /*#__PURE__*/styled__default["default"](components.Icon).at
 }).withConfig({
   displayName: "FieldBox__DeleteButton",
   componentId: "sc-18ntu84-4"
-})(["width:24px;height:24px;line-height:24px;border-radius:50%;display:inline-block;font-size:18px;margin-left:0.75rem;text-align:center;cursor:pointer;color:", ";background-color:rgba(0,0,0,0.08);flex-shrink:0;:hover{background:rgba(0,0,0,0.11);}:active{background:rgba(0,0,0,0.13);}"], utils.getColor('gray120'));
+})(["width:24px;height:24px;line-height:24px;border-radius:50%;display:inline-block;font-size:18px;margin-left:0.75rem;text-align:center;cursor:pointer;color:", ";background-color:rgba(0,0,0,0.08);flex-shrink:0;&:hover{background:rgba(0,0,0,0.11);}&:active{background:rgba(0,0,0,0.13);}"], utils.getColor('gray120'));
 const DropdownButton = /*#__PURE__*/styled__default["default"](components.Icon).attrs({
   icon: 'arrow-down'
 }).withConfig({
   displayName: "FieldBox__DropdownButton",
   componentId: "sc-18ntu84-5"
-})(["width:24px;height:24px;line-height:24px;border-radius:50%;display:inline-block;font-size:14px;margin-left:0.75rem;text-align:center;cursor:pointer;color:", ";background-color:rgba(0,0,0,0.08);flex-shrink:0;position:relative;:hover{background:rgba(0,0,0,0.11);}:active{background:rgba(0,0,0,0.13);}"], utils.getColor('gray120'));
+})(["width:24px;height:24px;line-height:24px;border-radius:50%;display:inline-block;font-size:14px;margin-left:0.75rem;text-align:center;cursor:pointer;color:", ";background-color:rgba(0,0,0,0.08);flex-shrink:0;position:relative;&:hover{background:rgba(0,0,0,0.11);}&:active{background:rgba(0,0,0,0.13);}"], utils.getColor('gray120'));
 const DescText$3 = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "FieldBox__DescText",
   componentId: "sc-18ntu84-6"
@@ -860,7 +875,7 @@ const FieldBox = /*#__PURE__*/styled__default["default"](_ref => {
 }).withConfig({
   displayName: "FieldBox",
   componentId: "sc-18ntu84-7"
-})(["display:flex;align-items:center;width:100%;background:", ";border-radius:8px;min-height:42px;padding:1rem 1.25rem;align-items:center;font-size:14px;color:", ";position:relative;transition:border-radius 0.5s ease;", " & ~ &{margin-top:0.75rem;}", " ", ",.rightContainer{margin-left:1rem;}"], utils.getColor('lightBluishGray'), utils.getColor('gray60'), props => props.onClick && styled.css(["cursor:pointer;:hover{background:", ";}:active{background:", ";transition:none;}"], props => polished.darken(0.035, utils.getColor('lightBluishGray')(props)), props => polished.darken(0.05, utils.getColor('lightBluishGray')(props))), utils.media.mobile(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default["default"](["\n    min-height: 54px;\n    font-size: 15px !important;\n  "]))), components.TextButton);
+})(["display:flex;align-items:center;width:100%;background:", ";border-radius:8px;min-height:42px;padding:1rem 1.25rem;align-items:center;font-size:14px;color:", ";position:relative;transition:border-radius 0.5s ease;", " & ~ &{margin-top:0.75rem;}", " ", ",.rightContainer{margin-left:1rem;}"], utils.getColor('lightBluishGray'), utils.getColor('gray60'), props => props.onClick && styled.css(["cursor:pointer;&:hover{background:", ";}&:active{background:", ";transition:none;}"], props => polished.darken(0.035, utils.getColor('lightBluishGray')(props)), props => polished.darken(0.05, utils.getColor('lightBluishGray')(props))), utils.media.mobile(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default["default"](["\n    min-height: 54px;\n    font-size: 15px !important;\n  "]))), components.TextButton);
 
 const useConfirmDialog = (dialog, args, toggleCallback) => {
   return components.useDialog(closeDialog => utils.addExtraProp(utils.callIfFunction(dialog, closeDialog), {
@@ -998,11 +1013,11 @@ const InputLoading$1 = /*#__PURE__*/styled__default["default"](components.Loadin
 const Input = /*#__PURE__*/styled__default["default"].input.withConfig({
   displayName: "TextInput__Input",
   componentId: "sc-yzpeng-5"
-})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:8px;outline:0;outline:none;color:", ";background:white;position:relative;height:3rem;padding:0 0.7rem;overflow:auto;", "::-webkit-input-placeholder{color:rgba(0,0,0,0.3);}::-moz-placeholder{color:rgba(0,0,0,0.3);}:-moz-placeholder{color:rgba(0,0,0,0.3);}:-ms-input-placeholder{color:rgba(0,0,0,0.3);}", "::-ms-clear{display:none;}", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.getColor('gray60'), utils.media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default["default"](["\n    height: 42px;\n    padding: 0 1rem;\n    @supports (-webkit-touch-callout: none) {\n      font-size: 16px;\n    }\n  "]))), props => !props.hasTextBox && !props.noFocus && styled.css([":focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", ""], utils.getColor('gray180'), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'))), props => props.locked && styled.css(["padding-right:2.25rem;background:rgba(0,0,0,0.075);pointer-events:none;"]), props => props.isTextArea && styled.css(["resize:none;min-height:", "px;padding:.7rem;display:block;", " ", ""], props => props.regularInputHeight ? 36 : props.minHeight || 60, props => props.autoResize ? 'overflow:hidden;' : 'overflow:auto;', utils.media.mobile(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n      padding: 1rem;\n      ", "\n    "])), props => props.regularInputHeight && 'min-height: 42px;')), props => props.rounded && styled.css(["border-radius:100px;padding-left:1.25rem;padding-right:1.25rem;"]), props => props.hasIcon && styled.css(["padding-left:", ";", ""], props.rounded ? '3rem' : '2.5rem', utils.media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n      padding-left: ", ";\n    "])), props.rounded ? '3.25rem' : '2.75rem')), utils.customTheme('TextInput'));
+})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:8px;outline:0;outline:none;color:", ";background:white;position:relative;height:3rem;padding:0 0.7rem;overflow:auto;&::-webkit-input-placeholder{color:rgba(0,0,0,0.3);}&::-moz-placeholder{color:rgba(0,0,0,0.3);}", " &::-ms-clear{display:none;}", " ", " ", " ", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.getColor('gray60'), props => !props.hasTextBox && !props.noFocus && styled.css(["&:focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", ""], utils.getColor('gray180'), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'))), props => props.locked && styled.css(["padding-right:2.25rem;background:rgba(0,0,0,0.075);pointer-events:none;"]), props => props.isTextArea && styled.css(["resize:none;min-height:", "px;padding:.7rem;display:block;", ""], props => props.regularInputHeight ? 36 : props.minHeight || 60, props => props.autoResize ? 'overflow:hidden;' : 'overflow:auto;'), props => props.rounded && styled.css(["border-radius:100px;padding-left:1.25rem;padding-right:1.25rem;"]), props => props.hasIcon && styled.css(["padding-left:", ";"], props.rounded ? '3rem' : '2.5rem'), utils.media.mobile(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default["default"](["\n    height: 42px;\n    padding: 0 1rem;\n    @supports (-webkit-touch-callout: none) {\n      font-size: 16px;\n    }\n  "]))), props => props.isTextArea && styled.css(["", ""], utils.media.mobile(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n      padding: 1rem;\n      ", "\n    "])), props => props.regularInputHeight && 'min-height: 42px;')), props => props.hasIcon && styled.css(["", ""], utils.media.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n      padding-left: ", ";\n    "])), props.rounded ? '3.25rem' : '2.75rem')), utils.customTheme('TextInput'));
 const InputWithTextBox = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "TextInput__InputWithTextBox",
   componentId: "sc-yzpeng-6"
-})(["display:flex;border-radius:", ";position:relative;:before{position:absolute;border-radius:", ";top:0;bottom:0;right:0;left:0;z-index:2;pointer-events:none;}", " ", " ", " ", ""], props => props.rounded ? '100px' : '8px', props => props.rounded ? '100px' : '8px', props => props.focused && styled.css(["box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);:before{content:'';border:1px solid ", ";}"], utils.getColor('gray180')), props => props.hasErrors && styled.css([":before{content:'';border:1px solid ", ";}"], utils.getColor('alert')), props => props.textBoxBefore && styled.css(["input{border-top-left-radius:0;border-bottom-left-radius:0;}"]), props => props.textBoxAfter && styled.css(["input{border-top-right-radius:0;border-bottom-right-radius:0;}"]));
+})(["display:flex;border-radius:", ";position:relative;&:before{position:absolute;border-radius:", ";top:0;bottom:0;right:0;left:0;z-index:2;pointer-events:none;}", " ", " ", " ", ""], props => props.rounded ? '100px' : '8px', props => props.rounded ? '100px' : '8px', props => props.focused && styled.css(["box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);&:before{content:'';border:1px solid ", ";}"], utils.getColor('gray180')), props => props.hasErrors && styled.css(["&:before{content:'';border:1px solid ", ";}"], utils.getColor('alert')), props => props.textBoxBefore && styled.css(["input{border-top-left-radius:0;border-bottom-left-radius:0;}"]), props => props.textBoxAfter && styled.css(["input{border-top-right-radius:0;border-bottom-right-radius:0;}"]));
 const TextBox = /*#__PURE__*/styled__default["default"].span.withConfig({
   displayName: "TextInput__TextBox",
   componentId: "sc-yzpeng-7"
@@ -1305,7 +1320,7 @@ TextInput.Input = Input;
 const FloatingFieldType = /*#__PURE__*/styled__default["default"](Field).withConfig({
   displayName: "TextInput__FloatingFieldType",
   componentId: "sc-yzpeng-11"
-})(["input{height:5rem;box-shadow:0 1px 4px rgba(0,0,0,.2);border-radius:8px;font-size:16px;font-weight:400;padding:16px 1rem 0;}", "{position:absolute;top:1.5rem;left:1rem;font-size:20px;font-weight:normal;transition:all .2s ease;color:rgba(0,0,0,.2);pointer-events:none;z-index:1;", "}"], Field.Label, props => (props.value || props.focused) && "\n        top: 12px;\n        font-size: 14px;\n        color: rgba(0,0,0,.4);\n      ");
+})(["input{height:5rem;box-shadow:0 1px 4px rgba(0,0,0,.2);border-radius:8px;font-size:16px;font-weight:400;padding:16px 1rem 0;}", "{position:absolute;top:1.5rem;left:1rem;font-size:20px;font-weight:normal;transition:all .2s ease;color:rgba(0,0,0,.2);pointer-events:none;z-index:1;", "}"], FieldLabel, props => (props.value || props.focused) && "\n        top: 12px;\n        font-size: 14px;\n        color: rgba(0,0,0,.4);\n      ");
 const FloatLabelTextInput = props => /*#__PURE__*/React__default["default"].createElement(TextInput, _extends__default["default"]({}, props, {
   FieldType: FloatingFieldType
 }));
@@ -1317,7 +1332,7 @@ const FileInput = /*#__PURE__*/styled__default["default"].input.attrs({
 }).withConfig({
   displayName: "withFormImageInput__FileInput",
   componentId: "sc-o7trbb-0"
-})(["z-index:1;cursor:pointer;opacity:0;position:absolute;top:0;right:0;left:0;bottom:0;width:100%;height:100%;overflow:hidden;::-webkit-file-upload-button{visibility:hidden;}::file-upload-button{visibility:hidden;}"]);
+})(["z-index:1;cursor:pointer;opacity:0;position:absolute;top:0;right:0;left:0;bottom:0;width:100%;height:100%;overflow:hidden;&::-webkit-file-upload-button{visibility:hidden;}&::file-upload-button{visibility:hidden;}"]);
 const WithImageInput = _ref => {
   let {
       children,
@@ -1574,7 +1589,7 @@ const WithFileInput = _ref3 => {
   });
 };
 
-const _excluded$e = ["className", "children", "isChecked", "isList", "onClick", "disabled", "inverted", "path", "tabIndex", "raw"];
+const _excluded$e = ["className", "style", "children", "isChecked", "isList", "onClick", "disabled", "inverted", "path", "tabIndex", "raw"];
 function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const HiddenInput$1 = /*#__PURE__*/styled__default["default"].input.withConfig({
@@ -1584,6 +1599,7 @@ const HiddenInput$1 = /*#__PURE__*/styled__default["default"].input.withConfig({
 const Checkbox = _ref => {
   let {
       className,
+      style,
       children,
       isChecked = _identity__default["default"],
       isList,
@@ -1621,7 +1637,8 @@ const Checkbox = _ref => {
   return /*#__PURE__*/React__default["default"].createElement("label", {
     onClick: _onClick,
     "data-drag": "false",
-    className: className
+    className: className,
+    style: style
   }, !utils.isTouchDevice() && /*#__PURE__*/React__default["default"].createElement(HiddenInput$1, {
     onFocus: focused.open,
     onBlur: focused.close,
@@ -1651,7 +1668,7 @@ const ComboboxMenu = /*#__PURE__*/styled__default["default"](components.ContextL
 const ComboboxInput = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "Combobox__ComboboxInput",
   componentId: "sc-u2hz6i-1"
-})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:8px;color:", ";background:white;position:relative;display:block;min-height:3rem;padding:0.5rem 2.5rem 0.5rem 0.7rem;overflow:auto;outline:0;outline:none;cursor:pointer;user-select:none;overflow:hidden;display:flex;align-items:center;word-break:break-word;", " ", " ", ":focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", " input{position:absolute;top:-1px;left:0;border:none;", "}"], utils.getColor('gray210'), utils.getColor('gray60'), props => props.suggestive && "\n    padding-right: 0.7rem;\n  ", utils.media.mobile(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default["default"](["\n      min-height: 42px;\n      padding-left: 1rem;\n      ", "\n  "])), props => props.suggestive && "\n        padding-right: 1rem;\n      "), props => props.isFocused && styled.css(["border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);"], utils.getColor('gray180')), utils.getColor('gray180'), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert')), props => !props.suggestive && "\n      padding-right: 2.5rem;\n    ");
+})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:8px;color:", ";background:white;position:relative;display:block;min-height:3rem;padding:0.5rem 2.5rem 0.5rem 0.7rem;overflow:auto;outline:0;outline:none;cursor:pointer;user-select:none;overflow:hidden;display:flex;align-items:center;word-break:break-word;", " ", " ", " &:focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", " input{position:absolute;top:-1px;left:0;border:none;", "}"], utils.getColor('gray210'), utils.getColor('gray60'), props => props.suggestive && "\n    padding-right: 0.7rem;\n  ", utils.media.mobile(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default["default"](["\n      min-height: 42px;\n      padding-left: 1rem;\n      ", "\n  "])), props => props.suggestive && "\n        padding-right: 1rem;\n      "), props => props.isFocused && styled.css(["border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);"], utils.getColor('gray180')), utils.getColor('gray180'), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert')), props => !props.suggestive && "\n      padding-right: 2.5rem;\n    ");
 const ComboboxDropdownIcon = /*#__PURE__*/styled__default["default"](components.Icon).withConfig({
   displayName: "Combobox__ComboboxDropdownIcon",
   componentId: "sc-u2hz6i-2"
@@ -2254,23 +2271,23 @@ const AutoCompleteTextboxDiv = /*#__PURE__*/styled__default["default"](ContentEd
 const AddedBox = /*#__PURE__*/styled__default["default"].span.withConfig({
   displayName: "AutoComplete__AddedBox",
   componentId: "sc-g0526o-4"
-})(["background-color:rgb(230,230,230);padding:5px 2rem 5px 0.75rem;border-radius:12px;font-size:13px;position:relative;margin-left:-3px;margin-right:9px;white-space:nowrap;cursor:default;line-height:normal;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", ""], isSafari ? "\n    vertical-align: 2px;\n    " : "\n    vertical-align: -7px;\n  ");
+})(["background-color:rgb(230,230,230);padding:5px 2rem 5px 0.75rem;border-radius:12px;font-size:13px;position:relative;margin-left:-3px;margin-right:9px;white-space:nowrap;cursor:default;line-height:normal;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:", ";"], () => isSafari ? '2px' : '-7px');
 const RemoveIcon = /*#__PURE__*/styled__default["default"](components.Icon).withConfig({
   displayName: "AutoComplete__RemoveIcon",
   componentId: "sc-g0526o-5"
-})(["width:20px;height:20px;border-radius:50%;display:inline-block;position:absolute;top:50%;line-height:20px;transform:translateY(-50%);right:2px;font-size:14px;text-align:center;cursor:pointer;color:", ";:hover{background-color:", ";color:", ";}"], utils.getColor('gray120'), utils.getColor('gray210'), props => polished.darken(0.05, utils.getColor('alert')(props)));
+})(["width:20px;height:20px;border-radius:50%;display:inline-block;position:absolute;top:50%;line-height:20px;transform:translateY(-50%);right:2px;font-size:14px;text-align:center;cursor:pointer;color:", ";&:hover{background-color:", ";color:", ";}"], utils.getColor('gray120'), utils.getColor('gray210'), props => polished.darken(0.05, utils.getColor('alert')(props)));
 const AutoCompleteMenu = /*#__PURE__*/styled__default["default"](components.ContextMenu).withConfig({
   displayName: "AutoComplete__AutoCompleteMenu",
   componentId: "sc-g0526o-6"
-})(["box-shadow:0 2px 3px 1px rgba(0,0,0,0.2),0 0px 0px 1px rgba(0,0,0,0.05);max-height:22rem;overflow:auto;", "{> *{padding:11px;}}"], components.ContextMenu.ListItem);
+})(["box-shadow:0 2px 3px 1px rgba(0,0,0,0.2),0 0px 0px 1px rgba(0,0,0,0.05);max-height:22rem;overflow:auto;", "{> *{padding:11px;}}"], components.ListItem);
 const AutoCompleteError = /*#__PURE__*/styled__default["default"](Errors).withConfig({
   displayName: "AutoComplete__AutoCompleteError",
   componentId: "sc-g0526o-7"
-})(["", "{background:transparent;border:none;color:", ";padding:0;margin-top:0.5rem;font-weight:600;", "{display:none;}}"], Errors.Item, utils.getColor('alert'), Errors.CloseIcon);
+})(["", "{background:transparent;border:none;color:", ";padding:0;margin-top:0.5rem;font-weight:600;", "{display:none;}}"], ErrorsItem, utils.getColor('alert'), ErrorsCloseIcon);
 const DropdownIconContainer = /*#__PURE__*/styled__default["default"](components.Icon).withConfig({
   displayName: "AutoComplete__DropdownIconContainer",
   componentId: "sc-g0526o-8"
-})(["position:absolute;right:0;bottom:0;width:3rem;height:3rem;bottom:-1px;", " ", "{position:absolute;width:2rem;height:2rem;line-height:2rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.1);border-radius:50%;text-align:center;cursor:pointer;color:", ";:hover,:active{background:rgba(0,0,0,0.15);}}"], utils.media.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n    height: 42px;\n  "]))), components.Icon, utils.getColor('gray90'));
+})(["position:absolute;right:0;bottom:0;width:3rem;height:3rem;bottom:-1px;", " ", "{position:absolute;width:2rem;height:2rem;line-height:2rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.1);border-radius:50%;text-align:center;cursor:pointer;color:", ";&:hover,&:active{background:rgba(0,0,0,0.15);}}"], utils.media.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n    height: 42px;\n  "]))), components.Icon, utils.getColor('gray90'));
 const focusBeforeLast = e => {
   if (e.target && e.target !== e.currentTarget) return;
   const el = [].slice.call(e.currentTarget.querySelectorAll('div[contenteditable]')).slice(-1)[0];
@@ -3418,7 +3435,7 @@ const TextLabelContainer$1 = /*#__PURE__*/styled__default["default"].div.withCon
 const CheckboxContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "SimpleCheckbox__CheckboxContent",
   componentId: "sc-am8pps-4"
-})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], props => props.framed && styled.css(["border:1px solid ", ";border-radius:8px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default["default"](["\n      padding: 7px 12px 7px 32px;\n    "]))), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert')), props => props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{", "{color:", ";}}"], utils.getColor('main'), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), CheckboxPseudoInput, components.Icon, utils.getColor('main')), props => props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;a,a.link{color:white;}:hover{background:", ";}", "{", "{color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CheckboxPseudoInput, components.Icon, utils.getColor('main'), HelpText, DescText$2), props => props.disabled && styled.css(["background-color:rgba(0,0,0,0.075) !important;color:rgba(0,0,0,0.6);!important;&[disabled]{opacity:0.75 !important;}", "{background:transparent;}"], CheckboxPseudoInput)));
+})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], props => props.framed && styled.css(["border:1px solid ", ";border-radius:8px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;&:hover{background:rgb(245,245,245);}&:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default["default"](["\n      padding: 7px 12px 7px 32px;\n    "]))), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert')), props => props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";&:hover{background:", ";}", "{", "{color:", ";}}"], utils.getColor('main'), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), CheckboxPseudoInput, components.Icon, utils.getColor('main')), props => props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;a,a.link{color:white;}&:hover{background:", ";}", "{", "{color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CheckboxPseudoInput, components.Icon, utils.getColor('main'), HelpText, DescText$2), props => props.disabled && styled.css(["background-color:rgba(0,0,0,0.075) !important;color:rgba(0,0,0,0.6);&[disabled]{opacity:0.75 !important;}", "{background:transparent;}"], CheckboxPseudoInput)));
 const SimpleCheckbox = /*#__PURE__*/styled__default["default"](_ref => {
   let {
       path,
@@ -3470,7 +3487,7 @@ var _templateObject$3;
 const CssCircle = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "SimpleRadiobox__CssCircle",
   componentId: "sc-qv83xo-0"
-})(["border-radius:50%;content:'';border:1px solid ", ";width:18px;height:18px;background-color:white;position:absolute;left:-2rem;top:50%;transform:translateY(-50%);", " ", ""], utils.getColor('gray210'), utils.ifProp('focused', styled.css(["box-shadow:0 0 0 2px rgba(0,0,0,0.1);border-color:", ";"], utils.getColor('gray180'))), utils.ifProp('checked', styled.css([":before{content:'';width:8px;height:8px;top:50%;transform:translateY(-50%);left:4px;border-radius:50%;position:absolute;background-color:", ";}"], utils.getColor('gray90'))));
+})(["border-radius:50%;content:'';border:1px solid ", ";width:18px;height:18px;background-color:white;position:absolute;left:-2rem;top:50%;transform:translateY(-50%);", " ", ""], utils.getColor('gray210'), utils.ifProp('focused', styled.css(["box-shadow:0 0 0 2px rgba(0,0,0,0.1);border-color:", ";"], utils.getColor('gray180'))), utils.ifProp('checked', styled.css(["&:before{content:'';width:8px;height:8px;top:50%;transform:translateY(-50%);left:4px;border-radius:50%;position:absolute;background-color:", ";}"], utils.getColor('gray90'))));
 const TextLabel = /*#__PURE__*/styled__default["default"].span.withConfig({
   displayName: "SimpleRadiobox__TextLabel",
   componentId: "sc-qv83xo-1"
@@ -3486,7 +3503,7 @@ const TextLabelContainer = /*#__PURE__*/styled__default["default"].div.withConfi
 const RadioboxContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "SimpleRadiobox__RadioboxContent",
   componentId: "sc-qv83xo-4"
-})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], props => props.framed && styled.css(["border:1px solid ", ";border-radius:8px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default["default"](["\n      padding: 7px 12px 7px 32px;\n    "]))), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert')), props => props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{:before{background-color:", ";}}"], utils.getColor('main'), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), CssCircle, utils.getColor('main')), props => props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;:hover{background:", ";}", "{:before{background-color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CssCircle, utils.getColor('main'), HelpText, DescText$1), props => props.disabled && styled.css(["background-color:rgba(0,0,0,0.075) !important;&[disabled]{opacity:0.75 !important;}", "{background:rgba(255,255,255,0.25);}"], CssCircle)));
+})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], props => props.framed && styled.css(["border:1px solid ", ";border-radius:8px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;&:hover{background:rgb(245,245,245);}&:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default["default"](["\n      padding: 7px 12px 7px 32px;\n    "]))), props => props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert')), props => props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";&:hover{background:", ";}", "{&:before{background-color:", ";}}"], utils.getColor('main'), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), props => polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props))), CssCircle, utils.getColor('main')), props => props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;&:hover{background:", ";}", "{&:before{background-color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CssCircle, utils.getColor('main'), HelpText, DescText$1), props => props.disabled && styled.css(["background-color:rgba(0,0,0,0.075) !important;&[disabled]{opacity:0.75 !important;}", "{background:rgba(255,255,255,0.25);}"], CssCircle)));
 const SimpleRadiobox = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/React__default["default"].createElement(Radiobox, props, _ref => {
   let {
     disabled,
@@ -3554,7 +3571,7 @@ const InputboxGroup = /*#__PURE__*/styled__default["default"](_ref => {
 }).withConfig({
   displayName: "InputboxGroup",
   componentId: "sc-q49nwm-0"
-})(["", " ", " ", " ", ""], props => props.wide && "\n    width: 100%;\n    display: flex;\n    label {\n      flex-grow: 1;\n      flex-basis: 0;\n    }\n  ", props => props.unevenlyWide && "\n    width: 100%;\n    display: flex;\n    label {\n      flex-grow: 1;\n    }\n  ", props => props.horizontal ? "\n    @supports (flex-wrap: wrap) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n    min-height: 3rem;\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-right: 1.5rem;\n      margin-bottom: 0.5rem;\n    }\n  ") : "\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-bottom: 0.5rem;\n      :last-child {\n        margin-bottom: 1.5rem;\n      }\n    }\n  "), props => props.framedBoxes && styled.css(["", ""], props => props.horizontal && "\n      margin: -4px;\n      width: calc(100% + 8px);\n      ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n          margin: 4px;\n      }\n    ")));
+})(["", " ", " ", " ", ""], props => props.wide && "\n    width: 100%;\n    display: flex;\n    label {\n      flex-grow: 1;\n      flex-basis: 0;\n    }\n  ", props => props.unevenlyWide && "\n    width: 100%;\n    display: flex;\n    label {\n      flex-grow: 1;\n    }\n  ", props => props.horizontal ? "\n    @supports (flex-wrap: wrap) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n    min-height: 3rem;\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-right: 1.5rem;\n      margin-bottom: 0.5rem;\n    }\n  ") : "\n    ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n      margin-bottom: 0.5rem;\n      &:last-child {\n        margin-bottom: 1.5rem;\n      }\n    }\n  "), props => props.framedBoxes && styled.css(["", ""], props => props.horizontal && "\n      margin: -4px;\n      width: calc(100% + 8px);\n      ".concat(SimpleRadiobox, ", ").concat(SimpleCheckbox, " {\n          margin: 4px;\n      }\n    ")));
 const RadioboxGroup = InputboxGroup;
 const CheckboxGroup = InputboxGroup;
 CheckboxGroup.createCheckManager = function () {
@@ -3607,10 +3624,26 @@ const CALENDAR_LEVEL_DAY = 'day';
 const CALENDAR_LEVEL_MONTH = 'month';
 const CALENDAR_LEVEL_YEAR = 'year';
 const LEVELS = [CALENDAR_LEVEL_DAY, CALENDAR_LEVEL_MONTH, CALENDAR_LEVEL_YEAR];
-const DatePickerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+
+// Nome fixo do @keyframes preservado: um `keyframes` do styled-components geraria um nome
+// com hash, diferente do atual "datePickerFadeInDown" (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 DatePickerContainer (mesmo padrão de components/src/Loading.jsx).
+const injectDatePickerFadeInDownKeyframes = () => utils.insertKeyframes('datePickerFadeInDown', 'from { opacity: 0; transform: translateY(-10px); pointer-events: none; } to { opacity: 1; transform: none; pointer-events: none; }');
+
+// styled(DatePickerContainerBase) 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. O template
+// abaixo não lê nenhuma prop custom, então repassar tudo com {...props} é seguro.
+const DatePickerContainerBase = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
+  injectDatePickerFadeInDownKeyframes();
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref
+  }, props));
+});
+const DatePickerContainer = /*#__PURE__*/styled__default["default"](DatePickerContainerBase).withConfig({
   displayName: "DatePicker__DatePickerContainer",
   componentId: "sc-1wo8j4d-0"
-})(["width:20rem;position:absolute;z-index:100;background-color:white;border-radius:5px;border:1px solid ", ";user-select:none;box-shadow:0 0 4px 0 rgba(0,0,0,0.2);font-size:13px;text-align:center;animation:0.2s datePickerFadeInDown ease-out;display:none;@supports (flex-wrap:wrap){display:block;}input{padding-right:2.25rem;", "}@keyframes datePickerFadeInDown{from{opacity:0;transform:translateY(-10px);pointer-events:none;}to{opacity:1;transform:none;pointer-events:none;}}"], utils.getColor('gray210'), utils.media.mobile(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default["default"](["\n      width: 2.5rem;\n    "]))));
+})(["width:20rem;position:absolute;z-index:100;background-color:white;border-radius:5px;border:1px solid ", ";user-select:none;box-shadow:0 0 4px 0 rgba(0,0,0,0.2);font-size:13px;text-align:center;animation:0.2s datePickerFadeInDown ease-out;display:none;@supports (flex-wrap:wrap){display:block;}input{padding-right:2.25rem;", "}"], utils.getColor('gray210'), utils.media.mobile(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default["default"](["\n      width: 2.5rem;\n    "]))));
 const CalendarHeader = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "DatePicker__CalendarHeader",
   componentId: "sc-1wo8j4d-1"
@@ -3626,7 +3659,7 @@ const WeekHeader = /*#__PURE__*/styled__default["default"](CalendarContentContai
 const CalendarClickable = /*#__PURE__*/styled__default["default"].a.withConfig({
   displayName: "DatePicker__CalendarClickable",
   componentId: "sc-1wo8j4d-4"
-})([":hover,:focus{background-color:rgba(0,0,0,0.1);cursor:pointer;}"]);
+})(["&:hover,&:focus{background-color:rgba(0,0,0,0.1);cursor:pointer;}"]);
 const TitleButton = /*#__PURE__*/styled__default["default"](CalendarClickable).withConfig({
   displayName: "DatePicker__TitleButton",
   componentId: "sc-1wo8j4d-5"
@@ -3638,7 +3671,7 @@ const NavigationButton = /*#__PURE__*/styled__default["default"](CalendarClickab
 const CalendarContent = /*#__PURE__*/styled__default["default"](CalendarClickable).withConfig({
   displayName: "DatePicker__CalendarContent",
   componentId: "sc-1wo8j4d-7"
-})(["line-height:2.25rem;flex-grow:1;display:inline-block;border-radius:5px;margin-top:0.25rem;margin-left:0.25rem;", " ", " ", "   ", "  "], utils.ifProp('isEdge', styled.css(["color:rgba(0,0,0,0.4);"])), utils.ifProp('isSelected', styled.css(["box-shadow:inset 0 0 0 1px ", ";"], utils.getColor('gray210'))), utils.ifProp('isDisabled', "pointer-events: none;\n   opacity: 0.5;"), utils.ifProp('isCurrent', styled.css(["background:", ";color:#FFF;:hover{background-color:", ";}", ""], utils.getColor('main'), props => polished.darken(0.075, utils.getColor('main')(props)), utils.ifProp('isSelected', 'box-shadow: none;'))));
+})(["line-height:2.25rem;flex-grow:1;display:inline-block;border-radius:5px;margin-top:0.25rem;margin-left:0.25rem;", " ", " ", "   ", ""], utils.ifProp('isEdge', styled.css(["color:rgba(0,0,0,0.4);"])), utils.ifProp('isSelected', styled.css(["box-shadow:inset 0 0 0 1px ", ";"], utils.getColor('gray210'))), utils.ifProp('isDisabled', "pointer-events: none;\n   opacity: 0.5;"), utils.ifProp('isCurrent', styled.css(["background:", ";color:#FFF;&:hover{background-color:", ";}", ""], utils.getColor('main'), props => polished.darken(0.075, utils.getColor('main')(props)), utils.ifProp('isSelected', 'box-shadow: none;'))));
 const DayItem = /*#__PURE__*/styled__default["default"](CalendarContent).withConfig({
   displayName: "DatePicker__DayItem",
   componentId: "sc-1wo8j4d-8"
@@ -3654,11 +3687,11 @@ const YearItem = /*#__PURE__*/styled__default["default"](CalendarContent).withCo
 const DatePickerInputIcon = /*#__PURE__*/styled__default["default"](components.Icon).withConfig({
   displayName: "DatePicker__DatePickerInputIcon",
   componentId: "sc-1wo8j4d-11"
-})(["position:absolute;outline:none;bottom:0;font-size:21px;line-height:3rem;right:0;width:2rem;cursor:pointer;color:", ";:hover{color:", ";}display:none;@supports (flex-wrap:wrap){display:block;}", " ", ""], utils.getColor('gray150'), utils.getColor('main'), props => props.disabled && 'pointer-events: none;', utils.media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    line-height: 42px;\n    width: 2.25rem;\n  "]))));
+})(["position:absolute;outline:none;bottom:0;font-size:21px;line-height:3rem;right:0;width:2rem;cursor:pointer;color:", ";&:hover{color:", ";}display:none;@supports (flex-wrap:wrap){display:block;}", " ", ""], utils.getColor('gray150'), utils.getColor('main'), props => props.disabled && 'pointer-events: none;', utils.media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    line-height: 42px;\n    width: 2.25rem;\n  "]))));
 /*#__PURE__*/styled__default["default"](components.Icon).withConfig({
   displayName: "DatePicker__ClearButton",
   componentId: "sc-1wo8j4d-12"
-})(["color:", ";font-size:12px;position:absolute;right:40px;bottom:0;transform:translateY(-50%);cursor:pointer;width:1.5rem;line-height:1.5rem;text-align:center;border-radius:50%;background:rgba(0,0,0,0.1);:hover{background:#f7d3d4;color:", ";}"], utils.getColor('gray90'), utils.getColor('alert'));
+})(["color:", ";font-size:12px;position:absolute;right:40px;bottom:0;transform:translateY(-50%);cursor:pointer;width:1.5rem;line-height:1.5rem;text-align:center;border-radius:50%;background:rgba(0,0,0,0.1);&:hover{background:#f7d3d4;color:", ";}"], utils.getColor('gray90'), utils.getColor('alert'));
 const InputAndIconWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "DatePicker__InputAndIconWrapper",
   componentId: "sc-1wo8j4d-13"
@@ -3666,7 +3699,7 @@ const InputAndIconWrapper = /*#__PURE__*/styled__default["default"].div.withConf
 const ShortcutsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "DatePicker__ShortcutsWrapper",
   componentId: "sc-1wo8j4d-14"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0.25rem 0;color:", ";.link{cursor:pointer;font-weight:600;text-decoration:underline;", ":hover{color:", ";}", "}"], utils.getColor('gray150'), utils.media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n      font-size: 13px;  \n    "]))), utils.getColor('main'), utils.ifProp('disabled', styled.css(["pointer-events:none;opacity:0.5;"])));
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0.25rem 0;color:", ";.link{cursor:pointer;font-weight:600;text-decoration:underline;", " &:hover{color:", ";}", "}"], utils.getColor('gray150'), utils.media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n      font-size: 13px;  \n    "]))), utils.getColor('main'), utils.ifProp('disabled', styled.css(["pointer-events:none;opacity:0.5;"])));
 const KeyMapper = level => {
   const upDownSpacing = level === CALENDAR_LEVEL_DAY ? 7 : 3;
   return {
@@ -4213,7 +4246,7 @@ const shouldPreventExpand = (e, fn) => !e.target.closest('body,[data-expand="fal
 const ExpandableBoxStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ExpandableBox__ExpandableBoxStyled",
   componentId: "sc-1nsk1wq-0"
-})(["padding:1rem;border-radius:8px;background:", ";font-size:14px;outline:none;transition:background 0.2s linear;position:relative;", " ", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('lightBluishGray'), props => props.small && "\n    padding: 0.875rem 1rem;\n    min-height: 3rem;\n  ", props => props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;:hover{background:", ";}:active{background:", ";transition:none;}"], props => polished.darken(0.035, utils.getColor('lightBluishGray')(props)), props => polished.darken(0.05, utils.getColor('lightBluishGray')(props))) : styled.css(["padding:1.5rem;", " ", ""], utils.media.max(340)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default["default"](["\n      padding 1rem;\n    "]))), props => props.fixMarginBottom && "\n      padding-bottom: 0.5rem !important;\n    "), components.SwitchDiv);
+})(["padding:1rem;border-radius:8px;background:", ";font-size:14px;outline:none;transition:background 0.2s linear;position:relative;", " ", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('lightBluishGray'), props => props.small && "\n    padding: 0.875rem 1rem;\n    min-height: 3rem;\n  ", props => props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;&:hover{background:", ";}&:active{background:", ";transition:none;}"], props => polished.darken(0.035, utils.getColor('lightBluishGray')(props)), props => polished.darken(0.05, utils.getColor('lightBluishGray')(props))) : styled.css(["padding:1.5rem;", " ", ""], utils.media.max(340)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default["default"](["\n      padding: 1rem;\n    "]))), props => props.fixMarginBottom && "\n      padding-bottom: 0.5rem !important;\n    "), components.SwitchDiv);
 const EditIcon = /*#__PURE__*/styled__default["default"](components.Icon).attrs({
   icon: 'edit',
   className: 'expandable-edit-icon'
@@ -4463,18 +4496,23 @@ const FIX_STYLE = {
     return '';
   }
 };
+
+// Precisa vir antes de RichTextContainer: o yak resolve `${ToolsContainer}` (seletor dentro de
+// props.showToolbar) estaticamente lendo o módulo de cima pra baixo — em tempo de execução
+// (sc) a ordem nunca importou, já que o template só lê ToolsContainer dentro de um callback
+// (props => ...), chamado bem depois do módulo inteiro já ter sido avaliado.
+const ToolsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  displayName: "RichText__ToolsContainer",
+  componentId: "sc-x8c1ig-1"
+})(["background:", ";padding:0 0.125rem;border-top-left-radius:7px;border-top-right-radius:7px;transition:0.225s;max-height:0;pointer-events:none;overflow:hidden;display:flex;align-items:center;"], utils.getColor('lightBluishGray'));
 const RichTextContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "RichText__RichTextContainer",
-  componentId: "sc-x8c1ig-1"
+  componentId: "sc-x8c1ig-2"
 })(["position:relative;width:100%;border:1px solid ", ";border-radius:8px;background:white;", ";", ";", " ", " ", " ul{list-style-type:disc;}ul,ol{padding-inline-start:25px;margin-block-start:0.5em;margin-block-end:0.5em;}"], utils.getColor('gray210'), props => props.hasErrors && "border-color: ".concat(utils.getColor(props)('alert')), props => props.showToolbar && "\n    ".concat(ToolsContainer, " {\n      transition: 0.5s;\n      max-height: 7.5rem;\n      transition: 0.6s;\n      pointer-events: auto;\n    }\n  "), props => props.focus && "\n    border-color: ".concat(utils.getColor('gray180'), ";\n    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);\n  "), props => props.locked && styled.css(["padding-right:2.25rem;background:rgba(0,0,0,0.075);"]), props => props.linkColor && styled.css(["a,a:visited,a:focus,a:active{color:", ";}a:hover{color:", ";}"], props.linkColor, polished.darken(0.05, props.linkColor)));
 const RichTextInput = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "RichText__RichTextInput",
-  componentId: "sc-x8c1ig-2"
-})(["font-size:14px;color:", ";background:white;border-radius:7px;> div{overflow:auto;width:100%;outline:none;min-height:", "px;padding:0.7rem;}b,strong{font-weight:600;}a{text-decoration:underline;}> div[contenteditable=true]:empty:before{content:attr(placeholder);color:rgba(0,0,0,0.3);}", ""], utils.getColor('gray60'), props => props.minHeight || 60, props => props.disabled && "\n    &[disabled] {\n      background: rgba(0, 0, 0, 0.075) !important;\n      opacity: 0.75 !important;\n    }\n  ");
-const ToolsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  displayName: "RichText__ToolsContainer",
   componentId: "sc-x8c1ig-3"
-})(["background:", ";padding:0 0.125rem;border-top-left-radius:7px;border-top-right-radius:7px;transition:0.225s;max-height:0;pointer-events:none;overflow:hidden;display:flex;align-items:center;"], utils.getColor('lightBluishGray'));
+})(["font-size:14px;color:", ";background:white;border-radius:7px;> div{overflow:auto;width:100%;outline:none;min-height:", "px;padding:0.7rem;}b,strong{font-weight:600;}a{text-decoration:underline;}> div[contenteditable=true]:empty:before{content:attr(placeholder);color:rgba(0,0,0,0.3);}", ""], utils.getColor('gray60'), props => props.minHeight || 60, props => props.disabled && "\n    &[disabled] {\n      background: rgba(0, 0, 0, 0.075) !important;\n      opacity: 0.75 !important;\n    }\n  ");
 const ToolButton = /*#__PURE__*/styled__default["default"](components.Button).withConfig({
   displayName: "RichText__ToolButton",
   componentId: "sc-x8c1ig-4"
@@ -5058,7 +5096,7 @@ const _excluded$2 = ["path", "disabled", "rightInfo", "label", "descText", "help
 const Toggle = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToggleCheckbox__Toggle",
   componentId: "sc-11ob8ah-1"
-})(["cursor:pointer;flex-shrink:0;margin-left:1rem;float:right;transition:0.25s ease;width:2.75rem;height:18px;border-radius:18px;background:", ";display:inline-block;position:relative;font-weight:600;:after{content:'';transition:0.25s ease;border-radius:50%;display:block;position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;background:white;", "}", ""], props => props.checked ? utils.getColor('main') : 'rgba(0,0,0,0.14)', props => props.checked ? styled.css(["margin-left:-2px;left:100%;transform:translate(-100%,-50%);"]) : styled.css(["margin-left:2px;left:0;"]), utils.customTheme('ToggleCheckbox'));
+})(["cursor:pointer;flex-shrink:0;margin-left:1rem;float:right;transition:0.25s ease;width:2.75rem;height:18px;border-radius:18px;background:", ";display:inline-block;position:relative;font-weight:600;&:after{content:'';transition:0.25s ease;border-radius:50%;display:block;position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;background:white;", "}", ""], props => props.checked ? utils.getColor('main') : 'rgba(0,0,0,0.14)', props => props.checked ? styled.css(["margin-left:-2px;left:100%;transform:translate(-100%,-50%);"]) : styled.css(["margin-left:2px;left:0;"]), utils.customTheme('ToggleCheckbox'));
 const ToggleLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "ToggleCheckbox__ToggleLabel",
   componentId: "sc-11ob8ah-2"
@@ -5070,7 +5108,7 @@ const DescText = /*#__PURE__*/styled__default["default"].div.withConfig({
 const ToggleCheckboxStyled = /*#__PURE__*/styled__default["default"](Checkbox).withConfig({
   displayName: "ToggleCheckbox__ToggleCheckboxStyled",
   componentId: "sc-11ob8ah-4"
-})(["position:relative;border-radius:8px;padding:1rem;min-height:42px;font-weight:550;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background 0.2s linear;& ~ &{margin-top:-1rem;}", " ", " ", " ", " ", ""], props => props.margin ? styled.css(["margin-bottom:", "px;"], props => props.margin) : styled.css(["margin-bottom:1.5rem;& ~ &{margin-top:-1rem;}"]), props => props.gray ? "\n    background-color: rgba(0,0,0,0.06);\n    :hover {\n      background-color: rgba(0,0,0,0.08);\n    }\n    :active {\n      background-color: rgba(0,0,0,0.1);\n      transition: none;\n    }\n  " : styled.css(["background-color:", ";:hover{background:", ";}:active{background:", ";transition:none;}"], utils.getColor('lightBluishGray'), props => polished.darken(0.035, utils.getColor('lightBluishGray')(props)), props => polished.darken(0.05, utils.getColor('lightBluishGray')(props))), props => !props.noFocus && styled.css([":focus-within{background-color:rgba(0,0,0,0.09);:after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:9px;border:2px solid rgba(0,0,0,0.15);}}"]), props => props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ", utils.customTheme('ToggleCheckboxBox'));
+})(["position:relative;border-radius:8px;padding:1rem;min-height:42px;font-weight:550;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background 0.2s linear;& ~ &{margin-top:-1rem;}", " ", " ", " ", " ", ""], props => props.margin ? styled.css(["margin-bottom:", "px;"], props => props.margin) : styled.css(["margin-bottom:1.5rem;& ~ &{margin-top:-1rem;}"]), props => props.gray ? "\n    background-color: rgba(0,0,0,0.06);\n    &:hover {\n      background-color: rgba(0,0,0,0.08);\n    }\n    &:active {\n      background-color: rgba(0,0,0,0.1);\n      transition: none;\n    }\n  " : styled.css(["background-color:", ";&:hover{background:", ";}&:active{background:", ";transition:none;}"], utils.getColor('lightBluishGray'), props => polished.darken(0.035, utils.getColor('lightBluishGray')(props)), props => polished.darken(0.05, utils.getColor('lightBluishGray')(props))), props => !props.noFocus && styled.css(["&:focus-within{background-color:rgba(0,0,0,0.09);&:after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:9px;border:2px solid rgba(0,0,0,0.15);}}"]), props => props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ", utils.customTheme('ToggleCheckboxBox'));
 const ToggleCheckbox = /*#__PURE__*/styled__default["default"](_ref => {
   let {
       path,
@@ -5102,7 +5140,8 @@ const ToggleCheckbox = /*#__PURE__*/styled__default["default"](_ref => {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ToggleLabel, null, label, helpText && /*#__PURE__*/React__default["default"].createElement(HelpText, null, " ", helpText), /*#__PURE__*/React__default["default"].createElement(components.TransitionDiv, {
       block: true
     }, descText && /*#__PURE__*/React__default["default"].createElement(DescText, null, descText))), rightInfo, /*#__PURE__*/React__default["default"].createElement(Toggle, {
-      checked: checked
+      checked: checked,
+      className: checked ? 'styled-toggle-checkbox-checked' : undefined
     }));
   });
 }).withConfig({
@@ -5115,7 +5154,7 @@ var _templateObject;
 const TabButton = /*#__PURE__*/styled__default["default"](components.Button).withConfig({
   displayName: "TabRadiobox__TabButton",
   componentId: "sc-1vu3bcn-0"
-})(["width:100%;margin-left:0;padding:9px 1rem;flex-grow:1;background:", ";box-shadow:none;color:", ";border:1px solid ", ";border-left-width:0;height:100%;:hover{background:", ";}", " ", " ", " ", "  ", "  ", ""], props => props.white ? 'white' : utils.getColor('gray240'), utils.getColor('gray120'), utils.getColor('gray210'), props => polished.desaturate(0.6, polished.lighten(0.5, utils.getColor("main")(props))), utils.ifProp('checked', styled.css(["&,&:hover{border-color:", ";background-color:", ";border-left-width:1px;color:#fff;cursor:default;}"], utils.getColor('main'), utils.getColor('main'))), props => props.isFirst && "\n    border-left-width: 1px;\n  ", props => props.isFirst !== undefined && !props.isFirst && "\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    :focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  ", props => props.isLast !== undefined && !props.isLast && "\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    :focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  ", utils.media.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    min-width: 0;\n    ", "\n  "])), props => props.icon ? "\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    " : "\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    "), utils.customTheme('TabButton'));
+})(["width:100%;margin-left:0;padding:9px 1rem;flex-grow:1;background:", ";box-shadow:none;color:", ";border:1px solid ", ";border-left-width:0;height:100%;&:hover{background:", ";}", " ", " ", " ", " ", "  ", ""], props => props.white ? 'white' : utils.getColor('gray240'), utils.getColor('gray120'), utils.getColor('gray210'), props => polished.desaturate(0.6, polished.lighten(0.5, utils.getColor("main")(props))), utils.ifProp('checked', styled.css(["&,&:hover{border-color:", ";background-color:", ";border-left-width:1px;color:#fff;cursor:default;}"], utils.getColor('main'), utils.getColor('main'))), props => props.isFirst && "\n    border-left-width: 1px;\n  ", props => props.isFirst !== undefined && !props.isFirst && "\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    &:focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  ", props => props.isLast !== undefined && !props.isLast && "\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    &:focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  ", utils.media.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    min-width: 0;\n    ", "\n  "])), props => props.icon ? "\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    " : "\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    "), utils.customTheme('TabButton'));
 const InnerButton$1 = /*#__PURE__*/styled__default["default"].a.withConfig({
   displayName: "TabRadiobox__InnerButton",
   componentId: "sc-1vu3bcn-1"
@@ -5157,7 +5196,7 @@ const _excluded = ["label", "white", "icon"];
 const Tab = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "CleanTabRadiobox__Tab",
   componentId: "sc-uh7jfp-0"
-})(["width:100%;font-size:16px;color:", ";font-weight:500;margin-left:0;padding:12px 2.5rem;flex-grow:1;height:100%;border-bottom:1px solid ", ";position:relative;", " ", ""], utils.getColor("gray120"), utils.getColor("gray210"), props => props.checked ? styled.css(["color:", ";:after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:", ";border-radius:10px;}"], utils.getColor("main"), utils.getColor("main")) : styled.css(["cursor:pointer;:hover{color:", ";}"], utils.getColor("gray90")), utils.customTheme('CleanTabButton'));
+})(["width:100%;font-size:16px;color:", ";font-weight:500;margin-left:0;padding:12px 2.5rem;flex-grow:1;height:100%;border-bottom:1px solid ", ";position:relative;", " ", ""], utils.getColor("gray120"), utils.getColor("gray210"), props => props.checked ? styled.css(["color:", ";&:after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:", ";border-radius:10px;}"], utils.getColor("main"), utils.getColor("main")) : styled.css(["cursor:pointer;&:hover{color:", ";}"], utils.getColor("gray90")), utils.customTheme('CleanTabButton'));
 const InnerButton = /*#__PURE__*/styled__default["default"].a.withConfig({
   displayName: "CleanTabRadiobox__InnerButton",
   componentId: "sc-uh7jfp-1"
@@ -5290,7 +5329,10 @@ exports.EditableBox = EditableBox;
 exports.EnhanceInput = EnhanceInput;
 exports.ErrorFilterProvider = ErrorFilterProvider;
 exports.Errors = Errors;
+exports.ErrorsCloseIcon = ErrorsCloseIcon;
+exports.ErrorsContainer = ErrorsContainer;
 exports.ErrorsContext = ErrorsContext;
+exports.ErrorsItem = ErrorsItem;
 exports.ExpandableBox = ExpandableBox;
 exports.Field = Field;
 exports.FieldBox = FieldBox;
@@ -5298,6 +5340,7 @@ exports.FieldBoxAction = FieldBoxAction;
 exports.FieldBoxHelpText = FieldBoxHelpText;
 exports.FieldBoxIcon = FieldBoxIcon;
 exports.FieldDescription = FieldDescription;
+exports.FieldLabel = FieldLabel;
 exports.FileInput = FileInput;
 exports.FloatLabelTextInput = FloatLabelTextInput;
 exports.Form = Form;