oa-componentbook 1.0.1-stage.36 → 1.0.1-stage.360

package/build/dev/oa-widget-document-side-drawer/DocumentSideDrawer.js

@@ -0,0 +1,196 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("react-pdf/dist/esm/Page/AnnotationLayer.css");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomDocumentViewer = _interopRequireDefault(require("../oa-component-document-viewer/CustomDocumentViewer"));
+var _CustomTabs = _interopRequireDefault(require("../../components/oa-component-tabs/CustomTabs"));
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _styles = _interopRequireDefault(require("./styles"));
+const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig", "onlyDocumentView"];
+/* 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; }
+/**
+ * DocumentSideDrawer Component
+ * 
+ * A side drawer component that displays documents with optional metadata.
+ * Supports both single document (backward compatibility) and multiple documents (new feature).
+ * 
+ * @param {Object} props - Component props
+ * @param {string} props.title - Drawer title
+ * @param {Function} props.handleCloseDrawer - Function to close the drawer
+ * @param {Object|Array} props.documentConfig - Single document config or array of document configs
+ * @param {string} props.drawerWidth - Custom drawer width
+ * @param {Object} props.drawerButtonConfig - Button configuration for the drawer
+ * @param {Object} props.drawerTagConfig - Tag configuration (heading, tag, viewDetails)
+ * @param {boolean} props.onlyDocumentView - Whether to show only document viewer
+ * @param {React.ReactNode} props.children - Additional content to render
+ */
+function DocumentSideDrawer(_ref) {
+  var _drawerTagConfig$view;
+  let {
+      title,
+      handleCloseDrawer,
+      documentConfig,
+      drawerWidth,
+      drawerButtonConfig,
+      drawerTagConfig,
+      onlyDocumentView
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Calculate the drawer width based on documentConfig or fallback to 480
+  const calculatedWidth = drawerWidth !== null && drawerWidth !== void 0 ? drawerWidth : documentConfig ? 1200 : 480;
+
+  /**
+   * Determines if documentConfig contains multiple documents
+   * @returns {boolean} True if documentConfig is an array with multiple items
+   */
+  const isMultipleDocuments = Array.isArray(documentConfig) && documentConfig.length > 1;
+
+  /**
+   * Renders the document viewer(s) based on configuration
+   * @returns {React.ReactNode} Document viewer component(s)
+   */
+  const renderDocumentViewer = () => {
+    if (!documentConfig) return null;
+
+    // Handle multiple documents with tabs
+    if (isMultipleDocuments) {
+      return /*#__PURE__*/_react.default.createElement(_CustomTabs.default, {
+        data: {
+          tabs: documentConfig.map((doc, index) => ({
+            body: /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, doc, {
+              onlyDocumentView: onlyDocumentView
+            })),
+            key: String(index + 1),
+            label: doc.label || "Document ".concat(index + 1)
+          }))
+        },
+        "data-test": "tabs",
+        type: "card"
+      });
+    }
+
+    // Handle single document (backward compatibility)
+    const singleDocument = Array.isArray(documentConfig) ? documentConfig[0] : documentConfig;
+    return /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, singleDocument, {
+      onlyDocumentView: onlyDocumentView
+    }));
+  };
+
+  /**
+   * Renders the tooltip content for view details
+   * @param {Array} items - Array of detail items
+   * @param {string} title - Tooltip title
+   * @returns {React.ReactNode} Tooltip content
+   * 
+   */
+
+  const renderTooltipContent = (items, title) => {
+    const totalItems = (items === null || items === void 0 ? void 0 : items.length) || 0;
+    if (totalItems === 0) return null;
+    const numColumns = totalItems === 1 ? 1 : 2;
+    const col1Size = Math.ceil(totalItems / numColumns);
+    const col2Size = totalItems - col1Size;
+    const columns = [items.slice(0, col1Size),
+    // First column
+    items.slice(col1Size) // Second column
+    ];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-sl1-700",
+      color: "secondary-content"
+    }, title), /*#__PURE__*/_react.default.createElement("div", {
+      className: "tooltip-grid",
+      style: {
+        flexDirection: totalItems === 1 ? "column" : "row",
+        width: totalItems === 1 ? "100%" : "auto"
+      }
+    }, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
+      key: "col-".concat(colIndex),
+      className: "tooltip-column"
+    }, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
+      key: item.title,
+      className: "tooltip-item"
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      size: 20,
+      icon: item.type === "positive" ? _Check.default : _Close.default,
+      color: item.type === "positive" ? "positive" : "negative"
+    }), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    buttonConfig: drawerButtonConfig,
+    "data-test": "document-side-drawer",
+    className: "documentDrawer",
+    width: calculatedWidth,
+    onClose: handleCloseDrawer,
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "viewerContainer"
+  }, renderDocumentViewer(), !onlyDocumentView && /*#__PURE__*/_react.default.createElement("div", {
+    className: "rightContSection"
+  }, drawerTagConfig && /*#__PURE__*/_react.default.createElement("div", {
+    className: "grayBoxSec"
+  }, drawerTagConfig.heading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t2-700",
+    color: "primary-content"
+  }, drawerTagConfig.heading), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12 statusSec"
+  }, drawerTagConfig.tag && (
+  // Conditionally render CustomTag or Typography based on tag type
+  drawerTagConfig.tag.type ? /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+    label: drawerTagConfig.tag.label,
+    type: drawerTagConfig.tag.type
+  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "primary-content"
+  }, drawerTagConfig.tag.label)), ((_drawerTagConfig$view = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view === void 0 || (_drawerTagConfig$view = _drawerTagConfig$view.items) === null || _drawerTagConfig$view === void 0 ? void 0 : _drawerTagConfig$view.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    overlayClassName: "multipleDocumentTooltip",
+    isDisplayed: true,
+    placement: "bottomRight",
+    title: renderTooltipContent(drawerTagConfig.viewDetails.items, drawerTagConfig.viewDetails.title)
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "text-only",
+    label: drawerTagConfig.viewDetails.label
+  })))), props.children))));
+}
+
+// Define the prop types to enforce correct data types for the props
+DocumentSideDrawer.propTypes = {
+  title: _propTypes.default.string,
+  handleCloseDrawer: _propTypes.default.func,
+  documentConfig: _propTypes.default.oneOfType([_propTypes.default.object,
+  // Single document configuration
+  _propTypes.default.arrayOf(_propTypes.default.object) // Array of document configurations
+  ]),
+  drawerWidth: _propTypes.default.string,
+  drawerButtonConfig: _propTypes.default.object,
+  drawerTagConfig: _propTypes.default.object,
+  onlyDocumentView: _propTypes.default.bool
+};
+
+// Default props to provide fallback values for optional props
+DocumentSideDrawer.defaultProps = {
+  title: "",
+  handleCloseDrawer: () => {},
+  documentConfig: null,
+  drawerWidth: null,
+  drawerButtonConfig: null,
+  drawerTagConfig: null,
+  onlyDocumentView: false
+};
+var _default = exports.default = DocumentSideDrawer;

