@rpg-engine/long-bow 0.8.72 → 0.8.74

package/dist/long-bow.cjs.development.js

@@ -29364,6 +29364,45 @@ var EmptyState = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-19q95ue-15"
 })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:", ";width:100%;padding:2rem;svg{font-size:3rem;margin-bottom:1rem;opacity:0.7;}p{font-family:'Press Start 2P',cursive;font-size:0.9rem;margin:0;}"], uiColors.lightGray);
 
+var SearchBar = function SearchBar(_ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    className = _ref.className,
+    rightElement = _ref.rightElement;
+  var hasRightElement = Boolean(rightElement);
+  return React__default.createElement(Container$g, {
+    className: className
+  }, React__default.createElement(Input$1, {
+    type: "text",
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(e.target.value);
+    },
+    placeholder: placeholder,
+    className: "rpgui-input",
+    "$hasRightElement": hasRightElement
+  }), React__default.createElement(IconContainer, null, React__default.createElement(SearchIcon, null), rightElement));
+};
+var Container$g = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchBar__Container",
+  componentId: "sc-13n8z02-0"
+})(["position:relative;width:100%;"]);
+var Input$1 = /*#__PURE__*/styled__default.input.withConfig({
+  displayName: "SearchBar__Input",
+  componentId: "sc-13n8z02-1"
+})(["width:100%;padding-right:", " !important;background:rgba(0,0,0,0.2) !important;border:2px solid #f59e0b !important;box-shadow:0 0 10px rgba(245,158,11,0.3);color:#ffffff !important;font-family:'Press Start 2P',cursive !important;font-size:0.875rem !important;&::placeholder{color:rgba(255,255,255,0.5) !important;}"], function (props) {
+  return props.$hasRightElement ? '6rem' : '2.5rem';
+});
+var IconContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchBar__IconContainer",
+  componentId: "sc-13n8z02-2"
+})(["position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:0.5rem;pointer-events:none;z-index:1;> *{pointer-events:auto;}"]);
+var SearchIcon = /*#__PURE__*/styled__default(fa.FaSearch).withConfig({
+  displayName: "SearchBar__SearchIcon",
+  componentId: "sc-13n8z02-3"
+})(["font-size:1rem;color:#f59e0b;filter:drop-shadow(0 0 2px rgba(245,158,11,0.3));"]);
+
 var formatTaskKey = function formatTaskKey(key) {
   var formatted = key.replace(/[-_]/g, ' ');
   formatted = formatted.replace(/([A-Z])/g, ' $1');
@@ -29448,6 +29487,7 @@ var DailyRewardsTooltip = function DailyRewardsTooltip(_ref) {
   var _React$useState = React__default.useState(true),
     isExpanded = _React$useState[0],
     setIsExpanded = _React$useState[1];
+  var isMobile = shared.isMobileOrTablet();
   var sortedRewards = React__default.useMemo(function () {
     var _REWARD_PRIORITY;
     if (!rewards) return [];
@@ -29465,21 +29505,28 @@ var DailyRewardsTooltip = function DailyRewardsTooltip(_ref) {
   };
   return React__default.createElement(TooltipContainer$1, null, React__default.createElement(CollapsibleHeader, {
     onClick: toggleExpand
-  }, React__default.createElement(HeaderText, null, "Rewards?"), React__default.createElement(ExpandIcon, null, isExpanded ? '▼' : '▶')), isExpanded && React__default.createElement(CollapsibleContent, null, React__default.createElement(RewardsList, null, sortedRewards.map(function (reward, index) {
+  }, React__default.createElement(HeaderText, null, "Rewards?"), React__default.createElement(ExpandIcon, null, isExpanded ? '▼' : '▶')), isExpanded && React__default.createElement(CollapsibleContent, null, React__default.createElement(RewardsList, {
+    isMobile: isMobile,
+    rewardCount: sortedRewards.length
+  }, sortedRewards.map(function (reward, index) {
     var _reward$texturePath, _reward$key;
     return React__default.createElement(RewardItem, {
       key: index
-    }, React__default.createElement(SpriteFromAtlas, {
+    }, React__default.createElement(RewardIcon, null, React__default.createElement(SpriteFromAtlas, {
       atlasJSON: itemsAtlasJSON,
       atlasIMG: itemsAtlasIMG,
       spriteKey: (_reward$texturePath = reward.texturePath) != null ? _reward$texturePath : 'check.png',
-      width: 24,
-      height: 24,
-      imgScale: 1.75
-    }), React__default.createElement(ItemContent, null, React__default.createElement(RewardLabel, null, React__default.createElement(Ellipsis, {
+      width: isMobile ? 16 : 18,
+      height: isMobile ? 16 : 18,
+      imgScale: isMobile ? 1.5 : 1.5
+    })), React__default.createElement(RewardContent, null, React__default.createElement(RewardLabel, {
+      isMobile: isMobile
+    }, React__default.createElement(Ellipsis, {
       maxWidth: "100%",
-      maxLines: 2
-    }, formatTaskKey((_reward$key = reward.key) != null ? _reward$key : reward.type), ":"))), React__default.createElement(RewardValue, null, "x", reward.quantity));
+      maxLines: 1
+    }, formatTaskKey((_reward$key = reward.key) != null ? _reward$key : reward.type))), React__default.createElement(RewardValue, {
+      isMobile: isMobile
+    }, "\xD7", reward.quantity)));
   }))));
 };
 var TooltipContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
@@ -29489,7 +29536,13 @@ var TooltipContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
 var RewardsList = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyRewardsTooltip__RewardsList",
   componentId: "sc-wxzcu4-1"
-})(["display:flex;flex-direction:column;gap:8px;width:100%;"]);
+})(["display:grid;grid-template-columns:", ";gap:", ";column-gap:", ";width:100%;"], function (props) {
+  return props.rewardCount > 2 && !props.isMobile ? 'repeat(2, 1fr)' : '1fr';
+}, function (props) {
+  return props.isMobile ? '6px' : '8px';
+}, function (props) {
+  return props.rewardCount > 2 && !props.isMobile ? '16px' : '8px';
+});
 var CollapsibleHeader = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyRewardsTooltip__CollapsibleHeader",
   componentId: "sc-wxzcu4-2"
@@ -29497,37 +29550,45 @@ var CollapsibleHeader = /*#__PURE__*/styled__default.div.withConfig({
 var HeaderText = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DailyRewardsTooltip__HeaderText",
   componentId: "sc-wxzcu4-3"
-})(["color:", " !important;"], uiColors.yellow);
+})(["color:", " !important;font-size:0.75rem;font-weight:500;"], uiColors.yellow);
 var ExpandIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DailyRewardsTooltip__ExpandIcon",
   componentId: "sc-wxzcu4-4"
-})(["color:", ";font-size:0.8rem;margin-left:8px;"], uiColors.yellow);
+})(["color:", ";font-size:0.7rem;margin-left:8px;"], uiColors.yellow);
 var CollapsibleContent = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyRewardsTooltip__CollapsibleContent",
   componentId: "sc-wxzcu4-5"
-})(["display:block;padding-top:8px;width:100%;"]);
+})(["display:block;padding-top:6px;width:100%;"]);
 var RewardItem = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyRewardsTooltip__RewardItem",
   componentId: "sc-wxzcu4-6"
-})(["display:flex;align-items:center;gap:12px;width:100%;min-width:200px;"]);
-var ItemContent = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "DailyRewardsTooltip__ItemContent",
+})(["display:flex;align-items:center;gap:4px;width:100%;padding:2px;min-height:22px;"]);
+var RewardIcon = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyRewardsTooltip__RewardIcon",
   componentId: "sc-wxzcu4-7"
-})(["display:flex;flex-direction:column;justify-content:center;"]);
+})(["flex-shrink:0;width:20px;height:20px;display:flex;align-items:flex-start;justify-content:flex-start;font-style:normal;margin-right:4px;*{font-style:normal !important;}position:relative;left:-0.5rem;top:-0.4rem;"]);
+var RewardContent = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyRewardsTooltip__RewardContent",
+  componentId: "sc-wxzcu4-8"
+})(["display:flex;justify-content:space-between;align-items:center;flex:1;min-width:0;"]);
 var RewardLabel = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DailyRewardsTooltip__RewardLabel",
-  componentId: "sc-wxzcu4-8"
-})(["color:", ";font-size:0.9rem;line-height:1.2;padding-top:15px;display:inline-flex;align-items:center;"], uiColors.yellow);
+  componentId: "sc-wxzcu4-9"
+})(["color:", ";font-size:", ";line-height:1.2;display:flex;align-items:center;flex:1;min-width:0;"], uiColors.yellow, function (props) {
+  return props.isMobile ? '0.65rem' : '0.7rem';
+});
 var RewardValue = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DailyRewardsTooltip__RewardValue",
