pge-front-common 6.0.4 → 6.0.6

package/lib/index.esm.js

@@ -4,6 +4,36 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$6 = ":root {\r\n  --color-primary-pge-commom: #005a92;\r\n  --color-hover-pge-commom: #005a92;\r\n  --color-icon-pge-commom: #4a4a4b;\r\n  --color-success-pge-commom: #198754;\r\n  --color-warning-pge-commom: #cb8700;\r\n  --color-alert-pge-commom: #cb0a0a;\r\n  --color-information-pge-commom: #1a95b0;\r\n  --color-border-pge-commom: #d9d9d9;\r\n  --color-light-grey-pge-commom: #c3c3c3;\r\n  --color-grey-pge-commom: #a0a0a0;\r\n  --color-base-white-pge-commom: #ffffff;\r\n  --color-base-black-pge-commom: #303030;\r\n}\r\n";
+styleInject(css_248z$6);
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -63,6 +93,9 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var css_248z$5 = ".button {\r\n  all: unset;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  cursor: pointer;\r\n  padding: 12px 16px;\r\n  border-radius: 8px;\r\n  min-width: 70px;\r\n}\r\n\r\n.button.primary {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  border: 1px solid #005a92;\r\n  background: #005a92;\r\n  color: #ffffff;\r\n  font-weight: 700;\r\n}\r\n\r\n.button.primary:hover {\r\n  opacity: 1;\r\n  background-color: rgb(0 67 109);\r\n}\r\n\r\n.button.secondary {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  border: 1px solid #005a92;\r\n  background: transparent;\r\n  color: #005a92;\r\n  font-weight: 700;\r\n}\r\n\r\n.button:disabled {\r\n  cursor: not-allowed;\r\n}\r\n";
+styleInject(css_248z$5);
+
 function Button(_a) {
     var variant = _a.variant, _b = _a.text, text = _b === void 0 ? "" : _b, leftIcon = _a.leftIcon, props = __rest(_a, ["variant", "text", "leftIcon"]);
     return (React__default.createElement("button", __assign({ className: "button ".concat(variant) }, props),
@@ -3161,6 +3194,9 @@ var ModalConfirm = function (_a) {
             React__default.createElement(Button, { variant: "primary", text: "A\u00E7\u00E3o" }))));
 };
 
+var css_248z$4 = ".inputContainer {\r\n  width: 100%;\r\n  height: 100px;\r\n  color: #30303090;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.label {\r\n  color: #303030;\r\n  width: 100%;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n\r\n.label__required {\r\n  color: red;\r\n}\r\n\r\n.inputWrapper {\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  line-height: 21px;\r\n  text-align: left;\r\n  border: 1px solid #cfcfcffc;\r\n  transition: all 100ms;\r\n}\r\n\r\n.inputWrapper.hasError {\r\n  border-color: #cb0a0a80;\r\n  outline-color: #cb0a0a60;\r\n}\r\n\r\n.inputWrapper:focus {\r\n  outline: 0 none;\r\n  outline-offset: 0;\r\n  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\r\n  border-color: #007bff;\r\n}\r\n\r\n.inputContent {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 46px;\r\n}\r\n\r\n.icon {\r\n  width: 20px;\r\n  height: 20px;\r\n  margin: 14px 8px;\r\n  position: absolute;\r\n}\r\n\r\n.styledInput {\r\n  color: #30303090;\r\n  cursor: pointer;\r\n  padding: 14px 0 14px 10px;\r\n  width: 90%;\r\n  border: none;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.styledInput.textAlignEnd {\r\n  text-align: right;\r\n  margin-left: 25px;\r\n  margin-right: 20px;\r\n}\r\n\r\n.styledInput.textAlignCenter {\r\n  text-align: center;\r\n  margin: auto;\r\n  padding-right: 10px;\r\n}\r\n\r\n.styledInput.textAlignStart {\r\n  text-align: left;\r\n}\r\n\r\n.styledInput::placeholder {\r\n  color: #30303020;\r\n  line-height: 20px;\r\n}\r\n\r\n.message {\r\n  color: #303030;\r\n  margin-left: 10px;\r\n  margin-top: 4px;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  line-height: 15px;\r\n  text-align: left;\r\n}\r\n\r\n.message.hasError {\r\n  color: #cb0a0a;\r\n}\r\n\r\n.arrowIcon {\r\n  position: absolute;\r\n  margin: auto;\r\n  margin-right: 8px;\r\n  right: 6px;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.arrowIcon.open {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.dropDownContainer {\r\n  display: none;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  background-color: #fff;\r\n  margin-top: 5px;\r\n  outline: solid #cfcfcffc 1.5px;\r\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\r\n  border-radius: 8px;\r\n}\r\n\r\n.dropDownContainer.open {\r\n  display: flex;\r\n  position: absolute;\r\n  z-index: 999;\r\n  min-height: 56px;\r\n  top: 80px;\r\n}\r\n\r\n.dropDownContent {\r\n  width: 95%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-self: center;\r\n  margin-top: 5px;\r\n  border-radius: 8px;\r\n  background-color: #005a9200;\r\n}\r\n\r\n.dropDownItem {\r\n  display: flex;\r\n  min-height: 46px;\r\n  align-items: center;\r\n  justify-content: start;\r\n  background-color: #fff;\r\n  border-radius: 4px;\r\n  padding-left: 15px;\r\n  margin-bottom: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.dropDownItem:hover {\r\n  background-color: #005a921a;\r\n  width: 100%;\r\n}\r\n\r\n.dropDownItem.active {\r\n  background-color: #005a921a;\r\n}\r\n";
+styleInject(css_248z$4);
+
 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),
     React__default.createElement("path", { d: "M8.6665 12.5L3.6665 7.5L5.0665 6.05L7.6665 8.65V0.5H9.6665V8.65L12.2665 6.05L13.6665 7.5L8.6665 12.5ZM2.6665 16.5C2.1165 16.5 1.64567 16.3042 1.254 15.9125C0.862337 15.5208 0.666504 15.05 0.666504 14.5V11.5H2.6665V14.5H14.6665V11.5H16.6665V14.5C16.6665 15.05 16.4707 15.5208 16.079 15.9125C15.6873 16.3042 15.2165 16.5 14.6665 16.5H2.6665Z", fill: "#4A4A4B" }))); };
 
