sag_components 2.0.0-beta324 → 2.0.0-beta326

package/dist/index.esm.js

@@ -9840,6 +9840,8 @@ const DropdownNew = props => {
     if (event && event.newValue && event.newValue[0]) {
       onChange && onChange(event);
       handleChange && handleChange(event.newValue[0].value);
+    } else if (event && Array.isArray(event.newValue) && event.newValue.length === 0) {
+      onChange && onChange(event);
     }
   };
   return /*#__PURE__*/React$1.createElement(DropdownMain, {
@@ -10647,23 +10649,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11105,22 +11108,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24237,23 +24241,24 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  optionHoverColor = '#edf6ff',
-  selectedOptionColor = "#C7E4FF",
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    optionHoverColor = '#edf6ff',
+    selectedOptionColor = "#C7E4FF",
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24711,26 +24716,27 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  optionHoverColor = '#edf6ff',
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    optionHoverColor = '#edf6ff',
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35210,12 +35216,17 @@ const StyledInput$1 = styled.input`
   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;
+  transition: border-color 0.3s ease;
   font-weight: 400;
   box-sizing: border-box;
   color: ${props => props.disabled ? '#D0D0D0' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  @media (max-width: 1750px) {
+    font-size: 12px;
+  }
+  @media (max-width: 1536px) {
+    font-size: 10px;
+  }
 `;
 const StyledLabel = styled.label`
   font-size: 14px;
@@ -36276,9 +36287,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -47880,6 +47891,9 @@ const SectionTitle$1 = styled$1.div`
   color: #212121;
   font-size: 14px;
   font-weight: 700;
+  @media (max-width: 1280px) {
+    font-size: 12px;
+  }
 `;
 const SubtitleContainer = styled$1.div`
   display: flex;
@@ -47891,6 +47905,9 @@ const Subtitle$1 = styled$1.span`
   color: ${props => props.color};
   font-size: 14px;
   font-weight: 400;
+  @media (max-width: 1280px) {
+    font-size: 11px;
+  }
 `;
 const AddButtonContainer$1 = styled$1.div`
   display: flex;
@@ -47907,6 +47924,9 @@ styled$1(Card)`
 `;
 const VendorHeader$2 = styled$1.div`
   padding: 16px 24px;
+  @media (max-width: 1280px) {
+    padding: 12px 8px;
+  }
 `;
 styled$1.button`
   border: none;
@@ -48085,6 +48105,9 @@ const Container$1 = styled$1.div`
   justify-content: space-between;
   padding: 38px 0 20px;
   box-sizing: border-box;
+  @media (max-width: 1280px) {
+    padding: 20px 0 12px;
+  }
 `;
 const tooltipStyles = css`
   /* CSS-only tooltip */