pge-front-common 14.0.41 → 14.0.43

package/lib/index.esm.js

@@ -115,9 +115,9 @@ var InputBase = function (_a) {
                     _b[styles$y.textInputDanger] = restrictionMessage,
                     _b)), style: __assign({ paddingLeft: leftIcon ? "36px" : "8px", paddingRight: rightIcon ? "36px" : "8px" }, style), id: props.name, value: value }, props, { disabled: disabled })),
             rightIcon && (React__default.createElement("button", { tabIndex: -1, type: "button", className: styles$y.iconWrapperRight, onClick: function () { return onRightIconClick === null || onRightIconClick === void 0 ? void 0 : onRightIconClick(); }, "aria-label": "A\u00E7\u00E3o ao clicar no \u00EDcone ao lado direito" }, rightIcon))),
-        React__default.createElement("div", { className: styles$y.messageContainer },
+        (restrictionMessage || showCounter) && (React__default.createElement("div", { className: styles$y.messageContainer },
             React__default.createElement("div", { className: styles$y.messageWrapper }, restrictionMessage && (React__default.createElement("div", { className: styles$y.restrictionMessage }, restrictionMessage))),
-            showCounter && (React__default.createElement("div", { className: "".concat(styles$y.counter, " ").concat(restrictionMessage ? styles$y.messageError : "") }, characterCount)))));
+            showCounter && (React__default.createElement("div", { className: "".concat(styles$y.counter, " ").concat(restrictionMessage ? styles$y.messageError : "") }, characterCount))))));
 };
 
 var IconDownload = function (props) { return (React__default.createElement("svg", __assign({ width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
@@ -740,11 +740,11 @@ var TextareaBase = function (_a) {
                                 : "0"
                             : "8px",
                     }, rows: rows, required: required })))),
-        React__default.createElement("div", { className: styles$r.messageContainer },
+        (textError && hasError || !hasError && message || showCounter) && (React__default.createElement("div", { className: styles$r.messageContainer },
             React__default.createElement("div", { className: styles$r.messageWrapper },
                 textError && hasError && (React__default.createElement("div", { className: "".concat(styles$r.message, " ").concat(styles$r.messageError) }, textError)),
                 !hasError && message && (React__default.createElement("div", { className: styles$r.message }, message))),
-            showCounter && (React__default.createElement("div", { className: "".concat(styles$r.counter, " ").concat(textError && hasError ? styles$r.messageError : "") }, characterCount)))));
+            showCounter && (React__default.createElement("div", { className: "".concat(styles$r.counter, " ").concat(textError && hasError ? styles$r.messageError : "") }, characterCount))))));
 };
 
 var css_248z$t = ".radioGroup-module__inputContainer___0cHBx {\r\n  width: 306px;\r\n  color: var(--color-label);\r\n}\r\n\r\n.radioGroup-module__label___Ziyuh {\r\n  color: var(--color-label);\r\n  width: 100%;\r\n  font-family: var(--font-open-sans-serif);\r\n  font-size: var(--input-font-size);\r\n  font-weight: var(--input-font-weight);\r\n  line-height: var(--input-line-height);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__labelRequired___q7SOr::after {\r\n  content: \" *\";\r\n  color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__labelError___Ulm2e {\r\n  color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__inputWrapper___wbpEu {\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  font-family: \"Open Sans\", sans-serif;\r\n  font-size: var(--input-font-size);\r\n  font-weight: var(--input-font-weight);\r\n  line-height: var(--input-line-height);\r\n  text-align: left;\r\n}\r\n\r\n.radioGroup-module__inputContent___g2v-v {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n}\r\n\r\n.radioGroup-module__message___FoIYt {\r\n  color: var(--color-label);\r\n  margin-left: 10px;\r\n  margin-top: 0;\r\n  font-family: \"Open Sans\", sans-serif;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  line-height: 14px;\r\n  text-align: left;\r\n}\r\n\r\n.radioGroup-module__messageError___5BsQY {\r\n  color: var(--color-danger);\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0.4rem 0rem;\r\n  font-size: 14px;\r\n  font-family: var(--font-open-sans-regular);\r\n  outline: none;\r\n  line-height: 24px;\r\n  font-weight: 400;\r\n  transition: border-color 0.3s;\r\n  cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb.radioGroup-module__horizontal___J4nzL {\r\n  flex-direction: row;\r\n}\r\n\r\n.radioGroup-module__radioGroup___YpgFb.radioGroup-module__vertical___t-DLk {\r\n  flex-direction: column;\r\n}\r\n\r\n.radioGroup-module__radioLabel___wJDuM {\r\n  margin-right: 10px;\r\n  display: flex;\r\n  align-items: center;\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__inputContainer___0cHBx input[type=\"radio\" i] {\r\n  background-color: initial;\r\n  cursor: pointer;\r\n  appearance: auto;\r\n  box-sizing: border-box;\r\n  margin: 1px 5px 0px 5px;\r\n  padding: initial;\r\n  border: initial;\r\n  transform: scale(1.25); /* tamanho do radio */\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"] {\r\n  border: 1px solid var(--color-danger);\r\n  appearance: none;\r\n  width: 13px;\r\n  height: 13px;\r\n  border-radius: 50%;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"]:checked {\r\n  accent-color: var(--color-danger);\r\n  appearance: auto;\r\n}\r\n\r\n.radioGroup-module__inputWrapperError___91QS1 input[type=\"radio\"]:disabled {\r\n  accent-color: var(--color-border);\r\n  appearance: auto;\r\n}\r\n";
@@ -20971,7 +20971,7 @@ var DateInput = function (_a) {
         restrictionMessage && (React__default.createElement("div", { className: styles$b.restrictionMessage }, restrictionMessage))));
 };
 