@@ -3387,7 +3423,7 @@ var Select = function (_a) {
         React__default.createElement("label", { htmlFor: name, className: "label" },
             label,
             hasIconRequired && React__default.createElement("span", { className: "label__required" }, "*")),
-        React__default.createElement("div", { className: "inputWrapper ".concat(hasError ? "hasError" : ""), onClick: handleOpenDropdown },
+        React__default.createElement("div", { className: "inputWrapper ".concat(hasError ? "hasError" : ""), onClick: handleOpenDropdown, tabIndex: 0 },
             React__default.createElement("div", { className: "inputContent" },
                 React__default.createElement("div", { className: "styledInput ".concat(textAlign === "end" ? "textAlignEnd" : textAlign === "center" ? "textAlignCenter" : "textAlignStart") }, (_c = selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : defaultValue) !== null && _c !== void 0 ? _c : placeholder),
                 React__default.createElement("div", { className: "arrowIcon ".concat(isOpen ? "open" : "") },
@@ -3408,6 +3444,12 @@ var Select = function (_a) {
         !hasError && message && React__default.createElement("p", { className: "message" }, message)));
 };
 
+var css_248z$3 = ".separator_background {\r\n  background-color: rgb(188 157 50);\r\n  width: 100%;\r\n  height: 4px;\r\n  opacity: 1;\r\n}\r\n.container {\r\n  height: 100%;\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 28px 72px;\r\n  min-width: 1024px;\r\n}\r\n\r\n.wrapper-menu {\r\n  display: flex;\r\n  gap: 33px;\r\n  align-items: center;\r\n}\r\n\r\n.container-header-index {\r\n  width: 100%;\r\n  max-height: 6rem;\r\n  font-size: 2rem;\r\n  box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.19);\r\n  margin-bottom: 32px;\r\n}\r\n\r\n.container-header-index.set_shadow {\r\n  border-radius: 0px 0px 16px 16px;\r\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n@media (min-width: 640px) {\r\n  .container-header-index {\r\n    max-height: 6rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .container-header-index {\r\n    max-height: 13rem;\r\n  }\r\n}\r\n";
+styleInject(css_248z$3);
+
+var css_248z$2 = ".dropdown {\r\n  position: absolute;\r\n  border: 1px solid rgb(197, 197, 197);\r\n  background: #fff;\r\n  padding: 8px 0;\r\n  color: #0062cc;\r\n  border-radius: 4px;\r\n  z-index: 400;\r\n  min-width: 280px;\r\n  box-shadow: rgba(197, 164, 164, 0.35) 0px 5px 15px;\r\n  cursor: pointer;\r\n}\r\n\r\n.primary-dropdown {\r\n  margin: 0;\r\n  padding: 0.375rem 0.88rem 0.88rem 0.88rem;\r\n  min-width: 280px;\r\n  color: #303030;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  text-align: left;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  cursor: pointer;\r\n  min-height: 50px;\r\n  border: none;\r\n\r\n  -webkit-appearance: button;\r\n  background-color: transparent;\r\n  background-image: none;\r\n}\r\n\r\n.primary-dropdown:hover {\r\n  background-color: #005a921a;\r\n  width: 100%;\r\n}\r\n\r\n.primary-dropdown__disabled {\r\n  color: #c3c3c3;\r\n}\r\n\r\n.primary-dropdown__home {\r\n  font-weight: 700;\r\n}\r\n\r\n.primary-dropdown__submenu {\r\n  font-size: 16px;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  padding-left: 30px;\r\n}\r\n\r\n.content-icon {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.content-icon.active {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.content-icon.inactive {\r\n  transform: rotate(180deg);\r\n}\r\n";
+styleInject(css_248z$2);
+
 var DropDown = function (_a) {
     var options = _a.options, optionSelection = _a.optionSelection, restProps = __rest(_a, ["options", "optionSelection"]);
     var _b = useState(false), showSubMenu = _b[0], setShowSubMenu = _b[1];
@@ -3477,6 +3519,9 @@ var Menu = function (_a) {
         showDropDown && (React__default.createElement(DropDown, { options: options, showDropDown: showDropDown, toggleDropDown: toggleDropDown, optionSelection: handleSelectOption }))));
 };
 
+var css_248z$1 = ".wrapperButtonUser {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 30px;\r\n}\r\n\r\n.contentUser {\r\n  background-color: #ffffff;\r\n  min-width: 200px;\r\n  width: 100%;\r\n  height: 56px;\r\n  border-radius: 10px;\r\n  border: 1px solid #d9d9d9;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 4px 0;\r\n  gap: 25px;\r\n  box-shadow: 0px 2px 2px 0px #00000040;\r\n  justify-content: center;\r\n}\r\n\r\n.wrappername {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.name {\r\n  padding: 0;\r\n  font-size: 14px;\r\n  color: #303030;\r\n  line-height: 20px;\r\n  text-align: left;\r\n}\r\n\r\n.custom-button {\r\n  cursor: pointer;\r\n  display: block;\r\n  font-size: 0.875rem;\r\n  border: none;\r\n  transition: font-weight 0.3s ease;\r\n  background: transparent;\r\n}\r\n\r\n.custom-button:hover {\r\n  font-weight: bold;\r\n}\r\n\r\n.button-content {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.button-text {\r\n  margin-left: 0.625rem;\r\n  margin-top: -0.125rem;\r\n  color: #005a92;\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n  line-height: 21px;\r\n  text-align: center;\r\n}\r\n";
+styleInject(css_248z$1);
+
 function UserButton(_a) {
     var name = _a.name, userName = _a.userName, handleLogout = _a.handleLogout;
     var _b = useState(false), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
@@ -3524,6 +3569,9 @@ var Header = function (_a) {
                 React__default.createElement(UserButton, { name: name, userName: userName, handleLogout: handleLogout })))));
 };
 