-  componentId: "sc-wxzcu4-9"
-})(["color:", ";font-size:0.9rem;margin-left:auto;line-height:1.2;display:inline-flex;align-items:center;min-width:50px;text-align:right;"], uiColors.yellow);
+  componentId: "sc-wxzcu4-10"
+})(["color:", ";font-size:", ";line-height:1.2;display:flex;align-items:center;font-weight:600;flex-shrink:0;margin-left:8px;"], uiColors.green, function (props) {
+  return props.isMobile ? '0.6rem' : '0.65rem';
+});
 
 var ReadOnlyCheckItem = function ReadOnlyCheckItem(_ref) {
   var labelLeft = _ref.labelLeft,
     labelRight = _ref.labelRight,
     checked = _ref.checked;
-  return React__default.createElement(Container$g, null, labelLeft && React__default.createElement(Label, null, labelLeft), React__default.createElement("div", {
+  return React__default.createElement(Container$h, null, labelLeft && React__default.createElement(Label, null, labelLeft), React__default.createElement("div", {
     className: "rpgui-checkbox-container"
   }, React__default.createElement(CheckBox, {
     className: "rpgui-checkbox",
@@ -29538,7 +29599,7 @@ var ReadOnlyCheckItem = function ReadOnlyCheckItem(_ref) {
     isRight: true
   }, labelRight));
 };
-var Container$g = /*#__PURE__*/styled__default.div.withConfig({
+var Container$h = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ReadOnlyCheckItem__Container",
   componentId: "sc-1peplf9-0"
 })(["display:flex;align-items:center;width:100%;height:20px;"]);
@@ -29625,56 +29686,6 @@ var CheckItemWrapper = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-hm6sp1-3"
 })(["display:flex;justify-content:center;width:100%;height:20px;input.rpgui-checkbox + label{margin:0 !important;padding-left:23px !important;}"]);
 
-var TaskProgress = function TaskProgress(_ref) {
-  var task = _ref.task,
-    itemsAtlasJSON = _ref.itemsAtlasJSON,
-    itemsAtlasIMG = _ref.itemsAtlasIMG,
-    iconAtlasJSON = _ref.iconAtlasJSON,
-    iconAtlasIMG = _ref.iconAtlasIMG;
-  var difficulty = task.difficulty;
-  return React__default.createElement(ProgressContainer, null, React__default.createElement(ProgressList$1, null, React__default.createElement(ProgressItem$1, null, React__default.createElement(ProgressLabel, null, "Difficulty:"), React__default.createElement(TaskDifficulty, {
-    difficulty: difficulty
-  }, formatDifficulty(difficulty))), React__default.createElement(ProgressItem$1, null, React__default.createElement(ProgressLabel, null, "Status:"), React__default.createElement(StatusText, {
-    color: getStatusInfo(task).color
-  }, getStatusInfo(task).text)), React__default.createElement(TaskProgressDetails, {
-    task: task
-  }), task.rewards && task.rewards.length > 0 && React__default.createElement(ProgressItem$1, null, React__default.createElement(DailyRewardsTooltip, {
-    rewards: task.rewards,
-    itemsAtlasJSON: itemsAtlasJSON,
-    itemsAtlasIMG: itemsAtlasIMG,
-    iconAtlasJSON: iconAtlasJSON,
-    iconAtlasIMG: iconAtlasIMG
-  }))));
-};
-var ProgressContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TaskProgress__ProgressContainer",
-  componentId: "sc-1ejoyu-0"
-})(["width:100%;position:relative;"]);
-var ProgressList$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TaskProgress__ProgressList",
-  componentId: "sc-1ejoyu-1"
-})(["display:flex;flex-direction:column;gap:6px;"]);
-var ProgressItem$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TaskProgress__ProgressItem",
-  componentId: "sc-1ejoyu-2"
-})(["display:flex;justify-content:space-between;align-items:center;"]);
-var ProgressLabel = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "TaskProgress__ProgressLabel",
-  componentId: "sc-1ejoyu-3"
-})(["color:", " !important;"], uiColors.white);
-var TaskDifficulty = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "TaskProgress__TaskDifficulty",
-  componentId: "sc-1ejoyu-4"
-})(["color:", " !important;"], function (props) {
-  return props.difficulty.toLowerCase() === 'challenge' ? uiColors.red : uiColors.lightGray;
-});
-var StatusText = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "TaskProgress__StatusText",
-  componentId: "sc-1ejoyu-5"
-})(["color:", " !important;font-weight:bold;"], function (props) {
-  return props.color;
-});
-
 var DailyTaskItem = function DailyTaskItem(_ref) {
   var _task$name;
   var task = _ref.task,
@@ -29687,69 +29698,170 @@ var DailyTaskItem = function DailyTaskItem(_ref) {
     isRewardClaimed = _ref.isRewardClaimed;
   var isMobile = shared.isMobileOrTablet();
   var isCompleted = task.status === shared.TaskStatus.Completed;
+  var isInProgress = task.status === shared.TaskStatus.InProgress;
+  var isNotStarted = task.status === shared.TaskStatus.NotStarted;
   var isClaimed = task.claimed || isRewardClaimed;
   var handleClaimReward = function handleClaimReward() {
     onClaimReward(task.key, task.type);
   };
-  return React__default.createElement(TaskContainer, null, React__default.createElement(TaskHeader, null, iconAtlasJSON && iconAtlasIMG && React__default.createElement(NonInteractiveWrapper, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(TaskContainer, {
+    isMobile: isMobile,
+    isCompleted: isCompleted,
+    isInProgress: isInProgress,
+    isNotStarted: isNotStarted
+  }, React__default.createElement(TaskHeader, null, React__default.createElement(TaskHeaderLeft, null, iconAtlasJSON && iconAtlasIMG && React__default.createElement(IconWrapper, null, React__default.createElement(SpriteFromAtlas, {
     atlasJSON: iconAtlasJSON,
     atlasIMG: iconAtlasIMG,
     spriteKey: spriteKey,
-    width: 12,
-    height: 12,
-    imgScale: 2.75
-  })), React__default.createElement(TaskContent, null, React__default.createElement(TaskTitle, null, React__default.createElement(Ellipsis, {
+    width: isMobile ? 10 : 12,
+    height: isMobile ? 10 : 12,
+    imgScale: 2
+  })), React__default.createElement(TaskTitleSection, null, React__default.createElement(TaskTitle, {
+    isMobile: isMobile
+  }, React__default.createElement(Ellipsis, {
     maxWidth: "100%",
-    maxLines: isMobile ? 3 : 2
-  }, (_task$name = task.name) != null ? _task$name : formatTaskKey(task.key))), React__default.createElement(TaskDescription, null, React__default.createElement(Ellipsis, {
+    maxLines: 1
+  }, (_task$name = task.name) != null ? _task$name : formatTaskKey(task.key))), React__default.createElement(TaskMeta, {
+    isMobile: isMobile
+  }, React__default.createElement(MetaItem, null, React__default.createElement(MetaLabel, null, "Difficulty:"), React__default.createElement(TaskDifficulty, {
+    difficulty: task.difficulty
+  }, formatDifficulty(task.difficulty))), React__default.createElement(MetaDivider, null, "\u2022"), React__default.createElement(MetaItem, null, React__default.createElement(MetaLabel, null, "Status:"), React__default.createElement(StatusText, {
+    color: getStatusInfo(task).color
+  }, getStatusInfo(task).text))))), React__default.createElement(TaskHeaderRight, null, isClaimed && React__default.createElement(ClaimedBadge, {
+    isMobile: isMobile
+  }, "\u2713"))), React__default.createElement(TaskBody, null, React__default.createElement(TaskDescription, {
+    isMobile: isMobile
+  }, React__default.createElement(Ellipsis, {
     maxWidth: "100%",
-    maxLines: isMobile ? 5 : 3
-  }, task.description)))), React__default.createElement(TaskProgress, {
-    task: task,
+    maxLines: isMobile ? 2 : 1
+  }, task.description)), React__default.createElement(TaskProgressDetails, {
+    task: task
+  }), task.rewards && task.rewards.length > 0 && React__default.createElement(RewardsSection, null, React__default.createElement(DailyRewardsTooltip, {
+    rewards: task.rewards,
     itemsAtlasJSON: itemsAtlasJSON,
-    itemsAtlasIMG: itemsAtlasIMG
-  }), isCompleted && !isClaimed && React__default.createElement(CollectWrapper, null, React__default.createElement(Button, {
+    itemsAtlasIMG: itemsAtlasIMG,
+    iconAtlasJSON: iconAtlasJSON,
+    iconAtlasIMG: iconAtlasIMG
+  }))), isCompleted && !isClaimed && React__default.createElement(TaskFooter, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: handleClaimReward
-  }, "Collect Reward")), isClaimed && React__default.createElement(ClaimedText, null, "Reward Claimed"));
+  }, isMobile ? 'Collect Reward' : 'Collect Reward')));
 };
