sag_components 2.0.0-beta246 → 2.0.0-beta248

package/dist/index.esm.js

@@ -35199,7 +35199,6 @@ const WeeksPicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    text = 'Week',
     hoverColor,
     required,
     placeholder,
@@ -35223,7 +35222,6 @@ const WeeksPicker = _ref => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
-  const [previousText, setPreviousText] = useState(text);
 
   // Function to parse the value string and extract week numbers
   const parseValueToWeeks = valueString => {
@@ -35231,21 +35229,25 @@ const WeeksPicker = _ref => {
       startWeek: null,
       endWeek: null
     };
-    const rangeMatch = valueString.match(/^(.+?)\s*(\d+)\s*-\s*(\d+)$/);
-    if (rangeMatch) {
-      const startWeek = parseInt(rangeMatch[2]);
-      const endWeek = parseInt(rangeMatch[3]);
+
+    // Handle single week: "Week 5"
+    const singleWeekMatch = valueString.match(/^Week (\d+)$/);
+    if (singleWeekMatch) {
+      const week = parseInt(singleWeekMatch[1]);
       return {
-        startWeek,
-        endWeek
+        startWeek: week,
+        endWeek: week
       };
     }
-    const singleMatch = valueString.match(/^(.+?)\s*(\d+)$/);
-    if (singleMatch) {
-      const week = parseInt(singleMatch[2]);
+
+    // Handle week range: "Weeks 5 - 10"
+    const rangeMatch = valueString.match(/^Weeks (\d+) - (\d+)$/);
+    if (rangeMatch) {
+      const startWeek = parseInt(rangeMatch[1]);
+      const endWeek = parseInt(rangeMatch[2]);
       return {
-        startWeek: week,
-        endWeek: week
+        startWeek,
+        endWeek
       };
     }
     return {
@@ -35321,27 +35323,6 @@ const WeeksPicker = _ref => {
       }
     }
   }, [allowedWeekRange, restrictToRange]);
-  useEffect(() => {
-    if (previousText !== text) {
-      setPreviousText(text);
-    }
-    const currentValue = value || selectedValue;
-    if (currentValue) {
-      const {
-        startWeek,
-        endWeek
-      } = parseValueToWeeks(currentValue);
-      if (startWeek && endWeek) {
-        const newValue = endWeek === startWeek ? text === 'Week' ? `${text} ${startWeek}` : `${text}${startWeek}` : text === 'Week' ? `${text}s ${startWeek} - ${endWeek}` : `${text}${startWeek} - ${endWeek}`;
-        if (newValue !== value) {
-          setValue(newValue);
-          if (onChange) {
-            onChange(newValue);
-          }
-        }
-      }
-    }
-  }, [text, value, selectedValue, previousText, onChange]);
   const handleToggle = () => {
     setIsOpen(!isOpen);
   };
@@ -35362,6 +35343,11 @@ const WeeksPicker = _ref => {
     onChange(newValue);
     setValue(newValue);
   };
+  useEffect(() => {
+    if (selectedValue !== undefined) {
+      setValue(selectedValue);
+    }
+  }, [selectedValue]);
   const handleApply = () => {
     setIsOpen(false);
   };
@@ -35445,7 +35431,7 @@ const WeeksPicker = _ref => {
         console.warn('Selected weeks are outside the allowed range');
         return;
       }
-      const tempValue = end === start ? text === 'Week' ? `${text} ${start}` : `${text}${start}` : text === 'Week' ? `${text}s ${start} - ${end}` : `${text}${start} - ${end}`;
+      const tempValue = end === start ? `Week ${start}` : `Weeks ${start} - ${end}`;
       onChange(tempValue);
       setValue(tempValue);
       handleApply();
@@ -36112,19 +36098,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;`;
@@ -36140,18 +36122,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;`;
@@ -36161,11 +36139,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":
@@ -40799,7 +40776,8 @@ const TableHeader = ({
   activeSorts = [],
   expandable = false,
   onHeaderCheckboxClick = () => {},
-  headerCheckboxStates = {}
+  headerCheckboxStates = {},
+  resetFiltersKey = 0 // NEW: Add this prop
 }) => {
   const [focusedFilter, setFocusedFilter] = useState(null);
   const [focusedSort, setFocusedSort] = useState(null);
@@ -40810,21 +40788,46 @@ const TableHeader = ({
     left: 0
   });
   const [filterState, setFilterState] = useState({});
-
-  // Add persistent filter selections state
   const [filterSelections, setFilterSelections] = useState({});
+  const [activeSortColumn, setActiveSortColumn] = useState(null);
+  const [activeSortValue, setActiveSortValue] = useState(null);
+  const iconRefs = useRef({});
+  const popupRef = useRef(null);
 
-  // MODIFIED: Changed to track only ONE active sort (single column key and value)
-  const [activeSortColumn, setActiveSortColumn] = useState(null); // Only one column key
-  const [activeSortValue, setActiveSortValue] = useState(null); // Only one sort value
+  // NEW: Reset internal state when resetFiltersKey changes
+  useEffect(() => {
+    if (resetFiltersKey > 0) {
+      // Reset filter selections to default (all selected)
+      const resetSelections = {};
+      columns.forEach(column => {
+        if (column.filter && column.filterOptions) {
+          const initialState = {};
+          const fullList = [{
+            value: 'All',
+            label: 'Select All'
+          }, ...column.filterOptions];
+          fullList.forEach(item => {
+            initialState[item.value] = true;
+          });
+          resetSelections[column.key] = initialState;
+        }
+      });
+      setFilterSelections(resetSelections);
 
-  // Refs to track icon button positions
-  const iconRefs = useRef({});
+      // Reset filter state
+      setFilterState({});
 
-  // Ref for the popup content to measure its dimensions
-  const popupRef = useRef(null);
+      // Reset sort state
+      setActiveSortColumn(null);
+      setActiveSortValue(null);
 
-  // FIXED: Initialize filter selections ONLY for new columns, preserve existing selections
+      // Close any open popups
+      setVisibleFilterPopWrapper(null);
+      setVisibleSortPopWrapper(null);
+    }
+  }, [resetFiltersKey, columns]);
+
+  // Initialize filter selections for new columns
   useEffect(() => {
     setFilterSelections(prevSelections => {
       const newSelections = {
@@ -40832,7 +40835,6 @@ const TableHeader = ({
       };
       let hasChanges = false;
       columns.forEach(column => {
-        // Only initialize if column doesn't exist in state yet
         if (column.filter && column.filterOptions && !newSelections[column.key]) {
           const initialState = {};
           const fullList = [{
@@ -40845,69 +40847,48 @@ const TableHeader = ({
           newSelections[column.key] = initialState;
           hasChanges = true;
         } else if (column.filter && column.filterOptions && newSelections[column.key]) {
-          // Column exists - check if we need to add new options that appeared
           const currentSelections = newSelections[column.key];
           const newOptions = column.filterOptions.filter(opt => currentSelections[opt.value] === undefined);
-
-          // Only update if there are genuinely new options
           if (newOptions.length > 0) {
             const updatedSelections = {
               ...currentSelections
             };
             newOptions.forEach(opt => {
-              updatedSelections[opt.value] = true; // New options start selected
+              updatedSelections[opt.value] = true;
             });
             newSelections[column.key] = updatedSelections;
             hasChanges = true;
           }
         }
       });
-
-      // Only return new object if there were actual changes
       return hasChanges ? newSelections : prevSelections;
     });
   }, [columns]);
-
-  // Helper function to check if filter is in default state (all items selected)
   const isFilterInDefaultState = columnKey => {
     const filterData = filterState[columnKey];
     if (!filterData) {
-      return true; // No filter applied
+      return true;
     }
-
-    // For range filters, check if "All weeks" is selected
     if (filterData.selectedRadio) {
       return filterData.selectedRadio === 'all weeks';
     }
-
-    // Check if it's in "select all" state with no exclusions
     return filterData.isSelectAll && filterData.excluded?.length === 0 && filterData.included?.length === 0;
   };
-
-  // Helper function to determine filter icon state
   const getFilterIconState = columnKey => {
     const isFocused = focusedFilter === columnKey;
     const isActive = activeFilters.includes(columnKey);
     const isDefault = isFilterInDefaultState(columnKey);
-
-    // If it's in default state (all selected), show as default
     if (isDefault) {
       return 'default';
     }
-
-    // If focused or active and not in default state, show as active
     if (isFocused || isActive) {
       return 'active';
     }
-
-    // If has filter applied but not default, show as active
     if (filterState[columnKey]) {
       return 'active';
     }
     return 'default';
   };
-
-  // Enhanced function to calculate position with viewport boundary detection
   const calculatePopPosition = (iconElement, popupWidth = 300, popupHeight = 400) => {
     if (!iconElement) return {
       top: 0,
@@ -40918,32 +40899,20 @@ const TableHeader = ({
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    let top = rect.bottom + scrollTop + 4; // 4px gap below the icon
+    let top = rect.bottom + scrollTop + 4;
     let left = rect.left + scrollLeft;
-
-    // Check if popup would overflow right edge of viewport
     if (left + popupWidth > viewportWidth) {
-      // Position to the left of the icon instead
       left = rect.right + scrollLeft - popupWidth;
-
-      // If it still overflows on the left, clamp to viewport
       if (left < 0) {
-        left = 8; // Small margin from edge
+        left = 8;
       }
     }
-
-    // Check if popup would overflow bottom edge of viewport
     if (rect.bottom + popupHeight > viewportHeight) {
-      // Position above the icon instead
-      top = rect.top + scrollTop - popupHeight - 4; // 4px gap above the icon
-
-      // If it still overflows on the top, clamp to viewport
+      top = rect.top + scrollTop - popupHeight - 4;
       if (top < scrollTop) {
-        top = scrollTop + 8; // Small margin from top
+        top = scrollTop + 8;
       }
     }
-
-    // Ensure left position doesn't go negative
     if (left < 0) {
       left = 8;
     }
@@ -40952,16 +40921,12 @@ const TableHeader = ({
       left
     };
   };
-
-  // Function to estimate popup dimensions based on content type
   const getEstimatedPopupDimensions = columnKey => {
     const column = columns.find(col => col.key === columnKey);
     if (!column) return {
       width: 300,
       height: 400
     };
-
-    // Default dimensions
     let width = 300;
     let height = 400;
     if (column.freeTextFilter) {
@@ -40971,8 +40936,7 @@ const TableHeader = ({
       width = 300;
       height = 300;
     } else if (column.filterOptions) {
-      // Estimate height based on number of options
-      const optionCount = column.filterOptions.length + 1; // +1 for "Select All"
+      const optionCount = column.filterOptions.length + 1;
       height = Math.min(Math.max(optionCount * 32 + 100, 200), 500);
     } else if (column.sortOptions) {
       const optionCount = column.sortOptions.length;
@@ -40983,8 +40947,6 @@ const TableHeader = ({
       height
     };
   };
-
-  // Update handleSort to remove onSort call (only opens/closes popup)
   const handleSort = key => {
     const iconElement = iconRefs.current[`sort-${key}`];
     if (iconElement) {
@@ -40992,7 +40954,7 @@ const TableHeader = ({
       setPopPosition(calculatePopPosition(iconElement, dimensions.width, dimensions.height));
     }
     setVisibleSortPopWrapper(prevKey => prevKey === key ? null : key);
-    setVisibleFilterPopWrapper(null); // Hide filter PopWrapper when sort PopWrapper is shown
+    setVisibleFilterPopWrapper(null);
   };
   useEffect(() => {
     if (Object.keys(filterState).length > 0) {
@@ -41006,46 +40968,29 @@ const TableHeader = ({
       setPopPosition(calculatePopPosition(iconElement, dimensions.width, dimensions.height));
     }
     setVisibleFilterPopWrapper(prevKey => prevKey === key ? null : key);
-    setVisibleSortPopWrapper(null); // Hide sort PopWrapper when filter PopWrapper is shown
+    setVisibleSortPopWrapper(null);
   };
-
-  // MODIFIED: Handle sort selection - Reset previous sort and apply new one
   const handleSortSelectionChange = (columnKey, sortValue) => {
-    // If selecting a new column, reset the previous sort
     if (activeSortColumn && activeSortColumn !== columnKey) {
-      // Clear the previous sort
       setActiveSortColumn(columnKey);
       setActiveSortValue(sortValue);
     } else {
-      // Same column or first sort
       setActiveSortColumn(columnKey);
       setActiveSortValue(sortValue);
     }
-
-    // Close the popup after selection
     setVisibleSortPopWrapper(null);
-
-    // Call onSort with both column key and selected sort value
     if (onSort) {
       onSort(columnKey, sortValue);
     }
   };
-
-  // MODIFIED: Handle sort reset - Clear the active sort
   const handleSortReset = columnKey => {
-    // Clear the active sort state
     setActiveSortColumn(null);
     setActiveSortValue(null);
-
-    // Call onSort to notify that sort was reset
     if (onSort) {
       onSort(columnKey, null);
     }
   };
-
-  // Handle filter selection changes - Updated to work with stateless FilterPop
   const handleFilterSelectionChange = (columnKey, selectionData) => {
-    // Force immediate synchronous update using callback form
     setFilterSelections(prev => {
       const updated = {
         ...prev,
@@ -41053,15 +40998,11 @@ const TableHeader = ({
       };
       return updated;
     });
-
-    // Also update filter state
     setFilterState(prev => ({
       ...prev,
       [columnKey]: selectionData.filterData
     }));
   };
-
-  // Handle filter reset - Updated to work with stateless FilterPop
   const handleFilterReset = columnKey => {
     const column = columns.find(col => col.key === columnKey);
     if (column && column.filterOptions) {
@@ -41073,14 +41014,10 @@ const TableHeader = ({
       fullList.forEach(item => {
         resetState[item.value] = true;
       });
-
-      // Update filter selections immediately
       setFilterSelections(prev => ({
         ...prev,
         [columnKey]: resetState
       }));
-
-      // Set filter state to "select all" structure
       const resetFilterData = {
         excluded: [],
         included: [],
@@ -41092,8 +41029,6 @@ const TableHeader = ({
       }));
     }
   };
-
-  // Update the click outside handlers
   useEffect(() => {
     const handleClickOutside = event => {
       if (!event.target.closest(`[data-column="${visibleFilterPopWrapper}"]`) && !event.target.closest('.pop-wrapper')) {
@@ -41116,8 +41051,6 @@ const TableHeader = ({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [visibleSortPopWrapper]);
-
-  // Enhanced position update with better dimension handling
   useEffect(() => {
     const updatePosition = () => {
       if (visibleSortPopWrapper) {
@@ -41134,12 +41067,10 @@ const TableHeader = ({
         }
       }
     };
-
-    // Debounce the position update for better performance
     let timeoutId;
     const debouncedUpdatePosition = () => {
       clearTimeout(timeoutId);
-      timeoutId = setTimeout(updatePosition, 16); // ~60fps
+      timeoutId = setTimeout(updatePosition, 16);
     };
     window.addEventListener('scroll', debouncedUpdatePosition, {
       passive: true
@@ -41167,21 +41098,14 @@ const TableHeader = ({
   const shouldShowActiveIcon = key => {
     return isFilterActive(key) || isFilterFocused(key);
   };
-
-  // MODIFIED: Check if THIS specific column has an active sort
   const shouldShowActiveSortIcon = key => {
     const isFocused = focusedSort === key;
     const isActive = activeSorts.includes(key);
     const hasSelection = activeSortColumn === key && activeSortValue !== null;
     return isFocused || isActive || hasSelection;
   };
-
-  // Handle header checkbox click
   const handleHeaderCheckboxClick = (columnKey, event) => {
-    // Don't prevent the default checkbox behavior
     const newValue = event.target.checked;
-
-    // Fire the callback with column info and new value - let parent handle state
     if (onHeaderCheckboxClick) {
       onHeaderCheckboxClick({
         columnName: columnKey,
@@ -41189,8 +41113,6 @@ const TableHeader = ({
       });
     }
   };
-
-  // UPDATED: showColumnFilter with fixed RangePop integration
   const showColumnFilter = column => {
     const {
       key,
@@ -41225,7 +41147,6 @@ const TableHeader = ({
         }
       });
     } else if (rangeFilter) {
-      // Get the current filter state for this column to persist values
       const currentFilterState = filterState[key];
       return /*#__PURE__*/React$1.createElement(RangePop, {
         menuName: title,
@@ -41269,8 +41190,6 @@ const TableHeader = ({
       });
     }
   };
-
-  // MODIFIED: Pass the selected value only for the active sort column
   const showColumnSort = column => {
     const {
       key,
@@ -41280,8 +41199,6 @@ const TableHeader = ({
     if (!sortOptions || sortOptions.length === 0) {
       return null;
     }
-
-    // Only show selected value if this is the active sort column
     const selectedValue = activeSortColumn === key ? activeSortValue : null;
     return /*#__PURE__*/React$1.createElement(SortPop, {
       width: "300px",
@@ -46928,7 +46845,6 @@ const Table = props => {
     noDataInSearchMessage = "Try to refine your query and search again",
     noDataIcon = "Plus",
     noDataSearchIcon = "Plus",
-    // NEW: Props for NoEventsParent section
     noEventsTitle = "You haven't created any events yet",
     noEventsSubtitle = "Let's get started and create your first one!",
     noEventsButtonText = "New Event",
@@ -46940,17 +46856,14 @@ const Table = props => {
     changeFocusIndex,
     onTableFocusChange = () => {},
     clearFocusOnOutsideClick = true,
-    // NEW: Props for edit mode focus management
     isEditMode = false,
     editRowIndex = -1,
     onCommentSave = () => {},
-    // NEW: Props for expand functionality
     expandable = false,
     expandedRows = {},
     expandedContent = {},
     onExpandRow = () => {},
     expandedBackgroundColor = '#E6F0F0',
-    // New prop
     onDropdownSelected = () => {},
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
@@ -46958,32 +46871,25 @@ const Table = props => {
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
     onEditableClick = () => {},
-    // Accept ref as a regular prop
+    resetFiltersKey = 0,
+    // NEW: Add this prop
     ref = null
   } = props;
   const scrollWrapperRef = useRef(null);
   const tableBodyRef = useRef(null);
   const tableContainerRef = useRef(null);
   const [hasTriggered, setHasTriggered] = useState(false);
-
-  // Expose method to clear table focus to parent components
   const clearTableFocus = () => {
     if (tableBodyRef.current) {
       tableBodyRef.current.clearFocus();
     }
   };
-
-  // Handle focus change from TableBody
   const handleTableFocusChange = focusedRowIndex => {
     onTableFocusChange(focusedRowIndex);
   };
-
-  // Handle comment save - pass through to parent
   const handleCommentSave = (rowIndex, commentText) => {
     onCommentSave(rowIndex, commentText);
   };
-
-  // Expose methods to parent components via ref (if ref is provided)
   useImperativeHandle(ref, () => ({
     clearTableFocus,
     getTableBodyRef: () => tableBodyRef.current
@@ -46997,17 +46903,13 @@ const Table = props => {
         scrollHeight,
         clientHeight
       } = scrollWrapper;
-
-      // Calculate if we're near the bottom
       const isNearBottom = scrollTop + clientHeight >= scrollHeight - 56 * lastRowsThreshold;
       if (isNearBottom && data.length > 0) {
-        // Trigger event only if it hasn't been triggered yet
         if (!hasTriggered) {
           onLastRowsReached();
           setHasTriggered(true);
         }
       } else {
-        // Reset trigger when user scrolls back up outside the threshold
         if (hasTriggered) {
           setHasTriggered(false);
         }
@@ -47016,14 +46918,10 @@ const Table = props => {
     scrollWrapper.addEventListener('scroll', handleScroll);
     return () => scrollWrapper.removeEventListener('scroll', handleScroll);
   }, [onLastRowsReached, data.length, lastRowsThreshold, hasTriggered]);
-
-  // Handle outside click to clear focus - UPDATED to respect edit mode
   useEffect(() => {
-    if (!clearFocusOnOutsideClick || isEditMode) return; // Don't clear focus during edit mode
-
+    if (!clearFocusOnOutsideClick || isEditMode) return;
     const handleOutsideClick = event => {
       if (tableContainerRef.current && !tableContainerRef.current.contains(event.target)) {
-        // Click is outside the table container
         if (tableBodyRef.current) {
           tableBodyRef.current.clearFocus();
         }
@@ -47033,8 +46931,7 @@ const Table = props => {
     return () => {
       document.removeEventListener('mousedown', handleOutsideClick);
     };
-  }, [clearFocusOnOutsideClick, isEditMode]); // Added isEditMode to dependency array
-
+  }, [clearFocusOnOutsideClick, isEditMode]);
   const getNoDataIcon = icon => {
     switch (icon) {
       case "Event":
@@ -47052,7 +46949,6 @@ const Table = props => {
       case "Upc":
         return /*#__PURE__*/React$1.createElement(NoSearchUpcIcon, null);
       case "Ntt":
-        // Nothing to Track
         return /*#__PURE__*/React$1.createElement(NothingToTrackIcon, null);
       default:
         return null;
@@ -47086,7 +46982,8 @@ const Table = props => {
     onSelectAll: onSelectAll,
     expandable: expandable,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
-    headerCheckboxStates: headerCheckboxStates
+    headerCheckboxStates: headerCheckboxStates,
+    resetFiltersKey: resetFiltersKey
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
     ref: tableBodyRef,
     columns: columns,
@@ -47137,8 +47034,6 @@ const Table = props => {
     id: "LoaderWrapper"
   }, /*#__PURE__*/React$1.createElement(Loader, null)))));
 };
-
-// Add displayName for better debugging
 Table.displayName = 'Table';
 
 const Card = styled$1.div`
@@ -58031,7 +57926,9 @@ const OverlayDropdown = _ref => {
     color: !selected && open ? placeHolderColor : "inherit"
   }, group.templateType === 3 && editableDigitalCoupon ? dropdownDigitalCouponTitle !== "" ? dropdownDigitalCouponTitle : item.label : item.label), group.templateType === 2 ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
     fill: item.value === value ? "#fff" : "#212121"
-  }) : group.templateType === 3 && editableDigitalCoupon ? /*#__PURE__*/React$1.createElement(PenIcon, {
+  }) : group.templateType === 3 && editableDigitalCoupon ? dropdownDigitalCouponTitle === "" ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+    fill: item.value === value ? "#fff" : "#212121"
+  }) : /*#__PURE__*/React$1.createElement(PenIcon, {
     fill: item.value === value ? "#fff" : "#212121"
   }) : item.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
     width: "22px",