package/build/dev/oa-widget-document-side-drawer/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 ViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs-nav{\n  margin: 0;\n}\n  .ant-tabs-top>.ant-tabs-nav::before {\n  border: none;\n      border-right: 1px solid #E0E0E0;\n  }\n  .ant-tabs-content-holder .customDocumentViewerOverlayHeader{\n        bottom: 60px;\n  }\n  .ant-tabs-tab{\n  border-radius: 0px !important;\n      border: none !important;\n       border-bottom: 2px solid transparent !important;\n  }\n    .ant-tabs-tab-active{\n    border-bottom: 2px solid var(--color-primary) !important;\n    }\n  .viewerContainer > div {\n    flex: 1;\n    box-sizing: border-box;\n  }\n  .viewerContainer {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n  }\n  .rightContSection {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n  }\n  .grayBoxSec {\n    border-radius: 8px;\n    background: #f6f6f6;\n    padding: 12px 16px;\n  }\n  .statusSec {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n  .statusSec button {\n    margin-left: 8px;\n  }\n"])));
+var _default = exports.default = ViewerContainer;

package/build/global-css/GlobalCss.js

@@ -12,13 +12,14 @@ var _Elevation = _interopRequireDefault(require("./Elevation"));
 var _GridLayout = _interopRequireDefault(require("./GridLayout"));
 var _SpacingScales = _interopRequireDefault(require("./SpacingScales"));
 var _Typographies = _interopRequireDefault(require("./Typographies"));
+var _commonStyles = _interopRequireDefault(require("./commonStyles"));
 require("antd/dist/reset.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function GlobalCss(_ref) {
   let {
     children
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BorderRadius.default, null), /*#__PURE__*/_react.default.createElement(_SpacingScales.default, null), /*#__PURE__*/_react.default.createElement(_ColorVariables.default, null), /*#__PURE__*/_react.default.createElement(_Elevation.default, null), /*#__PURE__*/_react.default.createElement(_GridLayout.default, null), /*#__PURE__*/_react.default.createElement(_Typographies.default, null), children);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BorderRadius.default, null), /*#__PURE__*/_react.default.createElement(_SpacingScales.default, null), /*#__PURE__*/_react.default.createElement(_ColorVariables.default, null), /*#__PURE__*/_react.default.createElement(_Elevation.default, null), /*#__PURE__*/_react.default.createElement(_GridLayout.default, null), /*#__PURE__*/_react.default.createElement(_commonStyles.default, null), /*#__PURE__*/_react.default.createElement(_Typographies.default, null), children);
 }
 GlobalCss.propTypes = {
   children: _propTypes.default.node.isRequired

package/build/global-css/GridLayout.js

@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 // TODO: Figure out a way to make this work with storybook.
 // Can be used to wrap the entire application, to make these styles available to every component
 
-const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n      margin-bottom: 0 !important;\n  }\n  .ant-notification .ant-notification-notice-wrapper{\n    background: transparent;\n  }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n    position: inherit !important;\n    width: 24px  !important;\n    height: 24px  !important;\n  }\n    .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n  padding-inline-end: 0px !important;\n}\n    .ant-notification-notice-close > button{\n    width: 24px  !important;\n    height: 24px !important;\n    }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    justify-content: space-between;\n  }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n      vertical-align: middle;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n \n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n\n\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n  background: var(--color-primary-background) ;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n  .ant-select-dropdown .ant-select-item {  \n    min-height: auto;\n    padding: 12px 16px;\n    color: var(--color-primary-content) ;\n    line-height: 20px;\n    border-radius: 0px;\n}\n\n.label-date-dropdown {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n  position: relative;\n  width: 100%;\n  max-height: 300px;\n  overflow-x: auto;\n}\n.overLayImg{\n  background: rgb(0 0 0 / 40%);\n  border-radius: 12px 12px 0px 0px;\n  overflow: hidden;\n}\n \n  .OaTooltip .ant-tooltip-inner{\n    padding: 24px 16px;\n    background: #fff;\n    color: #212121;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n        width: 348px;\n        border-radius: 12px;\n    }\n        .OaTooltip .ant-tooltip-arrow:before{\n          background: #fff !important;\n        }\n          .OaFooterBtn{\n    display: flex;\n    justify-content: end;\n    }\n    .OaTooltip{\n    max-width: 348px !important;\n    }\n.paddingBot .ant-drawer-body{\n  padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n  width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n  transform: rotate(90deg);\n  color: var(--color-primary) !important;\n  font-size: 14px !important;\n}\n.gappingIcons{\n  display: flex;\n  gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n  height: 350px;\n    overflow-y: auto;\n    margin: 30px 0px 0px;\n    padding: 0px 8px 0 0;;\n    \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n  width: 8px;\n  height: 100px;\n  border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n  background: #f6f6f6; \n  border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n  background: #888; \n  border-radius: 8px;\n  height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\n   .modalImg{\n        width: 100%;\n    }\n.overflowScroll{\n  position: relative;\n}\n.ascCollapse .ant-collapse-header{\n  border-radius: 4px !important;\n  background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n  overflow: hidden;\n}\n.ascCollapse .totalVal{\n  display: flex;\n  gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n  display: none\n}\n  .ant-notification-notice-close svg{\n  font-size: 24px !important;\n  height: auto;\n  }\n  @media only screen and (max-width: 574px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 78px !important;\n        \n    }\n}\n     @media only screen and (max-width: 480px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 60px !important;\n        \n    }\n}\n@media only screen and (max-width: 600px) {\n    \n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n      .ant-picker-dropdown { width: 100%; left: 0 !important; }\n  .mobilesIcons li.ant-dropdown-menu-item > svg {\n    display: block;\n}\n.imageZoom .ant-modal-body>div{\n  height: auto;\n  overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n  padding-right: 16px !important;\n}\n  .fadeImg{\n    max-height: auto;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n      width: 24px;     font-size: 12px; font-weight: bold; }\n\n  .ant-picker-dropdown .ant-picker-content th {\n      height: 24px;\n  }\n  .ant-picker-dropdown .ant-picker-content td {\n      font-size: 12px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n      width: 100%;\n  }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n \n"])));
+const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}  \n \n\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n \n}\n"])));
 var _default = exports.default = GridLayout;

