@janrankenhohn/react-thumbnail-list 0.8.0 → 1.0.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { styled as styled$2, Box, Typography, Card, CardActionArea, Stack as Stack$1, Grid, LinearProgress, FormControl, TextField, InputAdornment, IconButton, useTheme as useTheme$2, useMediaQuery, Chip, Tooltip, InputLabel, Select, MenuItem, Menu } from '@mui/material';
 import * as React from 'react';
-import React__default, { createContext, useContext, useMemo, useState, useCallback, useEffect, Children } from 'react';
+import React__default, { createContext, useContext, useMemo, useState, useEffect, Children } from 'react';
 import emStyled from '@emotion/styled';
 import { ThemeContext } from '@emotion/react';
 import SearchIcon from '@mui/icons-material/Search';
@@ -9,7 +9,24 @@ import ClearIcon from '@mui/icons-material/Clear';
 import SwapVertIcon from '@mui/icons-material/SwapVert';
 import SortIcon from '@mui/icons-material/Sort';
 
+/**
+ * React context for sharing thumbnail list state across components.
+ * Provides access to items, sorting, filtering, and search functionality.
+ */
 const ThumbnailListItemContext = createContext(undefined);
+/**
+ * React hook to access the ThumbnailList context.
+ * Must be used within a ThumbnailList component tree.
+ *
+ * @template T - The type of items in the list
+ * @returns {ThumbnailListItemContextType<T>} The context values
+ * @throws {Error} Throws error if used outside of ThumbnailList provider
+ *
+ * @example
+ * ```tsx
+ * const { items, setSearchTerm, sortAscending } = useThumbnailListItemContext();
+ * ```
+ */
 const useThumbnailListItemContext = () => {
     const context = useContext(ThumbnailListItemContext);
     if (!context) {
@@ -18,100 +35,543 @@ const useThumbnailListItemContext = () => {
     return context;
 };
 
+const StyledEllipsisContainer = styled$2('div')(({ theme, lineClamp }) => ({
+    [theme.breakpoints.up('xs')]: {
+        overflow: 'hidden',
+        display: '-webkit-box',
+        WebkitLineClamp: lineClamp.xs.toString(),
+        WebkitBoxOrient: 'vertical',
+    },
+    [theme.breakpoints.up('sm')]: {
+        overflow: 'hidden',
+        display: '-webkit-box',
+        WebkitLineClamp: lineClamp.sm.toString(),
+        WebkitBoxOrient: 'vertical',
+    },
+}));
 /**
- * Creates a ellipies text with webkit css styles
+ * Creates ellipsis text with webkit css styles
  * @param props lineClamp: lines till ellipses
  * @returns component
  */
 function EllipsisContainer(props) {
-    const EllipsisContainer = styled$2('div')((p) => ({
-        [p.theme.breakpoints.up('xs')]: {
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: props.lineClamp.xs.toString() /* number of lines to show */,
-            WebkitBoxOrient: 'vertical',
-        },
-        [p.theme.breakpoints.up('sm')]: {
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: props.lineClamp.sm.toString() /* number of lines to show */,
-            WebkitBoxOrient: 'vertical' /* number of lines to show */,
-        },
-    }));
-    return jsx(EllipsisContainer, { children: props.children });
+    return jsx(StyledEllipsisContainer, { lineClamp: props.lineClamp, children: props.children });
 }
 
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe if we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
+function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach(arg => url.searchParams.append('args[]', arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
+}
+
+/* eslint-disable */
+// Inspired by https://github.com/garycourt/murmurhash-js
+// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+function murmur2(str) {
+  // 'm' and 'r' are mixing constants generated offline.
+  // They're not really 'magic', they just happen to work well.
+  // const m = 0x5bd1e995;
+  // const r = 24;
+  // Initialize the hash
+  var h = 0; // Mix 4 bytes at a time into the hash
+
+  var k,
+      i = 0,
+      len = str.length;
+
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+    k =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+    k ^=
+    /* k >>> r: */
+    k >>> 24;
+    h =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
+    /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Handle the last few bytes of the input array
+
+
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h =
+      /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Do a few final mixes of the hash to ensure the last few
+  // bytes are well-incorporated.
+
+
+  h ^= h >>> 13;
+  h =
+  /* Math.imul(h, m): */
+  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  scale: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+function memoize$1(fn) {
+  var cache = Object.create(null);
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+
+var isCustomProperty = function isCustomProperty(property) {
+  return property.charCodeAt(1) === 45;
+};
+
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
+var processStyleName = /* #__PURE__ */memoize$1(function (styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+});
+
+var processStyleValue = function processStyleValue(key, value) {
+  switch (key) {
+    case 'animation':
+    case 'animationName':
+      {
+        if (typeof value === 'string') {
+          return value.replace(animationRegex, function (match, p1, p2) {
+            cursor = {
+              name: p1,
+              styles: p2,
+              next: cursor
+            };
+            return p1;
+          });
+        }
+      }
+  }
+
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+    return value + 'px';
+  }
+
+  return value;
+};
+
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return '';
+  }
+
+  var componentSelector = interpolation;
+
+  if (componentSelector.__emotion_styles !== undefined) {
+
+    return componentSelector;
   }
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
+
+  switch (typeof interpolation) {
+    case 'boolean':
+      {
+        return '';
+      }
+
+    case 'object':
+      {
+        var keyframes = interpolation;
+
+        if (keyframes.anim === 1) {
+          cursor = {
+            name: keyframes.name,
+            styles: keyframes.styles,
+            next: cursor
+          };
+          return keyframes.name;
+        }
+
+        var serializedStyles = interpolation;
+
+        if (serializedStyles.styles !== undefined) {
+          var next = serializedStyles.next;
+
+          if (next !== undefined) {
+            // not the most efficient thing ever but this is a pretty rare case
+            // and there will be very few iterations of this generally
+            while (next !== undefined) {
+              cursor = {
+                name: next.name,
+                styles: next.styles,
+                next: cursor
+              };
+              next = next.next;
+            }
+          }
+
+          var styles = serializedStyles.styles + ";";
+          return styles;
+        }
+
+        return createStringFromObject(mergedProps, registered, interpolation);
+      }
+  } // finalize string values (regular strings and functions interpolated into css calls)
+
+
+  var asString = interpolation;
+
+  {
+    return asString;
+  }
+}
+
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = '';
+
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var key in obj) {
+      var value = obj[key];
+
+      if (typeof value !== 'object') {
+        var asString = value;
+
+        if (isProcessableValue(asString)) {
+          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+        }
+      } else {
+
+        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+
+          switch (key) {
+            case 'animation':
+            case 'animationName':
+              {
+                string += processStyleName(key) + ":" + interpolated + ";";
+                break;
+              }
+
+            default:
+              {
+
+                string += key + "{" + interpolated + "}";
+              }
+          }
+        }
+      }
+    }
+  }
+
+  return string;
+}
+
+var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
+// keyframes are stored on the SerializedStyles object as a linked list
+
+var cursor;
+function serializeStyles(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+    return args[0];
+  }
+
+  var stringMode = true;
+  var styles = '';
+  cursor = undefined;
+  var strings = args[0];
+
+  if (strings == null || strings.raw === undefined) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    var asTemplateStringsArr = strings;
+
+    styles += asTemplateStringsArr[0];
+  } // we start at 1 since we've already handled the first arg
+
+
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+
+    if (stringMode) {
+      var templateStringsArr = strings;
+
+      styles += templateStringsArr[i];
+    }
+  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+
+
+  labelPattern.lastIndex = 0;
+  var identifierName = '';
+  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += '-' + match[1];
+  }
+
+  var name = murmur2(styles) + identifierName;
+
+  return {
+    name: name,
+    styles: styles,
+    next: cursor
+  };
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 /**
- * @mui/styled-engine v5.15.14
+ * @mui/styled-engine v6.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/* eslint-disable no-underscore-dangle */
 function styled$1(tag, options) {
   const stylesFactory = emStyled(tag, options);
   return stylesFactory;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const internal_processStyles = (tag, processor) => {
+function internal_mutateStyles(tag, processor) {
   // Emotion attaches all the styles as `__emotion_styles`.
   // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
   if (Array.isArray(tag.__emotion_styles)) {
     tag.__emotion_styles = processor(tag.__emotion_styles);
   }
-};
+}
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+// Emotion only accepts an array, but we want to avoid allocations
+const wrapper = [];
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function internal_serializeStyles(styles) {
+  wrapper[0] = styles;
+  return serializeStyles(wrapper);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
+var reactIs = {exports: {}};
+
+var reactIs_production = {};
+
+/**
+ * @license React
+ * react-is.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production;
+
+function requireReactIs_production () {
+	if (hasRequiredReactIs_production) return reactIs_production;
+	hasRequiredReactIs_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	  REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	  REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	  REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	  REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	  REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	  REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	  REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
+	  REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+	function typeOf(object) {
+	  if ("object" === typeof object && null !== object) {
+	    var $$typeof = object.$$typeof;
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        switch (((object = object.type), object)) {
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	          case REACT_SUSPENSE_LIST_TYPE:
+	          case REACT_VIEW_TRANSITION_TYPE:
+	            return object;
+	          default:
+	            switch (((object = object && object.$$typeof), object)) {
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	                return object;
+	              case REACT_CONSUMER_TYPE:
+	                return object;
+	              default:
+	                return $$typeof;
+	            }
+	        }
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+	}
+	reactIs_production.ContextConsumer = REACT_CONSUMER_TYPE;
+	reactIs_production.ContextProvider = REACT_CONTEXT_TYPE;
+	reactIs_production.Element = REACT_ELEMENT_TYPE;
+	reactIs_production.ForwardRef = REACT_FORWARD_REF_TYPE;
+	reactIs_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactIs_production.Lazy = REACT_LAZY_TYPE;
+	reactIs_production.Memo = REACT_MEMO_TYPE;
+	reactIs_production.Portal = REACT_PORTAL_TYPE;
+	reactIs_production.Profiler = REACT_PROFILER_TYPE;
+	reactIs_production.StrictMode = REACT_STRICT_MODE_TYPE;
+	reactIs_production.Suspense = REACT_SUSPENSE_TYPE;
+	reactIs_production.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	reactIs_production.isContextConsumer = function (object) {
+	  return typeOf(object) === REACT_CONSUMER_TYPE;
+	};
+	reactIs_production.isContextProvider = function (object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
+	};
+	reactIs_production.isElement = function (object) {
+	  return (
+	    "object" === typeof object &&
+	    null !== object &&
+	    object.$$typeof === REACT_ELEMENT_TYPE
+	  );
+	};
+	reactIs_production.isForwardRef = function (object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	};
+	reactIs_production.isFragment = function (object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	};
+	reactIs_production.isLazy = function (object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	};
+	reactIs_production.isMemo = function (object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	};
+	reactIs_production.isPortal = function (object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	};
+	reactIs_production.isProfiler = function (object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	};
+	reactIs_production.isStrictMode = function (object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	};
+	reactIs_production.isSuspense = function (object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	};
+	reactIs_production.isSuspenseList = function (object) {
+	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	};
+	reactIs_production.isValidElementType = function (type) {
+	  return "string" === typeof type ||
+	    "function" === typeof type ||
+	    type === REACT_FRAGMENT_TYPE ||
+	    type === REACT_PROFILER_TYPE ||
+	    type === REACT_STRICT_MODE_TYPE ||
+	    type === REACT_SUSPENSE_TYPE ||
+	    type === REACT_SUSPENSE_LIST_TYPE ||
+	    ("object" === typeof type &&
+	      null !== type &&
+	      (type.$$typeof === REACT_LAZY_TYPE ||
+	        type.$$typeof === REACT_MEMO_TYPE ||
+	        type.$$typeof === REACT_CONTEXT_TYPE ||
+	        type.$$typeof === REACT_CONSUMER_TYPE ||
+	        type.$$typeof === REACT_FORWARD_REF_TYPE ||
+	        type.$$typeof === REACT_CLIENT_REFERENCE ||
+	        void 0 !== type.getModuleId))
+	    ? true
+	    : false;
+	};
+	reactIs_production.typeOf = typeOf;
+	return reactIs_production;
+}
+
+{
+  reactIs.exports = requireReactIs_production();
 }
 
+var reactIsExports = reactIs.exports;
+
 // https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
 function isPlainObject(item) {
   if (typeof item !== 'object' || item === null) {
@@ -121,7 +581,7 @@ function isPlainObject(item) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
 function deepClone(source) {
-  if (!isPlainObject(source)) {
+  if (/*#__PURE__*/React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
     return source;
   }
   const output = {};
@@ -130,17 +590,38 @@ function deepClone(source) {
   });
   return output;
 }
