oa-componentbook 0.18.298 → 0.18.300

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.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  .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.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.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.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  .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"])));
 var _default = exports.default = GridLayout;

package/build/index.js

@@ -347,12 +347,6 @@ Object.defineProperty(exports, "LocationAccessWidget", {
     return _LocationAccessWidget.default;
   }
 });
-Object.defineProperty(exports, "MapBaseLocation", {
-  enumerable: true,
-  get: function get() {
-    return _MapBaseLocation.default;
-  }
-});
 Object.defineProperty(exports, "MaterialIcon", {
   enumerable: true,
   get: function get() {
@@ -383,12 +377,6 @@ Object.defineProperty(exports, "NotesWidget", {
     return _NotesWidget.default;
   }
 });
-Object.defineProperty(exports, "PincodeBaseLocation", {
-  enumerable: true,
-  get: function get() {
-    return _PincodeBaseLocation.default;
-  }
-});
 Object.defineProperty(exports, "PlanCard", {
   enumerable: true,
   get: function get() {
@@ -614,8 +602,6 @@ var _MultipleCollapseWithSlots = _interopRequireDefault(require("./widgets/oa-wi
 var _CustomPopover = _interopRequireDefault(require("./components/oa-component-popover/CustomPopover"));
 var _DropdownSearchInput = _interopRequireDefault(require("./widgets/oa-widget-dropdown-search-input/DropdownSearchInput"));
 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 _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
 var _TrackShipmentWidget2 = _interopRequireDefault(require("./dev/oa-widget-track-shipment/TrackShipmentWidget"));
 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); }

package/build/widgets/oa-widget-input-pattern-pin/CustomPinPatternCaptureWidget.js

@@ -26,11 +26,13 @@ function CustomPinPatternCaptureWidget(_ref) {
   let {
     type,
     initialPattern = [],
-    prePoluatedPattern,
+    prePoPulatedPattern,
     showButtons,
     finalPattern,
     showNumbersOnDots,
-    greyDisabledDots
+    greyDisabledDots,
+    heading,
+    hideFooter
   } = _ref;
   const [pin, setPin] = (0, _react.useState)('');
   const decreaseValueIndexbyOne = array => array.map(num => num - 1);
@@ -40,13 +42,13 @@ function CustomPinPatternCaptureWidget(_ref) {
   };
   const [confirmPin, setConfirmPin] = (0, _react.useState)('');
   const [pinError, setPinError] = (0, _react.useState)(false);
-  const [pattern, setPattern] = (0, _react.useState)((prePoluatedPattern === null || prePoluatedPattern === void 0 ? void 0 : prePoluatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoluatedPattern) : []);
+  const [pattern, setPattern] = (0, _react.useState)((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
   const [isPatternConfirmed, setIsPatternConfirmed] = (0, _react.useState)(false);
-  const [savedPattern, setSavedPattern] = (0, _react.useState)((prePoluatedPattern === null || prePoluatedPattern === void 0 ? void 0 : prePoluatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoluatedPattern) : []); // for prepopulating pattern
+  const [savedPattern, setSavedPattern] = (0, _react.useState)((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []); // for prepopulating pattern
   const [step, setStep] = (0, _react.useState)('input'); // for managing pattern input/confirm steps
   const [step1Pattern, setStep1Pattern] = (0, _react.useState)([]);
   const [patternMismatch, setPatternMismatch] = (0, _react.useState)(false);
-  const [prepopulatedPattern, setPrepopulatedPattern] = (0, _react.useState)((prePoluatedPattern === null || prePoluatedPattern === void 0 ? void 0 : prePoluatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoluatedPattern) : []);
+  const [prePopulatedPattern, setprePopulatedPattern] = (0, _react.useState)((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
 
   // PIN handling
   const handlePinChange = e => {
@@ -57,6 +59,11 @@ function CustomPinPatternCaptureWidget(_ref) {
       setPinError(false);
     }
   };
+  (0, _react.useEffect)(() => {
+    setprePopulatedPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+    setPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+    setSavedPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
+  }, [prePoPulatedPattern]);
   const handleConfirmPinChange = e => {
     setConfirmPin(e.target.value);
     if (pin && e.target.value !== pin) {
@@ -91,7 +98,7 @@ function CustomPinPatternCaptureWidget(_ref) {
   const handleReset = () => {
     setPattern([]);
     setPatternMismatch(false);
-    setPrepopulatedPattern([]);
+    setprePopulatedPattern([]);
     setStep('input');
     setIsPatternConfirmed(false);
     setSavedPattern(initialPattern); // for prepopulating pattern
@@ -151,11 +158,11 @@ function CustomPinPatternCaptureWidget(_ref) {
   }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "flexAlignPattern"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "padding-bottom-8"
+    className: "padding-bottom-8 padding-top-8"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "primary-content",
     className: "type-t2-700"
-  }, step === 'input' ? 'Draw lock screen pattern' : 'Draw lock screen pattern again')), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, heading.length === 0 && (step === 'input' ? 'Draw lock screen pattern' : 'Draw lock screen pattern again'), heading && heading.length > 0 ? heading : '')), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: "type-b3-400",
     color: "placeholder-text"
   }, "Sequence: \xA0", (_increaseValueIndexby = increaseValueIndexbyOne(pattern)) === null || _increaseValueIndexby === void 0 ? void 0 : _increaseValueIndexby.map((num, i) => {
@@ -178,11 +185,11 @@ function CustomPinPatternCaptureWidget(_ref) {
     size: 3,
     connectorThickness: 2,
     allowJumping: true,
-    path: (prepopulatedPattern === null || prepopulatedPattern === void 0 ? void 0 : prepopulatedPattern.length) > 0 ? prepopulatedPattern : pattern // Prepopulate pattern
+    path: (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0 ? prePopulatedPattern : pattern // Prepopulate pattern
     ,
     onChange: patternArray => setPattern(patternArray),
     onFinish: () => handlePatternComplete(pattern),
-    disabled: (prepopulatedPattern === null || prepopulatedPattern === void 0 ? void 0 : prepopulatedPattern.length) > 0
+    disabled: (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0
   }), renderNumbersOnDots())), showButtons && /*#__PURE__*/_react.default.createElement("div", {
     className: "buttonAlign"
   }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
@@ -193,10 +200,10 @@ function CustomPinPatternCaptureWidget(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
     type: "primary",
     onClick: handleSubmitPatternComplete,
-    disabled: !(pattern !== null && pattern !== void 0 && pattern.length) || (prepopulatedPattern === null || prepopulatedPattern === void 0 ? void 0 : prepopulatedPattern.length) > 0,
+    disabled: !(pattern !== null && pattern !== void 0 && pattern.length) || (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0,
     label: "Save",
     size: "large"
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), !hideFooter && /*#__PURE__*/_react.default.createElement("div", {
     className: "textInfo"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: "type-b3-400",
@@ -216,18 +223,22 @@ function CustomPinPatternCaptureWidget(_ref) {
 CustomPinPatternCaptureWidget.propTypes = {
   type: _propTypes.default.string,
   initialPattern: _propTypes.default.array,
-  prePoluatedPattern: _propTypes.default.array,
-  showButtons: _propTypes.default.array,
+  prePoPulatedPattern: _propTypes.default.array,
+  showButtons: _propTypes.default.bool,
   finalPattern: _propTypes.default.func,
   showNumbersOnDots: _propTypes.default.bool,
-  greyDisabledDots: _propTypes.default.bool
+  greyDisabledDots: _propTypes.default.bool,
+  heading: _propTypes.default.string,
+  hideFooter: _propTypes.default.bool
 };
 CustomPinPatternCaptureWidget.defaultProps = {
   type: 'pattern',
   initialPattern: '',
-  prePoluatedPattern: [],
+  prePoPulatedPattern: [],
   showButtons: true,
   finalPattern: () => {},
   showNumbersOnDots: false,
-  greyDisabledDots: false
+  greyDisabledDots: false,
+  heading: '',
+  hideFooter: false
 };

package/build/widgets/oa-widget-input-pattern-pin/styles.js

@@ -9,4 +9,4 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 600px;\n    width: 100%;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__point-wrapper.selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: black !important;\n}\n  .pattern-container {\n          position: relative;\n        }\n        .numbers-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-wrap: wrap;\n          right: 0;\n              width: 300px;\n    height: 300px;\n    margin: 0 auto;\n        }\n        .dot-number {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 100px;\n          height: 100px;\n        }\n  .react-pattern-lock__point-wrapper{\n      z-index: 9;\n  }\n.flexAlignPattern{\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: calc(100vh - 48px);\n    gap: 24px;\n}\n    .cancelIcon{\n        position: absolute;\n       right: 16px;\n       cursor: pointer;\n    }\n.react-pattern-lock__pattern-wrapper .selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: #0275DA !important;\n      min-width: 12px !important;\n    min-height: 12px !important;\n}\n    .react-pattern-lock__point-inner{\n      background: #0275DA;\n      min-width: 12px !important;\n    min-height: 12px !important;\n    }\n\n    .posRelative{\n    position: relative;\n    }\n .disabled  .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: var(--color-placeholder-text) !important;\n      min-width: 12px !important;\n    min-height: 12px !important;\n        z-index: 2;\n}\n      .greyDisabledDots .react-pattern-lock__point-inner{\n        background: var(--color-placeholder-text);\n      }  \n        .dot-number span{\n          width: 16px;\n          height: 16px;\n          background: var(--color-divider);\n          z-index: 2;\n          font-size: 11px;\n          font-style: normal;\n          font-weight: 700;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          color: #717171;\n              line-height: 0;\n              z-index: 9;\n        }\n          .activedotoverlay span{\n            background: #0275DA;\n            color: #fff;\n          }\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: black !important;\n}\n  .buttonAlign{\n      display: flex;\n    justify-content: space-between;\n    gap: 16px;\n  }\n    .buttonAlign button{\n      width: 100%;\n    }\n      .textInfo{\n        padding: 12px;\n            border-top: 1px solid #D9D9D9;\n            text-align: left;\n            margin: 16px 0 0;\n            text-align: left;\n      }\n          .alignLeft{\n          text-align: left;\n          }\n          .selected .react-pattern-lock__point{\n              width: 28px !important;\n              height: 28px !important;\n              background: #DEF1FB !important;\n              border-radius: 50% !important;\n          }\n.react-pattern-lock__pattern-wrapper{\nmargin: 0 auto;}\n.react-pattern-lock__pattern-wrapper .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: #0275DA !important;\n}\n"])));
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 600px;\n    width: 100%;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__point-wrapper.selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: black !important;\n}\n  .pattern-container {\n          position: relative;\n        }\n        .numbers-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-wrap: wrap;\n          right: 0;\n              width: 300px;\n    height: 300px;\n    margin: 0 auto;\n        }\n        .dot-number {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 100px;\n          height: 100px;\n        }\n  .react-pattern-lock__point-wrapper{\n      z-index: 9;\n  }\n.flexAlignPattern{\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: calc(100vh - 0px);\n    gap: 24px;\n}\n    .cancelIcon{\n        position: absolute;\n       right: 16px;\n       cursor: pointer;\n    }\n.react-pattern-lock__pattern-wrapper .selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: #0275DA !important;\n      min-width: 12px !important;\n    min-height: 12px !important;\n}\n    .react-pattern-lock__point-inner{\n      background: #0275DA;\n      min-width: 12px !important;\n    min-height: 12px !important;\n    }\n\n    .posRelative{\n    position: relative;\n    }\n .disabled  .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: var(--color-placeholder-text) !important;\n      min-width: 12px !important;\n    min-height: 12px !important;\n        z-index: 2;\n}\n      .greyDisabledDots .react-pattern-lock__point-inner{\n        background: var(--color-placeholder-text);\n      }  \n        .dot-number span{\n          width: 16px;\n          height: 16px;\n          background: var(--color-divider);\n          z-index: 2;\n          font-size: 11px;\n          font-style: normal;\n          font-weight: 700;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          color: #717171;\n              line-height: 0;\n              z-index: 9;\n        }\n          .activedotoverlay span{\n            background: #0275DA;\n            color: #fff;\n          }\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: black !important;\n}\n  .buttonAlign{\n      display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 0 16px;\n  }\n    .buttonAlign button{\n      width: 100%;\n    }\n      .textInfo{\n        padding: 12px;\n            border-top: 1px solid #D9D9D9;\n            text-align: left;\n            margin: 16px 0 0;\n            text-align: left;\n      }\n          .alignLeft{\n          text-align: left;\n          }\n          .selected .react-pattern-lock__point{\n              width: 28px !important;\n              height: 28px !important;\n              background: #DEF1FB !important;\n              border-radius: 50% !important;\n          }\n.react-pattern-lock__pattern-wrapper{\nmargin: 0 auto;}\n.react-pattern-lock__pattern-wrapper .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: #0275DA !important;\n}\n"])));

package/build/widgets/oa-widget-preview/Preview.js

@@ -14,7 +14,7 @@ var _rightIcon = _interopRequireDefault(require("../../images/right-icon.svg"));
 var _zoom = _interopRequireDefault(require("../../images/zoom.svg"));
 var _close = _interopRequireDefault(require("../../images/close.svg"));
 var _utils = require("../../utils");
-var _styles = require("./styles");
+require("./preview.css");
 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; }
@@ -47,7 +47,7 @@ function Preview(_ref) {
   };
   const handleZoom = () => setModalOpen(true);
   const handleCancel = () => setModalOpen(false);
-  return /*#__PURE__*/_react.default.createElement(_styles.ImgPreviewStyles, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "mainStylePreview"
   }, !isSingleMedia && /*#__PURE__*/_react.default.createElement("img", {
     className: "left-icon",
@@ -69,12 +69,10 @@ function Preview(_ref) {
     muted: false
   }, /*#__PURE__*/_react.default.createElement("track", {
     kind: "captions"
-  })) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "imgContainerHeight"
-  }, /*#__PURE__*/_react.default.createElement("img", {
+  })) : /*#__PURE__*/_react.default.createElement("img", {
     src: selectedMedia,
     alt: "Selected Media"
-  })), !isVideo && /*#__PURE__*/_react.default.createElement("img", {
+  }), !isVideo && /*#__PURE__*/_react.default.createElement("img", {
     onClick: handleZoom,
     src: _zoom.default,
     className: "zoomIn",
@@ -128,7 +126,7 @@ function Preview(_ref) {
     selectedMedia: selectedMedia,
     closeIcon: _close.default,
     isVideo: isVideo
-  })));
+  }));
 }
 Preview.propTypes = {
   srcArray: _propTypes.default.arrayOf(_propTypes.default.shape({

package/build/widgets/oa-widget-preview/ZoomImageComponent.js

@@ -9,7 +9,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _antd = require("antd");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("./styles");
+require("./preview.css");
 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; }
@@ -28,12 +28,12 @@ function ZoomMediaComponent(_ref) {
   const handleZoomModal = () => {
     setZoomView(prev => !prev);
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.ImgPreviewStyles, null, /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+  return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     className: "zoomModal",
     visible: isModalOpen,
     onCancel: handleCancel,
     width: 1024,
-    footer: null
+    footer: null // Assuming you don't need a footer
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: closeIcon,
     onClick: handleCancel,
@@ -59,7 +59,7 @@ function ZoomMediaComponent(_ref) {
     src: selectedMedia,
     alt: "Selected",
     role: "presentation"
-  }))));
+  })));
 }
 ZoomMediaComponent.propTypes = {
   isModalOpen: _propTypes.default.bool.isRequired,

package/build/widgets/oa-widget-preview/preview.css

@@ -0,0 +1,115 @@
+.mainStylePreview .selected {
+    width: 302px;
+    margin: 0 auto;
+    height: 56vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.singleVideoselected{
+    max-width: 360px;
+  width: 100%;
+  margin: 0 auto;
+  height: calc(100vh - 101px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.imgContainer {
+  display: flex;
+  overflow-x: auto;
+  background-color: #fafafa;
+  box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 12%);
+  padding: 16px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.imgArea {
+  margin-right: 20px;
+  list-style: none;
+}
+.imgArea img,
+.imgArea video {
+  width: 116px !important;
+  height: 116px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.imgArea video {
+  border: 1px solid var(--color-divider);
+}
+.imgArea span {
+  display: block;
+  text-align: center;
+  color: var(--color-primary-content);
+}
+.mainStylePreview .selected img {
+  width: 232px;
+}
+.mainStylePreview .selected img.zoomIn,
+.mismatchDrawer .ovrScroll .deicePic .zoomIn {
+  width: auto;
+  position: absolute;
+  cursor: pointer;
+  opacity: 0.8;
+}
+.left-icon {
+  position: absolute;
+  top: 35%;
+  font-size: 30px;
+  cursor: pointer;
+  left: 40px;
+}
+.right-icon {
+  position: absolute;
+  top: 35%;
+  right: 40px;
+  font-size: 30px;
+  cursor: pointer;
+}
+.zoomModal .ant-modal-body {
+  height: 420px;
+  overflow-x: auto;
+  margin: 16px 0 0;
+}
+.zoomModal .closedIcon {
+  display: none;
+}
+.modalImg {
+  width: 100%;
+}
+.imgContainer .selected-thumbnail {
+  border: 2px solid var(--color-primary);
+}
+.imgContainer .selected-thumb {
+  color: var(--color-primary);
+}
+.imgContainer span {
+  width: 138px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mainStylePreview .selected video {
+    height: 300px;
+    width: 100%;
+  }
+  .singleVideoselected img:first-child{
+    width: 100%;
+    margin: 0 auto;
+    display: block;
+  }
+  .singleVideoselected .zoomIn{
+    position: absolute;
+  }
+.singleVideoselected video {
+  height: 440px;
+  width: 100%;
+}
+@media screen and (max-width: 600px) {
+  .zoomModal .ant-modal-content {
+    position: fixed !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.298",
+  "version": "0.18.300",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -23,7 +23,6 @@
     "d3": "^7.8.5",
     "dayjs": "^1.11.10",
     "pdfjs-dist": "^2.6.347",
-    "react-google-maps": "^9.4.5",
     "react-markdown": "^8.0.7",
     "react-pattern-lock": "^12.0.12",
     "react-pdf": "^5.3.0",

package/build/images/current-location.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.753 9.9002H19.4219C19.6108 9.9002 19.7855 10.001 19.88 10.1647C19.9746 10.3284 19.9746 10.5301 19.88 10.6938C19.7855 10.8575 19.6108 10.9583 19.4219 10.9583H16.753C16.6277 12.454 15.9768 13.8566 14.9157 14.9178C13.8543 15.979 12.4517 16.6299 10.9562 16.7552V19.424C10.9562 19.6129 10.8554 19.7877 10.6917 19.8821C10.528 19.9767 10.3263 19.9767 10.1626 19.8821C9.99891 19.7876 9.89806 19.6129 9.89806 19.424V16.7552C8.40244 16.6299 6.99978 15.979 5.93861 14.9178C4.8774 13.8565 4.22651 12.4539 4.10122 10.9583H1.43239C1.24345 10.9583 1.06873 10.8575 0.974268 10.6938C0.879671 10.5301 0.879671 10.3284 0.974268 10.1647C1.06876 10.001 1.24346 9.9002 1.43239 9.9002H4.10122C4.22653 8.40458 4.87743 7.00192 5.93861 5.94074C6.99992 4.87954 8.40254 4.22865 9.89806 4.10336V1.43453C9.89806 1.24559 9.99891 1.07087 10.1626 0.976404C10.3263 0.881807 10.528 0.881807 10.6917 0.976404C10.8554 1.07089 10.9562 1.24559 10.9562 1.43453V4.10336C12.4518 4.22866 13.8545 4.87957 14.9157 5.94074C15.9769 7.00205 16.6277 8.40468 16.753 9.9002ZM10.956 14.8738V15.6928C12.1701 15.5706 13.3045 15.0324 14.1673 14.1698C15.03 13.307 15.5681 12.1726 15.6903 10.9585H14.8714C14.6823 10.9585 14.5076 10.8576 14.4131 10.6939C14.3186 10.5302 14.3186 10.3285 14.4131 10.1649C14.5076 10.0012 14.6823 9.90032 14.8714 9.90032H15.6903C15.5681 8.68623 15.03 7.55183 14.1673 6.68902C13.3045 5.82634 12.1701 5.28825 10.956 5.16602V5.98498C10.956 6.17406 10.8552 6.34877 10.6915 6.44324C10.5278 6.5377 10.3261 6.5377 10.1624 6.44324C9.99872 6.34875 9.89788 6.17405 9.89788 5.98498V5.16602C8.68379 5.28822 7.54938 5.82634 6.68658 6.68902C5.8239 7.55183 5.28581 8.68623 5.16357 9.90032H5.98254C6.17162 9.90032 6.34633 10.0012 6.4408 10.1649C6.53526 10.3286 6.53526 10.5302 6.4408 10.6939C6.34631 10.8576 6.17161 10.9585 5.98254 10.9585H5.16357C5.28578 12.1726 5.8239 13.307 6.68658 14.1698C7.54938 15.0324 8.68379 15.5705 9.89788 15.6928V14.8738C9.89788 14.6847 9.99872 14.51 10.1624 14.4155C10.3261 14.3211 10.5278 14.3211 10.6915 14.4155C10.8552 14.51 10.956 14.6847 10.956 14.8738Z" fill="#212121"/>
-</svg>

package/build/images/map_pointer.svg

@@ -1,25 +0,0 @@
-<svg width="44" height="46" viewBox="0 0 44 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="21" y="38" width="2" height="8" fill="#212112"/>
-<g filter="url(#filter0_dd_2087_73176)">
-<circle cx="22" cy="22" r="16" fill="#212112"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8386 30.6406C20.2333 30.6384 14.7945 24.0506 14.8003 20.0179C14.806 16.1427 17.975 12.9946 21.8645 13C25.7535 13.0055 28.8112 16.1429 28.8055 20.0179C28.7997 24.0508 23.4436 30.6428 21.8386 30.6406ZM18.5 19.8644C18.4975 21.5565 19.879 22.9349 21.5792 22.9372C23.2796 22.9396 24.6647 21.565 24.6672 19.873C24.6697 18.1809 23.2886 16.8021 21.5883 16.7998C19.8879 16.7974 18.5024 18.1723 18.5 19.8644Z" fill="white"/>
-<defs>
-<filter id="filter0_dd_2087_73176" x="0" y="0" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-2" dy="-2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2087_73176"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="2" dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_2087_73176" result="effect2_dropShadow_2087_73176"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2087_73176" result="shape"/>
-</filter>
-</defs>
-</svg>

package/build/images/search_ic.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4351 14.0629H14.7124L14.4563 13.8159C15.3528 12.773 15.8925 11.4191 15.8925 9.94626C15.8925 6.66209 13.2304 4 9.94626 4C6.66209 4 4 6.66209 4 9.94626C4 13.2304 6.66209 15.8925 9.94626 15.8925C11.4191 15.8925 12.773 15.3528 13.8159 14.4563L14.0629 14.7124V15.4351L18.6369 20L20 18.6369L15.4351 14.0629ZM9.94626 14.0629C7.66838 14.0629 5.82962 12.2241 5.82962 9.94626C5.82962 7.66838 7.66838 5.82962 9.94626 5.82962C12.2241 5.82962 14.0629 7.66838 14.0629 9.94626C14.0629 12.2241 12.2241 14.0629 9.94626 14.0629Z" fill="#7A7A7A"/>
-</svg>

package/build/images/search_not_found.svg

@@ -1,7 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M43.7219 47.9521L47.9634 43.7105L65.9982 61.7446L61.7566 65.9862L43.7219 47.9521Z" fill="#71777D"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M29.9536 5.96997C23.5884 5.96997 17.4839 8.49853 12.9831 12.9994C8.48218 17.5003 5.95361 23.6048 5.95361 29.97C5.95361 36.3352 8.48218 42.4397 12.9831 46.9405C17.4839 51.4414 23.5884 53.97 29.9536 53.97C36.3188 53.97 42.4233 51.4414 46.9242 46.9405C51.425 42.4397 53.9536 36.3352 53.9536 29.97C53.9536 23.6048 51.425 17.5003 46.9242 12.9994C42.4233 8.49853 36.3188 5.96997 29.9536 5.96997Z" fill="#71777D"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M29.9536 10.47C27.3928 10.47 24.8571 10.9744 22.4913 11.9543C20.1254 12.9343 17.9758 14.3706 16.165 16.1814C14.3543 17.9921 12.9179 20.1418 11.938 22.5076C10.958 24.8735 10.4536 27.4092 10.4536 29.97C10.4536 32.5307 10.958 35.0665 11.938 37.4323C12.9179 39.7981 14.3543 41.9478 16.165 43.7586C17.9758 45.5693 20.1254 47.0057 22.4913 47.9856C24.8571 48.9656 27.3928 49.47 29.9536 49.47C32.5144 49.47 35.0501 48.9656 37.4159 47.9856C39.7818 47.0057 41.9315 45.5693 43.7422 43.7586C45.5529 41.9478 46.9893 39.7981 47.9693 37.4323C48.9492 35.0665 49.4536 32.5307 49.4536 29.97C49.4536 27.4092 48.9492 24.8735 47.9693 22.5076C46.9893 20.1418 45.5529 17.9921 43.7422 16.1814C41.9315 14.3706 39.7818 12.9343 37.4159 11.9543C35.0501 10.9744 32.5144 10.47 29.9536 10.47Z" fill="#0282F0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40.1461 37.929C37.6501 34.848 33.9766 33 30.0106 33C26.0446 33 22.3726 34.848 19.8751 37.929C19.2841 38.5485 19.4326 39.627 20.0191 40.089C20.6101 40.704 21.6361 40.5465 22.0786 39.933C24.1321 37.464 26.8906 36.018 29.9791 36.018C33.0676 36.018 35.8861 37.464 37.9411 39.933C38.2396 40.239 39.1396 40.848 40.0021 40.239C40.6951 39.753 40.5886 38.55 40.1461 37.929Z" fill="#F5F5F5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.75 22.5C21.1533 22.5 20.581 22.7371 20.159 23.159C19.7371 23.581 19.5 24.1533 19.5 24.75C19.5 25.3467 19.7371 25.919 20.159 26.341C20.581 26.7629 21.1533 27 21.75 27C22.3467 27 22.919 26.7629 23.341 26.341C23.7629 25.919 24 25.3467 24 24.75C24 24.1533 23.7629 23.581 23.341 23.159C22.919 22.7371 22.3467 22.5 21.75 22.5ZM38.25 22.5C37.6533 22.5 37.081 22.7371 36.659 23.159C36.2371 23.581 36 24.1533 36 24.75C36 25.3467 36.2371 25.919 36.659 26.341C37.081 26.7629 37.6533 27 38.25 27C38.8467 27 39.419 26.7629 39.841 26.341C40.2629 25.919 40.5 25.3467 40.5 24.75C40.5 24.1533 40.2629 23.581 39.841 23.159C39.419 22.7371 38.8467 22.5 38.25 22.5Z" fill="#F5F5F5"/>
-</svg>

package/build/widgets/oa-widget-map-base-location/AddressDetails.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.string.includes.js");
-var _react = _interopRequireDefault(require("react"));
-var _EditOutlined = _interopRequireDefault(require("@material-ui/icons/EditOutlined"));
-var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
-var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
-var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
-var _AddressForm = _interopRequireDefault(require("./AddressForm"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable */
-
-// Address Details Component
-function AddressDetails(_ref) {
-  var _geolocationData$addr, _geolocationData$addr2, _geolocationData$addr3, _geolocationData$addr4;
-  let {
-    geolocationData,
-    pinCodeServisible,
-    editLocationHandler,
-    onFinish
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "addresBoxDiv"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "addressEdit"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "addressDetails"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "type-t1-400",
-    color: "primary-content"
-  }, (_geolocationData$addr = geolocationData.addressLine2) === null || _geolocationData$addr === void 0 ? void 0 : _geolocationData$addr.mainAddress), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-4"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "type-b3-400",
-    color: "secondary-content"
-  }, (_geolocationData$addr2 = geolocationData.addressLine2) === null || _geolocationData$addr2 === void 0 ? void 0 : _geolocationData$addr2.secondaryAddress, (_geolocationData$addr3 = geolocationData.addressLine2) !== null && _geolocationData$addr3 !== void 0 && (_geolocationData$addr3 = _geolocationData$addr3.mainAddress) !== null && _geolocationData$addr3 !== void 0 && _geolocationData$addr3.includes(geolocationData.pincode) || (_geolocationData$addr4 = geolocationData.addressLine2) !== null && _geolocationData$addr4 !== void 0 && (_geolocationData$addr4 = _geolocationData$addr4.secondaryAddress) !== null && _geolocationData$addr4 !== void 0 && _geolocationData$addr4.includes(geolocationData.pincode) ? '' : ", ".concat(geolocationData.pincode)))), pinCodeServisible && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-    iconConfig: {
-      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-        icon: _EditOutlined.default
-      }),
-      position: 'left'
-    },
-    size: "small",
-    label: "Edit location",
-    type: "text-only",
-    onClick: editLocationHandler
-  })), pinCodeServisible ? /*#__PURE__*/_react.default.createElement(_AddressForm.default, {
-    geolocationData: geolocationData,
-    onFinish: onFinish
-  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "negative"
-  }, "Pincode according to your pin on map is Non-serviceable, please move the pin to serviceable pincode."));
-}
-var _default = exports.default = AddressDetails;

