@rpg-engine/long-bow 0.8.40 → 0.8.41

package/dist/long-bow.esm.js

@@ -31035,17 +31035,23 @@ var SearchHeader = function SearchHeader(_ref) {
     filterOptions = _ref.filterOptions,
     className = _ref.className;
   if (!searchOptions && !filterOptions) return null;
+  var isMobile = isMobileOrTablet();
+  var isSmallScreen = isMobile && window.innerWidth < 480;
   return React.createElement(HeaderContainer$1, {
     className: className
-  }, React.createElement(HeaderContent, null, searchOptions && React.createElement(SearchContainer$2, null, React.createElement(StyledSearchBar, {
+  }, React.createElement(HeaderContent, {
+    "$isSmallScreen": isSmallScreen
+  }, searchOptions && React.createElement(SearchContainer$2, null, React.createElement(StyledSearchBar, {
     value: searchOptions.value,
     onChange: searchOptions.onChange,
-    placeholder: searchOptions.placeholder || 'Search...',
+    placeholder: isSmallScreen ? 'Search...' : searchOptions.placeholder || 'Search...',
     rightElement: searchOptions.rightElement
-  })), filterOptions && React.createElement(FilterContainer, null, React.createElement(StyledDropdown, {
+  })), filterOptions && React.createElement(FilterContainer, {
+    "$isSmallScreen": isSmallScreen
+  }, React.createElement(StyledDropdown, {
     options: filterOptions.options,
     onChange: filterOptions.onOptionChange,
-    width: "200px"
+    width: isSmallScreen ? '100%' : '200px'
   }))));
 };
 var HeaderContainer$1 = /*#__PURE__*/styled.div.withConfig({
@@ -31055,7 +31061,15 @@ var HeaderContainer$1 = /*#__PURE__*/styled.div.withConfig({
 var HeaderContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchHeader__HeaderContent",
   componentId: "sc-1xd17jb-1"
-})(["display:flex;justify-content:space-between;align-items:center;gap:1rem;background:rgba(0,0,0,0.2);padding:1rem;border-radius:4px;"]);
+})(["display:flex;flex-direction:", ";justify-content:space-between;align-items:", ";gap:", ";background:rgba(0,0,0,0.2);padding:", ";border-radius:4px;"], function (props) {
+  return props.$isSmallScreen ? 'column' : 'row';
+}, function (props) {
+  return props.$isSmallScreen ? 'stretch' : 'center';
+}, function (props) {
+  return props.$isSmallScreen ? '0.5rem' : '1rem';
+}, function (props) {
+  return props.$isSmallScreen ? '0.5rem' : '1rem';
+});
 var SearchContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchHeader__SearchContainer",
   componentId: "sc-1xd17jb-2"
@@ -31063,7 +31077,11 @@ var SearchContainer$2 = /*#__PURE__*/styled.div.withConfig({
 var FilterContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchHeader__FilterContainer",
   componentId: "sc-1xd17jb-3"
-})(["display:flex;justify-content:flex-end;"]);
+})(["display:flex;justify-content:", ";width:", ";"], function (props) {
+  return props.$isSmallScreen ? 'stretch' : 'flex-end';
+}, function (props) {
+  return props.$isSmallScreen ? '100%' : 'auto';
+});
 var StyledSearchBar = /*#__PURE__*/styled(SearchBar).withConfig({
   displayName: "SearchHeader__StyledSearchBar",
   componentId: "sc-1xd17jb-4"