sag_components 2.0.0-beta160 → 2.0.0-beta161

package/dist/index.esm.js

@@ -8610,6 +8610,7 @@ const DropdownWrapper$2 = styled.div`
   justify-content: center;
   align-items: flex-start;
   width: ${props => props.width || '300px'};  
+  height: ${props => props.height || '40px'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -8635,7 +8636,10 @@ const Label$8 = styled.label`
   color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};  
   background-color: ${props => props.showLabelOnTop ? 'white' : 'transparent'} ;
   position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : '28px'};
+  top: ${props => {
+  const height = parseInt(props.height.replace('px', ''), 10);
+  return props.isFocused || props.hasValue ? '0px' : `${height / 2}px`;
+}};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
   transform: translateY(-50%);  
   transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
@@ -8777,6 +8781,7 @@ const DropdownSingleNew = ({
   required,
   disabled,
   width,
+  height,
   withMarginBottom = true,
   error,
   errorMessage,
@@ -8932,6 +8937,7 @@ const DropdownSingleNew = ({
   return /*#__PURE__*/React$1.createElement(DropdownWrapper$2, {
     className: "DropdownWrapper",
     width: width,
+    height: height,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
   }, /*#__PURE__*/React$1.createElement(InputContainer$8, {
@@ -8953,6 +8959,7 @@ const DropdownSingleNew = ({
     labelColor: labelColor,
     hasValue: selectedOptions?.length > 0 || inputValue,
     disabled: disabled,
+    height: height,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
@@ -9069,6 +9076,7 @@ const DropdownWrapper$1 = styled.div`
   justify-content: center;
   align-items: flex-start;
   width: ${props => props.width || '300px'};  
+  height: ${props => props.height || '50px'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -9094,7 +9102,10 @@ const Label$7 = styled.label`
   color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};
   background-color: ${props => props.showLabelOnTop ? 'white' : 'transparent'} ;
   position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : '27px'};
+  top: ${props => {
+  const height = parseInt(props.height.replace('px', ''), 10);
+  return props.isFocused || props.hasValue ? '0px' : `${height / 2}px`;
+}};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
   font-family: Poppins;  
   transform: translateY(-50%);
@@ -9439,6 +9450,7 @@ const DropdownMultiNew = ({
   return /*#__PURE__*/React$1.createElement(DropdownWrapper$1, {
     className: "DropdownWrapper",
     width: width,
+    height: height,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
   }, /*#__PURE__*/React$1.createElement(InputContainer$7, {
@@ -9461,6 +9473,7 @@ const DropdownMultiNew = ({
     labelColor: labelColor,
     hasValue: selectedOptions?.length > 0 || inputValue,
     disabled: disabled,
+    height: height,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
@@ -9535,6 +9548,7 @@ const DropdownMain = styled.div`
   justify-content: center;
   align-items: flex-start;
   width: ${props => props.width || '300px'};  
+  height: ${props => props.height || '50px'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -9555,6 +9569,7 @@ const DropdownNew = props => {
     required = false,
     disabled = false,
     width = "300px",
+    height = "52px",
     withMarginBottom = true,
     error = false,
     showLabelOnTop = true,
@@ -9573,7 +9588,8 @@ const DropdownNew = props => {
   };
   return /*#__PURE__*/React$1.createElement(DropdownMain, {
     className: "DropdownMain",
-    width: width
+    width: width,
+    height: height
   }, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
     className: "DropdownMultiNew",
     placeHolder: placeHolder,
@@ -9584,6 +9600,7 @@ const DropdownNew = props => {
     required: required,
     options: options,
     width: width,
+    height: height,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -9604,6 +9621,7 @@ const DropdownNew = props => {
     required: required,
     options: options,
     width: width,
+    height: height,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -10375,24 +10393,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10834,23 +10851,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -23961,22 +23977,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24373,24 +24388,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35622,9 +35636,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 {