package/build/widgets/oa-widget-map-base-location/AddressForm.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("core-js/modules/web.dom-collections.iterator.js");
-var _react = _interopRequireDefault(require("react"));
-var _antd = require("antd");
-var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
-var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
-var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable */
-
-// Address Form Component
-function AddressForm(props) {
-  const [form] = _antd.Form.useForm();
-  const {
-    geolocationData,
-    onFinish
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
-    form: form,
-    initialValues: {
-      houseNo: (geolocationData === null || geolocationData === void 0 ? void 0 : geolocationData.addressLine1) || undefined,
-      landmark: (geolocationData === null || geolocationData === void 0 ? void 0 : geolocationData.landmark) || undefined
-    },
-    name: "getCompleteAddress",
-    onFinish: onFinish
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-12"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
-    className: "type-b2-400"
-  }, "House no./Flat/Floor", /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "negative"
-  }, "*")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-4"
-  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "houseNo",
-    rules: [{
-      required: true,
-      message: 'Please input your House no. / Flat / Floor!'
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
-    placeholder: "Type here",
-    autoFocus: true
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-12"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
-    className: "type-b2-400"
-  }, "Nearby Landmark"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-4"
-  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "landmark"
-  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
-    placeholder: "Type here"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "buttonBottom margin-top-24"
-  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-    type: "primary",
-    size: "large",
-    label: "Save and Proceed",
-    htmlType: "submit"
-  }))));
-}
-var _default = exports.default = AddressForm;

