sag_components 2.0.0-beta236 → 2.0.0-beta237

package/dist/index.d.ts

@@ -1284,7 +1284,7 @@ declare function ModalWithOverlay(props: any): react_jsx_runtime.JSX.Element;
 
 declare function DropdownNew(props: any): react_jsx_runtime.JSX.Element;
 
-declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, allowedWeekRange, restrictToRange, }: {
+declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, isDarkerBackground, allowedWeekRange, restrictToRange, }: {
     label: any;
     disabled: any;
     borderColor: any;
@@ -1300,6 +1300,7 @@ declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, t
     withMarginBottom?: boolean;
     onChange: any;
     selectedValue: any;
+    isDarkerBackground?: boolean;
     allowedWeekRange?: any;
     restrictToRange?: boolean;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.esm.js

@@ -24167,21 +24167,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24638,25 +24639,26 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35110,13 +35112,14 @@ const StyledInput$1 = styled.input`
   border-radius: ${props => props.borderRadius || '4px'};
   border: none;
   outline: none;
+  background-color: ${props => props.isDarkerBackground ? '#F2F2F2' : 'white'} !important;
   width: ${props => props.width || '90%'};
   height: ${props => props.height || 'auto'};
   transition: border-color 0.3s ease; 
   font-size: 14px;
   font-weight: 400;
   box-sizing: border-box;
-  color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
+  color: ${props => props.disabled ? '#D0D0D0' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
 const StyledLabel = styled.label`
@@ -35163,9 +35166,8 @@ const InputContainer$1 = styled.div`
   overflow: hidden; 
   width: 100%;
   height: 100%;    
-  box-sizing: border-box;
-  background-color: transparent;    
-  border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  box-sizing: border-box;  
+  border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
   font-weight: 400;
   font-size: 14px;
   border-radius: 12px;
@@ -35207,6 +35209,7 @@ const WeeksPicker = _ref => {
     withMarginBottom = true,
     onChange,
     selectedValue,
+    isDarkerBackground = false,
     // New props for range restriction
     allowedWeekRange = null,
     // { startWeek: number, endWeek: number } or null
@@ -35403,7 +35406,8 @@ const WeeksPicker = _ref => {
     placeholder: isFocused ? placeholder : "",
     disabled: disabled,
     borderColor: borderColor,
-    textColor: textColor
+    textColor: textColor,
+    isDarkerBackground: isDarkerBackground
   }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
     onClick: disabled ? undefined : handleToggle
   }, /*#__PURE__*/React$1.createElement(CalendarInOpen, {
@@ -54853,7 +54857,7 @@ const DropdownContainer = styled.div`
 `;
 const DropdownButton = styled.button`
   width: 100%;
-  background: #fff;
+  background: ${props => props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   border: 1px solid #8B8989;
   border-radius: 12px;
   padding: 17px;
@@ -54866,7 +54870,7 @@ const DropdownButton = styled.button`
   ${props => props.disabled && css`
       color: #D0D0D0;
       cursor: not-allowed;
-      border: 1px solid #D0D0D0;
+      border: 1px solid #D9D9D9;
       background: ${props => props.isDarkerBackground ? '#F2F2F2' : '#fff'};
     `}
 `;
@@ -54975,8 +54979,8 @@ const Label$1 = styled.label`
   padding-inline-start: 5px;
   margin-right: 10px; 
   z-index: 2;
-  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};  
-  background-color: ${props => props.disabled ? '#F2F2F2' : props.showLabelOnTop ? 'white' : 'transparent'};
+  color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};  
+  background-color: ${props => props.isDarkerBackground ? '#F2F2F2' : props.showLabelOnTop ? 'white' : 'transparent'};
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '14px'};
@@ -55507,7 +55511,8 @@ const OverlayDropdown = _ref => {
     labelColor: labelColor,
     hasValue: hasValue,
     disabled: disabled,
-    showLabelOnTop: showLabelOnTop
+    showLabelOnTop: showLabelOnTop,
+    isDarkerBackground: isDarkerBackground
   }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(DropdownButton, {
     ref: buttonRef,
     onClick: toggleDropdown,