@secondstaxorg/sscomp 1.6.73 → 1.6.75

package/dist/index.js

@@ -16943,7 +16943,7 @@ const CurrencyPairsTable = (props) => {
     )
 };
 
-const InputLabel$4 = styled.div`
+const InputLabel$5 = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -17169,7 +17169,7 @@ const DatePicker = (props) => {
     return (
         React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$L, lineNumber: 39}}
             , label &&
-                React$1.createElement(InputLabel$4, {__self: undefined, __source: {fileName: _jsxFileName$L, lineNumber: 41}}
+                React$1.createElement(InputLabel$5, {__self: undefined, __source: {fileName: _jsxFileName$L, lineNumber: 41}}
                     , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$L, lineNumber: 42}}, label)
                     , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$L, lineNumber: 43}}, subtext)
                 )
@@ -17423,7 +17423,7 @@ const DateRangePickerComp = styled.div`
   }
 `;
 
-const InputLabel$3 = styled.div`
+const InputLabel$4 = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -17954,7 +17954,7 @@ const DateRangePicker = ({ selectedDateRange,label,subtext ,placeholder,showActi
         React$1.createElement(DateRangePickerComp, { className: "datepicker-comp", __self: undefined, __source: {fileName: _jsxFileName$K, lineNumber: 270}}
             , React$1.createElement('div', { className: "input-field", __self: undefined, __source: {fileName: _jsxFileName$K, lineNumber: 271}}
                 , label &&
-                    React$1.createElement(InputLabel$3, {__self: undefined, __source: {fileName: _jsxFileName$K, lineNumber: 273}}
+                    React$1.createElement(InputLabel$4, {__self: undefined, __source: {fileName: _jsxFileName$K, lineNumber: 273}}
                         , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$K, lineNumber: 274}}, label)
                         , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$K, lineNumber: 275}}, subtext)
                     )
@@ -18091,11 +18091,18 @@ const DisplayField = (props) => {
     )
 };
 
-const FieldContainer = styled.div`
+const FieldContainer$1 = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
   //width: 430px;
+  .err-msg{
+    color:${theme.colors["error-500"]};
+    display: flex;
+    gap: 8px;
+    justify-content: start;
+    align-items: center;
+  }
 `;
 
 const LabelContainer = styled.div`
@@ -18157,6 +18164,24 @@ const DropdownField  = styled.div`
   .placeholder{
     color:${theme.colors["neutral-400"]};
   }
+  .sr-only{
+    position: absolute;
+    width: 1px;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  &.error{
+    border: 1px solid ${theme.colors["error-500"]} !important;
+  }
+  &.success{
+    border: 1px solid ${theme.colors["success-500"]} !important;
+  }
 `;
 
 const DisabledContainer = styled.div`
@@ -18245,7 +18270,7 @@ const _jsxFileName$I = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  * Dropdown component for selecting from a list of options
  */
 const DropdownList = (props) => {
-    let {options,returnedSelection,initialText,disabled,label,placeholder,searchable,width} = props;
+    let {options,returnedSelection,initialText,disabled,label,placeholder,searchable,width,required} = props;
     const [opened,setOpened] = React$1.useState(false);
     const [passedOption,setPassedOption] = React$1.useState({});
     const [err,setErr] = React$1.useState(false);
@@ -18254,6 +18279,8 @@ const DropdownList = (props) => {
     const [qryStr,setQryStr] = React$1.useState('');
     const [initText,setInitText] = React$1.useState('');
     const buttonRef = React$1.useRef();
+    const [srVal,setSrVal] = React$1.useState('');
+    const [selStatus,setSelStatus] = React$1.useState('');
 
     React$1.useEffect(()=>{
         if (initialText) setInitText(initialText);
@@ -18283,93 +18310,117 @@ const DropdownList = (props) => {
     }
 
     return (
-            React$1.createElement(FieldContainer, { style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 48}}
-                , !disabled &&
-                    React$1.createElement(React$1.Fragment, null
-                        , label &&
-                            React$1.createElement(LabelContainer, {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 52}}
-                                , React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 53}}, label)
-                            )
+        React$1.createElement(FieldContainer$1, { style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 50}}
+            , !disabled &&
+                React$1.createElement(React$1.Fragment, null
+                    , label &&
+                        React$1.createElement(LabelContainer, {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 54}}
+                            , React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 55}}, label)
+                        )
+                    
+                    , React$1.createElement(DropdownField, { className: selStatus, style: {borderColor:passedOption.value ? theme.colors["success-500"] : theme.colors["neutral-200"]}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 58}}
+                        , React$1.createElement('input', { className: "sr-only", value: srVal, required: required, onChange: ()=>{}, onInvalid: ()=>{setSelStatus('error');}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 59}})
+                        , React$1.createElement('button', { ref: buttonRef, type: "button", className: `dropdown-field ${err ? 'error' : ''}`, onBlur: ()=>{
+                            if (!searchable){
+                                setTimeout(()=>{
+                                    setOpened(false);
+                                },200);
+                            }
+                            if (required) {
+                                setSelStatus(!srVal ? 'error' : 'success');
+                            }else {
+                                setSelStatus(srVal ? 'success' : '');
+                            }
+                        }, onMouseUp: ()=>{
+                            if (opened){
+                                setTimeout(()=>{
+                                    setOpened(false);
+                                },100);
+                            }else {
+                                setOpened(true);
+                            }
+                        }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 60}}
+                        )
+                        , searchable && opened &&
+                            React$1.createElement('input', { type: "text", value: qryStr, onChange: (e)=>{filterList(e.target.value);}, className: `dropdown-field search-field ${err ? 'error' : ''}`, onFocus: ()=>{setOpened(true);}, onBlur: ()=>{
+                                setTimeout(()=>{
+                                    setOpened(false);
+                                },200);
+                            }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 82}})
                         
