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

package/ssr/esm/components/dist/utils/esm/utils-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,435 @@ 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);
+		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.
+		***************************************************************************** */
 
-  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
-  }
-
-  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);
+			}
+		};
+	}
+
+	dist = jssCombineAndSortMQ;
+	return dist;
 }
 
-var dist = jssCombineAndSortMQ;
+var distExports = requireDist();
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
 
-var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+// NOTE: these utils are in the same file on purpose
+// to force them being bundled into our core chunk
+const getTagName = (el) => el.tagName.toLowerCase();
+const getTagNameWithoutPrefix = (host) => {
+    const tagName = getTagName(host);
+    const [, tagNameWithoutPrefix = ''] = /^(?:[a-z-]+-)?(p-[a-z-]+)$/.exec(tagName) || [];
+    return (tagNameWithoutPrefix || tagName); // return tagName as fallback for default tags
+};
 
 // This class is shared since the popover needs to register a scroll listener to this node in order to hide the popover when the table is scrolled
 const scrollAreaClass = 'scroll-area';
@@ -3164,7 +3199,7 @@ function getHTMLElement(element, selector) {
 
 const transformSelectorToDirectChildSelector = (selector) => selector
     .split(',')
-    .map((part) => ':scope>' + part)
+    .map((part) => `:scope>${part}`)
     .join();
 
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
@@ -3181,13 +3216,15 @@ function getDirectChildHTMLElement(element, selector) {
 
 const hasSpecificDirectChildTag = (host, tag) => {
     const el = getDirectChildHTMLElement(host, ':only-child');
-    return !!(el?.matches(tag));
+    return !!el?.matches(tag);
 };
 
 const isDisabledOrLoading = (disabled, loading) => {
     return disabled || loading;
 };
 
+const isElementOfKind = (element, tagName) => getTagNameWithoutPrefix(element) === tagName;
+
 const parseJSONAttribute = (attribute) => {
     // Input is object, e.g. { 'aria-label': 'Some label' }
     if (typeof attribute !== 'string') {
@@ -3197,7 +3234,7 @@ const parseJSONAttribute = (attribute) => {
         // Convert single quotes to double quotes except the ones which are escaped by backslash
         .replace(/\\'/g, '__escaped_single_quote__')
         .replace(/'/g, '"')
-        .replace(/__escaped_single_quote__/g, '\\\'')
+        .replace(/__escaped_single_quote__/g, "\\'")
         // Remove string escapes except the ones followed by unicode u0027
         .replace(/([^\\])\\(?!u0027)/g, '$1')
         // Wrap keys in double quotes
@@ -3353,12 +3390,13 @@ supportsConstructableStylesheets();
 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)`);
@@ -3380,17 +3418,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)?.();
+                }
+            }
         }
     });
 
@@ -3435,7 +3470,7 @@ const isScrollable = (isPrevHidden, isNextHidden) => {
 };
 
 /*
- Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -3501,7 +3536,7 @@ const supportsNativePopover = () => {
     if (!hasWindow) {
         return false;
     }
-    return HTMLElement.prototype.hasOwnProperty('popover');
+    return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
 };
 // determine it once
 supportsNativePopover();
@@ -3519,8 +3554,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 getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
     return {
         ...parseAndGetAriaAttributes(aria),
@@ -3566,11 +3600,33 @@ const getDisplayTagType = (host, size, tag) => {
     if (hasSpecificDirectChildTag(host, DISPLAY_TAGS.join())) {
         return 'div';
     }
-    else if (tag) {
+    if (tag) {
         return tag;
     }
-    else {
-        return displaySizeToTagMap[size] || 'h1';
+    return displaySizeToTagMap[size] || 'h1';
+};
+/**
+ * Updates the state of the flyout multilevel and its children based on the provided activeItem and value.
+ *
+ * @param {string | undefined} activeItem - The flyout-multilevel-item element which is currently active (which has the activeIdentifier as identifier). If undefined, updates the root element.
+ * @param {boolean} value - The new state value to apply.
+ * @returns {void}
+ */
+const updateFlyoutMultiLevelItemState = (activeItem, value) => {
+    activeItem.secondary = value;
+    traverseTreeAndUpdateState(activeItem.parentElement, 'primary', value);
+};
+/**
+ * Recursively updates the state of a flyout item's parent elements by traversing up the DOM tree.
+ *
+ * @param {HTMLPFlyoutMultilevelItemElement} activeItem - The current flyout item being updated.
+ * @param {'primary' | 'secondary' | 'cascade'} prop - The property of the flyout item to update.
+ * @param {boolean} value - The new state value to apply.
+ */
+const traverseTreeAndUpdateState = (activeItem, prop, value) => {
+    if (isElementOfKind(activeItem, 'p-flyout-multilevel-item')) {
+        activeItem[prop] = value;
+        traverseTreeAndUpdateState(activeItem.parentElement, 'cascade', value);
     }
 };
 const headingSizeToTagMap = {
@@ -3585,12 +3641,10 @@ const getHeadingTagType = (host, size, tag) => {
     if (hasSpecificDirectChildTag(host, HEADING_TAGS.join())) {
         return 'div';
     }
-    else if (tag) {
+    if (tag) {
         return tag;
     }
-    else {
-        return headingSizeToTagMap[size] || 'h2';
-    }
+    return headingSizeToTagMap[size] || 'h2';
 };
 const HEADLINE_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const variantToTagMap = {
@@ -3605,12 +3659,10 @@ const getHeadlineTagType = (host, variant, tag) => {
     if (hasSpecificDirectChildTag(host, HEADLINE_TAGS.join())) {
         return 'div';
     }
-    else if (tag) {
+    if (tag) {
         return tag;
     }
-    else {
-        return variantToTagMap[variant] || 'h1';
-    }
+    return variantToTagMap[variant] || 'h1';
 };
 const isUrl = (str) => str?.length > 0 && /(\/)/.test(str);
 const DEFAULT_ICON_NAME = 'arrow-right';
@@ -3619,10 +3671,10 @@ const buildIconUrl = (iconNameOrSource = DEFAULT_ICON_NAME) => {
     if (iconNameOrSource === null) {
         return buildIconUrl(DEFAULT_ICON_NAME);
     }
-    else if (isUrl(iconNameOrSource)) {
+    if (isUrl(iconNameOrSource)) {
         return iconNameOrSource;
     }
-    else if (ICONS_MANIFEST[iconNameOrSource]) {
+    if (ICONS_MANIFEST[iconNameOrSource]) {
         return `${getCDNBaseURL()}/icons/${ICONS_MANIFEST[iconNameOrSource]}`;
     }
     return buildIconUrl(DEFAULT_ICON_NAME);
@@ -3696,7 +3748,7 @@ const createPageFunctionFactory = ({ activePage }) => {
         isAfterAfterCurrent: pageNumber === activePage + 2,
     });
 };
-const createRange = (start, end) => Array.from(Array(end - start + 1), (_, i) => i + start);
+const createRange = (start, end) => Array.from(new Array(end - start + 1), (_, i) => i + start);
 const createPaginationItems = (options) => {
     const { pageTotal, activePage, showLastPage } = options;
     const pageRange = 1;
@@ -3743,24 +3795,10 @@ const createPaginationItems = (options) => {
     return paginationItems;
 };
 const getCurrentActivePage = (activePage, totalPages) => {
-    // Obviously we can't be on a negative or 0 page.
-    if (activePage < 1) {
-        activePage = 1;
-    }
-    // If the user has done something like /page/99999 we want to clamp that back down.
-    if (activePage > totalPages) {
-        activePage = totalPages;
-    }
-    return activePage;
+    return activePage < 1 ? 1 : activePage > totalPages ? totalPages : activePage;
 };
 const getTotalPages = (totalItemsCount, itemsPerPage) => {
-    if (totalItemsCount < 1) {
-        totalItemsCount = 1;
-    }
-    if (itemsPerPage < 1) {
-        itemsPerPage = 1;
-    }
-    return Math.ceil(totalItemsCount / itemsPerPage);
+    return Math.ceil((totalItemsCount < 1 ? 1 : totalItemsCount) / (itemsPerPage < 1 ? 1 : itemsPerPage));
 };
 /**
  * Determines if the current input element corresponds to the first non-filled input
@@ -3786,7 +3824,7 @@ const getSegmentedControlItemAriaAttributes = (isSelected, isDisabled, ariaProp)
     ...parseAndGetAriaAttributes(ariaProp),
 });
 const getIconColor = (isDisabled) => {
-    return !isDisabled ? 'primary' : 'contrast-medium';
+    return isDisabled ? 'contrast-medium' : 'primary';
 };
 
 const ITEM_PADDING = '17px';
@@ -3794,7 +3832,7 @@ const { font: BUTTON_FONT } = textSmallStyle;
 const { font: LABEL_FONT } = textXSmallStyle;
 const ICON_SIZE = '1.5rem';
 const ICON_MARGIN = '.25rem';
-['auto', ...Array.from(Array(25), (_, i) => i + 1)];
+['auto', ...Array.from(new Array(25), (_, i) => i + 1)];
 // Expect Porsche Next to be available and use sans-serif (wide font for safety buffer) as fallback
 const tempFont = 'Porsche Next, sans-serif';
 // temporary dom node to measure max-width of children content
@@ -3823,12 +3861,10 @@ const isCustomDropdown = (filter, native) => {
     if (filter) {
         return true;
     }
-    else if (native) {
+    if (native) {
         return false;
     }
-    else {
-        return !isTouchDevice();
-    }
+    return !isTouchDevice();
 };
 const getSelectedOptionString = (options) => options.find((option) => option.selected)?.textContent ?? '';
 const isStateCompleteOrWarning = (state) => {
@@ -3867,9 +3903,7 @@ const getTextTagType = (host, tag) => {
     if (hasSpecificDirectChildTag(host, TEXT_TAGS.join())) {
         return 'div';
     }
-    else {
-        return tag;
-    }
+    return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateFlyoutMultiLevelItemState };