oa-componentbook 1.0.1-stage.40 → 1.0.1-stage.401

package/build/widgets/oa-widget-progressive-steps/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitButton = exports.StepsContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StepsContainer = exports.StepsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .stepQanAnsBox {\n    line-height: normal;\n    margin-bottom: 24px;\n  }\n  .ant-steps.ant-steps-vertical > .ant-steps-item .ant-steps-item-icon {\n    margin-inline-end: 12px;\n    border: none;\n    width: 28px;\n    height: 28px;\n    line-height: normal;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .ant-steps\n    .ant-steps-item-process\n    > .ant-steps-item-container\n    > .ant-steps-item-tail::after,\n  .ant-steps\n    .ant-steps-item-finish\n    > .ant-steps-item-container\n    > .ant-steps-item-tail::after {\n    background-color: #e0e0e0;\n  }\n  .ant-steps .ant-steps-item-finish .ant-steps-item-icon {\n    background-color: #00875a;\n  }\n  .ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {\n    color: #fff;\n  }\n  .ant-steps .ant-steps-item-process .ant-steps-item-icon {\n    background-color: #014fc5;\n  }\n  .ant-steps.ant-steps-vertical > .ant-steps-item .ant-steps-item-title {\n    padding-inline-end: 0;\n    line-height: normal;\n    width: 100%;\n  }\n\n  ul.bankDetailSec {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    padding: 0;\n    margin: 0;\n  }\n  ul.bankDetailSec li {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-direction: row;\n    border: 1px solid rgb(217, 217, 217);\n    border-radius: 6px;\n    padding: 12px;\n    margin: 0;\n  }\n\n  .ant-steps-item-tail {\n    inset-inline-start: 15px !important;\n  }\n  .optionBtnSec {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n  .optionBtnSec button {\n    width: 50%;\n  }\n  .optionBtnSec button {\n    width: calc(50% - 6px);\n  }\n"])));
+const SubmitButton = exports.SubmitButton = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 32px;\n  text-align: center;\n  padding-top: 20px;\n  border-top: 1px solid #f0f0f0;\n"])));

package/build/widgets/oa-widget-reimbursement-breakup/ReimbursementBreakupWidget.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ReimbursementBreakupWidget;
+require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
-var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
 var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _styles = require("./styles");
 var _utils = require("../../utils");
 var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * A React component that displays a reimbursement amount breakup in a modal dialog.
@@ -40,10 +41,10 @@ function ReimbursementBreakupWidget(props) {
   }];
 
   /**
-  * Determines the class name based on the type of table row.
-  * @param {string} type - The type of the table row
-  * @returns {string} The class name for the table row
-  */
+   * Determines the class name based on the type of table row.
+   * @param {string} type - The type of the table row
+   * @returns {string} The class name for the table row
+   */
   const getClassForTableRow = type => {
     switch (type) {
       case 'HEADER':
@@ -59,11 +60,11 @@ function ReimbursementBreakupWidget(props) {
     title: heading,
     onClose: closeBreakUpModal
   }, /*#__PURE__*/_react.default.createElement(_styles.WidgetContainer, null, cardData === null || cardData === void 0 ? void 0 : cardData.map(item => {
-    var _item$tableRows, _item$tableRows2;
+    var _item$tableRows, _item$gridInfo, _item$gridInfo2, _item$gridInfo3, _item$gridInfo4, _item$tableRows2, _item$tableRows3;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "rmbsProdAmt",
       key: (0, _utils.getUUID)()
-    }, item.title && /*#__PURE__*/_react.default.createElement("h5", null, item.title), item.tableType === 'NON_GRID' && /*#__PURE__*/_react.default.createElement("ul", {
+    }, item.tableType === 'NON_GRID' && /*#__PURE__*/_react.default.createElement("ul", {
       className: "calSecBox",
       id: "Claimgrid"
     }, item === null || item === void 0 || (_item$tableRows = item.tableRows) === null || _item$tableRows === void 0 ? void 0 : _item$tableRows.map(tableRow => {
@@ -84,10 +85,18 @@ function ReimbursementBreakupWidget(props) {
         "data-test": dataTest ? "".concat(dataTest, "--info-button-").concat(index) : null
         // onClick={this.scrollToRef}
       })), ' ')));
-    })), item.tableType === 'GRID' && /*#__PURE__*/_react.default.createElement("ul", {
+    })), (item === null || item === void 0 || (_item$gridInfo = item.gridInfo) === null || _item$gridInfo === void 0 ? void 0 : _item$gridInfo.length) > 0 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b3-400",
+      className: "margin-bottom-8 margin-top-4",
+      color: "primary-content"
+    }, item === null || item === void 0 || (_item$gridInfo2 = item.gridInfo) === null || _item$gridInfo2 === void 0 || (_item$gridInfo2 = _item$gridInfo2[0]) === null || _item$gridInfo2 === void 0 ? void 0 : _item$gridInfo2.title), (item === null || item === void 0 || (_item$gridInfo3 = item.gridInfo) === null || _item$gridInfo3 === void 0 ? void 0 : _item$gridInfo3.length) > 0 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b3-400",
+      className: "margin-bottom-16",
+      color: "secondary-content"
+    }, item === null || item === void 0 || (_item$gridInfo4 = item.gridInfo) === null || _item$gridInfo4 === void 0 || (_item$gridInfo4 = _item$gridInfo4[0]) === null || _item$gridInfo4 === void 0 ? void 0 : _item$gridInfo4.description), item.tableType === 'GRID' && (item === null || item === void 0 || (_item$tableRows2 = item.tableRows) === null || _item$tableRows2 === void 0 ? void 0 : _item$tableRows2.length) && /*#__PURE__*/_react.default.createElement("ul", {
       className: "listofProd",
       id: "gridView"
-    }, item === null || item === void 0 || (_item$tableRows2 = item.tableRows) === null || _item$tableRows2 === void 0 ? void 0 : _item$tableRows2.map(tableRow => {
+    }, item === null || item === void 0 || (_item$tableRows3 = item.tableRows) === null || _item$tableRows3 === void 0 ? void 0 : _item$tableRows3.map(tableRow => {
       var _tableRow$data2;
       return /*#__PURE__*/_react.default.createElement("li", {
         className: tableRow.type === 'HEADER' ? 'nonGridTableHeader' : ''

package/build/widgets/oa-widget-reimbursement-breakup/styles.js

@@ -9,4 +9,4 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const WidgetContainer = exports.WidgetContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.oaReimbursFlow {\n  background: #fff;\n  border-radius: 8px 8px 0px 0px;\n  color: #212121;\n  padding: 16px 12px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 150%;\n  display: flex;\n  flex-direction: column;\n}\n\n.amoutCalculat {\n  color: #0282F0;\n  padding: 16px 12px 0;\n  border-top: solid 1px var(--color-divider);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 150%;\n  width: calc(100% + 24px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 12px 0 0 -12px;\n  cursor: pointer;\n  justify-content: space-between;\n}\n\n.rmbsProdAmt {\n  display: flex;\n  flex-direction: column;\n}\n\n.rmbsProdAmt h5 {\n  font-style: normal;\n  color: #212121;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 22px;\n  border-top: solid 1px var(--color-divider);\n  padding: 36px 0 16px;\n}\n\nul.calSecBox {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n}\n\nul.calSecBox li {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0 0 16px;\n  gap: 16px;\n}\n\n.gridtableFooter {\n  border-top: solid 1px var(--color-divider);\n  padding: 16px 0 0 0;     \n  font-size: 14px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 22px;\n}\n\n.gridtableFooter aside {\n  font-weight: 700;\n}\n.gridtableFooter aside p{\n  color: var(--color-positive) !important;\n}\nul.calSecBox li aside {\n  color: #212121;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n.gridtableFooter aside p{\n  font-weight: 700;\n}\n\nul.calSecBox li aside+aside {\n  font-weight: 700;\n  text-align: right;\n}\n\nul.calSecBox li aside p {\n  margin: 0;\n}\n\n.infoIconScroll img {\n  width: 12px;\n  height: 12px;\n  margin: 0 0 0 5px;\n}\n\n.rmbsProdAmt ul.listofProd {\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px 4px 0px 0px;\n  border: 1px solid #F6F6F6;\n  overflow: hidden;\n  border-top: none !important;\n  border-bottom: none !important;\n  background: #FFF;\n  margin: 0;\n  padding: 0;\n}\n\n.rmbsProdAmt ul.listofProd li {\n  border-bottom: solid 1px var(--color-divider);\n  padding: 16px;\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n\n}\n\n.nonGridTableHeader {\n  background: #F6F6F6;\n  border-bottom: none;\n}\n\n.rmbsProdAmt ul.listofProd li aside {\n  color: #212121;\n  width: 100%;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; \n}\n\n.rmbsProdAmt ul.listofProd li aside.boldText {\n  font-weight: 700;\n}\n.nonGridTableHeader aside {\n  white-space: nowrap;\n  color: var(--color-secondary-content) !important;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.24px;\n  text-transform: uppercase;\n}\n#gridView{\n  border: solid 1px var(--color-divider);\n}\n.rmbsProdAmt ul#gridView{\n  border: solid 1px var(--color-divider);\n  border-radius: 4px;\n  border-top: solid 1px var(--color-divider) !important;\n}\n#gridView  li aside {\n  font-size: 14px !important;\n  line-height: 20px !important;\n}\n#gridView  li.nonGridTableHeader aside {\n  font-size: 12px !important;\n  white-space: normal;\n  font-weight: 700 !important;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.24px;\n  text-transform: uppercase;\n}\n"])));
+const WidgetContainer = exports.WidgetContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaReimbursFlow {\n    background: #fff;\n    border-radius: 8px 8px 0px 0px;\n    color: #212121;\n    padding: 16px 12px;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .amoutCalculat {\n    color: #0282f0;\n    padding: 16px 12px 0;\n    border-top: solid 1px var(--color-divider);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 150%;\n    width: calc(100% + 24px);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    margin: 12px 0 0 -12px;\n    cursor: pointer;\n    justify-content: space-between;\n  }\n\n  .rmbsProdAmt {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .rmbsProdAmt h5 {\n    font-style: normal;\n    color: #212121;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 22px;\n    border-top: solid 1px var(--color-divider);\n    padding: 36px 0 16px;\n  }\n\n  ul.calSecBox {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n  }\n\n  ul.calSecBox li {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    margin: 0 0 16px;\n    gap: 16px;\n  }\n  ul.calSecBox li:last-child {\n    padding-bottom: 16px;\n  }\n\n  .gridtableFooter {\n    border-top: solid 1px var(--color-divider);\n    border-bottom: solid 1px var(--color-divider);\n    padding: 16px 0 0 0;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 22px;\n  }\n\n  .gridtableFooter aside {\n    font-weight: 700;\n  }\n  .gridtableFooter aside p {\n    color: var(--color-positive) !important;\n  }\n  ul.calSecBox li aside {\n    color: #212121;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n  .gridtableFooter aside p {\n    font-weight: 700;\n  }\n\n  ul.calSecBox li aside + aside {\n    font-weight: 700;\n    text-align: right;\n  }\n\n  ul.calSecBox li aside p {\n    margin: 0;\n  }\n\n  .infoIconScroll img {\n    width: 12px;\n    height: 12px;\n    margin: 0 0 0 5px;\n  }\n\n  .rmbsProdAmt ul.listofProd {\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px 4px 0px 0px;\n    border: 1px solid #f6f6f6;\n    overflow: hidden;\n    border-top: none !important;\n    border-bottom: none !important;\n    background: #fff;\n    margin: 0;\n    padding: 0;\n  }\n\n  .rmbsProdAmt ul.listofProd li {\n    border-bottom: solid 1px var(--color-divider);\n    padding: 16px;\n    display: flex;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .nonGridTableHeader {\n    background: #f6f6f6;\n    border-bottom: none;\n  }\n\n  .rmbsProdAmt ul.listofProd li aside {\n    color: #212121;\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  .rmbsProdAmt ul.listofProd li aside.boldText {\n    font-weight: 700;\n  }\n  .nonGridTableHeader aside {\n    white-space: nowrap;\n    color: var(--color-secondary-content) !important;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 16px; /* 133.333% */\n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n  #gridView {\n    border: solid 1px var(--color-divider);\n  }\n  .rmbsProdAmt ul#gridView {\n    border: solid 1px var(--color-divider);\n    border-radius: 4px;\n    border-top: solid 1px var(--color-divider) !important;\n  }\n  #gridView li aside {\n    font-size: 14px !important;\n    line-height: 20px !important;\n  }\n  #gridView li.nonGridTableHeader aside {\n    font-size: 12px !important;\n    white-space: normal;\n    font-weight: 700 !important;\n    line-height: 16px; /* 133.333% */\n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n"])));

package/build/widgets/oa-widget-reupload-drawer/ReUploadDrawer.js

@@ -0,0 +1,164 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.promise.js");
+var _react = _interopRequireDefault(require("react"));
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomUpload = _interopRequireDefault(require("../../dev/oa-component-upload/CustomUpload"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function GenericUpload(_ref) {
+  var _config$documents;
+  let {
+    config,
+    uploadHandler,
+    deleteHandler: _deleteHandler,
+    downloadHandler,
+    previewHandler,
+    visible,
+    onClose,
+    validationConfig = {
+      maxSize: 5,
+      allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+      customValidation: null
+    },
+    uploadedDocuments,
+    showDelete = true,
+    showPreview = false,
+    form
+  } = _ref;
+  const validateFile = (file, docTypeId) => {
+    const isValidType = validationConfig.allowedTypes.includes(file.type);
+    if (!isValidType) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["Only ".concat(validationConfig.allowedTypes.map(type => type.split('/')[1].toUpperCase()).join('/'), " files are allowed!")]
+      }]);
+      return false;
+    }
+    const isValidSize = file.size / 1024 / 1024 < validationConfig.maxSize;
+    if (!isValidSize) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["File must be smaller than ".concat(validationConfig.maxSize, "MB!")]
+      }]);
+      return false;
+    }
+    if (validationConfig.customValidation) {
+      return validationConfig.customValidation(file, docTypeId);
+    }
+    return true;
+  };
+  const handleUpload = async (file, docTypeId, documentId) => {
+    if (!validateFile(file, docTypeId)) {
+      return null;
+    }
+    return uploadHandler(file, docTypeId, documentId);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: config.title,
+    width: config.width,
+    open: visible,
+    onClose: onClose,
+    buttonConfig: config.buttonConfig
+  }, config.systemInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, _extends({}, config.systemInfo, {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _InfoOutlined.default,
+        size: 24,
+        color: "negative"
+      }),
+      position: 'left'
+    }
+  }))), (config === null || config === void 0 ? void 0 : config.heading) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, config.heading, ' ')), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form
+  }, (_config$documents = config.documents) === null || _config$documents === void 0 ? void 0 : _config$documents.map(item => /*#__PURE__*/_react.default.createElement("div", {
+    key: item.docTypeId
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-500",
+    color: "primary-content"
+  }, item === null || item === void 0 ? void 0 : item.docName)), /*#__PURE__*/_react.default.createElement(_CustomUpload.default, {
+    isMandatory: true,
+    handleCustomOnChange: (file, status) => handleUpload(file, item.docTypeId, item.documentId),
+    formName: item.docTypeId,
+    uploadedDocuments: uploadedDocuments && uploadedDocuments[item.docTypeId] ? [uploadedDocuments[item.docTypeId]] : [],
+    deleteHandler: selectedFile => _deleteHandler(item.docTypeId),
+    downloadCallback: file => downloadHandler(item.docTypeId),
+    getPreview: previewHandler || (() => {}),
+    showDelete: showDelete,
+    showPreview: showPreview,
+    accept: validationConfig.allowedTypes.join(', '),
+    docName: item.docName
+  })))));
+}
+GenericUpload.propTypes = {
+  config: _propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    width: _propTypes.default.number,
+    buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+      callback: _propTypes.default.func,
+      label: _propTypes.default.string,
+      type: _propTypes.default.string
+    })),
+    systemInfo: _propTypes.default.shape({
+      title: _propTypes.default.string,
+      color: _propTypes.default.string,
+      description: _propTypes.default.node
+    }),
+    heading: _propTypes.default.string,
+    documents: _propTypes.default.arrayOf(_propTypes.default.shape({
+      title: _propTypes.default.string,
+      docTypeId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      docName: _propTypes.default.string
+    }))
+  }).isRequired,
+  uploadHandler: _propTypes.default.func.isRequired,
+  deleteHandler: _propTypes.default.func.isRequired,
+  downloadHandler: _propTypes.default.func.isRequired,
+  previewHandler: _propTypes.default.func,
+  validationConfig: _propTypes.default.shape({
+    maxSize: _propTypes.default.number,
+    allowedTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+    customValidation: _propTypes.default.func
+  }),
+  uploadedDocuments: _propTypes.default.object,
+  showDelete: _propTypes.default.bool,
+  showPreview: _propTypes.default.bool,
+  form: _propTypes.default.object.isRequired,
+  visible: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired
+};
+GenericUpload.defaultProps = {
+  previewHandler: () => {},
+  validationConfig: {
+    maxSize: 5,
+    allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+    customValidation: null
+  },
+  uploadedDocuments: {},
+  showDelete: true,
+  showPreview: false
+};
+var _default = exports.default = GenericUpload;

