pge-front-common 14.0.50 → 14.0.51

package/lib/index.js

@@ -8568,26 +8568,71 @@ var SelectMult = function (_a) {
         !hasError && message && React.createElement("p", { className: styles$g.message }, message)));
 };
 
-var css_248z$f = ".styles-module__selectContainer___uFP2d {\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___uFP2d 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 (max-width: 480px) {\r\n  .styles-module__selectContainer___uFP2d label {\r\n    font-size: var(--font-size-14);\r\n  }\r\n}\r\n\r\n.styles-module__errorText___grCcq {\r\n  font-size: var(--font-size-12);\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___PNeLN {\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___SAMFM {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px;\r\n}\r\n\r\n.styles-module__iconChefron___Cp81j {\r\n  color: var(--color-label);\r\n}\r\n";
+var css_248z$f = ".styles-module__selectContainer___uFP2d {\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___uFP2d 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 (max-width: 480px) {\r\n  .styles-module__selectContainer___uFP2d label {\r\n    font-size: var(--font-size-12);\r\n  }\r\n}\r\n\r\n.styles-module__errorText___grCcq {\r\n  font-size: var(--font-size-12);\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___PNeLN {\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___SAMFM {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px;\r\n}\r\n\r\n.styles-module__iconChefron___Cp81j {\r\n  color: var(--color-label);\r\n}\r\n";
 var styles$f = {"selectContainer":"styles-module__selectContainer___uFP2d","errorText":"styles-module__errorText___grCcq","errorRequired":"styles-module__errorRequired___PNeLN","contentIcon":"styles-module__contentIcon___SAMFM","iconChefron":"styles-module__iconChefron___Cp81j"};
 styleInject(css_248z$f);
 
-var selectColourStyles$1 = function (isInvalid) { return ({
+function useDarkMode() {
+    var isClient = typeof document !== 'undefined';
+    var _a = React.useState(function () { return isClient && document.body.classList.contains('dark-mode'); }), isDarkMode = _a[0], setIsDarkMode = _a[1];
+    React.useEffect(function () {
+        if (!isClient)
+            return;
+        var updateDarkMode = function (mutationsList) {
+            for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
+                var mutation = mutationsList_1[_i];
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'class') {
+                    setIsDarkMode(document.body.classList.contains('dark-mode'));
+                }
+            }
+        };
+        var observer = new MutationObserver(updateDarkMode);
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        return function () { return observer.disconnect(); };
+    }, [isClient]);
+    return isDarkMode;
+}
+
+function useIsMobile(breakpoint) {
+    if (breakpoint === void 0) { breakpoint = 480; }
+    var _a = React.useState(function () {
+        if (typeof window === 'undefined')
+            return false;
+        return window.innerWidth <= breakpoint;
+    }), isMobile = _a[0], setIsMobile = _a[1];
+    React.useEffect(function () {
+        function handleResize() {
+            setIsMobile(window.innerWidth <= breakpoint);
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [breakpoint]);
+    return isMobile;
+}
+
+var selectColourStyles$1 = function (isInvalid, isDarkMode, isMobile) { return ({
     control: function (styles, _a) {
         var isFocused = _a.isFocused;
         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
                 ? "0px 0px 0px 2px #DC354580"
                 : isFocused
                     ? "0px 0px 0px 2px #0091ea80"
-                    : "0px hsl(0, 0%, 96%)", backgroundColor: "white" }));
+                    : "0px hsl(0, 0%, 96%)", backgroundColor: isDarkMode ? "#2D2D2E" : "#fff" }));
     },
     option: function (styles, _a) {
-        var isDisabled = _a.isDisabled, isSelected = _a.isSelected, isFocused = _a.isFocused;
-        return (__assign(__assign({}, styles), { cursor: isDisabled ? "not-allowed" : "default", color: isDisabled ? "white" : "#303030CC", backgroundColor: isFocused
-                ? "#005a921a"
-                : isSelected
-                    ? "transparent"
-                    : "white" }));
+        var isDisabled = _a.isDisabled, isFocused = _a.isFocused;
+        return (__assign(__assign({}, styles), { cursor: isDisabled ? "not-allowed" : "default", color: isDisabled ? "white" : isDarkMode ? "#fff" : "#303030CC", backgroundColor: isDarkMode
+                ? isFocused ? "#303030" : "#4B4B4C"
+                : isFocused ? "#005A921A" : "#fff", fontSize: isMobile ? "12px" : "14px", ":hover": {
+                backgroundColor: isDarkMode
+                    ? isFocused ? "#303030" : "#4B4B4C"
+                    : isFocused ? "#005A921A" : "#fff",
+            } }));
     },
     multiValue: function (styles) { return (__assign(__assign({}, styles), { backgroundColor: "#005a921a", borderRadius: "9px" })); },
     multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { color: "#30303090" })); },