+
+/**
+ * Merge objects deeply.
+ * It will shallow copy React elements.
+ *
+ * If `options.clone` is set to `false` the source object will be merged directly into the target object.
+ *
+ * @example
+ * ```ts
+ * deepmerge({ a: { b: 1 }, d: 2 }, { a: { c: 2 }, d: 4 });
+ * // => { a: { b: 1, c: 2 }, d: 4 }
+ * ````
+ *
+ * @param target The target object.
+ * @param source The source object.
+ * @param options The merge options.
+ * @param options.clone Set to `false` to merge the source object directly into the target object.
+ * @returns The merged object.
+ */
 function deepmerge(target, source, options = {
   clone: true
 }) {
-  const output = options.clone ? _extends({}, target) : target;
+  const output = options.clone ? {
+    ...target
+  } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
+      if (/*#__PURE__*/React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
+        output[key] = source[key];
+      } else if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         output[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {
@@ -153,7 +634,8 @@ function deepmerge(target, source, options = {
   return output;
 }
 
-const _excluded$4 = ["values", "unit", "step"];
+// Sorted ASC by size. That's important.
+// It can't be configured as it's used statically for propTypes.
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -162,32 +644,33 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
+    return {
+      ...acc,
       [obj.key]: obj.val
-    });
+    };
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
 function createBreakpoints(breakpoints) {
   const {
-      // The breakpoint **start** at this value.
-      // For instance with the first breakpoint xs: [xs, sm).
-      values = {
-        xs: 0,
-        // phone
-        sm: 600,
-        // tablet
-        md: 900,
-        // small laptop
-        lg: 1200,
-        // desktop
-        xl: 1536 // large screen
-      },
-      unit = 'px',
-      step = 5
-    } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$4);
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values = {
+      xs: 0,
+      // phone
+      sm: 600,
+      // tablet
+      md: 900,
+      // small laptop
+      lg: 1200,
+      // desktop
+      xl: 1536 // large screen
+    },
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -219,7 +702,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends({
+  return {
     keys,
     values: sortedValues,
     up,
@@ -227,8 +710,75 @@ function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit
-  }, other);
+    unit,
+    ...other
+  };
+}
+
+/**
+ * For using in `sx` prop to sort the breakpoint from low to high.
+ * Note: this function does not work and will not support multiple units.
+ *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
+ *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+ */
+function sortContainerQueries(theme, css) {
+  if (!theme.containerQueries) {
+    return css;
+  }
+  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
+    const regex = /min-width:\s*([0-9.]+)/;
+    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
+  });
+  if (!sorted.length) {
+    return css;
+  }
+  return sorted.reduce((acc, key) => {
+    const value = css[key];
+    delete acc[key];
+    acc[key] = value;
+    return acc;
+  }, {
+    ...css
+  });
+}
+function isCqShorthand(breakpointKeys, value) {
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+}
+function getContainerQuery(theme, shorthand) {
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
+  if (!matches) {
+    return null;
+  }
+  const [, containerQuery, containerName] = matches;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
+  return theme.containerQueries(containerName).up(value);
+}
+function cssContainerQueries(themeInput) {
+  const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
+  function attachCq(node, name) {
+    node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
+    node.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
+    node.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
+    node.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
+    node.not = (...args) => {
+      const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
+      if (result.includes('not all and')) {
+        // `@container` does not work with `not all and`, so need to invert the logic
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
+      }
+      return result;
+    };
+  }
+  const node = {};
+  const containerQueries = name => {
+    attachCq(node, name);
+    return node;
+  };
+  attachCq(containerQueries);
+  return {
+    ...themeInput,
+    containerQueries
+  };
 }
 
 const shape = {
@@ -263,6 +813,17 @@ const defaultBreakpoints = {
   keys: ['xs', 'sm', 'md', 'lg', 'xl'],
   up: key => `@media (min-width:${values[key]}px)`
 };
+const defaultContainerQueries = {
+  containerQueries: containerName => ({
+    up: key => {
+      let result = typeof key === 'number' ? key : values[key] || key;
+      if (typeof result === 'number') {
+        result = `${result}px`;
+      }
+      return containerName ? `@container ${containerName} (min-width:${result})` : `@container (min-width:${result})`;
+    }
+  })
+};
 function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme = props.theme || {};
   if (Array.isArray(propValue)) {
@@ -275,8 +836,14 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
   if (typeof propValue === 'object') {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
+      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
+        const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
+        if (containerKey) {
+          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+        }
+      }
       // key is breakpoint
-      if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {
@@ -290,8 +857,7 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
   return output;
 }
 function createEmptyBreakpointObject(breakpointsInput = {}) {
-  var _breakpointsInput$key;
-  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;
@@ -495,22 +1061,32 @@ const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTo
 const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var _getPath;
-  const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-  if (typeof themeSpacing === 'number') {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+  const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
+  if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
+    return val => {
+      if (typeof val === 'string') {
+        return val;
+      }
+      if (typeof themeSpacing === 'string') {
+        return `calc(${val} * ${themeSpacing})`;
       }
-      return themeSpacing * abs;
+      return themeSpacing * val;
     };
   }
   if (Array.isArray(themeSpacing)) {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+    return val => {
+      if (typeof val === 'string') {
+        return val;
+      }
+      const abs = Math.abs(val);
+      const transformed = themeSpacing[abs];
+      if (val >= 0) {
+        return transformed;
       }
-      return themeSpacing[abs];
+      if (typeof transformed === 'number') {
+        return -transformed;
+      }
+      return `-${transformed}`;
     };
   }
   if (typeof themeSpacing === 'function') {
@@ -525,15 +1101,7 @@ function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-  const abs = Math.abs(propValue);
-  const transformed = transformer(abs);
-  if (propValue >= 0) {
-    return transformed;
-  }
-  if (typeof transformed === 'number') {
-    return -transformed;
-  }
-  return `-${transformed}`;
+  return transformer(propValue);
 }
 function getStyleFromPropValue(cssProperties, transformer) {
   return propValue => cssProperties.reduce((acc, cssProperty) => {
@@ -544,7 +1112,7 @@ function getStyleFromPropValue(cssProperties, transformer) {
 function resolveCssProperty(props, keys, prop, transformer) {
   // Using a hash computation over an array iteration could be faster, but with only 28 items,
   // it's doesn't worth the bundle size.
-  if (keys.indexOf(prop) === -1) {
+  if (!keys.includes(prop)) {
     return null;
   }
   const cssProperties = getCssProperties(prop);
@@ -570,18 +1138,17 @@ padding.filterProps = paddingKeys;
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.
 
-function createSpacing(spacingInput = 8) {
+function createSpacing(spacingInput = 8,
+// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
+// Smaller components, such as icons, can align to a 4dp grid.
+// https://m2.material.io/design/layout/understanding-layout.html
+transform = createUnarySpacing({
+  spacing: spacingInput
+})) {
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
   }
-
-  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-  // Smaller components, such as icons, can align to a 4dp grid.
-  // https://m2.material.io/design/layout/understanding-layout.html
-  const transform = createUnarySpacing({
-    spacing: spacingInput
-  });
   const spacing = (...argsInput) => {
     const args = argsInput.length === 0 ? [1] : argsInput;
     return args.map(argument => {
@@ -765,14 +1332,13 @@ const width = style$2({
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
-      var _props$theme, _props$theme2;
-      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || values[propValue];
       if (!breakpoint) {
         return {
           maxWidth: sizingTransform(propValue)
         };
       }
-      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+      if (props.theme?.breakpoints?.unit !== 'px') {
         return {
           maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
         };
@@ -1081,6 +1647,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },
@@ -1161,15 +1730,15 @@ function unstable_createStyleFunctionSx() {
     return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
-    var _theme$unstable_sxCon;
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
+    const config = theme.unstable_sxConfig ?? defaultSxConfig;
 
     /*
      * Receive `sxInput` as object or callback
@@ -1205,7 +1774,8 @@ function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css = merge(css, breakpointsValues);
@@ -1216,7 +1786,12 @@ function unstable_createStyleFunctionSx() {
           }
         }
       });
-      return removeUnusedBreakpoints(breakpointsKeys, css);
+      if (!nested && theme.modularCssLayers) {
+        return {
+          '@layer sx': sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css))
+        };
+      }
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
@@ -1229,15 +1804,19 @@ styleFunctionSx.filterProps = ['sx'];
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.
  *
+ * With the styled function:
  * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
- *
  * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
  *
+ * With the sx prop:
+ * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
+ * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
+ *
  * @example
  * 1. using with `styled`:
  * ```jsx
@@ -1253,9 +1832,9 @@ styleFunctionSx.filterProps = ['sx'];
  * @example
  * 2. using with `sx` prop:
  * ```jsx
- *   <Box sx={theme => [
+ *   <Box sx={[
  *     { background: '#e5e5e5' },
- *     theme.applyStyles('dark', {
+ *     theme => theme.applyStyles('dark', {
  *        background: '#1c1c1c',
  *        color: '#fff',
  *      }),
@@ -1286,10 +1865,19 @@ styleFunctionSx.filterProps = ['sx'];
 function applyStyles(key, styles) {
   // @ts-expect-error this is 'any' type
   const theme = this;
-  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
-    // If CssVarsProvider is used as a provider,
-    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
-    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+  if (theme.vars) {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
+      return {};
+    }
+    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
+    let selector = theme.getColorSchemeSelector(key);
+    if (selector === '&') {
+      return styles;
+    }
+    if (selector.includes('data-') || selector.includes('.')) {
+      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
+      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
+    }
     return {
       [selector]: styles
     };
@@ -1300,15 +1888,14 @@ function applyStyles(key, styles) {
   return {};
 }
 
-const _excluded$3 = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
-      breakpoints: breakpointsInput = {},
-      palette: paletteInput = {},
-      spacing: spacingInput,
-      shape: shapeInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$3);
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -1316,15 +1903,23 @@ function createTheme(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: _extends({}, shape, shapeInput)
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
   }, other);
+  muiTheme = cssContainerQueries(muiTheme);
   muiTheme.applyStyles = applyStyles;
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,
@@ -1334,12 +1929,12 @@ function createTheme(options = {}, ...args) {
   return muiTheme;
 }
 
-function isObjectEmpty(obj) {
+function isObjectEmpty$1(obj) {
   return Object.keys(obj).length === 0;
 }
 function useTheme$1(defaultTheme = null) {
   const contextTheme = React.useContext(ThemeContext);
-  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
+  return !contextTheme || isObjectEmpty$1(contextTheme) ? defaultTheme : contextTheme;
 }
 
 const systemDefaultTheme$1 = createTheme();
@@ -1347,14 +1942,12 @@ function useTheme(defaultTheme = systemDefaultTheme$1) {
   return useTheme$1(defaultTheme);
 }
 
-const _excluded$2 = ["sx"];
 const splitProps = props => {
-  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -1366,9 +1959,9 @@ const splitProps = props => {
 };
 function extendSxProp(props) {
   const {
-      sx: inSx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+    sx: inSx,
+    ...other
+  } = props;
   const {
     systemProps,
     otherProps
@@ -1382,14 +1975,21 @@ function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return _extends({}, systemProps, result);
+      return {
+        ...systemProps,
+        ...result
+      };
     };
   } else {
-    finalSx = _extends({}, systemProps, inSx);
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
   }
-  return _extends({}, otherProps, {
+  return {
+    ...otherProps,
     sx: finalSx
-  });
+  };
 }
 
 const defaultGenerator = componentName => componentName;
@@ -1430,90 +2030,122 @@ function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
   return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }
 
-const _excluded$1 = ["ownerState"],
-  _excluded2 = ["variants"],
-  _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
-function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
+function preprocessStyles(input) {
+  const {
+    variants,
+    ...style
+  } = input;
+  const result = {
+    variants,
+    style: internal_serializeStyles(style),
+    isProcessed: true
+  };
 
-// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-function isStringTag(tag) {
-  return typeof tag === 'string' &&
-  // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
+  // Not supported on styled-components
+  if (result.style === style) {
+    return result;
+  }
+  if (variants) {
+    variants.forEach(variant => {
+      if (typeof variant.style !== 'function') {
+        variant.style = internal_serializeStyles(variant.style);
+      }
+    });
+  }
+  return result;
 }
 
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-labels */
+/* eslint-disable no-lone-blocks */
+
+const systemDefaultTheme = createTheme();
+
 // Update /system/styled/#api in case if this changes
 function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
-const systemDefaultTheme = createTheme();
-const lowercaseFirstLetter = string => {
-  if (!string) {
-    return string;
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
   }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-};
-function resolveTheme({
-  defaultTheme,
-  theme,
-  themeId
-}) {
-  return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+  return serialized;
 }
 function defaultOverridesResolver(slot) {
   if (!slot) {
     return null;
   }
-  return (props, styles) => styles[slot];
+  return (_props, styles) => styles[slot];
+}
+function attachTheme(props, themeId, defaultTheme) {
+  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
 }
-function processStyleArg(callableStyle, _ref) {
-  let {
-      ownerState
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
-    ownerState
-  }, props)) : callableStyle;
-  if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
-      ownerState
-    }, props)));
+function processStyle(props, style, layerName) {
+  /*
+   * Style types:
+   *  - null/undefined
+   *  - string
+   *  - CSS style object: { [cssKey]: [cssValue], variants }
+   *  - Processed style object: { style, variants, isProcessed: true }
+   *  - Array of any of the above
+   */
+
+  const resolvedStyle = typeof style === 'function' ? style(props) : style;
+  if (Array.isArray(resolvedStyle)) {
+    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle, layerName));
   }
-  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
-    const {
-        variants = []
-      } = resolvedStylesArg,
-      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
-    let result = otherStyles;
-    variants.forEach(variant => {
-      let isMatch = true;
-      if (typeof variant.props === 'function') {
-        isMatch = variant.props(_extends({
-          ownerState
-        }, props, ownerState));
-      } else {
-        Object.keys(variant.props).forEach(key => {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
-          }
-        });
+  if (Array.isArray(resolvedStyle?.variants)) {
+    let rootStyle;
+    if (resolvedStyle.isProcessed) {
+      rootStyle = layerName ? shallowLayer(resolvedStyle.style, layerName) : resolvedStyle.style;
+    } else {
+      const {
+        variants,
+        ...otherStyles
+      } = resolvedStyle;
+      rootStyle = layerName ? shallowLayer(internal_serializeStyles(otherStyles), layerName) : otherStyles;
+    }
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle], layerName);
+  }
+  if (resolvedStyle?.isProcessed) {
+    return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle.style), layerName) : resolvedStyle.style;
+  }
+  return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle), layerName) : resolvedStyle;
+}
+function processStyleVariants(props, variants, results = [], layerName = undefined) {
+  let mergedState; // We might not need it, initialized lazily
+
+  variantLoop: for (let i = 0; i < variants.length; i += 1) {
+    const variant = variants[i];
+    if (typeof variant.props === 'function') {
+      mergedState ??= {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      };
+      if (!variant.props(mergedState)) {
+        continue;
       }
-      if (isMatch) {
-        if (!Array.isArray(result)) {
-          result = [result];
+    } else {
+      for (const key in variant.props) {
+        if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+          continue variantLoop;
         }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
-          ownerState
-        }, props, ownerState)) : variant.style);
       }
-    });
-    return result;
+    }
+    if (typeof variant.style === 'function') {
+      mergedState ??= {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      };
+      results.push(layerName ? shallowLayer(internal_serializeStyles(variant.style(mergedState)), layerName) : variant.style(mergedState));
+    } else {
+      results.push(layerName ? shallowLayer(internal_serializeStyles(variant.style), layerName) : variant.style);
+    }
   }
-  return resolvedStylesArg;
+  return results;
 }
 function createStyled(input = {}) {
   const {
@@ -1522,28 +2154,24 @@ function createStyled(input = {}) {
     rootShouldForwardProp = shouldForwardProp,
     slotShouldForwardProp = shouldForwardProp
   } = input;
-  const systemSx = props => {
-    return styleFunctionSx(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
-        defaultTheme,
-        themeId
-      }))
-    }));
-  };
-  systemSx.__mui_systemSx = true;
-  return (tag, inputOptions = {}) => {
-    // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
-    internal_processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
+  function styleAttachTheme(props) {
+    attachTheme(props, themeId, defaultTheme);
+  }
+  const styled = (tag, inputOptions = {}) => {
+    // If `tag` is already a styled component, filter out the `sx` style function
+    // to prevent unnecessary styles generated by the composite components.
+    internal_mutateStyles(tag, styles => styles.filter(style => style !== styleFunctionSx));
     const {
-        name: componentName,
-        slot: componentSlot,
-        skipVariantsResolver: inputSkipVariantsResolver,
-        skipSx: inputSkipSx,
-        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-        // For more details: https://github.com/mui/material-ui/pull/37908
-        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
-      } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
+      name: componentName,
+      slot: componentSlot,
+      skipVariantsResolver: inputSkipVariantsResolver,
+      skipSx: inputSkipSx,
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
+      ...options
+    } = inputOptions;
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -1551,7 +2179,6 @@ function createStyled(input = {}) {
     // For more details: https://github.com/mui/material-ui/pull/37908
     componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
-    let label;
     let shouldForwardPropOption = shouldForwardProp;
 
     // TODO v6: remove `Root` in the next major release
@@ -1565,74 +2192,96 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$1(tag, _extends({
+    const defaultStyledResolver = styled$1(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
-    const transformStyleArg = stylesArg => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return props => processStyleArg(stylesArg, _extends({}, props, {
-          theme: resolveTheme({
-            theme: props.theme,
-            defaultTheme,
-            themeId
-          })
-        }));
+      label: generateStyledLabel(),
+      ...options
+    });
+    const transformStyle = style => {
+      // - On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      //   component stays as a function. This condition makes sure that we do not interpolate functions
+      //   which are basically components used as a selectors.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
       }
-      return stylesArg;
+      if (typeof style === 'function') {
+        return function styleFunctionProcessor(props) {
+          return processStyle(props, style, props.theme.modularCssLayers ? layerName : undefined);
+        };
+      }
+      if (isPlainObject(style)) {
+        const serialized = preprocessStyles(style);
+        return function styleObjectProcessor(props) {
+          if (!serialized.variants) {
+            return props.theme.modularCssLayers ? shallowLayer(serialized.style, layerName) : serialized.style;
+          }
+          return processStyle(props, serialized, props.theme.modularCssLayers ? layerName : undefined);
+        };
+      }
+      return style;
     };
-    const muiStyledResolver = (styleArg, ...expressions) => {
-      let transformedStyleArg = transformStyleArg(styleArg);
-      const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
+    const muiStyledResolver = (...expressionsInput) => {
+      const expressionsHead = [];
+      const expressionsBody = expressionsInput.map(transformStyle);
+      const expressionsTail = [];
+
+      // Preprocess `props` to set the scoped theme value.
+      // This must run before any other expression.
+      expressionsHead.push(styleAttachTheme);
       if (componentName && overridesResolver) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
-          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+        expressionsTail.push(function styleThemeOverrides(props) {
+          const theme = props.theme;
+          const styleOverrides = theme.components?.[componentName]?.styleOverrides;
+          if (!styleOverrides) {
             return null;
           }
-          const styleOverrides = theme.components[componentName].styleOverrides;
           const resolvedStyleOverrides = {};
+
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
-              theme
-            }));
-          });
+          // eslint-disable-next-line guard-for-in
+          for (const slotKey in styleOverrides) {
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey], props.theme.modularCssLayers ? 'theme' : undefined);
+          }
           return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
