@porsche-design-system/components-react 3.30.0 → 3.31.0-rc.0

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

@@ -1,438 +1,727 @@
 'use strict';
 
-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);
-}
+const borderRadiusSmall = '4px';
 
-var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+const borderRadiusMedium = '8px';
 
-var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
+const borderRadiusLarge = '12px';
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
+const borderWidthBase = '2px';
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
+const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
 
-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);
-    if ("object" != _typeof(i)) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (String )(t);
-}
+const dropShadowLowStyle = {
+    boxShadow: `0px 3px 8px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
+};
 
-function toPropertyKey(t) {
-  var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : i + "";
-}
+const dropShadowHighStyle = {
+    boxShadow: `0px 8px 40px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
+};
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
+const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
+const fontHyphenationStyle = {
+    overflowWrap: 'break-word',
+    // @ts-ignore
+    hyphens: 'var(--p-hyphens, auto)',
+};
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
+const fontLineHeight = 'calc(6px + 2.125ex)';
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-  return self;
-}
+const fontSizeTextXXSmall = '.75rem';
 
-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;
-}
+const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
 
-var plainObjectConstrurctor = {}.constructor;
-function cloneStyle(style) {
-  if (style == null || typeof style !== 'object') return style;
-  if (Array.isArray(style)) return style.map(cloneStyle);
-  if (style.constructor !== plainObjectConstrurctor) return style;
-  var newStyle = {};
+const fontSizeTextSmall = '1rem';
 
-  for (var name in style) {
-    newStyle[name] = cloneStyle(style[name]);
-  }
+const fontSizeTextMedium = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
 
-  return newStyle;
-}
+const fontSizeTextLarge = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
 
-/**
- * Create a rule instance.
- */
+const fontSizeTextXLarge = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
 
-function createRule(name, decl, options) {
-  if (name === void 0) {
-    name = 'unnamed';
-  }
+const fontSizeText = {
+    xxSmall: fontSizeTextXXSmall,
+    xSmall: fontSizeTextXSmall,
+    small: fontSizeTextSmall,
+    medium: fontSizeTextMedium,
+    large: fontSizeTextLarge,
+    xLarge: fontSizeTextXLarge,
+};
 
-  var jss = options.jss;
-  var declCopy = cloneStyle(decl);
-  var rule = jss.plugins.onCreateRule(name, declCopy, options);
-  if (rule) return rule; // It is an at-rule and it has no instance.
+const fontSizeHeadingSmall = fontSizeTextSmall;
 
-  if (name[0] === '@') ;
+const fontSizeHeadingMedium = fontSizeTextMedium;
 
-  return null;
-}
+const fontSizeHeadingLarge = fontSizeTextLarge;
 
-var join = function join(value, by) {
-  var result = '';
+const fontSizeHeadingXLarge = fontSizeTextXLarge;
 
-  for (var i = 0; i < value.length; i++) {
-    // Remove !important from the value, it will be readded later.
-    if (value[i] === '!important') break;
-    if (result) result += by;
-    result += value[i];
-  }
+const fontSizeHeadingXXLarge = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
 
-  return result;
-};
-/**
- * Converts JSS array value to a CSS string.
- *
- * `margin: [['5px', '10px']]` > `margin: 5px 10px;`
- * `border: ['1px', '2px']` > `border: 1px, 2px;`
- * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
- * `color: ['red', !important]` > `color: red !important;`
- */
+const fontSizeDisplaySmall = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
 
+const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
 
-var toCssValue = function toCssValue(value) {
-  if (!Array.isArray(value)) return value;
-  var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.
+const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
 
-  if (Array.isArray(value[0])) {
-    for (var i = 0; i < value.length; i++) {
-      if (value[i] === '!important') break;
-      if (cssValue) cssValue += ', ';
-      cssValue += join(value[i], ' ');
-    }
-  } else cssValue = join(value, ', '); // Add !important, because it was ignored.
+const fontWeightRegular = 400;
 
+const fontWeightSemiBold = 600;
 
-  if (value[value.length - 1] === '!important') {
-    cssValue += ' !important';
-  }
+const fontWeightBold = 700;
 
-  return cssValue;
-};
+const fontStyleNormal = 'normal';
 
-function getWhitespaceSymbols(options) {
-  if (options && options.format === false) {
-    return {
-      linebreak: '',
-      space: ''
-    };
-  }
+const fontVariant = 'normal';
 
-  return {
-    linebreak: '\n',
-    space: ' '
-  };
-}
+const backdropFilter = 'blur(32px)';
+const frostedGlassStyle = {
+    WebkitBackdropFilter: backdropFilter,
+    backdropFilter,
+};
 
-/**
- * Indent a string.
- * http://jsperf.com/array-join-vs-for
- */
+const _gradient = 'hsla(0, 0%, 0%, 0.80) 0%,' +
+    'hsla(0, 0%, 0%, 0.80) 8.1%,' +
+    'hsla(0, 0%, 0%, 0.80) 15.5%,' +
+    'hsla(0, 0%, 0%, 0.80) 22.5%,' +
+    'hsla(0, 0%, 0%, 0.78) 29%,' +
+    'hsla(0, 0%, 0%, 0.73) 35.3%,' +
+    'hsla(0, 0%, 0%, 0.67) 41.2%,' +
+    'hsla(0, 0%, 0%, 0.60) 47.1%,' +
+    'hsla(0, 0%, 0%, 0.52) 52.9%,' +
+    'hsla(0, 0%, 0%, 0.44) 58.8%,' +
+    'hsla(0, 0%, 0%, 0.33) 64.7%,' +
+    'hsla(0, 0%, 0%, 0.22) 71%,' +
+    'hsla(0, 0%, 0%, 0.12) 77.5%,' +
+    'hsla(0, 0%, 0%, 0.05) 84.5%,' +
+    'hsla(0, 0%, 0%, 0.011) 91.9%,' +
+    'hsla(0, 0%, 0%, 0)';
 
-function indentStr(str, indent) {
-  var result = '';
+const gradientToBottomStyle = {
+    background: `linear-gradient(to bottom, ${_gradient} 100%);`,
+};
 
-  for (var index = 0; index < indent; index++) {
-    result += '  ';
-  }
+const gradientToTopStyle = {
+    background: `linear-gradient(to top, ${_gradient} 100%);`,
+};
 
-  return result + str;
-}
-/**
- * Converts a Rule to CSS string.
- */
+const breakpointBase = 0;
 
+const breakpointXS = 480;
 
