oa-componentbook 1.0.1-stage.45 → 1.0.1-stage.451

package/build/dev/oa-component-upload/styles.js

@@ -9,5 +9,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-upload-list{\n  display: flex !important;\n  gap: 16px !important;\n  flex-wrap: wrap !important;\n}\n.ant-upload-wrapper .ant-upload-list::before {\n    display: none;\n}\n.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n  width: 96px;\n  height: 96px;\n  margin-block: 0;\n  margin-inline: 0;\n}\n.ant-upload-select button >  span.UploadImg{\n  width: 24px !important;\n  height: 24px;\n}\n.ant-upload-select button >  span.UploadImg > img{\n  width: 100% !important;\n}\n.ant-upload-list-item-container:last-child{\n  margin: 0 !important;\n}\n.ant-form-item{\n  margin-bottom: 0;\n}\n.ant-upload button{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n} \n\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.ant-upload-disabled .button{\n  cursor: not-allowed;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done,.ant-upload-list-item-A{\n    border: 1px solid var(--color-divider) !important;\n  }\n \n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n \n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n \n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  \n  @media only screen and (max-width: 600px) {\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n      opacity: 1;\n    }\n    .ant-upload-list-item-actions a {\n      height: 16px;\n      align-items: center;\n      justify-content: center;\n      width: 16px !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px !important;\n    padding: 0px !important;\n    color: #fff;\n}\n  }\n"])));
-const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2{\n    margin: 0;\n  }\n \n  @media only screen and (max-width: 600px) {\n    \n    .ant-upload-list-item-actions button {\n      height: 16px!important;\n      width: 16px !important;\n      justify-content: center;\n  }\n  .ant-upload-list-item-actions a {\n    height: 16px;\n    width: 16px !important;\n    align-items: center;\n    justify-content: center;\n}\n    .ant-upload-list-item-actions {\n      gap: 8px;\n    }\n    .ant-upload button span + div{\n      display: none;\n    }\n  }\n"])));
+const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-upload-list {\n    display: flex !important;\n    gap: 16px !important;\n    flex-wrap: wrap !important;\n  }\n  .ant-upload-wrapper .ant-upload-list::before {\n    display: none;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper\n    .ant-upload.ant-upload-select,\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper\n    .ant-upload-list.ant-upload-list-picture-card\n    .ant-upload-list-item-container {\n    width: 96px;\n    height: 96px;\n    margin-block: 0;\n    margin-inline: 0;\n  }\n  .ant-upload-select button > span.UploadImg {\n    width: 24px !important;\n    height: 24px;\n  }\n  .ant-upload-select button > span.UploadImg > img {\n    width: 100% !important;\n  }\n  .ant-upload-list-item-container:last-child {\n    margin: 0 !important;\n  }\n  .ant-form-item {\n    margin-bottom: 0;\n  }\n  .ant-upload button {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .uploadSecPad div {\n    padding: 0 0 8px;\n  }\n  .anticon-upload {\n    font-size: 24px;\n  }\n  .ant-upload-disabled .button {\n    cursor: not-allowed;\n  }\n  .uploadSecPad {\n    width: 100%;\n  }\n  .uploadSecPad div:last-child {\n    padding: 0;\n  }\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done,\n  .ant-upload-list-item-A {\n    border: 1px solid var(--color-divider) !important;\n  }\n\n  .ant-upload-list-item-actions {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n\n  .ant-upload-list-item-actions button {\n    background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n  }\n  .ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover {\n    background: #212121;\n  }\n  .ant-upload-list-item-actions a {\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n\n  .ant-upload-wrapper\n    .ant-upload-list.ant-upload-list-picture-card\n    .ant-upload-list-item {\n    opacity: 1 !important;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-container,\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload.ant-upload-select {\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item::before,\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-actions,\n    .ant-upload-wrapper\n      .ant-upload-list\n      .ant-upload-list-item\n      .ant-upload-list-item-actions\n      .ant-upload-list-item-action {\n      opacity: 1;\n    }\n    .ant-upload-list-item-actions a {\n      height: 16px;\n      align-items: center;\n      justify-content: center;\n      width: 16px !important;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-actions\n      .anticon-eye,\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-actions\n      .anticon-delete {\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0px !important;\n      padding: 0px !important;\n      color: #fff;\n    }\n  }\n"])));
+const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .errorBorder {\n    border: 1px dashed #de350b !important;\n  }\n\n  .uploadSecPad .ant-upload-list-picture {\n    padding: 0 !important;\n    gap: 0 !important;\n  }\n\n  .uploadSecPad\n    .ant-upload-wrapper\n    .ant-upload-list.ant-upload-list-picture\n    .ant-upload-list-item\n    .ant-upload-list-item-progress {\n    bottom: -2px;\n    width: calc(100% - 24px);\n    margin-top: 0;\n    padding-inline-start: 34px;\n  }\n\n  .uploadSecPad .ant-upload-list-item-thumbnail {\n    line-height: normal !important;\n    width: 24px !important;\n    height: 24px !important;\n    padding: 0;\n  }\n\n  .uploadSecPad .ant-upload-list-item-thumbnail .anticon-file,\n  .uploadSecPad .ant-upload-list-item-thumbnail .anticon-loading {\n    font-size: 24px !important;\n    color: #014fc5 !important;\n  }\n\n  .uploadSecPad .ant-upload-list-picture .ant-upload-list-item-done {\n    border: none !important;\n    margin: 0;\n    padding: 0;\n    height: auto;\n  }\n\n  .uploadSecPad .ant-upload-list-item-actions button,\n  .uploadSecPad .ant-upload-list-item-actions button:hover {\n    background: transparent !important;\n  }\n\n  .uploadSecPad .ant-upload-list-item-actions button .anticon-delete svg {\n    color: #de350b;\n    font-size: 18px;\n  }\n\n  .uploadSecPad\n    .ant-upload-wrapper\n    .ant-upload-list.ant-upload-list-picture\n    .ant-upload-list-item-uploading\n    .ant-upload-list-item-name {\n    color: #014fc5;\n  }\n  .uploadSecPad {\n    width: 100%;\n    border-radius: 4px;\n    border: 1px dashed #014fc5;\n    background: #f6f6f6;\n    padding: 24px 16px;\n    cursor: pointer;\n  }\n\n  .uploadSecPad .ant-upload-list-item-container {\n    width: 100%;\n  }\n\n  .uploadSecPad button {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    padding: 0;\n    margin: 0;\n    color: #014fc5;\n    cursor: pointer;\n  }\n  .uploadSecPad .ant-form-item-control-input {\n    min-height: auto;\n  }\n  .uploadSecPad .ant-upload-select {\n    padding: 0px;\n  }\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2 {\n    margin: 0;\n  }\n\n  .uploadSecPad\n    .ant-upload-wrapper\n    .ant-upload-list.ant-upload-list-picture\n    .ant-upload-list-item {\n    height: auto;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-style: none !important;\n    margin: 0;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .ant-upload-list-item-actions button {\n      height: 16px !important;\n      width: 16px !important;\n      justify-content: center;\n    }\n    .ant-upload-list-item-actions a {\n      height: 16px;\n      width: 16px !important;\n      align-items: center;\n      justify-content: center;\n    }\n    .ant-upload-list-item-actions {\n      gap: 8px;\n    }\n    .ant-upload button span + div {\n      display: none;\n    }\n  }\n"])));

package/build/dev/oa-widget-document-modal/DocumentSideModal.js

@@ -0,0 +1,166 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("./styles.js");
+var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomDocumentViewer = _interopRequireDefault(require("../oa-component-document-viewer/CustomDocumentViewer"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _reactPdf = require("react-pdf");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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); } /* eslint-disable */
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.min.js");
+function DocumentSideModal(_ref) {
+  let {
+    headerIcon,
+    headerText,
+    infoIcon,
+    infoText,
+    onClose,
+    customDocumentViewerProps,
+    initialSelectedPages,
+    initialSlide,
+    updateSelectedPages,
+    maxPages
+  } = _ref;
+  const [carouselPageNumber, setcarouselPageNumber] = (0, _react.useState)(initialSlide !== null && initialSlide !== void 0 ? initialSlide : 0);
+  const [selectedPages, setSelectedPages] = (0, _react.useState)([]); //selected page
+
+  (0, _react.useEffect)(() => {
+    if (initialSelectedPages) {
+      setSelectedPages(initialSelectedPages);
+    }
+  }, [initialSelectedPages]);
+  (0, _react.useEffect)(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  const pageRefs = (0, _react.useRef)([]);
+
+  /**
+   * Handles the checkbox change event.
+   * @param {boolean} checked if the checkbox is checked or not.
+   * The function will add or remove the current page number from the selectedPages state
+   * depending on the checked status. If the checkbox is checked and the selectedPages state
+   * length is less than maxPages (default 2), it will add the current page number to the selectedPages state.
+   * If the checkbox is unchecked, it will remove the current page number from the selectedPages state.
+   */
+  const handleCheckboxChange = checked => {
+    setSelectedPages(prevSelectedPages => {
+      if (checked) {
+        if (!prevSelectedPages.includes(carouselPageNumber) && prevSelectedPages.length < maxPages) {
+          return [...prevSelectedPages, carouselPageNumber];
+        }
+        return prevSelectedPages;
+      } else {
+        return prevSelectedPages.filter(page => page !== carouselPageNumber);
+      }
+    });
+  };
+
+  /**
+   * Updates the current carousel page number.
+   *
+   * @param {number} value - The new page number to set for the carousel.
+   */
+
+  const setcarouselPageNumberHandler = value => {
+    setcarouselPageNumber(value);
+  };
+
+  /**
+   * Deletes the page from selectedPages state.
+   * @param {number} pageNumber - The page number to delete from the selectedPages state.
+   */
+  const deleteSelectedPage = pageNumber => {
+    setSelectedPages(prevSelected => {
+      return prevSelected === null || prevSelected === void 0 ? void 0 : prevSelected.filter(item => item !== pageNumber);
+    });
+  };
+  const isPageSelected = (0, _react.useMemo)(() => selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.includes(carouselPageNumber), [selectedPages, carouselPageNumber]);
+  const disableCheckbox = (0, _react.useMemo)(() => !isPageSelected && selectedPages.length >= maxPages, [isPageSelected, selectedPages]);
+  return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "deviceName"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t2-700",
+    color: "primary-background"
+  }, headerText), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _Close.default,
+    size: 20,
+    onClick: onClose
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "previewSec"
+  }, /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, customDocumentViewerProps, {
+    setcarouselPageNumberHandler: setcarouselPageNumberHandler,
+    initialSlide: initialSlide,
+    selectedPages: selectedPages,
+    isFooterVisible: selectedPages.length > 0 // <-- new prop
+    ,
+    carouselPageNumber: carouselPageNumber,
+    deleteSelectedPage: deleteSelectedPage
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerSec"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "containerWidth"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
+    label: "Select Page ".concat(carouselPageNumber + 1),
+    checked: isPageSelected,
+    disabled: disableCheckbox,
+    onChange: e => handleCheckboxChange(e.target.checked)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b3-400",
+    color: disableCheckbox ? "warning" : "secondary-content"
+  }, "(Maximum ".concat(maxPages, " pages can be selected)")))), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: selectedPages.length === 0 ? "Selected" : "".concat(selectedPages.length, " ").concat(selectedPages.length > 1 ? "" : "", " Selected"),
+    disabled: selectedPages.length === 0,
+    onClick: () => updateSelectedPages(selectedPages)
+  }))));
+}
+DocumentSideModal.propTypes = {
+  headerText: _propTypes.default.string,
+  initialSlide: _propTypes.default.number,
+  initialSelectedPages: _propTypes.default.arrayOf(_propTypes.default.number),
+  headerIcon: _propTypes.default.elementType,
+  // assuming it's a component like an Icon
+  infoIcon: _propTypes.default.elementType,
+  infoText: _propTypes.default.string,
+  onClose: _propTypes.default.func.isRequired,
+  customDocumentViewerProps: _propTypes.default.object,
+  updateSelectedPages: _propTypes.default.func.isRequired,
+  maxPages: _propTypes.default.number
+};
+
+// ✅ Default Props
+DocumentSideModal.defaultProps = {
+  headerText: "",
+  initialSelectedPages: [],
+  initialSlide: 0,
+  headerIcon: null,
+  infoIcon: null,
+  infoText: "",
+  customDocumentViewerProps: {},
+  maxPages: 2
+};
+var _default = exports.default = DocumentSideModal;

