@secondstaxorg/sscomp 1.5.2 → 1.5.4

package/dist/index.js

@@ -95,7 +95,7 @@ const ButtonComp = styled.button`
   color:${theme.colors["neutral-900"]};
   border-radius: 8px;
   border: none;
-  width: 100%;
+  width: fit-content;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -221,13 +221,7 @@ const _jsxFileName$10 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compo
  */
 const Button$1 = (props) => {
     const {variant, size, disabled,children} = props;
-        return (
-            React$1.createElement(React$1.Fragment, null
-                , React$1.createElement(ButtonComp, { className: `${variant} ${size}`, disabled: disabled, ...props, __self: undefined, __source: {fileName: _jsxFileName$10, lineNumber: 12}}
-                    , children
-                )
-            )
-        )
+        return React$1.createElement(ButtonComp, { className: `${variant} ${size}`, disabled: disabled, ...props, __self: undefined, __source: {fileName: _jsxFileName$10, lineNumber: 10}}, children)
 };
 
 const Container$b = styled.div`
@@ -1354,7 +1348,7 @@ const OutlineButtonComp = styled.button`
   border-radius: 8px;
   border: 1px solid;
   text-transform: capitalize;
-  width: 100%;
+  width: fit-content;
   cursor: pointer;
   display:flex;
   justify-content:center;
@@ -17001,7 +16995,7 @@ const DatePickerContainer = styled.div`
 
 const InputField$3 = styled.div`
   border: 1px solid ${theme.colors["neutral-200"]};
-  width: 100%;
+  //width: 430px;
   display: flex;
   border-radius: 8px;
   background: #ffffff;
@@ -17167,7 +17161,7 @@ const _jsxFileName$I = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  * Component for picking date
  */
 const DatePicker = (props) => {
-    const { onChange, label, subtext,disablePastDays,disableFutureDays ,placeholder} = props;
+    const { onChange, label, subtext,disablePastDays,disableFutureDays ,placeholder,width} = props;
     const [selectedDate, setSelectedDate] = React$1.useState(null);
     const [isCalendarOpen, setIsCalendarOpen] = React$1.useState(false);
 
@@ -17204,7 +17198,7 @@ const DatePicker = (props) => {
                     , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 43}}, subtext)
                 )
             
-            , React$1.createElement(DatePickerContainer, { ref: calendarRef, className: selectedDate ? 'success' : '', __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 46}}
+            , React$1.createElement(DatePickerContainer, { ref: calendarRef, className: selectedDate ? 'success' : '', style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 46}}
                 , React$1.createElement(InputField$3, { className: `${selectedDate ? 'success' : ''} ${isCalendarOpen ? 'focused' : ''}`, __self: undefined, __source: {fileName: _jsxFileName$I, lineNumber: 47}}
                     , React$1.createElement('input', {
                         type: "text",
@@ -17471,6 +17465,7 @@ const InputLabel$3 = styled.div`
 `;
 
 const InputField$2 = styled.div`
+  //width: 430px;
   border: 1px solid ${theme.colors["neutral-200"]};
   border-radius: 8px;
   background: #ffffff;
@@ -17722,7 +17717,7 @@ const _jsxFileName$H = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
 /**
  * Component for picking date ranges
  */