+var pulseAnimation = /*#__PURE__*/styled.keyframes(["0%{box-shadow:0 1px 2px rgba(0,0,0,0.4);}50%{box-shadow:0 2px 8px rgba(255,215,0,0.3);}100%{box-shadow:0 1px 2px rgba(0,0,0,0.4);}"]);
 var TaskContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyTaskItem__TaskContainer",
   componentId: "sc-45bxmt-0"
-})(["background:rgba(0,0,0,0.5) !important;border:2px solid ", " !important;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 4px rgba(0,0,0,0.3);"], uiColors.darkGray);
+})(["background:rgba(0,0,0,0.6) !important;border:1px solid ", " !important;border-radius:", ";padding:", ";display:flex;flex-direction:column;gap:", ";box-shadow:0 1px 2px rgba(0,0,0,0.4);transition:all 0.2s ease;font-style:normal;width:100%;max-width:100%;box-sizing:border-box;opacity:", ";", " ", " *{font-style:normal !important;}&:hover{background:", " !important;border-color:", ";opacity:", ";}"], function (props) {
+  return props.isCompleted ? uiColors.green : props.isInProgress ? uiColors.yellow : uiColors.darkGray;
+}, function (props) {
+  return props.isMobile ? '4px' : '6px';
+}, function (props) {
+  return props.isMobile ? '6px' : '8px';
+}, function (props) {
+  return props.isMobile ? '4px' : '6px';
+}, function (props) {
+  return props.isCompleted ? 1 : props.isInProgress ? 1 : 0.6;
+}, function (props) {
+  return props.isNotStarted && "\n    filter: grayscale(0.7);\n  ";
+}, function (props) {
+  return props.isInProgress && styled.css(["animation:", " 2s ease-in-out infinite;"], pulseAnimation);
+}, function (props) {
+  return props.isPinned ? 'rgba(255, 215, 0, 0.25)' : 'rgba(0, 0, 0, 0.7)';
+}, function (props) {
+  return props.isPinned ? uiColors.yellow : props.isCompleted ? uiColors.green : props.isInProgress ? uiColors.yellow : uiColors.yellow;
+}, function (props) {
+  return props.isNotStarted ? 0.8 : 1;
+});
 var TaskHeader = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyTaskItem__TaskHeader",
   componentId: "sc-45bxmt-1"
-})(["display:flex;width:100%;justify-content:center;border-bottom:1.3px solid ", ";"], uiColors.darkGray);
-var NonInteractiveWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "DailyTaskItem__NonInteractiveWrapper",
+})(["display:flex;width:100%;justify-content:space-between;align-items:flex-start;border-bottom:1px solid ", ";padding-bottom:6px;min-height:36px;"], uiColors.darkGray);
+var TaskHeaderLeft = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__TaskHeaderLeft",
   componentId: "sc-45bxmt-2"
-})(["pointer-events:none;user-select:none;margin-top:5px;"]);
-var TaskContent = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "DailyTaskItem__TaskContent",
+})(["display:flex;align-items:flex-start;gap:8px;flex:1;"]);
+var TaskHeaderRight = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__TaskHeaderRight",
   componentId: "sc-45bxmt-3"
-})(["display:flex;flex-direction:column;flex:1;"]);
-var TaskTitle = /*#__PURE__*/styled__default.h3.withConfig({
-  displayName: "DailyTaskItem__TaskTitle",
+})(["display:flex;align-items:center;flex-shrink:0;"]);
+var TaskTitleSection = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__TaskTitleSection",
   componentId: "sc-45bxmt-4"
-})(["&&{color:", ";padding-left:10px;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,0.7);flex:1;display:block;span{color:inherit;}}"], uiColors.yellow);
-var TaskDescription = /*#__PURE__*/styled__default.h3.withConfig({
-  displayName: "DailyTaskItem__TaskDescription",
+})(["display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;"]);
+var TaskMeta = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__TaskMeta",
   componentId: "sc-45bxmt-5"
-})(["font-size:0.6rem !important;text-decoration:none !important;a"]);
-var ClaimedText = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "DailyTaskItem__ClaimedText",
+})(["display:flex;align-items:center;gap:", ";flex-wrap:wrap;"], function (props) {
+  return props.isMobile ? '6px' : '8px';
+});
+var MetaItem = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__MetaItem",
   componentId: "sc-45bxmt-6"
-})(["color:", ";font-size:0.9rem;text-align:center;font-weight:bold;"], uiColors.green);
-var CollectWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "DailyTaskItem__CollectWrapper",
+})(["display:flex;align-items:center;gap:4px;"]);
+var MetaLabel = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DailyTaskItem__MetaLabel",
   componentId: "sc-45bxmt-7"
-})(["&&{width:100% !important;display:flex !important;justify-content:center !important;align-items:center !important;margin:5px 0 !important;}"]);
+})(["color:", ";font-size:0.65rem;opacity:0.8;"], uiColors.lightGray);
+var MetaDivider = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DailyTaskItem__MetaDivider",
+  componentId: "sc-45bxmt-8"
+})(["color:", ";font-size:0.7rem;"], uiColors.darkGray);
+var TaskDifficulty = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DailyTaskItem__TaskDifficulty",
+  componentId: "sc-45bxmt-9"
+})(["color:", ";font-size:0.65rem;font-weight:500;"], function (props) {
+  return props.difficulty.toLowerCase() === 'challenge' ? uiColors.red : uiColors.lightGray;
+});
+var StatusText = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DailyTaskItem__StatusText",
+  componentId: "sc-45bxmt-10"
+})(["color:", ";font-size:0.65rem;font-weight:500;"], function (props) {
+  return props.color;
+});
+var ClaimedBadge = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__ClaimedBadge",
+  componentId: "sc-45bxmt-11"
+})(["background:", ";color:white;border-radius:50%;width:", ";height:", ";display:flex;align-items:center;justify-content:center;font-size:", ";font-weight:bold;"], uiColors.green, function (props) {
+  return props.isMobile ? '18px' : '20px';
+}, function (props) {
+  return props.isMobile ? '18px' : '20px';
+}, function (props) {
+  return props.isMobile ? '10px' : '12px';
+});
+var TaskBody = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__TaskBody",
+  componentId: "sc-45bxmt-12"
+})(["display:flex;flex-direction:column;gap:8px;padding:6px 0;"]);
+var RewardsSection = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__RewardsSection",
+  componentId: "sc-45bxmt-13"
+})(["margin-top:4px;"]);
+var TaskFooter = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__TaskFooter",
+  componentId: "sc-45bxmt-14"
+})(["display:flex;justify-content:center;padding-top:6px;border-top:1px solid ", ";"], uiColors.darkGray);
+var IconWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__IconWrapper",
+  componentId: "sc-45bxmt-15"
+})(["pointer-events:none;user-select:none;flex-shrink:0;width:28px;height:28px;display:flex;align-items:flex-start;justify-content:flex-start;margin-top:2px;margin-left:2px;font-style:normal;*{font-style:normal !important;}"]);
+var TaskTitle = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "DailyTaskItem__TaskTitle",
+  componentId: "sc-45bxmt-16"
+})(["&&{color:", ";margin:0;padding:0;text-align:left;font-size:", ";line-height:1.2;text-shadow:1px 1px 2px rgba(0,0,0,0.7);font-weight:600;word-wrap:break-word;overflow-wrap:break-word;span{color:inherit;}}"], uiColors.yellow, function (props) {
+  return props.isMobile ? '0.85rem' : '0.9rem';
+});
+var TaskDescription = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTaskItem__TaskDescription",
+  componentId: "sc-45bxmt-17"
+})(["color:", ";font-size:", ";line-height:1.4;margin:0;opacity:0.9;word-wrap:break-word;overflow-wrap:break-word;"], uiColors.lightGray, function (props) {
+  return props.isMobile ? '0.7rem' : '0.75rem';
+});
 
 var GlobalDailyProgress = function GlobalDailyProgress(_ref) {
   var tasks = _ref.tasks,
     onClaimAllRewards = _ref.onClaimAllRewards,
     globalRewardClaimed = _ref.globalRewardClaimed;
+  var isMobile = shared.isMobileOrTablet();
   var totalTasks = tasks.length;
   var completedTasks = tasks.filter(function (task) {
     return task.status === shared.TaskStatus.Completed;
@@ -29773,47 +29885,65 @@ var GlobalDailyProgress = function GlobalDailyProgress(_ref) {
       tasks: taskIdentifiers
     });
   };
-  return React__default.createElement(GlobalProgressContainer, null, React__default.createElement(HeaderContainer$1, null, React__default.createElement(GlobeIcon, null, "\uD83C\uDF0D"), React__default.createElement(ProgressText, null, "Global Tasks Completed: ", completedTasks, "/", totalTasks)), React__default.createElement(ProgressBar, null, React__default.createElement(ProgressFill, {
+  return React__default.createElement(GlobalProgressContainer, {
+    isMobile: isMobile
+  }, React__default.createElement(HeaderContainer$1, null, React__default.createElement(GlobeIcon, null, "\uD83C\uDF0D"), React__default.createElement(ProgressText, {
+    isMobile: isMobile
+  }, isMobile ? completedTasks + "/" + totalTasks + " Complete" : "Global Tasks: " + completedTasks + "/" + totalTasks)), React__default.createElement(ProgressBar, null, React__default.createElement(ProgressFill, {
     percentage: completedTasks / totalTasks * 100
-  })), allCompleted && React__default.createElement(React__default.Fragment, null, shouldShowGlobalButton && React__default.createElement(CollectWrapper$1, null, React__default.createElement(Button, {
+  })), allCompleted && React__default.createElement(React__default.Fragment, null, shouldShowGlobalButton && React__default.createElement(CollectWrapper, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: handleClaimAll
-  }, "Collect Global Rewards")), shouldShowClaimedMessage && React__default.createElement(ClaimedText$1, null, "Global Rewards Claimed")));
+  }, isMobile ? 'Global Rewards' : 'Collect Global Rewards')), shouldShowClaimedMessage && React__default.createElement(ClaimedText, {
+    isMobile: isMobile
+  }, "\u2713 Global Rewards Claimed")));
 };
 var GlobalProgressContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "GlobalDailyProgress__GlobalProgressContainer",
   componentId: "sc-d7q4xm-0"