-                        , React$1.createElement(DropdownField, { style: {borderColor:passedOption.value ? theme.colors["success-500"] : theme.colors["neutral-200"]}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 56}}
-                            , React$1.createElement('button', { ref: buttonRef, type: "button", className: `dropdown-field ${err ? 'error' : ''}`, onBlur: ()=>{
-                                if (!searchable){
-                                    setTimeout(()=>{
-                                        setOpened(false);
-                                    },200);
-                                }
-                            }, onMouseUp: ()=>{
-                                if (opened){
-                                    setTimeout(()=>{
-                                        setOpened(false);
-                                    },100);
-                                }else {
-                                    setOpened(true);
-                                }
-                            }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 57}}
-                            )
-                            , searchable && opened &&
-                                React$1.createElement('input', { type: "text", value: qryStr, onChange: (e)=>{filterList(e.target.value);}, className: `dropdown-field search-field ${err ? 'error' : ''}`, onFocus: ()=>{setOpened(true);}, onBlur: ()=>{
-                                    setTimeout(()=>{
-                                        setOpened(false);
-                                    },200);
-                                }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 74}})
-                            
-                            , React$1.createElement('div', { style: {overflowX:'hidden'}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 80}}
-                                /*<span className="paragraph2Regular">{initialText}</span>*/
-                                /*{!passedOption.label &&
-                                    <>*/
-                                       , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 84}}, initText)
-                                        , !initText &&
-                                            React$1.createElement(React$1.Fragment, null
-                                                , placeholder && React$1.createElement('span', { className: "paragraph2Regular placeholder" , __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 87}}, placeholder)
-                                            )
-                                        
-                                    /*</>
-                                }*/
-                            )
-                            , React$1.createElement(DropdownIcon, { className: `dropdown-icon ${opened ? 'expanded' : 'collapsed'}`, onMouseUp: ()=>{
-                                if (!opened){
-                                    buttonRef.current.focus();
-                                    setOpened(true);
-                                }
-                            }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 93}}
-                                , React$1.createElement('svg', { width: "12", height: "8", viewBox: "0 0 12 8"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 99}}
-                                    , React$1.createElement('path', { d: "M10.9999 1.17C10.8126 0.983753 10.5591 0.879211 10.2949 0.879211C10.0308 0.879211 9.77731 0.983753 9.58995 1.17L5.99995 4.71L2.45995 1.17C2.27259 0.983753 2.01913 0.879211 1.75495 0.879211C1.49076 0.879211 1.23731 0.983753 1.04995 1.17C0.95622 1.26297 0.881826 1.37357 0.831057 1.49543C0.780288 1.61729 0.75415 1.74799 0.75415 1.88C0.75415 2.01202 0.780288 2.14272 0.831057 2.26458C0.881826 2.38644 0.95622 2.49704 1.04995 2.59L5.28995 6.83C5.38291 6.92373 5.49351 6.99813 5.61537 7.04889C5.73723 7.09966 5.86794 7.1258 5.99995 7.1258C6.13196 7.1258 6.26267 7.09966 6.38453 7.04889C6.50638 6.99813 6.61699 6.92373 6.70995 6.83L10.9999 2.59C11.0937 2.49704 11.1681 2.38644 11.2188 2.26458C11.2696 2.14272 11.2957 2.01202 11.2957 1.88C11.2957 1.74799 11.2696 1.61729 11.2188 1.49543C11.1681 1.37357 11.0937 1.26297 10.9999 1.17Z"                                                                                     , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 100}})
-                                )
-                            )
-                            , opened &&
-                                React$1.createElement(React$1.Fragment, null
-                                    , options && options.length > 0 &&
-                                        React$1.createElement(OptionsList, {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 106}}
-                                            , optionsRec.map((option, index) => (
-                                                React$1.createElement(DropdownOption, { key: index, onClick: ()=>{
-                                                    // setPassedOption(option)
-                                                    setInitText(option.label);
-                                                    returnedSelection(option);
-                                                }, onMouseDown: ()=>{
-                                                    setTimeout(()=>{
-                                                        setPassedOption(option);
-                                                        returnedSelection(option);
-                                                    },200);
-                                                }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 108}}, React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 117}}, option.label))
-                                            ))
+                        , React$1.createElement('div', { style: {overflowX:'hidden'}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 88}}
+                            /*<span className="paragraph2Regular">{initialText}</span>*/
+                            /*{!passedOption.label &&
+                                <>*/
+                                   , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 92}}, initText)
+                                    , !initText &&
+                                        React$1.createElement(React$1.Fragment, null
+                                            , placeholder && React$1.createElement('span', { className: "paragraph2Regular placeholder" , __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 95}}, placeholder)
                                         )
                                     