package/build/global-css/commonStyles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.customLightTooltip .ant-tooltip-inner  {\n  background-color: #ffffff !important;\n  color: #212121 !important;\n  border-radius: 12px !important;\n  padding: 16px;\n  box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.14);\n}\n\n.customLightTooltip .ant-tooltip-arrow::before {\n  background-color: #ffffff !important;\n}\n\n.tooltip-grid {\n  display: flex;\n  align-items: flex-start;\n  padding: 8px 0 0;\n  gap: 0px 32px;\n}\n\n.tooltip-column {\n  display: flex;\n  flex-direction: column;\n  width: 200px;\n}\n\n\n.multipleDocumentTooltip .ant-tooltip-inner{\n  padding: 16px;\n  background: #fff;\n  color: #212121;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  width: max-content;\n  border-radius: 12px;\n  min-width: 300px;\n\n}\n.customLightTooltip .ant-tooltip-inner  {\n  background-color: #ffffff !important;\n  color: #212121 !important;\n  border-radius: 12px !important;\n  padding: 16px;\n  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);\n}\n\n.customLightTooltip .ant-tooltip-arrow::before {\n  background-color: #ffffff !important;\n}\n\n  .multipleDocumentTooltip .ant-tooltip-arrow:before{\n  background: #fff;\n  }\n     .multipleDocumentTooltip li.tooltip-item{\n      display: flex;\n      gap: 8px;\n      align-items: flex-start;\n      color: #212121;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px; \n      padding: 8px 0;\n          // width: max-content;\n      }\n          .tooltip-item p{\n              margin: 0;\n          }\n     .multipleDocumentTooltip ul .headingName{\n      color: #717171;\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 700;\n      line-height: 16px; \n      letter-spacing: 0.24px;\n      text-transform: uppercase;\n      padding: 0 0 16px;\n     }\n      .multipleDocumentTooltip .flexWrap{\n          display: flex;\n          flex-wrap: wrap;\n          column-count: 1;\n          column-gap: 8px;\n          list-style: none;\n          justify-content: space-between;\n      }\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n      margin-bottom: 0 !important;\n  }\n  .ant-notification .ant-notification-notice-wrapper{\n    background: transparent;\n  }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n    position: inherit !important;\n    width: 24px  !important;\n    height: 24px  !important;\n  }\n    .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n  padding-inline-end: 0px !important;\n}\n    .ant-notification-notice-close > button{\n    width: 24px  !important;\n    height: 24px !important;\n    }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    justify-content: space-between;\n  }\n    .documentDrawer .ant-drawer-body{\n        overflow: hidden;\n        padding: 0;\n    }\n  .documentDrawer .rightContSection  {\n    overflow-y: auto;\n    max-width: 480px !important;\n    height: calc(100vh - 114px);\n  }\n    .documentDrawer .ant-radio-group{\n        display: flex;\n    white-space: nowrap;\n    }\n    .documentDrawer .ant-drawer-content-wrapper{\n      width: 100% !important;\n    }\n    .documentDrawer .ant-select-selector .ant-select-selection-item > span{\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          width: 269px;\n          display: block;\n    }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n    vertical-align: middle;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n  background: var(--color-primary-background) ;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item {  \n  min-height: auto;\n  padding: 12px 16px;\n  color: var(--color-primary-content) ;\n  line-height: 20px;\n  border-radius: 0px;\n}\n\n.label-date-dropdown {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n  position: relative;\n  width: 100%;\n  max-height: 300px;\n  overflow-x: auto;\n}\n.overLayImg{\n  background: rgb(0 0 0 / 40%);\n  border-radius: 12px 12px 0px 0px;\n  overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n  padding: 24px 16px;\n  background: #fff;\n  color: #212121;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  width: 348px;\n  border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n  background: #fff !important;\n}\n.OaFooterBtn{\n  display: flex;\n  justify-content: end;\n}\n.OaTooltip{\n  max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n  padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n  width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n  transform: rotate(90deg);\n  color: var(--color-primary) !important;\n  font-size: 14px !important;\n}\n.gappingIcons{\n  display: flex;\n  gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n  height: 350px;\n    overflow-y: auto;\n    margin: 30px 0px 0px;\n    padding: 0px 8px 0 0;;\n    \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n  width: 8px;\n  height: 100px;\n  border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n  background: #f6f6f6; \n  border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n  background: #888; \n  border-radius: 8px;\n  height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\n   .modalImg{\n        width: 100%;\n    }\n.overflowScroll{\n  position: relative;\n}\n.ascCollapse .ant-collapse-header{\n  border-radius: 4px !important;\n  background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n  overflow: hidden;\n}\n.ascCollapse .totalVal{\n  display: flex;\n  gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n  display: none\n}\n  .ant-notification-notice-close svg{\n  font-size: 24px !important;\n  height: auto;\n  }\n  @media only screen and (max-width: 574px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 78px !important;\n        \n    }\n}\n     @media only screen and (max-width: 480px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 60px !important;\n        \n    }\n}\n@media only screen and (max-width: 600px) {\n    \n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n      .ant-picker-dropdown { width: 100%; left: 0 !important; }\n  .mobilesIcons li.ant-dropdown-menu-item > svg {\n    display: block;\n}\n.imageZoom .ant-modal-body>div{\n  height: auto;\n  overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n  padding-right: 16px !important;\n}\n  .fadeImg{\n    max-height: auto;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n      width: 24px;     font-size: 12px; font-weight: bold; }\n\n  .ant-picker-dropdown .ant-picker-content th {\n      height: 24px;\n  }\n  .ant-picker-dropdown .ant-picker-content td {\n      font-size: 12px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n      width: 100%;\n  }\n\n}\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n\n"])));
+var _default = exports.default = CommonStyles;

package/build/index.js

@@ -35,6 +35,12 @@ Object.defineProperty(exports, "ApprovalWidget", {
     return _ApprovalWidget.default;
   }
 });