-})(["background:rgba(0,0,0,0.5) !important;border:2px solid ", " !important;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 4px rgba(0,0,0,0.3);"], uiColors.darkGray);
+})(["background:rgba(0,0,0,0.6) !important;border:1px solid ", " !important;border-radius:", ";padding:", ";display:flex;flex-direction:column;gap:", ";box-shadow:0 1px 2px rgba(0,0,0,0.4);margin-bottom:", ";"], uiColors.blue, function (props) {
+  return props.isMobile ? '4px' : '6px';
+}, function (props) {
+  return props.isMobile ? '6px' : '8px';
+}, function (props) {
+  return props.isMobile ? '6px' : '8px';
+}, function (props) {
+  return props.isMobile ? '4px' : '6px';
+});
 var HeaderContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "GlobalDailyProgress__HeaderContainer",
   componentId: "sc-d7q4xm-1"
-})(["display:flex;align-items:center;gap:8px;margin-bottom:8px;"]);
+})(["display:flex;align-items:center;gap:6px;margin-bottom:2px;"]);
 var GlobeIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "GlobalDailyProgress__GlobeIcon",
   componentId: "sc-d7q4xm-2"
-})(["font-size:1.5rem !important;line-height:1;color:", ";display:flex;align-items:center;justify-content:center;"], uiColors.blue);
+})(["font-size:1rem !important;line-height:1;color:", ";display:flex;align-items:center;justify-content:center;"], uiColors.blue);
 var ProgressText = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "GlobalDailyProgress__ProgressText",
   componentId: "sc-d7q4xm-3"
-})(["color:", ";text-align:center !important;margin-top:8px;line-height:1.2;"], uiColors.white);
+})(["color:", ";font-size:", ";font-weight:500;flex:1;line-height:1.2;"], uiColors.white, function (props) {
+  return props.isMobile ? '0.75rem' : '0.8rem';
+});
 var ProgressBar = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "GlobalDailyProgress__ProgressBar",
   componentId: "sc-d7q4xm-4"
-})(["width:100%;height:8px;background:", ";border-radius:4px;overflow:hidden;"], uiColors.darkGray);
+})(["width:100%;height:4px;background:", ";border-radius:2px;overflow:hidden;"], uiColors.darkGray);
 var ProgressFill = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "GlobalDailyProgress__ProgressFill",
   componentId: "sc-d7q4xm-5"
 })(["width:", "%;height:100%;background:", ";transition:width 0.3s ease;"], function (props) {
   return props.percentage;
 }, uiColors.green);
-var ClaimedText$1 = /*#__PURE__*/styled__default.span.withConfig({
+var ClaimedText = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "GlobalDailyProgress__ClaimedText",
   componentId: "sc-d7q4xm-6"
-})(["color:", ";font-size:0.9rem;text-align:center;margin-top:8px;font-weight:bold;"], uiColors.green);
-var CollectWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+})(["color:", ";font-size:", ";text-align:center;font-weight:bold;display:flex;align-items:center;justify-content:center;gap:4px;"], uiColors.green, function (props) {
+  return props.isMobile ? '0.8rem' : '0.9rem';
+});
+var CollectWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "GlobalDailyProgress__CollectWrapper",
   componentId: "sc-d7q4xm-7"