-function toCss(selector, style, options) {
-  if (options === void 0) {
-    options = {};
-  }
+const breakpointS = 760;
 
-  var result = '';
-  if (!style) return result;
-  var _options = options,
-      _options$indent = _options.indent,
-      indent = _options$indent === void 0 ? 0 : _options$indent;
-  var fallbacks = style.fallbacks;
+const breakpointM = 1000;
 
-  if (options.format === false) {
-    indent = -Infinity;
-  }
+const breakpointL = 1300;
 
-  var _getWhitespaceSymbols = getWhitespaceSymbols(options),
-      linebreak = _getWhitespaceSymbols.linebreak,
-      space = _getWhitespaceSymbols.space;
+const breakpointXL = 1760;
 
-  if (selector) indent++; // Apply fallbacks first.
+const breakpointXXL = 1920;
 
-  if (fallbacks) {
-    // Array syntax {fallbacks: [{prop: value}]}
-    if (Array.isArray(fallbacks)) {
-      for (var index = 0; index < fallbacks.length; index++) {
-        var fallback = fallbacks[index];
+const breakpoint = {
+    base: breakpointBase,
+    xs: breakpointXS,
+    s: breakpointS,
+    m: breakpointM,
+    l: breakpointL,
+    xl: breakpointXL,
+    xxl: breakpointXXL,
+};
 
-        for (var prop in fallback) {
-          var value = fallback[prop];
+function getMediaQueryMin(min) {
+    return `@media(min-width:${breakpoint[min]}px)`;
+}
 
-          if (value != null) {
-            if (result) result += linebreak;
-            result += indentStr(prop + ":" + space + toCssValue(value) + ";", indent);
-          }
-        }
-      }
-    } else {
-      // Object syntax {fallbacks: {prop: value}}
-      for (var _prop in fallbacks) {
-        var _value = fallbacks[_prop];
+const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
 
-        if (_value != null) {
-          if (result) result += linebreak;
-          result += indentStr(_prop + ":" + space + toCssValue(_value) + ";", indent);
-        }
-      }
-    }
-  }
+const gridGap = spacingFluidMedium;
 
-  for (var _prop2 in style) {
-    var _value2 = style[_prop2];
+const _gridWidthMax = '2560px';
+// fluid sizing calculated by https://fluidtypography.com/#app-get-started
+const _gridSafeZoneBase = 'max(22px, 10.625vw - 12px)'; // viewport-width range = 320 - 760px / size range = 22 - 68.75px
+const _gridSafeZoneS = 'calc(5vw - 16px)'; // viewport-width range = 760 - 1920px / size range = 22(22.75) - 80(79.71)px
+const _gridSafeZoneXXL = 'min(50vw - 880px, 400px)'; // viewport-width range = 1920 - 2560px / size range = 80(79.71)px - 400(399.71)px
 
-    if (_value2 != null && _prop2 !== 'fallbacks') {
-      if (result) result += linebreak;
-      result += indentStr(_prop2 + ":" + space + toCssValue(_value2) + ";", indent);
-    }
-  } // Allow empty style in this case, because properties will be added dynamically.
+const columnMap = {
+    narrow: 4,
+    basic: 2,
+    extended: 1,
+};
+const gridColumnWidthS = `calc((100vw - ${_gridSafeZoneS} * 2 - ${gridGap} * 15) / 16)`;
+const gridColumnWidthXXL = `calc((min(100vw, ${_gridWidthMax}) - ${_gridSafeZoneXXL} * 2 - ${gridGap} * 15) / 16)`;
+const _gridPadding = `max(0px, 50vw - ${_gridWidthMax} / 2)`;
+const _getGridOffsetS = (width) => `calc(${_gridSafeZoneS} + (${gridGap} + ${gridColumnWidthS}) * ${columnMap[width]})`;
+const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL} + (${gridGap} + ${gridColumnWidthXXL}) * ${columnMap[width]})`;
 
+const gridFullOffset = _gridPadding;
 
-  if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.
+const gridExtendedOffsetBase = _gridSafeZoneBase;
 
-  if (!selector) return result;
-  indent--;
-  if (result) result = "" + linebreak + result + linebreak;
-  return indentStr("" + selector + space + "{" + result, indent) + indentStr('}', indent);
-}
+const gridExtendedOffsetS = _getGridOffsetS('extended');
 
-var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
-var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
-var escape = (function (str) {
-  return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
-});
+const gridExtendedOffsetXXL = _getGridOffsetXXL('extended');
 
-var BaseStyleRule =
-/*#__PURE__*/
-function () {
-  function BaseStyleRule(key, style, options) {
-    this.type = 'style';
-    this.isProcessed = false;
-    var sheet = options.sheet,
-        Renderer = options.Renderer;
-    this.key = key;
-    this.options = options;
-    this.style = style;
-    if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
-  }
-  /**
-   * Get or set a style property.
-   */
+const gridExtendedOffset = {
+    base: gridExtendedOffsetBase,
+    s: gridExtendedOffsetS,
+    xxl: gridExtendedOffsetXXL,
+};
 
+const gridBasicOffsetBase = _gridSafeZoneBase;
 
-  var _proto = BaseStyleRule.prototype;
+const gridBasicOffsetS = _getGridOffsetS('basic');
 
-  _proto.prop = function prop(name, value, options) {
-    // It's a getter.
-    if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.
+const gridBasicOffsetXXL = _getGridOffsetXXL('basic');
 
-    var force = options ? options.force : false;
-    if (!force && this.style[name] === value) return this;
-    var newValue = value;
+const gridBasicOffset = {
+    base: gridBasicOffsetBase,
+    s: gridBasicOffsetS,
+    xxl: gridBasicOffsetXXL,
+};
 
-    if (!options || options.process !== false) {
-      newValue = this.options.jss.plugins.onChangeValue(value, name, this);
-    }
+const gridNarrowOffsetBase = _gridSafeZoneBase;
 
-    var isEmpty = newValue == null || newValue === false;
-    var isDefined = name in this.style; // Value is empty and wasn't defined before.
+const gridNarrowOffsetS = _getGridOffsetS('narrow');
 
-    if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.
+const gridNarrowOffsetXXL = _getGridOffsetXXL('narrow');
 
-    var remove = isEmpty && isDefined;
-    if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.
+const gridNarrowOffset = {
+    base: gridNarrowOffsetBase,
+    s: gridNarrowOffsetS,
+    xxl: gridNarrowOffsetXXL,
+};
 
-    if (this.renderable && this.renderer) {
-      if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
-      return this;
-    }
+const motionDurationShort = '0.25s';
 
-    var sheet = this.options.sheet;
+const motionEasingBase = 'cubic-bezier(0.25,0.1,0.25,1)';
 
-    if (sheet && sheet.attached) ;
+const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
 
-    return this;
-  };
+function getMediaQueryMax(max) {
+    return `@media(max-width:${breakpoint[max] - 1}px)`;
+}
 
-  return BaseStyleRule;
-}();
-var StyleRule =
-/*#__PURE__*/
-function (_BaseStyleRule) {
-  _inheritsLoose(StyleRule, _BaseStyleRule);
+const motionDurationLong = '0.6s';
 
-  function StyleRule(key, style, options) {
-    var _this;
+const motionDurationModerate = '0.4s';
 
-    _this = _BaseStyleRule.call(this, key, style, options) || this;
-    var selector = options.selector,
-        scoped = options.scoped,
-        sheet = options.sheet,
-        generateId = options.generateId;
+const motionDurationVeryLong = '1.2s';
 
-    if (selector) {
-      _this.selectorText = selector;
-    } else if (scoped !== false) {
-      _this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);
-      _this.selectorText = "." + escape(_this.id);
-    }
+const motionEasingIn = 'cubic-bezier(0,0,0.2,1)';
 
-    return _this;
-  }
-  /**
-   * Set selector string.
-   * Attention: use this with caution. Most browsers didn't implement
-   * selectorText setter, so this may result in rerendering of entire Style Sheet.
-   */
+const motionEasingOut = 'cubic-bezier(0.4,0,0.5,1)';
 
+const spacingStaticXSmall = '4px';
 
-  var _proto2 = StyleRule.prototype;
+const spacingStaticSmall = '8px';
 
-  /**
-   * Apply rule to an element inline.
-   */
-  _proto2.applyTo = function applyTo(renderable) {
-    var renderer = this.renderer;
+const spacingStaticMedium = '16px';
 
-    if (renderer) {
-      var json = this.toJSON();
+const spacingStaticLarge = '32px';
 
-      for (var prop in json) {
-        renderer.setProperty(renderable, prop, json[prop]);
-      }
-    }
+const spacingFluidXSmall = 'clamp(4px, 0.25vw + 3px, 8px)';
 
-    return this;
-  }
-  /**
-   * Returns JSON representation of the rule.
-   * Fallbacks are not supported.
-   * Useful for inline styles.
-   */
-  ;
+const spacingFluidSmall = 'clamp(8px, 0.5vw + 6px, 16px)';
 
-  _proto2.toJSON = function toJSON() {
-    var json = {};
+const spacingFluidLarge = 'clamp(32px, 2.75vw + 23px, 76px)';
 
-    for (var prop in this.style) {
-      var value = this.style[prop];
-      if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
-    }
+const _displayFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
+const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
-    return json;
-  }
-  /**
-   * Generates a CSS string.
-   */
-  ;
+const displayMediumStyle = {
+    font: `${_displayFontPartA}${fontSizeDisplayMedium}${_displayFontPartB}`,
+};
 
-  _proto2.toString = function toString(options) {
-    var sheet = this.options.sheet;
-    var link = sheet ? sheet.options.link : false;
-    var opts = link ? _extends({}, options, {
-      allowEmpty: true
-    }) : options;
-    return toCss(this.selectorText, this.style, opts);
-  };
+const displayLargeStyle = {
+    font: `${_displayFontPartA}${fontSizeDisplayLarge}${_displayFontPartB}`,
+};
 
-  _createClass(StyleRule, [{
-    key: "selector",
-    set: function set(selector) {
-      if (selector === this.selectorText) return;
-      this.selectorText = selector;
-      var renderer = this.renderer,
-          renderable = this.renderable;
-      if (!renderable || !renderer) return;
-      var hasChanged = renderer.setSelector(renderable, selector); // If selector setter is not implemented, rerender the rule.
+const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold} `;
+const _headingFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
-      if (!hasChanged) {
-        renderer.replaceRule(renderable, this);
-      }
-    }
-    /**
-     * Get selector string.
-     */
-    ,
-    get: function get() {
-      return this.selectorText;
-    }
-  }]);
+const headingSmallStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingSmall}${_headingFontPartB}`,
+};
+
+const headingMediumStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingMedium}${_headingFontPartB}`,
+};
+
+const headingLargeStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingLarge}${_headingFontPartB}`,
+};
+
+const headingXLargeStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingXLarge}${_headingFontPartB}`,
+};
+
+const headingXXLargeStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingXXLarge}${_headingFontPartB}`,
+};
+
+const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
+const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
+
+const textXXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXXSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
+const textXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
+const textSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
+const textMediumStyle = {
+    font: `${_textFontPartA}${fontSizeTextMedium}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
+const textLargeStyle = {
+    font: `${_textFontPartA}${fontSizeTextLarge}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
+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);
+}
+
+var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+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);
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (String )(t);
+}
+
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+
+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 plainObjectConstrurctor = {}.constructor;
+function cloneStyle(style) {
+  if (style == null || typeof style !== 'object') return style;
+  if (Array.isArray(style)) return style.map(cloneStyle);
+  if (style.constructor !== plainObjectConstrurctor) return style;
+  var newStyle = {};
+
+  for (var name in style) {
+    newStyle[name] = cloneStyle(style[name]);
+  }
+
+  return newStyle;
+}
+
+/**
+ * Create a rule instance.
+ */
+
+function createRule(name, decl, options) {
+  if (name === void 0) {
+    name = 'unnamed';
+  }
+
+  var jss = options.jss;
+  var declCopy = cloneStyle(decl);
+  var rule = jss.plugins.onCreateRule(name, declCopy, options);
+  if (rule) return rule; // It is an at-rule and it has no instance.
+
+  if (name[0] === '@') ;
+
+  return null;
+}
+
+var join = function join(value, by) {
+  var result = '';
+
+  for (var i = 0; i < value.length; i++) {
+    // Remove !important from the value, it will be readded later.
+    if (value[i] === '!important') break;
+    if (result) result += by;
+    result += value[i];
+  }
+
+  return result;
+};
+/**
+ * Converts JSS array value to a CSS string.
+ *
+ * `margin: [['5px', '10px']]` > `margin: 5px 10px;`
+ * `border: ['1px', '2px']` > `border: 1px, 2px;`
+ * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
+ * `color: ['red', !important]` > `color: red !important;`
+ */
+
+
+var toCssValue = function toCssValue(value) {
+  if (!Array.isArray(value)) return value;
+  var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.
+
+  if (Array.isArray(value[0])) {
+    for (var i = 0; i < value.length; i++) {
+      if (value[i] === '!important') break;
+      if (cssValue) cssValue += ', ';
+      cssValue += join(value[i], ' ');
+    }
+  } else cssValue = join(value, ', '); // Add !important, because it was ignored.
+
+
+  if (value[value.length - 1] === '!important') {
+    cssValue += ' !important';
+  }
+
+  return cssValue;
+};
+
+function getWhitespaceSymbols(options) {
+  if (options && options.format === false) {
+    return {
+      linebreak: '',
+      space: ''
+    };
+  }
+
+  return {
+    linebreak: '\n',
+    space: ' '
+  };
+}
+
+/**
+ * Indent a string.
+ * http://jsperf.com/array-join-vs-for
+ */
+
+function indentStr(str, indent) {
+  var result = '';
+
+  for (var index = 0; index < indent; index++) {
+    result += '  ';
+  }
+
+  return result + str;
+}
+/**
+ * Converts a Rule to CSS string.
+ */
+
+
+function toCss(selector, style, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var result = '';
+  if (!style) return result;
+  var _options = options,
+      _options$indent = _options.indent,
+      indent = _options$indent === void 0 ? 0 : _options$indent;
+  var fallbacks = style.fallbacks;
+
+  if (options.format === false) {
+    indent = -Infinity;
+  }
+
+  var _getWhitespaceSymbols = getWhitespaceSymbols(options),
+      linebreak = _getWhitespaceSymbols.linebreak,
+      space = _getWhitespaceSymbols.space;
+
+  if (selector) indent++; // Apply fallbacks first.
+
+  if (fallbacks) {
+    // Array syntax {fallbacks: [{prop: value}]}
+    if (Array.isArray(fallbacks)) {
+      for (var index = 0; index < fallbacks.length; index++) {
+        var fallback = fallbacks[index];
+
+        for (var prop in fallback) {
+          var value = fallback[prop];
+
+          if (value != null) {
+            if (result) result += linebreak;
+            result += indentStr(prop + ":" + space + toCssValue(value) + ";", indent);
+          }
+        }
+      }
+    } else {
+      // Object syntax {fallbacks: {prop: value}}
+      for (var _prop in fallbacks) {
+        var _value = fallbacks[_prop];
+
+        if (_value != null) {
+          if (result) result += linebreak;
+          result += indentStr(_prop + ":" + space + toCssValue(_value) + ";", indent);
+        }
+      }
+    }
+  }
+
+  for (var _prop2 in style) {
+    var _value2 = style[_prop2];
+
+    if (_value2 != null && _prop2 !== 'fallbacks') {
+      if (result) result += linebreak;
+      result += indentStr(_prop2 + ":" + space + toCssValue(_value2) + ";", indent);
+    }
+  } // Allow empty style in this case, because properties will be added dynamically.
+
+
+  if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.
+
+  if (!selector) return result;
+  indent--;
+  if (result) result = "" + linebreak + result + linebreak;
+  return indentStr("" + selector + space + "{" + result, indent) + indentStr('}', indent);
+}
+
+var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
+var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
+var escape = (function (str) {
+  return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
+});
+
+var BaseStyleRule =
+/*#__PURE__*/
+function () {
+  function BaseStyleRule(key, style, options) {
+    this.type = 'style';
+    this.isProcessed = false;
+    var sheet = options.sheet,
+        Renderer = options.Renderer;
+    this.key = key;
+    this.options = options;
+    this.style = style;
+    if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
+  }
+  /**
+   * Get or set a style property.
+   */
+
+
+  var _proto = BaseStyleRule.prototype;
+
+  _proto.prop = function prop(name, value, options) {
+    // It's a getter.
+    if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.
+
+    var force = options ? options.force : false;
+    if (!force && this.style[name] === value) return this;
+    var newValue = value;
+
+    if (!options || options.process !== false) {
+      newValue = this.options.jss.plugins.onChangeValue(value, name, this);
+    }
+
+    var isEmpty = newValue == null || newValue === false;
+    var isDefined = name in this.style; // Value is empty and wasn't defined before.
+
+    if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.
+
+    var remove = isEmpty && isDefined;
+    if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.
+
+    if (this.renderable && this.renderer) {
+      if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
+      return this;
+    }
+
+    var sheet = this.options.sheet;
+
+    if (sheet && sheet.attached) ;
+
+    return this;
+  };
+
+  return BaseStyleRule;
+}();
+var StyleRule =
+/*#__PURE__*/
+function (_BaseStyleRule) {
+  _inheritsLoose(StyleRule, _BaseStyleRule);
+
+  function StyleRule(key, style, options) {
+    var _this;
+
+    _this = _BaseStyleRule.call(this, key, style, options) || this;
+    var selector = options.selector,
+        scoped = options.scoped,
+        sheet = options.sheet,
+        generateId = options.generateId;
+
+    if (selector) {
+      _this.selectorText = selector;
+    } else if (scoped !== false) {
+      _this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);
+      _this.selectorText = "." + escape(_this.id);
+    }
+
+    return _this;
+  }
+  /**
+   * Set selector string.
+   * Attention: use this with caution. Most browsers didn't implement
+   * selectorText setter, so this may result in rerendering of entire Style Sheet.
+   */
+
+
+  var _proto2 = StyleRule.prototype;
+
+  /**
+   * Apply rule to an element inline.
+   */
+  _proto2.applyTo = function applyTo(renderable) {
+    var renderer = this.renderer;
+
+    if (renderer) {
+      var json = this.toJSON();
+
+      for (var prop in json) {
+        renderer.setProperty(renderable, prop, json[prop]);
+      }
+    }
+
+    return this;
+  }
+  /**
+   * Returns JSON representation of the rule.
+   * Fallbacks are not supported.
+   * Useful for inline styles.
+   */
+  ;
+
+  _proto2.toJSON = function toJSON() {
+    var json = {};
+
+    for (var prop in this.style) {
+      var value = this.style[prop];
+      if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
+    }
+
+    return json;
+  }
+  /**
+   * Generates a CSS string.
+   */
+  ;
+
+  _proto2.toString = function toString(options) {
+    var sheet = this.options.sheet;
+    var link = sheet ? sheet.options.link : false;
+    var opts = link ? _extends({}, options, {
+      allowEmpty: true
+    }) : options;
+    return toCss(this.selectorText, this.style, opts);
+  };
+
+  _createClass(StyleRule, [{
+    key: "selector",
+    set: function set(selector) {
+      if (selector === this.selectorText) return;
+      this.selectorText = selector;
+      var renderer = this.renderer,
+          renderable = this.renderable;
+      if (!renderable || !renderer) return;
+      var hasChanged = renderer.setSelector(renderable, selector); // If selector setter is not implemented, rerender the rule.
+
+      if (!hasChanged) {
+        renderer.replaceRule(renderable, this);
+      }
+    }
+    /**
+     * Get selector string.
+     */
+    ,
+    get: function get() {
+      return this.selectorText;
+    }
+  }]);
 
   return StyleRule;
 }(BaseStyleRule);
@@ -2351,18 +2640,18 @@ function getDynamicStyles(styles) {
 var index = createJss();
 
 var jss_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  RuleList: RuleList,
-  SheetsManager: SheetsManager,
-  SheetsRegistry: SheetsRegistry,
-  create: createJss,
-  createGenerateId: createGenerateId,
-  createRule: createRule,
-  default: index,
-  getDynamicStyles: getDynamicStyles,
-  hasCSSTOMSupport: hasCSSTOMSupport,
-  sheets: sheets,
-  toCssValue: toCssValue
+    __proto__: null,
+    RuleList: RuleList,
+    SheetsManager: SheetsManager,
+    SheetsRegistry: SheetsRegistry,
+    create: createJss,
+    createGenerateId: createGenerateId,
+    createRule: createRule,
+    default: index,
+    getDynamicStyles: getDynamicStyles,
+    hasCSSTOMSupport: hasCSSTOMSupport,
+    sheets: sheets,
+    toCssValue: toCssValue
 });
 
 var at = '@global';
@@ -3153,342 +3442,324 @@ function requireDist () {
 					} 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;
-			};
-		}
-	}
-	function jssCombineAndSortMQ(options) {
-		if (options === void 0) {
-			options = {};
-		}
-		return {
-			onProcessSheet: function (sheet) {
-				recursive(options, sheet);
-			}
-		};
-	}
-
-	dist = jssCombineAndSortMQ;
-	return dist;
-}
-
-var distExports = requireDist();
-var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
-
-const isDisabledOrLoading = (disabled, loading) => {
-    return disabled || loading;
-};
-
-const hasWindow = typeof window !== 'undefined';
-
-const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
-
-const lighten = (hsl) => {
-    return changeColor(hsl, 15);
-};
-const darken = (hsl) => {
-    return changeColor(hsl, -15);
-};
-const changeColor = (hsl, lightness) => {
-    return hsl.replace(/\s(\d+)(%?)\//, (_, p1, p2) => {
-        return ` ${Math.min(Math.max(Number.parseInt(p1, 10) + lightness, 0), 100)}${p2}/`;
-    });
-};
-
-const borderRadiusSmall = '4px';
-
-const borderRadiusMedium = '8px';
-
-const borderRadiusLarge = '12px';
-
-const borderWidthBase = '2px';
-
-const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
-
-const dropShadowLowStyle = {
-    boxShadow: `0px 3px 8px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
-};
-
-const dropShadowHighStyle = {
-    boxShadow: `0px 8px 40px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
-};
-
-const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
-
-const fontHyphenationStyle = {
-    overflowWrap: 'break-word',
-    hyphens: 'auto',
-};
-
-const fontLineHeight = 'calc(6px + 2.125ex)';
-
-const fontSizeTextXXSmall = '.75rem';
-
-const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
-
-const fontSizeTextSmall = '1rem';
-
-const fontSizeTextMedium = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
-
-const fontSizeTextLarge = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
-
-const fontSizeTextXLarge = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
-
-const fontSizeText = {
-    xxSmall: fontSizeTextXXSmall,
-    xSmall: fontSizeTextXSmall,
-    small: fontSizeTextSmall,
-    medium: fontSizeTextMedium,
-    large: fontSizeTextLarge,
-    xLarge: fontSizeTextXLarge,
-};
-
-const fontSizeHeadingSmall = fontSizeTextSmall;
-
-const fontSizeHeadingMedium = fontSizeTextMedium;
-
-const fontSizeHeadingLarge = fontSizeTextLarge;
-
-const fontSizeHeadingXLarge = fontSizeTextXLarge;
-
-const fontSizeHeadingXXLarge = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
-
-const fontSizeDisplaySmall = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
-
-const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
-
-const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
-
-const fontWeightRegular = 400;
-
-const fontWeightSemiBold = 600;
-
-const fontWeightBold = 700;
-
-const fontStyleNormal = 'normal';
-
-const fontVariant = 'normal';
-
-const backdropFilter = 'blur(32px)';
-const frostedGlassStyle = {
-    WebkitBackdropFilter: backdropFilter,
-    backdropFilter,
-};
-
-const _gradient = 'hsla(0, 0%, 0%, 0.80) 0%,' +
-    'hsla(0, 0%, 0%, 0.80) 8.1%,' +
-    'hsla(0, 0%, 0%, 0.80) 15.5%,' +
-    'hsla(0, 0%, 0%, 0.80) 22.5%,' +
-    'hsla(0, 0%, 0%, 0.78) 29%,' +
-    'hsla(0, 0%, 0%, 0.73) 35.3%,' +
-    'hsla(0, 0%, 0%, 0.67) 41.2%,' +
-    'hsla(0, 0%, 0%, 0.60) 47.1%,' +
-    'hsla(0, 0%, 0%, 0.52) 52.9%,' +
-    'hsla(0, 0%, 0%, 0.44) 58.8%,' +
-    'hsla(0, 0%, 0%, 0.33) 64.7%,' +
-    'hsla(0, 0%, 0%, 0.22) 71%,' +
-    'hsla(0, 0%, 0%, 0.12) 77.5%,' +
-    'hsla(0, 0%, 0%, 0.05) 84.5%,' +
-    'hsla(0, 0%, 0%, 0.011) 91.9%,' +
-    'hsla(0, 0%, 0%, 0)';
-
-const gradientToBottomStyle = {
-    background: `linear-gradient(to bottom, ${_gradient} 100%);`,
-};
-
-const gradientToTopStyle = {
-    background: `linear-gradient(to top, ${_gradient} 100%);`,
-};
-
-const breakpointBase = 0;
-
-const breakpointXS = 480;
-
-const breakpointS = 760;
-
-const breakpointM = 1000;
-
-const breakpointL = 1300;
-
-const breakpointXL = 1760;
-
-const breakpointXXL = 1920;
-
-const breakpoint = {
-    base: breakpointBase,
-    xs: breakpointXS,
-    s: breakpointS,
-    m: breakpointM,
-    l: breakpointL,
-    xl: breakpointXL,
-    xxl: breakpointXXL,
-};
-
-function getMediaQueryMin(min) {
-    return `@media(min-width:${breakpoint[min]}px)`;
-}
-
-const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
-
-const gridGap = spacingFluidMedium;
-
-const _gridWidthMax = '2560px';
-// fluid sizing calculated by https://fluidtypography.com/#app-get-started
-const _gridSafeZoneBase = 'max(22px, 10.625vw - 12px)'; // viewport-width range = 320 - 760px / size range = 22 - 68.75px
-const _gridSafeZoneS = 'calc(5vw - 16px)'; // viewport-width range = 760 - 1920px / size range = 22(22.75) - 80(79.71)px
-const _gridSafeZoneXXL = 'min(50vw - 880px, 400px)'; // viewport-width range = 1920 - 2560px / size range = 80(79.71)px - 400(399.71)px
-
-const columnMap = {
-    narrow: 4,
-    basic: 2,
-    extended: 1,
-};
-const gridColumnWidthS = `calc((100vw - ${_gridSafeZoneS} * 2 - ${gridGap} * 15) / 16)`;
-const gridColumnWidthXXL = `calc((min(100vw, ${_gridWidthMax}) - ${_gridSafeZoneXXL} * 2 - ${gridGap} * 15) / 16)`;
-const _gridPadding = `max(0px, 50vw - ${_gridWidthMax} / 2)`;
-const _getGridOffsetS = (width) => `calc(${_gridSafeZoneS} + (${gridGap} + ${gridColumnWidthS}) * ${columnMap[width]})`;
-const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL} + (${gridGap} + ${gridColumnWidthXXL}) * ${columnMap[width]})`;
-
-const gridFullOffset = _gridPadding;
-
-const gridExtendedOffsetBase = _gridSafeZoneBase;
-
-const gridExtendedOffsetS = _getGridOffsetS('extended');
-
-const gridExtendedOffsetXXL = _getGridOffsetXXL('extended');
-
-const gridExtendedOffset = {
-    base: gridExtendedOffsetBase,
-    s: gridExtendedOffsetS,
-    xxl: gridExtendedOffsetXXL,
-};
-
-const gridBasicOffsetBase = _gridSafeZoneBase;
-
-const gridBasicOffsetS = _getGridOffsetS('basic');
-
-const gridBasicOffsetXXL = _getGridOffsetXXL('basic');
-
-const gridBasicOffset = {
-    base: gridBasicOffsetBase,
-    s: gridBasicOffsetS,
-    xxl: gridBasicOffsetXXL,
-};
-
-const gridNarrowOffsetBase = _gridSafeZoneBase;
-
-const gridNarrowOffsetS = _getGridOffsetS('narrow');
-
-const gridNarrowOffsetXXL = _getGridOffsetXXL('narrow');
-
-const gridNarrowOffset = {
-    base: gridNarrowOffsetBase,
-    s: gridNarrowOffsetS,
-    xxl: gridNarrowOffsetXXL,
-};
-
-const motionDurationShort = '0.25s';
-
-const motionEasingBase = 'cubic-bezier(0.25,0.1,0.25,1)';
-
-const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+							var css = rule.toString(options);
+							if (!css && !link) continue;
+							if (str) str += '\n';
+							str += css;
+						}
+					}
+				}
+				return str;
+			};
+		}
+	}
+	function jssCombineAndSortMQ(options) {
+		if (options === void 0) {
+			options = {};
+		}
+		return {
+			onProcessSheet: function (sheet) {
+				recursive(options, sheet);
+			}
+		};
+	}
 
