@secondstaxorg/sscomp 1.7.85 → 1.7.86

package/dist/index.js

@@ -21766,15 +21766,20 @@ const NothingContent$3 = styled.div`
 `;
 
 const Badge = styled.div`
-  border-radius: 4px;
-  width: 130px;
   text-align: center;
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 400;
   padding: 8px;
   display: flex;
+  border-radius: 4px;
   justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  &.sm{
+    width: 130px;
+  }
+  &.lg{
+    width: 100%;
+    height: 45px;
+  }
   &.default{
     background:${theme.colors["neutral-50"]};
     color: ${theme.colors["neutral-900"]};
@@ -21799,17 +21804,49 @@ const Badge = styled.div`
     background:${theme.colors["error-50"]};
     color: ${theme.colors["error-500"]};
   }
+  &.initiated{
+    background:${theme.colors["neutral-100"]};
+    color: ${theme.colors["neutral-700"]};
+  }
+  &.in-progress{
+    background:${theme.colors["warning-50"]};
+    color: ${theme.colors["warning-700"]};
+  }
+  &.pending{
+    background:${theme.colors["neutral-400"]};
+    color: ${theme.colors["neutral-900"]};
+  }
+  &.approved{
+    background:${theme.colors["primary-50"]};
+    color: ${theme.colors["primary-500"]};
+  }
+  &.uploaded{
+    background:${theme.colors["success-100"]};
+    color: ${theme.colors["success-700"]};
+  }
+  &.denied{
+    background:${theme.colors["error-100"]};
+    color: ${theme.colors["error-700"]};
+  }
+  &.completed{
+    background:${theme.colors["success-50"]};
+    color: ${theme.colors["success-900"]};
+  }
+  &.cancelled{
+    background:${theme.colors["error-50"]};
+    color: ${theme.colors["error-500"]};
+  }
 `;
 
 const _jsxFileName$w = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\StatusBadge\\StatusBadge.tsx";
-
 /**
  * Badges to displayed to show the status of something
  */
 const StatusBadge = (props) => {
-    const {status,label,width} = props;
+    const {status,label,width,size} = props;
+
     return (
-        React$1.createElement(Badge, { className: !status ? 'default' : status, style: {width:width}, __self: undefined, __source: {fileName: _jsxFileName$w, lineNumber: 11}}
+        React$1.createElement(Badge, { className: `captionBook ${!status ? 'default' : status} ${size ? size : 'sm'}`, style: {width:width}, __self: undefined, __source: {fileName: _jsxFileName$w, lineNumber: 13}}
             , label
         )
     )
@@ -22467,6 +22504,53 @@ styled.button`
     background: ${theme.colors["neutral-100"]};
     cursor: not-allowed;
   }