package/build/dev/oa-widget-document-modal/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Wrapper = 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 Wrapper = exports.Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.previewSec > div,.previewSec > div > div,.react-pdf__Document .ant-carousel,.slick-list,.slick-track,.slick-slide,.slick-slide > div,.slick-slide > div > div{\nheight: 100%;\n}\n.react-pdf__Document{\nheight: 100% !important;\noverflow: hidden !important;\nposition: relative;\n}\n.imgViewer .react-pdf__Page canvas{\n    height: 100% !important;\n    width: 100% !important;\n}\n.slick-slider{\n    height: 100%;\n}\n    display: flex;\n    flex-direction: column;\n    height: 100dvh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1000;\n     background: rgba(0, 0, 0, 0.70);\n     @media screen and (-webkit-min-device-pixel-ratio: 0) {\n  @supports (-webkit-overflow-scrolling: touch) {\n    height: auto;\n}\n}\n@media only screen and (max-width: 600px) {\n  height: auto;\n}\n    \n    .react-pdf__Page{\n    display: flex !important;\n    justify-content: center;\n    \n    align-items: top;\n\n    }\n    .carouselFooter{\n        height: 88px !important;\n        width: 100%;\n        color: #fff;\n        position: fixed;\n        bottom: 72px;\n        display: flex;\n        align-items: center;\n        background: rgba(0, 0, 0, 0.70);\n        box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.14);\n        \n    }\n        .footerContainer{\n        max-width: 768px;\n        margin: 0 auto;\n        display: flex;\n        gap: 20px;\n        width: 100%;\n        }\n        .imgViewer{\n            position: relative;\n            width: 56px;\n            height: 56px;\n            border: 1px solid var(--color-primary-background);\n            border-radius: 8px;\n        }\n            // .imgViewer .react-pdf__Page canvas{\n            // position: absolute;\n            // top: 0;\n            // width: 100%;\n            // }\n            .imgViewer .react-pdf__Document{\n                position: absolute;\n                top: 0;\n                width: 100%;\n                border-radius: 8px;\n            }\n        .imgViewer svg{\n        position: absolute;\n        right: -9px;\n        color: #fff;\n        top: -9px;\n        z-index: 9;\n        background: var(--color-primary);\n        border-radius: 50%;\n        cursor: pointer;\n            font-weight: bolder;\n    padding: 2px;\n        }\n    .slick-prev,  .slick-next{\n    display: flex !important;\n    }\n        .ant-carousel .slick-prev::after,  .ant-carousel .slick-next::after {\n            display: none;\n        }\n    .ant-carousel .slick-next:hover,.slick-prev:hover{\n        color: #fff;\n        background: #212121;\n    }\n   .ant-carousel .slick-next::before ,.ant-carousel .slick-prev::before {display: none;}\n    .slick-slide > div > div{\n        display: flex !important;\n        flex-direction: column-reverse;\n        justify-content: center;\n        align-items: center;\n        padding: 0px 0 0;\n    }\n    .slick-disabled{\n        display: none !important;\n    }\n    // .react-transform-component{\n    // height: calc(100vh - 178px) !important;\n    // }\n  \n    .react-pdf__Page canvas{\n    width: max-content !important;\n    height: calc(100dvh - 72px - 48px) !important;\n    }\n    .react-transform-wrapper{\n            overflow-y: hidden !important;\n            padding: 0 !important;\n            height: 100% !important;\n    }\n        // .react-pdf__Page__textContent{\n        //     height: 80% !important;\n        //     width: auto !important;\n        // }\n  .deviceName{\n    height: 48px;\n    background: #212121;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n    .deviceName svg{\n        position: absolute;\n        right: 24px;\n        top: 16px;\n        color: #FFF;\n    }\n    .infoSec{\n        background: var(--color-background-warning);\n        height: 48px;\n        color:#212121;\n        align-items: center;\n        justify-content: center;\n        \n    }\n        .containerWidth{\n            max-width: 768px;\n            margin: 0 auto;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 8px 0 !important;\n        }\n            .containerWidth div{\n                display: flex;\n                align-items: center;\n                gap: 8px;\n            }\n        .previewSec{\n        flex: 1;\n        overflow: hidden;\n        }\n        .withFooter{\n        margin: 0 0 84px !important;\n        }\n        .customDocumentViewerOverlay{\n            display: flex;\n    flex-direction: column-reverse;\n    height: calc(100vh - 180px);\n    width: 100%;\n    align-items: anchor-center;\n        }\n    .pageNumber{\n    white-space: nowrap;\n    }\n    .customDocumentViewerOverlayHeader{\n            position: fixed !important;\n            bottom: 82px !important;\n    }\n .controlsWithFooter .customDocumentViewerOverlayHeader{\n    bottom: 170px !important;\n    }\n        .footerSec{\n        background: var(--color-primary-background);\n        height: 72px;\n        }\n        .footerSec .containerWidth{\n        height: 72px;\n        }\n        .footerSec .containerWidth div{\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 0;\n        }\n\n        @media only screen and (max-width: 600px) {\n        \n        .deviceName {\n            justify-content: start;\n            padding: 0 16px;\n}\n .footerSec{\n padding: 0 16px;\n }\n .carouselFooter{\n     display: flex;\n     height: 72px;\n    justify-content: flex-start;\n    align-items: center;\n}\n    .footerContainer{\n    padding: 0 16px;\n    width: 100%;\n    }\n    .infoSec{\n    padding: 0 16px;\n    }\n}\n"])));
+var _default = exports.default = Wrapper;

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

@@ -0,0 +1,200 @@
+"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", "containerClassName"];
+/* 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,
+      containerClassName
+    } = _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, _extends({
+    buttonConfig: drawerButtonConfig,
+    "data-test": "document-side-drawer",
+    className: "documentDrawer",
+    width: calculatedWidth,
+    onClose: handleCloseDrawer,
+    title: title
+  }, props), /*#__PURE__*/_react.default.createElement(_styles.default, {
+    className: containerClassName
+  }, /*#__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,
+  containerClassName: _propTypes.default.string
+};
+
+// 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    min-width: 300px;\n    max-width: 450px;\n    overflow-x: visible;\n  }\n  /* Styles specific to DocumentViewerWithDetails */\n  &.documentViewerWithDetails {\n    .viewerContainer > div:first-child {\n      flex: 1;\n      box-sizing: border-box;\n      min-width: 0;\n    }\n    .rightContSection {\n      flex: 0 0 auto;\n      width: fit-content;\n      min-width: auto;\n      max-width: none;\n    }\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/dev/oa-widget-document-viewer-with-details/DocumentViewerWithDetails.js

@@ -0,0 +1,123 @@
+"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"));
+var _DocumentSideDrawer = _interopRequireDefault(require("../oa-widget-document-side-drawer/DocumentSideDrawer"));
+var _DocumentDetailsPanel = _interopRequireDefault(require("../../components/oa-component-document-details-panel/DocumentDetailsPanel"));
+const _excluded = ["title", "onClose", "drawerWidth", "fileUrl", "fileType", "documentConfig", "detailsTitle", "sectionTitle", "details", "actions", "children"];
+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; }
+/**
+ * DocumentViewerWithDetails Component
+ *
+ * A split-view component that displays a document viewer on the left
+ * and a details panel with actions on the right.
+ *
+ * Uses DocumentSideDrawer and DocumentDetailsPanel internally.
+ *
+ * @example
+ * <DocumentViewerWithDetails
+ *   title="VIEW DOCUMENT"
+ *   fileUrl="/path/to/document.pdf"
+ *   fileType="pdf"
+ *   detailsTitle="Document Information"
+ *   sectionTitle="DETAILS"
+ *   details={[
+ *     { label: 'Date', value: '17 Nov 2025' },
+ *     { label: 'Document Number', value: 'DOC-12345' },
+ *   ]}
+ *   actions={[
+ *     { label: 'Download', onClick: () => {}, icon: <DownloadIcon /> },
+ *   ]}
+ *   onClose={() => setIsOpen(false)}
+ * />
+ */
+function DocumentViewerWithDetails(_ref) {
+  let {
+      // Drawer props
+      title,
+      onClose,
+      drawerWidth,
+      // Document props
+      fileUrl,
+      fileType,
+      documentConfig,
+      // Details panel props
+      detailsTitle,
+      sectionTitle,
+      details,
+      actions,
+      // Additional children
+      children
+    } = _ref,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // Build document config from fileUrl or use provided documentConfig
+  const finalDocumentConfig = documentConfig || (fileUrl ? {
+    fileUrl,
+    fileType: fileType || 'pdf'
+  } : null);
+  return /*#__PURE__*/_react.default.createElement(_DocumentSideDrawer.default, _extends({
+    title: title,
+    handleCloseDrawer: onClose,
+    documentConfig: finalDocumentConfig,
+    drawerWidth: drawerWidth,
+    containerClassName: "documentViewerWithDetails"
+  }, restProps), /*#__PURE__*/_react.default.createElement(_DocumentDetailsPanel.default, {
+    title: detailsTitle,
+    sectionTitle: sectionTitle,
+    details: details,
+    actions: actions
+  }, children));
+}
+DocumentViewerWithDetails.propTypes = {
+  /** Drawer title displayed in the header */
+  title: _propTypes.default.string,
+  /** Callback function when drawer is closed */
+  onClose: _propTypes.default.func,
+  /** Custom drawer width (default: 1200) */
+  drawerWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /** URL of the document to display */
+  fileUrl: _propTypes.default.string,
+  /** Type of document: 'pdf', 'pdfWithCarousel', or 'image' */
+  fileType: _propTypes.default.oneOf(['pdf', 'pdfWithCarousel', 'image']),
+  /** Full document config (alternative to fileUrl) */
+  documentConfig: _propTypes.default.object,
+  /** Title text for the details panel */
+  detailsTitle: _propTypes.default.string,
+  /** Section header text (e.g., "DETAILS") */
+  sectionTitle: _propTypes.default.string,
+  /** Array of detail items to display */
+  details: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  })),
+  /** Array of action buttons to display */
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    icon: _propTypes.default.node
+  })),
+  /** Additional content to render in the details panel */
+  children: _propTypes.default.node
+};
+DocumentViewerWithDetails.defaultProps = {
+  title: null,
+  onClose: () => {},
+  drawerWidth: '1200',
+  fileUrl: null,
+  fileType: null,
+  documentConfig: null,
+  detailsTitle: null,
+  sectionTitle: null,
+  details: [],
+  actions: [],
+  children: null
+};
+var _default = exports.default = DocumentViewerWithDetails;

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;