@porsche-design-system/components-react 3.21.0 → 3.22.0-rc.0

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -31,7 +31,7 @@ function toPrimitive(t, r) {
   if ("object" != _typeof(t) || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r );
+    var i = e.call(t, r);
     if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -2755,400 +2755,426 @@ function getAugmentedNamespace(n) {
 	return a;
 }
 
-var _tslib$1 = {};
+var _tslib = {};
 
-(function (exports) {
+var hasRequired_tslib;
 
-	Object.defineProperty(exports, '__esModule', { value: true });
+function require_tslib () {
+	if (hasRequired_tslib) return _tslib;
+	hasRequired_tslib = 1;
+	(function (exports) {
 
-	/*! *****************************************************************************
-	Copyright (c) Microsoft Corporation.
+		Object.defineProperty(exports, '__esModule', { value: true });
 
-	Permission to use, copy, modify, and/or distribute this software for any
-	purpose with or without fee is hereby granted.
+		/*! *****************************************************************************
+		Copyright (c) Microsoft Corporation.
 
-	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-	PERFORMANCE OF THIS SOFTWARE.
-	***************************************************************************** */
+		Permission to use, copy, modify, and/or distribute this software for any
+		purpose with or without fee is hereby granted.
 
-	exports.__assign = function () {
-		exports.__assign =
-			Object.assign ||
-			function __assign(t) {
-				for (var s, i = 1, n = arguments.length; i < n; i++) {
-					s = arguments[i];
-					for (var p in s)
-						if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-				}
-				return t;
-			};
-		return exports.__assign.apply(this, arguments);
-	}; 
-} (_tslib$1));
-
-var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
-
-/**
- * The custom `sort` method for
- * for the [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or
- * [`pleeease`](https://www.npmjs.com/package/pleeease) which using `css-mqpacker`
- * or, perhaps, something else ))
- *
- * @module sort-css-media-queries
- * @author Oleg Dutchenko <dutchenko.o.wezom@gmail.com>
- * @version 1.5.0
- */
-
-// ----------------------------------------
-// Private
-// ----------------------------------------
-
-const minMaxWidth = /(!?\(\s*min(-device-)?-width)(.|\n)+\(\s*max(-device)?-width/i;
-const minWidth = /\(\s*min(-device)?-width/i;
-const maxMinWidth = /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width/i;
-const maxWidth = /\(\s*max(-device)?-width/i;
-
-const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
-const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
-
-const minMaxHeight = /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height/i;
-const minHeight = /\(\s*min(-device)?-height/i;
-const maxMinHeight = /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height/i;
-const maxHeight = /\(\s*max(-device)?-height/i;
-
-const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
-const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
-
-const isPrint = /print/i;
-const isPrintOnly = /^print$/i;
-
-const maxValue = Number.MAX_VALUE;
-
-/**
- * Obtain the length of the media request in pixels.
- * Copy from original source `function inspectLength (length)`
- * {@link https://github.com/hail2u/node-css-mqpacker/blob/master/index.js#L58}
- * @private
- * @param {string} length
- * @return {number}
- */
-function _getQueryLength (length) {
-  length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(length);
-
-  if (length === null) {
-    return maxValue
-  }
-
-  let number = length[1];
-  const unit = length[2];
-
-  switch (unit) {
-    case 'ch':
-      number = parseFloat(number) * 8.8984375;
-      break
-
-    case 'em':
-    case 'rem':
-      number = parseFloat(number) * 16;
-      break
-
-    case 'ex':
-      number = parseFloat(number) * 8.296875;
-      break
-
-    case 'px':
-      number = parseFloat(number);
-      break
-  }
-
-  return +number
-}
-
-/**
- * Wrapper for creating test functions
- * @private
- * @param {RegExp} doubleTestTrue
- * @param {RegExp} doubleTestFalse
- * @param {RegExp} singleTest
- * @return {Function}
- */
-function _testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
-  /**
-   * @param {string} query
-   * @return {boolean}
-   */
-  return function (query) {
-    if (doubleTestTrue.test(query)) {
-      return true
-    } else if (doubleTestFalse.test(query)) {
-      return false
-    }
-    return singleTest.test(query)
-  }
-}
-
-/**
- * @private
- * @param {string} a
- * @param {string} b
- * @return {number|null}
- */
-function _testIsPrint (a, b) {
-  const isPrintA = isPrint.test(a);
-  const isPrintOnlyA = isPrintOnly.test(a);
-
-  const isPrintB = isPrint.test(b);
-  const isPrintOnlyB = isPrintOnly.test(b);
-
-  if (isPrintA && isPrintB) {
-    if (!isPrintOnlyA && isPrintOnlyB) {
-      return 1
-    }
-    if (isPrintOnlyA && !isPrintOnlyB) {
-      return -1
-    }
-    return a.localeCompare(b)
-  }
-  if (isPrintA) {
-    return 1
-  }
-  if (isPrintB) {
-    return -1
-  }
+		THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+		REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+		AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+		INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+		LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+		OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+		PERFORMANCE OF THIS SOFTWARE.
+		***************************************************************************** */
 
-  return null
+		exports.__assign = function () {
+			exports.__assign =
+				Object.assign ||
+				function __assign(t) {
+					for (var s, i = 1, n = arguments.length; i < n; i++) {
+						s = arguments[i];
+						for (var p in s)
+							if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+					}
+					return t;
+				};
+			return exports.__assign.apply(this, arguments);
+		}; 
+	} (_tslib));
+	return _tslib;
 }
 
-// ----------------------------------------
-// Public
-// ----------------------------------------
-
-/**
- * Sorting an array with media queries
- * according to the mobile-first methodology.
- * @param {string} a
- * @param {string} b
- * @return {number} 1 / 0 / -1
- */
-function sortCSSmq$1 (a, b) {
-  const testIsPrint = _testIsPrint(a, b);
-  if (testIsPrint !== null) {
-    return testIsPrint
-  }
-
-  const minA = isMinWidth(a) || isMinHeight(a);
-  const maxA = isMaxWidth(a) || isMaxHeight(a);
+var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
 
-  const minB = isMinWidth(b) || isMinHeight(b);
-  const maxB = isMaxWidth(b) || isMaxHeight(b);
+var sortCssMediaQueries;
+var hasRequiredSortCssMediaQueries;
+
+function requireSortCssMediaQueries () {
+	if (hasRequiredSortCssMediaQueries) return sortCssMediaQueries;
+	hasRequiredSortCssMediaQueries = 1;
+
+	/**
+	 * The custom `sort` method for
+	 * for the [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or
+	 * [`pleeease`](https://www.npmjs.com/package/pleeease) which using `css-mqpacker`
+	 * or, perhaps, something else ))
+	 *
+	 * @module sort-css-media-queries
+	 * @author Oleg Dutchenko <dutchenko.o.wezom@gmail.com>
+	 * @version 1.5.0
+	 */
+
+	// ----------------------------------------
+	// Private
+	// ----------------------------------------
+
+	const minMaxWidth = /(!?\(\s*min(-device-)?-width)(.|\n)+\(\s*max(-device)?-width/i;
+	const minWidth = /\(\s*min(-device)?-width/i;
+	const maxMinWidth = /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width/i;
+	const maxWidth = /\(\s*max(-device)?-width/i;
+
+	const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
+	const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
+
+	const minMaxHeight = /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height/i;
+	const minHeight = /\(\s*min(-device)?-height/i;
+	const maxMinHeight = /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height/i;
+	const maxHeight = /\(\s*max(-device)?-height/i;
+
+	const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
+	const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
+
+	const isPrint = /print/i;
+	const isPrintOnly = /^print$/i;
+
+	const maxValue = Number.MAX_VALUE;
+
+	/**
+	 * Obtain the length of the media request in pixels.
+	 * Copy from original source `function inspectLength (length)`
+	 * {@link https://github.com/hail2u/node-css-mqpacker/blob/master/index.js#L58}
+	 * @private
+	 * @param {string} length
+	 * @return {number}
+	 */
+	function _getQueryLength (length) {
+	  length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(length);
+
+	  if (length === null) {
+	    return maxValue
+	  }
+
+	  let number = length[1];
+	  const unit = length[2];
+
+	  switch (unit) {
+	    case 'ch':
+	      number = parseFloat(number) * 8.8984375;
+	      break
+
+	    case 'em':
+	    case 'rem':
+	      number = parseFloat(number) * 16;
+	      break
+
+	    case 'ex':
+	      number = parseFloat(number) * 8.296875;
+	      break
+
+	    case 'px':
+	      number = parseFloat(number);
+	      break
+	  }
+
+	  return +number
+	}
 
-  if (minA && maxB) {
-    return -1
-  }
-  if (maxA && minB) {
-    return 1
-  }
+	/**
+	 * Wrapper for creating test functions
+	 * @private
+	 * @param {RegExp} doubleTestTrue
+	 * @param {RegExp} doubleTestFalse
+	 * @param {RegExp} singleTest
+	 * @return {Function}
+	 */
+	function _testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
+	  /**
+	   * @param {string} query
+	   * @return {boolean}
+	   */
+	  return function (query) {
+	    if (doubleTestTrue.test(query)) {
+	      return true
+	    } else if (doubleTestFalse.test(query)) {
+	      return false
+	    }
+	    return singleTest.test(query)
+	  }
+	}
 
-  let lengthA = _getQueryLength(a);
-  let lengthB = _getQueryLength(b);
+	/**
+	 * @private
+	 * @param {string} a
+	 * @param {string} b
+	 * @return {number|null}
+	 */
+	function _testIsPrint (a, b) {
+	  const isPrintA = isPrint.test(a);
+	  const isPrintOnlyA = isPrintOnly.test(a);
+
+	  const isPrintB = isPrint.test(b);
+	  const isPrintOnlyB = isPrintOnly.test(b);
+
+	  if (isPrintA && isPrintB) {
+	    if (!isPrintOnlyA && isPrintOnlyB) {
+	      return 1
+	    }
+	    if (isPrintOnlyA && !isPrintOnlyB) {
+	      return -1
+	    }
+	    return a.localeCompare(b)
+	  }
+	  if (isPrintA) {
+	    return 1
+	  }
+	  if (isPrintB) {
+	    return -1
+	  }
+
+	  return null
+	}
 
-  if (lengthA === maxValue && lengthB === maxValue) {
-    return a.localeCompare(b)
-  } else if (lengthA === maxValue) {
-    return 1
-  } else if (lengthB === maxValue) {
-    return -1
-  }
+	// ----------------------------------------
+	// Public
+	// ----------------------------------------
+
+	/**
+	 * Sorting an array with media queries
+	 * according to the mobile-first methodology.
+	 * @param {string} a
+	 * @param {string} b
+	 * @return {number} 1 / 0 / -1
+	 */
+	function sortCSSmq (a, b) {
+	  const testIsPrint = _testIsPrint(a, b);
+	  if (testIsPrint !== null) {
+	    return testIsPrint
+	  }
+
+	  const minA = isMinWidth(a) || isMinHeight(a);
+	  const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+	  const minB = isMinWidth(b) || isMinHeight(b);
+	  const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+	  if (minA && maxB) {
+	    return -1
+	  }
+	  if (maxA && minB) {
+	    return 1
+	  }
+
+	  let lengthA = _getQueryLength(a);
+	  let lengthB = _getQueryLength(b);
+
+	  if (lengthA === maxValue && lengthB === maxValue) {
+	    return a.localeCompare(b)
+	  } else if (lengthA === maxValue) {
+	    return 1
+	  } else if (lengthB === maxValue) {
+	    return -1
+	  }
+
+	  if (lengthA > lengthB) {
+	    if (maxA) {
+	      return -1
+	    }
+	    return 1
+	  }
+
+	  if (lengthA < lengthB) {
+	    if (maxA) {
+	      return 1
+	    }
+	    return -1
+	  }
+
+	  return a.localeCompare(b)
+	}
 
-  if (lengthA > lengthB) {
-    if (maxA) {
-      return -1
-    }
-    return 1
-  }
+	/**
+	 * Sorting an array with media queries
+	 * according to the desktop-first methodology.
+	 * @param {string} a
+	 * @param {string} b
+	 * @return {number} 1 / 0 / -1
+	 */
+	sortCSSmq.desktopFirst = function (a, b) {
+	  const testIsPrint = _testIsPrint(a, b);
+	  if (testIsPrint !== null) {
+	    return testIsPrint
+	  }
+
+	  const minA = isMinWidth(a) || isMinHeight(a);
+	  const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+	  const minB = isMinWidth(b) || isMinHeight(b);
+	  const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+	  if (minA && maxB) {
+	    return 1
+	  }
+	  if (maxA && minB) {
+	    return -1
+	  }
+
+	  const lengthA = _getQueryLength(a);
+	  const lengthB = _getQueryLength(b);
+
+	  if (lengthA === maxValue && lengthB === maxValue) {
+	    return a.localeCompare(b)
+	  } else if (lengthA === maxValue) {
+	    return 1
+	  } else if (lengthB === maxValue) {
+	    return -1
+	  }
+
+	  if (lengthA > lengthB) {
+	    if (maxA) {
+	      return -1
+	    }
+	    return 1
+	  }
+
+	  if (lengthA < lengthB) {
+	    if (maxA) {
+	      return 1
+	    }
+	    return -1
+	  }
+
+	  return -(a.localeCompare(b))
+	};
 
-  if (lengthA < lengthB) {
-    if (maxA) {
-      return 1
-    }
-    return -1
-  }
+	// ----------------------------------------
+	// Exports
+	// ----------------------------------------
 
-  return a.localeCompare(b)
+	sortCssMediaQueries = sortCSSmq;
+	return sortCssMediaQueries;
 }
 
-/**
- * Sorting an array with media queries
- * according to the desktop-first methodology.
- * @param {string} a
- * @param {string} b
- * @return {number} 1 / 0 / -1
- */
-sortCSSmq$1.desktopFirst = function (a, b) {
-  const testIsPrint = _testIsPrint(a, b);
-  if (testIsPrint !== null) {
-    return testIsPrint
-  }
+var dist;
+var hasRequiredDist;
 
-  const minA = isMinWidth(a) || isMinHeight(a);
-  const maxA = isMaxWidth(a) || isMaxHeight(a);
+function requireDist () {
+	if (hasRequiredDist) return dist;
+	hasRequiredDist = 1;
 
-  const minB = isMinWidth(b) || isMinHeight(b);
-  const maxB = isMaxWidth(b) || isMaxHeight(b);
+	var _tslib = require_tslib();
+	var jss = require$$1;
+	var sortCSSmq = requireSortCssMediaQueries();
 
-  if (minA && maxB) {
-    return 1
-  }
-  if (maxA && minB) {
-    return -1
-  }
-
-  const lengthA = _getQueryLength(a);
-  const lengthB = _getQueryLength(b);
-
-  if (lengthA === maxValue && lengthB === maxValue) {
-    return a.localeCompare(b)
-  } else if (lengthA === maxValue) {
-    return 1
-  } else if (lengthB === maxValue) {
-    return -1
-  }
-
-  if (lengthA > lengthB) {
-    if (maxA) {
-      return -1
-    }
-    return 1
-  }
-
-  if (lengthA < lengthB) {
-    if (maxA) {
-      return 1
-    }
-    return -1
-  }
-
-  return -(a.localeCompare(b))
-};
-
-// ----------------------------------------
-// Exports
-// ----------------------------------------
-
-var sortCssMediaQueries = sortCSSmq$1;
-
-var _tslib = _tslib$1;
-var jss$1 = require$$1;
-var sortCSSmq = sortCssMediaQueries;
-
-function _interopDefaultLegacy(e) {
-	return e && typeof e === 'object' && 'default' in e ? e : { default: e };
-}
+	function _interopDefaultLegacy(e) {
+		return e && typeof e === 'object' && 'default' in e ? e : { default: e };
+	}
 
-var sortCSSmq__default = /*#__PURE__*/ _interopDefaultLegacy(sortCSSmq);
+	var sortCSSmq__default = /*#__PURE__*/ _interopDefaultLegacy(sortCSSmq);
 
-function isPlainObject(sample) {
-	return (
-		sample !== null && typeof sample === 'object' && Array.isArray(sample) === false
-	);
-}
-var UN_QUERIED = '__UN_QUERIED';
-function recursiveInnerAndGetQueries(pluginOptions, rules) {
-	var queries = {
-		groups: {},
-		groupsSortNames: []
-	};
-	for (var index = 0; index < rules.length; index++) {
-		var rule = rules[index];
-		var query =
-			rule.type === 'conditional' && typeof rule.query === 'string'
-				? rule.query
-				: UN_QUERIED;
-		if (!queries.groups.hasOwnProperty(query)) {
-			queries.groupsSortNames.push(query);
-			queries.groups[query] = [];
-		}
-		queries.groups[query].push(index);
-		// eslint-disable-next-line @typescript-eslint/no-use-before-define
-		recursive(pluginOptions, rule);
+	function isPlainObject(sample) {
+		return (
+			sample !== null && typeof sample === 'object' && Array.isArray(sample) === false
+		);
 	}
-	queries.groupsSortNames.sort(function (a, b) {
-		var aWeight = a === UN_QUERIED ? 0 : a.length;
-		var bWeight = b === UN_QUERIED ? 0 : b.length;
-		if (aWeight > 0 && bWeight > 0) {
-			if (pluginOptions.desktopFirst) {
-				return sortCSSmq__default['default'].desktopFirst(a, b);
-			} else {
-				return sortCSSmq__default['default'](a, b);
+	var UN_QUERIED = '__UN_QUERIED';
+	function recursiveInnerAndGetQueries(pluginOptions, rules) {
+		var queries = {
+			groups: {},
+			groupsSortNames: []
+		};
+		for (var index = 0; index < rules.length; index++) {
+			var rule = rules[index];
+			var query =
+				rule.type === 'conditional' && typeof rule.query === 'string'
+					? rule.query
+					: UN_QUERIED;
+			if (!queries.groups.hasOwnProperty(query)) {
+				queries.groupsSortNames.push(query);
+				queries.groups[query] = [];
 			}
-		} else {
-			return aWeight - bWeight;
+			queries.groups[query].push(index);
+			// eslint-disable-next-line @typescript-eslint/no-use-before-define
+			recursive(pluginOptions, rule);
 		}
-	});
-	return queries;
-}
-function recursive(pluginOptions, data) {
-	if (isPlainObject(data) && data.rules instanceof jss$1.RuleList) {
-		data.rules.toString = function (options) {
-			if (options === void 0) {
-				options = {};
-			}
-			var str = '';
-			var sheet = this.options.sheet;
-			var link = sheet ? sheet.options.link : false;
-			var _a = recursiveInnerAndGetQueries(pluginOptions, this.index),
-				groups = _a.groups,
-				groupsSortNames = _a.groupsSortNames;
-			for (var i = 0; i < groupsSortNames.length; i++) {
-				var groupName = groupsSortNames[i];
-				var group = groups[groupsSortNames[i]];
-				if (groupName !== UN_QUERIED && pluginOptions.combineMediaQueries) {
-					str += '\n' + groupName + ' {';
-					for (var i_1 = 0; i_1 < group.length; i_1++) {
-						var rule = this.index[group[i_1]];
-						var css = rule.rules.toString(
-							_tslib.__assign(_tslib.__assign({}, options), {
-								indent: (options.indent || 0) + 1
-							})
-						);
-						if (!css && !link) continue;
-						if (str) str += '\n';
-						str += css;
-					}
-					str += '\n}\n';
+		queries.groupsSortNames.sort(function (a, b) {
+			var aWeight = a === UN_QUERIED ? 0 : a.length;
+			var bWeight = b === UN_QUERIED ? 0 : b.length;
+			if (aWeight > 0 && bWeight > 0) {
+				if (pluginOptions.desktopFirst) {
+					return sortCSSmq__default['default'].desktopFirst(a, b);
 				} else {
-					for (var i_2 = 0; i_2 < group.length; i_2++) {
-						var rule = this.index[group[i_2]];
-						var css = rule.toString(options);
-						if (!css && !link) continue;
-						if (str) str += '\n';
-						str += css;
-					}
+					return sortCSSmq__default['default'](a, b);
 				}
+			} else {
+				return aWeight - bWeight;
 			}
-			return str;
-		};
+		});
+		return queries;
 	}
-}
-function jssCombineAndSortMQ(options) {
-	if (options === void 0) {
-		options = {};
+	function recursive(pluginOptions, data) {
+		if (isPlainObject(data) && data.rules instanceof jss.RuleList) {
+			data.rules.toString = function (options) {
+				if (options === void 0) {
+					options = {};
+				}
+				var str = '';
+				var sheet = this.options.sheet;
+				var link = sheet ? sheet.options.link : false;
+				var _a = recursiveInnerAndGetQueries(pluginOptions, this.index),
+					groups = _a.groups,
+					groupsSortNames = _a.groupsSortNames;
+				for (var i = 0; i < groupsSortNames.length; i++) {
+					var groupName = groupsSortNames[i];
+					var group = groups[groupsSortNames[i]];
+					if (groupName !== UN_QUERIED && pluginOptions.combineMediaQueries) {
+						str += '\n' + groupName + ' {';
+						for (var i_1 = 0; i_1 < group.length; i_1++) {
+							var rule = this.index[group[i_1]];
+							var css = rule.rules.toString(
+								_tslib.__assign(_tslib.__assign({}, options), {
+									indent: (options.indent || 0) + 1
+								})
+							);
+							if (!css && !link) continue;
+							if (str) str += '\n';
+							str += css;
+						}
+						str += '\n}\n';
+					} else {
+						for (var i_2 = 0; i_2 < group.length; i_2++) {
+							var rule = this.index[group[i_2]];
+							var css = rule.toString(options);
+							if (!css && !link) continue;
+							if (str) str += '\n';
+							str += css;
+						}
+					}
+				}
+				return str;
+			};
+		}
 	}
-	return {
-		onProcessSheet: function (sheet) {
-			recursive(options, sheet);
+	function jssCombineAndSortMQ(options) {
+		if (options === void 0) {
+			options = {};
 		}
-	};
-}
+		return {
+			onProcessSheet: function (sheet) {
+				recursive(options, sheet);
+			}
+		};
+	}
 
-var dist = jssCombineAndSortMQ;
+	dist = jssCombineAndSortMQ;
+	return dist;
+}
 
-var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+var distExports = requireDist();
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
 
 const isDisabledOrLoading = (disabled, loading) => {
     return disabled || loading;
@@ -3166,30 +3192,10 @@ const darken = (hsl) => {
 };
 const changeColor = (hsl, lightness) => {
     return hsl.replace(/\s(\d+)(%?)\//, (_, p1, p2) => {
-        return ` ${Math.min(Math.max(parseInt(p1, 10) + lightness, 0), 100)}${p2}/`;
+        return ` ${Math.min(Math.max(Number.parseInt(p1, 10) + lightness, 0), 100)}${p2}/`;
     });
 };
 
-const parseJSON = (prop) => {
-    if (typeof prop === 'string') {
-        try {
-            // prop is potentially JSON parsable string, e.g. "{ base: 'block', l: 'inline' }" or "true" or "false"
-            return JSON.parse(prop
-                .replace(/'/g, '"') // convert single quotes to double quotes
-                .replace(/[\s"]?([a-z]+)[\s"]?:([^//])/g, '"$1":$2') // wrap keys in double quotes if they don't have them but ignore potential urls
-            );
-        }
-        catch {
-            // prop is string, e.g. "block" or "inline"
-            return prop;
-        }
-    }
-    else {
-        // prop is object, e.g. { base: 'block', l: 'inline' } or number, e.g. 123 or boolean, e.g. true
-        return prop;
-    }
-};
-
 const borderRadiusSmall = '4px';
 
 const borderRadiusMedium = '8px';
@@ -3628,6 +3634,7 @@ const addImportantToEachRule = (input) => {
         ? result
         : // @ts-expect-error: Type string can't be used to index type JssStyle
             ((result[key] =
+                // biome-ignore lint/style/noCommaOperator: to be refactored
                 typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
                 result), {});
 };
@@ -3775,6 +3782,26 @@ const forcedColorsMediaQuery = (style) => {
     return { '@media (forced-colors: active)': style };
 };
 
+const parseJSON = (prop) => {
+    if (typeof prop === 'string') {
+        try {
+            // prop is potentially JSON parsable string, e.g. "{ base: 'block', l: 'inline' }" or "true" or "false"
+            return JSON.parse(prop
+                .replace(/'/g, '"') // convert single quotes to double quotes
+                .replace(/[\s"]?([a-z]+)[\s"]?:([^//])/g, '"$1":$2') // wrap keys in double quotes if they don't have them but ignore potential urls
+            );
+        }
+        catch {
+            // prop is string, e.g. "block" or "inline"
+            return prop;
+        }
+    }
+    else {
+        // prop is object, e.g. { base: 'block', l: 'inline' } or number, e.g. 123 or boolean, e.g. true
+        return prop;
+    }
+};
+
 // NOTE: handpicked selection of plugins from jss-preset-default
 const jss = createJss({
     plugins: [
@@ -3818,6 +3845,7 @@ const isObject = (obj) => typeof obj === 'object' && !Array.isArray(obj);
 // NOTE: taken from https://stackoverflow.com/a/48218209
 const mergeDeep = (...objects) => {
     return objects.reduce((prev, obj) => {
+        // biome-ignore lint/complexity/noForEach: to be refactored
         Object.keys(obj).forEach((key) => {
             const pVal = prev[key];
             const oVal = obj[key];
@@ -3845,12 +3873,13 @@ const mergeDeep = (...objects) => {
 const attributeMutationMap = new Map();
 hasWindow &&
     new MutationObserver((mutations) => {
-        mutations
+        for (const mutation of mutations
             // reduce array to only entries that have really a changed value
             .filter((mutation) => mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
             // remove duplicates so we execute callback only once per node
-            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-            .forEach((mutation) => attributeMutationMap.get(mutation.target)?.());
+            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)) {
+            attributeMutationMap.get(mutation.target)?.();
+        }
     });
 
 const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
@@ -3872,17 +3901,14 @@ const observedNodesMap = new Map();
 hasWindow &&
     new MutationObserver((mutations) => {
         // there may be race conditions in jsdom-polyfill tests  where the map is already empty when a mutation happens
-        if (observedNodesMap.size) {
+        if (observedNodesMap.size > 0) {
             const observedNodes = Array.from(observedNodesMap.keys());
-            mutations
-                // remove duplicates so we execute callback only once per node
-                .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-                // find all observing parent nodes of mutated node and invoke their callbacks
-                .forEach((mutation) => {
-                observedNodes
-                    .filter((node) => node.contains(mutation.target))
-                    .forEach((node) => observedNodesMap.get(node)?.());
-            });
+            // remove duplicates so we execute callback only once per node
+            for (const mutation of mutations.filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)) {
+                for (const node of observedNodes.filter((node) => node.contains(mutation.target))) {
+                    observedNodesMap.get(node)?.();
+                }
+            }
         }
     });
 
@@ -3921,7 +3947,7 @@ const supportsNativePopover = () => {
     if (!hasWindow) {
         return false;
     }
-    return HTMLElement.prototype.hasOwnProperty('popover');
+    return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
 };
 // determine it once
 supportsNativePopover();
@@ -3948,8 +3974,7 @@ const formatObjectOutput = (value) => {
         .replace(/(})/g, ' $1') // add space before following: }
         .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
-'value, ' +
-    formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
+`value, ${formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '')}`;
 
 const getComponentCss$19 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
@@ -5125,7 +5150,7 @@ const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasContro
             },
             ...preventFoucOfNestedElementsStyles,
             ...(hasControlsSlot && {
-                ['slot[name="controls"]']: {
+                'slot[name="controls"]': {
                     display: 'block',
                     gridColumnStart: 1,
                     gridRowStart: 3,
@@ -5161,10 +5186,10 @@ const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasContro
                 ...(hasHeading && {
                     [selectorHeading]: {
                         maxWidth: '56.25rem',
-                        margin: `0 0 ${!hasDescription ? spacingFluidMedium : 0}`,
+                        margin: `0 0 ${hasDescription ? 0 : spacingFluidMedium}`,
                         ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
                     },
-                    ['::slotted([slot=heading])']: {
+                    '::slotted([slot=heading])': {
                         margin: 0, // reset ua-style
                         ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
                     },
@@ -5749,8 +5774,19 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, compact, th
                     backgroundSize: 'cover',
                 }),
             },
-            ...(!isLoading
+            ...(isLoading
                 ? {
+                    'input:checked': {
+                        // background-image is merged in later
+                        borderColor: checkedColor,
+                        backgroundColor: checkedColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: checkedColorDark,
+                            backgroundColor: checkedColorDark,
+                        }),
+                    },
+                }
+                : {
                     'input:checked': {
                         borderColor: checkedColor,
                         backgroundColor: checkedColor,
@@ -5785,17 +5821,6 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, compact, th
                                 backgroundImage: getIndeterminateSVGBackgroundImage('white'),
                             })),
                     },
-                }
-                : {
-                    'input:checked': {
-                        // background-image is merged in later
-                        borderColor: checkedColor,
-                        backgroundColor: checkedColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            borderColor: checkedColorDark,
-                            backgroundColor: checkedColorDark,
-                        }),
-                    },
                 }),
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
@@ -7892,7 +7917,7 @@ const getComponentCss$D = (model, safeZone, size, color, theme) => {
                 maxWidth: '100%',
                 maxHeight: '100%',
                 // width + height style can't be !important atm to be backwards compatible with e.g. `<p-model-signature size="inherit" style="height: 50px"/>`
-                width: `var(${cssVariableWidth},${isSizeInherit ? 'auto' : width + 'px'})`,
+                width: `var(${cssVariableWidth},${isSizeInherit ? 'auto' : `${width}px`})`,
                 height: `var(${cssVariableHeight},auto)`,
                 ...addImportantToEachRule({
                     mask: `url(${getSvgUrl(model)}) no-repeat left top / contain`,
@@ -8060,7 +8085,7 @@ const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme,
             }),
             ...additionalDefaultJssStyle,
         },
-        ['::slotted(:not(input[type="password"]))']: {
+        '::slotted(:not(input[type="password"]))': {
             textOverflow: 'ellipsis',
         },
         ...(!isLoading &&
@@ -8608,7 +8633,7 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
+const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, length, theme) => {
     const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
     const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
         // TODO: move into getSlottedTextFieldTextareaSelectStyles()
@@ -8656,15 +8681,6 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm
             ...preventFoucOfNestedElementsStyles,
             // input
             ...inputStyles,
-            ...(isWithinForm &&
-                addImportantToEachRule({
-                    '::slotted([slot=internal-input])': {
-                        position: 'absolute',
-                        height: inputSize,
-                        width: 0,
-                        opacity: 0,
-                    },
-                })),
         },
         root: {
             display: 'grid',
@@ -9204,11 +9220,7 @@ const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
         }),
     });
 };
-
-const MIN_ITEM_WIDTH = 46;
-const MAX_ITEM_WIDTH = 220;
 const getComponentCss$s = (maxWidth, columns) => {
-    maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
             ':host': {
@@ -9216,7 +9228,9 @@ const getComponentCss$s = (maxWidth, columns) => {
                 ...addImportantToEachRule({
                     gridAutoRows: '1fr', // for equal height
                     ...buildResponsiveStyles(columns, (col) => ({
-                        gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
+                        gridTemplateColumns: col === 'auto'
+                            ? `repeat(auto-fit, ${maxWidth}px)`
+                            : `repeat(${col}, minmax(0, 1fr))`,
                     })),
                     gap: '6px',
                     ...colorSchemeStyles,
@@ -9868,9 +9882,9 @@ const getComponentCss$o = (size, theme) => {
 };
 
 const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
-    // # of the hexcolor starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
-    numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => ({ ...result, [key]: escapeHashCharacter(value) }), {});
-    const { disabledColor, invertedBaseColor, primaryColor } = numberedCircleColors;
+    // # of the hex color starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
+    const escapedNumberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => ({ ...result, [key]: escapeHashCharacter(value) }), {});
+    const { disabledColor, invertedBaseColor, primaryColor } = escapedNumberedCircleColors;
     const fillColor = isStateCurrent ? invertedBaseColor : disabledColor;
     const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
     // Full SVG is provided by design (./numbers_raw.svg), created with illustrator and optimized with ImageOptim.
@@ -9899,7 +9913,7 @@ const getComponentCss$n = (state, disabled, theme) => {
         '@global': {
             ':host': {
                 ...(isStateCurrentOrUndefined &&
-                    Array.from(Array(9)).reduce((result, _, i) => ({
+                    Array.from(new Array(9)).reduce((result, _, i) => ({
                         ...result,
                         [`&(:nth-of-type(${i + 1})) $button::before`]: {
                             backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
@@ -10465,8 +10479,7 @@ const getComponentCss$d = (size, weight, theme) => {
         },
         // conditionally applied and removed based on if activeTabIndex exists
         [scrollerAnimatedCssClass]: {
-            ['& ' +
-                transformSelector('::slotted([role][aria-selected="true"])::after, ::slotted([role][aria-current="true"])::after')]: {
+            [`& ${transformSelector('::slotted([role][aria-selected="true"])::after, ::slotted([role][aria-current="true"])::after')}`]: {
                 transition: addImportantToRule(`visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationModerate})`), // bar appears after transition
             },
         },
@@ -11085,7 +11098,7 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, resize, the
             },
             ...hoverMediaQuery({
                 // with the media query the selector has higher priority and overrides disabled styles
-                ['textarea:not(:disabled):not(:focus):not([readonly]):hover,label:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])']: {
+                'textarea:not(:disabled):not(:focus):not([readonly]):hover,label:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])': {
                     borderColor: formStateHoverColor || primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: formStateHoverColorDark || primaryColorDark,