package/build/widgets/oa-widget-map-base-location/CustomModalComponent.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _LocationOff = _interopRequireDefault(require("@material-ui/icons/LocationOff"));
-var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
-var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
-var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable */
-
-// Custom Modal Component
-function CustomModalComponent(_ref) {
-  let {
-    open,
-    setOpenLocationNotDetectedModal
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
-    className: "noLoacationMadalCustom",
-    open: open,
-    buttonConfig: [{
-      callback: () => setOpenLocationNotDetectedModal(false),
-      label: 'Okay, Got it',
-      width: '100%'
-    }],
-    onCancel: () => setOpenLocationNotDetectedModal(false),
-    width: "388px"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "noLocationSection"
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    color: "primary",
-    size: 72,
-    icon: _LocationOff.default
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-12"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
-    className: "type-t1-500"
-  }, "Location not detected")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-12"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "secondary-content",
-    className: "type-b1-400"
-  }, "We are having trouble finding your location. Please allow location access from your browser settings."))));
-}
-var _default = exports.default = CustomModalComponent;

package/build/widgets/oa-widget-map-base-location/MapBaseLocation.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AddressDetails = _interopRequireDefault(require("./AddressDetails"));
-var _MapComponent = _interopRequireDefault(require("./MapComponent"));
-var _CustomModalComponent = _interopRequireDefault(require("./CustomModalComponent"));
-var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
-var _styles = require("./styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable */
-
-function MapBaseLocation(_ref) {
-  let {
-    googleMapURL,
-    googleMapRef,
-    geolocationData,
-    fetchAddressFromGoogleApi,
-    setOpenLocationNotDetectedModal,
-    pinCodeServisible,
-    editLocationHandler,
-    form,
-    onFinish,
-    openLocationNotDetectedModal,
-    setOpenLocationNotDetectedModalState
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.MapStyles, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "containerMap"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "locationSecBox"
-  }, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
-    spinning: false
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "addressDetaisBox"
-  }, /*#__PURE__*/_react.default.createElement(_MapComponent.default, {
-    googleMapURL: googleMapURL,
-    loadingElement: /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        height: '100%'
-      }
-    }),
-    containerElement: /*#__PURE__*/_react.default.createElement("div", {
-      className: "mapHeight"
-    }),
-    mapElement: /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        height: '100%'
-      }
-    }),
-    googleMapRef: googleMapRef,
-    geolocationData: geolocationData,
-    fetchAddressFromGoogleApi: fetchAddressFromGoogleApi,
-    setOpenLocationNotDetectedModal: setOpenLocationNotDetectedModal
-  }), /*#__PURE__*/_react.default.createElement(_AddressDetails.default, {
-    geolocationData: geolocationData,
-    pinCodeServisible: pinCodeServisible,
-    editLocationHandler: editLocationHandler,
-    form: form,
-    onFinish: onFinish
-  }), /*#__PURE__*/_react.default.createElement(_CustomModalComponent.default, {
-    open: openLocationNotDetectedModal,
-    setOpenLocationNotDetectedModal: setOpenLocationNotDetectedModalState
-  }))))));
-}
-var _default = exports.default = MapBaseLocation;