@@ -8595,24 +8640,27 @@ var selectColourStyles$1 = function (isInvalid) { return ({
             backgroundColor: "#005a921a",
             color: "#30303090",
         } })); },
-    placeholder: function (styles) { return (__assign(__assign({}, styles), { color: isInvalid ? "#CB0A0A" : "#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 ? "#CB0A0A" : isDarkMode ? "#fff" : "#30303066", fontSize: isMobile ? "12px" : "14px", fontWeight: "700", lineHeight: "24px" })); },
+    singleValue: function (styles) { return (__assign(__assign({}, styles), { color: isInvalid ? "#CB0A0A" : isDarkMode ? "#fff" : "#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" }));
     },
+    menu: function (base) { return (__assign(__assign({}, base), { backgroundColor: isDarkMode ? "#2D2D2E" : "#fff", borderRadius: "8px" })); },
+    menuList: function (base) { return (__assign(__assign({}, base), { backgroundColor: isDarkMode ? "#4B4B4C" : "#fff", padding: "0.5rem 0", borderRadius: "8px" })); },
 }); };
 var BasicSelect = function (_a) {
     var name = _a.name, 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;
+    var isDarkMode = useDarkMode();
+    var isMobile = useIsMobile();
     var CustomDropdownIndicator = function () { return (React__namespace.createElement("div", { className: styles$f.contentIcon },
         React__namespace.createElement(IconTriangleRecall, { className: styles$f.iconChefron }))); };
     return (React__namespace.createElement("div", { className: "".concat(styles$f.selectContainer) },
-        label && (React__namespace.createElement("label", { htmlFor: name },
+        label && (React__namespace.createElement("label", { htmlFor: name, className: styles$f.labelText },
             label,
-            " ",
             isRequired ? React__namespace.createElement("span", { className: styles$f.errorRequired }, "*") : null)),
         React__namespace.createElement("div", { className: styles$f.selectElement },
-            React__namespace.createElement(StateManagedSelect$1, { inputId: name, isMulti: false, isDisabled: isDisabled, options: optionsSelect, value: optionsSelect.find(function (opt) { return opt.value === value; }) || value, onChange: handleChange, placeholder: placeholder, styles: selectColourStyles$1(hasError), isClearable: true, isSearchable: true, noOptionsMessage: function () { return "Nenhuma opção disponível"; }, components: { DropdownIndicator: CustomDropdownIndicator }, "aria-label": typeof label === 'string' ? label : (placeholder || "Campo para seleção") })),
+            React__namespace.createElement(StateManagedSelect$1, { inputId: name, isMulti: false, isDisabled: isDisabled, options: optionsSelect, value: optionsSelect.find(function (opt) { return opt.value === value; }) || value, onChange: handleChange, placeholder: placeholder, styles: selectColourStyles$1(hasError, isDarkMode, isMobile), isClearable: true, isSearchable: true, noOptionsMessage: function () { return "Nenhuma opção disponível"; }, components: { DropdownIndicator: CustomDropdownIndicator }, "aria-label": typeof label === 'string' ? label : (placeholder || "Campo para seleção") })),
         hasError && (React__namespace.createElement("span", { className: styles$f.errorText }, "Campo obrigat\u00F3rio ou inv\u00E1lido"))));
 };