-function getMediaQueryMax(max) {
-    return `@media(max-width:${breakpoint[max] - 1}px)`;
+	dist = jssCombineAndSortMQ;
+	return dist;
 }
 
-const motionDurationLong = '0.6s';
+var distExports = requireDist();
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
 
-const motionDurationModerate = '0.4s';
+const isDisabledOrLoading = (disabled, loading) => {
+    return disabled || loading;
+};
 
-const motionDurationVeryLong = '1.2s';
+const hasWindow = typeof window !== 'undefined';
 
-const motionEasingIn = 'cubic-bezier(0,0,0.2,1)';
+const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
 
-const motionEasingOut = 'cubic-bezier(0.4,0,0.5,1)';
+const lighten = (hsl) => {
+    return changeColor(hsl, 15);
+};
+const darken = (hsl) => {
+    return changeColor(hsl, -15);
+};
+const changeColor = (hsl, lightness) => {
+    return hsl.replace(/\s(\d+)(%?)\//, (_, p1, p2) => {
+        return ` ${Math.min(Math.max(Number.parseInt(p1, 10) + lightness, 0), 100)}${p2}/`;
+    });
+};
 
-const spacingStaticXSmall = '4px';
+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 spacingStaticSmall = '8px';
+// NOTE: handpicked selection of plugins from jss-preset-default
+const jss = createJss({
+    plugins: [
+        jssGlobal(),
+        jssNested(),
+        camelCase(),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
+    ],
+});
+const getCss = (jssStyles) => jss
+    .createStyleSheet(jssStyles, {
+    generateId: (rule) => rule.key,
+})
+    .toString();
+const supportsConstructableStylesheets = () => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
+    }
+    catch {
+        return false;
+    }
+};
+// determine it once
+supportsConstructableStylesheets();
+const buildResponsiveStyles = (rawValue, getJssStyle) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const value = parseJSON(rawValue);
+    return typeof value === 'object'
+        ? Object.keys(value)
+            // base styles are applied on root object, responsive styles are nested within
+            // hence it is used as the initial object within reduce function
+            .filter((key) => key !== 'base')
+            .reduce((result, breakpointValue) => ({
+            ...result,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            [getMediaQueryMin(breakpointValue)]: getJssStyle(value[breakpointValue]),
+        }), getJssStyle(value.base))
+        : getJssStyle(value);
+};
+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) => {
+        Object.keys(obj).forEach((key) => {
+            const pVal = prev[key];
+            const oVal = obj[key];
+            if (isObject(pVal) && isObject(oVal)) {
+                prev[key] = mergeDeep(pVal, oVal);
+            }
+            else {
+                prev[key] = oVal;
+            }
+        });
+        return prev;
+    }, {});
+};
 