-})(["&&{width:100% !important;display:flex !important;justify-content:center !important;align-items:center !important;margin:5px 0 !important;}"]);
+})(["&&{width:100% !important;display:flex !important;justify-content:center !important;align-items:center !important;margin:4px 0 !important;}"]);
 
 var DailyTasks = function DailyTasks(_ref) {
   var tasks = _ref.tasks,
@@ -29830,13 +29960,23 @@ var DailyTasks = function DailyTasks(_ref) {
     globalRewardClaimed = _ref$globalRewardClai === void 0 ? false : _ref$globalRewardClai;
   var _React$useState = React__default.useState(tasks),
     localTasks = _React$useState[0];
-  var size = useResponsiveSize(scale);
+  var isMobile = shared.isMobileOrTablet();
   var _useState = React.useState([]),
     claimedTasks = _useState[0],
     setClaimedTasks = _useState[1];
   var _useState2 = React.useState(false),
     globalRewardClaimedLocal = _useState2[0],
     setGlobalRewardClaimedLocal = _useState2[1];
+  // Search and filter state
+  var _useState3 = React.useState(''),
+    searchQuery = _useState3[0],
+    setSearchQuery = _useState3[1];
+  var _useState4 = React.useState('all'),
+    selectedStatus = _useState4[0],
+    setSelectedStatus = _useState4[1];
+  var _useLocalStorage = useLocalStorage('dailyTasks.pinned', []),
+    pinnedTasks = _useLocalStorage[0],
+    setPinnedTasks = _useLocalStorage[1];
   var handleClaimReward = function handleClaimReward(taskKey, taskType) {
     onClaimReward({
       taskKey: taskKey,
@@ -29853,23 +29993,83 @@ var DailyTasks = function DailyTasks(_ref) {
   var isTaskRewardClaimed = function isTaskRewardClaimed(taskKey) {
     return claimedTasks.includes(taskKey);
   };
-  if (!size) return null;
+  var togglePinTask = function togglePinTask(taskKey) {
+    setPinnedTasks(function (prev) {
+      return prev.includes(taskKey) ? prev.filter(function (key) {
+        return key !== taskKey;
+      }) : [].concat(prev, [taskKey]);
+    });
+  };
+  // Filter options using Store pattern
+  var statusOptions = [{
+    id: 0,
+    value: 'all',
+    option: 'All'
+  }, {
+    id: 1,
+    value: 'pinned',
+    option: 'Pinned'
+  }, {
+    id: 2,
+    value: 'completed',
+    option: 'Completed'
+  }, {
+    id: 3,
+    value: 'inprogress',
+    option: 'In Progress'
+  }, {
+    id: 4,
+    value: 'notstarted',
+    option: 'Not Started'
+  }];
+  // Filtered tasks using InformationCenter pattern
+  var filteredTasks = React.useMemo(function () {
+    var filtered = localTasks.filter(function (task) {
+      var _task$name, _task$description;
+      var matchesSearch = ((_task$name = task.name) == null ? void 0 : _task$name.toLowerCase().includes(searchQuery.toLowerCase())) || ((_task$description = task.description) == null ? void 0 : _task$description.toLowerCase().includes(searchQuery.toLowerCase())) || task.key.toLowerCase().includes(searchQuery.toLowerCase());
+      var matchesStatus = selectedStatus === 'all' || selectedStatus === 'pinned' && pinnedTasks.includes(task.key) || selectedStatus === 'completed' && task.status === shared.TaskStatus.Completed || selectedStatus === 'inprogress' && task.status === shared.TaskStatus.InProgress || selectedStatus === 'notstarted' && task.status === shared.TaskStatus.NotStarted;
+      return matchesSearch && matchesStatus;
+    });
+    // Sort with pinned tasks first
+    return filtered.sort(function (a, b) {
+      var aIsPinned = pinnedTasks.includes(a.key);
+      var bIsPinned = pinnedTasks.includes(b.key);
+      if (aIsPinned && !bIsPinned) return -1;
+      if (!aIsPinned && bIsPinned) return 1;
+      return 0;
+    });
+  }, [localTasks, searchQuery, selectedStatus, pinnedTasks]);
   return React__default.createElement(TasksContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     onCloseButton: onClose,
     cancelDrag: ".tasks-container",
     scale: scale,
-    width: size.width,
-    height: size.height
-  }, React__default.createElement(TaskTitle$1, null, "Daily Tasks"), React__default.createElement(Container$h, null, React__default.createElement(TasksList, {
-    className: "tasks-container"
-  }, React__default.createElement(GlobalDailyProgress, {
+    width: isMobile ? '100vw' : 'max(50vw, 900px)',
+    height: isMobile ? '100vh' : 'min(85vh, 800px)',
+    isMobile: isMobile
+  }, React__default.createElement(TaskTitle$1, {
+    isMobile: isMobile
+  }, "Daily Tasks"), React__default.createElement(Container$i, {
+    isMobile: isMobile
+  }, React__default.createElement(GlobalProgressFixed, null, React__default.createElement(GlobalDailyProgress, {
     tasks: localTasks,
     onClaimAllRewards: handleClaimGlobalRewards,
     globalRewardClaimed: globalRewardClaimed || globalRewardClaimedLocal
-  }), localTasks.map(function (task) {
-    return React__default.createElement(DailyTaskItem, {
-      key: task.key,
+  })), React__default.createElement(SearchHeader, null, React__default.createElement(SearchBarContainer, null, React__default.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: setSearchQuery,
+    placeholder: "Search tasks..."
+  })), React__default.createElement(DropdownContainer, null, React__default.createElement(Dropdown, {
+    options: statusOptions,
+    onChange: setSelectedStatus,
+    width: "100%"
+  }))), React__default.createElement(TasksList, {
+    className: "tasks-container",
+    isMobile: isMobile
+  }, filteredTasks.length > 0 ? filteredTasks.map(function (task) {
+    return React__default.createElement(TaskWrapper, {
+      key: task.key
+    }, React__default.createElement(DailyTaskItem, {
       task: task,
       spriteKey: getTaskIcon(task.type, task.difficulty),
       onClaimReward: handleClaimReward,
@@ -29877,26 +30077,86 @@ var DailyTasks = function DailyTasks(_ref) {
       itemsAtlasIMG: itemsAtlasIMG,
       iconAtlasJSON: iconAtlasJSON,
       iconAtlasIMG: iconAtlasIMG,
-      isRewardClaimed: task.claimed || isTaskRewardClaimed(task.key)
-    });
-  }))));
+      isRewardClaimed: task.claimed || isTaskRewardClaimed(task.key),
+      isPinned: pinnedTasks.includes(task.key)
+    }), React__default.createElement(PinButton$1, {
+      onClick: function onClick() {
+        return togglePinTask(task.key);
+      },
+      isPinned: pinnedTasks.includes(task.key)
+    }, React__default.createElement(fa.FaThumbtack, {
+      size: 10
+    })));
+  }) : React__default.createElement(EmptyState$1, null, React__default.createElement(fa.FaClipboardList, {
+    size: 48
+  }), React__default.createElement("p", null, searchQuery || selectedStatus !== 'all' ? 'No tasks match your criteria.' : 'No daily tasks available.')))));
 };
 var TasksContainer = /*#__PURE__*/styled__default(DraggableContainer).withConfig({
   displayName: "DailyTasks__TasksContainer",
   componentId: "sc-ittn77-0"
-})(["min-width:450px;max-width:550px;margin:0 auto;.rpgui-container-title{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;}.rpgui-container{padding:0 !important;overflow:hidden !important;background-color:rgba(30,30,30,0.9) !important;}"]);
-var Container$h = /*#__PURE__*/styled__default.div.withConfig({
+})(["", " .rpgui-container-title{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;", "}.rpgui-container{padding:0 !important;overflow:hidden !important;background-color:rgba(30,30,30,0.98) !important;", "}"], function (props) {
+  return props.isMobile ? "\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    margin: 0 !important;\n    z-index: 1000 !important;\n  " : "\n    margin: 0 auto;\n    min-width: 50vw;\n  ";
+}, function (props) {
+  return props.isMobile ? 'padding: 8px 0;' : '';
+}, function (props) {
+  return props.isMobile ? "\n      border-radius: 0 !important;\n      height: 100vh !important;\n      width: 100vw !important;\n    " : '';
+});
+var Container$i = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyTasks__Container",
   componentId: "sc-ittn77-1"
-})(["width:100%;max-width:100%;margin:0 auto;padding:0.125rem;overflow-y:auto;box-sizing:border-box;@media (min-width:320px){padding:0.25rem;}@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.75rem;}"]);
+})(["width:100%;height:100%;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background-color:transparent;display:flex;flex-direction:column;"]);
 var TasksList = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DailyTasks__TasksList",
   componentId: "sc-ittn77-2"
-})(["display:flex;flex-direction:column;gap:12px;padding:15px;max-height:70vh;"]);
+})(["display:flex;flex-direction:column;gap:", ";padding:", ";overflow-y:auto;flex:1;background-color:transparent;", ""], function (props) {
+  return props.isMobile ? '8px' : '12px';
+}, function (props) {
+  return props.isMobile ? '8px' : '12px';
+}, function (props) {
+  return props.isMobile ? "\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: thin;\n  " : '';
+});
+var GlobalProgressFixed = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTasks__GlobalProgressFixed",
+  componentId: "sc-ittn77-3"
+})(["flex-shrink:0;padding:8px 12px;background-color:transparent;"]);
+var SearchHeader = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTasks__SearchHeader",
+  componentId: "sc-ittn77-4"
+})(["display:flex;gap:12px;padding:12px 12px 8px 12px;border-bottom:1px solid ", ";background:rgba(0,0,0,0.3);"], uiColors.darkGray);
+var SearchBarContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTasks__SearchBarContainer",
+  componentId: "sc-ittn77-5"
+})(["flex:3;"]);
+var DropdownContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTasks__DropdownContainer",
+  componentId: "sc-ittn77-6"
+})(["flex:1;min-width:120px;"]);
+var TaskWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTasks__TaskWrapper",
+  componentId: "sc-ittn77-7"
+})(["position:relative;width:100%;"]);
+var PinButton$1 = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "DailyTasks__PinButton",
+  componentId: "sc-ittn77-8"
+})(["position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.7);color:", ";border:1px solid ", ";cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all 0.2s ease;z-index:10;width:20px;height:20px;&:hover{color:", ";background:rgba(0,0,0,0.9);border-color:", ";}", ""], function (props) {
+  return props.isPinned ? uiColors.yellow : uiColors.lightGray;
+}, function (props) {
+  return props.isPinned ? uiColors.yellow : 'transparent';
+}, uiColors.yellow, uiColors.yellow, function (props) {
+  return props.isPinned && "\n    transform: rotate(45deg);\n  ";
+});
+var EmptyState$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DailyTasks__EmptyState",
+  componentId: "sc-ittn77-9"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:", ";opacity:0.7;gap:16px;p{margin:0;font-size:0.9rem;line-height:1.4;}"], uiColors.lightGray);
 var TaskTitle$1 = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "DailyTasks__TaskTitle",
