sag_components 2.0.0-beta274 → 2.0.0-beta276

package/dist/index.js

@@ -9302,7 +9302,6 @@ const Label$7 = styled__default["default"].label`
   return props.isFocused || props.hasValue ? '0px' : `${height / 2 - 4}px`;
 }};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
-  font-family: Poppins;  
   transform: translateY(-50%);
   transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
   display: flex;
@@ -10591,23 +10590,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -11049,22 +11049,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] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -24175,21 +24176,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("");
@@ -24550,7 +24552,6 @@ const OptionsContainer$1 = styled__default["default"].div`
   width: 100%;  
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
-
 `;
 const OptionsSubContainer = styled__default["default"].ul`
   list-style: none;
@@ -24562,7 +24563,6 @@ const OptionsSubContainer = styled__default["default"].ul`
   left: 0;
   z-index: 101;
   width: calc(100% - 23px);
-  font-family: Poppins; 
   border-radius: 4px; 
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
@@ -24573,13 +24573,10 @@ const OptionsSubContainer = styled__default["default"].ul`
 const OptionItem = styled__default["default"].li`  
   display: flex;
   align-items: center;
-  gap: 8px;
   padding: 10px;
   cursor: pointer;
   color: #212121;
-  font-family: Poppins;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   transition: background-color 0.3s;
 
@@ -24594,7 +24591,6 @@ const ErrorMessage$1 = styled__default["default"].div`
 `;
 const SelectedOptionsContainer = styled__default["default"].div`
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 4px;
   flex-wrap: nowrap;
@@ -24643,28 +24639,30 @@ const SelectedOptionCount = styled__default["default"].div`
 const IconContainer$2 = styled__default["default"].div`  
   display: flex;  
   padding: 2px;
-  cursor:  pointer;  
+  margin-right: 8px;
+  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('');
@@ -35693,7 +35691,7 @@ const Label$3 = styled__default["default"].label`
   if (props.multiline) {
     return props.isFocused || props.hasValue ? '0px' : '20px';
   }
-  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px';
+  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '50%' : '17px';
 }};
   left: ${props => {
   if (props.multiline) {
@@ -35701,7 +35699,6 @@ const Label$3 = styled__default["default"].label`
   }
   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;
   display: flex;
@@ -36181,9 +36178,9 @@ const ToggleSlider = styled__default["default"].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 {
@@ -37425,8 +37422,8 @@ const ColumnContent = styled__default["default"].div`
     min-height: 20px;
 `;
 const ColumnCheckbox = styled__default["default"].input`
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     cursor: pointer;
     margin: 0;
 `;
@@ -40410,6 +40407,7 @@ const Radio = styled__default["default"].input`
 `;
 const Actions$1 = styled__default["default"].div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
   padding-top: 12px;
 `;
@@ -41315,14 +41313,7 @@ const TableHeader = ({
     onChange: e => handleHeaderCheckboxClick(column.key, e),
     "data-column": column.key,
     style: {
-      width: '18px',
-      height: '18px',
-      marginLeft: '10px',
-      cursor: 'pointer',
-      accentColor: '#066768',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
+      accentColor: '#066768'
     }
   }), column.title && /*#__PURE__*/React__default["default"].createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React__default["default"].createElement(ColumnActions, null, column.sort && /*#__PURE__*/React__default["default"].createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
@@ -42080,6 +42071,18 @@ styled__default["default"].div`
     }
   `}
 `;
+const CheckboxInput = styled__default["default"].input`
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  accent-color: ${props => props.buttonColor || '#066768'};
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
 const HeroButton = styled__default["default"].button`
   display: flex;
   align-items: center;
@@ -42723,6 +42726,7 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
+  disableCheckboxTooltipText = "",
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
@@ -43126,12 +43130,12 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
                 hoverTextColor: "#B1B1B1",
                 hoverBackgroundColor: "#E6F0F0",
                 hoverBorderColor: "#D9D9D9",
+                disabled: true,
                 disabledTextColor: "#B1B1B1",
-                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 disabledBorderColor: "#D9D9D9",
+                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 width: "100px",
-                height: "32px",
-                disabled: true
+                height: "32px"
               }));
             } else if (lowerValue === "draft") {
               return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, {
@@ -43353,24 +43357,15 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
             return /*#__PURE__*/React__default["default"].createElement("div", {
               style: {
                 display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                height: "100%"
+                alignItems: "center"
               }
-            }, /*#__PURE__*/React__default["default"].createElement("input", {
+            }, /*#__PURE__*/React__default["default"].createElement(CheckboxInput, {
               type: "checkbox",
               checked: isChecked,
               disabled: isDisabled,
+              buttonColor: buttonColor,
               onChange: e => handleCheckboxClick(row, column.key, e),
-              onClick: e => e.stopPropagation(),
-              style: {
-                width: "18px",
-                height: "18px",
-                cursor: isDisabled ? "not-allowed" : "pointer",
-                accentColor: buttonColor,
-                opacity: isDisabled ? 0.5 : 1
-              }
+              onClick: e => e.stopPropagation()
             }));
           } catch (e) {
             console.warn('Error formatting checkbox:', e);
@@ -47000,6 +46995,7 @@ const Table = props => {
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
     headerCheckboxStates = {},
+    disableCheckboxTooltipText = "",
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
     onEditableClick = () => {},
@@ -47144,6 +47140,7 @@ const Table = props => {
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
+    disableCheckboxTooltipText: disableCheckboxTooltipText,
     onHeroClick: onHeroClick,
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
@@ -57772,27 +57769,32 @@ OverlayTemplateDialog.propTypes = {
 // Main Component
 const OverlayDropdown = _ref => {
   let {
+    // Data / selection
     data = [],
     value,
     onSelectClick,
+    // Label / placeholder
+    label,
+    labelEmptyValue,
+    showLabelOnTop,
+    labelColor,
+    placeHolder,
+    placeHolderColor,
+    // Behavior
+    required = false,
     disabled = false,
     isDarkerBackground = false,
-    required = false,
+    editableDigitalCoupon = false,
+    // Appearance
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
-    dropdownMaxHeight = "600px",
+    // Sizing
     width = "100%",
     minWidth = "unset",
+    dropdownWidth = "100%",
+    dropdownMaxHeight = "600px",
     height = "auto",
-    label,
-    labelEmptyValue,
-    showLabelOnTop,
-    placeHolder,
-    labelColor,
-    placeHolderColor,
     margin = "8px",
-    dropdownWidth = "100%",
-    editableDigitalCoupon = false,
     ...props
   } = _ref;
   const [open, setOpen] = React$1.useState(false);