-        expressionsWithDefaultTheme.push(props => {
-          var _theme$components;
-          const theme = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
-          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
-          return processStyleArg({
-            variants: themeVariants
-          }, _extends({}, props, {
-            theme
-          }));
+        expressionsTail.push(function styleThemeVariants(props) {
+          const theme = props.theme;
+          const themeVariants = theme?.components?.[componentName]?.variants;
+          if (!themeVariants) {
+            return null;
+          }
+          return processStyleVariants(props, themeVariants, [], props.theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(systemSx);
+        expressionsTail.push(styleFunctionSx);
       }
-      const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
-        const placeholders = new Array(numOfCustomFnsApplied).fill('');
-        // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-        transformedStyleArg = [...styleArg, ...placeholders];
-        transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+
+      // This function can be called as a tagged template, so the first argument would contain
+      // CSS `string[]` values.
+      if (Array.isArray(expressionsBody[0])) {
+        const inputStrings = expressionsBody.shift();
+
+        // We need to add placeholders in the tagged template for the custom functions we have
+        // possibly added (attachTheme, overrides, variants, and sx).
+        const placeholdersHead = new Array(expressionsHead.length).fill('');
+        const placeholdersTail = new Array(expressionsTail.length).fill('');
+        let outputStrings;
+        // prettier-ignore
+        {
+          outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
+          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
+        }
+
+        // The only case where we put something before `attachTheme`
+        expressionsHead.unshift(outputStrings);
       }
-      const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
+      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
+      const Component = defaultStyledResolver(...expressions);
       if (tag.muiName) {
         Component.muiName = tag.muiName;
       }
@@ -1643,41 +2292,78 @@ function createStyled(input = {}) {
     }
     return muiStyledResolver;
   };
+  return styled;
+}
+function generateStyledLabel(componentName, componentSlot) {
+  let label;
+  return label;
+}
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
+
+// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+function isStringTag(tag) {
+  return typeof tag === 'string' &&
+  // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96;
+}
+function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
+  return string.charAt(0).toLowerCase() + string.slice(1);
 }
 
 const styled = createStyled();
 
 /**
  * Add keys, values of `defaultProps` that does not exist in `props`
- * @param {object} defaultProps
- * @param {object} props
- * @returns {object} resolved props
+ * @param defaultProps
+ * @param props
+ * @returns resolved props
  */
 function resolveProps(defaultProps, props) {
-  const output = _extends({}, props);
-  Object.keys(defaultProps).forEach(propName => {
-    if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends({}, defaultProps[propName], output[propName]);
-    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
-      const defaultSlotProps = defaultProps[propName] || {};
-      const slotProps = props[propName];
-      output[propName] = {};
-      if (!slotProps || !Object.keys(slotProps)) {
-        // Reduce the iteration if the slot props is empty
-        output[propName] = defaultSlotProps;
-      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
-        // Reduce the iteration if the default slot props is empty
-        output[propName] = slotProps;
-      } else {
-        output[propName] = _extends({}, slotProps);
-        Object.keys(defaultSlotProps).forEach(slotPropName => {
-          output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
-        });
+  const output = {
+    ...props
+  };
+  for (const key in defaultProps) {
+    if (Object.prototype.hasOwnProperty.call(defaultProps, key)) {
+      const propName = key;
+      if (propName === 'components' || propName === 'slots') {
+        output[propName] = {
+          ...defaultProps[propName],
+          ...output[propName]
+        };
+      } else if (propName === 'componentsProps' || propName === 'slotProps') {
+        const defaultSlotProps = defaultProps[propName];
+        const slotProps = props[propName];
+        if (!slotProps) {
+          output[propName] = defaultSlotProps || {};
+        } else if (!defaultSlotProps) {
+          output[propName] = slotProps;
+        } else {
+          output[propName] = {
+            ...slotProps
+          };
+          for (const slotKey in defaultSlotProps) {
+            if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
+              const slotPropName = slotKey;
+              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+            }
+          }
+        }
+      } else if (output[propName] === undefined) {
+        output[propName] = defaultProps[propName];
       }
-    } else if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
     }
-  });
+  }
   return output;
 }
 
