oa-componentbook 0.18.296 → 0.18.297

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

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

@@ -9,6 +9,7 @@ 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 */
 
@@ -26,7 +27,7 @@ function MapBaseLocation(_ref) {
     openLocationNotDetectedModal,
     setOpenLocationNotDetectedModalState
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_styles.MapStyles, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "containerMap"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "locationSecBox"
@@ -62,6 +63,6 @@ function MapBaseLocation(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_CustomModalComponent.default, {
     open: openLocationNotDetectedModal,
     setOpenLocationNotDetectedModal: setOpenLocationNotDetectedModalState
-  })))));
+  }))))));
 }
 var _default = exports.default = MapBaseLocation;

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

@@ -0,0 +1,12 @@
+"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

@@ -20,7 +20,7 @@ var _oneassistLogo = _interopRequireDefault(require("../../images/oneassist-logo
 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"));
-require("./map.css");
+var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable */
 
@@ -47,7 +47,7 @@ function PincodeBaseLocation(_ref) {
     setOpenLocationNotDetectedModal,
     showHeader
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showHeader && /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_styles.PincodeStyles, null, showHeader && /*#__PURE__*/_react.default.createElement("div", {
     className: "oa-pincodeLocation"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "topHeader"

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

@@ -0,0 +1,12 @@
+"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/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");
-require("./preview.css");
+var _styles = require("./styles");
 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("div", {
+  return /*#__PURE__*/_react.default.createElement(_styles.ImgPreviewStyles, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mainStylePreview"
   }, !isSingleMedia && /*#__PURE__*/_react.default.createElement("img", {
     className: "left-icon",
@@ -126,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"));
-require("./preview.css");
+var _styles = require("./styles");
 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(_antd.Modal, {
+  return /*#__PURE__*/_react.default.createElement(_styles.ImgPreviewStyles, null, /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     className: "zoomModal",
     visible: isModalOpen,
     onCancel: handleCancel,
     width: 1024,
-    footer: null // Assuming you don't need a footer
+    footer: null
   }, /*#__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/styles.js

@@ -0,0 +1,12 @@
+"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: 232px;\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.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: 300px;\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}\n\n\n"])));

package/package.json

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