oa-componentbook 1.0.1-stage.395 → 1.0.1-stage.397

package/build/components/oa-component-button/styles.js

@@ -14,7 +14,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _default = exports.default = {};
 const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px; \n    text-align: left;\n  }\n"])));
 const EllipsisTypography = exports.EllipsisTypography = (0, _styledComponents.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;  \n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 84px;\n"])));
-const ColoredStyledButton = exports.ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 30px;\n    min-width: 80px;\n    padding: 10px 16px;\n  }\n\n  &.medium {\n    height: 36px;\n    min-width: 100px;\n    padding: 10px 16px;\n  }\n\n  &.large {\n    height: 48px;\n    min-width: 136px;\n    padding: 10px 24px;\n  }\n\n  &.medium-text-only,\n  &.small-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 4px 0;\n  }\n\n  &.large-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 8px 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.secondary {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: transparent;\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: transparent;\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    background: transparent;\n    border: 1px solid var(--color-negative);\n    color: var(--color-negative);\n  }\n  &.danger-secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-hover-negative);\n    color: var(--color-hover-negative);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: transparent;\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: transparent;\n  }\n  @media only screen and (max-width: 600px) {\n    &.text-only:hover {\n      color: var(--color-primary);\n    }\n  }\n"])));
+const ColoredStyledButton = exports.ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 30px;\n    min-width: 80px;\n    padding: 10px 16px;\n  }\n\n  &.medium {\n    height: 36px;\n    min-width: 100px;\n    padding: 10px 16px;\n  }\n\n  &.large {\n    height: 48px;\n    min-width: 136px;\n    padding: 10px 24px;\n  }\n\n  &.medium-text-only,\n  &.small-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 4px 0;\n  }\n\n  &.large-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 8px 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.gradient {\n  background: var(--color-primary-background); /* solid fill inside */\n  color: #014FC5; /* pick a readable color */\n  border: 1px solid transparent;\n  border-radius: 8px; /* optional */\n  background-image: linear-gradient(#fff, #fff), \n                    linear-gradient(90deg, #0098FF, #9A6CFF, #DF58D1, #FB6252, #FEA40A);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n  transition: all 0.3s ease;\n}\n\n&.gradient:hover {\n  background-image: linear-gradient(#fff, #fff), \n                    linear-gradient(90deg, #FEA40A, #FB6252, #DF58D1, #9A6CFF, #0098FF);\n}\n\n&.gradient-disabled {\n  background: var(--color-disabled-button);\n  border: 1px solid var(--color-disabled-button);\n  color: var(--color-primary-background);\n  cursor: not-allowed;\n}\n\n\n  &.secondary {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: transparent;\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: transparent;\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    background: transparent;\n    border: 1px solid var(--color-negative);\n    color: var(--color-negative);\n  }\n  &.danger-secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-hover-negative);\n    color: var(--color-hover-negative);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: transparent;\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: transparent;\n  }\n  @media only screen and (max-width: 600px) {\n    &.text-only:hover {\n      color: var(--color-primary);\n    }\n  }\n"])));
 function getButtonTypography(size) {
   switch (size) {
     case 'large':

package/build/layout/GenricLayOut/styles.js

@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 const DrawerWithOutFooter = exports.DrawerWithOutFooter = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.hubAutomationContainer .fullPageLayout {padding: 0 !important; background: #fff !important;}\n.hubAutomationContainer .fullPageLayout  .oaRightLayouts{\n    max-width: 1154px;\n    margin: 24px auto;\n    padding: 0 16px;\n    box-shadow: none;}\n.oaDrawer div + div.ant-drawer-body{padding-bottom:100px !important;}\n\n.ant-checkbox-indeterminate .ant-checkbox-inner:after {\n    background-color: #014fc5;\n}\n\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::before {display:none;}\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::after{ content: \"*\"; color: #DE350B; visibility: visible !important;}\n\n\n.cstUplaodWithFullWidth{margin-bottom:24px;}\n.cstUplaodWithFullWidth:last-child{margin-bottom:0;}\n.cstUplaodWithFullWidth .uploadDiv{width:100%;}\n.cstUplaodWithFullWidth .uploadDiv .ant-upload-list-item-container, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper .ant-upload-list-picture-card .ant-upload-select, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {\n     width: 100%; \n    height: 120px;\n}\n\n\n\n\n.oaDrawer .ant-form-item .ant-form-item-explain-error {\n    color: #DE350B;\n    font-size: 12px;\n    margin: 4px 0 0 0;\n}\n.bottomSelectedSecion{background: #F6F6F6; padding: 16px 36px; position: fixed; bottom: 0; left: 0; right: 0;\nbox-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    display: flex; z-index: 2;\n    align-items: center;\n    justify-content: end;\n    gap: 24px;}\n\n\n\n.listOfItems{ border-radius: 12px;\n    border: 1px solid #E0E0E0;\n    padding: 24px;\n    margin: 24px 0 0 0;}\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n.listOfItemsWithoutBorder{\n    padding: 24px 0;\n    margin: 24px 0 0 0;}\n\n    modalSubheading{\n    padding: 24px;\n    margin: 24px 0 0 0;}\n\n\n\n\n.modalIconAndTextBox{display:flex; flex-direction:row; align-items: center;  margin: 0 0 16px 0; gap:4px;}\n\n/* Select List Item Styles */\n.select-list-container {\n  padding: 0;\n  margin: 16px 0 0 0;\n}\n\n.select-list-item {\n  display: flex;\n  align-items: center;\n  padding: 16px 0;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  border-bottom: 1px solid #f0f0f0;\n  position: relative;\n}\n\n.select-list-item:hover {\n  background-color: #f8f9fa;\n}\n\n.select-list-item:last-child {\n  border-bottom: none;\n}\n\n.item-avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background-color: #f0f0f0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  font-size: 20px;\n  font-weight: 500;\n  color: #333;\n  flex-shrink: 0;\n}\n\n/* Different avatar colors for different items */\n.select-list-item:nth-child(1) .item-avatar {\n  background-color: #717171;\n  color: #fff;\n}\n\n.select-list-item:nth-child(2) .item-avatar {\n  background-color: #014fc5;\n  color: #fff;\n}\n\n.item-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.item-arrow {\n  flex-shrink: 0;\n  margin-left: 8px;\n  color: #014fc5;\n}\n"])));
 const FormWidgetStyle = exports.FormWidgetStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .formBottomAction {\n    position: absolute;\n    bottom: 0px;\n    background-color: rgb(249, 249, 249);\n    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 8px;\n    padding: 16px;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    z-index: 10;\n    left: 0;\n    right: 0;\n  }\n\n  .formBottomAction .ant-form-item {\n    margin-bottom: 0px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n  }\n  .searchErrorMsg {\n    font-size: 12px;\n  }\n"])));
 const TableDataStyle = exports.TableDataStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .tableContainerList th,\n  button {\n    white-space: nowrap;\n  }\n  .tableContainerList th,\n  button {\n    white-space: nowrap;\n  }\n"])));
-const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .oaTopHeaderAndBtnSec {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .headerContent {\n      display: flex;\n      align-items: flex-start; // Changed from 'center' to 'flex-start'\n      justify-content: space-between;\n      width: 100%;\n\n      .headerLeft {\n        flex: 1;\n      }\n\n      .headerRight {\n        display: flex;\n        align-items: flex-start; // Changed from 'center' to 'flex-start'\n        justify-content: flex-end;\n      }\n    }\n  }\n\n  .fullPageLayout {\n    display: flex;\n    padding: 8px;\n    background: #f6f6f6;\n  }\n  .ant-pagination {\n    padding: 0 16px;\n    justify-content: end;\n  }\n  .layoutHeadingPage {\n    display: flex;\n    gap: 8px;\n    margin: 0 0 32px 0;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .topHadingWithIcon span {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  .subHadingText {\n    margin: 0 0 0 36px;\n  }\n\n  .subHading1Text {\n    margin: 0 0 ", " 40px;\n  }\n\n  .marginNone {\n    margin: 0 !important;\n  }\n\n  .subHadingText > span {\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n    align-items: center;\n  }\n\n  .oaRightLayouts {\n    width: 100%;\n    min-height: calc(100vh - 16px);\n    padding: 76px 48px;\n    overflow-y: auto;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .oaheaderSearchAndFilter {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 16px 0;\n    gap: 16px;\n  }\n\n  .oaRightLayouts .iconAndTextSecBox {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .inLine {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .customeSelectDropdown {\n    margin: 4px 0 0 8px;\n  }\n\n  .cardData {\n    padding: 28px 0 48px 0;\n  }\n\n  .ant-carousel .slick-dots {\n    position: static;\n    margin: 20px auto 12px 0;\n  }\n  .ant-carousel .slick-dots li {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li button {\n    width: 8px;\n    height: 8px;\n    background: #cacaca;\n    border-radius: 50%;\n    opacity: 0.5;\n  }\n  .ant-carousel .slick-dots li.slick-active {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li.slick-active button {\n    width: 8px;\n    height: 8px;\n    opacity: 1;\n  }\n  .ant-carousel .slick-dots li::after {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    opacity: 1;\n    background: #717171;\n  }\n\n  .oaTabs .ant-tabs-nav {\n    border-top: 1px solid #e0e0e0;\n    border-left: 1px solid #e0e0e0;\n    border-right: 1px solid #e0e0e0;\n    padding: 12px 22px 0 22px;\n    margin: 0 0 8px 0;\n    background: #fff;\n    border-radius: 4px 4px 0 0;\n  }\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .cardContainer {\n    display: flex;\n    gap: 24px;\n  }\n  .selectAndSearch .noClear {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n    margin: 4px 0px 0px;\n    color: #de350b;\n  }\n  .searchOnly {\n    margin: 0px 0px 16px;\n    position: relative;\n  }\n  .searchOnly .ant-input-affix-wrapper {\n    border-radius: 4px;\n    max-width: 420px;\n    padding-left: 44px;\n  }\n  .searchOnly .cstSearchIcon {\n    position: absolute;\n    left: 16px;\n    top: 14px;\n    z-index: 2;\n  }\n\n  .selectAndSearch .ant-input-affix-wrapper {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .selectAndSearch {\n    flex-shrink: 0;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    border: none;\n    padding: 0;\n  }\n  .customeSelectDropdown .ant-select-selection-item > span {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 32px;\n  }\n\n  .customeSelectDropdown .ant-select {\n    margin: 0 0 0 32px;\n  }\n\n  .customeSelectDropdown .ant-select .ant-select-arrow {\n    color: #014fc5;\n    inset-inline-end: -6px;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    box-shadow: none !important;\n  }\n  .oaheaderButtons {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    justify-content: space-between;\n  }\n\n  .oaheaderButtons.single-child {\n    justify-content: flex-end;\n  }\n\n  .oaheaderButtonsRight {\n    display: flex;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .oaheaderButtons .notifyDot {\n    width: 12px;\n    height: 12px;\n    background: #de350b;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    border-radius: 50%;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .selectAndSearch .ant-input-affix-wrapper {\n      width: calc(100% - 84px);\n    }\n    .oaheaderSearchAndFilter .dropDownSearchContainer {\n      width: 100%;\n    }\n\n    .oaheaderSearchAndFilter {\n      align-items: flex-end;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .inLine {\n      flex-direction: column;\n      gap: 0;\n      align-items: flex-start;\n    }\n\n    .subHadingText > span {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .fullPageLayout {\n      flex-direction: column;\n      padding: 0;\n    }\n    .oaRightLayouts {\n      padding: 16px;\n      border-radius: 0;\n      background: #fff;\n      box-shadow: none;\n      height: auto;\n      background: #f6f6f6;\n    }\n    .oaTabs .ant-tabs-nav {\n      margin: 0 0 28px 0;\n      padding: 12px 0 0 0;\n    }\n    .layoutHeadingPage {\n      margin: 0 0 16px 0;\n      background: #fff;\n      padding: 16px;\n      border-radius: 8px;\n      width: 100%;\n    }\n    .layoutHeadingAndSearch {\n      background: #fff;\n      padding: 20px 16px;\n      margin: 0;\n      width: 100%;\n      border-radius: 8px;\n    }\n    \n    /* Hide profile section on mobile when sidebar has profile icon */\n    .hideProfileOnMobile {\n      display: none !important;\n    }\n  }\n"])), _ref => {
+const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .oaTopHeaderAndBtnSec {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .headerContent {\n      display: flex;\n      align-items: flex-start; // Changed from 'center' to 'flex-start'\n      justify-content: space-between;\n      width: 100%;\n\n      .headerLeft {\n        flex: 1;\n      }\n\n      .headerRight {\n        display: flex;\n        align-items: flex-start; // Changed from 'center' to 'flex-start'\n        justify-content: flex-end;\n      }\n    }\n  }\n\n  .fullPageLayout {\n    display: flex;\n    padding: 8px;\n    background: #f6f6f6;\n  }\n  .ant-pagination {\n    padding: 0 16px;\n    justify-content: end;\n  }\n  .layoutHeadingPage {\n    display: flex;\n    gap: 8px;\n    margin: 0 0 32px 0;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .topHadingWithIcon span {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  .subHadingText {\n    margin: 0 0 0 36px;\n  }\n\n  .subHading1Text {\n    margin: 0 0 ", " 40px;\n  }\n\n  .marginNone {\n    margin: 0 !important;\n  }\n\n  .subHadingText > span {\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n    align-items: center;\n  }\n\n  .oaRightLayouts {\n    width: 100%;\n    min-height: calc(100vh - 16px);\n    padding: 76px 48px;\n    overflow-y: auto;\n    border-radius: 16px;\n    background: #fff;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .oaheaderSearchAndFilter {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 0 16px 0;\n    gap: 16px;\n  }\n\n  .oaRightLayouts .iconAndTextSecBox {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .inLine {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .customeSelectDropdown {\n    margin: 4px 0 0 8px;\n  }\n\n  .cardData {\n    padding: 28px 0 48px 0;\n  }\n\n  .ant-carousel .slick-dots {\n    position: static;\n    margin: 20px auto 12px 0;\n  }\n  .ant-carousel .slick-dots li {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li button {\n    width: 8px;\n    height: 8px;\n    background: #cacaca;\n    border-radius: 50%;\n    opacity: 0.5;\n  }\n  .ant-carousel .slick-dots li.slick-active {\n    width: 8px;\n    height: 8px;\n  }\n  .ant-carousel .slick-dots li.slick-active button {\n    width: 8px;\n    height: 8px;\n    opacity: 1;\n  }\n  .ant-carousel .slick-dots li::after {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    opacity: 1;\n    background: #717171;\n  }\n\n  .oaTabs .ant-tabs-nav {\n    border-top: 1px solid #e0e0e0;\n    border-left: 1px solid #e0e0e0;\n    border-right: 1px solid #e0e0e0;\n    padding: 12px 22px 0 22px;\n    margin: 0 0 8px 0;\n    background: #fff;\n    border-radius: 4px 4px 0 0;\n  }\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .cardContainer {\n    display: flex;\n    gap: 24px;\n  }\n  .selectAndSearch .noClear {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .searchErrorMsg {\n    font-size: 12px;\n    margin: 4px 0px 0px;\n    color: #de350b;\n  }\n  .searchOnly {\n    margin: 0px 0px 16px;\n    position: relative;\n  }\n  .searchOnly .ant-input-affix-wrapper {\n    border-radius: 4px;\n    max-width: 420px;\n    padding-left: 44px;\n  }\n  .searchOnly .cstSearchIcon {\n    position: absolute;\n    left: 16px;\n    top: 14px;\n    z-index: 2;\n  }\n\n  .selectAndSearch .ant-input-affix-wrapper {\n    border-radius: 0 4px 4px 0;\n    width: 320px;\n  }\n\n  .selectAndSearch {\n    flex-shrink: 0;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    border: none;\n    padding: 0;\n     max-width: 83vw;\n  }\n  .customeSelectDropdown .ant-select-selection-item > span {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 32px;\n  }\n\n  .customeSelectDropdown .ant-select {\n    margin: 0 0 0 32px;\n  }\n\n  .customeSelectDropdown .ant-select .ant-select-arrow {\n    color: #014fc5;\n    inset-inline-end: -6px;\n  }\n\n  .customeSelectDropdown .ant-select-selector {\n    box-shadow: none !important;\n  }\n\n.customeSelectDropdown .ant-select-selection-item {\n  display: inline-block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  vertical-align: bottom;\n}\n\n  .oaheaderButtons {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    justify-content: space-between;\n  }\n\n  .oaheaderButtons.single-child {\n    justify-content: flex-end;\n  }\n\n  .oaheaderButtonsRight {\n    display: flex;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .oaheaderButtons .notifyDot {\n    width: 12px;\n    height: 12px;\n    background: #de350b;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    border-radius: 50%;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .selectAndSearch .ant-input-affix-wrapper {\n      width: calc(100% - 84px);\n    }\n    .oaheaderSearchAndFilter .dropDownSearchContainer {\n      width: 100%;\n    }\n\n    .oaheaderSearchAndFilter {\n      align-items: flex-end;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .inLine {\n      flex-direction: column;\n      gap: 0;\n      align-items: flex-start;\n    }\n\n    .subHadingText > span {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .customeSelectDropdown {\n      margin: 4px 0 0 0;\n    }\n\n    .customeSelectDropdown .ant-select {\n      margin: 0 0 0 0;\n    }\n\n    .fullPageLayout {\n      flex-direction: column;\n      padding: 0;\n    }\n    .oaRightLayouts {\n      padding: 16px;\n      border-radius: 0;\n      background: #fff;\n      box-shadow: none;\n      height: auto;\n      background: #f6f6f6;\n    }\n    .oaTabs .ant-tabs-nav {\n      margin: 0 0 28px 0;\n      padding: 12px 0 0 0;\n    }\n    .layoutHeadingPage {\n      margin: 0 0 16px 0;\n      background: #fff;\n      padding: 16px;\n      border-radius: 8px;\n      width: 100%;\n    }\n    .layoutHeadingAndSearch {\n      background: #fff;\n      padding: 20px 16px;\n      margin: 0;\n      width: 100%;\n      border-radius: 8px;\n    }\n    \n    /* Hide profile section on mobile when sidebar has profile icon */\n    .hideProfileOnMobile {\n      display: none !important;\n    }\n  }\n"])), _ref => {
   let {
     marginBottom
   } = _ref;

package/build/widgets/oa-widget-sidebar/components/Header.js

@@ -24,6 +24,9 @@ function Header(_ref) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Image, {
       src: icon,
       preview: false,
+      style: {
+        height: '56px'
+      },
       className: "logo"
     }));
   }), text && /*#__PURE__*/_react.default.createElement(_antd.Typography, {

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

@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2; // styles.js
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n    height: 80vh; /* full viewport height */\n    display: flex;\n    flex-direction: column;\n  }\n\n  .logoContainer {\n    padding: 12px;\n    display: flex;\n    justify-content: space-between;\n    height: 110px;\n    align-items: center;\n    margin: 0 0 16px 0;\n  }\n\n  .logoutDiv {\n    display: flex;\n    flex-direction: row;\n    margin: 48px 0 0 16px;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  // .logoContainer em {\n  //   width: 1px;\n  //   background: #e0e0e0;\n  // }\n  // .logoContainer img {\n  //   height: 32px;\n  // }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n\n  /* Regular menu items */\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  /* SubMenu title styling - this is the parent item - same size as regular items */\n  .ant-menu-submenu-title {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n    display: flex;\n    align-items: center;\n  }\n\n  /* SubMenu items - these are the children - should be plain text */\n  .ant-menu-submenu .ant-menu-item {\n    margin: 8px 0;\n    padding: 8px 24px;\n    border-radius: 0;\n    background: transparent;\n    border: none;\n    margin-left: 16px;\n    color: #666;\n    font-size: 14px;\n    height: auto;\n    line-height: 1.4;\n  }\n\n  /* Add extra spacing for last nested item */\n  .ant-menu-submenu .ant-menu-item:last-child {\n    margin-bottom: 12px;\n  }\n\n  /* REMOVED: Open SubMenu styling - this was making ALL open submenus blue */\n  /* .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;      \n  } */\n\n  /* NEW: Only make parent blue when it contains a selected child */\n  .ant-menu-submenu-open:has(.ant-menu-item-selected)\n    > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;\n  }\n\n  /* Fallback for browsers that don't support :has() */\n  .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #fff;\n    color: #000;\n    padding: 24px;\n  }\n\n  /* SubMenu title content */\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .ant-menu-submenu-title .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  /* Add styling to span elements inside SubMenu title content */\n  .ant-menu-submenu-title .ant-menu-title-content span {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n\n  /* Selected states */\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu selected item - should be bold black when selected */\n  .ant-menu-submenu .ant-menu-item-selected {\n    background: transparent;\n    color: #000;\n    font-weight: bold;\n    border-radius: 0;\n  }\n\n  /* Hover effects */\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu title hover - should be blue on hover */\n  .ant-menu-submenu-title:hover {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  /* Nested items hover - should be bold black when hovered */\n  .ant-menu-submenu .ant-menu-item:hover {\n    background: transparent !important;\n    color: #000 !important;\n    font-weight: bold !important;\n    border-radius: 0;\n  }\n\n  /* Make Orders parent blue when hovering over submenu items */\n  .ant-menu-submenu:hover .ant-menu-submenu-title {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n\n  /* SubMenu arrow styling */\n  .ant-menu-submenu-arrow {\n    color: inherit;\n  }\n\n  /* SubMenu content area */\n  .ant-menu-sub {\n    background: transparent !important;\n    padding: 8px 0;\n  }\n\n  /* Remove default SubMenu styling */\n  .ant-menu-submenu .ant-menu-sub {\n    background: transparent !important;\n    box-shadow: none !important;\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  .footerLogoSection {\n    margin-top: auto;\n    margin-bottom: 40px;\n    padding: 0 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 172px;\n    height: 75px;\n  }\n\n  .footerLogoContainer {\n    display: flex;\n    align-items: center;\n  }\n\n  .footerLogo {\n    width: 172px;\n    height: 43px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 16px;\n      height: auto;\n      display: block;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n      width: 100%;\n      height: 80px;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n  }\n"])));
+const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n    height: 80vh; /* full viewport height */\n    display: flex;\n    flex-direction: column;\n  }\n\n  .logoContainer {\n    padding: 12px;\n    display: flex;\n    justify-content: space-between;\n    height: 110px;\n    align-items: center;\n    margin: 0 0 16px 0;\n  }\n\n  .logoutDiv {\n    display: flex;\n    flex-direction: row;\n    margin: 48px 0 0 16px;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  // .logoContainer em {\n  //   width: 1px;\n  //   background: #e0e0e0;\n  // }\n  // .logoContainer img {\n  //   height: 32px;\n  // }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n\n  /* Regular menu items */\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  /* SubMenu title styling - this is the parent item - same size as regular items */\n  .ant-menu-submenu-title {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n    display: flex;\n    align-items: center;\n  }\n\n  /* SubMenu items - these are the children - should be plain text */\n  .ant-menu-submenu .ant-menu-item {\n    margin: 8px 0;\n    padding: 8px 24px;\n    border-radius: 0;\n    background: transparent;\n    border: none;\n    margin-left: 16px;\n    color: #666;\n    font-size: 14px;\n    height: auto;\n    line-height: 1.4;\n  }\n\n  /* Add extra spacing for last nested item */\n  .ant-menu-submenu .ant-menu-item:last-child {\n    margin-bottom: 12px;\n  }\n\n  /* REMOVED: Open SubMenu styling - this was making ALL open submenus blue */\n  /* .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;      \n  } */\n\n  /* NEW: Only make parent blue when it contains a selected child */\n  .ant-menu-submenu-open:has(.ant-menu-item-selected)\n    > .ant-menu-submenu-title {\n    background: #014fc5;\n    color: #fff;\n    padding: 24px;\n  }\n\n  /* Fallback for browsers that don't support :has() */\n  .ant-menu-submenu-open > .ant-menu-submenu-title {\n    background: #fff;\n    color: #000;\n    padding: 24px;\n  }\n\n  /* SubMenu title content */\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .ant-menu-submenu-title .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n\n  /* Add styling to span elements inside SubMenu title content */\n  .ant-menu-submenu-title .ant-menu-title-content span {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n\n  /* Selected states */\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu selected item - should be bold black when selected */\n  .ant-menu-submenu .ant-menu-item-selected {\n    background: transparent;\n    color: #000;\n    font-weight: bold;\n    border-radius: 0;\n  }\n\n  /* Hover effects */\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n\n  /* SubMenu title hover - should be blue on hover */\n  .ant-menu-submenu-title:hover {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  /* Nested items hover - should be bold black when hovered */\n  .ant-menu-submenu .ant-menu-item:hover {\n    background: transparent !important;\n    color: #000 !important;\n    font-weight: bold !important;\n    border-radius: 0;\n  }\n\n  /* Make Orders parent blue when hovering over submenu items */\n  .ant-menu-submenu:hover .ant-menu-submenu-title {\n    background: #014fc5 !important;\n    color: #fff !important;\n    padding: 24px !important;\n  }\n\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n\n  /* SubMenu arrow styling */\n  .ant-menu-submenu-arrow {\n    color: inherit;\n  }\n\n  /* SubMenu content area */\n  .ant-menu-sub {\n    background: transparent !important;\n    padding: 8px 0;\n  }\n\n  /* Remove default SubMenu styling */\n  .ant-menu-submenu .ant-menu-sub {\n    background: transparent !important;\n    box-shadow: none !important;\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  .footerLogoSection {\n    margin-top: auto;\n    margin-bottom: 40px;\n    padding: 0 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    width: 172px;\n    height: 75px;\n  }\n\n  .footerLogoContainer {\n    display: flex;\n    align-items: center;\n  }\n\n  .footerLogo {\n    width: 172px;\n    height: 43px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 0 16px;\n      height: auto;\n      display: block;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n      width: 100%;\n      height: 80px;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n    .layoutHeadingPage * {\n      max-width: 200px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n"])));
 const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
 var _default = exports.default = OalayoutStyle;

package/package.json

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