-const DateRangePicker = ({ selectedDateRange,label,subtext ,placeholder,showActionButtons}) => {
+const DateRangePicker = ({ selectedDateRange,label,subtext ,placeholder,showActionButtons,width}) => {
     const [startMonth, setStartMonth] = React$1.useState(new Date());
     const [endMonth, setEndMonth] = React$1.useState(() => {
         const nextMonth = new Date();
@@ -17988,7 +17983,7 @@ const DateRangePicker = ({ selectedDateRange,label,subtext ,placeholder,showActi
                         , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$H, lineNumber: 275}}, subtext)
                     )
                 
-                , React$1.createElement(InputField$2, { className: `${showCalendar ? 'focused' : ''} ${startDate && endDate ? 'success' : ''}`, __self: undefined, __source: {fileName: _jsxFileName$H, lineNumber: 278}}
+                , React$1.createElement(InputField$2, { className: `${showCalendar ? 'focused' : ''} ${startDate && endDate ? 'success' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$H, lineNumber: 278}}
                     , React$1.createElement('input', {
                         type: "text",
                         value: startDate ? `${startDate.toLocaleDateString('en-GB',options)} - ${endDate ? endDate.toLocaleDateString('en-GB',options) : ''}` : '',
@@ -18124,7 +18119,7 @@ const FieldContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
-  width: 100%;
+  //width: 430px;
 `;
 
 const LabelContainer = styled.div`
@@ -18273,7 +18268,7 @@ const _jsxFileName$F = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  * Dropdown component for selecting from a list of options
  */
 const DropdownList = (props) => {
-    const {options,returnedSelection,initialText,disabled,label,placeholder,searchable} = props;
+    const {options,returnedSelection,initialText,disabled,label,placeholder,searchable,width} = props;
     const [opened,setOpened] = React$1.useState(false);
     const [passedOption,setPassedOption] = React$1.useState({});
     const [err,setErr] = React$1.useState(false);
@@ -18306,7 +18301,7 @@ const DropdownList = (props) => {
     }
 
     return (
-            React$1.createElement(FieldContainer, {__self: undefined, __source: {fileName: _jsxFileName$F, lineNumber: 43}}
+            React$1.createElement(FieldContainer, { style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$F, lineNumber: 43}}
                 , !disabled &&
                     React$1.createElement(React$1.Fragment, null
                         , label &&
@@ -18396,6 +18391,7 @@ const DropdownList = (props) => {
 };
 
 const RateContainer$1 = styled.div`
+  width: 420px;
   padding: 16px;
   border-radius: 8px;
   background: ${theme.colors.white};
@@ -18558,6 +18554,7 @@ const IndicesContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 420px;
 `;
 
 const IndicesItem = styled.div`
@@ -18894,7 +18891,7 @@ const LPRequestTable = (props) => {
                     , React$1.createElement('th', {__self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 68}}, "Provider")
                     , showBroker && React$1.createElement('th', {__self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 69}}, "Broker")
                     , React$1.createElement('th', {__self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 70}}, "Client ID" )
-                    , React$1.createElement('th', {__self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 71}}, "Transaction Amount" )
+                    , React$1.createElement('th', { style: {minWidth:400}, __self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 71}}, "Transaction Amount" )
                     , React$1.createElement('th', {__self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 72}}, "Transaction ID" )
                     , React$1.createElement('th', {__self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 73}}, "Status")
                     , React$1.createElement('th', {__self: undefined, __source: {fileName: _jsxFileName$A, lineNumber: 74}}, "Date")
@@ -19793,6 +19790,7 @@ const MarketdataWidgetContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 420px;
 `;
 
 const MarketDataItemContainer = styled.div`
@@ -19904,6 +19902,10 @@ const MarketData = (props) => {
     )
 };
 