package/build/widgets/oa-widget-select-list-item-modal/SelectListItemModal.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+const SelectListItemModal = _ref => {
+  var _modalContent$header, _modalContent$header2, _modalContent$subHead, _modalContent$subHead2, _modalContent$listIte;
+  let {
+    modalContent,
+    onItemSelect
+  } = _ref;
+  const avatarColors = (modalContent === null || modalContent === void 0 ? void 0 : modalContent.avatarColors) || [];
+  const handleItemSelect = item => {
+    // localStorage.setItem('selectedListItem', JSON.stringify(item));
+    if (onItemSelect) {
+      onItemSelect(item);
+    }
+  };
+  const getAvatarStyle = index => {
+    if (avatarColors.length === 0) {
+      // Default colors if no colors provided
+      return {
+        backgroundColor: '#f0f0f0',
+        color: '#333'
+      };
+    }
+
+    // Use modulo to cycle through colors
+    const colorIndex = index % avatarColors.length;
+    return avatarColors[colorIndex];
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (modalContent === null || modalContent === void 0 ? void 0 : modalContent.header) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: modalContent === null || modalContent === void 0 || (_modalContent$header = modalContent.header) === null || _modalContent$header === void 0 ? void 0 : _modalContent$header.type,
+    color: "primary-content"
+  }, modalContent === null || modalContent === void 0 || (_modalContent$header2 = modalContent.header) === null || _modalContent$header2 === void 0 ? void 0 : _modalContent$header2.text), (modalContent === null || modalContent === void 0 ? void 0 : modalContent.subHeading) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: modalContent === null || modalContent === void 0 || (_modalContent$subHead = modalContent.subHeading) === null || _modalContent$subHead === void 0 ? void 0 : _modalContent$subHead.type,
+    color: "secondary-content"
+  }, modalContent === null || modalContent === void 0 || (_modalContent$subHead2 = modalContent.subHeading) === null || _modalContent$subHead2 === void 0 ? void 0 : _modalContent$subHead2.text)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-list-container"
+  }, modalContent === null || modalContent === void 0 || (_modalContent$listIte = modalContent.listItem) === null || _modalContent$listIte === void 0 ? void 0 : _modalContent$listIte.map((item, index) => {
+    var _item$label;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "select-list-item",
+      onClick: () => handleItemSelect(item)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "item-avatar",
+      style: getAvatarStyle(index)
+    }, (_item$label = item.label) === null || _item$label === void 0 || (_item$label = _item$label.charAt(0)) === null || _item$label === void 0 ? void 0 : _item$label.toUpperCase()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "item-content"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b1-400",
+      color: "primary-content"
+    }, item.label)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "item-arrow"
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _ChevronRight.default,
+      size: 20,
+      color: "primary"
+    })));
+  })));
+};
+SelectListItemModal.propTypes = {
+  modalContent: _propTypes.default.object,
+  onItemSelect: _propTypes.default.func,
+  avatarColors: _propTypes.default.array
+};
+var _default = exports.default = SelectListItemModal;

