oa-componentbook 1.0.1-stage.42 → 1.0.1-stage.421

package/build/layout/DetailDataLayout/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AllCardSection = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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) } })); }
+const AllCardSection = exports.AllCardSection = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fieldBoxBorder {\n    border-radius: 12px;\n    border: 1px solid #E0E0E0;\n    padding: 16px;\n  }\n"])));
+var _default = exports.default = {};

package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js

@@ -0,0 +1,262 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EntityOverviewLayout;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.json.stringify.js");
+var _react = _interopRequireWildcard(require("react"));
+var _entityOverviewLayoutReducer = require("./reducer/entityOverviewLayoutReducer");
+var _GlobalCss = _interopRequireDefault(require("../../global-css/GlobalCss"));
+var _staticConfigResolver = _interopRequireDefault(require("../GenricLayOut/resolver/staticConfigResolver"));
+var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _antd = require("antd");
+var _ProfileDataWidget = _interopRequireDefault(require("../../widgets/oa-widget-profile-data/ProfileDataWidget"));
+var _Accordion = _interopRequireDefault(require("../../components/oa-component-accordion/Accordion"));
+var _KeyValueWidget = _interopRequireDefault(require("../../widgets/oa-widget-key-value/KeyValueWidget"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _DetailDataLayout = _interopRequireDefault(require("../DetailDataLayout/DetailDataLayout"));
+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 _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 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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 EntityOverviewLayout(_ref) {
+  var _backButton$iconConfi, _backButton$iconConfi2, _drawer$data, _drawer$data$drawer$a, _drawer$data2;
+  let {
+    config,
+    getInitialData,
+    handlers: {
+      handleBackButton,
+      addUserClick,
+      deleteUserClick,
+      editUserClick,
+      handleDrawerData,
+      handleSwitchSelectItem
+    }
+  } = _ref;
+  const [state, dispatch] = (0, _react.useReducer)(_entityOverviewLayoutReducer.entityOverviewLayoutReducer, config !== null && config !== void 0 ? config : _entityOverviewLayoutReducer.initialState);
+  const stateRef = (0, _react.useRef)(state);
+  const notificationRef = (0, _react.useRef)(null);
+  const openNotification = (0, _react.useCallback)(params => notificationRef.current.openNotification(params), []);
+  const {
+    pageTitle,
+    backButton,
+    profileData,
+    accordionData,
+    drawer,
+    modal
+  } = state !== null && state !== void 0 ? state : {};
+  (0, _react.useEffect)(() => {
+    init();
+  }, []);
+  (0, _react.useEffect)(() => {
+    stateRef.current = state;
+  }, [state]);
+  const init = async () => {
+    dispatch({
+      type: _entityOverviewLayoutReducer.actionTypes.SET_LOADING,
+      payload: true
+    });
+    if (getInitialData) {
+      var _state$misc;
+      const {
+        error,
+        data
+      } = await (getInitialData === null || getInitialData === void 0 ? void 0 : getInitialData(_objectSpread({}, (_state$misc = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc !== void 0 ? _state$misc : {})));
+      if (error) {
+        showErrorNotification(error);
+        const dynamicConfig = (0, _staticConfigResolver.default)(config, {});
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.INIT,
+          payload: dynamicConfig
+        });
+      } else {
+        const dynamicConfig = (0, _staticConfigResolver.default)(config, data !== null && data !== void 0 ? data : {});
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.INIT,
+          payload: dynamicConfig
+        });
+      }
+    } else {
+      const dynamicConfig = (0, _staticConfigResolver.default)(config, {});
+      dispatch({
+        type: _entityOverviewLayoutReducer.actionTypes.INIT,
+        payload: dynamicConfig
+      });
+    }
+    dispatch({
+      type: _entityOverviewLayoutReducer.actionTypes.SET_LOADING,
+      payload: false
+    });
+  };
+  const showErrorNotification = message => {
+    openNotification({
+      description: message,
+      type: "failure",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+  const showSuccessNotification = message => {
+    openNotification({
+      description: message,
+      type: "success",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+  const handleCloseDrawer = () => {
+    init();
+    dispatch({
+      type: _entityOverviewLayoutReducer.actionTypes.CLOSE_DRAWER
+    });
+  };
+  const handleSwitchSelectItemInternal = async (selectedValue, config) => {
+    if (selectedValue) {
+      var _data$listData;
+      // Call the external handler to get new data based on selected value
+      const {
+        error,
+        data
+      } = await (handleSwitchSelectItem === null || handleSwitchSelectItem === void 0 ? void 0 : handleSwitchSelectItem(selectedValue));
+      let selectedItem = data === null || data === void 0 ? void 0 : data.data;
+      const selectedData = data === null || data === void 0 || (_data$listData = data.listData) === null || _data$listData === void 0 ? void 0 : _data$listData.find(item => item.value === selectedValue);
+      {
+        (config === null || config === void 0 ? void 0 : config.storageType) == "sessionStorage" && (config === null || config === void 0 ? void 0 : config.storageKey) && sessionStorage.setItem(config === null || config === void 0 ? void 0 : config.storageKey, JSON.stringify(selectedData));
+      }
+      showSuccessNotification(config === null || config === void 0 ? void 0 : config.successMessage);
+      if (error) {
+        showErrorNotification(error);
+      } else {
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.UPDATE_PROFILE_DATA,
+          payload: selectedItem
+        });
+      }
+    }
+  };
+  const handleActionClick = (actionType, actionData) => {
+    var _config$drawer, _drawerDetailData$dat, _state$drawer;
+    switch (actionType) {
+      case "PROFILE-DRAWER":
+        const record = _objectSpread({}, config === null || config === void 0 || (_config$drawer = config.drawer) === null || _config$drawer === void 0 || (_config$drawer = _config$drawer.data) === null || _config$drawer === void 0 ? void 0 : _config$drawer[actionData === null || actionData === void 0 ? void 0 : actionData.drawerKey]);
+        const drawerDetailData = handleDrawerData(actionData === null || actionData === void 0 ? void 0 : actionData.drawerData);
+        const dynamicConfig = (0, _staticConfigResolver.default)(record, (_drawerDetailData$dat = drawerDetailData === null || drawerDetailData === void 0 ? void 0 : drawerDetailData.data) !== null && _drawerDetailData$dat !== void 0 ? _drawerDetailData$dat : {});
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.SET_DRAWER,
+          payload: {
+            data: _objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$drawer = state.drawer) === null || _state$drawer === void 0 ? void 0 : _state$drawer.data) || {}), {}, {
+              [actionData === null || actionData === void 0 ? void 0 : actionData.drawerKey]: dynamicConfig
+            }),
+            active: actionData === null || actionData === void 0 ? void 0 : actionData.drawerKey
+          }
+        });
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.TOGGLE_DRAWER,
+          payload: "profile-edit"
+        });
+        break;
+      default:
+        console.log("Unknown action type:", actionType);
+    }
+  };
+  console.log(state, "EntityOverviewLayout state");
+  return /*#__PURE__*/_react.default.createElement(_styles.ProfilePageStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fullPageLayout"
+  }, /*#__PURE__*/_react.default.createElement(_GlobalCss.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaRightLayouts"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaTopHeaderAndBtnSec"
+  }, /*#__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: "headerContent"
+  }, (backButton === null || backButton === void 0 ? void 0 : backButton.visible) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "backButton",
+    onClick: () => {
+      handleBackButton();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: (backButton === null || backButton === void 0 || (_backButton$iconConfi = backButton.iconConfig) === null || _backButton$iconConfi === void 0 ? void 0 : _backButton$iconConfi.color) || "primary-content",
+    size: (backButton === null || backButton === void 0 || (_backButton$iconConfi2 = backButton.iconConfig) === null || _backButton$iconConfi2 === void 0 ? void 0 : _backButton$iconConfi2.size) || 24,
+    icon: backButton.iconConfig.icon
+  })), (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.visible) && (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.color,
+    typography: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.type
+  }, pageTitle.title)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "profileContent"
+  }, (profileData === null || profileData === void 0 ? void 0 : profileData.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(_ProfileDataWidget.default, _extends({}, profileData === null || profileData === void 0 ? void 0 : profileData.data, {
+    alignProfile: profileData === null || profileData === void 0 ? void 0 : profileData.alignProfile,
+    handleSwitchSelectItem: handleSwitchSelectItemInternal
+  }))), (accordionData === null || accordionData === void 0 ? void 0 : accordionData.visible) && Array.isArray(accordionData === null || accordionData === void 0 ? void 0 : accordionData.data) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 3
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "accordionsContainer"
+  }, accordionData.data.map((accordion, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: Math.random(),
+    className: "accordion-item"
+  }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    data: accordion,
+    key: Math.random(),
+    headerText: accordion.headerText,
+    defaultActiveKey: accordion.defaultActiveKey,
+    activeKey: accordion.activeKey,
+    subtext: accordion.subText,
+    componentConfig: accordion.componentConfig,
+    disabled: accordion.disabled,
+    hasContentPadding: accordion.hasContentPadding,
+    onChange: activeKeys => {
+      if (accordion.onChange) {
+        accordion.onChange(activeKeys);
+      }
+    },
+    customBody: accordion.customBody,
+    onActionClick: handleActionClick
+  }))))))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
+    ref: notificationRef
+  }), /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    className: "oaDrawer",
+    open: (drawer === null || drawer === void 0 ? void 0 : drawer.visible) === true,
+    onClose: handleCloseDrawer,
+    title: drawer === null || drawer === void 0 || (_drawer$data = drawer.data) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[drawer === null || drawer === void 0 ? void 0 : drawer.active]) === null || _drawer$data === void 0 ? void 0 : _drawer$data.title,
+    width: 860,
+    footer: null
+  }, /*#__PURE__*/_react.default.createElement(_DetailDataLayout.default, _extends({}, (_drawer$data$drawer$a = drawer === null || drawer === void 0 || (_drawer$data2 = drawer.data) === null || _drawer$data2 === void 0 ? void 0 : _drawer$data2[drawer === null || drawer === void 0 ? void 0 : drawer.active]) !== null && _drawer$data$drawer$a !== void 0 ? _drawer$data$drawer$a : {}, {
+    customPageModal: modal,
+    addUserClick: addUserClick,
+    deleteUserClick: deleteUserClick,
+    editUserClick: editUserClick
+  }))))));
+}
+EntityOverviewLayout.propTypes = {};
+EntityOverviewLayout.defaultProps = {};

