sag_components 2.0.0-beta160 → 2.0.0-beta162

package/dist/index.esm.js

@@ -356,21 +356,24 @@ const PlusIcon = ({
   fill: color
 }));
 
-const ArrowLeftIcon = ({
-  width = '16',
-  height = '16',
-  color = '#212121',
-  ...props
-}) => /*#__PURE__*/React$1.createElement("svg", _extends$1({
-  width: width,
-  height: height,
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React$1.createElement("path", {
-  d: "M1.21875 8.54703C1.0625 8.39078 1 8.20328 1 7.98453C1 7.79703 1.0625 7.60953 1.21875 7.45328L6.71875 2.20328C7.03125 1.92203 7.5 1.92203 7.78125 2.23453C8.0625 2.51578 8.0625 3.01578 7.75 3.29703L3.59375 7.23453H14.25C14.6562 7.23453 15 7.57828 15 7.98453C15 8.42203 14.6562 8.73453 14.25 8.73453H3.59375L7.75 12.7033C8.0625 12.9845 8.0625 13.4533 7.78125 13.7658C7.5 14.0783 7.03125 14.0783 6.71875 13.797L1.21875 8.54703Z",
-  fill: color
-}));
+const ArrowLeftIcon = _ref => {
+  let {
+    width = '16',
+    height = '16',
+    color = '#212121',
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", _extends$1({
+    width: width,
+    height: height,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React$1.createElement("path", {
+    d: "M1.21875 8.54703C1.0625 8.39078 1 8.20328 1 7.98453C1 7.79703 1.0625 7.60953 1.21875 7.45328L6.71875 2.20328C7.03125 1.92203 7.5 1.92203 7.78125 2.23453C8.0625 2.51578 8.0625 3.01578 7.75 3.29703L3.59375 7.23453H14.25C14.6562 7.23453 15 7.57828 15 7.98453C15 8.42203 14.6562 8.73453 14.25 8.73453H3.59375L7.75 12.7033C8.0625 12.9845 8.0625 13.4533 7.78125 13.7658C7.5 14.0783 7.03125 14.0783 6.71875 13.797L1.21875 8.54703Z",
+    fill: color
+  }));
+};
 
 const Plus = ({
   width = 17,
@@ -3144,6 +3147,24 @@ const UploadIcon = _ref => {
   }));
 };
 
+const UploadIconV2 = _ref => {
+  let {
+    color = '"#066768"',
+    width = '14',
+    height = '14'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.4175 1.75616V9.91557C7.4175 10.1447 7.23005 10.3321 7.00094 10.3321C6.77183 10.3321 6.58437 10.1447 6.58437 9.91557V1.75616L3.96263 4.3779C3.80122 4.53931 3.53566 4.53931 3.37424 4.3779C3.21282 4.21648 3.21282 3.95092 3.37424 3.7895L6.70674 0.457001C6.86816 0.295583 7.13372 0.295583 7.29513 0.457001L10.6276 3.7895C10.7891 3.95092 10.7891 4.21648 10.6276 4.3779C10.4662 4.53931 10.2007 4.53931 10.0392 4.3779L7.4175 1.75616ZM5.75125 9.49901H2.00219C1.54137 9.49901 1.16906 9.87131 1.16906 10.3321V11.9984C1.16906 12.4592 1.54137 12.8315 2.00219 12.8315H11.9997C12.4605 12.8315 12.8328 12.4592 12.8328 11.9984V10.3321C12.8328 9.87131 12.4605 9.49901 11.9997 9.49901H8.25063V8.66589H11.9997C12.9187 8.66589 13.6659 9.4131 13.6659 10.3321V11.9984C13.6659 12.9174 12.9187 13.6646 11.9997 13.6646H2.00219C1.08315 13.6646 0.335938 12.9174 0.335938 11.9984V10.3321C0.335938 9.4131 1.08315 8.66589 2.00219 8.66589H5.75125V9.49901ZM10.3334 11.1653C10.3334 10.9995 10.3993 10.8406 10.5164 10.7234C10.6336 10.6062 10.7926 10.5404 10.9583 10.5404C11.124 10.5404 11.2829 10.6062 11.4001 10.7234C11.5173 10.8406 11.5831 10.9995 11.5831 11.1653C11.5831 11.331 11.5173 11.4899 11.4001 11.6071C11.2829 11.7243 11.124 11.7901 10.9583 11.7901C10.7926 11.7901 10.6336 11.7243 10.5164 11.6071C10.3993 11.4899 10.3334 11.331 10.3334 11.1653Z",
+    fill: color
+  }));
+};
+
 const LinkButton = _ref => {
   let {
     text = '',
@@ -3305,6 +3326,14 @@ const LinkButton = _ref => {
           width: iconWidth,
           color: color
         }));
+      case 'uploadv2':
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+          className: "UploadIconV2"
+        }, /*#__PURE__*/React$1.createElement(UploadIconV2, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
       default:
         return '';
     }
@@ -8610,6 +8639,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 +8665,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 +8810,7 @@ const DropdownSingleNew = ({
   required,
   disabled,
   width,
+  height,
   withMarginBottom = true,
   error,
   errorMessage,
@@ -8932,6 +8966,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 +8988,7 @@ const DropdownSingleNew = ({
     labelColor: labelColor,
     hasValue: selectedOptions?.length > 0 || inputValue,
     disabled: disabled,
+    height: height,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
@@ -9069,6 +9105,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 +9131,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 +9479,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 +9502,7 @@ const DropdownMultiNew = ({
     labelColor: labelColor,
     hasValue: selectedOptions?.length > 0 || inputValue,
     disabled: disabled,
+    height: height,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
@@ -9535,6 +9577,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 +9598,7 @@ const DropdownNew = props => {
     required = false,
     disabled = false,
     width = "300px",
+    height = "52px",
     withMarginBottom = true,
     error = false,
     showLabelOnTop = true,
@@ -9573,7 +9617,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 +9629,7 @@ const DropdownNew = props => {
     required: required,
     options: options,
     width: width,
+    height: height,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -9604,6 +9650,7 @@ const DropdownNew = props => {
     required: required,
     options: options,
     width: width,
+    height: height,
     withMarginBottom: withMarginBottom,
     disabled: disabled,
     error: error,
@@ -28140,6 +28187,12 @@ const IconButton$1 = props => {
           width: iconWidth,
           color: contentColor
         });
+      case 'arrowleft':
+        return /*#__PURE__*/React$1.createElement(ArrowLeftIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
       default:
         return '';
     }
@@ -35556,9 +35609,12 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${({
-  disabled
-}) => disabled ? 0.5 : 1};
+  opacity: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 0.5 : 1;
+}};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -35566,15 +35622,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
+  background: ${_ref2 => {
+  let {
+    checked,
+    disabled
+  } = _ref2;
+  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -35593,9 +35653,10 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -35605,10 +35666,11 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":