package/build/widgets/oa-widget-sidebar/SidebarWidget.js

@@ -0,0 +1,175 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _reactRouterDom = require("react-router-dom");
+var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _Header = _interopRequireDefault(require("./components/Header"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = _interopRequireWildcard(require("./styles"));
+var _CustomDropdown = _interopRequireDefault(require("../../components/oa-component-dropdown/CustomDropdown"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable */
+
+const {
+  Sider
+} = _antd.Layout;
+const {
+  SubMenu
+} = _antd.Menu;
+function SidebarWidget(_ref) {
+  var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3, _footer$icons$;
+  let {
+    heading,
+    menuItems = [],
+    mobileMenuItems = [],
+    footer,
+    location,
+    history,
+    handleFooterClick,
+    profileData
+  } = _ref;
+  const [openKeys, setOpenKeys] = (0, _react.useState)([]);
+
+  // Determine which menu items to use and whether to show profile icon
+  const shouldShowProfileIcon = (mobileMenuItems === null || mobileMenuItems === void 0 || (_mobileMenuItems$item = mobileMenuItems.items) === null || _mobileMenuItems$item === void 0 ? void 0 : _mobileMenuItems$item.length) > 0;
+  const activeMenuItems = shouldShowProfileIcon ? mobileMenuItems : menuItems;
+
+  // Find which submenu contains the current path and set it as open by default
+  (0, _react.useEffect)(() => {
+    const currentPath = location.pathname;
+    const items = (menuItems === null || menuItems === void 0 ? void 0 : menuItems.items) || [];
+
+    // Find if current path is in any submenu
+    for (const item of items) {
+      if (item !== null && item !== void 0 && item.children && (item === null || item === void 0 ? void 0 : item.children.length) > 0) {
+        var _item$children;
+        const hasCurrentPath = item === null || item === void 0 || (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(child => (child === null || child === void 0 ? void 0 : child.path) === currentPath);
+        if (hasCurrentPath) {
+          setOpenKeys([item === null || item === void 0 ? void 0 : item.key]);
+          return;
+        }
+      }
+    }
+
+    // If no match found, open the first submenu by default
+    const firstSubmenu = items === null || items === void 0 ? void 0 : items.find(item => {
+      var _item$children2;
+      return (item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 || (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0;
+    });
+    if (firstSubmenu) {
+      setOpenKeys([firstSubmenu === null || firstSubmenu === void 0 ? void 0 : firstSubmenu.key]);
+    }
+  }, [location.pathname, menuItems]);
+
+  // Simple menu click handler
+  const handleMenuClick = _ref2 => {
+    let {
+      key
+    } = _ref2;
+    history.replace(key);
+  };
+
+  // Handle submenu open/close
+  const handleOpenChange = keys => {
+    setOpenKeys(keys);
+  };
+
+  // Simple render function for menu items
+  const renderMenuItem = item => {
+    var _item$children3;
+    if (item !== null && item !== void 0 && item.children && (item === null || item === void 0 || (_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length) > 0) {
+      var _item$children4;
+      return /*#__PURE__*/_react.default.createElement(SubMenu, {
+        key: item.key,
+        title: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item === null || item === void 0 ? void 0 : item.label)
+      }, item === null || item === void 0 || (_item$children4 = item.children) === null || _item$children4 === void 0 ? void 0 : _item$children4.map(child => /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+        key: child === null || child === void 0 ? void 0 : child.path
+      }, child === null || child === void 0 ? void 0 : child.label)));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+        key: item.path
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item === null || item === void 0 ? void 0 : item.label);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaLeftLayouts"
+  }, /*#__PURE__*/_react.default.createElement(Sider, {
+    width: 250,
+    theme: "light",
+    className: "sidebar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "logoContainer"
+  }, (heading === null || heading === void 0 ? void 0 : heading.visible) && /*#__PURE__*/_react.default.createElement(_Header.default, heading), /*#__PURE__*/_react.default.createElement("div", {
+    className: "notShowInDesktop"
+  }, (activeMenuItems === null || activeMenuItems === void 0 ? void 0 : activeMenuItems.visible) && /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
+    items: [...((activeMenuItems === null || activeMenuItems === void 0 ? void 0 : activeMenuItems.items) || []), ...(footer !== null && footer !== void 0 && footer.visible ? [{
+      label: footer === null || footer === void 0 || (_footer$item = footer.item) === null || _footer$item === void 0 ? void 0 : _footer$item.label,
+      key: "footerAction",
+      onClick: handleFooterClick,
+      danger: true
+    }] : [])],
+    trigger: ["click"],
+    type: "primary",
+    onMenuItemClick: key => {
+      if ((key === null || key === void 0 ? void 0 : key.key) === "footerAction") {
+        handleFooterClick();
+      } else {
+        history.replace(key === null || key === void 0 ? void 0 : key.path);
+      }
+    }
+  }, shouldShowProfileIcon && profileData !== null && profileData !== void 0 && profileData.visible ? /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
+    style: {
+      backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) || "primary", ")"),
+      color: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconColor) || "primary-content", ")")
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "white",
+    typography: profileData === null || profileData === void 0 ? void 0 : profileData.mwebTypographyType
+  }, profileData === null || profileData === void 0 ? void 0 : profileData.iconText)) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: _Menu.default,
+    size: 20
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "notShowInMobile"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebarContent"
+  }, (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement(_antd.Menu, {
+    theme: "light",
+    mode: "inline",
+    selectedKeys: [location.pathname],
+    openKeys: openKeys,
+    onOpenChange: handleOpenChange,
+    className: "menu",
+    onClick: handleMenuClick
+  }, menuItems === null || menuItems === void 0 || (_menuItems$items = menuItems.items) === null || _menuItems$items === void 0 ? void 0 : _menuItems$items.map(item => renderMenuItem(item))), (footer === null || footer === void 0 ? void 0 : footer.visible) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "logoutDiv",
+    onClick: () => handleFooterClick()
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, footer === null || footer === void 0 || (_footer$item2 = footer.item) === null || _footer$item2 === void 0 ? void 0 : _footer$item2.iconConfig), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative",
+    typography: "type-button-500"
+  }, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label)))))), (footer === null || footer === void 0 ? void 0 : footer.icons) && footer.icons.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerLogoSection notShowInMobile"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    typography: "type-b2-400"
+  }, "Powered by"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerLogoContainer"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Image, {
+    src: (_footer$icons$ = footer.icons[0]) === null || _footer$icons$ === void 0 ? void 0 : _footer$icons$.icon,
+    preview: false,
+    className: "footerLogo"
+  }))));
+}
+var _default = exports.default = (0, _reactRouterDom.withRouter)(SidebarWidget);