-  componentId: "sc-ittn77-3"
-})(["color:", " !important;text-align:center;padding-right:30px !important;font-size:1.4rem !important;width:100%;"], uiColors.yellow);
+  componentId: "sc-ittn77-10"
+})(["color:", " !important;text-align:center;padding-right:30px !important;font-size:", " !important;width:100%;margin:", " !important;font-weight:600;"], uiColors.yellow, function (props) {
+  return props.isMobile ? '1rem' : '1.2rem';
+}, function (props) {
+  return props.isMobile ? '4px 0' : '8px 0';
+});
 
 // Memoize the styled components since they don't depend on props that change frequently
 var DPadButton = /*#__PURE__*/React.memo( /*#__PURE__*/styled__default.div.withConfig({
@@ -30257,7 +30517,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET$1;
   var centeredY = y - OFFSET$1;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React__default.createElement(Container$i, null, React__default.createElement(SpriteContainer, {
+  return React__default.createElement(Container$j, null, React__default.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React__default.createElement(SpriteFromAtlas, {
@@ -30275,7 +30535,7 @@ var DraggedItem = function DraggedItem(_ref) {
   }), stackInfo));
 };
 var pulse = "\n  @keyframes pulse {\n    0%, 100% {\n      transform: scale(1) rotate(-3deg);\n    }\n    50% {\n      transform: scale(0.95) rotate(-3deg);\n    }\n  }\n";
-var Container$i = /*#__PURE__*/styled__default.div.withConfig({
+var Container$j = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -30313,7 +30573,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$j, Object.assign({
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$k, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React__default.createElement("ul", {
@@ -30330,7 +30590,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$j = /*#__PURE__*/styled__default.div.withConfig({
+var Container$k = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -30604,7 +30864,7 @@ var SearchFriend = function SearchFriend(_ref) {
     title: "Requests (" + friendRequests.length + ")",
     content: requestsTabContent
   }];
-  return React__default.createElement(Container$k, null, React__default.createElement(InternalTabs, {
+  return React__default.createElement(Container$l, null, React__default.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000",
     inactiveColor: "#777",
@@ -30646,7 +30906,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
     }, "Reject")));
   })));
 };
-var Container$k = /*#__PURE__*/styled__default.div.withConfig({
+var Container$l = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SearchFriend__Container",
   componentId: "sc-1lt1ols-0"
 })(["display:flex;flex-direction:column;gap:1rem;"]);
@@ -30849,7 +31109,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = React.useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$l, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$m, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -30867,7 +31127,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$l = /*#__PURE__*/styled__default.div.withConfig({
+var Container$m = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -31019,7 +31279,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React__default.createElement(Container$m, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$n, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -31029,7 +31289,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$m = /*#__PURE__*/styled__default.div.withConfig({
+var Container$n = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -31089,7 +31349,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$n, null, React__default.createElement(CloseIcon, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$o, null, React__default.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -31105,7 +31365,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$n = /*#__PURE__*/styled__default.div.withConfig({
+var Container$o = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31165,7 +31425,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: exports.RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$o, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$p, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
     flex: '70%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -31207,7 +31467,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$o = /*#__PURE__*/styled__default.div.withConfig({
+var Container$p = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31639,7 +31899,7 @@ var Pagination = function Pagination(_ref) {
     totalPages = _ref.totalPages,
     onPageChange = _ref.onPageChange,
     className = _ref.className;
-  return React__default.createElement(Container$p, {
+  return React__default.createElement(Container$q, {
     className: className
   }, React__default.createElement(PaginationButton$1, {
     onClick: function onClick() {
@@ -31657,7 +31917,7 @@ var Pagination = function Pagination(_ref) {
     size: 12
   })));
 };
-var Container$p = /*#__PURE__*/styled__default.div.withConfig({
+var Container$q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-3k4m4u-0"
 })(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;"]);
@@ -31676,46 +31936,7 @@ var PageInfo$1 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-3k4m4u-2"
 })(["color:", ";font-size:0.8rem;font-family:'Press Start 2P',cursive;"], uiColors.lightGray);
 
-var SearchBar = function SearchBar(_ref) {
-  var value = _ref.value,
-    _onChange = _ref.onChange,
-    placeholder = _ref.placeholder,
-    className = _ref.className,
-    rightElement = _ref.rightElement;
-  var hasRightElement = Boolean(rightElement);
-  return React__default.createElement(Container$q, {
-    className: className
-  }, React__default.createElement(Input$1, {
-    type: "text",
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange(e.target.value);
-    },
-    placeholder: placeholder,
-    className: "rpgui-input",
-    "$hasRightElement": hasRightElement
-  }), React__default.createElement(IconContainer, null, React__default.createElement(SearchIcon, null), rightElement));
-};
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchBar__Container",
-  componentId: "sc-13n8z02-0"
-})(["position:relative;width:100%;"]);
-var Input$1 = /*#__PURE__*/styled__default.input.withConfig({
-  displayName: "SearchBar__Input",
-  componentId: "sc-13n8z02-1"
-})(["width:100%;padding-right:", " !important;background:rgba(0,0,0,0.2) !important;border:2px solid #f59e0b !important;box-shadow:0 0 10px rgba(245,158,11,0.3);color:#ffffff !important;font-family:'Press Start 2P',cursive !important;font-size:0.875rem !important;&::placeholder{color:rgba(255,255,255,0.5) !important;}"], function (props) {
-  return props.$hasRightElement ? '6rem' : '2.5rem';
-});
-var IconContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchBar__IconContainer",
-  componentId: "sc-13n8z02-2"
-})(["position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:0.5rem;pointer-events:none;z-index:1;> *{pointer-events:auto;}"]);
-var SearchIcon = /*#__PURE__*/styled__default(fa.FaSearch).withConfig({
-  displayName: "SearchBar__SearchIcon",
-  componentId: "sc-13n8z02-3"
-})(["font-size:1rem;color:#f59e0b;filter:drop-shadow(0 0 2px rgba(245,158,11,0.3));"]);
-
-var SearchHeader = function SearchHeader(_ref) {
+var SearchHeader$1 = function SearchHeader(_ref) {
   var searchOptions = _ref.searchOptions,
     filterOptions = _ref.filterOptions,
     className = _ref.className;
@@ -31806,7 +32027,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
     totalPages = _usePagination.totalPages;
   return React__default.createElement(Container$r, {
     className: className
-  }, (searchOptions || filterOptions) && React__default.createElement(SearchHeader, {
+  }, (searchOptions || filterOptions) && React__default.createElement(SearchHeader$1, {
     searchOptions: searchOptions,
     filterOptions: filterOptions
   }), items.length === 0 ? React__default.createElement(EmptyMessage, null, emptyMessage) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Content, {
@@ -36590,7 +36811,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleRedditClick
   }, React__default.createElement(fa.FaReddit, null), " Reddit")), React__default.createElement(Divider, {
     margin: "8px 0"
-  }), React__default.createElement(DropdownContainer, null, React__default.createElement(Dropdown, {
+  }), React__default.createElement(DropdownContainer$1, null, React__default.createElement(Dropdown, {
     options: whatsAppGroups,
     onChange: handleLanguageChange,
     width: "100%",
@@ -36623,7 +36844,7 @@ var WhatsAppButton = /*#__PURE__*/styled__default(SocialButton$1).withConfig({
   displayName: "SocialModal__WhatsAppButton",
   componentId: "sc-tbjhp9-5"
 })(["width:100%;background-color:#0f1f0f;border:1px solid #1a2f1a;padding:14px;&:hover{background-color:#162716;}margin-top:8px;"]);
-var DropdownContainer = /*#__PURE__*/styled__default.div.withConfig({
+var DropdownContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SocialModal__DropdownContainer",
   componentId: "sc-tbjhp9-6"
 })(["background-color:rgba(0,0,0,0.2);padding:8px;border-radius:4px;border:1px solid rgba(0,0,0,0.3);"]);
@@ -57395,7 +57616,7 @@ var CTAButton = function CTAButton(_ref) {
     "$fullWidth": fullWidth,
     "$disabled": disabled,
     "$color": textColor
-  }, React__default.createElement(ButtonContent, null, React__default.createElement(IconWrapper, {
+  }, React__default.createElement(ButtonContent, null, React__default.createElement(IconWrapper$1, {
     "$color": iconColor,
     "$disabled": disabled
   }, icon), label && React__default.createElement(ButtonLabel, {
@@ -57429,7 +57650,7 @@ var ButtonContent = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CTAButton__ButtonContent",
   componentId: "sc-1azvwn5-1"
 })(["display:flex;align-items:center;gap:0.75rem;"]);
-var IconWrapper = /*#__PURE__*/styled__default.div.withConfig({
+var IconWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CTAButton__IconWrapper",
   componentId: "sc-1azvwn5-2"
 })(["svg{font-size:1.25rem;color:", ";filter:drop-shadow(0 0 2px rgba(245,158,11,0.5));opacity:", ";}"], function (props) {
@@ -57966,25 +58187,13 @@ var EmptyMessage$1 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-xhh2um-8"
 })(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
 
-var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
-  var _item$metadataConfig, _item$metadataConfig2, _item$metadataConfig3, _item$requiredAccount;
-  var item = _ref.item,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    onAddToCart = _ref.onAddToCart,
-    userAccountType = _ref.userAccountType;
+var useCharacterSkinNavigation = function useCharacterSkinNavigation(availableCharacters, itemKey) {
   var _useState = React.useState(0),
     currentIndex = _useState[0],
     setCurrentIndex = _useState[1];
-  // Get available characters from metadata
-  var availableCharacters = item.metadataType === shared.MetadataType.CharacterSkin && ((_item$metadataConfig = item.metadataConfig) == null ? void 0 : _item$metadataConfig.availableCharacters) || [];
-  // Get the active character entity atlas info
-  var entityAtlasJSON = (_item$metadataConfig2 = item.metadataConfig) == null ? void 0 : _item$metadataConfig2.atlasJSON;
-  var entityAtlasIMG = (_item$metadataConfig3 = item.metadataConfig) == null ? void 0 : _item$metadataConfig3.atlasIMG;
-  // Effect to reset currentIndex when switching items
   React.useEffect(function () {
     setCurrentIndex(0);
-  }, [item.key]);
+  }, [itemKey]);
   var handlePreviousSkin = function handlePreviousSkin() {
     setCurrentIndex(function (prevIndex) {
       return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
@@ -57995,6 +58204,31 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
       return prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1;
     });
   };
+  var currentCharacter = availableCharacters[currentIndex];
+  return {
+    currentIndex: currentIndex,
+    currentCharacter: currentCharacter,
+    handlePreviousSkin: handlePreviousSkin,
+    handleNextSkin: handleNextSkin
+  };
+};
+
+var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
+  var _item$metadataConfig, _item$metadataConfig2, _item$metadataConfig3, _item$requiredAccount, _item$store;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType;
+  // Get available characters from metadata
+  var availableCharacters = item.metadataType === shared.MetadataType.CharacterSkin && ((_item$metadataConfig = item.metadataConfig) == null ? void 0 : _item$metadataConfig.availableCharacters) || [];
+  // Get the active character entity atlas info
+  var entityAtlasJSON = (_item$metadataConfig2 = item.metadataConfig) == null ? void 0 : _item$metadataConfig2.atlasJSON;
+  var entityAtlasIMG = (_item$metadataConfig3 = item.metadataConfig) == null ? void 0 : _item$metadataConfig3.atlasIMG;
+  var _useCharacterSkinNavi = useCharacterSkinNavigation(availableCharacters, item.key),
+    currentCharacter = _useCharacterSkinNavi.currentCharacter,
+    handlePreviousSkin = _useCharacterSkinNavi.handlePreviousSkin,
+    handleNextSkin = _useCharacterSkinNavi.handleNextSkin;
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
   var handleAddToCart = function handleAddToCart() {
     if (!hasRequiredAccount) return;
@@ -58011,8 +58245,9 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
   var getSpriteKey = function getSpriteKey(textureKey) {
     return textureKey + '/down/standing/0.png';
   };
-  var currentCharacter = availableCharacters[currentIndex];
-  return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(ItemWrapper, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React__default.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React__default.createElement(SpriteFromAtlas, {
     atlasJSON: entityAtlasJSON,
     atlasIMG: entityAtlasIMG,
     spriteKey: getSpriteKey(currentCharacter.textureKey),
@@ -58020,7 +58255,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React__default.createElement(SpriteFromAtlas, {
+  }) : item.texturePath ? React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58028,7 +58263,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$8, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
+  }) : React__default.createElement(DefaultIcon, null, "\uD83D\uDC64")), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$8, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -58046,7 +58281,11 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
 var ItemWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemWrapper",
   componentId: "sc-81xqsx-0"
-})(["display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);&:last-child{border-bottom:none;}"]);
+})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:", ";border-left:", ";&:last-child{border-bottom:none;}"], function (props) {
+  return props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent';
+}, function (props) {
+  return props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent';
+});
 var ItemIconContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemIconContainer",
   componentId: "sc-81xqsx-1"
@@ -58054,23 +58293,23 @@ var ItemIconContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
 var ItemDetails$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemDetails",
   componentId: "sc-81xqsx-2"
-})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:0.25rem;"]);
 var ItemName$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemName",
   componentId: "sc-81xqsx-3"
-})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
 var SelectedSkin = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__SelectedSkin",
   componentId: "sc-81xqsx-4"
-})(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:#fef08a;"]);
 var ItemPrice = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemPrice",
   componentId: "sc-81xqsx-5"
-})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
 var Controls = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__Controls",
   componentId: "sc-81xqsx-6"
-})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+})(["display:flex;align-items:center;gap:0.5rem;min-width:fit-content;"]);
 // Styled arrow override for inline nav arrows
 var SkinNavArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
@@ -58084,42 +58323,77 @@ var SelectedSkinNav = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__SelectedSkinNav",
   componentId: "sc-81xqsx-9"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
+var DefaultIcon = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreCharacterSkinRow__DefaultIcon",
+  componentId: "sc-81xqsx-10"
+})(["font-size:1.5rem;display:flex;align-items:center;justify-content:center;width:32px;height:32px;"]);
 
-var StoreItemRow = function StoreItemRow(_ref) {
-  var _item$requiredAccount;
-  var item = _ref.item,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    onAddToCart = _ref.onAddToCart,
-    userAccountType = _ref.userAccountType,
-    _ref$showTextInput = _ref.showTextInput,
-    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput,
-    _ref$textInputPlaceho = _ref.textInputPlaceholder,
-    textInputPlaceholder = _ref$textInputPlaceho === void 0 ? item.inputPlaceholder : _ref$textInputPlaceho;
-  var _useState = React.useState(1),
+var useQuantityControl = function useQuantityControl(initialQuantity, min, max) {
+  if (initialQuantity === void 0) {
+    initialQuantity = 1;
+  }
+  if (min === void 0) {
+    min = 1;
+  }
+  if (max === void 0) {
+    max = 99;
+  }
+  var _useState = React.useState(initialQuantity),
     quantity = _useState[0],
     setQuantity = _useState[1];
-  var _useState2 = React.useState(''),
-    textInputValue = _useState2[0],
-    setTextInputValue = _useState2[1];
   var handleQuantityChange = function handleQuantityChange(e) {
-    var value = parseInt(e.target.value) || 1;
-    setQuantity(Math.min(Math.max(1, value), 99));
+    var value = parseInt(e.target.value) || min;
+    setQuantity(Math.min(Math.max(min, value), max));
   };
   var handleBlur = function handleBlur() {
-    if (quantity < 1) setQuantity(1);
-    if (quantity > 99) setQuantity(99);
+    if (quantity < min) setQuantity(min);
+    if (quantity > max) setQuantity(max);
   };
   var incrementQuantity = function incrementQuantity() {
     setQuantity(function (prev) {
-      return Math.min(prev + 1, 99);
+      return Math.min(prev + 1, max);
     });
   };
   var decrementQuantity = function decrementQuantity() {
     setQuantity(function (prev) {
-      return Math.max(1, prev - 1);
+      return Math.max(min, prev - 1);
     });
   };
+  var resetQuantity = function resetQuantity() {
+    setQuantity(initialQuantity);
+  };
+  return {
+    quantity: quantity,
+    setQuantity: setQuantity,
+    handleQuantityChange: handleQuantityChange,
+    handleBlur: handleBlur,
+    incrementQuantity: incrementQuantity,
+    decrementQuantity: decrementQuantity,
+    resetQuantity: resetQuantity
+  };
+};
+
+var StoreItemRow = function StoreItemRow(_ref) {
+  var _item$requiredAccount, _item$store;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType,
+    _ref$showTextInput = _ref.showTextInput,
+    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput,
+    _ref$textInputPlaceho = _ref.textInputPlaceholder,
+    textInputPlaceholder = _ref$textInputPlaceho === void 0 ? item.inputPlaceholder : _ref$textInputPlaceho;
+  var _useState = React.useState(''),
+    textInputValue = _useState[0],
+    setTextInputValue = _useState[1];
+  var _useQuantityControl = useQuantityControl(),
+    quantity = _useQuantityControl.quantity,
+    handleQuantityChange = _useQuantityControl.handleQuantityChange,
+    handleBlur = _useQuantityControl.handleBlur,
+    incrementQuantity = _useQuantityControl.incrementQuantity,
+    decrementQuantity = _useQuantityControl.decrementQuantity,
+    resetQuantity = _useQuantityControl.resetQuantity;
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
   var handleAddToCartInternal = function handleAddToCartInternal() {
     if (!hasRequiredAccount) return;
@@ -58130,10 +58404,12 @@ var StoreItemRow = function StoreItemRow(_ref) {
       setTextInputValue('');
     } else {
       onAddToCart(item, quantity);
-      setQuantity(1);
+      resetQuantity();
     }
   };
-  return React__default.createElement(ItemWrapper$1, null, React__default.createElement(ItemIconContainer$3, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(ItemWrapper$1, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React__default.createElement(ItemIconContainer$3, null, React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58175,7 +58451,11 @@ var StoreItemRow = function StoreItemRow(_ref) {
 var ItemWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemWrapper",
   componentId: "sc-ptotuo-0"
-})(["display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);&:last-child{border-bottom:none;}"]);
+})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:", ";border-left:", ";&:last-child{border-bottom:none;}"], function (props) {
+  return props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent';
+}, function (props) {
+  return props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent';
+});
 var ItemIconContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemIconContainer",
   componentId: "sc-ptotuo-1"
@@ -58183,15 +58463,15 @@ var ItemIconContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
 var ItemDetails$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemDetails",
   componentId: "sc-ptotuo-2"
-})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:0.25rem;"]);
 var ItemName$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemName",
   componentId: "sc-ptotuo-3"
-})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
 var ItemPrice$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemPrice",
   componentId: "sc-ptotuo-4"
