npm - oa-componentbook - Versions diffs - 1.0.1-stage.390 → 1.0.1-stage.392 - Mend

oa-componentbook 1.0.1-stage.390 → 1.0.1-stage.392

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/build/components/oa-component-modal/CustomModal.js CHANGED Viewed

@@ -14,53 +14,56 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _typographyOptions = require("../../global-css/typography-options");
 var _utils = require("../../utils");
 var _styles = require("./styles");
-const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width"];
+const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width", "bgColor", "showCloseIcon"];
+/* eslint-disable */
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
-   * This is a custom Modal component that extends the default antd Modal
-   * component.
-   *
-   * The open state of the modal is controlled by the parent component.
-   *
-   * The parent can also provide a callback function to be called when the
-   * cancel button is clicked.
-   *
-   * The width of the modal can be customized by providing a width prop.
-   *
-   * The buttons for the modal can be customized by providing a buttonConfig
-   * prop.
-   *
-   * The title of the modal can be provided as a string or as an image.
-   *
-   * The children of the modal can be provided as a string or a number, or as
-   * JSX elements.
-   *
-   * The typography of the title and description can be customized by providing
-   * a typographies object.
-   *
-   * The modal is centered by default.
-   *
-   * The modal is rendered with a gray background.
-   *
-   * The modal is rendered with a close button.
-   *
-   * The parent can provide additional props to the Modal component.
-   */
+ * This is a custom Modal component that extends the default antd Modal
+ * component.
+ *
+ * The open state of the modal is controlled by the parent component.
+ *
+ * The parent can also provide a callback function to be called when the
+ * cancel button is clicked.
+ *
+ * The width of the modal can be customized by providing a width prop.
+ *
+ * The buttons for the modal can be customized by providing a buttonConfig
+ * prop.
+ *
+ * The title of the modal can be provided as a string or as an image.
+ *
+ * The children of the modal can be provided as a string or a number, or as
+ * JSX elements.
+ *
+ * The typography of the title and description can be customized by providing
+ * a typographies object.
+ *
+ * The modal is centered by default.
+ *
+ * The modal is rendered with a gray background.
+ *
+ * The modal is rendered with a close button.
+ *
+ * The parent can provide additional props to the Modal component.
+ */
 function CustomModal(_ref) {
   let {
       buttonConfig,
       children,
-      'data-test': dataTest,
+      "data-test": dataTest,
       imgSrc,
       // This callback function provided by parent is called upon clicking on the cancel button
       onCancel,
       open,
       title,
       typographies,
-      width
+      width,
+      bgColor,
+      showCloseIcon = true // Add this prop with default value
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   /*
@@ -75,15 +78,15 @@ function CustomModal(_ref) {
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
-        colorBgMask: 'rgba(0, 0, 0, 0.7)'
+        colorBgMask: bgColor || "rgba(0, 0, 0, 0.7)"
       }
     }
   }, open && /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
-    closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
+    closeIcon: showCloseIcon ? /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
       style: {
-        fontSize: '26px'
+        fontSize: "26px"
       }
-    }),
+    }) : false,
     centered: true,
     "data-test": dataTest,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
@@ -94,7 +97,7 @@ function CustomModal(_ref) {
       onClick: button.callback,
       size: "large",
       type: button === null || button === void 0 ? void 0 : button.type,
-      "data-test": button['data-test']
+      "data-test": button["data-test"]
     })))),
     onCancel: handleCancel,
     open: open,
@@ -116,17 +119,17 @@ CustomModal.propTypes = {
   // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
     callback: _propTypes.default.func.isRequired,
-    'data-test': _propTypes.default.string,
+    "data-test": _propTypes.default.string,
     label: _propTypes.default.string,
     iconConfig: _propTypes.default.shape({
       icon: _propTypes.default.node,
-      position: _propTypes.default.oneOf(['left', 'right']),
+      position: _propTypes.default.oneOf(["left", "right"]),
       style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
     }),
-    type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
+    type: _propTypes.default.oneOf(["primary", "secondary", "text-only", "danger-primary", "danger-secondary", "danger-text-only"])
   })),
   children: _propTypes.default.node,
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   title: _propTypes.default.string,
   typographies: _propTypes.default.shape({
     title: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
@@ -135,19 +138,21 @@ CustomModal.propTypes = {
   imgSrc: _propTypes.default.string,
   onCancel: _propTypes.default.func.isRequired,
   open: _propTypes.default.bool,
-  width: _propTypes.default.string || _propTypes.default.number
+  width: _propTypes.default.string || _propTypes.default.number,
+  showCloseIcon: _propTypes.default.bool
 };
 CustomModal.defaultProps = {
   buttonConfig: [],
   children: null,
-  'data-test': null,
+  "data-test": null,
   imgSrc: null,
   open: true,
   title: null,
   typographies: {
-    title: 'type-t1-500',
-    children: 'type-b2-400'
+    title: "type-t1-500",
+    children: "type-b2-400"
   },
-  width: 416
+  width: 416,
+  showCloseIcon: true
 };
 var _default = exports.default = CustomModal;

package/build/layout/GenricLayOut/GenricLayOut.js CHANGED Viewed

@@ -1,6 +1,5 @@
 "use strict";
-require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,6 +8,7 @@ exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.promise.js");
 require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireWildcard(require("react"));
 var _layoutReducer = require("./reducer/layoutReducer");
@@ -38,6 +38,7 @@ var _downloadFile = _interopRequireDefault(require("../../utils/download-file"))
 var _AppliedFilters = _interopRequireDefault(require("./components/AppliedFilters"));
 var _ProfileSection = _interopRequireDefault(require("./components/ProfileSection"));
 var _FilterListRounded = _interopRequireDefault(require("@material-ui/icons/FilterListRounded"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
 const _excluded = ["filteredValue"],
   _excluded2 = ["sortOrder"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,7 +53,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable */
 function GenricLayOut(_ref) {
-  var _state$misc22, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _leftHeaderFirstButto, _leftHeaderFirstButto2, _state$customDrawer3, _state$customDrawer4, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables4, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination17, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _customDrawer$data, _customDrawer$data2, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
+  var _state$misc22, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _leftHeaderFirstButto, _leftHeaderFirstButto2, _infoPanel$data, _infoPanel$data2, _infoPanel$data3, _infoPanel$data4, _infoPanel$data5, _state$customDrawer3, _state$customDrawer4, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables4, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination17, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _customDrawer$data, _customDrawer$data2, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
   let {
     config,
     getInitialData,
@@ -105,7 +106,8 @@ function GenricLayOut(_ref) {
     imageViewer,
     customDrawer,
     staticFilter,
-    profileData
+    profileData,
+    infoPanel
   } = state !== null && state !== void 0 ? state : {};
   (0, _react.useEffect)(() => {
     init();
@@ -2028,6 +2030,7 @@ function GenricLayOut(_ref) {
   }
   console.log(state, "GenricLayOutstate");
   return /*#__PURE__*/_react.default.createElement(_styles.OapageWithDataStyle, {
+    marginBottom: infoPanel !== null && infoPanel !== void 0 && infoPanel.bottomMarginRequired ? "12px" : "0",
     className: (state === null || state === void 0 || (_state$misc22 = state.misc) === null || _state$misc22 === void 0 ? void 0 : _state$misc22.flow) === "hubAutomation" ? "hubAutomationContainer" : ""
   }, /*#__PURE__*/_react.default.createElement(_styles.DrawerWithOutFooter, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "fullPageLayout"
@@ -2152,6 +2155,24 @@ function GenricLayOut(_ref) {
     allowClear: true,
     onClear: onInputSearchClear,
     onBlur: onInputSearchBlur
+  }))), (infoPanel === null || infoPanel === void 0 ? void 0 : infoPanel.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-12"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+    description: infoPanel === null || infoPanel === void 0 || (_infoPanel$data = infoPanel.data) === null || _infoPanel$data === void 0 ? void 0 : _infoPanel$data.description,
+    color: infoPanel === null || infoPanel === void 0 || (_infoPanel$data2 = infoPanel.data) === null || _infoPanel$data2 === void 0 ? void 0 : _infoPanel$data2.color,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: (infoPanel === null || infoPanel === void 0 || (_infoPanel$data3 = infoPanel.data) === null || _infoPanel$data3 === void 0 || (_infoPanel$data3 = _infoPanel$data3.iconConfig) === null || _infoPanel$data3 === void 0 ? void 0 : _infoPanel$data3.color) || "warning",
+        icon: infoPanel === null || infoPanel === void 0 || (_infoPanel$data4 = infoPanel.data) === null || _infoPanel$data4 === void 0 || (_infoPanel$data4 = _infoPanel$data4.iconConfig) === null || _infoPanel$data4 === void 0 ? void 0 : _infoPanel$data4.icon
+      }),
+      position: (infoPanel === null || infoPanel === void 0 || (_infoPanel$data5 = infoPanel.data) === null || _infoPanel$data5 === void 0 || (_infoPanel$data5 = _infoPanel$data5.iconConfig) === null || _infoPanel$data5 === void 0 ? void 0 : _infoPanel$data5.position) || 'left'
+    }
   }))), Object.keys((state === null || state === void 0 || (_state$customDrawer3 = state.customDrawer) === null || _state$customDrawer3 === void 0 ? void 0 : _state$customDrawer3.appliedFilters) || {}).length > 0 && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
     loading: state === null || state === void 0 ? void 0 : state.isLoading,
     active: true,