package/build/layout/EntityOverviewLayout/reducer/entityOverviewLayoutReducer.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initialState = exports.entityOverviewLayoutReducer = exports.actionTypes = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _staticConfigResolver = require("../../GenricLayOut/resolver/staticConfigResolver");
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+const actionTypes = exports.actionTypes = {
+  INIT: 'INIT',
+  SET_LOADING: 'SET_LOADING',
+  SET_PROFILE_DATA: 'SET_PROFILE_DATA',
+  SET_MISC: 'SET_MISC',
+  SET_DRAWER: 'SET_DRAWER',
+  TOGGLE_DRAWER: 'TOGGLE_DRAWER',
+  CLOSE_DRAWER: 'CLOSE_DRAWER',
+  UPDATE_PROFILE_DATA: 'UPDATE_PROFILE_DATA'
+};
+const initialState = exports.initialState = {};
+const entityOverviewLayoutReducer = (state, action) => {
+  switch (action.type) {
+    case actionTypes.INIT:
+      return (0, _staticConfigResolver.removeHidden)(action.payload);
+    case actionTypes.SET_LOADING:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isLoading: action.payload
+      });
+    case actionTypes.SET_PROFILE_DATA:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        profileData: _objectSpread(_objectSpread({}, state.profileData), action.payload)
+      });
+    case actionTypes.UPDATE_PROFILE_DATA:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        profileData: action.payload
+      });
+    case actionTypes.SET_MISC:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        misc: _objectSpread(_objectSpread({}, state.misc), action.payload)
+      });
+
+    // Drawer cases
+    case actionTypes.SET_DRAWER:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        drawer: _objectSpread(_objectSpread({}, state.drawer), action.payload)
+      });
+    case actionTypes.TOGGLE_DRAWER:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        drawer: _objectSpread(_objectSpread({}, state.drawer), {}, {
+          visible: true,
+          type: action.payload
+        })
+      });
+    case actionTypes.CLOSE_DRAWER:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        drawer: _objectSpread(_objectSpread({}, state.drawer), {}, {
+          visible: false
+        })
+      });
+    default:
+      return state;
+  }
+};
+exports.entityOverviewLayoutReducer = entityOverviewLayoutReducer;

