sag_components 2.0.0-beta218 → 2.0.0-beta219

package/dist/index.esm.js

@@ -36075,12 +36075,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;
@@ -36088,19 +36085,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;`;
@@ -36119,10 +36112,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;`;
@@ -36132,11 +36124,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":
@@ -36150,9 +36141,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 {
@@ -39624,6 +39615,14 @@ styled.div`
     }
   `}
 `;
+const HeroButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+`;
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
@@ -40087,6 +40086,38 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string
 };
 
+const HeroIcon = ({
+  width = '12',
+  height = '16',
+  full = false
+}) => full ? /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 12 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M0 1.5V15.2406C0 15.6594 0.340625 16 0.759375 16C0.915625 16 1.06875 15.9531 1.19687 15.8625L6 12.5L10.8031 15.8625C10.9313 15.9531 11.0844 16 11.2406 16C11.6594 16 12 15.6594 12 15.2406V1.5C12 0.671875 11.3281 0 10.5 0H1.5C0.671875 0 0 0.671875 0 1.5Z",
+  fill: "#066768"
+})) : /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 12 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("g", {
+  "clip-path": "url(#clip0_2338_96732)"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M0 1.5C0 0.671875 0.671875 0 1.5 0H10.5C11.3281 0 12 0.671875 12 1.5V15.3094C12 15.6906 11.6906 16 11.3094 16C11.1719 16 11.0406 15.9594 10.925 15.8844L6 12.6L1.075 15.8844C0.9625 15.9594 0.828125 16 0.690625 16C0.309375 16 0 15.6906 0 15.3094V1.5ZM1.5 1C1.225 1 1 1.225 1 1.5V14.7312L5.72188 11.5844C5.89062 11.4719 6.10938 11.4719 6.27812 11.5844L11 14.7312V1.5C11 1.225 10.775 1 10.5 1H1.5Z",
+  fill: "#066768"
+})), /*#__PURE__*/React$1.createElement("defs", null, /*#__PURE__*/React$1.createElement("clipPath", {
+  id: "clip0_2338_96732"
+}, /*#__PURE__*/React$1.createElement("rect", {
+  width: "12",
+  height: "16",
+  fill: "white"
+}))));
+
 // combinedShimmerHooks.js - Chrome shimmer effect integrated with your hooks
 
 // Chrome Shimmer Component
@@ -40186,7 +40217,8 @@ const TableBody = /*#__PURE__*/forwardRef(({
   expandedBackgroundColor = "#E6F0F0",
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
-  onHeaderCheckboxClick = () => {}
+  onHeaderCheckboxClick = () => {},
+  onHeroClick = () => {}
 }, ref) => {
   // MOVE ALL VALIDATION TO THE VERY TOP BEFORE ANY HOOKS
   if (!Array.isArray(data) || !Array.isArray(columns)) {
@@ -40724,6 +40756,23 @@ const TableBody = /*#__PURE__*/forwardRef(({
             console.warn('Error formatting checkbox:', e);
             return String(value || "");
           }
+        case "hero":
+          try {
+            if (value === null || value === undefined) return null;
+            return /*#__PURE__*/React$1.createElement(HeroButton, {
+              onClick: e => {
+                // e.stopPropagation();
+                if (onHeroClick) {
+                  onHeroClick(row, !value);
+                }
+              }
+            }, /*#__PURE__*/React$1.createElement(HeroIcon, {
+              full: Boolean(value)
+            }));
+          } catch (e) {
+            console.warn('Error formatting hero icon:', e);
+            return null;
+          }
         default:
           return String(value || "");
       }
@@ -40957,7 +41006,8 @@ TableBody.propTypes = {
   expandedBackgroundColor: PropTypes.string,
   onDropdownSelected: PropTypes.func,
   onCheckboxClick: PropTypes.func,
-  onHeaderCheckboxClick: PropTypes.func
+  onHeaderCheckboxClick: PropTypes.func,
+  onHeroClick: PropTypes.func
 };
 TableBody.displayName = "TableBody";
 
@@ -44320,6 +44370,7 @@ const Table = props => {
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
     headerCheckboxStates = {},
+    onHeroClick = () => {},
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -44471,7 +44522,8 @@ const Table = props => {
     expandedBackgroundColor: expandedBackgroundColor,
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
-    onHeaderCheckboxClick: onHeaderCheckboxClick
+    onHeaderCheckboxClick: onHeaderCheckboxClick,
+    onHeroClick: onHeroClick
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noEventsTitle), /*#__PURE__*/React$1.createElement("br", null), noEventsSubtitle)), !showNoDataInSearch && showNoEventsButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: noEventsButtonIcon,