package/build/widgets/oa-widget-map-base-location/MapComponent.js

@@ -1,123 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.weak-map.js");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("core-js/modules/web.dom-collections.iterator.js");
-require("core-js/modules/es.promise.js");
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.string.includes.js");
-var _react = _interopRequireWildcard(require("react"));
-var _reactGoogleMaps = require("react-google-maps");
-var _map_pointer = _interopRequireDefault(require("../../images/map_pointer.svg"));
-var _currentLocation = _interopRequireDefault(require("../../images/current-location.svg"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* eslint-disable */
-
-const MapComponent = (0, _reactGoogleMaps.withScriptjs)((0, _reactGoogleMaps.withGoogleMap)(props => {
-  const [center, setCenter] = (0, _react.useState)({
-    lat: props.geolocationData.latitude,
-    lng: props.geolocationData.longitude
-  });
-  const [markerPosition, setMarkerPosition] = (0, _react.useState)({
-    lat: props.geolocationData.latitude,
-    lng: props.geolocationData.longitude
-  });
-  const [mapref, setMapRef] = _react.default.useState(null);
-  const handleOnLoad = map => {
-    setMapRef(map);
-  };
-  const handleCenterChanged = () => {
-    if (mapref) {
-      const newCenter = mapref.getCenter();
-    }
-  };
-  const handleMapDrag = () => {
-    if (props.googleMapRef && props.googleMapRef.current) {
-      const mapCenter = props.googleMapRef.current.getCenter();
-      const lat = mapCenter.lat();
-      const lng = mapCenter.lng();
-      setMarkerPosition({
-        lat,
-        lng
-      });
-    }
-  };
-  const handleMapDragEnd = () => {
-    setCenter(markerPosition);
-    props.fetchAddressFromGoogleApi(markerPosition.lat, markerPosition.lng);
-  };
-  const handleCurrentLocationIconClick = async () => {
-    var _navigator;
-    props.setOpenLocationNotDetectedModal(false);
-    if ((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.geolocation) {
-      var _navigator2;
-      (_navigator2 = navigator) === null || _navigator2 === void 0 || (_navigator2 = _navigator2.geolocation) === null || _navigator2 === void 0 || _navigator2.getCurrentPosition(position => {
-        var _position$coords, _position$coords2;
-        if (position !== null && position !== void 0 && (_position$coords = position.coords) !== null && _position$coords !== void 0 && _position$coords.latitude && position !== null && position !== void 0 && (_position$coords2 = position.coords) !== null && _position$coords2 !== void 0 && _position$coords2.longitude) {
-          const {
-            latitude
-          } = position.coords;
-          const {
-            longitude
-          } = position.coords;
-          setCenter({
-            lat: latitude,
-            lng: longitude
-          });
-          setMarkerPosition({
-            lat: latitude,
-            lng: longitude
-          });
-          props.fetchAddressFromGoogleApi(latitude, longitude);
-        } else {
-          props.setOpenLocationNotDetectedModal(true);
-        }
-      }, error => {
-        props.setOpenLocationNotDetectedModal(true);
-      });
-    } else {
-      props.setOpenLocationNotDetectedModal(true);
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.GoogleMap, {
-    ref: props.googleMapRef,
-    defaultZoom: 16,
-    defaultCenter: {
-      lat: props.geolocationData.latitude,
-      lng: props.geolocationData.longitude
-    },
-    center: center,
-    onDrag: handleMapDrag,
-    onLoad: handleOnLoad,
-    onCenterChanged: handleCenterChanged,
-    onDragEnd: handleMapDragEnd,
-    defaultOptions: {
-      disableDefaultUI: true,
-      mapTypeControl: false,
-      scaleControl: true,
-      zoomControl: true,
-      zoomControlOptions: {
-        style: google.maps.ZoomControlStyle.LARGE
-      },
-      mapTypeId: google.maps.MapTypeId.ROADMAP,
-      draggable: window.location.origin.includes('oneassist') // Disable dragging in non-prod environment
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Marker, {
-    position: markerPosition,
-    draggable: false,
-    icon: _map_pointer.default,
-    title: "You are here"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "map-current-location"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _currentLocation.default,
-    alt: "current location",
-    onClick: handleCurrentLocationIconClick
-  })));
-}));
-var _default = exports.default = MapComponent;

package/build/widgets/oa-widget-map-base-location/styles.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MapStyles = 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) } })); }
-var _default = exports.default = {};
-const MapStyles = exports.MapStyles = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\");\n\n.ant-input-outlined {\n  background: #ffffff;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #959595;\n  padding: 13px 16px;\n  border-radius: 4px;\n}\n.ant-input-outlined:focus,\n:where(.css-dev-only-do-not-override-vqv1ns).ant-input-outlined:focus-within {\n  border-color: #014fc5;\n  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  outline: 0;\n  background-color: #ffffff;\n}\n\n.map-current-location {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  width: 40px;\n  height: 40px;\n  top: 85px !important;\n  right: 10px !important;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n  border-radius: 2px;\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n}\n.map-current-location:hover {\n  color: black;\n}\n.mapHeight {\n  height: 570px;\n  min-width: 360px;\n  border-radius: 12px;\n  position: relative;\n  overflow: hidden;\n}\n\n.addresBoxDiv {\n  display: flex;\n  flex-direction: column;\n  padding: 34px 24px;\n  width: calc(100% - 360px);\n  position: relative;\n}\n\n.addressEdit {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-direction: row;\n}\n.addressDetails {\n  max-width: 216px;\n  display: flex;\n  flex-direction: column;\n}\n\n.buttonBottom {\n  width: 100%;\n  position: absolute;\n  bottom: 24px;\n  right: 0;\n  left: 0;\n  padding: 0 24px;\n}\n\n.buttonBottom button {\n  width: 100%;\n}\n\n.spacing-32 h3 {\n  text-align: center;\n}\n.padding-top-32 button {\n  width: 100%;\n}\n.borderArea {\n  border: 1px solid var(--color-divider);\n}\n.locWithForm button {\n  width: 100%;\n}\n.locWithForm section {\n  padding: 0 0 32px;\n}\n.locWithForm section > div .MuiSvgIcon-root {\n  font-size: 24px !important;\n}\n.ant-form-item .ant-form-item-explain-error,\n.errorMsg {\n  color: var(--color-negative);\n  font-size: 12px;\n}\n.marZero .ant-form-item {\n  margin-bottom: 0;\n}\n.datepicker-modal button {\n  width: 100%;\n}\n.mapHeight + section {\n  justify-content: space-between;\n  overflow: hidden;\n}\n.loadingGif {\n  text-align: center;\n  padding: 12px 0 0;\n}\n.borderArea {\n  border: 1px solid var(--color-divider);\n}\n.mobileHeader {\n  display: none;\n}\n.addLocation li > p {\n  padding: 16px 0 0px;\n  margin: 0 0 32px !important;\n}\n.addLocation {\n  position: relative;\n}\n.flexDisplay {\n  display: flex;\n  gap: 8px;\n}\n.rowGap {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: baseline;\n  cursor: pointer;\n}\n.rowGap + button {\n  cursor: pointer;\n}\n.selectLocation button {\n  margin: 24px 0 0;\n}\n.parentDisplay {\n  padding: 16px;\n  border-bottom: 1px solid var(--color-divider);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n}\n\n.searchLocationForm section {\n  position: relative;\n}\n.searchLocationForm .ant-input-affix-wrapper {\n  height: 48px;\n}\n.searchLocationForm .anticon-close-circle svg {\n  font-size: 20px;\n}\n.searchLocationForm section img {\n  position: absolute;\n  right: 6px;\n  top: 14px;\n  z-index: 9;\n  cursor: pointer;\n  width: 22px;\n}\n.serviceLocationContainer ul li {\n  display: flex;\n  gap: 8px;\n  align-items: start;\n}\n.serviceLocationContainer ul li img {\n  position: relative;\n  top: 2px;\n}\n.searchLocationForm section input {\n  padding: 13px 16px 13px 38px;\n}\n.searchLocationForm section img.crossIcon,\n.searchLocationForm section img.searchLoader {\n  right: 16px;\n}\n.searchLocationForm {\n  min-height: 260px;\n}\n\n.searchLocationForm img.searchIcon {\n  left: 14px;\n  top: 14px;\n}\n.serviceLocationContainer {\n  margin: 32px 0 0;\n  /* border: 1px solid var(--color-divider); */\n  border-radius: 12px;\n  max-height: 300px;\n  overflow: auto;\n}\n.serviceLocationContainer ul {\n  padding: 16px;\n  border-bottom: 1px solid var(--color-divider);\n}\n.serviceLocationContainer ul:last-child {\n  border: none;\n}\n.currentLocationLink {\n  display: flex;\n  gap: 4px;\n}\n.noResultFound {\n  padding: 58px 32px;\n  border: 1px solid var(--color-divider);\n  border-radius: 12px;\n  text-align: center;\n  margin: 32px 0 0;\n}\n.noResultFound img {\n  width: 48px;\n}\n.serviceLocationContainer ul li {\n  padding: 0;\n}\n\n.addLocation aside {\n  border-radius: 12px;\n}\n.addLocation aside svg {\n  padding: 0 0 16px;\n}\n.crossIcon {\n  font-size: 24px;\n  position: absolute;\n  z-index: 1;\n  top: 13px;\n  right: 16px;\n  color: var(--color-secondary-content);\n}\n.crossIcon:hover {\n  color: var(--color-primary-content);\n}\n\n.mapComponent .locationSecBox {\n  display: flex;\n  max-width: 748px;\n  margin: 24px auto;\n\n  flex-direction: column;\n  border-radius: 12px;\n  border: none;\n}\n.mapComponent .listoflocation ul{\n  width: calc(100% + 48px);\n    margin: 16px 0 0 -24px !important;\n}\n.mapComponent .listoflocation{\n  margin: 24px 0 0 0;\n}\n.smallModalWidth{\n  width: 480px !important;\n}\n.fullModalWidth{\n  width: 800px !important;\n}\n.fullModalWidth .ant-modal-content{\n  padding: 0;\n}\n.fullModalWidth .mapHeight{\n  width: 440px;\n}\n.fullModalWidth .addresBoxDiv{\n  width: calc(100% - 440px);\n  padding: 64px 24px 32px;\n}\n.fullModalWidth .buttonBottom{\n  bottom: 32px;\n}\n.fullModalWidth .ant-modal-body > div{\n  padding: 0;\n}\n.mapComponent .locationInner {\n  padding: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.addressDetaisBox {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.locationlabel {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n.listoflocation {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin: 48px 0 0 0;\n}\n.listoflocation ul {\n  display: flex;\n  padding: 0;\n  flex-direction: column;\n  width: 100%;\n  border-top: solid 4px var(--color-divider);\n  margin: 16px 0 0 0 !important;\n}\n.listoflocation ul li {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  padding: 16px;\n  border-bottom: solid 1px var(--color-divider);\n  align-items: flex-start;\n  cursor: pointer;\n}\n.listoflocation ul li:last-child {\n  border-bottom: none;\n  padding-bottom: 0;\n}\n.listoflocation ul li .addressDetails {\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  margin: 0 0 0 12px;\n  max-width: none;\n}\n\n.minHeightAuto {\n  min-height: auto !important;\n}\n\n.oa-pincodeLocation .topHeader {\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  left: 0;\n  height: 56px;\n  width: 100%;\n  z-index: 9;\n  background: var(--color-primary-background);\n}\n.oa-pincodeLocation .topHeader .container {\n  width: 100%;\n}\n\n.oa-pincodeLocation .topHeader img {\n  width: 122px;\n}\n\n@media screen and (max-width: 600px) {\n  .slotContainer {\n    padding: 48px 16px 24px 16px !important;\n  }\n\n  .listoflocation ul li:last-child {\n    padding-bottom: 12px;\n  }\n\n  .oa-pincodeLocation .topHeader {\n    position: fixed;\n    top: 0;\n  }\n  .mobileMarginTop {\n    margin: 80px 0 0 !important;\n  }\n\n  .containerMap {\n    margin: 0 auto;\n    height: 100vh;\n    padding: 56px 16px 0 16px;\n  }\n  .locationSecBox {\n    margin: 0 auto;\n    border: none;\n    overflow: inherit;\n  }\n  .locationInner {\n    padding: 80px 16px 0 16px;\n  }\n  .addressDetaisBox {\n    flex-direction: column;\n  }\n  .mapHeight {\n    height: calc(100vh - 436px);\n    width: calc(100% + 32px);\n    border-radius: 0;\n    position: relative;\n    overflow: hidden;\n    margin: -24px 0 0 -16px;\n  }\n  .fullModalWidth .addresBoxDiv{\n    width: 100%;\n    padding: 0px 16px 32px;\n    margin: 0;\n  }\n  .fullModalWidth .buttonBottom{\n    position: static;\n  }\n  .fullModalWidth .addressDetaisBox{\n    gap: 32px;\n  }\n  .fullModalWidth .mapHeight {\n    width: 100%;\n    margin: 0 !important;\n    height: calc(100vh - 392px) !important;\n}\n.fullModalWidth .ant-modal-content{\n  padding: 0;\n  bottom: 0;\n  top: 0;\n}\n.fullModalWidth .ant-modal-body{\n  max-height: fit-content;\n  padding-right: 0;\n}\n.fullModalWidth .containerMap{\n  padding: 0;\n}\n.fullModalWidth{\n  margin: 0 !important;\n}\n  .addresBoxDiv {\n    flex-direction: column;\n    padding: 33px 16px;\n    width: calc(100% + 32px);\n    background: #fff;\n    margin: 0 0 0 -16px;\n    border-radius: 12px 12px 0 0;\n  }\n\n  .buttonBottom {\n    position: relative;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    padding: 0;\n  }\n\n  .searchLocationForm {\n    min-height: 200px;\n  }\n  .searchLocationContainer .padding-bottom-24 {\n    padding-top: 12px;\n  }\n  .spacing-32 h3,\n  .locationHead,\n  .mobileViewNone {\n    display: none;\n  }\n  .paddingZero {\n    padding: 0;\n    border: none;\n  }\n  /* .mapMobileRadious{\n        width: calc(100% + 32px);\n        position: relative;\n        margin: 0 -16px 0 0;\n        border-radius: 0;\n        border: none;\n    } */\n  .mapHeightMobile .mapHeight {\n    height: calc(96vh - 56px - 80px - 36px - 80px - 24px);\n    padding: 0;\n  }\n  .mapHeightMobile {\n    height: 88vh;\n    overflow: hidden;\n  }\n\n  .mobileHeader {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .noResultFound {\n    padding: 16px;\n    margin: 24px 0 0;\n  }\n  .mobileHeader svg {\n    cursor: pointer;\n  }\n  .serviceLocationContainer {\n    max-height: fit-content;\n    overflow-x: inherit;\n  }\n}\n@media screen and (max-width: 1024px) {\n  .addLocation aside {\n    border: none;\n    padding: 0;\n  }\n  .locFormContainer {\n    padding: 0;\n    border: none;\n  }\n  /* .mapMobileRadious{\n        border-radius: 0;\n    } */\n}\n\n.locFormContainer input[type=\"text\"]:not(.browser-default),\ninput[type=\"date\"]:not(.browser-default) {\n  float: none;\n  width: 100% !important;\n  /* padding: 14px; */\n}\n\n.getCompleteAddress input[type=\"text\"]:not(.browser-default),\ninput[type=\"date\"]:not(.browser-default) {\n  float: none;\n  width: 100% !important;\n  /* padding: 14px; */\n}\n\n"])));