+`;
+
+const ConsolidatedContainer = styled.div`
+  border: 1px solid ${theme.colors["neutral-200"]};
+  border-radius: 8px;
+  background:#ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  height: 50px;
+  box-sizing: border-box;
+  
+  .search-input,.search-btn{
+    width: 100%;
+    border: none;
+    
+    :focus-visible{
+      outline: none;
+    }
+  }
+  
+  .search-input{
+    padding: 13px 16px;
+    background: #ffffff;
+    height: 24px;
+    font-size: 16px;
+    font-weight: 400;
+    color: ${theme.colors["neutral-900"]};
+    ::placeholder{
+      color: ${theme.colors["neutral-400"]};
+    }
+  }
+  
+  .search-btn{
+    width: fit-content;
+    cursor: pointer;
+    padding: 0 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    height: 100%;
+    background: transparent;
+  }
 `;
 
 const _jsxFileName$q = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\SearchBar\\SearchBar.tsx";
@@ -22474,7 +22558,7 @@ const _jsxFileName$q = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  * A search field added on the news application to implement search
  */
 const SearchBar = (props) => {
-    const {value,submitFxn} = props;
+    const {value,submitFxn,consolidateBtn} = props;
     const [searchStr,setSearchStr] = React$1.useState(value);
 
     return (
@@ -22482,14 +22566,34 @@ const SearchBar = (props) => {
             e.preventDefault();
             submitFxn(searchStr);
         }, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 15}}
-            , React$1.createElement(SearchBarContainer, {__self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 19}}
-                , React$1.createElement(TextField, { type: "text", width: 284, placeholder: "Search", value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 20}})
-                , React$1.createElement(Button$1, { variant: "primary", size: "lg", width: "fit-content", type: "submit", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 21}}
-                    , React$1.createElement('svg', { width: "21", height: "21", viewBox: "0 0 21 21"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 22}}
-                        , React$1.createElement('path', { d: "M20.21 19.29L16.5 15.61C17.9401 13.8144 18.6375 11.5353 18.4488 9.2413C18.2601 6.9473 17.1997 4.81278 15.4855 3.27664C13.7714 1.74051 11.5338 0.91951 9.23292 0.98247C6.93203 1.04543 4.74272 1.98756 3.11514 3.61514C1.48756 5.24272 0.545427 7.43204 0.482466 9.73292C0.419506 12.0338 1.2405 14.2714 2.77664 15.9855C4.31278 17.6997 6.4473 18.7601 8.7413 18.9488C11.0353 19.1375 13.3144 18.4401 15.11 17L18.79 20.68C18.883 20.7737 18.9936 20.8481 19.1154 20.8989C19.2373 20.9497 19.368 20.9758 19.5 20.9758C19.632 20.9758 19.7627 20.9497 19.8846 20.8989C20.0064 20.8481 20.117 20.7737 20.21 20.68C20.3902 20.4935 20.491 20.2443 20.491 19.985C20.491 19.7257 20.3902 19.4765 20.21 19.29V19.29ZM9.5 17C8.11553 17 6.76215 16.5895 5.611 15.8203C4.45986 15.0511 3.56265 13.9579 3.03284 12.6788C2.50303 11.3997 2.3644 9.99223 2.6345 8.63437C2.9046 7.2765 3.57128 6.02922 4.55025 5.05025C5.52922 4.07128 6.7765 3.4046 8.13436 3.1345C9.49223 2.86441 10.8997 3.00303 12.1788 3.53284C13.4579 4.06266 14.5511 4.95986 15.3203 6.11101C16.0895 7.26215 16.5 8.61553 16.5 10C16.5 11.8565 15.7625 13.637 14.4497 14.9497C13.137 16.2625 11.3565 17 9.5 17V17Z"                                                                                                                            , fill: "#F7F9FC", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 23}})
+            , !consolidateBtn &&
+                React$1.createElement(SearchBarContainer, {__self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 20}}
+                    , React$1.createElement(TextField, { type: "text", width: 284, value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 21}})
+                    , React$1.createElement(Button$1, { variant: "primary", size: "lg", width: "fit-content", type: "submit", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 22}}
+                        , React$1.createElement('svg', { width: "21", height: "21", viewBox: "0 0 21 21"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 23}}
+                            , React$1.createElement('path', { d: "M20.21 19.29L16.5 15.61C17.9401 13.8144 18.6375 11.5353 18.4488 9.2413C18.2601 6.9473 17.1997 4.81278 15.4855 3.27664C13.7714 1.74051 11.5338 0.91951 9.23292 0.98247C6.93203 1.04543 4.74272 1.98756 3.11514 3.61514C1.48756 5.24272 0.545427 7.43204 0.482466 9.73292C0.419506 12.0338 1.2405 14.2714 2.77664 15.9855C4.31278 17.6997 6.4473 18.7601 8.7413 18.9488C11.0353 19.1375 13.3144 18.4401 15.11 17L18.79 20.68C18.883 20.7737 18.9936 20.8481 19.1154 20.8989C19.2373 20.9497 19.368 20.9758 19.5 20.9758C19.632 20.9758 19.7627 20.9497 19.8846 20.8989C20.0064 20.8481 20.117 20.7737 20.21 20.68C20.3902 20.4935 20.491 20.2443 20.491 19.985C20.491 19.7257 20.3902 19.4765 20.21 19.29V19.29ZM9.5 17C8.11553 17 6.76215 16.5895 5.611 15.8203C4.45986 15.0511 3.56265 13.9579 3.03284 12.6788C2.50303 11.3997 2.3644 9.99223 2.6345 8.63437C2.9046 7.2765 3.57128 6.02922 4.55025 5.05025C5.52922 4.07128 6.7765 3.4046 8.13436 3.1345C9.49223 2.86441 10.8997 3.00303 12.1788 3.53284C13.4579 4.06266 14.5511 4.95986 15.3203 6.11101C16.0895 7.26215 16.5 8.61553 16.5 10C16.5 11.8565 15.7625 13.637 14.4497 14.9497C13.137 16.2625 11.3565 17 9.5 17V17Z"                                                                                                                            , fill: "#F7F9FC", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 24}})
+                        )
                     )
-                )
-            )
+                )
+            
+            , consolidateBtn &&
+                React$1.createElement(ConsolidatedContainer, { style: {width:295}, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 30}}
+                    , React$1.createElement('input', { type: "text", className: "search-input", value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 31}})
+                    , React$1.createElement('button', { type: "submit", className: "search-btn", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 32}}
+                        , React$1.createElement('svg', { width: "24", height: "24", viewBox: "0 0 24 24"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 33}}
+                            , React$1.createElement('g', { clipPath: "url(#clip0_2419_580)", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 34}}
+                                , React$1.createElement('path', { d: "M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.9473 18.6997 5.81278 16.9855 4.27664C15.2714 2.7405 13.0338 1.91951 10.7329 1.98247C8.43207 2.04543 6.24275 2.98756 4.61517 4.61514C2.98759 6.24272 2.04546 8.43203 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8481 21.6171 21.7737 21.71 21.68C21.8903 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9922 4.13453 9.63436C4.40463 8.2765 5.07131 7.02922 6.05028 6.05025C7.02925 5.07128 8.27653 4.4046 9.63439 4.1345C10.9923 3.8644 12.3997 4.00303 13.6788 4.53284C14.9579 5.06265 16.0511 5.95986 16.8203 7.111C17.5895 8.26215 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9498 15.9497C14.637 17.2625 12.8565 18 11 18Z"                                                                                                                            , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 35}})
+                            )
+                            , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 37}}
+                                , React$1.createElement('clipPath', { id: "clip0_2419_580", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 38}}
+                                    , React$1.createElement('rect', { width: "24", height: "24", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 39}})
+                                )
+                            )
+                        )
+                    )
+
+                )
+            
         )
     )
 };
@@ -22539,7 +22643,7 @@ const SearchResultsBar = (props) => {
 
 const ModalBackdrop = styled.div`
   position: absolute;
-  overflow: clip;
+  overflow: hidden;
   width: 100%;
   height: 100%;
   left: 0;