-                                )
-                            
+                                /*</>
+                            }*/
                         )
-                    )
-                
-                , disabled &&
-                    React$1.createElement(DisabledContainer, {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 127}}
-                        , initText
-                        , 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$I, lineNumber: 129}}
-                            , React$1.createElement('path', { d: "M16.9999 9.16994C16.8126 8.98369 16.5591 8.87915 16.2949 8.87915C16.0308 8.87915 15.7773 8.98369 15.5899 9.16994L11.9999 12.7099L8.45995 9.16994C8.27259 8.98369 8.01913 8.87915 7.75495 8.87915C7.49076 8.87915 7.23731 8.98369 7.04995 9.16994C6.95622 9.26291 6.88183 9.37351 6.83106 9.49537C6.78029 9.61723 6.75415 9.74793 6.75415 9.87994C6.75415 10.012 6.78029 10.1427 6.83106 10.2645C6.88183 10.3864 6.95622 10.497 7.04995 10.5899L11.2899 14.8299C11.3829 14.9237 11.4935 14.9981 11.6154 15.0488C11.7372 15.0996 11.8679 15.1257 11.9999 15.1257C12.132 15.1257 12.2627 15.0996 12.3845 15.0488C12.5064 14.9981 12.617 14.9237 12.7099 14.8299L16.9999 10.5899C17.0937 10.497 17.1681 10.3864 17.2188 10.2645C17.2696 10.1427 17.2957 10.012 17.2957 9.87994C17.2957 9.74793 17.2696 9.61723 17.2188 9.49537C17.1681 9.37351 17.0937 9.26291 16.9999 9.16994Z"                                                                                     , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 130}})
+                        , React$1.createElement(DropdownIcon, { className: `dropdown-icon ${opened ? 'expanded' : 'collapsed'}`, onMouseUp: ()=>{
+                            if (!opened){
+                                buttonRef.current.focus();
+                                setOpened(true);
+                            }
+                        }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 101}}
+                            , React$1.createElement('svg', { width: "12", height: "8", viewBox: "0 0 12 8"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 107}}
+                                , React$1.createElement('path', { d: "M10.9999 1.17C10.8126 0.983753 10.5591 0.879211 10.2949 0.879211C10.0308 0.879211 9.77731 0.983753 9.58995 1.17L5.99995 4.71L2.45995 1.17C2.27259 0.983753 2.01913 0.879211 1.75495 0.879211C1.49076 0.879211 1.23731 0.983753 1.04995 1.17C0.95622 1.26297 0.881826 1.37357 0.831057 1.49543C0.780288 1.61729 0.75415 1.74799 0.75415 1.88C0.75415 2.01202 0.780288 2.14272 0.831057 2.26458C0.881826 2.38644 0.95622 2.49704 1.04995 2.59L5.28995 6.83C5.38291 6.92373 5.49351 6.99813 5.61537 7.04889C5.73723 7.09966 5.86794 7.1258 5.99995 7.1258C6.13196 7.1258 6.26267 7.09966 6.38453 7.04889C6.50638 6.99813 6.61699 6.92373 6.70995 6.83L10.9999 2.59C11.0937 2.49704 11.1681 2.38644 11.2188 2.26458C11.2696 2.14272 11.2957 2.01202 11.2957 1.88C11.2957 1.74799 11.2696 1.61729 11.2188 1.49543C11.1681 1.37357 11.0937 1.26297 10.9999 1.17Z"                                                                                     , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 108}})
+                            )
                         )
