sag_components 2.0.0-beta236 → 2.0.0-beta237

package/dist/index.js

@@ -24177,21 +24177,22 @@ const DeleteIcon = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24648,25 +24649,26 @@ const IconContainer$2 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -35120,13 +35122,14 @@ const StyledInput$1 = styled__default["default"].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__default["default"].label`
@@ -35173,9 +35176,8 @@ const InputContainer$1 = styled__default["default"].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;
@@ -35217,6 +35219,7 @@ const WeeksPicker = _ref => {
     withMarginBottom = true,
     onChange,
     selectedValue,
+    isDarkerBackground = false,
     // New props for range restriction
     allowedWeekRange = null,
     // { startWeek: number, endWeek: number } or null
@@ -35413,7 +35416,8 @@ const WeeksPicker = _ref => {
     placeholder: isFocused ? placeholder : "",
     disabled: disabled,
     borderColor: borderColor,
-    textColor: textColor
+    textColor: textColor,
+    isDarkerBackground: isDarkerBackground
   }), /*#__PURE__*/React__default["default"].createElement(CalendarDiv, {
     onClick: disabled ? undefined : handleToggle
   }, /*#__PURE__*/React__default["default"].createElement(CalendarInOpen, {
@@ -54863,7 +54867,7 @@ const DropdownContainer = styled__default["default"].div`
 `;
 const DropdownButton = styled__default["default"].button`
   width: 100%;
-  background: #fff;
+  background: ${props => props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   border: 1px solid #8B8989;
   border-radius: 12px;
   padding: 17px;
@@ -54876,7 +54880,7 @@ const DropdownButton = styled__default["default"].button`
   ${props => props.disabled && styled.css`
       color: #D0D0D0;
       cursor: not-allowed;
-      border: 1px solid #D0D0D0;
+      border: 1px solid #D9D9D9;
       background: ${props => props.isDarkerBackground ? '#F2F2F2' : '#fff'};
     `}
 `;
@@ -54985,8 +54989,8 @@ const Label$1 = styled__default["default"].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'};
@@ -55517,7 +55521,8 @@ const OverlayDropdown = _ref => {
     labelColor: labelColor,
     hasValue: hasValue,
     disabled: disabled,
-    showLabelOnTop: showLabelOnTop
+    showLabelOnTop: showLabelOnTop,
+    isDarkerBackground: isDarkerBackground
   }, getLabel(), getRequired()), /*#__PURE__*/React__default["default"].createElement(DropdownButton, {
     ref: buttonRef,
     onClick: toggleDropdown,