package/build/layout/EntityOverviewLayout/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProfilePageStyle = exports.DrawerWithOutFooter = exports.DrawerContent = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+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 ProfilePageStyle = exports.ProfilePageStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fullPageLayout {\n    display: flex;\n    min-height: 100vh;\n    background: #fafafa;\n  }\n\n  .oaRightLayouts {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .oaTopHeaderAndBtnSec {\n    background: #ffffff;\n    border-bottom: 1px solid #e8e8e8;\n    padding: 20px 24px;\n\n    .headerContent {\n      margin-left: 160px;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n\n      .pageTitle {\n        margin: 0;\n      }\n\n      .backButton {\n        border-radius: 50%;\n        width: 48px; /* Default desktop size */\n        height: 48px; /* Default desktop size */\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: var(--color-secondary-background);\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        cursor: pointer;\n        transition: all 0.2s ease;\n      }\n    }\n  }\n\n  .profileContent {\n    flex: 1;\n    padding: 0;\n    overflow-y: auto;\n    background: #ffffff;\n  }\n\n  .accordionsContainer {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n    padding: 0 24px;\n\n    .accordion-item {\n      width: 100%;\n      max-width: 600px;\n      background: var(--color-secondary-background);\n      overflow: hidden;\n\n      .accordion-content {\n        padding: 20px;\n\n        .key-value-section {\n          margin-bottom: 20px;\n        }\n\n        .action-buttons-section {\n          display: flex;\n          gap: 12px;\n          justify-content: flex-end;\n          margin-top: 16px;\n          padding-top: 16px;\n          border-top: 1px solid var(--color-border);\n        }\n\n        .custom-content {\n          margin-top: 16px;\n        }\n      }\n    }\n\n    /* Add bottom padding to last accordion item */\n    .accordion-item:last-child {\n      margin-bottom: 24px;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .oaTopHeaderAndBtnSec {\n      padding: 12px 16px;\n\n      .headerContent {\n        margin-left: 0; /* Remove left margin for mobile */\n        gap: 12px;\n        justify-content: flex-start; /* Align content to left */\n      }\n    }\n\n    .oaTopHeaderAndBtnSec .headerContent .backButton {\n      width: 40px !important; /* Mobile size with higher specificity */\n      height: 40px !important; /* Mobile size with higher specificity */\n    }\n\n    .oaTopHeaderAndBtnSec .headerContent .backButton .MuiSvgIcon-root {\n      font-size: 20px !important; /* Mobile icon size for Material-UI icons */\n    }\n\n    .profileContent {\n      padding: 16px;\n    }\n\n    .accordionsContainer {\n      padding: 0 16px;\n\n      .accordion-item {\n        max-width: 100%;\n\n        .accordion-content {\n          padding: 16px;\n\n          .action-buttons-section {\n            flex-direction: column;\n            align-items: stretch;\n          }\n        }\n      }\n    }\n  }\n"])));
+const DrawerWithOutFooter = exports.DrawerWithOutFooter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-drawer-footer {\n    display: none !important;\n  }\n"])));
+const DrawerContent = exports.DrawerContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 24px;\n\n  .drawerTitle {\n    margin-bottom: 24px;\n  }\n\n  .drawerDescription {\n    margin-top: 24px;\n  }\n"])));