sag_components 2.0.0-beta175 → 2.0.0-beta177

package/dist/index.esm.js

@@ -1,5 +1,6 @@
 import React$1, { useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle } from 'react';
 import styled, { keyframes, css, styled as styled$1 } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -468,6 +469,101 @@ const ErrorIcon = _ref => {
   }));
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var VIcon = function (_a) {
+  var _b = _a.width,
+    width = _b === void 0 ? "12" : _b,
+    _c = _a.height,
+    height = _c === void 0 ? "8" : _c,
+    _d = _a.color,
+    color = _d === void 0 ? "#D0D0D0" : _d;
+  return jsxs("svg", __assign({
+    width: width,
+    height: height,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, {
+    children: [jsx("g", __assign({
+      filter: "url(#filter0_d_3431_32168)"
+    }, {
+      children: jsx("path", {
+        d: "M15.8754 4.12241C16.0415 4.28562 16.0415 4.55413 15.8754 4.71734L8.58808 11.8776C8.42197 12.0408 8.14869 12.0408 7.98259 11.8776L4.12458 8.08687C3.95847 7.92366 3.95847 7.65515 4.12458 7.49194C4.29069 7.32873 4.56397 7.32873 4.73007 7.49194L8.28533 10.9852L15.2699 4.12241C15.436 3.9592 15.7093 3.9592 15.8754 4.12241Z",
+        fill: color
+      })
+    })), jsx("defs", {
+      children: jsxs("filter", __assign({
+        id: "filter0_d_3431_32168",
+        x: "-2",
+        y: "0",
+        width: "24",
+        height: "24",
+        filterUnits: "userSpaceOnUse",
+        "color-interpolation-filters": "sRGB"
+      }, {
+        children: [jsx("feFlood", {
+          "flood-opacity": "0",
+          result: "BackgroundImageFix"
+        }), jsx("feColorMatrix", {
+          "in": "SourceAlpha",
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }), jsx("feOffset", {
+          dy: "4"
+        }), jsx("feGaussianBlur", {
+          stdDeviation: "2"
+        }), jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), jsx("feColorMatrix", {
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        }), jsx("feBlend", {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_3431_32168"
+        }), jsx("feBlend", {
+          mode: "normal",
+          "in": "SourceGraphic",
+          in2: "effect1_dropShadow_3431_32168",
+          result: "shape"
+        })]
+      }))
+    })]
+  }));
+};
+
 const ChervronRightIcon = _ref => {
   let {
     width = "8",
@@ -549,7 +645,8 @@ const Button$1 = props => {
     reselect: ReselectIcon,
     plus: Plus,
     left: ChervronLeftIcon,
-    right: ChervronRightIcon
+    right: ChervronRightIcon,
+    vicon: VIcon
   };
   const getIcon = icon => {
     if (!icon || icon === "none") return null;
@@ -10448,24 +10545,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('');
@@ -10907,23 +11003,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('');
@@ -24034,22 +24129,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("");
@@ -24446,24 +24540,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('');
@@ -35303,18 +35396,19 @@ const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-content: center;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: flex-start;
-  width: ${props => props.width || '300px'};  
+  width: ${props => props.width || '300px'};
+  height: ${props => props.height || '45px'};  
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
   padding: 0;
   cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
+  min-height: ${props => props.multiline ? '80px' : 'auto'};
 `;
 const Label$3 = styled.label`
-
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -35324,8 +35418,18 @@ const Label$3 = styled.label`
   color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
-  left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
+  top: ${props => {
+  if (props.multiline) {
+    return props.isFocused || props.hasValue ? '0px' : '20px';
+  }
+  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px';
+}};
+  left: ${props => {
+  if (props.multiline) {
+    return props.isFocused || props.hasValue ? '23px' : '16px';
+  }
+  return props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px';
+}};
   font-family: Poppins;  
   transform: translateY(-50%);
   transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
@@ -35342,17 +35446,17 @@ const InputContainer = styled.div`
   display: flex;       
   flex-wrap: nowrap; 
   justify-content: flex-start;
-  align-content: center;     
+  align-content: ${props => props.multiline ? 'flex-start' : 'center'};     
   white-space: pre-wrap;
-  align-items: center;
+  align-items: ${props => props.multiline ? 'flex-start' : 'center'};
   overflow: hidden;
-  padding: 0 16px;
-  gap: 14px;
+  padding: ${props => props.multiline ? '16px' : '0 16px'};
+  gap: ${props => props.multiline ? '0' : '14px'};
   width: 100%;
   height: 100%;    
   box-sizing: border-box;
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
-  border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
+  border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -35364,10 +35468,9 @@ const InputContainer = styled.div`
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 
-  &:focus {  
+  &:focus-within {  
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
-  
 `;
 const InputSubContainer = styled.div`
   display: flex;       
@@ -35375,13 +35478,16 @@ const InputSubContainer = styled.div`
   flex-wrap: nowrap;     
   align-content: center; 
   align-items: flex-start;
-  justify-content: center;
+  justify-content: ${props => props.multiline ? 'flex-start' : 'center'};
   white-space: pre-wrap;
   overflow: hidden;
-  padding: 5px 0;
+  padding: ${props => props.multiline ? '5px 0 0 0' : '5px 0'};
   width: 100%;
-  height: 100%;
-  min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
+  height: ${props => props.height || '45px'};
+  min-height: ${props => {
+  if (props.multiline) return 'auto';
+  return props.size === 'medium' ? '52px' : '32px';
+}};
   box-sizing: border-box;
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
@@ -35391,14 +35497,59 @@ const InputSubContainer = styled.div`
 `;
 const StyledInput = styled.input`
   width: calc(100% - 10px);
-  height: 20px;
+  height: ${props => props.height || '20px'};
   font-weight: 400;
   font-size: 14px;
   outline: none;  
   color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border: none;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  font-family: "Poppins", sans-serif;
+`;
+const StyledTextarea = styled.textarea`
+  width: 100%;
+  min-height: 60px;
+  font-weight: 400;
+  font-size: 14px;
+  outline: none;  
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
+  border: none;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  font-family: "Poppins", sans-serif;
+  resize: vertical;
+  line-height: 1.4;
+  padding: 0;
+  margin-top: 10px;
+  
+  &::placeholder {
+    color: #999;
+    font-style: italic;
+  }
+  
+  &:focus {
+    outline: none;
+  }
+  
+  /* Remove default textarea styling */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
 `;
 const ErrorMessage = styled.div`
   font-size: 12px;
@@ -35431,6 +35582,7 @@ const Input$2 = _ref => {
     disabled,
     isDarkerBackground = false,
     width,
+    height = '50px',
     error,
     errorMessage,
     labelColor,
@@ -35438,7 +35590,12 @@ const Input$2 = _ref => {
     rightIcon,
     password,
     leftIconOnClick,
-    rightIconOnClick
+    rightIconOnClick,
+    multiline = false,
+    // New prop to enable textarea mode
+    rows = 3,
+    // New prop for textarea rows
+    maxLength // New prop for character limit
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35512,12 +35669,24 @@ const Input$2 = _ref => {
     }
     return getIcon('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
   };
+
+  // Calculate dynamic height for multiline inputs
+  const calculateHeight = () => {
+    if (!multiline) return height;
+    const baseHeight = size === 'small' ? 32 : 52;
+    const lineHeight = 20;
+    const padding = 10;
+    return `${baseHeight + (rows - 1) * lineHeight + padding}px`;
+  };
+  const InputElement = multiline ? StyledTextarea : StyledInput;
   return /*#__PURE__*/React$1.createElement(MainContainer, {
     className: "MainContainer",
     width: width,
+    height: calculateHeight(),
     size: size,
     disabled: disabled,
-    isDarkerBackground: isDarkerBackground
+    isDarkerBackground: isDarkerBackground,
+    multiline: multiline
   }, /*#__PURE__*/React$1.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
@@ -35525,8 +35694,9 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     error: error,
     isFocused: isFocused,
-    size: size
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
+    size: size,
+    multiline: multiline
+  }, !multiline && getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
@@ -35534,26 +35704,29 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     error: error,
     onClick: handleLabelClick,
-    size: size
+    height: calculateHeight(),
+    size: size,
+    multiline: multiline
   }, /*#__PURE__*/React$1.createElement(Label$3, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
     hasValue: inputValue,
-    leftIcon: leftIcon,
+    leftIcon: !multiline ? leftIcon : 'none',
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
-    size: size
+    size: size,
+    multiline: multiline
   }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React$1.createElement("span", {
     style: {
       color: disabled ? '#D0D0D0' : 'red',
       height: '16px'
     }
-  }, "*")), /*#__PURE__*/React$1.createElement(StyledInput, {
-    className: "StyledInput",
+  }, "*")), /*#__PURE__*/React$1.createElement(InputElement, {
+    className: multiline ? "StyledTextarea" : "StyledInput",
     ref: inputRef,
     type: password && !showPassword ? 'password' : 'text',
     value: inputValue,
@@ -35565,11 +35738,22 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     placeholder: isFocused ? placeHolder : '',
     error: error,
-    isFocused: isFocused
-  })), password ? getPasswordIcon() : getRightIcon()), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
+    height: calculateHeight(),
+    isFocused: isFocused,
+    rows: multiline ? rows : undefined,
+    maxLength: maxLength,
+    multiline: multiline
+  })), !multiline && (password ? getPasswordIcon() : getRightIcon())), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
     className: "ErrorMessage",
     width: width
-  }, errorMessage));
+  }, errorMessage), multiline && maxLength && /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      fontSize: '12px',
+      color: inputValue.length > maxLength * 0.9 ? 'orange' : '#666',
+      textAlign: 'right',
+      marginTop: '4px'
+    }
+  }, inputValue.length, "/", maxLength));
 };
 Input$2.propTypes = {
   placeHolder: PropTypes.string,
@@ -35589,7 +35773,10 @@ Input$2.propTypes = {
   onBlur: PropTypes.func,
   leftIcon: PropTypes.string,
   rightIcon: PropTypes.string,
-  password: PropTypes.bool
+  password: PropTypes.bool,
+  multiline: PropTypes.bool,
+  rows: PropTypes.number,
+  maxLength: PropTypes.number
 };
 Input$2.defaultProps = {
   placeHolder: 'Type...',
@@ -35608,7 +35795,10 @@ Input$2.defaultProps = {
   leftIconOnClick: () => {},
   rightIconOnClick: () => {},
   onBlur: () => {},
-  password: false
+  password: false,
+  multiline: false,
+  rows: 3,
+  maxLength: undefined
 };
 
 const ToggleSwitchLabel = styled.label`
@@ -35616,12 +35806,9 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return disabled ? 0.5 : 1;
-}};
+  opacity: ${({
+  disabled
+}) => disabled ? 0.5 : 1};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -35629,19 +35816,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref2 => {
-  let {
-    checked,
-    disabled
-  } = _ref2;
-  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref3 => {
-  let {
-    size
-  } = _ref3;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -35660,10 +35843,9 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${_ref4 => {
-  let {
-    size
-  } = _ref4;
+    ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -35673,11 +35855,10 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -35691,9 +35872,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 {