package/build/layout/GenricLayOut/components/AppliedFilters.js CHANGED Viewed

@@ -32,10 +32,17 @@ const AppliedFilters = _ref => {
     switch (key) {
       case "filterBy":
         {
-          var _filterDrawerData$dat, _filterByField$value, _matchedOption$label;
-          const filterByField = filterDrawerData === null || filterDrawerData === void 0 || (_filterDrawerData$dat = filterDrawerData.data) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.filterData) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.groups) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.flatMap(group => group.items || [])) === null || _filterDrawerData$dat === void 0 ? void 0 : _filterDrawerData$dat.find(item => item.name === "filterBy");
-          const matchedOption = filterByField === null || filterByField === void 0 || (_filterByField$value = filterByField.value) === null || _filterByField$value === void 0 ? void 0 : _filterByField$value.find(opt => opt.value === value);
-          return (_matchedOption$label = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : value;
+          var _filterDrawerData$dat;
+          // Access the filterBy field configuration from the correct path
+          // The filterDrawerData structure should be: filterDrawerData.data.filterData.groups
+          const filterByField = filterDrawerData === null || filterDrawerData === void 0 || (_filterDrawerData$dat = filterDrawerData.data) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.groups) === null || _filterDrawerData$dat === void 0 || (_filterDrawerData$dat = _filterDrawerData$dat.flatMap(group => group.items || [])) === null || _filterDrawerData$dat === void 0 ? void 0 : _filterDrawerData$dat.find(item => item.name === "filterBy");
+          if (filterByField !== null && filterByField !== void 0 && filterByField.value) {
+            var _matchedOption$label;
+            const matchedOption = filterByField.value.find(opt => opt.value === value);
+            console.log("matchedOption:", matchedOption);
+            return (_matchedOption$label = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : value;
+          }
+          return value;
         }
       case "fromDate":
         return (0, _dayjs.default)(value).format("DD MMM YYYY");