@@ -1703,37 +2389,67 @@ function useThemeProps({
   if (themeId) {
     theme = theme[themeId] || theme;
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
     name,
     props
   });
-  return mergedProps;
 }
 
+/* eslint no-restricted-syntax: 0, prefer-template: 0, guard-for-in: 0
+   ---
+   These rules are preventing the performance optimizations below.
+ */
+
+/**
+ * Compose classes from multiple sources.
+ *
+ * @example
+ * ```tsx
+ * const slots = {
+ *  root: ['root', 'primary'],
+ *  label: ['label'],
+ * };
+ *
+ * const getUtilityClass = (slot) => `MuiButton-${slot}`;
+ *
+ * const classes = {
+ *   root: 'my-root-class',
+ * };
+ *
+ * const output = composeClasses(slots, getUtilityClass, classes);
+ * // {
+ * //   root: 'MuiButton-root MuiButton-primary my-root-class',
+ * //   label: 'MuiButton-label',
+ * // }
+ * ```
+ *
+ * @param slots a list of classes for each possible slot
+ * @param getUtilityClass a function to resolve the class based on the slot name
+ * @param classes the input classes from props
+ * @returns the resolved classes for all slots
+ */
 function composeClasses(slots, getUtilityClass, classes = undefined) {
   const output = {};
-  Object.keys(slots).forEach(
-  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-  slot => {
-    output[slot] = slots[slot].reduce((acc, key) => {
-      if (key) {
-        const utilityClass = getUtilityClass(key);
-        if (utilityClass !== '') {
-          acc.push(utilityClass);
-        }
-        if (classes && classes[key]) {
-          acc.push(classes[key]);
+  for (const slotName in slots) {
+    const slot = slots[slotName];
+    let buffer = '';
+    let start = true;
+    for (let i = 0; i < slot.length; i += 1) {
+      const value = slot[i];
+      if (value) {
+        buffer += (start === true ? '' : ' ') + getUtilityClass(value);
+        start = false;
+        if (classes && classes[value]) {
+          buffer += ' ' + classes[value];
         }
       }
-      return acc;
-    }, []).join(' ');
-  });
+    }
+    output[slotName] = buffer;
+  }
   return output;
 }
 
-const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 const defaultTheme = createTheme();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = styled('div', {
@@ -1761,7 +2477,7 @@ function joinChildren(children, separator) {
   return childrenArray.reduce((output, child, index) => {
     output.push(child);
     if (index < childrenArray.length - 1) {
-      output.push( /*#__PURE__*/React.cloneElement(separator, {
+      output.push(/*#__PURE__*/React.cloneElement(separator, {
         key: `separator-${index}`
       }));
     }
@@ -1780,17 +2496,18 @@ const style = ({
   ownerState,
   theme
 }) => {
-  let styles = _extends({
+  let styles = {
     display: 'flex',
-    flexDirection: 'column'
-  }, handleBreakpoints({
-    theme
-  }, resolveBreakpointValues({
-    values: ownerState.direction,
-    breakpoints: theme.breakpoints.values
-  }), propValue => ({
-    flexDirection: propValue
-  })));
+    flexDirection: 'column',
+    ...handleBreakpoints({
+      theme
+    }, resolveBreakpointValues({
+      values: ownerState.direction,
+      breakpoints: theme.breakpoints.values
+    }), propValue => ({
+      flexDirection: propValue
+    }))
+  };
   if (ownerState.spacing) {
     const transformer = createUnarySpacing(theme);
     const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
@@ -1858,29 +2575,29 @@ function createStack(options = {}) {
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
     const {
-        component = 'div',
-        direction = 'column',
-        spacing = 0,
-        divider,
-        children,
-        className,
-        useFlexGap = false
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
+      component = 'div',
+      direction = 'column',
+      spacing = 0,
+      divider,
+      children,
+      className,
+      useFlexGap = false,
+      ...other
+    } = props;
     const ownerState = {
       direction,
       spacing,
       useFlexGap
     };
     const classes = useUtilityClasses();
-    return /*#__PURE__*/jsx(StackRoot, _extends({
+    return /*#__PURE__*/jsx(StackRoot, {
       as: component,
       ownerState: ownerState,
       ref: ref,
-      className: clsx(classes.root, className)
-    }, other, {
+      className: clsx(classes.root, className),
+      ...other,
       children: divider ? joinChildren(children, divider) : children
-    }));
+    });
   });
   return Stack;
 }
@@ -1899,26 +2616,58 @@ function createStack(options = {}) {
  */
 const Stack = createStack();
 
+const StyledCardContent = styled$2('div')((p) => ({
+    [p.theme.breakpoints.up('xs')]: {
+        padding: p.theme.spacing(1),
+        flex: '1 0 auto',
+        '&:last-child': { paddingBottom: 0 },
+        overflow: 'hidden',
+    },
+}));
+/**
+ * Component that displays the title and subtitle of a thumbnail list item.
+ * Text is automatically truncated with ellipsis when it exceeds the available space.
+ * The number of visible lines adjusts based on screen size.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.title - Primary title text displayed in bold
+ * @param {ReactNode} props.subTitle - Secondary text displayed below the title
+ * @returns {JSX.Element} The rendered title section with ellipsis overflow handling
+ */
 function ThumbnailListItemTitle(props) {
-    const StyledCardContent = styled$2('div')((p) => ({
-        [p.theme.breakpoints.up('xs')]: {
-            padding: p.theme.spacing(1),
-            flex: '1 0 auto',
-            '&:last-child': { paddingBottom: 0 },
-            overflow: 'hidden',
-        },
-    }));
-    return (jsx(Fragment, { children: jsx(Box, { children: jsxs(StyledCardContent, { children: [jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 'bold' }, children: props.title }) }), jsx(Stack, { direction: "row", gap: 1, children: jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsx(Typography, { variant: "subtitle2", sx: { fontSize: '0.84rem' }, color: "text.secondary", children: props.subTitle }) }) })] }) }) }));
+    return (jsx(Box, { children: jsxs(StyledCardContent, { children: [jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 'bold' }, children: props.title }) }), jsx(Stack, { direction: "row", gap: 1, children: jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsx(Typography, { variant: "subtitle2", sx: { fontSize: '0.84rem' }, color: "text.secondary", children: props.subTitle }) }) })] }) }));
 }
 