-                    )
-                
-            )
+                        , opened &&
+                            React$1.createElement(React$1.Fragment, null
+                                , options && options.length > 0 &&
+                                    React$1.createElement(OptionsList, {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 114}}
+                                        , optionsRec.map((option, index) => (
+                                            React$1.createElement(DropdownOption, { key: index, onClick: ()=>{
+                                                // setPassedOption(option)
+                                                setInitText(option.label);
+                                                setSrVal(option.value);
+                                                returnedSelection(option);
+                                            }, onMouseDown: ()=>{
+                                                setTimeout(()=>{
+                                                    // setPassedOption(option)
+                                                    setInitText(option.label);
+                                                    returnedSelection(option);
+                                                },200);
+                                                setSrVal(option.value);
+                                            }, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 116}}, React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 128}}, option.label))
+                                        ))
+                                    )
+                                
+                            )
+                        
+                    )
+                    , selStatus === 'error' &&
+                        React$1.createElement('div', { className: "err-msg", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 136}}
+                            , React$1.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 137}}
+                                , React$1.createElement('g', { clipPath: "url(#clip0_299_2778)", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 138}}
+                                    , React$1.createElement('path', { d: "M8.00006 10.6667C7.86821 10.6667 7.73931 10.7058 7.62968 10.779C7.52005 10.8523 7.4346 10.9564 7.38414 11.0782C7.33368 11.2 7.32048 11.3341 7.3462 11.4634C7.37193 11.5927 7.43542 11.7115 7.52866 11.8048C7.62189 11.898 7.74068 11.9615 7.87 11.9872C7.99932 12.0129 8.13336 11.9997 8.25518 11.9493C8.377 11.8988 8.48112 11.8134 8.55437 11.7037C8.62763 11.5941 8.66673 11.4652 8.66673 11.3334C8.66673 11.1565 8.59649 10.987 8.47146 10.8619C8.34644 10.7369 8.17687 10.6667 8.00006 10.6667ZM15.1134 11.6467L9.74673 2.31335C9.57326 2.00236 9.31992 1.74332 9.01285 1.563C8.70579 1.38267 8.35615 1.2876 8.00006 1.2876C7.64396 1.2876 7.29433 1.38267 6.98726 1.563C6.6802 1.74332 6.42686 2.00236 6.25339 2.31335L0.92006 11.6467C0.74059 11.9494 0.644155 12.294 0.640489 12.6459C0.636824 12.9978 0.726058 13.3444 0.899184 13.6507C1.07231 13.9571 1.3232 14.2123 1.62652 14.3907C1.92984 14.5691 2.27485 14.6643 2.62673 14.6667H13.3734C13.7281 14.6702 14.0773 14.5793 14.3853 14.4033C14.6933 14.2273 14.949 13.9726 15.126 13.6652C15.3031 13.3579 15.3953 13.009 15.3931 12.6542C15.3908 12.2995 15.2943 11.9518 15.1134 11.6467ZM13.9601 12.98C13.9016 13.084 13.8164 13.1704 13.7132 13.2302C13.61 13.29 13.4927 13.321 13.3734 13.32H2.62673C2.50747 13.321 2.39013 13.29 2.28694 13.2302C2.18375 13.1704 2.0985 13.084 2.04006 12.98C1.98155 12.8787 1.95074 12.7637 1.95074 12.6467C1.95074 12.5297 1.98155 12.4147 2.04006 12.3134L7.37339 2.98002C7.42934 2.87082 7.51433 2.77917 7.61902 2.71518C7.72371 2.65119 7.84403 2.61733 7.96673 2.61733C8.08942 2.61733 8.20974 2.65119 8.31443 2.71518C8.41912 2.77917 8.50411 2.87082 8.56006 2.98002L13.9267 12.3134C13.9929 12.4132 14.0309 12.5291 14.0367 12.6488C14.0426 12.7684 14.0161 12.8875 13.9601 12.9934V12.98ZM8.00006 5.33335C7.82325 5.33335 7.65368 5.40359 7.52866 5.52861C7.40363 5.65364 7.33339 5.82321 7.33339 6.00002V8.66669C7.33339 8.8435 7.40363 9.01307 7.52866 9.13809C7.65368 9.26311 7.82325 9.33335 8.00006 9.33335C8.17687 9.33335 8.34644 9.26311 8.47146 9.13809C8.59649 9.01307 8.66673 8.8435 8.66673 8.66669V6.00002C8.66673 5.82321 8.59649 5.65364 8.47146 5.52861C8.34644 5.40359 8.17687 5.33335 8.00006 5.33335Z"                                                                                                                                                                                                                          , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 139}})
+                                )
+                                , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 141}}
+                                    , React$1.createElement('clipPath', { id: "clip0_299_2778", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 142}}
+                                        , React$1.createElement('rect', { width: "16", height: "16", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 143}})
+                                    )
+                                )
+                            )
+                            , React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 147}}, "This field is required"   )
+                        )
+                    
+                )
+            
+            , disabled &&
+                React$1.createElement(DisabledContainer, {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 153}}
+                    , initText
+                    , 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$I, lineNumber: 155}}
+                        , React$1.createElement('path', { d: "M16.9999 9.16994C16.8126 8.98369 16.5591 8.87915 16.2949 8.87915C16.0308 8.87915 15.7773 8.98369 15.5899 9.16994L11.9999 12.7099L8.45995 9.16994C8.27259 8.98369 8.01913 8.87915 7.75495 8.87915C7.49076 8.87915 7.23731 8.98369 7.04995 9.16994C6.95622 9.26291 6.88183 9.37351 6.83106 9.49537C6.78029 9.61723 6.75415 9.74793 6.75415 9.87994C6.75415 10.012 6.78029 10.1427 6.83106 10.2645C6.88183 10.3864 6.95622 10.497 7.04995 10.5899L11.2899 14.8299C11.3829 14.9237 11.4935 14.9981 11.6154 15.0488C11.7372 15.0996 11.8679 15.1257 11.9999 15.1257C12.132 15.1257 12.2627 15.0996 12.3845 15.0488C12.5064 14.9981 12.617 14.9237 12.7099 14.8299L16.9999 10.5899C17.0937 10.497 17.1681 10.3864 17.2188 10.2645C17.2696 10.1427 17.2957 10.012 17.2957 9.87994C17.2957 9.74793 17.2696 9.61723 17.2188 9.49537C17.1681 9.37351 17.0937 9.26291 16.9999 9.16994Z"                                                                                     , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 156}})
+                    )
+                )
+            
+        )
     )
 };
 