package/build/layout/GenricLayOut/components/Modal.js CHANGED Viewed

@@ -14,6 +14,7 @@ var _HubAutomationModal = _interopRequireDefault(require("../../../widgets/oa-wi
 var _GuideWidget = _interopRequireDefault(require("../../../widgets/oa-widget-guide/GuideWidget"));
 var _MaterialIcon = _interopRequireDefault(require("../../../components/oa-component-icons/MaterialIcon"));
 var _HubAutomationDeleteBiker = _interopRequireDefault(require("../../../widgets/oa-widget-hub-automation-modal/HubAutomationDeleteBiker"));
+var _SelectListItemModal = _interopRequireDefault(require("../../../widgets/oa-widget-select-list-item-modal/SelectListItemModal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -42,6 +43,11 @@ function LayoutModal(_ref) {
       });
     } else if ((modal === null || modal === void 0 ? void 0 : modal.widget) === "hubAutomationDeleteBiker") {
       return /*#__PURE__*/_react.default.createElement(_HubAutomationDeleteBiker.default, modal);
+    } else if ((modal === null || modal === void 0 ? void 0 : modal.widget) === "selectListItem") {
+      return /*#__PURE__*/_react.default.createElement(_SelectListItemModal.default, {
+        modalContent: modal === null || modal === void 0 ? void 0 : modal.modalContent,
+        onItemSelect: item => onFooterAction("select", item)
+      });
     } else {
       var _modal$modalContent2, _modal$modalContent3, _modal$modalContent4, _modal$modalContent5, _modal$modalContent6, _modal$modalContent7, _modal$modalContent8, _modal$modalContent9, _modal$modalContent10, _modal$modalContent11, _modal$modalContent12, _modal$modalContent13;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (modal === null || modal === void 0 || (_modal$modalContent2 = modal.modalContent) === null || _modal$modalContent2 === void 0 ? void 0 : _modal$modalContent2.header) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -69,12 +75,14 @@ function LayoutModal(_ref) {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
-    width: 428,
+    width: (modal === null || modal === void 0 ? void 0 : modal.customWidth) || 428,
     onCancel: onCancel,
     destroyOnClose: true,
     title: modal === null || modal === void 0 ? void 0 : modal.heading,
     imgSrc: modal === null || modal === void 0 ? void 0 : modal.imgSrc,
-    buttonConfig: getModalButtonConfig(modal === null || modal === void 0 || (_modal$jsxConfig = modal.jsxConfig) === null || _modal$jsxConfig === void 0 ? void 0 : _modal$jsxConfig.buttonConfig)
+    buttonConfig: getModalButtonConfig(modal === null || modal === void 0 || (_modal$jsxConfig = modal.jsxConfig) === null || _modal$jsxConfig === void 0 ? void 0 : _modal$jsxConfig.buttonConfig),
+    bgColor: modal === null || modal === void 0 ? void 0 : modal.bgColor,
+    showCloseIcon: modal === null || modal === void 0 ? void 0 : modal.showCloseIcon
   }, render());
 }
 LayoutModal.propTypes = {

package/build/layout/GenricLayOut/styles.js CHANGED Viewed

@@ -13,10 +13,15 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const DrawerWithOutFooter = exports.DrawerWithOutFooter = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.hubAutomationContainer .fullPageLayout {padding: 0 !important; background: #fff !important;}\n.hubAutomationContainer .fullPageLayout  .oaRightLayouts{\n    max-width: 1154px;\n    margin: 24px auto;\n    padding: 0 16px;\n    box-shadow: none;}\n.oaDrawer div + div.ant-drawer-body{padding-bottom:100px !important;}\n\n.ant-checkbox-indeterminate .ant-checkbox-inner:after {\n    background-color: #014fc5;\n}\n\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::before {display:none;}\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::after{ content: \"*\"; color: #DE350B; visibility: visible !important;}\n\n\n.cstUplaodWithFullWidth{margin-bottom:24px;}\n.cstUplaodWithFullWidth:last-child{margin-bottom:0;}\n.cstUplaodWithFullWidth .uploadDiv{width:100%;}\n.cstUplaodWithFullWidth .uploadDiv .ant-upload-list-item-container, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper .ant-upload-list-picture-card .ant-upload-select, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {\n     width: 100%; \n    height: 120px;\n}\n\n\n\n\n.oaDrawer .ant-form-item .ant-form-item-explain-error {\n    color: #DE350B;\n    font-size: 12px;\n    margin: 4px 0 0 0;\n}\n.bottomSelectedSecion{background: #F6F6F6; padding: 16px 36px; position: fixed; bottom: 0; left: 0; right: 0;\nbox-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    display: flex; z-index: 2;\n    align-items: center;\n    justify-content: end;\n    gap: 24px;}\n\n\n\n.listOfItems{ border-radius: 12px;\n    border: 1px solid #E0E0E0;\n    padding: 24px;\n    margin: 24px 0 0 0;}\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n.listOfItemsWithoutBorder{\n    padding: 24px 0;\n    margin: 24px 0 0 0;}\n\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n\n\n\n.modalIconAndTextBox{display:flex; flex-direction:row; align-items: center;  margin: 0 0 16px 0; gap:4px;}\n"])));
+const DrawerWithOutFooter = exports.DrawerWithOutFooter = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.hubAutomationContainer .fullPageLayout {padding: 0 !important; background: #fff !important;}\n.hubAutomationContainer .fullPageLayout  .oaRightLayouts{\n    max-width: 1154px;\n    margin: 24px auto;\n    padding: 0 16px;\n    box-shadow: none;}\n.oaDrawer div + div.ant-drawer-body{padding-bottom:100px !important;}\n\n.ant-checkbox-indeterminate .ant-checkbox-inner:after {\n    background-color: #014fc5;\n}\n\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::before {display:none;}\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::after{ content: \"*\"; color: #DE350B; visibility: visible !important;}\n\n\n.cstUplaodWithFullWidth{margin-bottom:24px;}\n.cstUplaodWithFullWidth:last-child{margin-bottom:0;}\n.cstUplaodWithFullWidth .uploadDiv{width:100%;}\n.cstUplaodWithFullWidth .uploadDiv .ant-upload-list-item-container, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper .ant-upload-list-picture-card .ant-upload-select, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {\n     width: 100%; \n    height: 120px;\n}\n\n\n\n\n.oaDrawer .ant-form-item .ant-form-item-explain-error {\n    color: #DE350B;\n    font-size: 12px;\n    margin: 4px 0 0 0;\n}\n.bottomSelectedSecion{background: #F6F6F6; padding: 16px 36px; position: fixed; bottom: 0; left: 0; right: 0;\nbox-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    display: flex; z-index: 2;\n    align-items: center;\n    justify-content: end;\n    gap: 24px;}\n\n\n\n.listOfItems{ border-radius: 12px;\n    border: 1px solid #E0E0E0;\n    padding: 24px;\n    margin: 24px 0 0 0;}\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n.listOfItemsWithoutBorder{\n    padding: 24px 0;\n    margin: 24px 0 0 0;}\n\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n\n\n\n.modalIconAndTextBox{display:flex; flex-direction:row; align-items: center;  margin: 0 0 16px 0; gap:4px;}\n\n/* Select List Item Styles */\n.select-list-container {\n  padding: 0;\n  margin: 16px 0 0 0;\n}\n\n.select-list-item {\n  display: flex;\n  align-items: center;\n  padding: 16px 0;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  border-bottom: 1px solid #f0f0f0;\n  position: relative;\n}\n\n.select-list-item:hover {\n  background-color: #f8f9fa;\n}\n\n.select-list-item:last-child {\n  border-bottom: none;\n}\n\n.item-avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background-color: #f0f0f0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  font-size: 20px;\n  font-weight: 500;\n  color: #333;\n  flex-shrink: 0;\n}\n\n/* Different avatar colors for different items */\n.select-list-item:nth-child(1) .item-avatar {\n  background-color: #717171;\n  color: #fff;\n}\n\n.select-list-item:nth-child(2) .item-avatar {\n  background-color: #014fc5;\n  color: #fff;\n}\n\n.item-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.item-arrow {\n  flex-shrink: 0;\n  margin-left: 8px;\n  color: #014fc5;\n}\n"])));
 const FormWidgetStyle = exports.FormWidgetStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .formBottomAction {\n    position: absolute;\n    bottom: 0px;\n    background-color: rgb(249, 249, 249);\n    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 8px;\n    padding: 16px;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    z-index: 10;\n    left: 0;\n    right: 0;\n  }\n\n  .formBottomAction .ant-form-item {\n    margin-bottom: 0px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n  }\n  .searchErrorMsg {\n    font-size: 12px;\n  }\n"])));
 const TableDataStyle = exports.TableDataStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .tableContainerList th,\n  button {\n    white-space: nowrap;\n  }\n  .tableContainerList th,\n  button {\n    white-space: nowrap;\n  }\n"])));
-const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .oaTopHeaderAndBtnSec {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .headerContent {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n\n      .headerLeft {\n        flex: 1;\n      }\n\n      .headerRight {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      }\n    }\n  }\n\n  .fullPageLayout {\n    display: flex;\n    padding: 8px;\n    background: #f6f6f6;\n  }\n  .ant-pagination {\n    padding: 0 16px;\n    justify-content: end;\n  }\n  .layoutHeadingPage {\n    display: flex;\n    gap: 8px;\n    margin: 0 0 32px 0;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .topHadingWithIcon span {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  .subHadingText {\n    margin: 0 0 0 36px;\n  }\n\n  .subHading1Text {\n    margin: 0 0 0 40px;\n  }\n\n  .marginNone {\n    margin: 0 !important;\n  }\n\n  .subHadingText > span {\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n    align-items: center;\n  }\n\n  .oaRightLayouts {\n    width: 100%;\n    min-height: calc(100vh - 16px);\n    padding: 76px 48px;\n    overflow-y: auto;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .oaheaderSearchAndFilter {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 16px 0;\n    gap: 16px;\n  }\n\n  .oaRightLayouts .iconAndTextSecBox {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .inLine {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .customeSelectDropdown {\n    margin: 4px 0 0 8px;\n  }\n\n  .cardData {\n    padding: 28px 0 48px 0;\n  }\n\n  .ant-carousel .slick-dots {\n    position: static;\n    margin: 20px auto 12px 0;\n  }\n  .ant-carousel .slick-dots li {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li button {\n    width: 8px;\n    height: 8px;\n    background: #cacaca;\n    border-radius: 50%;\n    opacity: 0.5;\n  }\n  .ant-carousel .slick-dots li.slick-active {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li.slick-active button {\n    width: 8px;\n    height: 8px;\n    opacity: 1;\n  }\n  .ant-carousel .slick-dots li::after {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    opacity: 1;\n    background: #717171;\n  }\n\n  .oaTabs .ant-tabs-nav {\n    border-top: 1px solid #e0e0e0;\n    border-left: 1px solid #e0e0e0;\n    border-right: 1px solid #e0e0e0;\n    padding: 12px 22px 0 22px;\n    margin: 0 0 8px 0;\n    background: #fff;\n    border-radius: 4px 4px 0 0;\n  }\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .cardContainer {\n    display: flex;\n    gap: 24px;\n  }\n  .selectAndSearch .noClear {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n    margin: 4px 0px 0px;\n    color: #de350b;\n  }\n  .searchOnly {\n    margin: 0px 0px 16px;\n    position: relative;\n  }\n  .searchOnly .ant-input-affix-wrapper {\n    border-radius: 4px;\n    max-width: 420px;\n    padding-left: 44px;\n  }\n  .searchOnly .cstSearchIcon {\n    position: absolute;\n    left: 16px;\n    top: 14px;\n    z-index: 2;\n  }\n\n  .selectAndSearch .ant-input-affix-wrapper {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .selectAndSearch {\n    flex-shrink: 0;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    border: none;\n    padding: 0;\n  }\n  .customeSelectDropdown .ant-select-selection-item > span {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 32px;\n  }\n\n  .customeSelectDropdown .ant-select {\n    margin: 0 0 0 32px;\n  }\n\n  .customeSelectDropdown .ant-select .ant-select-arrow {\n    color: #014fc5;\n    inset-inline-end: -6px;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    box-shadow: none !important;\n  }\n  .oaheaderButtons {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    justify-content: space-between;\n  }\n\n  .oaheaderButtons.single-child {\n    justify-content: flex-end;\n  }\n\n  .oaheaderButtonsRight {\n    display: flex;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .oaheaderButtons .notifyDot {\n    width: 12px;\n    height: 12px;\n    background: #de350b;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    border-radius: 50%;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .selectAndSearch .ant-input-affix-wrapper {\n      width: calc(100% - 84px);\n    }\n    .oaheaderSearchAndFilter .dropDownSearchContainer {\n      width: 100%;\n    }\n\n    .oaheaderSearchAndFilter {\n      align-items: flex-end;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .inLine {\n      flex-direction: column;\n      gap: 0;\n      align-items: flex-start;\n    }\n\n    .subHadingText > span {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .fullPageLayout {\n      flex-direction: column;\n      padding: 0;\n    }\n    .oaRightLayouts {\n      padding: 16px;\n      border-radius: 0;\n      background: #fff;\n      box-shadow: none;\n      height: auto;\n      background: #f6f6f6;\n    }\n    .oaTabs .ant-tabs-nav {\n      margin: 0 0 28px 0;\n      padding: 12px 0 0 0;\n    }\n    .layoutHeadingPage {\n      margin: 0 0 16px 0;\n      background: #fff;\n      padding: 16px;\n      border-radius: 8px;\n      width: 100%;\n    }\n    .layoutHeadingAndSearch {\n      background: #fff;\n      padding: 20px 16px;\n      margin: 0;\n      width: 100%;\n      border-radius: 8px;\n    }\n    \n    /* Hide profile section on mobile when sidebar has profile icon */\n    .hideProfileOnMobile {\n      display: none !important;\n    }\n  }\n"])));
+const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .oaTopHeaderAndBtnSec {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .headerContent {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n\n      .headerLeft {\n        flex: 1;\n      }\n\n      .headerRight {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      }\n    }\n  }\n\n  .fullPageLayout {\n    display: flex;\n    padding: 8px;\n    background: #f6f6f6;\n  }\n  .ant-pagination {\n    padding: 0 16px;\n    justify-content: end;\n  }\n  .layoutHeadingPage {\n    display: flex;\n    gap: 8px;\n    margin: 0 0 32px 0;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .topHadingWithIcon span {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  .subHadingText {\n    margin: 0 0 0 36px;\n  }\n\n  .subHading1Text {\n    margin: 0 0 ", " 40px;\n  }\n\n  .marginNone {\n    margin: 0 !important;\n  }\n\n  .subHadingText > span {\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n    align-items: center;\n  }\n\n  .oaRightLayouts {\n    width: 100%;\n    min-height: calc(100vh - 16px);\n    padding: 76px 48px;\n    overflow-y: auto;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .oaheaderSearchAndFilter {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 16px 0;\n    gap: 16px;\n  }\n\n  .oaRightLayouts .iconAndTextSecBox {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .inLine {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .customeSelectDropdown {\n    margin: 4px 0 0 8px;\n  }\n\n  .cardData {\n    padding: 28px 0 48px 0;\n  }\n\n  .ant-carousel .slick-dots {\n    position: static;\n    margin: 20px auto 12px 0;\n  }\n  .ant-carousel .slick-dots li {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li button {\n    width: 8px;\n    height: 8px;\n    background: #cacaca;\n    border-radius: 50%;\n    opacity: 0.5;\n  }\n  .ant-carousel .slick-dots li.slick-active {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li.slick-active button {\n    width: 8px;\n    height: 8px;\n    opacity: 1;\n  }\n  .ant-carousel .slick-dots li::after {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    opacity: 1;\n    background: #717171;\n  }\n\n  .oaTabs .ant-tabs-nav {\n    border-top: 1px solid #e0e0e0;\n    border-left: 1px solid #e0e0e0;\n    border-right: 1px solid #e0e0e0;\n    padding: 12px 22px 0 22px;\n    margin: 0 0 8px 0;\n    background: #fff;\n    border-radius: 4px 4px 0 0;\n  }\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .cardContainer {\n    display: flex;\n    gap: 24px;\n  }\n  .selectAndSearch .noClear {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n    margin: 4px 0px 0px;\n    color: #de350b;\n  }\n  .searchOnly {\n    margin: 0px 0px 16px;\n    position: relative;\n  }\n  .searchOnly .ant-input-affix-wrapper {\n    border-radius: 4px;\n    max-width: 420px;\n    padding-left: 44px;\n  }\n  .searchOnly .cstSearchIcon {\n    position: absolute;\n    left: 16px;\n    top: 14px;\n    z-index: 2;\n  }\n\n  .selectAndSearch .ant-input-affix-wrapper {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .selectAndSearch {\n    flex-shrink: 0;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    border: none;\n    padding: 0;\n  }\n  .customeSelectDropdown .ant-select-selection-item > span {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 32px;\n  }\n\n  .customeSelectDropdown .ant-select {\n    margin: 0 0 0 32px;\n  }\n\n  .customeSelectDropdown .ant-select .ant-select-arrow {\n    color: #014fc5;\n    inset-inline-end: -6px;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    box-shadow: none !important;\n  }\n  .oaheaderButtons {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    justify-content: space-between;\n  }\n\n  .oaheaderButtons.single-child {\n    justify-content: flex-end;\n  }\n\n  .oaheaderButtonsRight {\n    display: flex;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .oaheaderButtons .notifyDot {\n    width: 12px;\n    height: 12px;\n    background: #de350b;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    border-radius: 50%;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .selectAndSearch .ant-input-affix-wrapper {\n      width: calc(100% - 84px);\n    }\n    .oaheaderSearchAndFilter .dropDownSearchContainer {\n      width: 100%;\n    }\n\n    .oaheaderSearchAndFilter {\n      align-items: flex-end;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .inLine {\n      flex-direction: column;\n      gap: 0;\n      align-items: flex-start;\n    }\n\n    .subHadingText > span {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .fullPageLayout {\n      flex-direction: column;\n      padding: 0;\n    }\n    .oaRightLayouts {\n      padding: 16px;\n      border-radius: 0;\n      background: #fff;\n      box-shadow: none;\n      height: auto;\n      background: #f6f6f6;\n    }\n    .oaTabs .ant-tabs-nav {\n      margin: 0 0 28px 0;\n      padding: 12px 0 0 0;\n    }\n    .layoutHeadingPage {\n      margin: 0 0 16px 0;\n      background: #fff;\n      padding: 16px;\n      border-radius: 8px;\n      width: 100%;\n    }\n    .layoutHeadingAndSearch {\n      background: #fff;\n      padding: 20px 16px;\n      margin: 0;\n      width: 100%;\n      border-radius: 8px;\n    }\n    \n    /* Hide profile section on mobile when sidebar has profile icon */\n    .hideProfileOnMobile {\n      display: none !important;\n    }\n  }\n"])), _ref => {
+  let {
+    marginBottom
+  } = _ref;
+  return marginBottom || "0";
+});
 const ListofDamageParts = exports.ListofDamageParts = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ul.damagedParts {\n    display: flex;\n    flex-direction: column;\n    margin: 8px 0 0 16px;\n    list-style-type: disc;\n  }\n  ul.damagedParts li {\n    padding: 4px 0;\n    width: 100%;\n  }\n  ul.damagedParts li::marker {\n    color: #717171;\n    font-size: 20px;\n  }\n"])));
 const IncidentListParts = exports.IncidentListParts = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .qaSec dl {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n  }\n  .qaSec dl dt {\n    display: flex;\n    flex-direction: column;\n    margin: 16px 0 0 0;\n  }\n  .qaSec dl dt:first-child {\n    margin-top: 8px;\n  }\n"])));
 const ProfileSectionContainer = exports.ProfileSectionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-left: auto;\n\n  .profile-icon-container {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])));

package/build/widgets/oa-form-widget/FormWidget.js CHANGED Viewed

@@ -34,7 +34,6 @@ var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-
 var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
 var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
-var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
 var _CollapsibleKeyValueWidget = _interopRequireDefault(require("../oa-widget-collapsible-key-value/CollapsibleKeyValueWidget"));
 var _UserManagementWidget = _interopRequireDefault(require("../oa-widget-user-management/UserManagementWidget"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -133,8 +132,8 @@ function FormWidget(props) {
       placement: "top"
     }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       color: "primary-content",
-      size: 20,
-      icon: _InfoRounded.default
+      size: 16,
+      icon: _InfoOutlined.default
     })));
   };
   const renderFieldWidget = (item, index, itemData) => {
@@ -211,14 +210,45 @@ function FormWidget(props) {
       return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
         name: item === null || item === void 0 ? void 0 : item.name,
         initialValue: item === null || item === void 0 ? void 0 : item.defaultValue,
-        label: item === null || item === void 0 ? void 0 : item.label,
+        label: renderLabelWithTooltip(item === null || item === void 0 ? void 0 : item.label, item === null || item === void 0 ? void 0 : item.tooltip),
         rules: item === null || item === void 0 ? void 0 : item.rules
       }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
-        defaultValue: item.defaultValue
-      }, item === null || item === void 0 ? void 0 : item.value.map(v => /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
-        value: v.value,
-        label: v.label
-      }))));
+        defaultValue: item.defaultValue,
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '24px'
+        }
+      }, item === null || item === void 0 ? void 0 : item.value.map((v, index) => {
+        // Check if this radio option has info/tooltip
+        const hasInfo = v.info || v.tooltip;
+        const radioLabel = hasInfo ? /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px'
+          }
+        }, /*#__PURE__*/_react.default.createElement("span", null, v.label), v.info && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+          title: v.info.tooltip || v.info.tooltipTitle || v.info.infoData,
+          placement: "top"
+        }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          color: v.info.color || "primary-content",
+          size: v.info.size || 16,
+          icon: _InfoOutlined.default
+        })), v.tooltip && !v.info && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+          title: v.tooltip,
+          placement: "top"
+        }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          color: "primary-content",
+          size: 16,
+          icon: _InfoOutlined.default
+        }))) : v.label;
+        return /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+          key: index,
+          value: v.value,
+          label: radioLabel
+        });
+      })));
     }
     if ((item === null || item === void 0 ? void 0 : item.widget) === "input") {
       var _item$value;
@@ -345,9 +375,10 @@ function FormWidget(props) {
             title: item.info.tooltipTitle,
             placement: "top"
           }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-            color: item.info.color || "secondary",
+            color: item.info.color || "primary-content",
             size: item.info.size || 16,
-            icon: _InfoOutlined.default
+            icon: _InfoOutlined.default,
+            className: "margin-left-4"
           }))
         } : undefined;
         return /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