+const WidgetContainer = styled.div`
+  width: 420px;
+`;
+
 const MarketMoversWidget = styled.div`
   display: flex;
   flex-direction: column;
@@ -20168,7 +20170,7 @@ const MarketMovers = (props) => {
     ];
 
     return (
-        React$1.createElement(React$1.Fragment, null
+        React$1.createElement(WidgetContainer, {__self: undefined, __source: {fileName: _jsxFileName$v, lineNumber: 112}}
             , React$1.createElement(Tab, { tabs: tabs, __self: undefined, __source: {fileName: _jsxFileName$v, lineNumber: 113}})
             , lastUpdated && React$1.createElement(LastUpdated, {__self: undefined, __source: {fileName: _jsxFileName$v, lineNumber: 114}}, "Last updated on "   , lastUpdated)
         )
@@ -20485,7 +20487,7 @@ const InputField$1  = styled.input`
 
 const InputContainer$2 = styled.div`
   height: 50px;
-  width: 100%;
+  //width: 430px;
   border-radius: 8px;
   border: 1px solid ${theme.colors["neutral-200"]};
   display: flex;
@@ -20536,7 +20538,7 @@ const _jsxFileName$p = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  * Component for handling password input fields
  */
 const PasswordField = (props) => {
-    const {label,subtext,disabled,errMsg,placeholder} = props;
+    const {label,subtext,disabled,errMsg,placeholder,width} = props;
 
     const [passString,setPassString] = React$1.useState('');
     const [borderColor,setBorderColor] = React$1.useState('');
@@ -20572,7 +20574,7 @@ const PasswordField = (props) => {
                     , React$1.createElement('span', { className: disabled ? 'disabled' : '', __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 42}}, subtext)
                 )
             
-            , React$1.createElement(InputContainer$2, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 45}}
+            , React$1.createElement(InputContainer$2, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 45}}
                 , React$1.createElement(InputField$1, { type: !showPw ? 'password' : 'text', value: passString, onChange: (e)=>{
                     // setValue(e.target.value)
                     setPassString(e.target.value);
@@ -20589,14 +20591,13 @@ const PasswordField = (props) => {
                             , React$1.createElement('path', { d: "M9.94018 5.07994C10.2909 5.02617 10.6453 4.99943 11.0002 4.99994C14.1802 4.99994 17.1702 7.28994 18.9102 10.9999C18.6441 11.5645 18.3435 12.1122 18.0102 12.6399C17.9044 12.8038 17.8487 12.9949 17.8502 13.1899C17.8524 13.4082 17.926 13.6197 18.0596 13.7922C18.1933 13.9647 18.3798 14.0888 18.5905 14.1455C18.8013 14.2021 19.0248 14.1883 19.227 14.106C19.4291 14.0238 19.5988 13.8776 19.7102 13.6899C20.1761 12.9579 20.5808 12.1886 20.9202 11.3899C20.9738 11.2652 21.0015 11.1308 21.0015 10.9949C21.0015 10.8591 20.9738 10.7247 20.9202 10.5999C18.9002 5.90994 15.1002 2.99994 11.0002 2.99994C10.5309 2.99758 10.0623 3.03774 9.60019 3.11994C9.46886 3.14227 9.34322 3.19024 9.23044 3.26112C9.11766 3.332 9.01994 3.4244 8.94287 3.53304C8.8658 3.64169 8.81088 3.76445 8.78125 3.89432C8.75162 4.02419 8.74786 4.15862 8.77018 4.28994C8.79251 4.42126 8.84048 4.5469 8.91136 4.65968C8.98224 4.77247 9.07464 4.87018 9.18329 4.94726C9.29193 5.02433 9.41469 5.07925 9.54456 5.10888C9.67443 5.13851 9.80886 5.14227 9.94018 5.11994V5.07994ZM2.71019 1.28994C2.61695 1.1967 2.50626 1.12274 2.38443 1.07228C2.26261 1.02182 2.13204 0.99585 2.00019 0.99585C1.86833 0.99585 1.73776 1.02182 1.61594 1.07228C1.49411 1.12274 1.38342 1.1967 1.29019 1.28994C1.10188 1.47824 0.996094 1.73364 0.996094 1.99994C0.996094 2.26624 1.10188 2.52164 1.29019 2.70994L4.39019 5.79994C2.97576 7.16147 1.85004 8.79393 1.08019 10.5999C1.02512 10.7261 0.996701 10.8623 0.996701 10.9999C0.996701 11.1376 1.02512 11.2738 1.08019 11.3999C3.10019 16.0899 6.90019 18.9999 11.0002 18.9999C12.7973 18.9875 14.552 18.4524 16.0502 17.4599L19.2902 20.7099C19.3831 20.8037 19.4937 20.8781 19.6156 20.9288C19.7375 20.9796 19.8682 21.0057 20.0002 21.0057C20.1322 21.0057 20.2629 20.9796 20.3848 20.9288C20.5066 20.8781 20.6172 20.8037 20.7102 20.7099C20.8039 20.617 20.8783 20.5064 20.9291 20.3845C20.9798 20.2627 21.006 20.132 21.006 19.9999C21.006 19.8679 20.9798 19.7372 20.9291 19.6154C20.8783 19.4935 20.8039 19.3829 20.7102 19.2899L2.71019 1.28994ZM9.07018 10.4799L11.5202 12.9299C11.3512 12.9784 11.176 13.002 11.0002 12.9999C10.4698 12.9999 9.96104 12.7892 9.58597 12.4142C9.2109 12.0391 9.00019 11.5304 9.00019 10.9999C8.99814 10.8241 9.02172 10.649 9.07018 10.4799ZM11.0002 16.9999C7.82018 16.9999 4.83019 14.7099 3.10019 10.9999C3.74627 9.57369 4.66326 8.28652 5.80019 7.20994L7.57019 8.99994C7.15443 9.75874 6.99592 10.6319 7.11844 11.4884C7.24096 12.3449 7.6379 13.1386 8.24971 13.7504C8.86152 14.3622 9.65522 14.7592 10.5117 14.8817C11.3682 15.0042 12.2414 14.8457 13.0002 14.4299L14.5902 15.9999C13.5013 16.6408 12.2636 16.9856 11.0002 16.9999Z"                                                                                                                                                                                                                                                                         , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 59}})
                         )
                     
-
                 )
             )
             , !passString && err &&
-                React$1.createElement(ErrorMessage$2, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 66}}
+                React$1.createElement(ErrorMessage$2, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 65}}
                     /*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$p, lineNumber: 68}}
-                        , 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$p, lineNumber: 69}})
+                    , 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$p, lineNumber: 67}}
+                        , 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$p, lineNumber: 68}})
                     )
                     , errMsg ? errMsg : 'This field is required'
                 )
@@ -21204,6 +21205,7 @@ const Container$5 = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 420px;
 `;
 
 const RateContainer = styled.div`
@@ -21405,7 +21407,7 @@ const InputField  = styled.input`
 const InputContainer$1 = styled.div`
   position: relative;
   height: 50px;
-  width: 100%;  
+  //width: 430px;
   border-radius: 8px;
   border: 1px solid ${theme.colors["neutral-200"]};
   display: flex;
@@ -21446,7 +21448,7 @@ const _jsxFileName$j = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  * Component to display an input field component in a form. This mimics the behavior of a regular HTML <code>&lt;input&gt;</code> element and accepts the same props as it along with the custom ones defined.
  */
 const TextField = (props) => {
-    let {label,subtext,errMsg,disabled,required,value} = props;
+    let {label,subtext,errMsg,disabled,required,value,width} = props;
 
     const [borderColor,setBorderColor] = React$1.useState('');
     const [err,setErr] = React$1.useState(false);
@@ -21478,7 +21480,7 @@ const TextField = (props) => {
                     , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$j, lineNumber: 38}}, subtext)
                 )
             
-            , React$1.createElement(InputContainer$1, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, __self: undefined, __source: {fileName: _jsxFileName$j, lineNumber: 41}}
+            , React$1.createElement(InputContainer$1, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$j, lineNumber: 41}}
                 , React$1.createElement(InputField, { ref: textFieldRef, onBlur: ()=>{validate();}, ...props, __self: undefined, __source: {fileName: _jsxFileName$j, lineNumber: 42}})
             )
             , !value && required && err &&
@@ -21636,6 +21638,7 @@ const SearchBarContainer = styled.div`
   display: flex;
   gap: 8px;
   justify-content: space-between;