-var css_248z$8 = ".styles-module__selectContainer___TecDY {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.styles-module__selectContainer___TecDY label {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 700;\r\n  line-height: 24px;\r\n  color: var(--color-label);\r\n}\r\n\r\n.styles-module__errorText___kXCnM {\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  line-height: 15px;\r\n  text-align: left;\r\n  color: var(--color-danger);\r\n  margin-left: 8px;\r\n}\r\n\r\n.styles-module__errorRequired___SEaAS {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 700;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--color-danger);\r\n}\r\n\r\n.styles-module__contentIcon___hPEpA {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px;\r\n}\r\n\r\n.styles-module__iconChefron___B2-9- {\r\n  color: var(--color-label);\r\n}\r\n";
+var css_248z$8 = ".styles-module__selectContainer___TecDY {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.styles-module__selectContainer___TecDY label {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 700;\r\n  line-height: 24px;\r\n  color: var(--color-label);\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n  .styles-module__selectContainer___TecDY label {\r\n    font-size: var(--font-size-12);\r\n  }\r\n}\r\n\r\n.styles-module__errorText___kXCnM {\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  line-height: 15px;\r\n  text-align: left;\r\n  color: var(--color-danger);\r\n  margin-left: 8px;\r\n}\r\n\r\n.styles-module__errorRequired___SEaAS {\r\n  font-size: var(--font-size-16);\r\n  font-weight: 700;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: var(--color-danger);\r\n}\r\n\r\n.styles-module__contentIcon___hPEpA {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px;\r\n}\r\n\r\n.styles-module__iconChefron___B2-9- {\r\n  color: var(--color-label);\r\n}\r\n";
 var styles$6 = {"selectContainer":"styles-module__selectContainer___TecDY","errorText":"styles-module__errorText___kXCnM","errorRequired":"styles-module__errorRequired___SEaAS","contentIcon":"styles-module__contentIcon___hPEpA","iconChefron":"styles-module__iconChefron___B2-9-"};
 styleInject(css_248z$8);
 
@@ -21437,7 +21437,7 @@ function useController(props) {
     };
 }
 