@@ -443,7 +474,8 @@ function FormWidget(props) {
     title: headingInfo,
     placement: "top"
   }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    icon: _InfoOutlined.default
+    icon: _InfoOutlined.default,
+    size: 16
   })));
   return /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FormWidgetStyleStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Form, {
     form: form,

package/build/widgets/oa-widget-collapsible-key-value/CollapsibleKeyValueWidget.js CHANGED Viewed

@@ -292,8 +292,9 @@ function CollapsibleKeyValueWidget(_ref) {
         infoData: /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
           title: item === null || item === void 0 || (_item$info2 = item.info) === null || _item$info2 === void 0 ? void 0 : _item$info2.tooltipTitle
         }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-          color: "secondary",
-          icon: _InfoOutlined.default
+          color: "primary-content",
+          icon: _InfoOutlined.default,
+          size: 16
         }))
       },
       tagStatus: {

package/build/widgets/oa-widget-collapsible-key-value/styles.js CHANGED Viewed

@@ -8,9 +8,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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 CollapsibleKeyValueContainer = exports.CollapsibleKeyValueContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  \n  .type-t2-700 {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n  \n  .type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  \n  .margin-bottom-16 {\n    margin-bottom: 16px;\n  }\n"])));
-const CollapsibleItem = exports.CollapsibleItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n.totalOrderSecBox {    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 0 0 0;\n    border-top: 1px solid #E0E0E0;\n  \n}\n.gstAndCost {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n\n"])));
-const CollapsibleHeader = exports.CollapsibleHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  \n.keyValueSecWithBtn {\n  display: flex; flex-direction: column; padding: 16px; border-radius: 4px;\n  border: 1px solid  #E0E0E0; gap:16px; margin-bottom: 16px;\n  }\n\n\n.keyValueSecWithBtn .valuestyle span  { width:auto;}\n\n  \n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: stretch;\n    \n    .key-value-section {\n      margin-right: 0;\n      margin-bottom: 12px;\n    }\n  }\n"])));
-const OrderTotalSec = exports.OrderTotalSec = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  \n\n\n\n"])));
-const CollapsibleContent = exports.CollapsibleContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  animation: slideDown 0.3s ease-out;\n  \n  .details-section {\n    color: var(--color-secondary-content);\n  }\n  \n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      max-height: 0;\n    }\n    to {\n      opacity: 1;\n      max-height: 500px;\n    }\n  }\n"])));
-const ExpandButton = exports.ExpandButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n"])));
+const CollapsibleKeyValueContainer = exports.CollapsibleKeyValueContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n\n  .type-t2-700 {\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n\n  .type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n\n  .margin-bottom-16 {\n    margin-bottom: 16px;\n  }\n"])));
+const CollapsibleItem = exports.CollapsibleItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .totalOrderSecBox {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 0 0 0;\n    border-top: 1px solid #e0e0e0;\n  }\n  .gstAndCost {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n"])));
+const CollapsibleHeader = exports.CollapsibleHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .keyValueSecWithBtn {\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n    border-radius: 4px;\n    border: 1px solid #e0e0e0;\n    gap: 16px;\n    margin-bottom: 16px;\n  }\n\n  .keyValueSecWithBtn .valuestyle span {\n    width: auto;\n  }\n\n  @media (max-width: 600px) {\n    flex-direction: column;\n    align-items: stretch;\n\n    .key-value-section {\n      margin-right: 0;\n      margin-bottom: 12px;\n    }\n  }\n"])));
+const OrderTotalSec = exports.OrderTotalSec = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
+const CollapsibleContent = exports.CollapsibleContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  animation: slideDown 0.3s ease-out;\n\n  .details-section {\n    color: var(--color-secondary-content);\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      max-height: 0;\n    }\n    to {\n      opacity: 1;\n      max-height: 500px;\n    }\n  }\n"])));
+const ExpandButton = exports.ExpandButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));

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

@@ -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 CHANGED Viewed

@@ -8,7 +8,7 @@ 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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _antd = require("antd");
 var _reactRouterDom = require("react-router-dom");
 var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
@@ -17,14 +17,17 @@ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-componen
 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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable */
 const {
   Sider
 } = _antd.Layout;
+const {
+  SubMenu
+} = _antd.Menu;
 function SidebarWidget(_ref) {
   var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3;
   let {
@@ -35,12 +38,65 @@ function SidebarWidget(_ref) {
     location,
     history,
     handleFooterClick,
-    profileData // Add profileData prop
+    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;
-  console.log(profileData, "profileData");
+  // 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.children && item.children.length > 0) {
+        const hasCurrentPath = item.children.some(child => child.path === currentPath);
+        if (hasCurrentPath) {
+          setOpenKeys([item.key]);
+          return;
+        }
+      }
+    }
+    // If no match found, open the first submenu by default
+    const firstSubmenu = items.find(item => item.children && item.children.length > 0);
+    if (firstSubmenu) {
+      setOpenKeys([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 => {
+    if (item.children && item.children.length > 0) {
+      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.label)
+      }, item.children.map(child => /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+        key: child.path
+      }, 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.label);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "oaLeftLayouts"
   }, /*#__PURE__*/_react.default.createElement(Sider, {
@@ -85,16 +141,11 @@ function SidebarWidget(_ref) {
     theme: "light",
     mode: "inline",
     selectedKeys: [location.pathname],
+    openKeys: openKeys,
+    onOpenChange: handleOpenChange,
     className: "menu",
-    onClick: _ref2 => {
-      let {
-        key
-      } = _ref2;
-      history.replace(key);
-    }
-  }, menuItems === null || menuItems === void 0 || (_menuItems$items = menuItems.items) === null || _menuItems$items === void 0 ? void 0 : _menuItems$items.map(item => /*#__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.label))), (footer === null || footer === void 0 ? void 0 : footer.visible) && /*#__PURE__*/_react.default.createElement("div", {
+    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, {

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

@@ -8,6 +8,6 @@ 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  }\n\n  .logoContainer {\n    padding: 0 12px 68px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .logoutDiv {\n    display: flex; flex-direction: row; margin: 140px 0 0 16px; gap: 8px; cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\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  .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  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\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  .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  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n  .ant-menu-item-selected {\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 16px;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\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  }\n"])));
+const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n  }\n\n  .logoContainer {\n    padding: 0 12px 68px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .logoutDiv {\n    display: flex; flex-direction: row; margin: 140px 0 0 16px; gap: 8px; cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\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: 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    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 first nested item */\n  .ant-menu-submenu .ant-menu-item:first-child {\n    margin-top: 12px;\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) > .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  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 16px;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\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  }\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;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "1.0.1-stage.390",
+  "version": "1.0.1-stage.392",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",