package/build/widgets/oa-widget-pincode-base-location/PincodeBaseLocation.js

@@ -1,257 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("core-js/modules/es.regexp.to-string.js");
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _GpsFixedRounded = _interopRequireDefault(require("@material-ui/icons/GpsFixedRounded"));
-var _LocationOff = _interopRequireDefault(require("@material-ui/icons/LocationOff"));
-var _PlaceOutlined = _interopRequireDefault(require("@material-ui/icons/PlaceOutlined"));
-var _icons = require("@ant-design/icons");
-var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
-var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
-var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
-var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
-var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
-var _oneassistLogo = _interopRequireDefault(require("../../images/oneassist-logo.png"));
-var _ajaxLoader = _interopRequireDefault(require("../../images/ajax-loader.gif"));
-var _search_ic = _interopRequireDefault(require("../../images/search_ic.svg"));
-var _search_not_found = _interopRequireDefault(require("../../images/search_not_found.svg"));
-var _styles = require("./styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable */
-
-function PincodeBaseLocation(_ref) {
-  var _pincode$toString;
-  let {
-    title,
-    locationLabel,
-    location,
-    pincode,
-    error,
-    loader,
-    placeSearchInput,
-    miniLoader,
-    suggestedLocations,
-    suggestedLocationsType,
-    noResultFlag,
-    openLocationNotDetectedModal,
-    handlePincodeChange,
-    handleSearchLocation,
-    handleClickSuggestedLocation,
-    emptySearchInput,
-    getCurrentLocation,
-    setOpenLocationNotDetectedModal,
-    showHeader
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.PincodeStyles, null, showHeader && /*#__PURE__*/_react.default.createElement("div", {
-    className: "oa-pincodeLocation"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "topHeader"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _oneassistLogo.default,
-    alt: "Logo"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "mapComponent"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "locationSecBox"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "locationInner"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "type-t1-500",
-    color: "primary-content"
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "locFormContainer"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-24 margin-bottom-4 locationlabel"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
-    className: "type-b2-400"
-  }, locationLabel), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "placeholder-text",
-    className: "type-b2-400"
-  }, location)), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
-    value: pincode,
-    placeholder: "Enter Pincode",
-    "data-test": "inputBeginPincode",
-    autoComplete: "off",
-    type: "text",
-    maxLength: "6",
-    autoFocus: true,
-    onChange: e => handlePincodeChange(e.target.value)
-  }), error && /*#__PURE__*/_react.default.createElement("div", {
-    className: "errorMsg jsError jsServerError"
-  }, error), loader && /*#__PURE__*/_react.default.createElement("div", {
-    className: "loadingGif"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pincodeChecker"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _ajaxLoader.default,
-    alt: "wait"
-  })), /*#__PURE__*/_react.default.createElement("p", {
-    className: "load-check type-b2-400"
-  }, "Checking service availability")), (pincode === null || pincode === void 0 || (_pincode$toString = pincode.toString()) === null || _pincode$toString === void 0 ? void 0 : _pincode$toString.length) === 6 && location !== 'Location' && /*#__PURE__*/_react.default.createElement("div", {
-    className: "searchLocationForm minHeightAuto"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-24 margin-bottom-4"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
-    className: "type-b2-400"
-  }, "Search Locality/Society/Area")), /*#__PURE__*/_react.default.createElement("section", null, !miniLoader && (placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field) && /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
-    onClick: emptySearchInput,
-    style: {
-      fontSize: '24px'
-    },
-    className: "crossIcon"
-  }), miniLoader && (placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field) && /*#__PURE__*/_react.default.createElement("img", {
-    src: _ajaxLoader.default,
-    className: "searchLoader",
-    alt: "Loader"
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    src: _search_ic.default,
-    className: "searchIcon",
-    alt: "Search Icon"
-  }), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
-    id: "searchLocationBar",
-    type: "text",
-    value: placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field,
-    autoComplete: "off",
-    placeholder: "Type here...",
-    autoFocus: true,
-    onChange: handleSearchLocation
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-4"
-  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-    iconConfig: {
-      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-        icon: _GpsFixedRounded.default
-      }),
-      position: 'left'
-    },
-    size: "medium",
-    label: "Use Your Current Location",
-    type: "text-only",
-    onClick: getCurrentLocation
-  }))), (suggestedLocations === null || suggestedLocations === void 0 ? void 0 : suggestedLocations.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "listoflocation"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "type-b1-400",
-    color: "primary-content"
-  }, suggestedLocationsType)), /*#__PURE__*/_react.default.createElement("ul", null, suggestedLocations === null || suggestedLocations === void 0 ? void 0 : suggestedLocations.map((item, index) => {
-    var _item$addressLine, _item$addressLine2;
-    return /*#__PURE__*/_react.default.createElement("li", {
-      key: index,
-      onClick: () => handleClickSuggestedLocation(item)
-    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-      color: "primary",
-      size: 24,
-      icon: _PlaceOutlined.default
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "addressDetails"
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      className: "type-t2-700",
-      color: "primary-content"
-    }, (_item$addressLine = item.addressLine2) === null || _item$addressLine === void 0 ? void 0 : _item$addressLine.mainAddress), /*#__PURE__*/_react.default.createElement("div", {
-      className: "margin-top-8"
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      className: "type-b3-400",
-      color: "secondary-content"
-    }, (_item$addressLine2 = item.addressLine2) === null || _item$addressLine2 === void 0 ? void 0 : _item$addressLine2.secondaryAddress))));
-  }))), noResultFlag && !(suggestedLocations !== null && suggestedLocations !== void 0 && suggestedLocations.length) && /*#__PURE__*/_react.default.createElement("div", {
-    className: "noResultFound",
-    style: {
-      minHeight: '0px'
-    }
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _search_not_found.default,
-    alt: "Search Not Found Icon"
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    className: "padding-bottom-16 padding-top-16"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
-    className: "type-t2-700"
-  }, "No results found for \u201C", placeSearchInput === null || placeSearchInput === void 0 ? void 0 : placeSearchInput.field, "\u201D")), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "secondary-content",
-    className: "type-b2-400"
-  }, "Check for spelling errors or search for a different keyword"))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
-    className: "noLoacationMadalCustom",
-    open: openLocationNotDetectedModal,
-    buttonConfig: [{
-      callback: () => setOpenLocationNotDetectedModal(false),
-      label: 'Okay, Got it',
-      width: '100%'
-    }],
-    onCancel: () => setOpenLocationNotDetectedModal(false),
-    width: "388px"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "noLocationSection"
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    color: "primary",
-    size: 72,
-    icon: _LocationOff.default
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-12"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
-    className: "type-t1-500"
-  }, "Location not detected")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "margin-top-12"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "secondary-content",
-    className: "type-b1-400"
-  }, "We are having trouble finding your location. Please allow location access from your browser settings."))))))));
-}
-
-// Default props
-PincodeBaseLocation.defaultProps = {
-  title: 'Where do you want to get service',
-  locationLabel: 'Pincode',
-  location: 'Location',
-  pincode: '',
-  error: '',
-  loader: false,
-  showHeader: true,
-  placeSearchInput: {
-    field: ''
-  },
-  miniLoader: false,
-  suggestedLocations: [],
-  suggestedLocationsType: '',
-  noResultFlag: false,
-  openLocationNotDetectedModal: false,
-  handlePincodeChange: () => console.log('Pincode changed'),
-  handleSearchLocation: () => console.log('Search location'),
-  handleClickSuggestedLocation: () => console.log('Location clicked'),
-  emptySearchInput: () => console.log('Search input cleared'),
-  getCurrentLocation: () => console.log('Getting current location'),
-  setOpenLocationNotDetectedModal: () => console.log('Modal state changed')
-};
-
-// Prop types
-PincodeBaseLocation.propTypes = {
-  title: _propTypes.default.string,
-  showHeader: _propTypes.default.bool,
-  locationLabel: _propTypes.default.string,
-  location: _propTypes.default.string,
-  pincode: _propTypes.default.string.isRequired,
-  error: _propTypes.default.string,
-  loader: _propTypes.default.bool,
-  placeSearchInput: _propTypes.default.object,
-  miniLoader: _propTypes.default.bool,
-  suggestedLocations: _propTypes.default.array,
-  suggestedLocationsType: _propTypes.default.string,
-  noResultFlag: _propTypes.default.bool,
-  openLocationNotDetectedModal: _propTypes.default.bool,
-  handlePincodeChange: _propTypes.default.func.isRequired,
-  handleSearchLocation: _propTypes.default.func.isRequired,
-  handleClickSuggestedLocation: _propTypes.default.func.isRequired,
-  emptySearchInput: _propTypes.default.func.isRequired,
-  getCurrentLocation: _propTypes.default.func.isRequired,
-  setOpenLocationNotDetectedModal: _propTypes.default.func.isRequired
-};
-var _default = exports.default = PincodeBaseLocation;