-const spacingStaticMedium = '16px';
+// TODO: Use function from ./jss (Causes bundling issues)
+(() => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
+    }
+    catch {
+        return false;
+    }
+})(); // determine it once
 
-const spacingStaticLarge = '32px';
+const attributeMutationMap = new Map();
+hasWindow &&
+    new MutationObserver((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)) {
+            attributeMutationMap.get(mutation.target)?.();
+        }
+    });
 
-const spacingFluidXSmall = 'clamp(4px, 0.25vw + 3px, 8px)';
+const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
+hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
-const spacingFluidSmall = 'clamp(8px, 0.5vw + 6px, 16px)';
+Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
 
-const spacingFluidLarge = 'clamp(32px, 2.75vw + 23px, 76px)';
+const hasVisibleIcon = (iconName, iconSource) => {
+    return iconName !== 'none' || !!iconSource;
+};
 
-const _displayFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
-const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
+/**
+ * Map of observed nodes and their corresponding callback functions.
+ */
+const observedNodesMap = new Map();
+/**
+ * Mutation observer for observing changes in the children of observed nodes.
+ */
+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 > 0) {
+            const observedNodes = Array.from(observedNodesMap.keys());
+            // 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)?.();
+                }
+            }
+        }
+    });
 
-const displayMediumStyle = {
-    font: `${_displayFontPartA}${fontSizeDisplayMedium}${_displayFontPartB}`,
-};
+const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const displayLargeStyle = {
-    font: `${_displayFontPartA}${fontSizeDisplayLarge}${_displayFontPartB}`,
-};
+// index.ts
+var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
 