package/build/widgets/oa-widget-sidebar/components/Header.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+function Header(_ref) {
+  let {
+    icons = [],
+    text = null
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "leftLogoSec"
+  }, icons === null || icons === void 0 ? void 0 : icons.map(_ref2 => {
+    let {
+      icon,
+      showLine
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Image, {
+      src: icon,
+      preview: false,
+      className: "logo logo-mobile-height"
+    }));
+  }), text && /*#__PURE__*/_react.default.createElement(_antd.Typography, {
+    typography: "type-h3-500"
+  }, text));
+}
+var _default = exports.default = Header;

package/build/widgets/oa-widget-sidebar/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProfileIcon = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2; // styles.js
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n    height: 80vh; /* full viewport height */\n    display: flex;\n    flex-direction: column;\n  }\n\n  .logoContainer {\n    padding: 12px;\n    display: flex;\n    justify-content: space-between;\n    height: 110px;\n    align-items: center;\n    margin: 0 0 16px 0;\n  }\n\n  .logoutDiv {\n    display: flex;\n    flex-direction: row;\n    margin: 48px 0 0 16px;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .logo-mobile-height {\n    height: auto;\n  }\n\n  // .logoContainer em {\n  //   width: 1px;\n  //   background: #e0e0e0;\n  // }\n  // .logoContainer img {\n  //   height: 32px;\n  // }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n\n  /* Regular menu items */\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  /* SubMenu title styling - this is the parent item - same size as regular items */\n  .ant-menu-submenu-title {\n    padding: 24px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n    display: flex;\n    align-items: center;\n  }\n\n  /* SubMenu items - these are the children - should be plain text */\n  .ant-menu-submenu .ant-menu-item {\n    margin: 8px 0;\n    padding: 8px 24px;\n    border-radius: 0;\n    background: transparent;\n    border: none;\n    margin-left: 16px;\n    color: #666;\n    font-size: 14px;\n    height: auto;\n    line-height: 1.4;\n  }\n\n  /* Add extra spacing for last nested item */\n  .ant-menu-submenu .ant-menu-item:last-child {\n    margin-bottom: 12px;\n  }\n\n  /* REMOVED: Open SubMenu styling - this was making ALL open submenus blue */\n  /* .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;      \n  } */\n\n  /* NEW: Only make parent blue when it contains a selected child */\n  .ant-menu-submenu-open:has(.ant-menu-item-selected)\n    > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;\n  }\n\n  /* Fallback for browsers that don't support :has() */\n  .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #fff;\n    color: #000;\n    padding: 24px;\n  }\n\n  /* SubMenu title content */\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .ant-menu-submenu-title .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  /* Add styling to span elements inside SubMenu title content */\n  .ant-menu-submenu-title .ant-menu-title-content span {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n\n  /* Selected states */\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu selected item - should be bold black when selected */\n  .ant-menu-submenu .ant-menu-item-selected {\n    background: transparent;\n    color: #000;\n    font-weight: bold;\n    border-radius: 0;\n  }\n\n  /* Hover effects */\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu title hover - should be blue on hover */\n  .ant-menu-submenu-title:hover {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  /* Nested items hover - should be bold black when hovered */\n  .ant-menu-submenu .ant-menu-item:hover {\n    background: transparent !important;\n    color: #000 !important;\n    font-weight: bold !important;\n    border-radius: 0;\n  }\n\n  /* Make Orders parent blue when hovering over submenu items */\n  .ant-menu-submenu:hover .ant-menu-submenu-title {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n\n  /* SubMenu arrow styling */\n  .ant-menu-submenu-arrow {\n    color: inherit;\n  }\n\n  /* SubMenu content area */\n  .ant-menu-sub {\n    background: transparent !important;\n    padding: 8px 0;\n  }\n\n  /* Remove default SubMenu styling */\n  .ant-menu-submenu .ant-menu-sub {\n    background: transparent !important;\n    box-shadow: none !important;\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  .footerLogoSection {\n    margin-top: auto;\n    margin-bottom: 40px;\n    padding: 0 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 172px;\n    height: 75px;\n  }\n\n  .footerLogoContainer {\n    display: flex;\n    align-items: center;\n  }\n\n  .footerLogo {\n    width: 172px;\n    height: 43px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 0 16px;\n      height: auto;\n      display: block;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n      width: 100%;\n      height: 80px;\n    }\n\n    .logo-mobile-height {\n      height: 56px;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n    .layoutHeadingPage * {\n      max-width: 200px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n"])));
+const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
+var _default = exports.default = OalayoutStyle;