package/build/widgets/oa-widget-pincode-base-location/styles.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PincodeStyles = 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) } })); }
-var _default = exports.default = {};
-const PincodeStyles = exports.PincodeStyles = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.loadingGif p{\npadding: 8px 0 0;\n}\n\n.errorMsg{\npadding: 4px 0 0;}\n@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\");\n\n.ant-input-outlined {\n  background: #ffffff;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #959595;\n  padding: 13px 16px;\n  border-radius: 4px;\n}\n.ant-input-outlined:focus,\n:where(.css-dev-only-do-not-override-vqv1ns).ant-input-outlined:focus-within {\n  border-color: #014fc5;\n  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  outline: 0;\n  background-color: #ffffff;\n}\n\n.map-current-location {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  width: 40px;\n  height: 40px;\n  top: 85px !important;\n  right: 10px !important;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n  border-radius: 2px;\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n}\n.map-current-location:hover {\n  color: black;\n}\n.mapHeight {\n  height: 570px;\n  min-width: 360px;\n  border-radius: 12px;\n  position: relative;\n  overflow: hidden;\n}\n\n.addresBoxDiv {\n  display: flex;\n  flex-direction: column;\n  padding: 34px 24px;\n  width: calc(100% - 360px);\n  position: relative;\n}\n\n.addressEdit {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-direction: row;\n}\n.addressDetails {\n  max-width: 216px;\n  display: flex;\n  flex-direction: column;\n}\n\n.buttonBottom {\n  width: 100%;\n  position: absolute;\n  bottom: 24px;\n  right: 0;\n  left: 0;\n  padding: 0 24px;\n}\n\n.buttonBottom button {\n  width: 100%;\n}\n\n.spacing-32 h3 {\n  text-align: center;\n}\n.padding-top-32 button {\n  width: 100%;\n}\n.borderArea {\n  border: 1px solid var(--color-divider);\n}\n.locWithForm button {\n  width: 100%;\n}\n.locWithForm section {\n  padding: 0 0 32px;\n}\n.locWithForm section > div .MuiSvgIcon-root {\n  font-size: 24px !important;\n}\n.ant-form-item .ant-form-item-explain-error,\n.errorMsg {\n  color: var(--color-negative);\n  font-size: 12px;\n}\n.marZero .ant-form-item {\n  margin-bottom: 0;\n}\n.datepicker-modal button {\n  width: 100%;\n}\n.mapHeight + section {\n  justify-content: space-between;\n  overflow: hidden;\n}\n.loadingGif {\n  text-align: center;\n  padding: 12px 0 0;\n}\n.borderArea {\n  border: 1px solid var(--color-divider);\n}\n.mobileHeader {\n  display: none;\n}\n.addLocation li > p {\n  padding: 16px 0 0px;\n  margin: 0 0 32px !important;\n}\n.addLocation {\n  position: relative;\n}\n.flexDisplay {\n  display: flex;\n  gap: 8px;\n}\n.rowGap {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: baseline;\n  cursor: pointer;\n}\n.rowGap + button {\n  cursor: pointer;\n}\n.selectLocation button {\n  margin: 24px 0 0;\n}\n.parentDisplay {\n  padding: 16px;\n  border-bottom: 1px solid var(--color-divider);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n}\n\n.searchLocationForm section {\n  position: relative;\n}\n.searchLocationForm .ant-input-affix-wrapper {\n  height: 48px;\n}\n.searchLocationForm .anticon-close-circle svg {\n  font-size: 20px;\n}\n.searchLocationForm section img {\n  position: absolute;\n  right: 6px;\n  top: 14px;\n  z-index: 9;\n  cursor: pointer;\n  width: 22px;\n}\n.serviceLocationContainer ul li {\n  display: flex;\n  gap: 8px;\n  align-items: start;\n}\n.serviceLocationContainer ul li img {\n  position: relative;\n  top: 2px;\n}\n.searchLocationForm section input {\n  padding: 13px 16px 13px 38px;\n}\n.searchLocationForm section img.crossIcon,\n.searchLocationForm section img.searchLoader {\n  right: 16px;\n}\n.searchLocationForm {\n  min-height: 260px;\n}\n\n.searchLocationForm img.searchIcon {\n  left: 14px;\n  top: 14px;\n}\n.serviceLocationContainer {\n  margin: 32px 0 0;\n  /* border: 1px solid var(--color-divider); */\n  border-radius: 12px;\n  max-height: 300px;\n  overflow: auto;\n}\n.serviceLocationContainer ul {\n  padding: 16px;\n  border-bottom: 1px solid var(--color-divider);\n}\n.serviceLocationContainer ul:last-child {\n  border: none;\n}\n.currentLocationLink {\n  display: flex;\n  gap: 4px;\n}\n.noResultFound {\n  padding: 58px 32px;\n  border: 1px solid var(--color-divider);\n  border-radius: 12px;\n  text-align: center;\n  margin: 32px 0 0;\n}\n.noResultFound img {\n  width: 48px;\n}\n.serviceLocationContainer ul li {\n  padding: 0;\n}\n\n.addLocation aside {\n  border-radius: 12px;\n}\n.addLocation aside svg {\n  padding: 0 0 16px;\n}\n.crossIcon {\n  font-size: 24px;\n  position: absolute;\n  z-index: 1;\n  top: 13px;\n  right: 16px;\n  color: var(--color-secondary-content);\n}\n.crossIcon:hover {\n  color: var(--color-primary-content);\n}\n\n.mapComponent .locationSecBox {\n  display: flex;\n  max-width: 748px;\n  margin: 24px auto;\n\n  flex-direction: column;\n  border-radius: 12px;\n  border: none;\n}\n.mapComponent .listoflocation ul{\n  width: calc(100% + 48px);\n    margin: 16px 0 0 -24px !important;\n}\n.mapComponent .listoflocation{\n  margin: 24px 0 0 0;\n}\n.smallModalWidth{\n  width: 480px !important;\n}\n.fullModalWidth{\n  width: 800px !important;\n}\n.fullModalWidth .ant-modal-content{\n  padding: 0;\n}\n.fullModalWidth .mapHeight{\n  width: 440px;\n}\n.fullModalWidth .addresBoxDiv{\n  width: calc(100% - 440px);\n  padding: 64px 24px 32px;\n}\n.fullModalWidth .buttonBottom{\n  bottom: 32px;\n}\n.fullModalWidth .ant-modal-body > div{\n  padding: 0;\n}\n.mapComponent .locationInner {\n  padding: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.addressDetaisBox {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.locationlabel {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n.listoflocation {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin: 48px 0 0 0;\n}\n.listoflocation ul {\n  display: flex;\n  padding: 0;\n  flex-direction: column;\n  width: 100%;\n  border-top: solid 4px var(--color-divider);\n  margin: 16px 0 0 0 !important;\n}\n.listoflocation ul li {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  padding: 16px;\n  border-bottom: solid 1px var(--color-divider);\n  align-items: flex-start;\n  cursor: pointer;\n}\n.listoflocation ul li:last-child {\n  border-bottom: none;\n  padding-bottom: 0;\n}\n.listoflocation ul li .addressDetails {\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  margin: 0 0 0 12px;\n  max-width: none;\n}\n\n.minHeightAuto {\n  min-height: auto !important;\n}\n\n.oa-pincodeLocation .topHeader {\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  left: 0;\n  height: 56px;\n  width: 100%;\n  z-index: 9;\n  background: var(--color-primary-background);\n}\n.oa-pincodeLocation .topHeader .container {\n  width: 100%;\n}\n\n.oa-pincodeLocation .topHeader img {\n  width: 122px;\n}\n\n@media screen and (max-width: 600px) {\n  .slotContainer {\n    padding: 48px 16px 24px 16px !important;\n  }\n\n  .listoflocation ul li:last-child {\n    padding-bottom: 12px;\n  }\n\n  .oa-pincodeLocation .topHeader {\n    position: fixed;\n    top: 0;\n  }\n  .mobileMarginTop {\n    margin: 80px 0 0 !important;\n  }\n\n  .containerMap {\n    margin: 0 auto;\n    height: 100vh;\n    padding: 56px 16px 0 16px;\n  }\n  .locationSecBox {\n    margin: 0 auto;\n    border: none;\n    overflow: inherit;\n  }\n  .locationInner {\n    padding: 80px 16px 0 16px;\n  }\n  .addressDetaisBox {\n    flex-direction: column;\n  }\n  .mapHeight {\n    height: calc(100vh - 436px);\n    width: calc(100% + 32px);\n    border-radius: 0;\n    position: relative;\n    overflow: hidden;\n    margin: -24px 0 0 -16px;\n  }\n  .fullModalWidth .addresBoxDiv{\n    width: 100%;\n    padding: 0px 16px 32px;\n    margin: 0;\n  }\n  .fullModalWidth .buttonBottom{\n    position: static;\n  }\n  .fullModalWidth .addressDetaisBox{\n    gap: 32px;\n  }\n  .fullModalWidth .mapHeight {\n    width: 100%;\n    margin: 0 !important;\n    height: calc(100vh - 392px) !important;\n}\n.fullModalWidth .ant-modal-content{\n  padding: 0;\n  bottom: 0;\n  top: 0;\n}\n.fullModalWidth .ant-modal-body{\n  max-height: fit-content;\n  padding-right: 0;\n}\n.fullModalWidth .containerMap{\n  padding: 0;\n}\n.fullModalWidth{\n  margin: 0 !important;\n}\n  .addresBoxDiv {\n    flex-direction: column;\n    padding: 33px 16px;\n    width: calc(100% + 32px);\n    background: #fff;\n    margin: 0 0 0 -16px;\n    border-radius: 12px 12px 0 0;\n  }\n\n  .buttonBottom {\n    position: relative;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    padding: 0;\n  }\n\n  .searchLocationForm {\n    min-height: 200px;\n  }\n  .searchLocationContainer .padding-bottom-24 {\n    padding-top: 12px;\n  }\n  .spacing-32 h3,\n  .locationHead,\n  .mobileViewNone {\n    display: none;\n  }\n  .paddingZero {\n    padding: 0;\n    border: none;\n  }\n  /* .mapMobileRadious{\n        width: calc(100% + 32px);\n        position: relative;\n        margin: 0 -16px 0 0;\n        border-radius: 0;\n        border: none;\n    } */\n  .mapHeightMobile .mapHeight {\n    height: calc(96vh - 56px - 80px - 36px - 80px - 24px);\n    padding: 0;\n  }\n  .mapHeightMobile {\n    height: 88vh;\n    overflow: hidden;\n  }\n\n  .mobileHeader {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .noResultFound {\n    padding: 16px;\n    margin: 24px 0 0;\n  }\n  .mobileHeader svg {\n    cursor: pointer;\n  }\n  .serviceLocationContainer {\n    max-height: fit-content;\n    overflow-x: inherit;\n  }\n}\n@media screen and (max-width: 1024px) {\n  .addLocation aside {\n    border: none;\n    padding: 0;\n  }\n  .locFormContainer {\n    padding: 0;\n    border: none;\n  }\n  /* .mapMobileRadious{\n        border-radius: 0;\n    } */\n}\n\n.locFormContainer input[type=\"text\"]:not(.browser-default),\ninput[type=\"date\"]:not(.browser-default) {\n  float: none;\n  width: 100% !important;\n  /* padding: 14px; */\n}\n\n.getCompleteAddress input[type=\"text\"]:not(.browser-default),\ninput[type=\"date\"]:not(.browser-default) {\n  float: none;\n  width: 100% !important;\n  /* padding: 14px; */\n}\n\n"])));

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

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ImgPreviewStyles = 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) } })); }
-var _default = exports.default = {};
-const ImgPreviewStyles = exports.ImgPreviewStyles = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.mainStylePreview .selected {\n    width: 302px;\n    margin: 0 auto;\n    height: 56vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.singleVideoselected{\n    max-width: 360px;\n  width: 100%;\n  margin: 0 auto;\n  height: calc(100vh - 101px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.imgContainer {\n  display: flex;\n  overflow-x: auto;\n  background-color: #fafafa;\n  box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 12%);\n  padding: 16px;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n}\n.imgArea {\n  margin-right: 20px;\n  list-style: none;\n  width: 116px;\n}\n.imgArea img,\n.imgArea video {\n  width: 116px !important;\n  height: 116px;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.imgArea video {\n  border: 1px solid var(--color-divider);\n}\n.imgArea span {\n  display: block;\n  text-align: center;\n  margin: 4px 0 0;\n  color: var(--color-primary-content);\n}\n.mainStylePreview .selected img {\n  width: 100%;\n}\n.mainStylePreview .selected img.zoomIn,\n.mismatchDrawer .ovrScroll .deicePic .zoomIn {\n  width: auto;\n  position: absolute;\n  cursor: pointer;\n  opacity: 0.8;\n}\n.left-icon {\n  position: absolute;\n  top: 35%;\n  font-size: 30px;\n  cursor: pointer;\n  left: 40px;\n}\n.right-icon {\n  position: absolute;\n  top: 35%;\n  right: 40px;\n  font-size: 30px;\n  cursor: pointer;\n}\n.zoomModal .ant-modal-body {\n  height: 420px;\n  overflow-x: auto;\n  margin: 16px 0 0;\n}\n.zoomModal .closedIcon {\n  display: none;\n}\n.modalImg {\n  width: 100%;\n}\n  .imgContainerHeight{\n  height: 260px;\n      display: flex;\n  }\n.imgContainer .selected-thumbnail {\n  border: 2px solid var(--color-primary);\n}\n.imgContainer .selected-thumb {\n  color: var(--color-primary);\n}\n.imgContainer span {\n  width: 116px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.mainStylePreview .selected video {\n    height: 260px;\n    width: 100%;\n  }\n  .singleVideoselected img:first-child{\n    width: 100%;\n    margin: 0 auto;\n    display: block;\n  }\n  .singleVideoselected .zoomIn{\n    position: absolute;\n  }\n.singleVideoselected video {\n  height: 440px;\n  width: 100%;\n}\n@media screen and (max-width: 600px) {\n  .zoomModal .ant-modal-content {\n    position: fixed !important;\n  }\n    .imgContainerHeight{\n      height: auto;}\n}\n\n\n"])));