@@ -20675,7 +20726,7 @@ const NewsTitleBar = (props) => {
   )
 };
 
-const InputLabel$2 = styled.div`
+const InputLabel$3 = styled.div`
   display: flex;
   gap: 4px;
   flex-direction: column;
@@ -20799,7 +20850,7 @@ const PasswordField = (props) => {
     return (
         React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 39}}
             , label &&
-                React$1.createElement(InputLabel$2, {__self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 41}}
+                React$1.createElement(InputLabel$3, {__self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 41}}
                     , React$1.createElement('label', { className: disabled ? 'disabled' : '', __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 42}}, label)
                     , React$1.createElement('span', { className: disabled ? 'disabled' : '', __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 43}}, subtext)
                 )
@@ -20808,7 +20859,7 @@ const PasswordField = (props) => {
                 , React$1.createElement(InputField$1, { type: !showPw ? 'password' : 'text', value: passString, onChange: (e)=>{
                     // setValue(e.target.value)
                     setPassString(e.target.value);
-                }, onBlur: ()=>{validate();}, disabled: disabled, ...props, required: true, placeholder: placeholder, __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 47}})
+                }, onBlur: ()=>{validate();}, disabled: disabled, ...props, required: true, placeholder: placeholder, onInvalid: validate, __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 47}})
                 , React$1.createElement(ToggleButton, { type: "button", onClick: ()=>{setShowPw(!showPw);}, __self: undefined, __source: {fileName: _jsxFileName$s, lineNumber: 51}}
                     , !showPw ?
                         //eye
@@ -21589,7 +21640,7 @@ const FormField = styled.div`
   }
 `;
 
-const InputLabel$1 = styled.div`
+const InputLabel$2 = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -21605,6 +21656,12 @@ const InputLabel$1 = styled.div`
     font-weight: 400;
   }
 `;
+
+styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
 const InputField  = styled.input`
   border: none;
   left: 0;
@@ -21707,13 +21764,13 @@ const TextField = (props) => {
     return (
         React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 41}}
             , label &&
