@secondstaxorg/sscomp 1.7.29 → 1.7.31

package/dist/index.js

@@ -16436,7 +16436,7 @@ const DropdownIcon$2 = styled.div`
 `;
 
 const OptionsList$2 = styled.div`
-  z-index: 5;
+  z-index: 10;
   border-radius: 8px;
   position: absolute;
   top: 55px;
@@ -16482,6 +16482,9 @@ const OptionsList$2 = styled.div`
     color:${theme.colors["neutral-900"]};
     background: white;
   }
+  .search-field{
+    background: #ffffff;
+  }
 `;
 
 const DropdownOption$2 = styled.div`
@@ -17054,6 +17057,12 @@ const DatePickerContainer = styled.div`
   }
 `;
 
+const CalendarSheet = styled.div`
+  position: absolute;
+  margin-top: 4px;
+  margin-bottom: 8px;
+  z-index: 10;
+`;
 const InputField$3 = styled.div`
   border: 1px solid ${theme.colors["neutral-200"]};
   //width: 430px;
@@ -17112,7 +17121,7 @@ const InputField$3 = styled.div`
 `;
 
 const CalendarContainer$1 = styled.div`
-  background:#ffffff;
+  background: #ffffff;
   padding: 16px;
   border-radius: 16px;
   /*max-width: 446px;
@@ -17120,116 +17129,120 @@ const CalendarContainer$1 = styled.div`
   width: 446px;
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.04);
   animation: openlist 0.2s ease-out;
-  transform-origin:top;
-  @keyframes openlist{
-    from{
+  transform-origin: top;
+  @keyframes openlist {
+    from {
       transform: scaleY(0%);
     }
-    to{
-      transform:scaleY(100%);
+    to {
+      transform: scaleY(100%);
     }
   }
-}
-.header{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.month-year{
-  width: 150px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 16px;
-  cursor:pointer;
-  border-radius: 50px;
-  padding: 4px 0;
-  display: flex;
-  gap: 4px;
-  &:hover {
-    background: ${theme.colors["neutral-50"]};
-  }
-  svg {
-    transition: 0.3s ease-out;
-    -webkit-transform: rotate(-180deg);
-    transform: rotate(-180deg);
-  }
-  .year-view {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-  }
-}
 
-button{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 30px;
-  width: 30px;
-}
-.weekdays{
-  display: flex;
-  justify-content: center;
-  margin-bottom: 16px;
-}
-.weekday{
-  flex: 1 1 0;
-  text-align: center;
-  font-weight: 500;
-}
-.calendar-day{
-  text-align: center;
-  cursor:pointer;
-  width: 35px;
-  height: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  font-size: 14px;
-  &:hover{
-    background: ${theme.colors["neutral-50"]};
-  }
-}
-.previous-month-day,.next-month-day,.past-day,.future-day{
-  color: ${theme.colors["neutral-200"]};
-  cursor: default;
-  &:hover{
-    background: none;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
   }
-}
-.days{
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 16px;
-}
-.selected-day,.selected-day:hover,.selected-year,.selected-year:hover{
-  background: ${theme.colors["neutral-900"]} !important;
-  color: #ffffff;
-}
-.current-day{
-  font-weight: bold;
-}
 
-//year selector
-.year-options {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: 16px;
-}
+  .month-year {
+    width: 150px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 50px;
+    padding: 4px 0;
+    display: flex;
+    gap: 4px;
 
-.year-option {
-  text-align: center;
-  border-radius: 50px;
-  height: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background: ${theme.colors["neutral-50"]};
+    &:hover {
+      background: ${theme.colors["neutral-50"]};
+    }
+
+    svg {
+      transition: 0.3s ease-out;
+      -webkit-transform: rotate(-180deg);
+      transform: rotate(-180deg);
+    }
+
+    .year-view {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
   }
-}
+
+    button{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+      width: 30px;
+    }
+    .weekdays{
+      display: flex;
+      justify-content: center;
+      margin-bottom: 16px;
+    }
+    .weekday{
+      flex: 1 1 0;
+      text-align: center;
+      font-weight: 500;
+    }
+    .calendar-day{
+      text-align: center;
+      cursor:pointer;
+      width: 35px;
+      height: 35px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      font-size: 14px;
+      &:hover{
+        background: ${theme.colors["neutral-50"]};
+      }
+    }
+    .previous-month-day,.next-month-day,.past-day,.future-day{
+      color: ${theme.colors["neutral-200"]};
+      cursor: default;
+      &:hover{
+        background: none;
+      }
+    }
+    .days{
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 16px;
+    }
+    .selected-day,.selected-day:hover,.selected-year,.selected-year:hover{
+      background: ${theme.colors["neutral-900"]} !important;
+      color: #ffffff;
+    }
+    .current-day{
+      font-weight: bold;
+    }
+    
+    //year selector
+    .year-options {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      row-gap: 16px;
+    }
+    
+    .year-option {
+      text-align: center;
+      border-radius: 50px;
+      height: 35px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background: ${theme.colors["neutral-50"]};
+      }
+    }
 `;
 
 const ErrorMessage$3 = styled.p`
@@ -17319,7 +17332,7 @@ const DatePicker = (props) => {
                     )
                 )
                 , isCalendarOpen && (
-                    React$1.createElement('div', { style: {position:"absolute",marginTop:4}, __self: undefined, __source: {fileName: _jsxFileName$P, lineNumber: 81}}
+                    React$1.createElement(CalendarSheet, {__self: undefined, __source: {fileName: _jsxFileName$P, lineNumber: 81}}
                         , React$1.createElement(Calendar, { onChange: (e)=>{
                             handleDateChange(e);
                             setValidationStatus('success');
@@ -18290,6 +18303,7 @@ const DropdownField$1  = styled.div`
     height: 46px;
     border: 1px solid ${theme.colors["primary-300"]} !important;
     cursor: auto;
+    background: #ffffff;
   }
   .search-field input{
     width: 100%;
@@ -25476,10 +25490,10 @@ const DropdownField  = styled.div`
     gap: 4px;
     align-items: center;
     padding-inline: 12px;
-    //height: 46px;
     border: 1px solid ${theme.colors["primary-300"]} !important;
     cursor: auto;
     border-radius: 8px;
+    background: #ffffff;
   }
   .search-field input{
     width: 100%;