-const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold} `;
-const _headingFontPartB = `/${fontLineHeight} ${fontFamily}`;
+const hasDocument = typeof document !== 'undefined';
 
-const headingSmallStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingSmall}${_headingFontPartB}`,
-};
+const hasShowPickerSupport = () => (hasDocument &&
+    'showPicker' in HTMLInputElement.prototype &&
+    CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const headingMediumStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingMedium}${_headingFontPartB}`,
+const prefix = `[Porsche Design System v${"3.31.0-rc.0"}]` // this part isn't covered by unit tests
+    ;
+const consoleError = (...messages) => {
+    console.error(prefix, ...messages); // eslint-disable-line no-console
 };
 
-const headingLargeStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingLarge}${_headingFontPartB}`,
-};
+/**
+ * Applies a style only on Chromium based browsers by using a media query which is only supported there.
+ * https://browserstack.com/guide/create-browser-specific-css
+ *
+ * @param {JssStyle} style - The style to be applied when the Chromium media query is supported.
+ * @returns {JssStyle} - The Chromium media query containing the style.
+ */
+const supportsChromiumMediaQuery = (style) => ({
+    '@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)': style,
+});
 
-const headingXLargeStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingXLarge}${_headingFontPartB}`,
+const isThemeAuto = (theme) => {
+    return theme === 'auto';
 };
 
-const headingXXLargeStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingXXLarge}${_headingFontPartB}`,
+const isThemeDark = (theme) => {
+    return theme === 'dark';
 };
 