-                React$1.createElement(InputLabel$1, {__self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 43}}
+                React$1.createElement(InputLabel$2, {__self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 43}}
                     , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 44}}, label)
                     , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 45}}, subtext)
                 )
             
             , React$1.createElement(InputContainer$1, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%',border:disabled ? `1px solid ${theme.colors["neutral-100"]}` : ''}, __self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 48}}
-                , React$1.createElement(InputField, { ref: textFieldRef, onBlur: ()=>{validate();}, value: inputVal, onChange: (e)=>{setInputVal(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 49}})
+                , React$1.createElement(InputField, { ref: textFieldRef, onBlur: validate, onInvalid: validate, value: inputVal, onChange: (e)=>{setInputVal(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 49}})
             )
             , !value && required && err &&
                 React$1.createElement(ErrorMessage$1, {__self: undefined, __source: {fileName: _jsxFileName$m, lineNumber: 52}}
@@ -21813,6 +21870,20 @@ const RequestForm = (props) => {
     )
 };
 
+const RibbonGroup = styled.div`
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  gap: 16px;
+  align-items: center;
+  a.logo-link{
+    width: max-content;
+  }
+  img{
+    width: 50px;
+    
+  }
+`;
+
 const RibbonContainer = styled.div`
   border: 1px solid ${theme.colors["primary-500"]};
   border-radius: 100px;
@@ -21820,6 +21891,9 @@ const RibbonContainer = styled.div`
   overflow: hidden;
   //max-width: 784px;
   width: fit-content;
+  display: flex;
+  align-items: center;
+  height: 49px;
 `;
 const RibbonItem = styled.a`
   display: inline-block;
@@ -21828,6 +21902,7 @@ const RibbonItem = styled.a`
   font-weight: 400;
   font-size: 14px;
   line-height: 17px;
+  text-wrap: nowrap;
   &.dark{
     background: ${theme.colors["neutral-900"]};
     color: ${theme.colors.white};
@@ -21854,16 +21929,21 @@ const Ribbon = (props) => {
     const {links,bgColor,openInNewTab,currentPageItem,navigationOverride} = props;
 
     return (
-        React$1.createElement(React$1.Fragment, null
+        React$1.createElement(RibbonGroup, {__self: undefined, __source: {fileName: _jsxFileName$k, lineNumber: 12}}
+            , React$1.createElement('a', { href: "/", className: "logo-link", __self: undefined, __source: {fileName: _jsxFileName$k, lineNumber: 13}}
+                , React$1.createElement('img', {
+                    src: "https://res.cloudinary.com/dxivfczqg/image/upload/w_50/v1680257873/dashboard-logo-no-name-dark_vrkbad.svg",
+                    alt: "SSX Logo" , __self: undefined, __source: {fileName: _jsxFileName$k, lineNumber: 14}})
+            )
             , links && links.length > 0 &&
-                React$1.createElement(RibbonContainer, {__self: undefined, __source: {fileName: _jsxFileName$k, lineNumber: 14}}
+                React$1.createElement(RibbonContainer, {__self: undefined, __source: {fileName: _jsxFileName$k, lineNumber: 19}}
                     , links.map((link,index) => (
                         React$1.createElement(RibbonItem, { key: index, href: link.url, target: openInNewTab ? '_blank' : '_self', className: `${bgColor} ${currentPageItem && currentPageItem === link.label ? 'current' : ''}`, onClick: (e)=>{
                             if (navigationOverride) {
                                 e.preventDefault();
                                 navigationOverride(link);
                             }
-                        }, __self: undefined, __source: {fileName: _jsxFileName$k, lineNumber: 16}}, link.label)
+                        }, __self: undefined, __source: {fileName: _jsxFileName$k, lineNumber: 21}}, link.label)
                     ))
                 )
             
@@ -23170,7 +23250,7 @@ const Table$3 = (props) => {
   );
 };
 
-const InputLabel = styled.div`
+const InputLabel$1 = styled.div`
   display: flex;
   gap: 4px;
   flex-direction: column;
@@ -23281,13 +23361,13 @@ const TextArea = (props) => {
     return (
         React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 41}}
             , label &&
-                React$1.createElement(InputLabel, {__self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 43}}
+                React$1.createElement(InputLabel$1, {__self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 43}}
                     , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 44}}, label)
                     , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 45}}, subtext)
                 )
             
             , React$1.createElement(InputContainer, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%',border:disabled ? `1px solid ${theme.colors["neutral-100"]}` : ''}, __self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 48}}
-                , React$1.createElement(TextAreaField, { ref: textFieldRef, onBlur: ()=>{validate();}, value: inputVal, onChange: (e)=>{setInputVal(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 49}})
+                , React$1.createElement(TextAreaField, { ref: textFieldRef, onBlur: validate, value: inputVal, onChange: (e)=>{setInputVal(e.target.value);}, onInvalid: validate, ...props, __self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 49}})
             )
             , !value && required && err &&
                 React$1.createElement(ErrorMessage, {__self: undefined, __source: {fileName: _jsxFileName$c, lineNumber: 52}}
@@ -24898,27 +24978,67 @@ const TableAlternative = React$1.forwardRef((props, ref) => {
     )
 });
 
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const FieldContainer = styled.div`
+  display:flex;
+  flex-direction: column;
+  gap:8px;
+`;
+
+const InputLabel = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  label{
+    color:${theme.colors["primary-900"]};
+    font-weight: 500;
+    font-family: "Circular Book Medium", sans-serif;
+  }
+`;
+
+const SrInput = styled.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  &:focus,&:focus-visible{
+    border: none;
+    outline: none;
+  }
+`;
+
 const SelectorContainer = styled.div`
   //width: 430px;
   border-radius: 8px;
   outline: 1px solid ${theme.colors["neutral-100"]};
   background: ${theme.colors.white};
-  display: flex;
+  display: grid;
   justify-content: space-between;
   align-items: center;
+  grid-template-columns: 1fr 0fr;
   padding: 16px;
   transition: 0.3s;
   cursor: pointer;
+  &:hover{
+    outline-color: ${theme.colors["primary-500"]};
+    background: ${theme.colors["primary-50"]};
+  }
   .text{
     margin: 0;
+    width: 100%;
   }
   &.selected{
-    outline-color: ${theme.colors["primary-500"]};
-    background: ${theme.colors["primary-50"]};
-  }
-  :hover{
-    outline-color: ${theme.colors["primary-500"]};
-    background: ${theme.colors["primary-50"]};
+    outline-color: ${theme.colors["primary-500"]} !important;
+    background: ${theme.colors["primary-50"]} !important;
   }
   svg{
     height: 24px;
@@ -24931,29 +25051,72 @@ const _jsxFileName = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\componen
  * Component for making selections. Usage could be in an onboarding process
  */
 const Selector = (props) => {
-    const {itemsList,selectedItem,width} = props;
-    const [selItem,setSelItem] = React$1.useState('');
+    const {itemsList,selectedItem,width,multiSelect,required,label,subText,errMsg} = props;
+    const [selOptions,setSelOptions] = React$1.useState([]);
+    const [selStatus,setSelStatus] = React$1.useState('');
+    const [srVal,setSrVal] = React$1.useState('');
+
+    function handleSelect(selection){
+        setSelStatus('');
+        let temp = [...selOptions];
+
+        const filt = temp.some((option) => option.label === selection.label);
+
+        if (multiSelect){
+            if (!filt){
+                setSelOptions([...selOptions,selection]);
+                selectedItem([...selOptions,selection]);
+                setSrVal(selection.label); //shows that at least one option is selected
+            }else {
+                const temp2 = temp.filter((option) => option.label !== selection.label);
+                setSelOptions(temp2);
+                selectedItem(temp2);
+                setSrVal(''); //shows that at least one option is selected
+            }
+        }else {
+            selectedItem(!filt ? selection : null);
+            setSrVal(!filt ? selection.label : '');
+            setSelOptions(!filt ? [selection] : []);
+        }
+    }
 
     return (
-        React$1.createElement('div', { style: {display:"flex",flexDirection:'column',gap:8,width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 14}}
-            , itemsList.map((item,index) => (
-                React$1.createElement(SelectorContainer, { key: index, className: item.label === selItem ? 'selected' : '', onClick: () => {
-                    if(selItem === item.label){
-                        setSelItem('');
-                        selectedItem(null);
-                    }else {
-                        setSelItem(item.label);
-                        selectedItem(item);
-                    }
-                }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 16}}
-                    , React$1.createElement('p', { className: "text", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 25}}, item.label)
-                    , React$1.createElement('svg', { width: "25", height: "22", viewBox: "0 0 16 12"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}}
-                        , React$1.createElement('path', { d: "M14.71 1.21C14.617 1.11627 14.5064 1.04188 14.3846 0.991107C14.2627 0.940338 14.132 0.9142 14 0.9142C13.868 0.9142 13.7373 0.940338 13.6154 0.991107C13.4936 1.04188 13.383 1.11627 13.29 1.21L5.84001 8.67L2.71001 5.53C2.61349 5.43676 2.49955 5.36345 2.37469 5.31424C2.24984 5.26504 2.11651 5.24091 1.98233 5.24323C1.84815 5.24555 1.71574 5.27428 1.59266 5.32777C1.46959 5.38126 1.35825 5.45848 1.26501 5.555C1.17177 5.65152 1.09846 5.76546 1.04925 5.89032C1.00005 6.01517 0.97592 6.1485 0.978241 6.28268C0.980563 6.41686 1.00929 6.54927 1.06278 6.67234C1.11628 6.79542 1.19349 6.90676 1.29001 7L5.13001 10.84C5.22297 10.9337 5.33358 11.0081 5.45543 11.0589C5.57729 11.1097 5.708 11.1358 5.84001 11.1358C5.97202 11.1358 6.10273 11.1097 6.22459 11.0589C6.34645 11.0081 6.45705 10.9337 6.55001 10.84L14.71 2.68C14.8115 2.58636 14.8925 2.4727 14.9479 2.3462C15.0033 2.21971 15.0319 2.0831 15.0319 1.945C15.0319 1.8069 15.0033 1.67029 14.9479 1.54379C14.8925 1.41729 14.8115 1.30364 14.71 1.21V1.21Z"                                                                                                         ,
-                            fill: item.label === selItem ? theme.colors["primary-500"] : theme.colors["neutral-400"], __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}})
+        React$1.createElement(MainContainer, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 41}}
+            , label &&
+                React$1.createElement(InputLabel, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 43}}
+                    , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 44}}, label)
+                    , subText && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 45}}, subText)
+                )
+            
+            , React$1.createElement(FieldContainer, { style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}}
+
+                , itemsList.map((item,index) => (
+                    React$1.createElement(SelectorContainer, { key: index, className: selOptions.some((option) => (option.label === item.label)) ? 'selected' : '', onClick: () => {
+                        handleSelect(item);
+                    }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 51}}
+                        , React$1.createElement('p', { className: "text paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 54}}, item.label)
+                        , React$1.createElement('svg', { width: "25", height: "22", viewBox: "0 0 16 12"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 55}}
+                            , React$1.createElement('path', { d: "M14.71 1.21C14.617 1.11627 14.5064 1.04188 14.3846 0.991107C14.2627 0.940338 14.132 0.9142 14 0.9142C13.868 0.9142 13.7373 0.940338 13.6154 0.991107C13.4936 1.04188 13.383 1.11627 13.29 1.21L5.84001 8.67L2.71001 5.53C2.61349 5.43676 2.49955 5.36345 2.37469 5.31424C2.24984 5.26504 2.11651 5.24091 1.98233 5.24323C1.84815 5.24555 1.71574 5.27428 1.59266 5.32777C1.46959 5.38126 1.35825 5.45848 1.26501 5.555C1.17177 5.65152 1.09846 5.76546 1.04925 5.89032C1.00005 6.01517 0.97592 6.1485 0.978241 6.28268C0.980563 6.41686 1.00929 6.54927 1.06278 6.67234C1.11628 6.79542 1.19349 6.90676 1.29001 7L5.13001 10.84C5.22297 10.9337 5.33358 11.0081 5.45543 11.0589C5.57729 11.1097 5.708 11.1358 5.84001 11.1358C5.97202 11.1358 6.10273 11.1097 6.22459 11.0589C6.34645 11.0081 6.45705 10.9337 6.55001 10.84L14.71 2.68C14.8115 2.58636 14.8925 2.4727 14.9479 2.3462C15.0033 2.21971 15.0319 2.0831 15.0319 1.945C15.0319 1.8069 15.0033 1.67029 14.9479 1.54379C14.8925 1.41729 14.8115 1.30364 14.71 1.21V1.21Z"                                                                                                         ,
+                                  fill: selOptions.some((option) => (option.label === item.label)) ? theme.colors["primary-500"] : theme.colors["neutral-400"], __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 56}})
+                        )
+                    )
+                ))
+            )
+            , React$1.createElement(SrInput, { className: "sr-only", value: srVal, required: required, onInvalid: (e)=>{
+            setSelStatus('error');
+            e.target.setCustomValidity('This field is required');
+        }, onChange: ()=>{}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 62}})
+            , selStatus === 'error' &&
+                React$1.createElement(ErrorMessage$1, {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 67}}
+                    /*exclamation-triangle*/
+                    , React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 69}}
+                        , React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z"                                                                                                                                                                                                                          , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 70}})
                     )
+                    , errMsg ? errMsg : 'Select an option'
                 )
-            ))
+            
         )
+
     )
 };