@rpg-engine/long-bow 0.8.39 → 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"
@@ -31130,7 +31148,7 @@ var Container$n = /*#__PURE__*/styled.div.withConfig({
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__Content",
   componentId: "sc-lzp9hn-1"
-})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:0.25rem;min-height:200px;max-height:60vh;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.3) rgba(0,0,0,0.2);@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:1rem;}&.grid{display:grid;grid-template-columns:1fr;gap:0.5rem;align-items:start;justify-content:center;width:100%;@media (min-width:320px){grid-template-columns:repeat(2,minmax(100px,1fr));}@media (min-width:400px){grid-template-columns:repeat(2,minmax(120px,1fr));gap:0.75rem;}@media (min-width:480px){grid-template-columns:repeat(3,minmax(120px,1fr));gap:1rem;}@media (min-width:768px){grid-template-columns:repeat(4,minmax(120px,1fr));}@media (min-width:", "){grid-template-columns:repeat( ", ",minmax(120px,1fr) );}@media (min-width:", "){grid-template-columns:repeat( ", ",minmax(120px,1fr) );}.PaginatedContent-item{display:flex;align-items:flex-start;justify-content:center;height:", ";width:100%;box-sizing:border-box;min-height:120px;}}&.list{display:flex;flex-direction:column;gap:0.5rem;}"], UI_BREAKPOINT_MOBILE, function (props) {
+})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:0.25rem;min-height:200px;max-height:60vh;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.3) rgba(0,0,0,0.2);@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.5rem;}&.grid{display:grid;grid-template-columns:1fr;gap:0.5rem;align-items:start;justify-content:center;width:100%;@media (min-width:320px){grid-template-columns:repeat(2,minmax(100px,1fr));}@media (min-width:400px){grid-template-columns:repeat(2,minmax(120px,1fr));gap:0.75rem;}@media (min-width:480px){grid-template-columns:repeat(3,minmax(120px,1fr));gap:1rem;}@media (min-width:768px){grid-template-columns:repeat(4,minmax(120px,1fr));}@media (min-width:", "){grid-template-columns:repeat( ", ",minmax(120px,1fr) );}@media (min-width:", "){grid-template-columns:repeat( ", ",minmax(120px,1fr) );}.PaginatedContent-item{display:flex;align-items:flex-start;justify-content:center;height:", ";width:100%;box-sizing:border-box;min-height:120px;}}&.list{display:flex;flex-direction:column;gap:0.5rem;}"], UI_BREAKPOINT_MOBILE, function (props) {
   return Math.min(props.$gridColumns, 4);
 }, UI_BREAKPOINT_SMALL_LAPTOP, function (props) {
   return props.$gridColumns;
@@ -32762,7 +32780,6 @@ var InformationCenter = function InformationCenter(_ref) {
     width: isMobile ? '95%' : '80%',
     minWidth: "300px",
     cancelDrag: ".PaginatedContent-content",
-    isFullScreen: isMobile,
     onCloseButton: onClose
   }, React.createElement(Container$r, null, React.createElement(InternalTabs, {
     tabs: tabs,