-const ThumbnailListItem = (props) => {
-    return (jsx(Fragment, { children: jsx(Card, { sx: { display: 'flex' }, children: jsx(CardActionArea, { disabled: !props.onClick, onClick: () => props.onClick(props.id), children: jsxs(Stack$1, { direction: "row", width: "100%", children: [jsx("img", { src: props.thumbnailUrl, width: '45%' }), jsxs(Stack$1, { direction: "row", justifyContent: "space-between", width: "100%", gap: 1, children: [jsx(ThumbnailListItemTitle, { title: props.title, subTitle: props.subTitle }), props.infoLabel] })] }) }) }) }));
+/**
+ * Width percentage for thumbnail image in list items.
+ * Value based on golden ratio proportion for optimal visual balance.
+ */
+const THUMBNAIL_IMAGE_WIDTH = '38.2%';
+/**
+ * Individual thumbnail list item component displaying an image, title, subtitle, and optional label.
+ * The component is memoized to prevent unnecessary re-renders.
+ *
+ * @param {ThumbnailListItemProps} props - Component props
+ * @param {string} props.id - Unique identifier for the item
+ * @param {string} props.thumbnailUrl - URL of the thumbnail image
+ * @param {string} props.title - Primary title text
+ * @param {ReactNode} props.subTitle - Secondary text displayed below title
+ * @param {ReactNode} props.infoLabel - Additional label content displayed on the right
+ * @param {function} [props.onClick] - Optional click handler that receives the item id
+ * @returns {JSX.Element} The rendered thumbnail item as a Material-UI Card
+ */
+const ThumbnailListItem$1 = (props) => {
+    return (jsx(Card, { sx: { display: 'flex' }, children: jsx(CardActionArea, { disabled: !props.onClick, onClick: props.onClick ? () => props.onClick(props.id) : undefined, "aria-label": props.onClick ? `View ${props.title}` : undefined, children: jsxs(Stack$1, { direction: "row", width: "100%", children: [jsx(Box, { component: "img", src: props.thumbnailUrl, width: THUMBNAIL_IMAGE_WIDTH, alt: props.title, sx: { objectFit: 'cover', height: '100%' } }), jsxs(Stack$1, { direction: "row", justifyContent: "space-between", flex: 1, gap: 1, children: [jsx(ThumbnailListItemTitle, { title: props.title, subTitle: props.subTitle }), props.infoLabel] })] }) }) }));
 };
-var ThumbnailListItem$1 = React__default.memo(ThumbnailListItem);
+var ThumbnailListItem = React__default.memo(ThumbnailListItem$1);
 
+/**
+ * Padding percentage used to create responsive card height with fixed aspect ratio.
+ * This percentage ensures consistent card dimensions across different screen sizes.
+ */
+const CARD_ASPECT_RATIO_PADDING = '27.75%';
 const RatioWrapper = styled$2('div')(() => ({
-    // Assuming a 16:9 aspect ratio
-    paddingTop: '27.75%', // 9 / 16 = 0.5625
+    paddingTop: CARD_ASPECT_RATIO_PADDING,
     position: 'relative',
     width: '100%',
     '& > *': {
@@ -1929,17 +2678,30 @@ const RatioWrapper = styled$2('div')(() => ({
         bottom: 0,
     },
 }));
-function ThumbnailListMainContent(props) {
+/**
+ * Main content area that displays the grid of thumbnail items.
+ * Handles responsive layout with Material-UI Grid and shows a loading indicator.
+ *
+ * @param {ThumbnailListMainContentProps} props - Component props
+ * @param {BreakpointType} [props.muiBreakpoints={ xs: 12, sm: 6, md: 6, lg: 4, xl: 3 }] - Grid column spans for different screen sizes
+ * @param {number} [props.spacing=2] - Spacing between grid items
+ * @returns {JSX.Element} The rendered grid of thumbnail items with loading indicator
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailList.MainContent
+ *   spacing={3}
+ *   muiBreakpoints={{ xs: 12, sm: 6, md: 4, lg: 3, xl: 2 }}
+ * />
+ * ```
+ */
+function ThumbnailListMainContent({ spacing = 2, muiBreakpoints = { xs: 12, sm: 6, md: 6, lg: 4, xl: 3 }, }) {
     const { items, isLoading } = useThumbnailListItemContext();
     const memoizedItems = useMemo(() => {
-        return items.map((item) => (jsx(Grid, { item: true, xs: props.muiBreakpoints.xs, sm: props.muiBreakpoints.sm, md: props.muiBreakpoints.md, lg: props.muiBreakpoints.lg, xl: props.muiBreakpoints.xl, children: jsx(RatioWrapper, { children: jsx(ThumbnailListItem$1, { id: item.id, thumbnailUrl: item.thumbnailUrl, title: item.title, subTitle: item.subTitle, infoLabel: item.label, onClick: item.onClick }) }) }, item.id)));
-    }, [items, props.muiBreakpoints]);
-    return (jsxs(Fragment, { children: [jsx(Box, { sx: { mt: 0.75, mb: 0.75 }, children: jsx(LinearProgress, { sx: { opacity: isLoading ? 1 : 0 } }) }), jsx(Grid, { container: true, spacing: props.spacing, children: memoizedItems })] }));
+        return items.map((item) => (jsx(Grid, { item: true, xs: muiBreakpoints.xs, sm: muiBreakpoints.sm, md: muiBreakpoints.md, lg: muiBreakpoints.lg, xl: muiBreakpoints.xl, children: jsx(RatioWrapper, { children: jsx(ThumbnailListItem, { id: item.id, thumbnailUrl: item.thumbnailUrl, title: item.title, subTitle: item.subTitle, infoLabel: item.label, onClick: item.onClick }) }) }, item.id)));
+    }, [items, muiBreakpoints]);
+    return (jsxs(Fragment, { children: [jsx(Box, { sx: { mt: 0.75, mb: 0.75 }, children: jsx(LinearProgress, { sx: { opacity: isLoading ? 1 : 0 } }) }), jsx(Grid, { container: true, spacing: spacing, children: memoizedItems })] }));
 }
-ThumbnailListMainContent.defaultProps = {
-    spacing: 2,
-    muiBreakpoints: { xs: 12, sm: 6, md: 6, lg: 4, xl: 3 },
-};
 
 /**
  * Generic method that sorts an array of items based on an item key
@@ -1970,14 +2732,48 @@ function compareValues(a, b) {
         return a < b ? -1 : a > b ? 1 : 0;
     }
 }
+/**
+ * Filters an array of items based on a tag property and optional condition function.
+ * If no condition is provided, items are filtered based on the truthiness of the tag value.
+ *
+ * @template T - The type of items in the array
+ * @param {T[]} array - The array to filter
+ * @param {keyof T} tagType - The property key to use for filtering
+ * @param {ConditionFunction<T[keyof T]>} [condition] - Optional condition function to apply to tag values
+ * @returns {T[]} A new array containing only items that pass the filter
+ */
 function filterByTag(array, tagType, condition) {
     const filteredArray = array.filter((item) => {
         const tagValue = item[tagType];
         return condition ? condition(tagValue) : !!tagValue;
     });
-    return [...filteredArray];
+    return filteredArray;
 }
 
+/**
+ * React hook that filters thumbnail list items based on a tag property and optional condition.
+ * Special case: when tag is 'id', returns all items without filtering.
+ *
+ * @template T - The type of items in the array
+ * @param {UseTagFilteredThumbnailListItemsProps<T>} props - Hook configuration
+ * @param {T[]} props.allItems - Array of all items to filter
+ * @param {string} props.initialTag - Initial property key to filter by
+ * @param {ConditionFunction<T[keyof T]>} [props.initialCondition] - Optional initial filter condition
+ * @returns {Object} Hook return values
+ * @returns {Object} returns.tagAndCondition - Current tag and condition configuration
+ * @returns {function} returns.setTagAndCondition - Function to update both tag and condition
+ * @returns {T[]} returns.tagFilteredItems - Filtered array of items
+ * @returns {function} returns.setTagWithCondition - Helper function to set tag with condition
+ *
+ * @example
+ * ```tsx
+ * const { tagFilteredItems, setTagAndCondition } = useTagFilteredThumbnailListItems({
+ *   allItems: items,
+ *   initialTag: 'status',
+ *   initialCondition: (val) => val === 'active'
+ * });
+ * ```
+ */
 const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialCondition, }) => {
     const [tagAndCondition, setTagAndCondition] = useState({ tag: initialTag, condition: initialCondition });
     const setTagWithCondition = (t, c) => {
@@ -1998,33 +2794,68 @@ const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialConditi
 };
 
 /**
- * Filters a list of event by a search term
- * @param allEvents event list that will be formatted
- * @param initialSearchTerm
- * @returns
+ * React hook that filters thumbnail list items based on a search term.
+ * Performs case-insensitive search against item titles and memoizes results for performance.
+ *
+ * @param {ThumbnailListItemInterface[]} allItems - Array of all items to filter
+ * @param {string} [initialSearchTerm=''] - Initial search term value
+ * @returns {Object} Hook return values
+ * @returns {string} returns.searchTerm - Current search term
+ * @returns {function} returns.setSearchTerm - Function to update the search term
+ * @returns {ThumbnailListItemInterface[]} returns.filteredItems - Items matching the search term
+ *
+ * @example
+ * ```tsx
+ * const { searchTerm, setSearchTerm, filteredItems } = useFilteredThumbnailListItems(items);
+ * ```
  */
 const useFilteredThumbnailListItems = (allItems, initialSearchTerm = '') => {
     const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
     const filteredItems = useMemo(() => {
-        const filtered = [...allItems].filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
+        const filtered = allItems.filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
         return filtered;
     }, [allItems, searchTerm]);
     return { searchTerm, setSearchTerm, filteredItems };
 };
 
+/**
+ * React hook that provides sorting functionality for thumbnail list items.
+ * Sorts items by a specified property key and supports ascending/descending order.
+ *
+ * @template T - The type of items in the array
+ * @param {T[]} allItems - Array of all items to sort
+ * @param {string} initialSortBy - Initial property key to sort by
+ * @param {boolean} initialSortAscending - Whether to initially sort in ascending order
+ * @returns {Object} Hook return values
+ * @returns {string} returns.sortBy - Current sort property key
+ * @returns {boolean} returns.sortAscending - Current sort direction (true for ascending)
+ * @returns {function} returns.setSortBy - Function to change the sort property
+ * @returns {function} returns.setSortAscending - Function to change the sort direction
+ * @returns {T[]} returns.sortedItems - Sorted array of items
+ *
+ * @example
+ * ```tsx
+ * const { sortBy, sortAscending, setSortBy, setSortAscending, sortedItems } =
+ *   useSortedThumbnailListItems(items, 'title', true);
+ * ```
+ */
 const useSortedThumbnailListItems = (allItems, initialSortBy, initialSortAscending) => {
     const [sortBy, setSortBy] = useState(initialSortBy);
     const [sortAscending, setSortAscending] = useState(initialSortAscending);
     const sortedItems = useMemo(() => {
         let sorted = orderByArray(allItems, sortBy);
         if (!sortAscending) {
-            sorted = sorted.reverse();
+            sorted = [...sorted].reverse();
         }
         return sorted;
     }, [allItems, sortBy, sortAscending]);
     return { sortBy, sortAscending, setSortBy, setSortAscending, sortedItems };
 };
 
+/**
+ * Default configuration values for ThumbnailList.
+ * Items are sorted by 'id' in ascending order by default.
+ */
 const defaultConfiguration = {
     sortBy: 'id',
     sortAscending: true,
@@ -2043,7 +2874,7 @@ var lodash = {exports: {}};
  */
 lodash.exports;
 
-(function (module, exports) {
+(function (module, exports$1) {
 (function() {
 
 	  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
@@ -2474,7 +3305,7 @@ lodash.exports;
 	  var root = freeGlobal || freeSelf || Function('return this')();
 
 	  /** Detect free variable `exports`. */
-	  var freeExports = exports && !exports.nodeType && exports;
+	  var freeExports = exports$1 && !exports$1.nodeType && exports$1;
 
 	  /** Detect free variable `module`. */
 	  var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
@@ -7489,7 +8320,7 @@ lodash.exports;
 	      bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG);
 
 	      if (!(bitmask & WRAP_CURRY_BOUND_FLAG)) {
-	        bitmask &= ~(WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG);
+	        bitmask &= -4;
 	      }
 	      var newData = [
 	        func, bitmask, thisArg, newPartials, newHolders, newPartialsRight,
@@ -7592,7 +8423,7 @@ lodash.exports;
 	      }
 	      var length = partials ? partials.length : 0;
 	      if (!length) {
-	        bitmask &= ~(WRAP_PARTIAL_FLAG | WRAP_PARTIAL_RIGHT_FLAG);
+	        bitmask &= -97;
 	        partials = holders = undefined$1;
 	      }
 	      ary = ary === undefined$1 ? ary : nativeMax(toInteger(ary), 0);
@@ -7625,7 +8456,7 @@ lodash.exports;
 	        : nativeMax(newData[9] - length, 0);
 
 	      if (!arity && bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG)) {
-	        bitmask &= ~(WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG);
+	        bitmask &= -25;
 	      }
 	      if (!bitmask || bitmask == WRAP_BIND_FLAG) {
 	        var result = createBind(func, bitmask, thisArg);
@@ -19235,91 +20066,166 @@ lodash.exports;
 
 var lodashExports = lodash.exports;
 
-const ThumbnailListSearchField = () => {
+/**
+ * Search field component for filtering thumbnail list items.
+ * Includes a search icon, text input, and clear button. Search is debounced for performance.
+ * The component is memoized to prevent unnecessary re-renders.
+ *
+ * @returns {JSX.Element} The rendered search field with icons and clear functionality
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailList.Header>
+ *   <ThumbnailList.Header.SearchField />
+ * </ThumbnailList.Header>
+ * ```
+ */
+const ThumbnailListSearchField$1 = () => {
     const [input, setInput] = useState('');
     const [showClearIcon, setShowClearIcon] = useState('hidden');
     const { setSearchTerm } = useThumbnailListItemContext();
+    // Create debounced function that's stable across renders unless setSearchTerm changes
+    const debouncedSetSearchTerm = useMemo(() => lodashExports.debounce((value) => setSearchTerm(value), 250), [setSearchTerm]);
     const handleChange = (value) => {
         setInput(value);
         setShowClearIcon(value === '' ? 'hidden' : '');
     };
-    const debouncedSetSearchTerm = useCallback(lodashExports.debounce(setSearchTerm, 50), []);
     useEffect(() => {
         debouncedSetSearchTerm(input);
         return () => {
             debouncedSetSearchTerm.cancel();
         };
     }, [input, debouncedSetSearchTerm]);
-    return (jsx(Box, { sx: { marginLeft: 'auto' }, children: jsx(FormControl, { children: jsx(TextField, { fullWidth: true, value: input, size: "small", variant: "outlined", onChange: (event) => handleChange(event.target.value), InputProps: {
+    return (jsx(Box, { sx: { marginLeft: 'auto' }, children: jsx(FormControl, { children: jsx(TextField, { fullWidth: true, value: input, size: "small", variant: "outlined", onChange: (event) => handleChange(event.target.value), "aria-label": "Search thumbnails", InputProps: {
                     startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, {}) })),
-                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { onClick: () => handleChange(''), sx: { visibility: showClearIcon, padding: 0 }, children: jsx(ClearIcon, {}) }) })),
+                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { onClick: () => handleChange(''), sx: { visibility: showClearIcon, padding: 0 }, "aria-label": "Clear search", children: jsx(ClearIcon, {}) }) })),
                 } }) }) }));
 };
-ThumbnailListSearchField.defaultProps = {
-    align: 'start',
-};
-var ThumbnailListSearchField$1 = React__default.memo(ThumbnailListSearchField);
+var ThumbnailListSearchField = React__default.memo(ThumbnailListSearchField$1);
 
+/**
+ * Individual filter tag component that displays as either a chip or icon button.
+ * Automatically collapses to icon-only view on smaller screens if an icon is provided.
+ *
+ * @param {ThumbnailListFilterTagProps} props - Component props
+ * @param {string} props.label - Display text for the tag
+ * @param {string} props.value - Value passed to the callback when clicked
+ * @param {'filled' | 'outlined'} props.variant - Visual style of the chip (filled for active, outlined for inactive)
+ * @param {Breakpoint} [props.collapseBreakpoint] - Screen size below which the chip shows as an icon
+ * @param {ReactNode} [props.icon] - Optional icon to display in collapsed mode
+ * @param {function} [props.onClickCallback] - Callback function triggered when tag is clicked
+ * @returns {JSX.Element} The rendered filter tag as a Chip or IconButton
+ */
 function ThumbnailListFilterTag(props) {
     const theme = useTheme$2();
+    const isAboveBreakpoint = useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0));
     const handleOnClick = (value) => {
         if (props.onClickCallback) {
             props.onClickCallback(value);
         }
     };
-    return (jsx(Fragment, { children: useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) || !props.icon ? (jsx(Fragment, { children: jsx(Chip, { label: props.label, variant: props.variant, onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined }) })) : (jsx(Fragment, { children: jsx(Tooltip, { title: props.label, children: jsx(IconButton, { onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined, children: props.icon }) }) })) }));
+    return isAboveBreakpoint || !props.icon ? (jsx(Chip, { label: props.label, variant: props.variant, onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined })) : (jsx(Tooltip, { title: props.label, children: jsx(IconButton, { onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined, children: props.icon }) }));
 }
 
-function ThumbnailListFilterTags(props) {
+/**
+ * Container component that renders multiple filter tag buttons.
+ * Each tag can filter items based on a specific property and optional condition function.
+ *
+ * @template T - The type of items in the list
+ * @param {ThumbnailListFilterTagsProps<T>} props - Component props
+ * @param {ThumbnailListItemTagType<T>[]} props.tags - Array of tag configurations
+ * @param {Breakpoint} [props.muiCollapseBreakpoint='md'] - Breakpoint at which tags collapse to icons
+ * @returns {JSX.Element} The rendered collection of filter tags
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailList.Header.FilterTags
+ *   tags={[
+ *     { label: 'Active', key: 'status', condition: (val) => val === 'active' },
+ *     { label: 'Archived', key: 'status', condition: (val) => val === 'archived' }
+ *   ]}
+ * />
+ * ```
+ */
+function ThumbnailListFilterTags({ tags, muiCollapseBreakpoint = 'md', }) {
     const { tagFilterCallback, tagAndCondition } = useThumbnailListItemContext();
-    return (jsx(Fragment, { children: props.tags.map((tag, index) => {
-            return (jsx(ThumbnailListFilterTag, { label: tag.label, value: tag.key.toString(), variant: tagAndCondition.tag === tag.key ? 'filled' : 'outlined', collapseBreakpoint: props.muiCollapseBreakpoint, onClickCallback: (value) => tagFilterCallback({ tag: value, condition: tag.condition }), icon: tag.icon }, `${index}_${tag.key.toString()}`));
+    return (jsx(Fragment, { children: tags.map((tag, index) => {
+            const isActive = tagAndCondition.tag === tag.key.toString() && tagAndCondition.condition === tag.condition;
+            return (jsx(ThumbnailListFilterTag, { label: tag.label, value: tag.key.toString(), variant: isActive ? 'filled' : 'outlined', collapseBreakpoint: muiCollapseBreakpoint, onClickCallback: (value) => tagFilterCallback({ tag: value, condition: tag.condition }), icon: tag.icon }, `${index}_${tag.key.toString()}`));
         }) }));
 }
-ThumbnailListFilterTags.defaultProps = {
-    align: 'start',
-    muiCollapseBreakpoint: 'md',
-};
 
 /**
  * Displays a generic MUI select dropdown.
- * Optinal collapses to a sort icon at a certain breakpoint
+ * Optional collapses to a sort icon at a certain breakpoint
  * @param props.label Select Label
  * @param props.width * Width of the input field
  * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
  * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
  * @param props.items * Array of items (name-value-pairs) that will be the select options
- * @returns Drowpdown Input Component
+ * @returns Dropdown Input Component
  */
 function DropdownInput(props) {
     const [value, setValue] = useState(props.defaultValue ?? '');
     const theme = useTheme$2();
+    const isAboveBreakpoint = useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0));
     const [anchorEl, setAnchorEl] = useState(null);
     const handleChange = (value, name) => {
         setValue(value);
         setAnchorEl(null);
         props.onChangeCallback(value, name);
     };
-    return (jsxs(Fragment, { children: [useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) ? (jsxs(FormControl, { sx: { width: props.width, textAlign: 'start' }, children: [jsx(InputLabel, { size: "small", children: props.label }), jsx(Select, { value: value, size: "small", label: props.label, onChange: (event) => handleChange(event.target.value, event.target.name), children: props.items.map((item) => {
+    return (jsxs(Fragment, { children: [isAboveBreakpoint ? (jsxs(FormControl, { sx: { width: props.width, textAlign: 'start' }, children: [jsx(InputLabel, { size: "small", children: props.label }), jsx(Select, { value: value, size: "small", label: props.label, onChange: (event) => handleChange(event.target.value, event.target.name), children: props.items.map((item) => {
                             return (jsx(MenuItem, { value: item.value, children: item.name }, item.value));
-                        }) })] })) : (jsx(IconButton
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            , { 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onClick: (event) => setAnchorEl(event.currentTarget), children: props.icon })), jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), children: props.items.map((item) => (jsx(MenuItem, { onClick: () => handleChange(item.value), children: item.name }, item.value))) })] }));
+                        }) })] })) : (jsx(IconButton, { onClick: (event) => setAnchorEl(event.currentTarget), children: props.icon })), jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), children: props.items.map((item) => (jsx(MenuItem, { onClick: () => handleChange(item.value), children: item.name }, item.value))) })] }));
 }
 
