sag_components 2.0.0-beta277 → 2.0.0-beta279

package/dist/index.esm.js

@@ -36110,19 +36110,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref => {
-  let {
-    checked,
-    disabled
-  } = _ref;
-  return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref2 => {
-  let {
-    size
-  } = _ref2;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36138,18 +36134,14 @@ const ToggleSlider = styled.span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: ${_ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled ? "#D0D0D0" : "#fff";
-}};
+    background: ${({
+  disabled
+}) => disabled ? "#D0D0D0" : "#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;`;
@@ -36159,11 +36151,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":
@@ -36177,9 +36168,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 {
@@ -37855,7 +37846,7 @@ const FilterPop = props => {
     }));
     return {
       visibleItems: visible,
-      totalHeight: (sortedList.length + 1) * (itemHeight + 8),
+      totalHeight: sortedList.length * itemHeight,
       offsetY: startIndex * itemHeight
     };
   }, [sortedList, scrollTop, itemHeight, overscan, maxHeight]);
@@ -40365,7 +40356,7 @@ const FieldRow$1 = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
-    justify-content: center;
+  justify-content: center;
   padding: 16px;
 `;
 const Label$2 = styled.label`
@@ -40373,6 +40364,7 @@ const Label$2 = styled.label`
     display: flex;
     align-items: center;
     gap: 8px;
+    white-space: nowrap;
 `;
 const Input$1 = styled.input`
   width: 64px;
@@ -40600,7 +40592,7 @@ const RangePop = props => {
         max: param.type === "percent" ? 100 : param.type === "week" ? 53 : undefined
       }));
     }
-  }), errors[`field_${idx}`] && /*#__PURE__*/React$1.createElement(ErrorText, null, errors[`field_${idx}`]?.message)))), /*#__PURE__*/React$1.createElement(Label$2, null, paramType)), /*#__PURE__*/React$1.createElement(Actions$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
+  }), errors[`field_${idx}`] && /*#__PURE__*/React$1.createElement(ErrorText, null, errors[`field_${idx}`]?.message)))), /*#__PURE__*/React$1.createElement(Label$2, null, paramType === 'Week' ? paramType : "")), /*#__PURE__*/React$1.createElement(Actions$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
     leftIcon: "none",
     onClick: handleCancel,
     rightIcon: "none",
@@ -41252,13 +41244,23 @@ const TableHeader = ({
       });
     } else if (rangeFilter) {
       const currentFilterState = filterState[key];
-      return /*#__PURE__*/React$1.createElement(RangePop, {
-        menuName: title,
-        width: "300px",
-        height: "auto",
-        buttonColor: "#066768",
-        hoverColor: "#044d4e",
-        paramType: "Week",
+
+      // Determine if this is a price column
+      const isPriceColumn = key.toLowerCase().includes('price') || key.toLowerCase().includes('cost') || key.toLowerCase().includes('amount');
+
+      // Configure RangePop based on column type
+      const rangeConfig = isPriceColumn ? {
+        paramType: '$',
+        params: [{
+          label: 'From $',
+          type: 'price'
+        }, {
+          label: 'To $',
+          type: 'price'
+        }],
+        radioOptions: ['All Prices', 'Custom Range']
+      } : {
+        paramType: 'Week',
         params: [{
           label: 'From',
           type: 'week'
@@ -41266,7 +41268,17 @@ const TableHeader = ({
           label: 'To',
           type: 'week'
         }],
-        radioOptions: ['All weeks', 'Custom Range'],
+        radioOptions: ['All Weeks', 'Custom Range']
+      };
+      return /*#__PURE__*/React$1.createElement(RangePop, {
+        menuName: title,
+        width: "300px",
+        height: "auto",
+        buttonColor: "#066768",
+        hoverColor: "#044d4e",
+        paramType: rangeConfig.paramType,
+        params: rangeConfig.params,
+        radioOptions: rangeConfig.radioOptions,
         initialValues: currentFilterState ? {
           selectedRadio: currentFilterState.selectedRadio,
           fields: currentFilterState.fields