+Object.defineProperty(exports, "ApprovalWidgetNew", {
+  enumerable: true,
+  get: function get() {
+    return _ApprovalWidgetNew.default;
+  }
+});
 Object.defineProperty(exports, "BarChart", {
   enumerable: true,
   get: function get() {
@@ -119,6 +125,12 @@ Object.defineProperty(exports, "CustomDetails", {
     return _CustomDetails.default;
   }
 });
+Object.defineProperty(exports, "CustomDocumentViewer", {
+  enumerable: true,
+  get: function get() {
+    return _CustomDocumentViewer.default;
+  }
+});
 Object.defineProperty(exports, "CustomDrawer", {
   enumerable: true,
   get: function get() {
@@ -185,6 +197,12 @@ Object.defineProperty(exports, "CustomNotification", {
     return _CustomNotification.default;
   }
 });
+Object.defineProperty(exports, "CustomPagination", {
+  enumerable: true,
+  get: function get() {
+    return _CustomPagination.default;
+  }
+});
 Object.defineProperty(exports, "CustomPinPatternCaptureWidget", {
   enumerable: true,
   get: function get() {
@@ -221,6 +239,12 @@ Object.defineProperty(exports, "CustomSelect", {
     return _CustomSelect.default;
   }
 });
+Object.defineProperty(exports, "CustomSteps", {
+  enumerable: true,
+  get: function get() {
+    return _CustomSteps.default;
+  }
+});
 Object.defineProperty(exports, "CustomTable", {
   enumerable: true,
   get: function get() {
@@ -311,6 +335,18 @@ Object.defineProperty(exports, "DocUploadWidget", {
     return _DocUploadWidget.default;
   }
 });
+Object.defineProperty(exports, "DocumentSideDrawer", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentSideDrawer.default;
+  }
+});
+Object.defineProperty(exports, "DocumentSideModal", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentSideModal.default;
+  }
+});
 Object.defineProperty(exports, "DropdownSearchInput", {
   enumerable: true,
   get: function get() {
@@ -335,6 +371,18 @@ Object.defineProperty(exports, "FeedbackWidget", {
     return _FeedbackWidget.default;
   }
 });
+Object.defineProperty(exports, "GenericUpload", {
+  enumerable: true,
+  get: function get() {
+    return _ReUploadDrawer.default;
+  }
+});
+Object.defineProperty(exports, "GenricLayOut", {
+  enumerable: true,
+  get: function get() {
+    return _GenricLayOut.default;
+  }
+});
 Object.defineProperty(exports, "GlobalCss", {
   enumerable: true,
   get: function get() {
@@ -353,6 +401,24 @@ Object.defineProperty(exports, "GridLayout", {
     return _GridLayout.default;
   }
 });
+Object.defineProperty(exports, "ImageCarouselWidget", {
+  enumerable: true,
+  get: function get() {
+    return _ImageCarouselWidget.default;
+  }
+});
+Object.defineProperty(exports, "ImageGallery", {
+  enumerable: true,
+  get: function get() {
+    return _ImageGallery.default;
+  }
+});
+Object.defineProperty(exports, "KPICardWidget", {
+  enumerable: true,
+  get: function get() {
+    return _KPICardWidget.default;
+  }
+});
 Object.defineProperty(exports, "KeyValueWidget", {
   enumerable: true,
   get: function get() {
@@ -425,6 +491,12 @@ Object.defineProperty(exports, "Preview", {
     return _Preview.default;
   }
 });
+Object.defineProperty(exports, "ProgressiveStepsWidget", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressiveStepsWidget.default;
+  }
+});
 Object.defineProperty(exports, "ReimbursementBreakupWidget", {
   enumerable: true,
   get: function get() {
@@ -449,6 +521,12 @@ Object.defineProperty(exports, "ServiceCard", {
     return _ServiceCard.default;
   }
 });
+Object.defineProperty(exports, "SidebarWidget", {
+  enumerable: true,
+  get: function get() {
+    return _SidebarWidget.default;
+  }
+});
 Object.defineProperty(exports, "SpacingDemo", {
   enumerable: true,
   get: function get() {
@@ -488,7 +566,7 @@ Object.defineProperty(exports, "StageTimelineWidget", {
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
   get: function get() {
-    return _TextArea.default;
+    return _CustomTextArea.default;
   }
 });
 Object.defineProperty(exports, "TrackShipmentWidget", {
@@ -539,6 +617,12 @@ Object.defineProperty(exports, "colorOptions", {
     return _colorOptions.colorOptions;
   }
 });
+Object.defineProperty(exports, "customForm", {
+  enumerable: true,
+  get: function get() {
+    return _antd.Form;
+  }
+});
 Object.defineProperty(exports, "getCheckboxTheme", {
   enumerable: true,
   get: function get() {
@@ -557,6 +641,8 @@ Object.defineProperty(exports, "typographyOptions", {
     return _typographyOptions.typographyOptions;
   }
 });
+var _antd = require("antd");
+var _ReUploadDrawer = _interopRequireDefault(require("./widgets/oa-widget-reupload-drawer/ReUploadDrawer"));
 var _Accordion = _interopRequireDefault(require("./components/oa-component-accordion/Accordion"));
 var _CustomDetails = _interopRequireDefault(require("./widgets/oa-widget-custom-details/CustomDetails"));
 var _DocUploadWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload/DocUploadWidget"));
@@ -578,6 +664,7 @@ var _CustomInputNumber = _interopRequireDefault(require("./components/oa-compone
 var _CustomLoader = _interopRequireDefault(require("./components/oa-component-loader/CustomLoader"));
 var _CustomModal = _interopRequireDefault(require("./components/oa-component-modal/CustomModal"));
 var _CustomNotification = _interopRequireDefault(require("./components/oa-component-notification/CustomNotification"));
+var _CustomPagination = _interopRequireDefault(require("./components/oa-component-pagination/CustomPagination"));
 var _CustomUpload = _interopRequireDefault(require("./components/oa-component-upload/CustomUpload"));
 var _CustomRadio = _interopRequireWildcard(require("./components/oa-component-radio/CustomRadio"));
 var _CustomSelect = _interopRequireDefault(require("./components/oa-component-select/CustomSelect"));
@@ -589,7 +676,7 @@ var _CustomTag = _interopRequireDefault(require("./components/oa-component-tag/C
 var _CustomTimeline = _interopRequireDefault(require("./components/oa-component-timeline/CustomTimeline"));
 var _CustomToggle = _interopRequireDefault(require("./components/oa-component-toggle/CustomToggle"));
 var _ElevationDemo = _interopRequireDefault(require("./components/oa-component-demo-elevation/ElevationDemo"));
-var _TextArea = _interopRequireDefault(require("./components/oa-component-textarea/TextArea"));
+var _CustomTextArea = _interopRequireDefault(require("./components/oa-component-textarea/CustomTextArea"));
 var _Typography = _interopRequireDefault(require("./components/oa-component-typography/Typography"));
 var _SpacingScales = _interopRequireDefault(require("./components/oa-component-demo-spacing/SpacingScales"));
 var _CustomTooltip = _interopRequireDefault(require("./components/oa-component-tooltip/CustomTooltip"));
@@ -610,6 +697,8 @@ var _AddressWidget = _interopRequireDefault(require("./widgets/oa-widget-address
 var _AddSparePartWidget = _interopRequireDefault(require("./widgets/oa-widget-add-spare-part/AddSparePartWidget"));
 var _AddSparePartCollapseWidget = _interopRequireDefault(require("./widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget"));
 var _ApprovalWidget = _interopRequireDefault(require("./widgets/oa-widget-approval/ApprovalWidget"));
+var _ApprovalWidgetNew = _interopRequireDefault(require("./widgets/oa-widget-approval/ApprovalWidgetNew"));
+var _ImageGallery = _interopRequireDefault(require("./widgets/oa-widget-image-gallery/ImageGallery"));
 var _CloseClaimWidget = _interopRequireDefault(require("./widgets/oa-widget-close-claim/CloseClaimWidget"));
 var _KeyValueWidget = _interopRequireDefault(require("./widgets/oa-widget-key-value/KeyValueWidget"));
 var _NotesWidget = _interopRequireDefault(require("./widgets/oa-widget-notes/NotesWidget"));
@@ -633,6 +722,9 @@ var _ServiceCard = _interopRequireDefault(require("./widgets/oa-widget-serviceca
 var _CustomProgressBar = _interopRequireDefault(require("./components/oa-component-progress-bar/CustomProgressBar"));
 var _CustomHeaderWidget = _interopRequireDefault(require("./widgets/oa-widget-header/CustomHeaderWidget"));
 var _CustomPinPatternCaptureWidget = _interopRequireDefault(require("./widgets/oa-widget-input-pattern-pin/CustomPinPatternCaptureWidget"));
+var _ImageCarouselWidget = _interopRequireDefault(require("./widgets/oa-widget-image-carousel/ImageCarouselWidget"));
+var _SidebarWidget = _interopRequireDefault(require("./widgets/oa-widget-sidebar/SidebarWidget"));
+var _KPICardWidget = _interopRequireDefault(require("./widgets/oa-widget-kpi/KPICardWidget"));
 var _CustomFormWidget = _interopRequireDefault(require("./widgets/oa-widget-form/CustomFormWidget"));
 var _DateDropDown = _interopRequireDefault(require("./widgets/oa-widget-date-dropdown/DateDropDown"));
 var _CustomRating = _interopRequireDefault(require("./components/oa-component-rating/CustomRating"));
@@ -642,10 +734,16 @@ var _DropdownSearchInput = _interopRequireDefault(require("./widgets/oa-widget-d
 var _Preview = _interopRequireDefault(require("./widgets/oa-widget-preview/Preview"));
 var _PincodeBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-pincode-base-location/PincodeBaseLocation"));
 var _MapBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-map-base-location/MapBaseLocation"));
+var _ProgressiveStepsWidget = _interopRequireDefault(require("./widgets/oa-widget-progressive-steps/ProgressiveStepsWidget"));
+var _CustomSteps = _interopRequireDefault(require("./components/oa-component-steps/CustomSteps"));
 var _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
 var _DocUploadCardWidget2 = _interopRequireDefault(require("./dev/oa-widget-document-upload-card/DocUploadCardWidget"));
 var _CustomUpload2 = _interopRequireDefault(require("./dev/oa-component-upload/CustomUpload"));
+var _DocumentSideDrawer = _interopRequireDefault(require("./dev/oa-widget-document-side-drawer/DocumentSideDrawer"));
+var _CustomDocumentViewer = _interopRequireDefault(require("./dev/oa-component-document-viewer/CustomDocumentViewer"));
+var _DocumentSideModal = _interopRequireDefault(require("./dev/oa-widget-document-modal/DocumentSideModal"));
 var _PaymentAndConsent = _interopRequireDefault(require("./layout/paymentAndConsent/PaymentAndConsent"));
+var _GenricLayOut = _interopRequireDefault(require("./layout/GenricLayOut/GenricLayOut"));
 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 }; }

package/build/layout/DetailDataLayout/DetailDataLayout.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DetailDataLayout;
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireDefault(require("react"));
+var _FormWidget = _interopRequireDefault(require("../../widgets/oa-form-widget/FormWidget"));
+require("./style.css");
+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); } /* eslint-disable */
+function DetailDataLayout(props) {
+  console.log(props, "DetailDataLayoutprops1");
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormWidget.default, _extends({}, props, {
+    handleDrawerFormOnFinish: props === null || props === void 0 ? void 0 : props.handleDrawerFormOnFinish,
+    onSelectHandlers: props === null || props === void 0 ? void 0 : props.onSelectHandlers,
+    handleCollapsibleKeyData: props === null || props === void 0 ? void 0 : props.handleCollapsibleKeyData
+  })));
+}

package/build/layout/DetailDataLayout/components/Form.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireDefault(require("react"));
+var _FormWidget = _interopRequireDefault(require("../../../widgets/oa-form-widget/FormWidget"));
+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); } /* eslint-disable */
+function Form(props) {
+  const {
+    cta,
+    onFinish
+  } = props !== null && props !== void 0 ? props : {};
+  return /*#__PURE__*/_react.default.createElement(_FormWidget.default, _extends({}, props, {
+    cta: cta,
+    onFinish: onFinish
+  }));
+}
+var _default = exports.default = Form;

package/build/layout/DetailDataLayout/components/Header.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+function Header(props) {
+  const {
+    bordered,
+    heading
+  } = props !== null && props !== void 0 ? props : {};
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, bordered ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-8"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700",
+    color: "secondary-content"
+  }, heading)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    className: "dividerLine"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-24"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700",
+    color: "secondary-content"
+  }, heading))));
+}
+var _default = exports.default = Header;

package/build/layout/DetailDataLayout/style.css

@@ -0,0 +1,9 @@
+.dividerLine {
+  background: #e0e0e0;
+  border: none;
+  margin: 32px 0;
+  width: 100%;
+  display: flex;
+  border: none;
+  height: 1px;
+}

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 = {};