-})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
 var ItemDescription = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemDescription",
   componentId: "sc-ptotuo-5"
@@ -58199,7 +58479,7 @@ var ItemDescription = /*#__PURE__*/styled__default.div.withConfig({
 var Controls$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__Controls",
   componentId: "sc-ptotuo-6"
-})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+})(["display:flex;align-items:center;gap:0.5rem;min-width:fit-content;"]);
 var ArrowsContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ArrowsContainer",
   componentId: "sc-ptotuo-7"
@@ -58213,6 +58493,50 @@ var TextInput = /*#__PURE__*/styled__default.input.withConfig({
   componentId: "sc-ptotuo-9"
 })(["width:120px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;"]);
 
+var useStoreFiltering = function useStoreFiltering(items) {
+  var _useState = React.useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var _useState2 = React.useState('all'),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  var categoryOptions = React.useMemo(function () {
+    var uniqueCategories = Array.from(new Set(items.map(function (item) {
+      return item.itemType;
+    })));
+    var allCategories = ['all'].concat(uniqueCategories);
+    return allCategories.map(function (category, index) {
+      return {
+        id: index,
+        value: category,
+        option: category === 'all' ? 'All' : category
+      };
+    });
+  }, [items]);
+  var filteredItems = React.useMemo(function () {
+    return items.filter(function (item) {
+      var matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      var matchesCategory = selectedCategory === 'all' || item.itemType === selectedCategory;
+      return matchesSearch && matchesCategory;
+    }).sort(function (a, b) {
+      var _a$store, _b$store;
+      var aHighlighted = ((_a$store = a.store) == null ? void 0 : _a$store.isHighlighted) || false;
+      var bHighlighted = ((_b$store = b.store) == null ? void 0 : _b$store.isHighlighted) || false;
+      if (aHighlighted && !bHighlighted) return -1;
+      if (!aHighlighted && bHighlighted) return 1;
+      return 0;
+    });
+  }, [items, searchQuery, selectedCategory]);
+  return {
+    searchQuery: searchQuery,
+    setSearchQuery: setSearchQuery,
+    selectedCategory: selectedCategory,
+    setSelectedCategory: setSelectedCategory,
+    categoryOptions: categoryOptions,
+    filteredItems: filteredItems
+  };
+};
+
 var StoreItemsSection = function StoreItemsSection(_ref) {
   var items = _ref.items,
     onAddToCart = _ref.onAddToCart,
@@ -58221,12 +58545,12 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     userAccountType = _ref.userAccountType,
     _ref$textInputItemKey = _ref.textInputItemKeys,
     textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
-  var _useState = React.useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var filteredItems = items.filter(function (item) {
-    return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
+  var _useStoreFiltering = useStoreFiltering(items),
+    searchQuery = _useStoreFiltering.searchQuery,
+    setSearchQuery = _useStoreFiltering.setSearchQuery,
+    setSelectedCategory = _useStoreFiltering.setSelectedCategory,
+    categoryOptions = _useStoreFiltering.categoryOptions,
+    filteredItems = _useStoreFiltering.filteredItems;
   var renderStoreItem = function renderStoreItem(item) {
     // Prefer a specialized character skin row when needed
     if (item.metadataType === shared.MetadataType.CharacterSkin) {
@@ -58261,19 +58585,40 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       userAccountType: userAccountType || shared.UserAccountTypes.Free
     });
   };
-  return React__default.createElement(ScrollableContent, {
+  return React__default.createElement(StoreContainer, null, React__default.createElement(SearchHeader$2, null, React__default.createElement(SearchBarContainer$1, null, React__default.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: setSearchQuery,
+    placeholder: "Search items..."
+  })), React__default.createElement(DropdownContainer$2, null, React__default.createElement(Dropdown, {
+    options: categoryOptions,
+    onChange: function onChange(value) {
+      return setSelectedCategory(value);
+    },
+    width: "100%"
+  }))), React__default.createElement(ScrollableContent, {
     items: filteredItems,
     renderItem: renderStoreItem,
-    emptyMessage: "No items available.",
-    searchOptions: {
-      value: searchQuery,
-      onChange: setSearchQuery,
-      placeholder: 'Search items...'
-    },
+    emptyMessage: "No items match your filters.",
     layout: "list",
-    maxHeight: "400px"
-  });
+    maxHeight: "350px"
+  }));
 };