-const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
-const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const textXXSmallStyle = {
-    font: `${_textFontPartA}${fontSizeTextXXSmall}${_textFontPartB}`,
-    ...fontHyphenationStyle,
-};
+const headerSlot = 'header';
+const anchorSlot = 'anchor';
 
-const textXSmallStyle = {
-    font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
-    ...fontHyphenationStyle,
+const formatObjectOutput = (value) => {
+    return JSON.stringify(value)
+        .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
+        .replace(/([,:{])/g, '$1 ') // add space after following: ,:{
+        .replace(/(})/g, ' $1') // add space before following: }
+        .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
-
-const textSmallStyle = {
-    font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
-    ...fontHyphenationStyle,
+const formatArrayOutput = (value) => {
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    JSON.stringify(value.map((x) => (x === undefined ? `${x}` : x))) // wrap undefined in quotes to not convert it to null
+        .replace(/'/g, '') // remove single quotes
+        // eslint-disable-next-line @typescript-eslint/quotes
+        .replace(/"/g, "'") // replace double quotes with single quotes
+        .replace(/'(undefined)'/, '$1') // remove quotes around undefined
+        .replace(/,/g, ', ') // add space after comma
+    );
+};
+const printErrorMessage = ({ propName, propValue, // TODO: might be nicer if this is always a string
+propType, componentName, }) => {
+    consoleError(`Invalid property '${propName}' with value '${internalValidateProps.formatObjectOutput(propValue)}' supplied to ${componentName}, expected one of: ${propType}`);
+};
+const isValueNotOfType = (propValue, propType) => {
+    return propValue !== undefined && typeof propValue !== propType;
+};
+const validateValueOfType = (propName, propValue, propType) => {
+    if (internalValidateProps.isValueNotOfType(propValue, propType)) {
+        return { propName, propValue, propType };
+    }
+    return undefined;
 };
-
-const textMediumStyle = {
-    font: `${_textFontPartA}${fontSizeTextMedium}${_textFontPartB}`,
-    ...fontHyphenationStyle,
+const getBreakpointCustomizableStructure = (allowedValues) => {
+    return breakpointCustomizableTemplate.replace(/value/g, allowedValues !== 'boolean' && allowedValues !== 'number'
+        ? internalValidateProps
+            .formatArrayOutput(allowedValues)
+            .replace(/\[/g, '(') // starting inline type literal array
+            .replace(/]/g, ')[]') // ending inline type literal array
+            .replace(/,/g, ' |') // replace commas with a pipe
+        : allowedValues);
+};
+const getAriaStructure = (allowedAriaAttributes) => {
+    return (internalValidateProps
+        .formatObjectOutput(allowedAriaAttributes.reduce((prev, key) => ({
+        ...prev,
+        [key]: 'value',
+    }), {}))
+        .replace(/":/g, '"?:') // add optional modifier on keys before colon
+        // eslint-disable-next-line @typescript-eslint/quotes
+        .replace(/"/g, "'") // replace double quotes with single quotes
+    );
+};
+const getShapeStructure = (shapeStructure) => {
+    return internalValidateProps
+        .formatObjectOutput(Object.keys(shapeStructure).reduce((prev, key) => ({ ...prev, [key]: shapeStructure[key].name }), {}))
+        .replace(/"/g, ''); // remove double quotes
+};
+const isBreakpointCustomizableValueInvalid = (value, allowedValues) => {
+    return allowedValues === 'boolean' || allowedValues === 'number'
+        ? internalValidateProps.isValueNotOfType(value, allowedValues)
+        : !allowedValues.includes(value);
 };
-
-const textLargeStyle = {
-    font: `${_textFontPartA}${fontSizeTextLarge}${_textFontPartB}`,
-    ...fontHyphenationStyle,
+/**
+ * Validates an array using a provided validator function and returns the first encountered validation error.
+ *
+ * @param {string} propName - The name of the property being validated.
+ * @param {any} arr - The input to be validated.
+ * @param {ValidatorFunction} validator - The validator function that checks each array item.
+ * @returns {ValidationError | undefined} The first encountered validation error object, or undefined if the array is valid.
+ */
+const isValidArray = (propName, arr, validator) => {
+    const validationError = Array.isArray(arr)
+        ? validator(propName, arr.find((item) => validator(propName, item)))
+        : {
+            propName,
+            propValue: arr,
+            propType: validator(propName, null).propType, // Get propType by passing in null which will always result in error
+        };
+    if (validationError) {
+        return { ...validationError, propType: `${validationError.propType}[]` };
+    }
+    return undefined;
 };
+const internalValidateProps = {
+    isValueNotOfType,
+    formatArrayOutput,
+    formatObjectOutput,
+    printErrorMessage,
+    validateValueOfType,
+    isValidArray,
+    isBreakpointCustomizableValueInvalid,
+    getBreakpointCustomizableStructure,
+    getAriaStructure,
+    getShapeStructure,
+};
+const breakpointCustomizableTemplate = `value, ${internalValidateProps
+    .formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
+    .replace(/"/g, '')}`;
+
+const OPTION_LIST_SAFE_ZONE = 6;
 
 /* Auto Generated Start */
 const themeLight = {
@@ -3752,181 +4023,10 @@ 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: [
-        jssGlobal(),
-        jssNested(),
-        camelCase(),
-        jssPluginSortMediaQueries({ combineMediaQueries: true }),
-    ],
-});
-const getCss = (jssStyles) => jss
-    .createStyleSheet(jssStyles, {
-    generateId: (rule) => rule.key,
-})
-    .toString();
-const supportsConstructableStylesheets = () => {
-    try {
-        return typeof new CSSStyleSheet().replaceSync === 'function';
-    }
-    catch {
-        return false;
-    }
-};
-// determine it once
-supportsConstructableStylesheets();
-const buildResponsiveStyles = (rawValue, getJssStyle) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const value = parseJSON(rawValue);
-    return typeof value === 'object'
-        ? Object.keys(value)
-            // base styles are applied on root object, responsive styles are nested within
-            // hence it is used as the initial object within reduce function
-            .filter((key) => key !== 'base')
-            .reduce((result, breakpointValue) => ({
-            ...result,
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            [getMediaQueryMin(breakpointValue)]: getJssStyle(value[breakpointValue]),
-        }), getJssStyle(value.base))
-        : getJssStyle(value);
-};
-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) => {
-        Object.keys(obj).forEach((key) => {
-            const pVal = prev[key];
-            const oVal = obj[key];
-            if (isObject(pVal) && isObject(oVal)) {
-                prev[key] = mergeDeep(pVal, oVal);
-            }
-            else {
-                prev[key] = oVal;
-            }
-        });
-        return prev;
-    }, {});
-};
-
-// TODO: Use function from ./jss (Causes bundling issues)
-(() => {
-    try {
-        return typeof new CSSStyleSheet().replaceSync === 'function';
-    }
-    catch {
-        return false;
-    }
-})(); // determine it once
-
-const attributeMutationMap = new Map();
-hasWindow &&
-    new MutationObserver((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)) {
-            attributeMutationMap.get(mutation.target)?.();
-        }
-    });
-
-const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
-hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
-
-Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
-
-const hasVisibleIcon = (iconName, iconSource) => {
-    return iconName !== 'none' || !!iconSource;
-};
-
-/**
- * Map of observed nodes and their corresponding callback functions.
- */
-const observedNodesMap = new Map();
-/**
- * Mutation observer for observing changes in the children of observed nodes.
- */
-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 > 0) {
-            const observedNodes = Array.from(observedNodesMap.keys());
-            // 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)?.();
-                }
-            }
-        }
-    });
-
-const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
-
-// index.ts
-var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
-
-const hasDocument = typeof document !== 'undefined';
-
-const hasShowPickerSupport = () => (hasDocument &&
-    'showPicker' in HTMLInputElement.prototype &&
-    CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
-
+// CSS Variable defined in fontHyphenationStyle
 /**
- * Applies a style only on Chromium based browsers by using a media query which is only supported there.
- * https://browserstack.com/guide/create-browser-specific-css
- *
- * @param {JssStyle} style - The style to be applied when the Chromium media query is supported.
- * @returns {JssStyle} - The Chromium media query containing the style.
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const supportsChromiumMediaQuery = (style) => ({
-    '@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)': style,
-});
-
-const isThemeAuto = (theme) => {
-    return theme === 'auto';
-};
-
-const isThemeDark = (theme) => {
-    return theme === 'dark';
-};
-
-const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-const headerSlot = 'header';
-const anchorSlot = 'anchor';
-
-const formatObjectOutput = (value) => {
-    return JSON.stringify(value)
-        .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
-        .replace(/([,:{])/g, '$1 ') // add space after following: ,:{
-        .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, '')}`;
-
-const OPTION_LIST_SAFE_ZONE = 6;
-
 const getComponentCss$1n = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
@@ -4324,6 +4424,10 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$1k = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
@@ -4362,6 +4466,10 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$1j = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
@@ -4651,6 +4759,10 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$1i = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
@@ -5106,6 +5218,10 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$1g = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
@@ -5564,6 +5680,10 @@ const getCheckedSVGBackgroundImage$3 = (fill) => {
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$1f = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
@@ -5766,6 +5886,10 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$1e = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
@@ -7946,6 +8070,10 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$X = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
@@ -7993,6 +8121,10 @@ const getComponentCss$X = (state, hasAction, hasClose, theme) => {
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$W = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8016,6 +8148,10 @@ const getComponentCss$W = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$V = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8036,6 +8172,10 @@ const getComponentCss$V = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8061,6 +8201,10 @@ const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$T = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8084,6 +8228,10 @@ const getComponentCss$T = (disabled, loading, hideLabel, state, toggle, compact,
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8108,6 +8256,10 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8128,6 +8280,10 @@ const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8154,6 +8310,10 @@ const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8177,6 +8337,10 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
@@ -8190,6 +8354,10 @@ const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnl
     });
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$N = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
@@ -8219,6 +8387,10 @@ const getComponentCss$N = (icon, iconSource, active, stretch, size, hideLabel, a
 };
 
 const cssVariableInternalLinkScaling = '--p-internal-link-scaling';
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$M = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
@@ -8261,6 +8433,10 @@ const getComponentCss$M = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }));
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$L = (aspectRatio, weight, // to get deprecated semibold typed
 direction, hasDescription) => {
     return getCss({
@@ -8403,6 +8579,10 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$K = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
     const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
@@ -8542,6 +8722,10 @@ const getComponentCss$K = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
     });
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$J = (aspectRatio, size, weight, // to get deprecated semibold typed
 background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
@@ -8936,6 +9120,10 @@ const getComponentCss$G = (model, safeZone, size, color, theme) => {
 };
 
 const cssVarInternalMultiSelectOptionScaling = '--p-internal-multi-select-option-scaling';
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$F = (theme, isDisabled, selected) => {
     return getCss({
         '@global': {
@@ -9009,6 +9197,10 @@ const getComponentCss$E = (isDisabled, theme) => {
 };
 
 const cssVarInternalMultiSelectScaling = '--p-internal-multi-select-scaling';
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$D = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
     const scalingVar = `var(${cssVarInternalMultiSelectScaling}, ${compact ? 0.5 : 1})`;
     return getCss({
@@ -9197,6 +9389,10 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
 
 const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
 const getScalingVar$1 = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
     const scalingVar = getScalingVar$1(compact);
     const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
@@ -9266,6 +9462,10 @@ const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, comp
 const POPOVER_SAFE_ZONE = 8;
 
 const { canvasTextColor } = getHighContrastColors();
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$A = (theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
@@ -9373,6 +9573,10 @@ const getComponentCss$A = (theme) => {
 const getCheckedSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
@@ -9458,6 +9662,10 @@ const cssVarInternalRadioGroupOptionScaling = '--p-internal-radio-group-option-s
 const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$y = (disabled, loading, state, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
@@ -9650,6 +9858,10 @@ const groupRadioGroupDirectionJssStyles = {
 const getRadioGroupDirectionJssStyles = (direction) => {
     return groupRadioGroupDirectionJssStyles[direction];
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$x = (disabled, loading, hideLabel, state, compact, direction, theme) => {
     const scalingVar = `var(${cssVarInternalRadioGroupScaling}, ${compact ? 0.6668 : 1})`;
     const { primaryColor } = getThemedColors(theme);
@@ -9865,10 +10077,14 @@ const getScalableItemStyles = (hasIconAndSlottedContent, compact) => {
     const dimension = `calc(max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px)) + (${verticalPadding} + ${borderWidthBase}) * 2)`;
     return { padding, dimension };
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$v = (compact, isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
-    const scalableItemStyles = getScalableItemStyles(hasIcon && hasSlottedContent, compact);
+    const { dimension, padding } = getScalableItemStyles(hasIcon && hasSlottedContent, compact);
     return getCss({
         '@global': {
             ':host': {
@@ -9884,9 +10100,10 @@ const getComponentCss$v = (compact, isDisabled, isSelected, hasIcon, hasSlottedC
                 position: 'relative',
                 display: 'block',
                 height: '100%',
-                minHeight: scalableItemStyles.dimension,
                 width: '100%',
-                padding: scalableItemStyles.padding,
+                minHeight: dimension,
+                minWidth: dimension,
+                padding: padding,
                 margin: 0, // Removes default button margin on safari 15
                 border: `${borderWidthBase} solid ${borderColor}`,
                 borderRadius: borderRadiusSmall,
@@ -9938,7 +10155,7 @@ const getComponentCss$v = (compact, isDisabled, isSelected, hasIcon, hasSlottedC
         }),
     });
 };
-const getComponentCss$u = (maxWidth, columns, compact) => {
+const getComponentCss$u = (minWidth, maxWidth, columns, compact) => {
     const scalingVar = getScalingVar(compact);
     return getCss({
         '@global': {
@@ -10180,6 +10397,10 @@ const getComponentCss$t = (isOpen, state, disabled, filter, theme) => {
     }, filter ? getFilterStyles(isOpen, state, disabled, theme) : getButtonStyles(isOpen, state, theme), getListStyles(isOpen, theme)));
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$s = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
     return getCss({
         '@global': {
@@ -10239,6 +10460,10 @@ const getComponentCss$s = (isDisabled, hasCustomDropdown, hideLabel, state, them
 };
 
 const cssVarInternalSelectOptionScaling = '--p-internal-select-option-scaling';
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$r = (theme) => {
     return getCss({
         '@global': {
@@ -10263,6 +10488,10 @@ const getComponentCss$r = (theme) => {
 };
 
 const cssVarInternalSelectScaling = '--p-internal-select-scaling';
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
     const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
     return getCss({
@@ -10455,6 +10684,10 @@ const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     ];
     return svgNumberedCirclePaths[stepCount];
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$n = (state, disabled, theme) => {
     const { primaryColor, hoverColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
@@ -10597,6 +10830,10 @@ const getColors$1 = (checked, disabled, loading, theme) => {
         textColor: disabledOrLoadingColor || primaryColor,
     };
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, loading, compact, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
     const { buttonBorderColor: buttonBorderColorDark, buttonBorderColorHover: buttonBorderColorHoverDark, buttonBackgroundColor: buttonBackgroundColorDark, buttonBackgroundColorHover: buttonBackgroundColorHoverDark, toggleBackgroundColor: toggleBackgroundColorDark, toggleBackgroundColorHover: toggleBackgroundColorHoverDark, textColor: textColorDark, } = getColors$1(checked, disabled, loading, 'dark');
@@ -11143,6 +11380,10 @@ const getThemedBackgroundColor = (tagColor, themedColors) => {
     return colorMap[tagColor];
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$a = (color, hasLabel, theme) => {
     const themedColors = getThemedColors(theme);
     const themedColorsDark = getThemedColors('dark');
@@ -11329,6 +11570,10 @@ const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
 const cssVariableInputPaddingStart = '--p-internal-text-field-input-padding-start';
 const cssVariableInputPaddingEnd = '--p-internal-text-field-input-padding-end';
 const cssVarInternalTextFieldScaling = '--p-internal-text-field-scaling';
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$8 = (isDisabled, isReadonly, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, hasSubmitButton, theme, unitLength) => {
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
@@ -11549,6 +11794,10 @@ const sizeMap = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$5 = (size, weight, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
@@ -11568,6 +11817,10 @@ const getComponentCss$5 = (size, weight, align, color, ellipsis, theme) => {
     });
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$4 = (isDisabled, isReadonly, hideLabel, state, hasCounter, theme) => {
     return getCss({
         '@global': {
@@ -11623,6 +11876,10 @@ const getComponentCss$4 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
     });
 };
 
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, counter, resize, theme) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
@@ -11750,6 +12007,10 @@ const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
     transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
 });
 const toastCloseClassName = 'close';
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
 const getComponentCss$1 = () => {
     return getCss({
         '@global': {