+  width: 344px;
 `;
 
 const SearchBox = styled.input`
@@ -22921,7 +22924,7 @@ const TextAreaField  = styled.textarea`
 const InputContainer = styled.div`
   position: relative;
   height: auto;
-  width: 100%;  
+  //width: 430px;  
   border-radius: 8px;
   border: 1px solid ${theme.colors["neutral-200"]};
   display: flex;
@@ -22962,7 +22965,7 @@ const _jsxFileName$9 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
  * Component to display a textarea field in a form. This mimics the behavior of a regular HTML <code>&lt;textarea&gt;</code> element and accepts the same props as it along with the custom ones defined.
  */
 const TextArea = (props) => {
-    let {label,subtext,errMsg,disabled,required,value} = props;
+    let {label,subtext,errMsg,disabled,required,value,width} = props;
 
     const [borderColor,setBorderColor] = React$1.useState('');
     const [err,setErr] = React$1.useState(false);
@@ -22994,7 +22997,7 @@ const TextArea = (props) => {
                     , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$9, lineNumber: 38}}, subtext)
                 )
             
-            , React$1.createElement(InputContainer, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, __self: undefined, __source: {fileName: _jsxFileName$9, lineNumber: 41}}
+            , React$1.createElement(InputContainer, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$9, lineNumber: 41}}
                 , React$1.createElement(TextAreaField, { ref: textFieldRef, onBlur: ()=>{validate();}, ...props, __self: undefined, __source: {fileName: _jsxFileName$9, lineNumber: 42}})
             )
             , !value && required && err &&