+var css_248z = "/* styles.css */\r\n\r\n.containerDivIndex {\r\n  display: flex;\r\n  flex-direction: column;\r\n  min-height: 10px;\r\n  max-width: 1240px;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n  padding: 20px;\r\n  margin-top: -32px;\r\n  margin-bottom: -32px;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.footerImageWrapper {\r\n  display: flex;\r\n  margin: 0;\r\n  justify-content: center;\r\n  position: absolute;\r\n  width: 100%;\r\n  bottom: 20px;\r\n}\r\n\r\n.footerImage {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n.footer {\r\n  width: 100%;\r\n  position: relative;\r\n  z-index: 0;\r\n}\r\n\r\n.footerLogoWrapper {\r\n  display: flex;\r\n  margin: 0;\r\n  justify-content: center;\r\n  padding-top: 32px;\r\n  background-color: #005a92;\r\n}\r\n\r\n.footerLogo {\r\n  max-width: 144px;\r\n}\r\n\r\n.footerVersion {\r\n  display: flex;\r\n  margin: 0;\r\n  justify-content: center;\r\n  color: #d1d5db;\r\n  font-size: 9px;\r\n  background-color: #005a92;\r\n}\r\n\r\n.footerAddress {\r\n  display: flex;\r\n  margin: 0;\r\n  justify-content: center;\r\n  color: white;\r\n  font-size: 12px;\r\n  background-color: #005a92; /* Substitua com a cor primária */\r\n  padding-top: 8px;\r\n  padding-bottom: 8px;\r\n}\r\n\r\n.footerCopyright {\r\n  display: flex;\r\n  margin: 0;\r\n  justify-content: center;\r\n  color: white;\r\n  font-size: 10px;\r\n  background-color: #000000;\r\n  padding-top: 8px;\r\n  padding-bottom: 12px;\r\n}\r\n";
+styleInject(css_248z);
+
 var LogoFooterLight = function (props) { return (React__default.createElement("svg", __assign({ width: "165", height: "64", viewBox: "0 0 165 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" }, props),
     React__default.createElement("rect", { y: "0.981201", width: "165", height: "62.6506", fill: "url(#pattern0_3766_1228)" }),
     React__default.createElement("defs", null,