-var selectColourStyles = function (isInvalid) { return ({
+var selectColourStyles = function (isInvalid, isMobile) { return ({
     control: function (styles, _a) {
         var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
         return (__assign(__assign({}, styles), { alignItems: "center", cursor: "pointer", display: "flex", flexWrap: "wrap", justifyContent: "space-between", minHeight: "48px", outline: "0", position: "relative", transition: "all 100ms", borderColor: isInvalid ? "#CB0A0A" : isFocused ? "#1a95b0" : "#cfcfcffc", borderRadius: "9px", borderStyle: "solid", borderWidth: "1px", boxSizing: "border-box", boxShadow: isInvalid
@@ -21460,8 +21460,8 @@ var selectColourStyles = function (isInvalid) { return ({
             backgroundColor: "#005a921a",
             color: "#30303090",
         } })); },
-    placeholder: function (styles) { return (__assign(__assign({}, styles), { color: isInvalid ? "#30303066" : "#30303066", fontSize: "14px", fontWeight: "700", lineHeight: "24px" })); },
-    singleValue: function (styles) { return (__assign(__assign({}, styles), { color: isInvalid ? "#CB0A0A" : "#303030CC", fontSize: "14px", fontWeight: "700", lineHeight: "24px" })); },
+    placeholder: function (styles) { return (__assign(__assign({}, styles), { color: isInvalid ? "#30303066" : "#30303066", fontSize: isMobile ? "12px" : "14px", fontWeight: "700", lineHeight: "24px" })); },
+    singleValue: function (styles) { return (__assign(__assign({}, styles), { color: isInvalid ? "#CB0A0A" : "#303030CC", fontSize: isMobile ? "12px" : "14px", fontWeight: "700", lineHeight: "24px" })); },
     indicatorSeparator: function (styles, _a) {
         var hasValue = _a.hasValue;
         return (__assign(__assign({}, styles), { display: hasValue ? "block" : "none" }));
@@ -21470,10 +21470,18 @@ var selectColourStyles = function (isInvalid) { return ({
 var SelectDefault = function (_a) {
     var name = _a.name, control = _a.control, optionsSelect = _a.optionsSelect, placeholder = _a.placeholder, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, label = _a.label, _c = _a.hasError, hasError = _c === void 0 ? false : _c, handleChange = _a.handleChange, isRequired = _a.isRequired, value = _a.value, handleInputChange = _a.handleInputChange;
     var _d = useController({ name: name, control: control }), _e = _d.field; _e.onChange; _e.value; var rest = __rest(_e, ["onChange", "value"]), error = _d.fieldState.error;
+    var _f = React.useState(typeof window !== "undefined" && window.innerWidth <= 768), isMobile = _f[0], setIsMobile = _f[1];
     var CustomDropdownIndicator = function () {
         return (React.createElement("div", { className: styles$6.contentIcon },
             React.createElement(IconTriangleRecall, { className: styles$6.iconChefron })));
     };
+    React.useEffect(function () {
+        function onResize() {
+            setIsMobile(window.innerWidth <= 768);
+        }
+        window.addEventListener("resize", onResize);
+        return function () { return window.removeEventListener("resize", onResize); };
+    }, []);
     return (React.createElement("div", { className: "".concat(styles$6.selectContainer) },
         label && (React.createElement("label", null,
             label,
@@ -21484,7 +21492,7 @@ var SelectDefault = function (_a) {
                     if (inputValue) {
                         handleInputChange === null || handleInputChange === void 0 ? void 0 : handleInputChange(inputValue);
                     }
-                }, placeholder: placeholder, styles: selectColourStyles(hasError || !!error), isClearable: true, isSearchable: true, noOptionsMessage: function () { return "Nenhuma opção disponível"; }, components: { DropdownIndicator: CustomDropdownIndicator } }, rest))),
+                }, placeholder: placeholder, styles: selectColourStyles(hasError || !!error, isMobile), isClearable: true, isSearchable: true, noOptionsMessage: function () { return "Nenhuma opção disponível"; }, components: { DropdownIndicator: CustomDropdownIndicator } }, rest))),
         error && React.createElement("span", { className: styles$6.errorText }, error.message)));
 };