-function ThumbnailListHeaderSort(props) {
+/**
+ * Sort control component that provides sorting functionality for the thumbnail list.
+ * Includes a toggle button for ascending/descending order and a dropdown to select the sort field.
+ *
+ * @template T - The type of items in the list
+ * @param {ThumbnailListHeaderSortProps<T>} props - Component props
+ * @param {Array<{label: string, key: keyof T}>} props.items - Array of sortable field options
+ * @param {Breakpoint} [props.muiBreakpoint='md'] - Breakpoint at which the dropdown collapses to an icon
+ * @returns {JSX.Element} The rendered sort controls with ascending/descending toggle and field selector
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailList.Header.Sort
+ *   items={[
+ *     { label: 'Title', key: 'title' },
+ *     { label: 'Date', key: 'date' }
+ *   ]}
+ * />
+ * ```
+ */
+function ThumbnailListHeaderSort({ items, muiBreakpoint = 'md', }) {
     const { setSortAscending, sortAscending, setSortBy, sortBy } = useThumbnailListItemContext();
-    return (jsx(Fragment, { children: jsxs(Box, { sx: { minWidth: '80px' }, children: [jsx(Tooltip, { title: "asc/desc", children: jsx(IconButton, { onClick: () => setSortAscending(!sortAscending), children: jsx(SwapVertIcon, {}) }) }), jsx(DropdownInput, { width: "130px", collapseBreakpoint: props.muiBreakpoint, label: 'sort', defaultValue: sortBy, icon: jsx(Tooltip, { title: 'sort', children: jsx(SortIcon, {}) }), items: props.items.map((i) => {
+    return (jsx(Fragment, { children: jsxs(Box, { sx: { minWidth: '80px' }, children: [jsx(Tooltip, { title: "asc/desc", children: jsx(IconButton, { onClick: () => setSortAscending(!sortAscending), "aria-label": sortAscending ? "Sort descending" : "Sort ascending", children: jsx(SwapVertIcon, {}) }) }), jsx(DropdownInput, { width: "130px", collapseBreakpoint: muiBreakpoint, label: 'sort', defaultValue: sortBy, icon: jsx(Tooltip, { title: 'sort', children: jsx(SortIcon, {}) }), items: items.map((i) => {
                         return { name: i.label, value: i.key.toString() };
                     }), onChangeCallback: (value) => setSortBy(value) })] }) }));
 }
-ThumbnailListHeaderSort.defaultProps = {
-    align: 'start',
-    muiBreakpoint: 'md',
-};
 
+/**
+ * Header component for the ThumbnailList that arranges child components horizontally.
+ * Child components can be aligned to 'start' or 'end' using their align prop.
+ *
+ * This component uses a compound component pattern with SearchField, FilterTags, and Sort sub-components.
+ *
+ * @param {ThumbnailListHeaderProps} props - Component props
+ * @param {ReactNode} props.children - Child components to display in the header
+ * @param {'start' | 'center' | 'end' | 'space-between'} [props.justifyContent='space-between'] - Flex justification for header layout
+ * @returns {JSX.Element} The rendered header component
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailList.Header>
+ *   <ThumbnailList.Header.SearchField />
+ *   <ThumbnailList.Header.Sort items={sortOptions} />
+ * </ThumbnailList.Header>
+ * ```
+ */
 const ThumbnailListHeader = function (props) {
     const startAlignedItems = [];
     const endAlignedItems = [];
@@ -19335,17 +20241,34 @@ const ThumbnailListHeader = function (props) {
             }
         }
     });
-    return (jsx(Fragment, { children: jsxs(Stack$1, { direction: "row", alignItems: "center", justifyContent: props.justifyContent ?? 'space-between', gap: 2, children: [jsx(Stack$1, { direction: "row", alignItems: "center", gap: 2, justifyContent: "start", children: startAlignedItems }), endAlignedItems] }) }));
+    return (jsxs(Stack$1, { direction: "row", alignItems: "center", justifyContent: props.justifyContent ?? 'space-between', gap: 2, children: [jsx(Stack$1, { direction: "row", alignItems: "center", gap: 2, justifyContent: "start", children: startAlignedItems }), endAlignedItems] }));
 };
-ThumbnailListHeader.SearchField = ThumbnailListSearchField$1;
+ThumbnailListHeader.SearchField = ThumbnailListSearchField;
 ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
 ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
 
 /**
- * Main Component: Renders all sub components
- * Includes ThumbnailList Provider for context data
- * @param props react children, items
- * @returns component
+ * Main ThumbnailList component that displays a list of items with thumbnails.
+ * Provides context for child components and manages state for sorting, filtering, and searching.
+ *
+ * This component uses a compound component pattern with Header and MainContent sub-components.
+ *
+ * @template T - The type of items in the list (must extend ThumbnailListItemInterface)
+ * @param {ThumbnailListProps<T>} props - Component props
+ * @param {ReactNode} props.children - Child components (typically Header and MainContent)
+ * @param {T[]} props.items - Array of items to display in the list
+ * @param {ThumbnailListConfigurationInterface<T>} [props.config] - Optional configuration for sorting and filtering
+ * @returns {JSX.Element} The rendered ThumbnailList component with context provider
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailList items={items} config={{ sortBy: 'title', sortAscending: true }}>
+ *   <ThumbnailList.Header>
+ *     <ThumbnailList.Header.SearchField />
+ *   </ThumbnailList.Header>
+ *   <ThumbnailList.MainContent />
+ * </ThumbnailList>
+ * ```
  */
 function ThumbnailList(props) {
     const combinedConfig = {
@@ -19356,20 +20279,20 @@ function ThumbnailList(props) {
     const { sortedItems, setSortBy, setSortAscending, sortAscending } = useSortedThumbnailListItems(listItems, combinedConfig.sortBy.toString(), combinedConfig.sortAscending);
     const { tagFilteredItems, setTagAndCondition, tagAndCondition } = useTagFilteredThumbnailListItems({ allItems: sortedItems, initialTag: combinedConfig.tag.toString() });
     const { setSearchTerm, filteredItems } = useFilteredThumbnailListItems(tagFilteredItems);
-    return (jsx(Fragment, { children: jsx(ThumbnailListItemContext.Provider, { value: {
-                items: filteredItems,
-                setItems: setListItems,
-                originalItems: listItems,
-                setOriginalItems: setListItems,
-                tagFilterCallback: setTagAndCondition,
-                tagAndCondition: tagAndCondition,
-                setSearchTerm: setSearchTerm,
-                setSortAscending: setSortAscending,
-                sortAscending: sortAscending,
-                setSortBy: setSortBy,
-                sortBy: combinedConfig.sortBy.toString(),
-                isLoading: false,
-            }, children: jsx(Stack$1, { direction: "column", sx: { width: '100%', minWidth: '425px' }, children: props.children }) }) }));
+    return (jsx(ThumbnailListItemContext.Provider, { value: {
+            items: filteredItems,
+            setItems: setListItems,
+            originalItems: listItems,
+            setOriginalItems: setListItems,
+            tagFilterCallback: setTagAndCondition,
+            tagAndCondition: tagAndCondition,
+            setSearchTerm: setSearchTerm,
+            setSortAscending: setSortAscending,
+            sortAscending: sortAscending,
+            setSortBy: setSortBy,
+            sortBy: combinedConfig.sortBy.toString(),
+            isLoading: combinedConfig.isLoading ?? false,
+        }, children: jsx(Stack$1, { direction: "column", sx: { width: '100%', minWidth: '350px' }, children: props.children }) }));
 }
 ThumbnailList.MainContent = ThumbnailListMainContent;
 ThumbnailList.Header = ThumbnailListHeader;