+var StoreContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__StoreContainer",
+  componentId: "sc-l6f466-0"
+})(["display:flex;flex-direction:column;height:100%;gap:0.5rem;"]);
+var SearchHeader$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__SearchHeader",
+  componentId: "sc-l6f466-1"
+})(["display:flex;gap:0.5rem;align-items:center;padding-top:0.25rem;"]);
+var SearchBarContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__SearchBarContainer",
+  componentId: "sc-l6f466-2"
+})(["flex:0.75;"]);
+var DropdownContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__DropdownContainer",
+  componentId: "sc-l6f466-3"
+})(["flex:0.25;min-width:140px;"]);
 
 var ShoppingCardHorizontal = function ShoppingCardHorizontal(_ref) {
   var title = _ref.title,
@@ -58338,13 +58683,30 @@ var CardFooter = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-ngkh06-6"
 })(["margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);"]);
 
+var usePackFiltering = function usePackFiltering(packs) {
+  var _useState = React.useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var filteredPacks = React.useMemo(function () {
+    return packs.filter(function (pack) {
+      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [packs, searchQuery]);
+  return {
+    searchQuery: searchQuery,
+    setSearchQuery: setSearchQuery,
+    filteredPacks: filteredPacks
+  };
+};
+
 var StorePacksSection = function StorePacksSection(_ref) {
   var packs = _ref.packs,
     onAddToCart = _ref.onAddToCart,
     onSelectPack = _ref.onSelectPack;
-  var _useState = React.useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
+  var _usePackFiltering = usePackFiltering(packs),
+    searchQuery = _usePackFiltering.searchQuery,
+    setSearchQuery = _usePackFiltering.setSearchQuery,
+    filteredPacks = _usePackFiltering.filteredPacks;
   var renderPackFooter = React.useCallback(function (pack) {
     return React__default.createElement(FooterContainer, null, React__default.createElement(Price, null, "$", pack.priceUSD), React__default.createElement(CTAButton, {
       icon: React__default.createElement(fa.FaCartPlus, null),
@@ -58367,11 +58729,6 @@ var StorePacksSection = function StorePacksSection(_ref) {
       }
     });
   }, [onSelectPack, renderPackFooter]);
-  var filteredPacks = React.useMemo(function () {
-    return packs.filter(function (pack) {
-      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
-    });
-  }, [packs, searchQuery]);
   return React__default.createElement(ScrollableContent, {
     items: filteredPacks,
     renderItem: renderPack,