npm - @wix/entity-advanced-permissions - Versions diffs - 1.1096.0 → 1.1098.0 - Mend

@wix/entity-advanced-permissions 1.1096.0 → 1.1098.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/statics/entity-advanced-permissions.umd.js +758 -600
package/dist/statics/entity-advanced-permissions.umd.js.map +1 -1
package/dist/statics/entity-advanced-permissions.umd.min.js +7 -7
package/dist/statics/entity-advanced-permissions.umd.min.js.map +1 -1
package/dist/statics/manifest.json +2 -2
package/dist/statics/manifest.min.json +2 -2
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +6 -6

package/dist/statics/entity-advanced-permissions.umd.js CHANGED Viewed

@@ -1073,75 +1073,6 @@ if ($defineProperty) {
 }
-/***/ }),
-/***/ 841:
-/*!*************************************************!*\
-  !*** ../../../node_modules/classnames/index.js ***!
-  \*************************************************/
-/***/ ((module, exports) => {
-var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-/* global define */
-(function () {
-	'use strict';
-	var hasOwn = {}.hasOwnProperty;
-	var nativeCodeString = '[native code]';
-	function classNames() {
-		var classes = [];
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-			var argType = typeof arg;
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-					classes.push(arg.toString());
-					continue;
-				}
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
-		return classes.join(' ');
-	}
-	if ( true && module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else if (true) {
-		// register as 'classnames', consistent with npm package name
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
-			return classNames;
-		}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
-		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-	} else {}
-}());
 /***/ }),
 /***/ 1126:
@@ -33257,6 +33188,92 @@ function _extends() {
 }
 module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+/***/ }),
+/***/ 5685:
+/*!*************************************************!*\
+  !*** ../../../node_modules/classnames/index.js ***!
+  \*************************************************/
+/***/ ((module, exports) => {
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+/* global define */
+(function () {
+	'use strict';
+	var hasOwn = {}.hasOwnProperty;
+	function classNames () {
+		var classes = '';
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (arg) {
+				classes = appendClass(classes, parseValue(arg));
+			}
+		}
+		return classes;
+	}
+	function parseValue (arg) {
+		if (typeof arg === 'string' || typeof arg === 'number') {
+			return arg;
+		}
+		if (typeof arg !== 'object') {
+			return '';
+		}
+		if (Array.isArray(arg)) {
+			return classNames.apply(null, arg);
+		}
+		if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+			return arg.toString();
+		}
+		var classes = '';
+		for (var key in arg) {
+			if (hasOwn.call(arg, key) && arg[key]) {
+				classes = appendClass(classes, key);
+			}
+		}
+		return classes;
+	}
+	function appendClass (value, newClass) {
+		if (!newClass) {
+			return value;
+		}
+		if (value) {
+			return value + ' ' + newClass;
+		}
+		return value + newClass;
+	}
+	if ( true && module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else if (true) {
+		// register as 'classnames', consistent with npm package name
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
+			return classNames;
+		}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+	} else {}
+}());
 /***/ })
 /******/ 	});
@@ -33476,7 +33493,7 @@ var __webpack_exports__ = {};
 (() => {
 "use strict";
 /*!********************************!*\
-  !*** ./index.ts + 447 modules ***!
+  !*** ./index.ts + 449 modules ***!
   \********************************/
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
@@ -33950,7 +33967,7 @@ var ButtonSize;
 })(ButtonSize || (ButtonSize = {}));
 //# sourceMappingURL=types.js.map
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(841);
+var classnames = __webpack_require__(5685);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 // EXTERNAL MODULE: ../../../node_modules/wix-ui-tpa/dist/esm/components/Button/Button.deprecated.st.css
 var Button_deprecated_st = __webpack_require__(8308);
@@ -34852,7 +34869,7 @@ function injectCSS(id, css, depth, runtimeId) {
-var _namespace_ = "wds_1_95_1_newColorsBranding";
+var _namespace_ = "wds_1_98_0_newColorsBranding";
 var _style_ = classesRuntime.bind(null, _namespace_);
 var newColorsBranding_st_css_cssStates = statesRuntime.bind(null, _namespace_);
@@ -34860,7 +34877,7 @@ var newColorsBranding_st_css_style = (/* unused pure expression or super */ null
 var newColorsBranding_st_css_st = _style_;
 var newColorsBranding_st_css_namespace = (/* unused pure expression or super */ null && (_namespace_));
-var newColorsBranding_st_css_classes = {"root":"wds_1_95_1_newColorsBranding__root"};
+var newColorsBranding_st_css_classes = {"root":"wds_1_98_0_newColorsBranding__root"};
 var newColorsBranding_st_css_keyframes = {};
 var newColorsBranding_st_css_layers = {};
 var containers = {};
@@ -34878,7 +34895,7 @@ var newColorsBranding_st_css_vars = {};
-var madefor_st_css_namespace_ = "wds_1_95_1_madefor";
+var madefor_st_css_namespace_ = "wds_1_98_0_madefor";
 var madefor_st_css_style_ = classesRuntime.bind(null, madefor_st_css_namespace_);
 var madefor_st_css_cssStates = statesRuntime.bind(null, madefor_st_css_namespace_);
@@ -34886,7 +34903,7 @@ var madefor_st_css_style = (/* unused pure expression or super */ null && (madef
 var madefor_st_css_st = (/* unused pure expression or super */ null && (madefor_st_css_style_));
 var madefor_st_css_namespace = (/* unused pure expression or super */ null && (madefor_st_css_namespace_));
-var madefor_st_css_classes = {"root":"wds_1_95_1_madefor__root","madefor":"wds_1_95_1_madefor__madefor"};
+var madefor_st_css_classes = {"root":"wds_1_98_0_madefor__root","madefor":"wds_1_98_0_madefor__madefor"};
 var madefor_st_css_keyframes = {};
 var madefor_st_css_layers = {};
 var madefor_st_css_containers = {};
@@ -34909,12 +34926,15 @@ const WixDesignSystemContext = external_React_default().createContext({
-const WixDesignSystemProvider = (_a) => {
-    var { dataHook, className, as = 'span', children, theme, features = {} } = _a, rest = __rest(_a, ["dataHook", "className", "as", "children", "theme", "features"]);
+const WixDesignSystemProvider = ({ dataHook, className, as = 'span', children, theme, features = {}, ...rest }) => {
     const { newColorsBranding } = features;
     const newBrandingClass = newColorsBranding && newColorsBranding_st_css_classes.root;
-    return (external_React_default().createElement(WixDesignSystemContext.Provider, { value: { newBrandingClass, newColorsBranding } }, external_React_default().createElement(as, Object.assign(Object.assign({}, rest), { 'data-hook': dataHook, 'data-newcolorsbranding': newColorsBranding, className: newColorsBranding_st_css_st(className, newBrandingClass, madefor_st_css_classes.madefor, theme === null || theme === void 0 ? void 0 : theme.className) }), children)));
+    return (external_React_default().createElement(WixDesignSystemContext.Provider, { value: { newBrandingClass, newColorsBranding } }, external_React_default().createElement(as, {
+        ...rest,
+        'data-hook': dataHook,
+        'data-newcolorsbranding': newColorsBranding,
+        className: newColorsBranding_st_css_st(className, newBrandingClass, madefor_st_css_classes.madefor, theme?.className),
+    }, children)));
 };
 /* harmony default export */ const WixDesignSystemProvider_WixDesignSystemProvider = (WixDesignSystemProvider);
 //# sourceMappingURL=WixDesignSystemProvider.js.map
@@ -34931,7 +34951,7 @@ var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty);
-var typography_st_css_namespace_ = "wds_1_95_1_StylableTypography";
+var typography_st_css_namespace_ = "wds_1_98_0_StylableTypography";
 var typography_st_css_style_ = classesRuntime.bind(null, typography_st_css_namespace_);
 var typography_st_css_cssStates = statesRuntime.bind(null, typography_st_css_namespace_);
@@ -34939,7 +34959,7 @@ var typography_st_css_style = (/* unused pure expression or super */ null && (ty
 var typography_st_css_st = (/* unused pure expression or super */ null && (typography_st_css_style_));
 var typography_st_css_namespace = (/* unused pure expression or super */ null && (typography_st_css_namespace_));
-var typography_st_css_classes = {"root":"wds_1_95_1_StylableTypography__root","text-extra-tiny-thin":"wds_1_95_1_StylableTypography__text-extra-tiny-thin","text-extra-tiny-normal":"wds_1_95_1_StylableTypography__text-extra-tiny-normal","text-extra-tiny-bold":"wds_1_95_1_StylableTypography__text-extra-tiny-bold","text-tiny-thin":"wds_1_95_1_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_95_1_StylableTypography__text-tiny-normal","text-tiny-bold":"wds_1_95_1_StylableTypography__text-tiny-bold","text-small-thin":"wds_1_95_1_StylableTypography__text-small-thin","text-small-normal":"wds_1_95_1_StylableTypography__text-small-normal","text-small-bold":"wds_1_95_1_StylableTypography__text-small-bold","text-medium-thin":"wds_1_95_1_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_95_1_StylableTypography__text-medium-bold","heading-h1":"wds_1_95_1_StylableTypography__heading-h1","heading-h2":"wds_1_95_1_StylableTypography__heading-h2","heading-h3":"wds_1_95_1_StylableTypography__heading-h3","heading-h4":"wds_1_95_1_StylableTypography__heading-h4","heading-h5":"wds_1_95_1_StylableTypography__heading-h5","heading-h6":"wds_1_95_1_StylableTypography__heading-h6","heading-xl":"wds_1_95_1_StylableTypography__heading-xl","heading-l":"wds_1_95_1_StylableTypography__heading-l","heading-m":"wds_1_95_1_StylableTypography__heading-m","heading-s":"wds_1_95_1_StylableTypography__heading-s","heading-t":"wds_1_95_1_StylableTypography__heading-t","heading-xt":"wds_1_95_1_StylableTypography__heading-xt","caption-1":"wds_1_95_1_StylableTypography__caption-1"};
+var typography_st_css_classes = {"root":"wds_1_98_0_StylableTypography__root","text-extra-tiny-thin":"wds_1_98_0_StylableTypography__text-extra-tiny-thin","text-extra-tiny-normal":"wds_1_98_0_StylableTypography__text-extra-tiny-normal","text-extra-tiny-bold":"wds_1_98_0_StylableTypography__text-extra-tiny-bold","text-tiny-thin":"wds_1_98_0_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_98_0_StylableTypography__text-tiny-normal","text-tiny-bold":"wds_1_98_0_StylableTypography__text-tiny-bold","text-small-thin":"wds_1_98_0_StylableTypography__text-small-thin","text-small-normal":"wds_1_98_0_StylableTypography__text-small-normal","text-small-bold":"wds_1_98_0_StylableTypography__text-small-bold","text-medium-thin":"wds_1_98_0_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_98_0_StylableTypography__text-medium-bold","heading-h1":"wds_1_98_0_StylableTypography__heading-h1","heading-h2":"wds_1_98_0_StylableTypography__heading-h2","heading-h3":"wds_1_98_0_StylableTypography__heading-h3","heading-h4":"wds_1_98_0_StylableTypography__heading-h4","heading-h5":"wds_1_98_0_StylableTypography__heading-h5","heading-h6":"wds_1_98_0_StylableTypography__heading-h6","heading-xl":"wds_1_98_0_StylableTypography__heading-xl","heading-l":"wds_1_98_0_StylableTypography__heading-l","heading-m":"wds_1_98_0_StylableTypography__heading-m","heading-s":"wds_1_98_0_StylableTypography__heading-s","heading-t":"wds_1_98_0_StylableTypography__heading-t","heading-xt":"wds_1_98_0_StylableTypography__heading-xt","caption-1":"wds_1_98_0_StylableTypography__caption-1"};
 var typography_st_css_keyframes = {};
 var typography_st_css_layers = {};
 var typography_st_css_containers = {};
@@ -34957,7 +34977,7 @@ var typography_st_css_vars = {"wds-font-family-default":"--wds-font-family-defau
-var colors_st_css_namespace_ = "wds_1_95_1_colors";
+var colors_st_css_namespace_ = "wds_1_98_0_colors";
 var colors_st_css_style_ = classesRuntime.bind(null, colors_st_css_namespace_);
 var colors_st_css_cssStates = statesRuntime.bind(null, colors_st_css_namespace_);
@@ -34965,7 +34985,7 @@ var colors_st_css_style = (/* unused pure expression or super */ null && (colors
 var colors_st_css_st = (/* unused pure expression or super */ null && (colors_st_css_style_));
 var colors_st_css_namespace = (/* unused pure expression or super */ null && (colors_st_css_namespace_));
-var colors_st_css_classes = {"root":"wds_1_95_1_colors__root"};
+var colors_st_css_classes = {"root":"wds_1_98_0_colors__root"};
 var colors_st_css_keyframes = {};
 var colors_st_css_layers = {};
 var colors_st_css_containers = {};
@@ -34985,7 +35005,7 @@ var colors_st_css_vars = {"wsr-color-D10":"--wsr-color-D10","wsr-color-D20":"--w
-var Text_st_css_namespace_ = "wds_1_95_1_Text";
+var Text_st_css_namespace_ = "wds_1_98_0_Text";
 var Text_st_css_style_ = classesRuntime.bind(null, Text_st_css_namespace_);
 var Text_st_css_cssStates = statesRuntime.bind(null, Text_st_css_namespace_);
@@ -34993,7 +35013,7 @@ var Text_st_css_style = (/* unused pure expression or super */ null && (Text_st_
 var Text_st_css_st = Text_st_css_style_;
 var Text_st_css_namespace = (/* unused pure expression or super */ null && (Text_st_css_namespace_));
-var Text_st_css_classes = {"root":"wds_1_95_1_Text__root","text-tiny-thin":"wds_1_95_1_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_95_1_StylableTypography__text-tiny-normal","text-tiny-bold":"wds_1_95_1_StylableTypography__text-tiny-bold","text-small-thin":"wds_1_95_1_StylableTypography__text-small-thin","text-small-normal":"wds_1_95_1_StylableTypography__text-small-normal","text-small-bold":"wds_1_95_1_StylableTypography__text-small-bold","text-medium-thin":"wds_1_95_1_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_95_1_StylableTypography__text-medium-bold"};
+var Text_st_css_classes = {"root":"wds_1_98_0_Text__root","text-tiny-thin":"wds_1_98_0_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_98_0_StylableTypography__text-tiny-normal","text-tiny-bold":"wds_1_98_0_StylableTypography__text-tiny-bold","text-small-thin":"wds_1_98_0_StylableTypography__text-small-thin","text-small-normal":"wds_1_98_0_StylableTypography__text-small-normal","text-small-bold":"wds_1_98_0_StylableTypography__text-small-bold","text-medium-thin":"wds_1_98_0_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_98_0_StylableTypography__text-medium-bold"};
 var Text_st_css_keyframes = {};
 var Text_st_css_layers = {};
 var Text_st_css_containers = {};
@@ -35013,7 +35033,6 @@ const WixStyleReactMaskingContext = external_React_default().createContext({});
 const getStyleDataAttributes = styleAttributes => Object.keys(styleAttributes).reduce((acc, styleKey) => {
     acc[`data-${styleKey}`] = styleAttributes[styleKey];
     return acc;
@@ -35028,10 +35047,9 @@ const RawTextDefaultProps = {
     listStyle: 'checkmark',
     widows: false,
 };
-const RawText = external_React_default().forwardRef((_a, ref) => {
-    var { size = RawTextDefaultProps.size, secondary = RawTextDefaultProps.secondary, skin = RawTextDefaultProps.skin, light = RawTextDefaultProps.light, weight = RawTextDefaultProps.weight, tagName = RawTextDefaultProps.tagName, children, ellipsis, showDelay, hideDelay, appendTo, flip, fixed, placement, timeout, maxWidth, zIndex, showTooltip, listStyle = RawTextDefaultProps.listStyle, id, widows = RawTextDefaultProps.widows } = _a, rest = __rest(_a, ["size", "secondary", "skin", "light", "weight", "tagName", "children", "ellipsis", "showDelay", "hideDelay", "appendTo", "flip", "fixed", "placement", "timeout", "maxWidth", "zIndex", "showTooltip", "listStyle", "id", "widows"]);
+const RawText = external_React_default().forwardRef(({ size = RawTextDefaultProps.size, secondary = RawTextDefaultProps.secondary, skin = RawTextDefaultProps.skin, light = RawTextDefaultProps.light, weight = RawTextDefaultProps.weight, tagName = RawTextDefaultProps.tagName, children, ellipsis, showDelay, hideDelay, appendTo, flip, fixed, placement, timeout, maxWidth, zIndex, showTooltip, listStyle = RawTextDefaultProps.listStyle, id, widows = RawTextDefaultProps.widows, ...rest }, ref) => {
     /* eslint-disable no-unused-vars */
-    const { dataHook, className } = rest, textProps = __rest(rest, ["dataHook", "className"]);
+    const { dataHook, className, ...textProps } = rest;
     const styleAttributes = {
         size,
         secondary,
@@ -35054,8 +35072,15 @@ const RawText = external_React_default().forwardRef((_a, ref) => {
         newChildrenArr.push(textArray[arrLength - 2] + '\u00A0' + textArray[arrLength - 1]);
         return newChildrenArr.join(' ');
     }, [children, widows]);
-    return (external_React_default().createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => external_React_default().createElement(tagName, Object.assign(Object.assign(Object.assign({ ref,
-        id }, textProps), { 'data-hook': dataHook, 'data-mask': !!maskingClassNames, className: Text_st_css_st(Text_st_css_classes.root, styleAttributes, className, maskingClassNames) }), styleDataAttributes), childrenWidows)));
+    return (external_React_default().createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => external_React_default().createElement(tagName, {
+        ref,
+        id,
+        ...textProps,
+        'data-hook': dataHook,
+        'data-mask': !!maskingClassNames,
+        className: Text_st_css_st(Text_st_css_classes.root, styleAttributes, className, maskingClassNames),
+        ...styleDataAttributes,
+    }, childrenWidows)));
 });
 RawText.displayName = 'Text';
 RawText.propTypes = {
@@ -35106,7 +35131,7 @@ var shallowequal_default = /*#__PURE__*/__webpack_require__.n(shallowequal);
-var shadows_st_css_namespace_ = "wds_1_95_1_shadows";
+var shadows_st_css_namespace_ = "wds_1_98_0_shadows";
 var shadows_st_css_style_ = classesRuntime.bind(null, shadows_st_css_namespace_);
 var shadows_st_css_cssStates = statesRuntime.bind(null, shadows_st_css_namespace_);
@@ -35114,7 +35139,7 @@ var shadows_st_css_style = (/* unused pure expression or super */ null && (shado
 var shadows_st_css_st = (/* unused pure expression or super */ null && (shadows_st_css_style_));
 var shadows_st_css_namespace = (/* unused pure expression or super */ null && (shadows_st_css_namespace_));
-var shadows_st_css_classes = {"root":"wds_1_95_1_shadows__root"};
+var shadows_st_css_classes = {"root":"wds_1_98_0_shadows__root"};
 var shadows_st_css_keyframes = {};
 var shadows_st_css_layers = {};
 var shadows_st_css_containers = {};
@@ -35132,7 +35157,7 @@ var shadows_st_css_vars = {"wsr-shadow10":"--wsr-shadow10","wsr-shadow20":"--wsr
-var easing_st_css_namespace_ = "wds_1_95_1_easing";
+var easing_st_css_namespace_ = "wds_1_98_0_easing";
 var easing_st_css_style_ = classesRuntime.bind(null, easing_st_css_namespace_);
 var easing_st_css_cssStates = statesRuntime.bind(null, easing_st_css_namespace_);
@@ -35140,7 +35165,7 @@ var easing_st_css_style = (/* unused pure expression or super */ null && (easing
 var easing_st_css_st = (/* unused pure expression or super */ null && (easing_st_css_style_));
 var easing_st_css_namespace = (/* unused pure expression or super */ null && (easing_st_css_namespace_));
-var easing_st_css_classes = {"root":"wds_1_95_1_easing__root"};
+var easing_st_css_classes = {"root":"wds_1_98_0_easing__root"};
 var easing_st_css_keyframes = {};
 var easing_st_css_layers = {};
 var easing_st_css_containers = {};
@@ -35161,7 +35186,7 @@ var easing_st_css_vars = {};
-var Popover_st_css_namespace_ = "wds_1_95_1_Popover";
+var Popover_st_css_namespace_ = "wds_1_98_0_Popover";
 var Popover_st_css_style_ = classesRuntime.bind(null, Popover_st_css_namespace_);
 var Popover_st_css_cssStates = statesRuntime.bind(null, Popover_st_css_namespace_);
@@ -35169,7 +35194,7 @@ var Popover_st_css_style = (/* unused pure expression or super */ null && (Popov
 var Popover_st_css_st = Popover_st_css_style_;
 var Popover_st_css_namespace = (/* unused pure expression or super */ null && (Popover_st_css_namespace_));
-var Popover_st_css_classes = {"root":"wds_1_95_1_Popover__root","content":"wds_1_95_1_Popover__content","arrow":"wds_1_95_1_Popover__arrow","element":"wds_1_95_1_Popover__element","animationEnter":"wds_1_95_1_Popover__animationEnter","animationEnterActive":"wds_1_95_1_Popover__animationEnterActive","animationExit":"wds_1_95_1_Popover__animationExit","animationExitActive":"wds_1_95_1_Popover__animationExitActive"};
+var Popover_st_css_classes = {"root":"wds_1_98_0_Popover__root","content":"wds_1_98_0_Popover__content","arrow":"wds_1_98_0_Popover__arrow","element":"wds_1_98_0_Popover__element","animationEnter":"wds_1_98_0_Popover__animationEnter","animationEnterActive":"wds_1_98_0_Popover__animationEnterActive","animationExit":"wds_1_98_0_Popover__animationExit","animationExitActive":"wds_1_98_0_Popover__animationExitActive"};
 var Popover_st_css_keyframes = {};
 var Popover_st_css_layers = {};
 var Popover_st_css_containers = {};
@@ -35189,7 +35214,7 @@ var Popover_st_css_vars = {"wds-popover-border":"--wds-popover-border","wds-shad
-var Tooltip_st_css_namespace_ = "wds_1_95_1_Tooltip";
+var Tooltip_st_css_namespace_ = "wds_1_98_0_Tooltip";
 var Tooltip_st_css_style_ = classesRuntime.bind(null, Tooltip_st_css_namespace_);
 var Tooltip_st_css_cssStates = statesRuntime.bind(null, Tooltip_st_css_namespace_);
@@ -35197,7 +35222,7 @@ var Tooltip_st_css_style = (/* unused pure expression or super */ null && (Toolt
 var Tooltip_st_css_st = Tooltip_st_css_style_;
 var Tooltip_st_css_namespace = (/* unused pure expression or super */ null && (Tooltip_st_css_namespace_));
-var Tooltip_st_css_classes = {"root":"wds_1_95_1_Tooltip__root","text-small-normal":"wds_1_95_1_StylableTypography__text-small-normal","text-tiny-thin":"wds_1_95_1_StylableTypography__text-tiny-thin","text":"wds_1_95_1_Tooltip__text"};
+var Tooltip_st_css_classes = {"root":"wds_1_98_0_Tooltip__root","text-small-normal":"wds_1_98_0_StylableTypography__text-small-normal","text-tiny-thin":"wds_1_98_0_StylableTypography__text-tiny-thin","text":"wds_1_98_0_Tooltip__text"};
 var Tooltip_st_css_keyframes = {};
 var Tooltip_st_css_layers = {};
 var Tooltip_st_css_containers = {};
@@ -35215,7 +35240,7 @@ var Tooltip_st_css_vars = {};
-var Ellipsis_st_css_namespace_ = "wds_1_95_1_Ellipsis";
+var Ellipsis_st_css_namespace_ = "wds_1_98_0_Ellipsis";
 var Ellipsis_st_css_style_ = classesRuntime.bind(null, Ellipsis_st_css_namespace_);
 var Ellipsis_st_css_cssStates = statesRuntime.bind(null, Ellipsis_st_css_namespace_);
@@ -35223,12 +35248,12 @@ var Ellipsis_st_css_style = (/* unused pure expression or super */ null && (Elli
 var Ellipsis_st_css_st = Ellipsis_st_css_style_;
 var Ellipsis_st_css_namespace = (/* unused pure expression or super */ null && (Ellipsis_st_css_namespace_));
-var Ellipsis_st_css_classes = {"root":"wds_1_95_1_Ellipsis__root","tooltip":"wds_1_95_1_Ellipsis__tooltip"};
+var Ellipsis_st_css_classes = {"root":"wds_1_98_0_Ellipsis__root","tooltip":"wds_1_98_0_Ellipsis__tooltip"};
 var Ellipsis_st_css_keyframes = {};
 var Ellipsis_st_css_layers = {};
 var Ellipsis_st_css_containers = {};
 var Ellipsis_st_css_stVars = {};
-var Ellipsis_st_css_vars = {"maxLines":"--wds_1_95_1_Ellipsis-maxLines"};
+var Ellipsis_st_css_vars = {"maxLines":"--wds_1_98_0_Ellipsis-maxLines"};
@@ -39242,7 +39267,7 @@ const calculateOffset = ({ moveBy, placement, }) => {
      *   will be the height.
      *
      */
-    if ((placement === null || placement === void 0 ? void 0 : placement.includes('right')) || (placement === null || placement === void 0 ? void 0 : placement.includes('left'))) {
+    if (placement?.includes('right') || placement?.includes('left')) {
         return `${moveBy ? moveBy.y : 0}px, ${moveBy ? moveBy.x : 0}px`;
     }
     return `${moveBy ? moveBy.x : 0}px, ${moveBy ? moveBy.y : 0}px`;
@@ -39277,12 +39302,15 @@ const createModifiers = ({ width, moveBy, appendTo, shouldAnimate, flip, fixed,
             fn: data => {
                 const { width: referenceWidth } = data.offsets.reference;
                 // @ts-ignore
-                data.styles = Object.assign(Object.assign({}, data.styles), resolveWidth({
-                    width,
-                    referenceWidth,
-                    minWidth,
-                    dynamicWidth,
-                }));
+                data.styles = {
+                    ...data.styles,
+                    ...resolveWidth({
+                        width,
+                        referenceWidth,
+                        minWidth,
+                        dynamicWidth,
+                    }),
+                };
                 return data;
             },
         };
@@ -39291,9 +39319,11 @@ const createModifiers = ({ width, moveBy, appendTo, shouldAnimate, flip, fixed,
         modifiers.computeStyle = { enabled: false };
     }
     if (appendTo) {
-        modifiers.preventOverflow = Object.assign(Object.assign({}, modifiers.preventOverflow), {
+        modifiers.preventOverflow = {
+            ...modifiers.preventOverflow,
             // @ts-ignore
-            boundariesElement: appendTo });
+            boundariesElement: appendTo,
+        };
     }
     return modifiers;
 };
@@ -39593,7 +39623,7 @@ class PopoverCore extends (external_React_default()).Component {
         };
         const popperWithArrow = (external_React_default().createElement(Popper_Popper, { modifiers: modifiers, placement: placement }, ({ ref, style: popperStyles, placement: popperPlacement, arrowProps, scheduleUpdate, }) => {
             this.popperScheduleUpdate = scheduleUpdate;
-            return (external_React_default().createElement("div", { "data-hook": "popover-content", className: Popover_st_css_st(this.clickOutsideClass, this.context.newBrandingClass), "data-content-element": this.contentHook, ref: ref, style: Object.assign(Object.assign({}, popperStyles), { zIndex }) },
+            return (external_React_default().createElement("div", { "data-hook": "popover-content", className: Popover_st_css_st(this.clickOutsideClass, this.context.newBrandingClass), "data-content-element": this.contentHook, ref: ref, style: { ...popperStyles, zIndex } },
                 showArrow &&
                     this.renderArrow(arrowProps, moveArrowTo, popperPlacement || placement, customArrow),
                 external_React_default().createElement("div", { id: id, role: role, tabIndex: tabIndex, ref: this.popoverContentRef, style: { maxWidth }, className: Popover_st_css_st(Popover_st_css_classes.content, {
@@ -39607,7 +39637,7 @@ class PopoverCore extends (external_React_default()).Component {
             return (external_React_default().createElement("div", { id: id, ref: mergeRefs(ref, this.popoverContentRef), role: role, tabIndex: tabIndex, className: Popover_st_css_st(Popover_st_css_classes.content, {
                     skin: theme,
                     placement: popperPlacement || placement,
-                }, this.clickOutsideClass, this.context.newBrandingClass), "data-hook": "popover-content", style: Object.assign(Object.assign({}, popperStyles), { zIndex, maxWidth }), "data-content-element": this.contentHook, onKeyDown: shown && onEscPress ? this._onKeyDown : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedBy }, childrenObject.Content));
+                }, this.clickOutsideClass, this.context.newBrandingClass), "data-hook": "popover-content", style: { ...popperStyles, zIndex, maxWidth }, "data-content-element": this.contentHook, onKeyDown: shown && onEscPress ? this._onKeyDown : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedBy }, childrenObject.Content));
         }));
         return this.wrapWithAnimations(showArrow ? popperWithArrow : popper);
     }
@@ -39642,12 +39672,15 @@ class PopoverCore extends (external_React_default()).Component {
             ref: arrowProps.ref,
             key: 'popover-arrow',
             'data-hook': 'popover-arrow',
-            style: Object.assign(Object.assign({}, arrowProps.style), getArrowShift(moveArrowTo, placement)),
+            style: {
+                ...arrowProps.style,
+                ...getArrowShift(moveArrowTo, placement),
+            },
         };
         if (customArrow) {
             return customArrow(placement, commonProps);
         }
-        return (external_React_default().createElement("div", Object.assign({}, commonProps, { className: Popover_st_css_st(Popover_st_css_classes.arrow, { skin: theme, placement }) })));
+        return (external_React_default().createElement("div", { ...commonProps, className: Popover_st_css_st(Popover_st_css_classes.arrow, { skin: theme, placement }) }));
     }
     componentDidMount() {
         const { shown, onTabOut } = this.props;
@@ -39707,12 +39740,12 @@ class PopoverCore extends (external_React_default()).Component {
         if (hideDelay) {
             this._hideTimeout = setTimeout(() => {
                 this.setState({ shown: false });
-                onHide === null || onHide === void 0 ? void 0 : onHide();
+                onHide?.();
             }, hideDelay);
         }
         else {
             this.setState({ shown: false });
-            onHide === null || onHide === void 0 ? void 0 : onHide();
+            onHide?.();
         }
     }
     showPopover() {
@@ -39731,12 +39764,12 @@ class PopoverCore extends (external_React_default()).Component {
         if (showDelay) {
             this._showTimeout = setTimeout(() => {
                 this.setState({ shown: true });
-                onShow === null || onShow === void 0 ? void 0 : onShow();
+                onShow?.();
             }, showDelay);
         }
         else {
             this.setState({ shown: true });
-            onShow === null || onShow === void 0 ? void 0 : onShow();
+            onShow?.();
         }
     }
     componentWillUnmount() {
@@ -39797,7 +39830,7 @@ class PopoverCore extends (external_React_default()).Component {
             external_React_default().createElement(ClickOutside, { rootRef: this.clickOutsideRef, onClickOutside: shown ? this._handleClickOutside : undefined, excludeClass: excludeClass
                     ? [this.clickOutsideClass, excludeClass]
                     : this.clickOutsideClass },
-                external_React_default().createElement("div", Object.assign({ ref: this.clickOutsideRef, style: style, "data-hook": dataHook, "data-content-hook": this.contentHook, className: Popover_st_css_st(Popover_st_css_classes.root, { fluid, skin }, className), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-zindex": zIndex }, filter_data_props_filterDataProps(this.props)),
+                external_React_default().createElement("div", { ref: this.clickOutsideRef, style: style, "data-hook": dataHook, "data-content-hook": this.contentHook, className: Popover_st_css_st(Popover_st_css_classes.root, { fluid, skin }, className), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-zindex": zIndex, ...filter_data_props_filterDataProps(this.props) },
                     external_React_default().createElement(Reference, { innerRef: r => (this.targetRef = r) }, ({ ref }) => (external_React_default().createElement("div", { ref: ref, className: Popover_st_css_classes.element, "data-hook": "popover-element", onClick: onClick, onKeyDown: onKeyDown }, childrenObject.Element))),
                     shouldRenderPopper && this.renderPopperContent(childrenObject)))));
     }
@@ -39840,7 +39873,6 @@ const constants_placements = [
 /**
  *  This has been added in order to fix jsdom not having requestAnimation frame
  *  installed. Jest by default has this polyfilled, but mocha fails on it.
@@ -39850,11 +39882,11 @@ const ANIMATION_ENTER = 150;
 const ANIMATION_EXIT = 100;
 class Popover extends external_React_.PureComponent {
     render() {
-        const _a = this.props, { animate } = _a, rest = __rest(_a, ["animate"]);
+        const { animate, ...rest } = this.props;
         const timeout = animate
             ? { enter: ANIMATION_ENTER, exit: ANIMATION_EXIT }
             : undefined;
-        return external_React_default().createElement(PopoverCore, Object.assign({ timeout: timeout }, rest));
+        return external_React_default().createElement(PopoverCore, { timeout: timeout, ...rest });
     }
 }
 Popover.displayName = 'Popover';
@@ -39988,26 +40020,21 @@ const SIZES = { small: 'small', medium: 'medium' };
-const Tooltip = (0,external_React_.forwardRef)((_a, ref) => {
-    var { onShow = () => ({}), onHide = () => ({}), size = 'medium', className, placement = 'top', exitDelay = 0, enterDelay = 0, moveArrowTo, appendTo = 'window', flip = true, fixed = false, maxWidth = 204, fluid, moveBy, disabled, children, zIndex = 6000, textAlign = 'start', content = '', inline, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledBy } = _a, rest = __rest(_a, ["onShow", "onHide", "size", "className", "placement", "exitDelay", "enterDelay", "moveArrowTo", "appendTo", "flip", "fixed", "maxWidth", "fluid", "moveBy", "disabled", "children", "zIndex", "textAlign", "content", "inline", 'aria-describedby', 'aria-labelledby']);
+const Tooltip = (0,external_React_.forwardRef)(({ onShow = () => ({}), onHide = () => ({}), size = 'medium', className, placement = 'top', exitDelay = 0, enterDelay = 0, moveArrowTo, appendTo = 'window', flip = true, fixed = false, maxWidth = 204, fluid, moveBy, disabled, children, zIndex = 6000, textAlign = 'start', content = '', inline, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledBy, ...rest }, ref) => {
     const [shown, setShown] = (0,external_React_.useState)(false);
     (0,external_React_.useImperativeHandle)(ref, () => ({ open, close }));
     const open = (0,external_React_.useCallback)(() => {
         setShown(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow();
+        onShow?.();
     }, [onShow]);
     const close = (0,external_React_.useCallback)(() => {
         setShown(false);
-        onHide === null || onHide === void 0 ? void 0 : onHide();
+        onHide?.();
     }, [onHide]);
-    const isDisabled = (0,external_React_.useMemo)(() => {
-        var _a;
-        return disabled === undefined
-            ? // @ts-expect-error
-                (children === null || children === void 0 ? void 0 : children.props) && ((_a = children === null || children === void 0 ? void 0 : children.props) === null || _a === void 0 ? void 0 : _a.disabled)
-            : disabled;
-    }, [children, disabled]);
+    const isDisabled = (0,external_React_.useMemo)(() => disabled === undefined
+        ? // @ts-expect-error
+            children?.props && children?.props?.disabled
+        : disabled, [children, disabled]);
     const onFocus = (0,external_React_.useCallback)((event, handlers) => {
         const focusableHOC = handlers && handlers.focus;
         const target = event.target;
@@ -40015,7 +40042,7 @@ const Tooltip = (0,external_React_.forwardRef)((_a, ref) => {
             if ( true &&
                 target instanceof Element &&
                 !target.matches(':focus-visible')) {
-                handlers === null || handlers === void 0 ? void 0 : handlers.blur();
+                handlers?.blur();
                 return;
             }
         }
@@ -40035,9 +40062,13 @@ const Tooltip = (0,external_React_.forwardRef)((_a, ref) => {
             return children;
         }
         if (external_React_default().isValidElement(children)) {
-            return external_React_default().cloneElement(children, Object.assign({ onFocus: isDisabled ? undefined : onFocus, onBlur: isDisabled ? undefined : onBlur }, (ariaLabelledBy
-                ? { 'aria-labelledby': ariaLabelledBy }
-                : { 'aria-describedby': ariaDescribedBy })));
+            return external_React_default().cloneElement(children, {
+                onFocus: isDisabled ? undefined : onFocus,
+                onBlur: isDisabled ? undefined : onBlur,
+                ...(ariaLabelledBy
+                    ? { 'aria-labelledby': ariaLabelledBy }
+                    : { 'aria-describedby': ariaDescribedBy }),
+            });
         }
         if (typeof children === 'function') {
             return children({
@@ -40061,7 +40092,7 @@ const Tooltip = (0,external_React_.forwardRef)((_a, ref) => {
         // @ts-ignore
         external_React_default().createElement(Text_RawText, { dataHook: constants_dataHooks.tooltipText, size: textSize, weight: textWeight, light: true, className: Tooltip_st_css_classes.text }, content)) : (content)));
     }, [content, textAlign, size]);
-    return (external_React_default().createElement(Popover_Popover, Object.assign({ role: "tooltip", showArrow: size !== 'small', className: Tooltip_st_css_st(Tooltip_st_css_classes.root, { size, inline }, className), placement: placement, shown: isDisabled ? false : shown, onMouseEnter: isDisabled ? undefined : open, onMouseLeave: close, onClickOutside: close, "data-size": size, hideDelay: exitDelay, showDelay: enterDelay, moveBy: moveBy, moveArrowTo: moveArrowTo, appendTo: appendTo, id: ariaLabelledBy || ariaDescribedBy, flip: flip, fixed: fixed, maxWidth: maxWidth, fluid: fluid, disableClickOutsideWhenClosed: true, zIndex: zIndex }, rest, { theme: "dark", timeout: TIMEOUT }),
+    return (external_React_default().createElement(Popover_Popover, { role: "tooltip", showArrow: size !== 'small', className: Tooltip_st_css_st(Tooltip_st_css_classes.root, { size, inline }, className), placement: placement, shown: isDisabled ? false : shown, onMouseEnter: isDisabled ? undefined : open, onMouseLeave: close, onClickOutside: close, "data-size": size, hideDelay: exitDelay, showDelay: enterDelay, moveBy: moveBy, moveArrowTo: moveArrowTo, appendTo: appendTo, id: ariaLabelledBy || ariaDescribedBy, flip: flip, fixed: fixed, maxWidth: maxWidth, fluid: fluid, disableClickOutsideWhenClosed: true, zIndex: zIndex, ...rest, theme: "dark", timeout: TIMEOUT },
         external_React_default().createElement(Popover_Popover.Element, null, triggerElement),
         external_React_default().createElement(Popover_Popover.Content, null, contentElement)));
 });
@@ -40212,7 +40243,7 @@ const TooltipCommonProps = {
-var TextComponent_st_css_namespace_ = "wds_1_95_1_TextComponent";
+var TextComponent_st_css_namespace_ = "wds_1_98_0_TextComponent";
 var TextComponent_st_css_style_ = classesRuntime.bind(null, TextComponent_st_css_namespace_);
 var TextComponent_st_css_cssStates = statesRuntime.bind(null, TextComponent_st_css_namespace_);
@@ -40220,12 +40251,12 @@ var TextComponent_st_css_style = (/* unused pure expression or super */ null &&
 var TextComponent_st_css_st = TextComponent_st_css_style_;
 var TextComponent_st_css_namespace = (/* unused pure expression or super */ null && (TextComponent_st_css_namespace_));
-var TextComponent_st_css_classes = {"root":"wds_1_95_1_TextComponent__root","text":"wds_1_95_1_TextComponent__text"};
+var TextComponent_st_css_classes = {"root":"wds_1_98_0_TextComponent__root","text":"wds_1_98_0_TextComponent__text"};
 var TextComponent_st_css_keyframes = {};
 var TextComponent_st_css_layers = {};
 var TextComponent_st_css_containers = {};
 var TextComponent_st_css_stVars = {};
-var TextComponent_st_css_vars = {"maxLines":"--wds_1_95_1_TextComponent-maxLines"};
+var TextComponent_st_css_vars = {"maxLines":"--wds_1_98_0_TextComponent-maxLines"};
@@ -40317,10 +40348,14 @@ class Ellipsis extends (external_React_default()).PureComponent {
             const { isActive, textContent } = this.state;
             const newTextContent = this._getTextContent();
             const shouldBeActive = this._checkShouldBeActive();
-            const newState = Object.assign(Object.assign({ textRendered: true }, (newTextContent !== textContent
-                ? { textContent: newTextContent }
-                : {})), (shouldBeActive !== isActive ? { isActive: shouldBeActive } : {}));
-            this.setState(oldState => (Object.assign(Object.assign({}, oldState), newState)));
+            const newState = {
+                textRendered: true,
+                ...(newTextContent !== textContent
+                    ? { textContent: newTextContent }
+                    : {}),
+                ...(shouldBeActive !== isActive ? { isActive: shouldBeActive } : {}),
+            };
+            this.setState(oldState => ({ ...oldState, ...newState }));
         };
         /**
          * An ellipsis is considered active when either the text's scroll width/height is wider than it's container or itself.
@@ -40339,20 +40374,18 @@ class Ellipsis extends (external_React_default()).PureComponent {
         };
         this._checkShouldBeActive = () => this._isOverflowingHorizontally() || this._isOverflowingVertically();
         this._isOverflowingHorizontally = () => {
-            var _a;
             const { current: textElement } = this.ref;
             const { ellipsis } = this.props;
-            const parentWidth = (_a = textElement === null || textElement === void 0 ? void 0 : textElement.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+            const parentWidth = textElement?.parentElement?.offsetWidth;
             return !!(ellipsis &&
                 textElement &&
                 ((parentWidth && textElement.scrollWidth - parentWidth > 1) ||
                     textElement.offsetWidth < textElement.scrollWidth));
         };
         this._isOverflowingVertically = () => {
-            var _a;
             const { current: textElement } = this.ref;
             const { ellipsis, maxLines } = this.props;
-            const parentHeight = (_a = textElement === null || textElement === void 0 ? void 0 : textElement.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+            const parentHeight = textElement?.parentElement?.offsetHeight;
             return !!(maxLines &&
                 maxLines > 1 &&
                 ellipsis &&
@@ -40425,17 +40458,20 @@ class Ellipsis extends (external_React_default()).PureComponent {
         window.removeEventListener('resize', this._debouncedUpdate);
     }
 }
-Ellipsis.propTypes = Object.assign({
+Ellipsis.propTypes = {
     /** When true, text that is longer than it's container will be truncated to a single line followed by ellipsis. Otherwise the text will break into several lines. */
-    ellipsis: (prop_types_default()).bool,
+    ellipsis: (prop_types_default()).bool,
     /** True by default, set it to false in order to show ellipsis without a tooltip. */
-    showTooltip: (prop_types_default()).bool,
+    showTooltip: (prop_types_default()).bool,
     /** A className to be applied to the Ellipsis wrapper. */
-    wrapperClassName: (prop_types_default()).string,
+    wrapperClassName: (prop_types_default()).string,
     /** The render function, use it to render a text you want to truncate with ellipsis. */
-    render: (prop_types_default()).func,
+    render: (prop_types_default()).func,
     /** maxLines truncates text at a specific number of lines. */
-    maxLines: (prop_types_default()).number }, TooltipCommonProps);
+    maxLines: (prop_types_default()).number,
+    // Tooltip props
+    ...TooltipCommonProps,
+};
 Ellipsis.defaultProps = {
     ellipsis: false,
     appendTo: 'window',
@@ -40450,13 +40486,11 @@ Ellipsis.defaultProps = {
 /* harmony default export */ const Ellipsis_Ellipsis = (Ellipsis);
 //# sourceMappingURL=Ellipsis.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/common/Ellipsis/EllipsisUtils.js
 /**
  * A utility function that extracts Ellipsis relevant props and wrapped Component relevant props
  * @returns {{ellipsisProps: *, componentProps: *}}
  */
-const extractEllipsisProps = (_a) => {
-    var { appendTo, disabled, ellipsis, enterDelay, exitDelay, fixed, flip, maxWidth, moveArrowTo, onHide, onShow, placement, showTooltip, textAlign, zIndex, maxLines } = _a, componentProps = __rest(_a, ["appendTo", "disabled", "ellipsis", "enterDelay", "exitDelay", "fixed", "flip", "maxWidth", "moveArrowTo", "onHide", "onShow", "placement", "showTooltip", "textAlign", "zIndex", "maxLines"]);
+const extractEllipsisProps = ({ appendTo, disabled, ellipsis, enterDelay, exitDelay, fixed, flip, maxWidth, moveArrowTo, onHide, onShow, placement, showTooltip, textAlign, zIndex, maxLines, ...componentProps }) => {
     return {
         ellipsisProps: {
             appendTo,
@@ -40487,10 +40521,11 @@ const extractEllipsisProps = (_a) => {
-const TextWithEllipsis = (_a) => {
-    var { ellipsis = false, appendTo = Ellipsis_Ellipsis.defaultProps.appendTo, flip = Ellipsis_Ellipsis.defaultProps.flip, fixed = Ellipsis_Ellipsis.defaultProps.fixed, placement = Ellipsis_Ellipsis.defaultProps.placement, zIndex = Ellipsis_Ellipsis.defaultProps.zIndex, enterDelay = Ellipsis_Ellipsis.defaultProps.enterDelay, exitDelay = Ellipsis_Ellipsis.defaultProps.exitDelay, showTooltip = Ellipsis_Ellipsis.defaultProps.showTooltip, size = RawTextDefaultProps.size, secondary = RawTextDefaultProps.secondary, skin = RawTextDefaultProps.skin, light = RawTextDefaultProps.light, weight = RawTextDefaultProps.weight, tagName = RawTextDefaultProps.tagName, listStyle = RawTextDefaultProps.listStyle, widows = RawTextDefaultProps.widows, id } = _a, propsWithNoDefaults = __rest(_a, ["ellipsis", "appendTo", "flip", "fixed", "placement", "zIndex", "enterDelay", "exitDelay", "showTooltip", "size", "secondary", "skin", "light", "weight", "tagName", "listStyle", "widows", "id"]);
-    const _b = Object.assign(Object.assign(Object.assign(Object.assign({}, RawTextDefaultProps), Ellipsis_Ellipsis.defaultProps), { ellipsis,
+const TextWithEllipsis = ({ ellipsis = false, appendTo = Ellipsis_Ellipsis.defaultProps.appendTo, flip = Ellipsis_Ellipsis.defaultProps.flip, fixed = Ellipsis_Ellipsis.defaultProps.fixed, placement = Ellipsis_Ellipsis.defaultProps.placement, zIndex = Ellipsis_Ellipsis.defaultProps.zIndex, enterDelay = Ellipsis_Ellipsis.defaultProps.enterDelay, exitDelay = Ellipsis_Ellipsis.defaultProps.exitDelay, showTooltip = Ellipsis_Ellipsis.defaultProps.showTooltip, size = RawTextDefaultProps.size, secondary = RawTextDefaultProps.secondary, skin = RawTextDefaultProps.skin, light = RawTextDefaultProps.light, weight = RawTextDefaultProps.weight, tagName = RawTextDefaultProps.tagName, listStyle = RawTextDefaultProps.listStyle, widows = RawTextDefaultProps.widows, id, ...propsWithNoDefaults }) => {
+    const { className, tooltipProps, ...props } = {
+        ...RawTextDefaultProps,
+        ...Ellipsis_Ellipsis.defaultProps,
+        ellipsis,
         appendTo,
         flip,
         fixed,
@@ -40507,13 +40542,15 @@ const TextWithEllipsis = (_a) => {
         tagName,
         listStyle,
         id,
-        widows }), propsWithNoDefaults), { className, tooltipProps } = _b, props = __rest(_b, ["className", "tooltipProps"]);
+        widows,
+        ...propsWithNoDefaults,
+    };
     const { ellipsisProps, componentProps } = extractEllipsisProps(props);
-    return (external_React_default().createElement(Ellipsis_Ellipsis, Object.assign({}, ellipsisProps, tooltipProps, { wrapperClassName: Text_st_css_st(Text_st_css_classes.root, {
+    return (external_React_default().createElement(Ellipsis_Ellipsis, { ...ellipsisProps, ...tooltipProps, wrapperClassName: Text_st_css_st(Text_st_css_classes.root, {
             size: props.size,
             weight: props.weight,
             listStyle: props.listStyle,
-        }), render: ({ ref, ellipsisClasses, ellipsisInlineStyle }) => (external_React_default().createElement(Text_RawText, Object.assign({}, componentProps, { ref: ref, className: ellipsisClasses(className), style: ellipsisInlineStyle }))) })));
+        }), render: ({ ref, ellipsisClasses, ellipsisInlineStyle }) => (external_React_default().createElement(Text_RawText, { ...componentProps, ref: ref, className: ellipsisClasses(className), style: ellipsisInlineStyle })) }));
 };
 TextWithEllipsis.displayName = 'Text';
 TextWithEllipsis.propTypes = {
@@ -40601,7 +40638,10 @@ TextWithEllipsis.propTypes = {
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/utils/generateDataAttr.js
 const generateDataAttr = (props, filter) => Object.entries(props)
     .filter(([key]) => filter && filter.includes(key))
-    .reduce((output, [key, value]) => (Object.assign(Object.assign({}, output), { [`data-${key.toLowerCase()}`]: value })), {});
+    .reduce((output, [key, value]) => ({
+    ...output,
+    [`data-${key.toLowerCase()}`]: value,
+}), {});
 //# sourceMappingURL=generateDataAttr.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/common/Focusable/Focusable.st.css.js
@@ -40610,7 +40650,7 @@ const generateDataAttr = (props, filter) => Object.entries(props)
-var Focusable_st_css_namespace_ = "wds_1_95_1_Focusable";
+var Focusable_st_css_namespace_ = "wds_1_98_0_Focusable";
 var Focusable_st_css_style_ = classesRuntime.bind(null, Focusable_st_css_namespace_);
 var Focusable_st_css_cssStates = statesRuntime.bind(null, Focusable_st_css_namespace_);
@@ -40618,7 +40658,7 @@ var Focusable_st_css_style = (/* unused pure expression or super */ null && (Foc
 var Focusable_st_css_st = Focusable_st_css_style_;
 var Focusable_st_css_namespace = (/* unused pure expression or super */ null && (Focusable_st_css_namespace_));
-var Focusable_st_css_classes = {"root":"wds_1_95_1_Focusable__root","focus-box":"wds_1_95_1_Focusable__focus-box","focus-box-error":"wds_1_95_1_Focusable__focus-box-error"};
+var Focusable_st_css_classes = {"root":"wds_1_98_0_Focusable__root","focus-box":"wds_1_98_0_Focusable__focus-box","focus-box-error":"wds_1_98_0_Focusable__focus-box-error"};
 var Focusable_st_css_keyframes = {};
 var Focusable_st_css_layers = {};
 var Focusable_st_css_containers = {};
@@ -40636,7 +40676,7 @@ var Focusable_st_css_vars = {};
-var ButtonCore_st_css_namespace_ = "wds_1_95_1_ButtonCore";
+var ButtonCore_st_css_namespace_ = "wds_1_98_0_ButtonCore";
 var ButtonCore_st_css_style_ = classesRuntime.bind(null, ButtonCore_st_css_namespace_);
 var ButtonCore_st_css_cssStates = statesRuntime.bind(null, ButtonCore_st_css_namespace_);
@@ -40644,7 +40684,7 @@ var ButtonCore_st_css_style = (/* unused pure expression or super */ null && (Bu
 var ButtonCore_st_css_st = ButtonCore_st_css_style_;
 var ButtonCore_st_css_namespace = (/* unused pure expression or super */ null && (ButtonCore_st_css_namespace_));
-var ButtonCore_st_css_classes = {"root":"wds_1_95_1_ButtonCore__root","content":"wds_1_95_1_ButtonCore__content","prefix":"wds_1_95_1_ButtonCore__prefix","suffix":"wds_1_95_1_ButtonCore__suffix"};
+var ButtonCore_st_css_classes = {"root":"wds_1_98_0_ButtonCore__root","content":"wds_1_98_0_ButtonCore__content","prefix":"wds_1_98_0_ButtonCore__prefix","suffix":"wds_1_98_0_ButtonCore__suffix"};
 var ButtonCore_st_css_keyframes = {};
 var ButtonCore_st_css_layers = {};
 var ButtonCore_st_css_containers = {};
@@ -40666,7 +40706,7 @@ var ButtonCore_st_css_vars = {};
-var TextButton_st_css_namespace_ = "wds_1_95_1_TextButton";
+var TextButton_st_css_namespace_ = "wds_1_98_0_TextButton";
 var TextButton_st_css_style_ = classesRuntime.bind(null, TextButton_st_css_namespace_);
 var TextButton_st_css_cssStates = statesRuntime.bind(null, TextButton_st_css_namespace_);
@@ -40674,7 +40714,7 @@ var TextButton_st_css_style = (/* unused pure expression or super */ null && (Te
 var TextButton_st_css_st = TextButton_st_css_style_;
 var TextButton_st_css_namespace = (/* unused pure expression or super */ null && (TextButton_st_css_namespace_));
-var TextButton_st_css_classes = {"root":"wds_1_95_1_TextButton__root","text-tiny-thin":"wds_1_95_1_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_95_1_StylableTypography__text-tiny-normal","text-small-thin":"wds_1_95_1_StylableTypography__text-small-thin","text-small-normal":"wds_1_95_1_StylableTypography__text-small-normal","text-medium-thin":"wds_1_95_1_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal"};
+var TextButton_st_css_classes = {"root":"wds_1_98_0_TextButton__root","text-tiny-thin":"wds_1_98_0_StylableTypography__text-tiny-thin","text-tiny-normal":"wds_1_98_0_StylableTypography__text-tiny-normal","text-small-thin":"wds_1_98_0_StylableTypography__text-small-thin","text-small-normal":"wds_1_98_0_StylableTypography__text-small-normal","text-medium-thin":"wds_1_98_0_StylableTypography__text-medium-thin","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal"};
 var TextButton_st_css_keyframes = {};
 var TextButton_st_css_layers = {};
 var TextButton_st_css_containers = {};
@@ -40772,8 +40812,7 @@ function Focusable_withFocusable(Component, options = {}) {
                 focusVisible: false,
             };
             this.focus = () => {
-                var _a;
-                if ((_a = this.wrappedComponentRef) === null || _a === void 0 ? void 0 : _a.focus) {
+                if (this.wrappedComponentRef?.focus) {
                     this.wrappedComponentRef.focus();
                 }
             };
@@ -40829,10 +40868,10 @@ function Focusable_withFocusable(Component, options = {}) {
                 : (ref) => {
                     this.wrappedComponentRef = ref;
                 };
-            return (external_React_default().createElement(Component, Object.assign({}, this.props, { ref: reference, focusableOnFocus: this.onFocus, focusableOnBlur: this.onBlur, className: Focusable_st_css_st(Focusable_st_css_classes.root, {
+            return (external_React_default().createElement(Component, { ...this.props, ref: reference, focusableOnFocus: this.onFocus, focusableOnBlur: this.onBlur, className: Focusable_st_css_st(Focusable_st_css_classes.root, {
                     focus: this.state.focus,
                     'focus-visible': this.state.focusVisible,
-                }, this.props.className) })));
+                }, this.props.className) }));
         }
     }
     Focusable.displayName = hocUtils_getDisplayName(Component);
@@ -40864,7 +40903,6 @@ const ButtonCore_utils_isStatelessComponent = (Component) => !(Component.prototy
 const ButtonCore_addAffix = (Affix, styleClass, dataHook) => Affix &&
     external_React_.cloneElement(Affix, {
         className: classnames_default()(ButtonCore_st_css_classes[styleClass], Affix.props.className),
@@ -40884,7 +40922,7 @@ class ButtonCore extends external_React_.Component {
         }
     }
     render() {
-        const _a = this.props, { as: Component, suffixIcon, prefixIcon, children, disabled, focusableOnFocus, focusableOnBlur, href, contentClassName, contentRef } = _a, rest = __rest(_a, ["as", "suffixIcon", "prefixIcon", "children", "disabled", "focusableOnFocus", "focusableOnBlur", "href", "contentClassName", "contentRef"]);
+        const { as: Component, suffixIcon, prefixIcon, children, disabled, focusableOnFocus, focusableOnBlur, href, contentClassName, contentRef, ...rest } = this.props;
         const htmlTabIndex = disabled ? -1 : rest.tabIndex || 0;
         const htmlHref = disabled ? undefined : href;
         const reference = ButtonCore_utils_isStatelessComponent(Component) && typeof Component !== 'string'
@@ -40893,7 +40931,7 @@ class ButtonCore extends external_React_.Component {
         if (!Component) {
             return null;
         }
-        return (external_React_.createElement(Component, Object.assign({ "data-hook": ButtonCore_constants_dataHooks.button }, rest, { onFocus: focusableOnFocus, onBlur: focusableOnBlur, disabled: href ? undefined : disabled, href: htmlHref, ref: reference, tabIndex: htmlTabIndex, "aria-disabled": disabled, className: ButtonCore_st_css_st(ButtonCore_st_css_classes.root, { disabled }, this.props.className) }),
+        return (external_React_.createElement(Component, { "data-hook": ButtonCore_constants_dataHooks.button, ...rest, onFocus: focusableOnFocus, onBlur: focusableOnBlur, disabled: href ? undefined : disabled, href: htmlHref, ref: reference, tabIndex: htmlTabIndex, "aria-disabled": disabled, className: ButtonCore_st_css_st(ButtonCore_st_css_classes.root, { disabled }, this.props.className) },
             prefixIcon && ButtonCore_addAffix(prefixIcon, 'prefix', ButtonCore_constants_dataHooks.prefixIcon),
             external_React_.createElement("span", { className: ButtonCore_st_css_st(ButtonCore_st_css_classes.content, contentClassName), ref: contentRef }, children),
             suffixIcon && ButtonCore_addAffix(suffixIcon, 'suffix', ButtonCore_constants_dataHooks.suffixIcon)));
@@ -40914,7 +40952,6 @@ ButtonCore.displayName = 'ButtonCore';
 class TextButton_TextButton extends external_React_.PureComponent {
     constructor(props) {
         super(props);
@@ -40927,13 +40964,13 @@ class TextButton_TextButton extends external_React_.PureComponent {
         this.button = external_React_default().createRef();
     }
     render() {
-        const _a = this.props, { skin, underline, weight, size, children, className, dataHook, fluid, ellipsis, showTooltip, tooltipProps, ariaLabel, ariaLabelledBy, ariaHaspopup, ariaExpanded } = _a, rest = __rest(_a, ["skin", "underline", "weight", "size", "children", "className", "dataHook", "fluid", "ellipsis", "showTooltip", "tooltipProps", "ariaLabel", "ariaLabelledBy", "ariaHaspopup", "ariaExpanded"]);
-        return (external_React_default().createElement(Ellipsis_Ellipsis, Object.assign({ ellipsis: ellipsis, showTooltip: showTooltip }, tooltipProps, { render: ({ ref, ellipsisClasses }) => (external_React_default().createElement(ButtonCore_ButtonCore, Object.assign({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded }, rest, generateDataAttr(this.props, [
-                'skin',
-                'size',
-                'weight',
-                'underline',
-            ]), { ref: this.button, className: TextButton_st_css_st(TextButton_st_css_classes.root, { skin, underline, weight, size, fluid, ellipsis }, className), "data-hook": dataHook, contentClassName: ellipsisClasses(), contentRef: ref }), children)) })));
+        const { skin, underline, weight, size, children, className, dataHook, fluid, ellipsis, showTooltip, tooltipProps, ariaLabel, ariaLabelledBy, ariaHaspopup, ariaExpanded, ...rest } = this.props;
+        return (external_React_default().createElement(Ellipsis_Ellipsis, { ellipsis: ellipsis, showTooltip: showTooltip, ...tooltipProps, render: ({ ref, ellipsisClasses }) => (external_React_default().createElement(ButtonCore_ButtonCore, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, ...rest, ...generateDataAttr(this.props, [
+                    'skin',
+                    'size',
+                    'weight',
+                    'underline',
+                ]), ref: this.button, className: TextButton_st_css_st(TextButton_st_css_classes.root, { skin, underline, weight, size, fluid, ellipsis }, className), "data-hook": dataHook, contentClassName: ellipsisClasses(), contentRef: ref }, children)) }));
     }
 }
 TextButton_TextButton.displayName = 'TextButton';
@@ -41015,7 +41052,7 @@ TextButton_TextButton.defaultProps = {
-var Button_st_css_namespace_ = "wds_1_95_1_Button";
+var Button_st_css_namespace_ = "wds_1_98_0_Button";
 var Button_st_css_style_ = classesRuntime.bind(null, Button_st_css_namespace_);
 var Button_st_css_cssStates = statesRuntime.bind(null, Button_st_css_namespace_);
@@ -41023,7 +41060,7 @@ var Button_st_css_style = (/* unused pure expression or super */ null && (Button
 var Button_st_css_st = Button_st_css_style_;
 var Button_st_css_namespace = (/* unused pure expression or super */ null && (Button_st_css_namespace_));
-var Button_st_css_classes = {"root":"wds_1_95_1_Button__root","text-tiny-normal":"wds_1_95_1_StylableTypography__text-tiny-normal","text-small-normal":"wds_1_95_1_StylableTypography__text-small-normal","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal","text-tiny-bold":"wds_1_95_1_StylableTypography__text-tiny-bold"};
+var Button_st_css_classes = {"root":"wds_1_98_0_Button__root","text-tiny-normal":"wds_1_98_0_StylableTypography__text-tiny-normal","text-small-normal":"wds_1_98_0_StylableTypography__text-small-normal","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal","text-tiny-bold":"wds_1_98_0_StylableTypography__text-tiny-bold"};
 var Button_st_css_keyframes = {};
 var Button_st_css_layers = {};
 var Button_st_css_containers = {};
@@ -41069,7 +41106,6 @@ if (false) {}
 class Button_Button extends external_React_.PureComponent {
     constructor(props) {
         super(props);
@@ -41087,15 +41123,18 @@ class Button_Button extends external_React_.PureComponent {
     render() {
         const { button: buttonPropsDefaults } = this
             .context;
-        const _a = this.props, { skin = 'standard', priority = 'primary', size = buttonPropsDefaults.size, className, fullWidth, children, dataHook, ellipsis, showTooltip, tooltipProps = {} } = _a, rest = __rest(_a, ["skin", "priority", "size", "className", "fullWidth", "children", "dataHook", "ellipsis", "showTooltip", "tooltipProps"]);
-        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(Ellipsis_Ellipsis, Object.assign({ ellipsis: ellipsis, showTooltip: showTooltip }, tooltipProps, { render: ({ ref, ellipsisClasses }) => (external_React_default().createElement(ButtonCore_ButtonCore, Object.assign({}, rest, generateDataAttr(Object.assign(Object.assign({}, this.props), { size }), ['skin', 'size', 'priority']), { ref: this.button, className: Button_st_css_st(Button_st_css_classes.root, {
+        const { skin = 'standard', priority = 'primary', size = buttonPropsDefaults.size, className, fullWidth, children, dataHook, ellipsis, showTooltip, tooltipProps = {}, ...rest } = this.props;
+        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(Ellipsis_Ellipsis, { ellipsis: ellipsis, showTooltip: showTooltip, ...tooltipProps, render: ({ ref, ellipsisClasses }) => (external_React_default().createElement(ButtonCore_ButtonCore, { ...rest, ...generateDataAttr({
+                    ...this.props,
+                    size,
+                }, ['skin', 'size', 'priority']), ref: this.button, className: Button_st_css_st(Button_st_css_classes.root, {
                     fluid: !!fullWidth,
                     skin,
                     priority,
                     size,
                     ellipsis: !!ellipsis,
                     newColorsBranding,
-                }, className), "data-hook": dataHook, contentClassName: ellipsisClasses(), contentRef: ref }), children)) })))));
+                }, className), "data-hook": dataHook, contentClassName: ellipsisClasses(), contentRef: ref }, children)) }))));
     }
 }
 Button_Button.contextType = WixStyleReactDefaultsOverrideContext;
@@ -41140,7 +41179,6 @@ const ThemeContext_ThemeContext = external_React_default().createContext();
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/ThemeProvider/ThemeProviderConsumerBackwardCompatible.js
 /**
  * This is a utility for every component that uses an icon to declare its defaults but also replace it with the theme context
  * Usage Example:
@@ -41160,14 +41198,11 @@ const ThemeContext_ThemeContext = external_React_default().createContext();
  * Note that this implementation is temporary and needed only to preserve backwards compatability for components with built-in icons (like CloseButton).
  * It will be removed in the future once a <ThemeProvider/> will be required on the top of any theme, including the default one.
  * This will assist in creating smaller bundle size for themes that would override the default icons. */
-const ThemeProviderConsumerBackwardCompatible = (_a) => {
-    var { defaultIcons = {} } = _a, rest = __rest(_a, ["defaultIcons"]);
-    return (external_React_default().createElement(ThemeContext_ThemeContext.Consumer, null, context => (external_React_default().createElement(ThemeContext_ThemeContext.Provider, { value: {
-            icons: Object.assign(Object.assign({}, defaultIcons), (context && context.icons)),
-            className: context && context.className,
-        } },
-        external_React_default().createElement(ThemeContext_ThemeContext.Consumer, Object.assign({}, rest))))));
-};
+const ThemeProviderConsumerBackwardCompatible = ({ defaultIcons = {}, ...rest }) => (external_React_default().createElement(ThemeContext_ThemeContext.Consumer, null, context => (external_React_default().createElement(ThemeContext_ThemeContext.Provider, { value: {
+        icons: { ...defaultIcons, ...(context && context.icons) },
+        className: context && context.className,
+    } },
+    external_React_default().createElement(ThemeContext_ThemeContext.Consumer, { ...rest })))));
 //# sourceMappingURL=ThemeProviderConsumerBackwardCompatible.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/wix-ui-icons-common/dist/esm/system/dist/components/Close.js
 const o=({size:e,...s})=>external_React_.createElement("svg",{viewBox:"0 0 6 6",fill:"currentColor",width:e||"6",height:e||"6",...s},external_React_.createElement("path",{d:"M5.2 0 3 2.2.8 0 0 .8 2.2 3 0 5.3.8 6 3 3.8 5.2 6 6 5.3 3.8 3 6 .8z"}));o.displayName="Close";var Close_r=o;
@@ -41201,7 +41236,7 @@ const constants_SIZES = {
-var CloseButton_st_css_namespace_ = "wds_1_95_1_CloseButton";
+var CloseButton_st_css_namespace_ = "wds_1_98_0_CloseButton";
 var CloseButton_st_css_style_ = classesRuntime.bind(null, CloseButton_st_css_namespace_);
 var CloseButton_st_css_cssStates = statesRuntime.bind(null, CloseButton_st_css_namespace_);
@@ -41209,7 +41244,7 @@ var CloseButton_st_css_style = (/* unused pure expression or super */ null && (C
 var CloseButton_st_css_st = CloseButton_st_css_style_;
 var CloseButton_st_css_namespace = (/* unused pure expression or super */ null && (CloseButton_st_css_namespace_));
-var CloseButton_st_css_classes = {"root":"wds_1_95_1_CloseButton__root"};
+var CloseButton_st_css_classes = {"root":"wds_1_98_0_CloseButton__root"};
 var CloseButton_st_css_keyframes = {};
 var CloseButton_st_css_layers = {};
 var CloseButton_st_css_containers = {};
@@ -41229,7 +41264,6 @@ var CloseButton_st_css_vars = {"wds-border-radius-full":"--wds-border-radius-ful
 const childSize = '18px';
 class CloseButton extends external_React_.PureComponent {
     _renderCloseIcon(Icon, size) {
@@ -41247,8 +41281,8 @@ class CloseButton extends external_React_.PureComponent {
         return CloseIcon;
     }
     render() {
-        const _a = this.props, { skin, size, className, dataHook, children } = _a, rest = __rest(_a, ["skin", "size", "className", "dataHook", "children"]);
-        return (external_React_default().createElement(ButtonCore_ButtonCore, Object.assign({}, rest, { className: CloseButton_st_css_st(CloseButton_st_css_classes.root, { skin, size }, className) }, generateDataAttr(this.props, ['skin', 'size']), { "data-hook": dataHook }), children ? (external_React_default().cloneElement(children, {
+        const { skin, size, className, dataHook, children, ...rest } = this.props;
+        return (external_React_default().createElement(ButtonCore_ButtonCore, { ...rest, className: CloseButton_st_css_st(CloseButton_st_css_classes.root, { skin, size }, className), ...generateDataAttr(this.props, ['skin', 'size']), "data-hook": dataHook }, children ? (external_React_default().cloneElement(children, {
             size: childSize,
             width: childSize,
             height: childSize,
@@ -41323,7 +41357,7 @@ const FloatingNotification_constants_dataHooks = {
-var FloatingNotification_st_css_namespace_ = "wds_1_95_1_FloatingNotification";
+var FloatingNotification_st_css_namespace_ = "wds_1_98_0_FloatingNotification";
 var FloatingNotification_st_css_style_ = classesRuntime.bind(null, FloatingNotification_st_css_namespace_);
 var FloatingNotification_st_css_cssStates = statesRuntime.bind(null, FloatingNotification_st_css_namespace_);
@@ -41331,7 +41365,7 @@ var FloatingNotification_st_css_style = (/* unused pure expression or super */ n
 var FloatingNotification_st_css_st = FloatingNotification_st_css_style_;
 var FloatingNotification_st_css_namespace = (/* unused pure expression or super */ null && (FloatingNotification_st_css_namespace_));
-var FloatingNotification_st_css_classes = {"root":"wds_1_95_1_FloatingNotification__root","icon":"wds_1_95_1_FloatingNotification__icon","text":"wds_1_95_1_FloatingNotification__text","textButton":"wds_1_95_1_FloatingNotification__textButton","button":"wds_1_95_1_FloatingNotification__button","gap":"wds_1_95_1_FloatingNotification__gap","close":"wds_1_95_1_FloatingNotification__close"};
+var FloatingNotification_st_css_classes = {"root":"wds_1_98_0_FloatingNotification__root","icon":"wds_1_98_0_FloatingNotification__icon","text":"wds_1_98_0_FloatingNotification__text","textButton":"wds_1_98_0_FloatingNotification__textButton","button":"wds_1_98_0_FloatingNotification__button","gap":"wds_1_98_0_FloatingNotification__gap","close":"wds_1_98_0_FloatingNotification__close"};
 var FloatingNotification_st_css_keyframes = {};
 var FloatingNotification_st_css_layers = {};
 var FloatingNotification_st_css_containers = {};
@@ -41353,7 +41387,6 @@ var FloatingNotification_st_css_vars = {};
 const buttonPropTypes = prop_types_default().shape({
     label: (prop_types_default()).node,
     as: (prop_types_default()).node,
@@ -41391,13 +41424,13 @@ class FloatingNotification extends (external_React_default()).PureComponent {
     }
     _getTextButton() {
         const { textButtonProps, type } = this.props;
-        const { label } = textButtonProps, rest = __rest(textButtonProps, ["label"]);
-        return !isEmpty_default()(textButtonProps) ? (external_React_default().createElement(esm_TextButton_TextButton, Object.assign({}, rest, { underline: "always", skin: type !== TYPES.dark ? 'dark' : 'light', size: "small", className: FloatingNotification_st_css_classes.textButton, dataHook: FloatingNotification_constants_dataHooks.textButton }), label)) : null;
+        const { label, ...rest } = textButtonProps;
+        return !isEmpty_default()(textButtonProps) ? (external_React_default().createElement(esm_TextButton_TextButton, { ...rest, underline: "always", skin: type !== TYPES.dark ? 'dark' : 'light', size: "small", className: FloatingNotification_st_css_classes.textButton, dataHook: FloatingNotification_constants_dataHooks.textButton }, label)) : null;
     }
     _getButton() {
         const { buttonProps, type } = this.props;
-        const { label } = buttonProps, rest = __rest(buttonProps, ["label"]);
-        return !isEmpty_default()(buttonProps) ? (external_React_default().createElement(esm_Button_Button, Object.assign({}, rest, { className: FloatingNotification_st_css_classes.button, size: "tiny", priority: type !== TYPES.dark ? 'secondary' : 'primary', skin: type !== TYPES.dark ? 'dark' : 'standard', dataHook: FloatingNotification_constants_dataHooks.button }), label)) : null;
+        const { label, ...rest } = buttonProps;
+        return !isEmpty_default()(buttonProps) ? (external_React_default().createElement(esm_Button_Button, { ...rest, className: FloatingNotification_st_css_classes.button, size: "tiny", priority: type !== TYPES.dark ? 'secondary' : 'primary', skin: type !== TYPES.dark ? 'dark' : 'standard', dataHook: FloatingNotification_constants_dataHooks.button }, label)) : null;
     }
     _getClose() {
         const { showCloseButton, onClose, type } = this.props;
@@ -41452,7 +41485,7 @@ FloatingNotification.defaultProps = {
-var Divider_st_css_namespace_ = "wds_1_95_1_Divider";
+var Divider_st_css_namespace_ = "wds_1_98_0_Divider";
 var Divider_st_css_style_ = classesRuntime.bind(null, Divider_st_css_namespace_);
 var Divider_st_css_cssStates = statesRuntime.bind(null, Divider_st_css_namespace_);
@@ -41460,7 +41493,7 @@ var Divider_st_css_style = (/* unused pure expression or super */ null && (Divid
 var Divider_st_css_st = Divider_st_css_style_;
 var Divider_st_css_namespace = (/* unused pure expression or super */ null && (Divider_st_css_namespace_));
-var Divider_st_css_classes = {"root":"wds_1_95_1_Divider__root"};
+var Divider_st_css_classes = {"root":"wds_1_98_0_Divider__root"};
 var Divider_st_css_keyframes = {};
 var Divider_st_css_layers = {};
 var Divider_st_css_containers = {};
@@ -41536,7 +41569,7 @@ const FormFieldError_o=({size:r,...t})=>external_React_.createElement("svg",{vie
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/wix-ui-icons-common/dist/esm/system/dist/components/FormFieldErrorSmall.js
 const FormFieldErrorSmall_l=({size:r,...o})=>external_React_.createElement("svg",{viewBox:"0 0 2 10",fill:"currentColor",width:r||"2",height:r||"10",...o},external_React_.createElement("path",{fillRule:"evenodd",d:"M1,0 C1.55228475,0 2,0.44771525 2,1 L2,5 C2,5.55228475 1.55228475,6 1,6 C0.44771525,6 0,5.55228475 0,5 L0,1 C0,0.44771525 0.44771525,0 1,0 L1,0 Z M1,8 C1.55228475,8 2,8.44771525 2,9 C2,9.55228475 1.55228475,10 1,10 C0.44771525,10 0,9.55228475 0,9 C0,8.44771525 0.44771525,8 1,8 L1,8 Z"}));FormFieldErrorSmall_l.displayName="FormFieldErrorSmall";var FormFieldErrorSmall_t=FormFieldErrorSmall_l;
-;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/Loader/Arc.js
+;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/Loader/components/Arc.js
 // taken from https://stackoverflow.com/a/18473154
@@ -41547,12 +41580,11 @@ function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
         y: centerY + radius * Math.sin(angleInRadians),
     };
 }
-/* eslint-disable max-params */
 function describeArc(x, y, radius, startAngle, endAngle) {
     const start = polarToCartesian(x, y, radius, endAngle);
     const end = polarToCartesian(x, y, radius, startAngle);
     const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    const d = [
+    return [
         'M',
         start.x,
         start.y,
@@ -41565,10 +41597,8 @@ function describeArc(x, y, radius, startAngle, endAngle) {
         end.x,
         end.y,
     ].join(' ');
-    return d;
 }
-/* eslint-enable */
-const Arc = ({ className, strokeWidth, viewBoxSize, angle }) => {
+const Arc = ({ className, strokeWidth, viewBoxSize, angle, }) => {
     const d = describeArc(0, 0, (viewBoxSize - strokeWidth) / 2, 0, angle);
     const viewBox = `-${viewBoxSize / 2} -${viewBoxSize / 2} ${viewBoxSize} ${viewBoxSize}`;
     return (external_React_default().createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, className: className },
@@ -41581,7 +41611,7 @@ Arc.propTypes = {
     viewBoxSize: (prop_types_default()).number,
 };
 Arc.displayName = 'Arc';
-/* harmony default export */ const Loader_Arc = (Arc);
+/* harmony default export */ const components_Arc = (Arc);
 //# sourceMappingURL=Arc.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/Heading/Heading.st.css.js
@@ -41592,7 +41622,7 @@ Arc.displayName = 'Arc';
-var Heading_st_css_namespace_ = "wds_1_95_1_Heading";
+var Heading_st_css_namespace_ = "wds_1_98_0_Heading";
 var Heading_st_css_style_ = classesRuntime.bind(null, Heading_st_css_namespace_);
 var Heading_st_css_cssStates = statesRuntime.bind(null, Heading_st_css_namespace_);
@@ -41600,7 +41630,7 @@ var Heading_st_css_style = (/* unused pure expression or super */ null && (Headi
 var Heading_st_css_st = Heading_st_css_style_;
 var Heading_st_css_namespace = (/* unused pure expression or super */ null && (Heading_st_css_namespace_));
-var Heading_st_css_classes = {"root":"wds_1_95_1_Heading__root","heading-h1":"wds_1_95_1_StylableTypography__heading-h1","heading-h2":"wds_1_95_1_StylableTypography__heading-h2","heading-h3":"wds_1_95_1_StylableTypography__heading-h3","heading-h4":"wds_1_95_1_StylableTypography__heading-h4","heading-h5":"wds_1_95_1_StylableTypography__heading-h5","heading-h6":"wds_1_95_1_StylableTypography__heading-h6","heading-xl":"wds_1_95_1_StylableTypography__heading-xl","heading-l":"wds_1_95_1_StylableTypography__heading-l","heading-m":"wds_1_95_1_StylableTypography__heading-m","heading-s":"wds_1_95_1_StylableTypography__heading-s","heading-t":"wds_1_95_1_StylableTypography__heading-t","heading-xt":"wds_1_95_1_StylableTypography__heading-xt"};
+var Heading_st_css_classes = {"root":"wds_1_98_0_Heading__root","heading-h1":"wds_1_98_0_StylableTypography__heading-h1","heading-h2":"wds_1_98_0_StylableTypography__heading-h2","heading-h3":"wds_1_98_0_StylableTypography__heading-h3","heading-h4":"wds_1_98_0_StylableTypography__heading-h4","heading-h5":"wds_1_98_0_StylableTypography__heading-h5","heading-h6":"wds_1_98_0_StylableTypography__heading-h6","heading-xl":"wds_1_98_0_StylableTypography__heading-xl","heading-l":"wds_1_98_0_StylableTypography__heading-l","heading-m":"wds_1_98_0_StylableTypography__heading-m","heading-s":"wds_1_98_0_StylableTypography__heading-s","heading-t":"wds_1_98_0_StylableTypography__heading-t","heading-xt":"wds_1_98_0_StylableTypography__heading-xt"};
 var Heading_st_css_keyframes = {};
 var Heading_st_css_layers = {};
 var Heading_st_css_containers = {};
@@ -41614,7 +41644,11 @@ var Heading_st_css_vars = {"wds-color-text-standard-primary":"--wds-color-text-s
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/common/PropTypes/EllipsisCommon.js
-const EllipsisCommonProps = Object.assign({ ellipsis: Ellipsis_Ellipsis.propTypes['ellipsis'], showTooltip: Ellipsis_Ellipsis.propTypes['showTooltip'] }, TooltipCommonProps);
+const EllipsisCommonProps = {
+    ellipsis: Ellipsis_Ellipsis.propTypes['ellipsis'],
+    showTooltip: Ellipsis_Ellipsis.propTypes['showTooltip'],
+    ...TooltipCommonProps,
+};
 //# sourceMappingURL=EllipsisCommon.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/Heading/Heading.js
@@ -41626,7 +41660,6 @@ const EllipsisCommonProps = Object.assign({ ellipsis: Ellipsis_Ellipsis.propType
 const APPEARANCES = {
     H1: 'H1',
     H2: 'H2',
@@ -41651,9 +41684,10 @@ const sizeToAppearance = {
     [SIZE.TINY]: APPEARANCES.H5,
     [SIZE.EXTRA_TINY]: APPEARANCES.H6,
 };
-const Heading = (_a) => {
-    var { light = false, ellipsis = false, appendTo = Ellipsis_Ellipsis.defaultProps.appendTo, flip = Ellipsis_Ellipsis.defaultProps.flip, fixed = Ellipsis_Ellipsis.defaultProps.fixed, placement = Ellipsis_Ellipsis.defaultProps.placement, zIndex = Ellipsis_Ellipsis.defaultProps.zIndex, enterDelay = Ellipsis_Ellipsis.defaultProps.enterDelay, exitDelay = Ellipsis_Ellipsis.defaultProps.exitDelay, showTooltip = Ellipsis_Ellipsis.defaultProps.showTooltip } = _a, propsWithNoDefaults = __rest(_a, ["light", "ellipsis", "appendTo", "flip", "fixed", "placement", "zIndex", "enterDelay", "exitDelay", "showTooltip"]);
-    const props = Object.assign(Object.assign(Object.assign({}, Ellipsis_Ellipsis.defaultProps), { light,
+const Heading = ({ light = false, ellipsis = false, appendTo = Ellipsis_Ellipsis.defaultProps.appendTo, flip = Ellipsis_Ellipsis.defaultProps.flip, fixed = Ellipsis_Ellipsis.defaultProps.fixed, placement = Ellipsis_Ellipsis.defaultProps.placement, zIndex = Ellipsis_Ellipsis.defaultProps.zIndex, enterDelay = Ellipsis_Ellipsis.defaultProps.enterDelay, exitDelay = Ellipsis_Ellipsis.defaultProps.exitDelay, showTooltip = Ellipsis_Ellipsis.defaultProps.showTooltip, ...propsWithNoDefaults }) => {
+    const props = {
+        ...Ellipsis_Ellipsis.defaultProps,
+        light,
         ellipsis,
         appendTo,
         flip,
@@ -41662,45 +41696,92 @@ const Heading = (_a) => {
         zIndex,
         enterDelay,
         exitDelay,
-        showTooltip }), propsWithNoDefaults);
+        showTooltip,
+        ...propsWithNoDefaults,
+    };
     const { ellipsisProps, componentProps } = extractEllipsisProps(props);
-    const { appearance, as, children, dataHook, size, id, light: _light } = componentProps, headingProps = __rest(componentProps, ["appearance", "as", "children", "dataHook", "size", "id", "light"]);
+    const { appearance, as, children, dataHook, size, id, light: _light, ...headingProps } = componentProps;
     (0,external_React_.useEffect)(() => {
         if (appearance) {
             utils_deprecationLog('<Heading/> - prop "appearance" is deprecated and will be removed in next major release, please use "size" property instead.');
         }
     }, [appearance]);
     const headingType = sizeToAppearance[size] || appearance || sizeToAppearance[SIZE.EXTRA_LARGE];
-    return (external_React_default().createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(Ellipsis_Ellipsis, Object.assign({}, ellipsisProps, { wrapperClassName: Heading_st_css_st(Heading_st_css_classes.root, {
+    return (external_React_default().createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(Ellipsis_Ellipsis, { ...ellipsisProps, wrapperClassName: Heading_st_css_st(Heading_st_css_classes.root, {
             appearance: headingType,
             size: newColorsBranding ? size : undefined,
-        }), render: ({ ref, ellipsisClasses, ellipsisInlineStyle }) => external_React_default().createElement(as || headingType.toLowerCase(), Object.assign(Object.assign({}, headingProps), { id,
-            ref, style: ellipsisInlineStyle, 'data-hook': dataHook, className: Heading_st_css_st(Heading_st_css_classes.root, { light, appearance: headingType, newColorsBranding }, ellipsisClasses(props.className), maskingClassNames), 'data-appearance': appearance, 'data-size': size, 'data-light': light, 'data-mask': !!maskingClassNames, 'data-id': id }), children) })))))));
+        }), render: ({ ref, ellipsisClasses, ellipsisInlineStyle }) => external_React_default().createElement(as || headingType.toLowerCase(), {
+            ...headingProps,
+            id,
+            ref,
+            style: ellipsisInlineStyle,
+            'data-hook': dataHook,
+            className: Heading_st_css_st(Heading_st_css_classes.root, { light, appearance: headingType, newColorsBranding }, ellipsisClasses(props.className), maskingClassNames),
+            'data-appearance': appearance,
+            'data-size': size,
+            'data-light': light,
+            'data-mask': !!maskingClassNames,
+            'data-id': id,
+        }, children) }))))));
 };
 Heading.displayName = 'Heading';
-Heading.propTypes = Object.assign(Object.assign({}, EllipsisCommonProps), {
+Heading.propTypes = {
+    ...EllipsisCommonProps,
     /** When true, text that is longer than it's container will be truncated to a single line followed by ellipsis. Otherwise the text will break into several lines. */
-    ellipsis: (prop_types_default()).bool,
+    ellipsis: (prop_types_default()).bool,
     /** maxLines truncates text at a specific number of lines. */
-    maxLines: (prop_types_default()).number,
+    maxLines: (prop_types_default()).number,
     /** Applies a data-hook HTML attribute that can be used in the tests. */
-    dataHook: (prop_types_default()).string,
+    dataHook: (prop_types_default()).string,
     /** Renders any kind of content within a heading. Usually it’s a text string. */
-    children: (prop_types_default()).any,
+    children: (prop_types_default()).any,
     /** Invert heading style so it can be used on a dark or image background. */
-    light: (prop_types_default()).bool,
+    light: (prop_types_default()).bool,
     /** this prop is deprecated and should not be used
      * @deprecated
      */
-    appearance: prop_types_default().oneOf(Object.keys(APPEARANCES)),
+    appearance: prop_types_default().oneOf(Object.keys(APPEARANCES)),
     /** Renders the heading as any other given HTML tag */
-    as: (prop_types_default()).string,
+    as: (prop_types_default()).string,
     /** Controls the heading's visual size and HTML tag appearance. HTML tag can be overridden with ‘as’ prop. */
-    size: prop_types_default().oneOf(Object.values(SIZE)),
+    size: prop_types_default().oneOf(Object.values(SIZE)),
     /** Identifies the element that labels or describes the text element */
-    id: (prop_types_default()).string });
+    id: (prop_types_default()).string,
+};
 /* harmony default export */ const Heading_Heading = (Heading);
 //# sourceMappingURL=Heading.js.map
+;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/Loader/Loader.constants.js
+const SIZES_TO_PIXELS_MAP = {
+    tiny: 18,
+    small: 30,
+    medium: 54,
+    large: 102,
+};
+const SIZE_TO_STROKE_WIDTH_MAP = {
+    tiny: 3,
+    small: 4,
+    medium: 4,
+    large: 4,
+};
+const SIZE_TO_ARC_ANGLE_MAP = {
+    tiny: {
+        light: 216,
+        dark: 144,
+    },
+    small: {
+        light: 216,
+        dark: 144,
+    },
+    medium: {
+        light: 108,
+        dark: 108,
+    },
+    large: {
+        light: 180,
+        dark: 180,
+    },
+};
+//# sourceMappingURL=Loader.constants.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/Loader/Loader.st.css.js
@@ -41709,7 +41790,7 @@ Heading.propTypes = Object.assign(Object.assign({}, EllipsisCommonProps), {
-var Loader_st_css_namespace_ = "wds_1_95_1_Loader";
+var Loader_st_css_namespace_ = "wds_1_98_0_Loader";
 var Loader_st_css_style_ = classesRuntime.bind(null, Loader_st_css_namespace_);
 var Loader_st_css_cssStates = statesRuntime.bind(null, Loader_st_css_namespace_);
@@ -41717,8 +41798,8 @@ var Loader_st_css_style = (/* unused pure expression or super */ null && (Loader
 var Loader_st_css_st = Loader_st_css_style_;
 var Loader_st_css_namespace = (/* unused pure expression or super */ null && (Loader_st_css_namespace_));
-var Loader_st_css_classes = {"root":"wds_1_95_1_Loader__root","statusIndicator":"wds_1_95_1_Loader__statusIndicator","arcsContainer":"wds_1_95_1_Loader__arcsContainer","darkArc":"wds_1_95_1_Loader__darkArc","lightArc":"wds_1_95_1_Loader__lightArc","text":"wds_1_95_1_Loader__text"};
-var Loader_st_css_keyframes = {"rotation":"wds_1_95_1_Loader__rotation","staggered-rotation":"wds_1_95_1_Loader__staggered-rotation"};
+var Loader_st_css_classes = {"root":"wds_1_98_0_Loader__root","statusIndicator":"wds_1_98_0_Loader__statusIndicator","arcsContainer":"wds_1_98_0_Loader__arcsContainer","darkArc":"wds_1_98_0_Loader__darkArc","lightArc":"wds_1_98_0_Loader__lightArc","text":"wds_1_98_0_Loader__text"};
+var Loader_st_css_keyframes = {"rotation":"wds_1_98_0_Loader__rotation","staggered-rotation":"wds_1_98_0_Loader__staggered-rotation"};
 var Loader_st_css_layers = {};
 var Loader_st_css_containers = {};
 var Loader_st_css_stVars = {};
@@ -41736,99 +41817,56 @@ var Loader_st_css_vars = {};
-const arcsAngles = {
-    tiny: {
-        light: 216,
-        dark: 144,
-    },
-    small: {
-        light: 216,
-        dark: 144,
-    },
-    medium: {
-        light: 108,
-        dark: 108,
-    },
-    large: {
-        light: 180,
-        dark: 180,
-    },
-};
-const strokeWidths = {
-    tiny: 3,
-    small: 4,
-    medium: 4,
-    large: 4,
-};
-const sizesInPx = {
-    tiny: 18,
-    small: 30,
-    medium: 54,
-    large: 102,
-};
 const FULL_CIRCLE_ANGLE = 359;
-const sizeToSuccessIcon = {
+const sizeToSuccessIconMap = {
     tiny: external_React_default().createElement(g, null),
     small: external_React_default().createElement(a, null),
     medium: external_React_default().createElement(CircleLoaderCheck_o, null),
     large: external_React_default().createElement(CircleLoaderCheck_o, null),
 };
-const sizeToErrorIcon = {
+const sizeToErrorIconMap = {
     tiny: external_React_default().createElement(C, null),
     small: external_React_default().createElement(FormFieldErrorSmall_t, null),
     medium: external_React_default().createElement(C, null),
     large: external_React_default().createElement(C, null),
 };
-class Loader extends (external_React_default()).PureComponent {
-    render() {
-        const { dataHook, size, color, text, status, statusMessage } = this.props;
-        const sizeInPx = sizesInPx[size];
+const Loader = ({ size = 'medium', color = 'blue', text, status = 'loading', statusMessage, dataHook, }) => {
+    const loader = (0,external_React_.useMemo)(() => {
+        const successIcon = sizeToSuccessIconMap[size];
+        const errorIcon = sizeToErrorIconMap[size];
+        const strokeWidth = SIZE_TO_STROKE_WIDTH_MAP[size];
+        const sizeInPx = SIZES_TO_PIXELS_MAP[size];
         const shouldShowFullCircle = status !== 'loading';
-        const lightArcAngle = !shouldShowFullCircle
-            ? arcsAngles[size].light
-            : FULL_CIRCLE_ANGLE;
-        const darkArcAngle = !shouldShowFullCircle
-            ? arcsAngles[size].dark
-            : FULL_CIRCLE_ANGLE;
-        const shouldShowText = size !== 'tiny';
-        const successIcon = sizeToSuccessIcon[size];
-        const errorIcon = sizeToErrorIcon[size];
-        const strokeWidth = strokeWidths[size];
-        const loader = (external_React_default().createElement("div", { className: Loader_st_css_classes.arcsContainer, style: {
+        const lightArcAngle = shouldShowFullCircle
+            ? FULL_CIRCLE_ANGLE
+            : SIZE_TO_ARC_ANGLE_MAP[size].light;
+        const darkArcAngle = shouldShowFullCircle
+            ? FULL_CIRCLE_ANGLE
+            : SIZE_TO_ARC_ANGLE_MAP[size].dark;
+        return (external_React_default().createElement("div", { className: Loader_st_css_classes.arcsContainer, style: {
                 width: `${sizeInPx}px`,
                 height: `${sizeInPx}px`,
             } },
-            external_React_default().createElement(Loader_Arc, { angle: lightArcAngle, className: Loader_st_css_classes.lightArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
-            external_React_default().createElement(Loader_Arc, { angle: darkArcAngle, className: Loader_st_css_classes.darkArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
+            external_React_default().createElement(components_Arc, { angle: lightArcAngle, className: Loader_st_css_classes.lightArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
+            external_React_default().createElement(components_Arc, { angle: darkArcAngle, className: Loader_st_css_classes.darkArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
             status !== 'loading' && (external_React_default().createElement("div", { className: Loader_st_css_classes.statusIndicator },
                 status === 'success' && successIcon,
                 status === 'error' && errorIcon))));
-        return (external_React_default().createElement("div", { className: Loader_st_css_st(Loader_st_css_classes.root, { size, color, status }), "data-hook": dataHook, "data-size": size, "data-color": color, "data-status": status },
-            statusMessage ? (external_React_default().createElement(Tooltip_Tooltip, { content: statusMessage, appendTo: "window", dataHook: "loader-tooltip" }, loader)) : (loader),
-            shouldShowText && text && (external_React_default().createElement("div", { className: Loader_st_css_classes.text },
-                external_React_default().createElement(Heading_Heading, { size: "extraTiny", dataHook: "loader-text" }, this.props.text)))));
-    }
-}
-Loader.displayName = 'Loader';
+    }, [status, size]);
+    return (external_React_default().createElement("div", { className: Loader_st_css_st(Loader_st_css_classes.root, { size, color, status }), "data-hook": dataHook, "data-size": size, "data-color": color, "data-status": status },
+        statusMessage ? (external_React_default().createElement(Tooltip_Tooltip, { content: statusMessage, appendTo: "window", dataHook: "loader-tooltip" }, loader)) : (loader),
+        size !== 'tiny' && text && (external_React_default().createElement("div", { className: Loader_st_css_classes.text },
+            external_React_default().createElement(Heading_Heading, { size: "extraTiny", dataHook: "loader-text" }, text)))));
+};
 Loader.propTypes = {
-    /** Applies a data-hook HTML attribute to be used in the tests */
     dataHook: (prop_types_default()).string,
-    /** Controls the size of the loader */
     size: prop_types_default().oneOf(['tiny', 'small', 'medium', 'large']),
-    /** Controls the skin of the loader */
     color: prop_types_default().oneOf(['blue', 'white']),
-    /** Defines a text message to show below the loader */
     text: (prop_types_default()).node,
-    /** Specifies the status of a loader */
     status: prop_types_default().oneOf(['loading', 'success', 'error']),
-    /** Defines the message that explains the current status of the loader. Message will be displayed on loader hover. If not given or empty there will be no tooltip. */
     statusMessage: (prop_types_default()).string,
 };
-Loader.defaultProps = {
-    size: 'medium',
-    color: 'blue',
-    status: 'loading',
-};
 /* harmony default export */ const Loader_Loader = (Loader);
 //# sourceMappingURL=Loader.js.map
 // EXTERNAL MODULE: ../../../node_modules/@babel/runtime/helpers/extends.js
@@ -43515,7 +43553,7 @@ var he_default = /*#__PURE__*/__webpack_require__.n(he);
-var ListItemSelect_st_css_namespace_ = "wds_1_95_1_ListItemSelect";
+var ListItemSelect_st_css_namespace_ = "wds_1_98_0_ListItemSelect";
 var ListItemSelect_st_css_style_ = classesRuntime.bind(null, ListItemSelect_st_css_namespace_);
 var ListItemSelect_st_css_cssStates = statesRuntime.bind(null, ListItemSelect_st_css_namespace_);
@@ -43523,7 +43561,7 @@ var ListItemSelect_st_css_style = (/* unused pure expression or super */ null &&
 var ListItemSelect_st_css_st = ListItemSelect_st_css_style_;
 var ListItemSelect_st_css_namespace = (/* unused pure expression or super */ null && (ListItemSelect_st_css_namespace_));
-var ListItemSelect_st_css_classes = {"root":"wds_1_95_1_ListItemSelect__root","fullWidthContent":"wds_1_95_1_ListItemSelect__fullWidthContent","textsWrapper":"wds_1_95_1_ListItemSelect__textsWrapper","titleWrapper":"wds_1_95_1_ListItemSelect__titleWrapper","title":"wds_1_95_1_ListItemSelect__title","prefix":"wds_1_95_1_ListItemSelect__prefix","suffix":"wds_1_95_1_ListItemSelect__suffix","subtitle":"wds_1_95_1_ListItemSelect__subtitle"};
+var ListItemSelect_st_css_classes = {"root":"wds_1_98_0_ListItemSelect__root","fullWidthContent":"wds_1_98_0_ListItemSelect__fullWidthContent","textsWrapper":"wds_1_98_0_ListItemSelect__textsWrapper","titleWrapper":"wds_1_98_0_ListItemSelect__titleWrapper","title":"wds_1_98_0_ListItemSelect__title","prefix":"wds_1_98_0_ListItemSelect__prefix","suffix":"wds_1_98_0_ListItemSelect__suffix","subtitle":"wds_1_98_0_ListItemSelect__subtitle"};
 var ListItemSelect_st_css_keyframes = {};
 var ListItemSelect_st_css_layers = {};
 var ListItemSelect_st_css_containers = {};
@@ -43549,7 +43587,7 @@ const CheckboxChecked_o=({size:e,...h})=>external_React_.createElement("svg",{vi
-var Checkbox_st_css_namespace_ = "wds_1_95_1_Checkbox";
+var Checkbox_st_css_namespace_ = "wds_1_98_0_Checkbox";
 var Checkbox_st_css_style_ = classesRuntime.bind(null, Checkbox_st_css_namespace_);
 var Checkbox_st_css_cssStates = statesRuntime.bind(null, Checkbox_st_css_namespace_);
@@ -43557,7 +43595,7 @@ var Checkbox_st_css_style = (/* unused pure expression or super */ null && (Chec
 var Checkbox_st_css_st = Checkbox_st_css_style_;
 var Checkbox_st_css_namespace = (/* unused pure expression or super */ null && (Checkbox_st_css_namespace_));
-var Checkbox_st_css_classes = {"root":"wds_1_95_1_Checkbox__root","label":"wds_1_95_1_Checkbox__label","labelInner":"wds_1_95_1_Checkbox__labelInner","children":"wds_1_95_1_Checkbox__children","checkbox":"wds_1_95_1_Checkbox__checkbox","inner":"wds_1_95_1_Checkbox__inner","outer":"wds_1_95_1_Checkbox__outer"};
+var Checkbox_st_css_classes = {"root":"wds_1_98_0_Checkbox__root","label":"wds_1_98_0_Checkbox__label","labelInner":"wds_1_98_0_Checkbox__labelInner","children":"wds_1_98_0_Checkbox__children","checkbox":"wds_1_98_0_Checkbox__checkbox","inner":"wds_1_98_0_Checkbox__inner","outer":"wds_1_98_0_Checkbox__outer"};
 var Checkbox_st_css_keyframes = {};
 var Checkbox_st_css_layers = {};
 var Checkbox_st_css_containers = {};
@@ -43635,12 +43673,11 @@ class Checkbox extends external_React_.PureComponent {
             this.checkboxRef.current && this.checkboxRef.current.focus();
         };
         this._handleKeyDown = (event) => {
-            var _a, _b;
             if (event.keyCode === 32 && this.inputRef.current) {
                 const onChangeEvent = {
                     target: { checked: !this.inputRef.current.checked },
                 };
-                (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, onChangeEvent);
+                this.props.onChange?.(onChangeEvent);
                 event.preventDefault();
             }
         };
@@ -43662,7 +43699,7 @@ class Checkbox extends external_React_.PureComponent {
         const isTooltipDisabled = (tooltipProps && tooltipProps.disabled) ||
             disabled ||
             (!tooltipContent && (!hasError || !errorMessage));
-        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement("div", Object.assign({ "data-hook": dataHook, className: Checkbox_st_css_st(Checkbox_st_css_classes.root, {
+        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement("div", { "data-hook": dataHook, className: Checkbox_st_css_st(Checkbox_st_css_classes.root, {
                 vAlign,
                 selectionArea,
                 selectionAreaSkin,
@@ -43676,11 +43713,11 @@ class Checkbox extends external_React_.PureComponent {
                 indeterminate,
                 newColorsBranding,
                 ellipsis,
-            }, className), onFocus: focusableOnFocus, onBlur: focusableOnBlur, tabIndex: disabled ? undefined : 0 }, this._getDataAttributes(), { role: "checkbox", "aria-checked": checked, ref: this.checkboxRef, onKeyDown: disabled ? undefined : this._handleKeyDown }),
+            }, className), onFocus: focusableOnFocus, onBlur: focusableOnBlur, tabIndex: disabled ? undefined : 0, ...this._getDataAttributes(), role: "checkbox", "aria-checked": checked, ref: this.checkboxRef, onKeyDown: disabled ? undefined : this._handleKeyDown },
             external_React_default().createElement("input", { ref: this.inputRef, "data-hook": Checkbox_constants_dataHooks.input, type: "checkbox", id: id, tabIndex: disabled ? undefined : 0, checked: checked, disabled: disabled, onChange: disabled ? undefined : onChange, style: { display: 'none' } }),
             external_React_default().createElement("label", { htmlFor: id, "data-hook": Checkbox_constants_dataHooks.label, className: Checkbox_st_css_classes.label },
                 external_React_default().createElement("div", { className: Checkbox_st_css_classes.labelInner, style: { padding: selectionAreaPadding } },
-                    external_React_default().createElement(Tooltip_Tooltip, Object.assign({ dataHook: Checkbox_constants_dataHooks.boxTooltip, disabled: isTooltipDisabled, content: tooltipContent || errorMessage || ' ', textAlign: "center", maxWidth: 230, exitDelay: 150, zIndex: 10000 }, tooltipProps),
+                    external_React_default().createElement(Tooltip_Tooltip, { dataHook: Checkbox_constants_dataHooks.boxTooltip, disabled: isTooltipDisabled, content: tooltipContent || errorMessage || ' ', textAlign: "center", maxWidth: 230, exitDelay: 150, zIndex: 10000, ...tooltipProps },
                         external_React_default().createElement("div", { className: Checkbox_st_css_classes.outer },
                             external_React_default().createElement("div", { "data-hook": Checkbox_constants_dataHooks.box, className: Checkbox_st_css_classes.checkbox },
                                 external_React_default().createElement("div", { className: Checkbox_st_css_classes.inner, onClick: e => e.stopPropagation() }, indeterminate ? (external_React_default().createElement(CheckboxIndeterminate_o, null)) : (external_React_default().createElement(CheckboxChecked_r, null)))))),
@@ -43729,7 +43766,7 @@ Checkbox.defaultProps = {
-var default_scroll_bar_st_css_namespace_ = "wds_1_95_1_defaultscrollbar";
+var default_scroll_bar_st_css_namespace_ = "wds_1_98_0_defaultscrollbar";
 var default_scroll_bar_st_css_style_ = classesRuntime.bind(null, default_scroll_bar_st_css_namespace_);
 var default_scroll_bar_st_css_cssStates = statesRuntime.bind(null, default_scroll_bar_st_css_namespace_);
@@ -43737,7 +43774,7 @@ var default_scroll_bar_st_css_style = (/* unused pure expression or super */ nul
 var default_scroll_bar_st_css_st = (/* unused pure expression or super */ null && (default_scroll_bar_st_css_style_));
 var default_scroll_bar_st_css_namespace = (/* unused pure expression or super */ null && (default_scroll_bar_st_css_namespace_));
-var default_scroll_bar_st_css_classes = {"root":"wds_1_95_1_defaultscrollbar__root","defaultScrollBar":"wds_1_95_1_defaultscrollbar__defaultScrollBar"};
+var default_scroll_bar_st_css_classes = {"root":"wds_1_98_0_defaultscrollbar__root","defaultScrollBar":"wds_1_98_0_defaultscrollbar__defaultScrollBar"};
 var default_scroll_bar_st_css_keyframes = {};
 var default_scroll_bar_st_css_layers = {};
 var default_scroll_bar_st_css_containers = {};
@@ -43755,7 +43792,7 @@ var default_scroll_bar_st_css_vars = {"wds-color-blue-100":"--wds-color-blue-100
-var Box_st_css_namespace_ = "wds_1_95_1_Box";
+var Box_st_css_namespace_ = "wds_1_98_0_Box";
 var Box_st_css_style_ = classesRuntime.bind(null, Box_st_css_namespace_);
 var Box_st_css_cssStates = statesRuntime.bind(null, Box_st_css_namespace_);
@@ -43763,12 +43800,12 @@ var Box_st_css_style = (/* unused pure expression or super */ null && (Box_st_cs
 var Box_st_css_st = Box_st_css_style_;
 var Box_st_css_namespace = (/* unused pure expression or super */ null && (Box_st_css_namespace_));
-var Box_st_css_classes = {"root":"wds_1_95_1_Box__root","defaultScrollBar":"wds_1_95_1_defaultscrollbar__defaultScrollBar"};
+var Box_st_css_classes = {"root":"wds_1_98_0_Box__root","defaultScrollBar":"wds_1_98_0_defaultscrollbar__defaultScrollBar"};
 var Box_st_css_keyframes = {};
 var Box_st_css_layers = {};
 var Box_st_css_containers = {};
 var Box_st_css_stVars = {};
-var Box_st_css_vars = {"gap":"--wds_1_95_1_Box-gap"};
+var Box_st_css_vars = {"gap":"--wds_1_98_0_Box-gap"};
@@ -43781,7 +43818,7 @@ var Box_st_css_vars = {"gap":"--wds_1_95_1_Box-gap"};
-var spacing_st_css_namespace_ = "wds_1_95_1_spacing";
+var spacing_st_css_namespace_ = "wds_1_98_0_spacing";
 var spacing_st_css_style_ = classesRuntime.bind(null, spacing_st_css_namespace_);
 var spacing_st_css_cssStates = statesRuntime.bind(null, spacing_st_css_namespace_);
@@ -43789,7 +43826,7 @@ var spacing_st_css_style = (/* unused pure expression or super */ null && (spaci
 var spacing_st_css_st = (/* unused pure expression or super */ null && (spacing_st_css_style_));
 var spacing_st_css_namespace = (/* unused pure expression or super */ null && (spacing_st_css_namespace_));
-var spacing_st_css_classes = {"root":"wds_1_95_1_spacing__root"};
+var spacing_st_css_classes = {"root":"wds_1_98_0_spacing__root"};
 var spacing_st_css_keyframes = {};
 var spacing_st_css_layers = {};
 var spacing_st_css_containers = {};
@@ -43852,7 +43889,6 @@ const spacingValues = {
 /** In case the value is a number, it's multiplied by the defined spacing unit.
  *  Otherwise - there are three options:
  *   1. A Spacing Token - SP1, SP2, etc. - where the number is multiplied by the spacing unit.
@@ -43883,11 +43919,13 @@ const formatSizeValue = value => {
     if (typeof value !== 'undefined')
         return isFinite(value) ? `${value}px` : `${value}`;
 };
-const Box = (0,external_React_.forwardRef)((_a, ref) => {
-    var { dataHook, gap, children, className, style, inline = false, direction = 'horizontal', align, verticalAlign, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, minWidth, maxWidth, width, minHeight, maxHeight, height, color, backgroundColor, border, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor,
-    // Excluded props (which are handled above and should not be spread into `style`)
-    'data-hook': dataHookByKebabCase, flexDirection, justifyContent, alignItems } = _a, nativeStyles = __rest(_a, ["dataHook", "gap", "children", "className", "style", "inline", "direction", "align", "verticalAlign", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "minWidth", "maxWidth", "width", "minHeight", "maxHeight", "height", "color", "backgroundColor", "border", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", 'data-hook', "flexDirection", "justifyContent", "alignItems"]);
-    const complexSpacingValues = (0,external_React_.useMemo)(() => Object.entries({ padding, margin }).reduce((accu, [key, value]) => (Object.assign(Object.assign({}, accu), { [key]: formatComplexSpacingValue(value) })), {}), [padding, margin]);
+const Box = (0,external_React_.forwardRef)(({ dataHook, gap, children, className, style, inline = false, direction = 'horizontal', align, verticalAlign, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, minWidth, maxWidth, width, minHeight, maxHeight, height, color, backgroundColor, border, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor,
+// Excluded props (which are handled above and should not be spread into `style`)
+'data-hook': dataHookByKebabCase, flexDirection, justifyContent, alignItems, ...nativeStyles }, ref) => {
+    const complexSpacingValues = (0,external_React_.useMemo)(() => Object.entries({ padding, margin }).reduce((accu, [key, value]) => ({
+        ...accu,
+        [key]: formatComplexSpacingValue(value),
+    }), {}), [padding, margin]);
     const singleSpacingValues = (0,external_React_.useMemo)(() => Object.entries({
         paddingTop,
         paddingRight,
@@ -43897,7 +43935,10 @@ const Box = (0,external_React_.forwardRef)((_a, ref) => {
         marginRight,
         marginBottom,
         marginLeft,
-    }).reduce((accu, [key, value]) => (Object.assign(Object.assign({}, accu), { [key]: formatSingleSpacingValue(value) })), {}), [
+    }).reduce((accu, [key, value]) => ({
+        ...accu,
+        [key]: formatSingleSpacingValue(value),
+    }), {}), [
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -43914,26 +43955,47 @@ const Box = (0,external_React_.forwardRef)((_a, ref) => {
         minHeight,
         maxHeight,
         height,
-    }).reduce((accu, [key, value]) => (Object.assign(Object.assign({}, accu), { [key]: formatSizeValue(value) })), {}), [minWidth, maxWidth, width, minHeight, maxHeight, height]);
+    }).reduce((accu, [key, value]) => ({
+        ...accu,
+        [key]: formatSizeValue(value),
+    }), {}), [minWidth, maxWidth, width, minHeight, maxHeight, height]);
     const rootClassNames = Box_st_css_st(Box_st_css_classes.root, {
         inline,
         direction,
         alignItems: align,
         justifyContent: verticalAlign,
     }, className);
-    const rootStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, style), singleSpacingValues), complexSpacingValues), sizeValues), {
+    const rootStyles = {
+        ...style,
+        // Spacing
+        ...singleSpacingValues,
+        ...complexSpacingValues,
+        // Sizing
+        ...sizeValues,
         // Styling
-        color: colors_st_css_stVars[color] || color, backgroundColor: colors_st_css_stVars[backgroundColor] || backgroundColor, border }), (borderColor && {
-        borderColor: colors_st_css_stVars[borderColor] || borderColor,
-    })), (borderTopColor && {
-        borderTopColor: colors_st_css_stVars[borderTopColor] || borderTopColor,
-    })), (borderRightColor && {
-        borderRightColor: colors_st_css_stVars[borderRightColor] || borderRightColor,
-    })), (borderBottomColor && {
-        borderBottomColor: colors_st_css_stVars[borderBottomColor] || borderBottomColor,
-    })), (borderLeftColor && {
-        borderLeftColor: colors_st_css_stVars[borderLeftColor] || borderLeftColor,
-    })), nativeStyles), { [Box_st_css_vars['gap']]: formatSingleSpacingValue(gap) || 0 });
+        color: colors_st_css_stVars[color] || color,
+        backgroundColor: colors_st_css_stVars[backgroundColor] || backgroundColor,
+        border, // Must be assigned before the border color props (otherwise it would override them)
+        // Props which are spread just in case these are actually defined
+        ...(borderColor && {
+            borderColor: colors_st_css_stVars[borderColor] || borderColor,
+        }),
+        ...(borderTopColor && {
+            borderTopColor: colors_st_css_stVars[borderTopColor] || borderTopColor,
+        }),
+        ...(borderRightColor && {
+            borderRightColor: colors_st_css_stVars[borderRightColor] || borderRightColor,
+        }),
+        ...(borderBottomColor && {
+            borderBottomColor: colors_st_css_stVars[borderBottomColor] || borderBottomColor,
+        }),
+        ...(borderLeftColor && {
+            borderLeftColor: colors_st_css_stVars[borderLeftColor] || borderLeftColor,
+        }),
+        // All other props which are passed (without those that are specified above)
+        ...nativeStyles,
+        [Box_st_css_vars['gap']]: formatSingleSpacingValue(gap) || 0,
+    };
     // Filter undefined values
     const rootStylesFiltered = filterObject(rootStyles, (key, value) => typeof value !== 'undefined');
     return (external_React_default().createElement("div", { "data-hook": dataHook, className: rootClassNames, style: rootStylesFiltered, ref: ref }, children));
@@ -44051,7 +44113,7 @@ var escapeRegExp_default = /*#__PURE__*/__webpack_require__.n(lodash_escapeRegEx
-var Highlighter_st_css_namespace_ = "wds_1_95_1_Highlighter";
+var Highlighter_st_css_namespace_ = "wds_1_98_0_Highlighter";
 var Highlighter_st_css_style_ = classesRuntime.bind(null, Highlighter_st_css_namespace_);
 var Highlighter_st_css_cssStates = statesRuntime.bind(null, Highlighter_st_css_namespace_);
@@ -44059,7 +44121,7 @@ var Highlighter_st_css_style = (/* unused pure expression or super */ null && (H
 var Highlighter_st_css_st = Highlighter_st_css_style_;
 var Highlighter_st_css_namespace = (/* unused pure expression or super */ null && (Highlighter_st_css_namespace_));
-var Highlighter_st_css_classes = {"root":"wds_1_95_1_Highlighter__root"};
+var Highlighter_st_css_classes = {"root":"wds_1_98_0_Highlighter__root"};
 var Highlighter_st_css_keyframes = {};
 var Highlighter_st_css_layers = {};
 var Highlighter_st_css_containers = {};
@@ -44188,7 +44250,7 @@ const highlight = (element, match, nextChildKey, props) => {
         [ELEM_TYPES.STRING]: (elem, _match) => (external_React_default().createElement(Highlighter_HighlightedItem, { key: nextChildKey(), match: _match, emphasize: props.emphasize }, elem)),
         [ELEM_TYPES.REACT_ELEMENT]: elem => {
             if (elem.props.children) {
-                return external_React_default().cloneElement(elem, Object.assign(Object.assign({}, elem.props), { key: nextChildKey() }), highlight(elem.props.children, match, nextChildKey, props));
+                return external_React_default().cloneElement(elem, { ...elem.props, key: nextChildKey() }, highlight(elem.props.children, match, nextChildKey, props));
             }
             return elem;
         },
@@ -44231,7 +44293,6 @@ Highlighter.displayName = 'Highlighter';
 const ListItemSelect_SIZES = {
     small: 'small',
     medium: 'medium',
@@ -44244,7 +44305,7 @@ class ListItemSelect extends (external_React_default()).PureComponent {
     }
     _renderTitle(textProps) {
         const { title } = this.props;
-        const titleElement = (external_React_default().createElement(Text, Object.assign({ className: ListItemSelect_st_css_classes.title, dataHook: ListItemSelect_constants_dataHooks.TITLE }, textProps), title));
+        const titleElement = (external_React_default().createElement(Text, { className: ListItemSelect_st_css_classes.title, dataHook: ListItemSelect_constants_dataHooks.TITLE, ...textProps }, title));
         return (external_React_default().createElement(InputWithOptions_HighlightContext.Consumer, null, ({ highlight, match }) => highlight ? (external_React_default().createElement(Highlighter_Highlighter, { match: match }, titleElement)) : (titleElement)));
     }
     _renderContent() {
@@ -44259,15 +44320,19 @@ class ListItemSelect extends (external_React_default()).PureComponent {
             weight: 'thin',
             light: selected && !checkbox,
         };
-        const secondaryTextProps = Object.assign(Object.assign({}, textProps), { light: !disabled, secondary: !selected || checkbox });
+        const secondaryTextProps = {
+            ...textProps,
+            light: !disabled,
+            secondary: !selected || checkbox,
+        };
         return (external_React_default().createElement(Box_Box, { width: "100%", className: ListItemSelect_st_css_classes.textsWrapper },
-            prefix && (external_React_default().createElement(Text, Object.assign({ className: ListItemSelect_st_css_st(ListItemSelect_st_css_classes.prefix, {
+            prefix && (external_React_default().createElement(Text, { className: ListItemSelect_st_css_st(ListItemSelect_st_css_classes.prefix, {
                     subtitle: Boolean(subtitle),
-                }), dataHook: ListItemSelect_constants_dataHooks.PREFIX }, textProps, { ellipsis: false }), prefix)),
+                }), dataHook: ListItemSelect_constants_dataHooks.PREFIX, ...textProps, ellipsis: false }, prefix)),
             external_React_default().createElement("div", { className: ListItemSelect_st_css_st(ListItemSelect_st_css_classes.titleWrapper, { subtitle: Boolean(subtitle) }) },
                 this._renderTitle(textProps),
-                subtitle && (external_React_default().createElement(Text, Object.assign({ className: ListItemSelect_st_css_classes.subtitle, dataHook: ListItemSelect_constants_dataHooks.SUBTITLE, secondary: true }, secondaryTextProps, { size: ListItemSelect_SIZES.small }), subtitle))),
-            suffix && (external_React_default().createElement(Text, Object.assign({ dataHook: ListItemSelect_constants_dataHooks.SUFFIX, className: ListItemSelect_st_css_classes.suffix }, secondaryTextProps), suffix))));
+                subtitle && (external_React_default().createElement(Text, { className: ListItemSelect_st_css_classes.subtitle, dataHook: ListItemSelect_constants_dataHooks.SUBTITLE, secondary: true, ...secondaryTextProps, size: ListItemSelect_SIZES.small }, subtitle))),
+            suffix && (external_React_default().createElement(Text, { dataHook: ListItemSelect_constants_dataHooks.SUFFIX, className: ListItemSelect_st_css_classes.suffix, ...secondaryTextProps }, suffix))));
     }
 }
 ListItemSelect.displayName = 'ListItemSelect';
@@ -44318,10 +44383,7 @@ const listItemSelectBuilder = ({ id, className, checkbox, prefix, title, label,
     disabled,
     overrideOptionStyle: true,
     label,
-    value: (_a) => {
-        var { selected, hovered } = _a, rest = __rest(_a, ["selected", "hovered"]);
-        return (external_React_default().createElement(ListItemSelect, Object.assign({ dataHook: dataHook, className: className, checkbox: checkbox, prefix: prefix, title: title, subtitle: subtitle, suffix: suffix, size: size, ellipsis: ellipsis, selected: selected, highlighted: hovered, tooltipProps: tooltipProps }, rest)));
-    },
+    value: ({ selected, hovered, ...rest }) => (external_React_default().createElement(ListItemSelect, { dataHook: dataHook, className: className, checkbox: checkbox, prefix: prefix, title: title, subtitle: subtitle, suffix: suffix, size: size, ellipsis: ellipsis, selected: selected, highlighted: hovered, tooltipProps: tooltipProps, ...rest })),
 });
 //# sourceMappingURL=ListItemSelect.js.map
 // EXTERNAL MODULE: ../../../node_modules/lodash/defaultTo.js
@@ -44340,7 +44402,7 @@ var sortBy_default = /*#__PURE__*/__webpack_require__.n(sortBy);
-var border_st_css_namespace_ = "wds_1_95_1_border";
+var border_st_css_namespace_ = "wds_1_98_0_border";
 var border_st_css_style_ = classesRuntime.bind(null, border_st_css_namespace_);
 var border_st_css_cssStates = statesRuntime.bind(null, border_st_css_namespace_);
@@ -44348,7 +44410,7 @@ var border_st_css_style = (/* unused pure expression or super */ null && (border
 var border_st_css_st = (/* unused pure expression or super */ null && (border_st_css_style_));
 var border_st_css_namespace = (/* unused pure expression or super */ null && (border_st_css_namespace_));
-var border_st_css_classes = {"root":"wds_1_95_1_border__root"};
+var border_st_css_classes = {"root":"wds_1_98_0_border__root"};
 var border_st_css_keyframes = {};
 var border_st_css_layers = {};
 var border_st_css_containers = {};
@@ -44371,7 +44433,7 @@ var border_st_css_vars = {"wsr-border-radius-02":"--wsr-border-radius-02","wsr-b
-var Input_st_css_namespace_ = "wds_1_95_1_Input";
+var Input_st_css_namespace_ = "wds_1_98_0_Input";
 var Input_st_css_style_ = classesRuntime.bind(null, Input_st_css_namespace_);
 var Input_st_css_cssStates = statesRuntime.bind(null, Input_st_css_namespace_);
@@ -44379,12 +44441,12 @@ var Input_st_css_style = (/* unused pure expression or super */ null && (Input_s
 var Input_st_css_st = Input_st_css_style_;
 var Input_st_css_namespace = (/* unused pure expression or super */ null && (Input_st_css_namespace_));
-var Input_st_css_classes = {"root":"wds_1_95_1_Input__root","text-tiny-thin":"wds_1_95_1_StylableTypography__text-tiny-thin","text-small-thin":"wds_1_95_1_StylableTypography__text-small-thin","text-medium-thin":"wds_1_95_1_StylableTypography__text-medium-thin","wrapper":"wds_1_95_1_Input__wrapper","input":"wds_1_95_1_Input__input","disabled":"wds_1_95_1_Input__disabled","readOnly":"wds_1_95_1_Input__readOnly","suffixes":"wds_1_95_1_Input__suffixes","suffix":"wds_1_95_1_Input__suffix","statusWrapper":"wds_1_95_1_Input__statusWrapper","clearButtonWrapper":"wds_1_95_1_Input__clearButtonWrapper","menuArrow":"wds_1_95_1_Input__menuArrow","clearButton":"wds_1_95_1_Input__clearButton"};
+var Input_st_css_classes = {"root":"wds_1_98_0_Input__root","text-tiny-thin":"wds_1_98_0_StylableTypography__text-tiny-thin","text-small-thin":"wds_1_98_0_StylableTypography__text-small-thin","text-medium-thin":"wds_1_98_0_StylableTypography__text-medium-thin","wrapper":"wds_1_98_0_Input__wrapper","input":"wds_1_98_0_Input__input","disabled":"wds_1_98_0_Input__disabled","readOnly":"wds_1_98_0_Input__readOnly","suffixes":"wds_1_98_0_Input__suffixes","suffix":"wds_1_98_0_Input__suffix","statusWrapper":"wds_1_98_0_Input__statusWrapper","clearButtonWrapper":"wds_1_98_0_Input__clearButtonWrapper","menuArrow":"wds_1_98_0_Input__menuArrow","clearButton":"wds_1_98_0_Input__clearButton"};
 var Input_st_css_keyframes = {};
 var Input_st_css_layers = {};
 var Input_st_css_containers = {};
 var Input_st_css_stVars = {};
-var Input_st_css_vars = {"wds-color-border-destructive-secondary-active":"--wds-color-border-destructive-secondary-active","wds-color-border-destructive-secondary-hover":"--wds-color-border-destructive-secondary-hover","wds-color-border-destructive-tertiary-hover":"--wds-color-border-destructive-tertiary-hover","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-border-standard-secondary-active":"--wds-color-border-standard-secondary-active","wds-color-border-standard-secondary-disabled":"--wds-color-border-standard-secondary-disabled","wds-color-border-standard-secondary-hover":"--wds-color-border-standard-secondary-hover","wds-color-border-standard-secondary-readonly":"--wds-color-border-standard-secondary-readonly","wds-color-border-warning-secondary-active":"--wds-color-border-warning-secondary-active","wds-color-border-warning-secondary-hover":"--wds-color-border-warning-secondary-hover","wds-color-border-warning-tertiary-hover":"--wds-color-border-warning-tertiary-hover","wds-color-fill-standard-secondary":"--wds-color-fill-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-disabled":"--wds-color-fill-standard-tertiary-disabled","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wds-color-fill-standard-tertiary-readonly":"--wds-color-fill-standard-tertiary-readonly","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-text-primary":"--wds-color-text-primary","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-input-border-radius-default-tiny":"--wds-input-border-radius-default-tiny","wds-input-border-radius-default-small":"--wds-input-border-radius-default-small","wds-input-border-radius-default-medium":"--wds-input-border-radius-default-medium","wds-input-border-radius-default-large":"--wds-input-border-radius-default-large","wds-input-border-radius-round-tiny":"--wds-input-border-radius-round-tiny","wds-input-border-radius-round-small":"--wds-input-border-radius-round-small","wds-input-border-radius-round-medium":"--wds-input-border-radius-round-medium","wds-input-border-radius-round-large":"--wds-input-border-radius-round-large","wds-input-padding-horizontal-large":"--wds-input-padding-horizontal-large","wds-input-padding-horizontal-medium":"--wds-input-padding-horizontal-medium","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small","wds-input-padding-horizontal-tiny":"--wds-input-padding-horizontal-tiny","wds-input-padding-vertical-large":"--wds-input-padding-vertical-large","wds-input-padding-vertical-medium":"--wds-input-padding-vertical-medium","wds-input-padding-vertical-small":"--wds-input-padding-vertical-small","wds-input-padding-vertical-tiny":"--wds-input-padding-vertical-tiny","wds-input-size-large":"--wds-input-size-large","wds-input-size-medium":"--wds-input-size-medium","wds-input-size-small":"--wds-input-size-small","wds-input-size-tiny":"--wds-input-size-tiny","wds-input-value-font-line-height-tiny":"--wds-input-value-font-line-height-tiny","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-input-value-font-line-height-medium":"--wds-input-value-font-line-height-medium","wds-input-value-font-line-height-large":"--wds-input-value-font-line-height-large","wds-input-value-font-size-tiny":"--wds-input-value-font-size-tiny","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-size-medium":"--wds-input-value-font-size-medium","wds-input-value-font-size-large":"--wds-input-value-font-size-large","wds-shadow-focus-destructive":"--wds-shadow-focus-destructive","wds-shadow-focus-standard":"--wds-shadow-focus-standard","wds-shadow-focus-warning":"--wds-shadow-focus-warning","wds-space-0":"--wds-space-0","wds-space-50":"--wds-space-50","wds-space-100":"--wds-space-100","border-color-hover":"--wds_1_95_1_Input-border-color-hover","border-color-hover-destructive":"--wds_1_95_1_Input-border-color-hover-destructive","border-color-hover-warning":"--wds_1_95_1_Input-border-color-hover-warning"};
+var Input_st_css_vars = {"wds-color-border-destructive-secondary-active":"--wds-color-border-destructive-secondary-active","wds-color-border-destructive-secondary-hover":"--wds-color-border-destructive-secondary-hover","wds-color-border-destructive-tertiary-hover":"--wds-color-border-destructive-tertiary-hover","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-border-standard-secondary-active":"--wds-color-border-standard-secondary-active","wds-color-border-standard-secondary-disabled":"--wds-color-border-standard-secondary-disabled","wds-color-border-standard-secondary-hover":"--wds-color-border-standard-secondary-hover","wds-color-border-standard-secondary-readonly":"--wds-color-border-standard-secondary-readonly","wds-color-border-warning-secondary-active":"--wds-color-border-warning-secondary-active","wds-color-border-warning-secondary-hover":"--wds-color-border-warning-secondary-hover","wds-color-border-warning-tertiary-hover":"--wds-color-border-warning-tertiary-hover","wds-color-fill-standard-secondary":"--wds-color-fill-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-disabled":"--wds-color-fill-standard-tertiary-disabled","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wds-color-fill-standard-tertiary-readonly":"--wds-color-fill-standard-tertiary-readonly","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-text-primary":"--wds-color-text-primary","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-input-border-radius-default-tiny":"--wds-input-border-radius-default-tiny","wds-input-border-radius-default-small":"--wds-input-border-radius-default-small","wds-input-border-radius-default-medium":"--wds-input-border-radius-default-medium","wds-input-border-radius-default-large":"--wds-input-border-radius-default-large","wds-input-border-radius-round-tiny":"--wds-input-border-radius-round-tiny","wds-input-border-radius-round-small":"--wds-input-border-radius-round-small","wds-input-border-radius-round-medium":"--wds-input-border-radius-round-medium","wds-input-border-radius-round-large":"--wds-input-border-radius-round-large","wds-input-padding-horizontal-large":"--wds-input-padding-horizontal-large","wds-input-padding-horizontal-medium":"--wds-input-padding-horizontal-medium","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small","wds-input-padding-horizontal-tiny":"--wds-input-padding-horizontal-tiny","wds-input-padding-vertical-large":"--wds-input-padding-vertical-large","wds-input-padding-vertical-medium":"--wds-input-padding-vertical-medium","wds-input-padding-vertical-small":"--wds-input-padding-vertical-small","wds-input-padding-vertical-tiny":"--wds-input-padding-vertical-tiny","wds-input-size-large":"--wds-input-size-large","wds-input-size-medium":"--wds-input-size-medium","wds-input-size-small":"--wds-input-size-small","wds-input-size-tiny":"--wds-input-size-tiny","wds-input-value-font-line-height-tiny":"--wds-input-value-font-line-height-tiny","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-input-value-font-line-height-medium":"--wds-input-value-font-line-height-medium","wds-input-value-font-line-height-large":"--wds-input-value-font-line-height-large","wds-input-value-font-size-tiny":"--wds-input-value-font-size-tiny","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-size-medium":"--wds-input-value-font-size-medium","wds-input-value-font-size-large":"--wds-input-value-font-size-large","wds-shadow-focus-destructive":"--wds-shadow-focus-destructive","wds-shadow-focus-standard":"--wds-shadow-focus-standard","wds-shadow-focus-warning":"--wds-shadow-focus-warning","wds-space-0":"--wds-space-0","wds-space-50":"--wds-space-50","wds-space-100":"--wds-space-100","border-color-hover":"--wds_1_98_0_Input-border-color-hover","border-color-hover-destructive":"--wds_1_98_0_Input-border-color-hover-destructive","border-color-hover-warning":"--wds_1_98_0_Input-border-color-hover-warning"};
@@ -44438,7 +44500,7 @@ const FormFieldSpinnerDown_n=({size:e,...o})=>external_React_.createElement("svg
-var Ticker_st_css_namespace_ = "wds_1_95_1_Ticker";
+var Ticker_st_css_namespace_ = "wds_1_98_0_Ticker";
 var Ticker_st_css_style_ = classesRuntime.bind(null, Ticker_st_css_namespace_);
 var Ticker_st_css_cssStates = statesRuntime.bind(null, Ticker_st_css_namespace_);
@@ -44446,7 +44508,7 @@ var Ticker_st_css_style = (/* unused pure expression or super */ null && (Ticker
 var Ticker_st_css_st = Ticker_st_css_style_;
 var Ticker_st_css_namespace = (/* unused pure expression or super */ null && (Ticker_st_css_namespace_));
-var Ticker_st_css_classes = {"root":"wds_1_95_1_Ticker__root","up":"wds_1_95_1_Ticker__up","down":"wds_1_95_1_Ticker__down"};
+var Ticker_st_css_classes = {"root":"wds_1_98_0_Ticker__root","up":"wds_1_98_0_Ticker__up","down":"wds_1_98_0_Ticker__down"};
 var Ticker_st_css_keyframes = {};
 var Ticker_st_css_layers = {};
 var Ticker_st_css_containers = {};
@@ -44520,7 +44582,7 @@ Ticker.propTypes = {
-var IconAffix_st_css_namespace_ = "wds_1_95_1_IconAffix";
+var IconAffix_st_css_namespace_ = "wds_1_98_0_IconAffix";
 var IconAffix_st_css_style_ = classesRuntime.bind(null, IconAffix_st_css_namespace_);
 var IconAffix_st_css_cssStates = statesRuntime.bind(null, IconAffix_st_css_namespace_);
@@ -44528,7 +44590,7 @@ var IconAffix_st_css_style = (/* unused pure expression or super */ null && (Ico
 var IconAffix_st_css_st = IconAffix_st_css_style_;
 var IconAffix_st_css_namespace = (/* unused pure expression or super */ null && (IconAffix_st_css_namespace_));
-var IconAffix_st_css_classes = {"root":"wds_1_95_1_IconAffix__root"};
+var IconAffix_st_css_classes = {"root":"wds_1_98_0_IconAffix__root"};
 var IconAffix_st_css_keyframes = {};
 var IconAffix_st_css_layers = {};
 var IconAffix_st_css_containers = {};
@@ -44569,7 +44631,7 @@ IconAffix.propTypes = {
-var Affix_st_css_namespace_ = "wds_1_95_1_Affix";
+var Affix_st_css_namespace_ = "wds_1_98_0_Affix";
 var Affix_st_css_style_ = classesRuntime.bind(null, Affix_st_css_namespace_);
 var Affix_st_css_cssStates = statesRuntime.bind(null, Affix_st_css_namespace_);
@@ -44577,7 +44639,7 @@ var Affix_st_css_style = (/* unused pure expression or super */ null && (Affix_s
 var Affix_st_css_st = Affix_st_css_style_;
 var Affix_st_css_namespace = (/* unused pure expression or super */ null && (Affix_st_css_namespace_));
-var Affix_st_css_classes = {"root":"wds_1_95_1_Affix__root","text-tiny-thin":"wds_1_95_1_StylableTypography__text-tiny-thin","text-small-normal":"wds_1_95_1_StylableTypography__text-small-normal","text-small-thin":"wds_1_95_1_StylableTypography__text-small-thin","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_95_1_StylableTypography__text-medium-thin"};
+var Affix_st_css_classes = {"root":"wds_1_98_0_Affix__root","text-tiny-thin":"wds_1_98_0_StylableTypography__text-tiny-thin","text-small-normal":"wds_1_98_0_StylableTypography__text-small-normal","text-small-thin":"wds_1_98_0_StylableTypography__text-small-thin","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal","text-medium-thin":"wds_1_98_0_StylableTypography__text-medium-thin"};
 var Affix_st_css_keyframes = {};
 var Affix_st_css_layers = {};
 var Affix_st_css_containers = {};
@@ -44614,7 +44676,7 @@ Affix.propTypes = {
-var Group_st_css_namespace_ = "wds_1_95_1_Group";
+var Group_st_css_namespace_ = "wds_1_98_0_Group";
 var Group_st_css_style_ = classesRuntime.bind(null, Group_st_css_namespace_);
 var Group_st_css_cssStates = statesRuntime.bind(null, Group_st_css_namespace_);
@@ -44622,7 +44684,7 @@ var Group_st_css_style = (/* unused pure expression or super */ null && (Group_s
 var Group_st_css_st = (/* unused pure expression or super */ null && (Group_st_css_style_));
 var Group_st_css_namespace = (/* unused pure expression or super */ null && (Group_st_css_namespace_));
-var Group_st_css_classes = {"root":"wds_1_95_1_Group__root"};
+var Group_st_css_classes = {"root":"wds_1_98_0_Group__root"};
 var Group_st_css_keyframes = {};
 var Group_st_css_layers = {};
 var Group_st_css_containers = {};
@@ -44655,7 +44717,7 @@ const DropDownArrow_t=({size:r,...e})=>external_React_.createElement("svg",{view
-var StatusIndicator_st_css_namespace_ = "wds_1_95_1_StatusIndicator";
+var StatusIndicator_st_css_namespace_ = "wds_1_98_0_StatusIndicator";
 var StatusIndicator_st_css_style_ = classesRuntime.bind(null, StatusIndicator_st_css_namespace_);
 var StatusIndicator_st_css_cssStates = statesRuntime.bind(null, StatusIndicator_st_css_namespace_);
@@ -44663,7 +44725,7 @@ var StatusIndicator_st_css_style = (/* unused pure expression or super */ null &
 var StatusIndicator_st_css_st = StatusIndicator_st_css_style_;
 var StatusIndicator_st_css_namespace = (/* unused pure expression or super */ null && (StatusIndicator_st_css_namespace_));
-var StatusIndicator_st_css_classes = {"root":"wds_1_95_1_StatusIndicator__root"};
+var StatusIndicator_st_css_classes = {"root":"wds_1_98_0_StatusIndicator__root"};
 var StatusIndicator_st_css_keyframes = {};
 var StatusIndicator_st_css_layers = {};
 var StatusIndicator_st_css_containers = {};
@@ -44749,7 +44811,7 @@ const getVisibleSuffixCount = args => Object.keys(suffixRules)
     .map(key => suffixRules[key])
     .map(fn => fn(args))
     .filter(x => x).length;
-const getComponentWithTooltip = (component, content, ...tooltipProps) => content ? (external_React_default().createElement(Tooltip_Tooltip, Object.assign({}, tooltipProps, { content: content, dataHook: Input_constants_dataHooks.tooltip }), component)) : (component);
+const getComponentWithTooltip = (component, content, ...tooltipProps) => content ? (external_React_default().createElement(Tooltip_Tooltip, { ...tooltipProps, content: content, dataHook: Input_constants_dataHooks.tooltip }, component)) : (component);
 const InputSuffix = ({ statusMessage, status, disabled, onIconClicked, isClearButtonVisible, onClear, clearButtonSize, menuArrow, suffix, tooltipPlacement, clearButtonTooltipContent, clearButtonTooltipProps, }) => {
     const suffixes = [
         {
@@ -44807,7 +44869,10 @@ const StatusContext = external_React_default().createContext({
     ariaDescribedBy: null,
 });
 const getStatusFromContext = ({ status }, propsStatus) => propsStatus || status;
-const getAriaAttributesFromContext = ({ ariaLabelledBy, ariaDescribedBy, }) => (Object.assign(Object.assign({}, (ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy })), (ariaDescribedBy && { 'aria-describedby': ariaDescribedBy })));
+const getAriaAttributesFromContext = ({ ariaLabelledBy, ariaDescribedBy, }) => ({
+    ...(ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }),
+    ...(ariaDescribedBy && { 'aria-describedby': ariaDescribedBy }),
+});
 //# sourceMappingURL=StatusContext.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/Input/Input.js
@@ -44824,7 +44889,6 @@ const getAriaAttributesFromContext = ({ ariaLabelledBy, ariaDescribedBy, }) => (
 const clearButtonSizeMap = {
     [Input_constants_SIZES.small]: 'small',
     [Input_constants_SIZES.medium]: 'medium',
@@ -44926,9 +44990,12 @@ class Input extends external_React_.Component {
             }
         };
         this._renderInput = props => {
-            const { customInput: CustomInputComponent, ref } = props, rest = __rest(props, ["customInput", "ref"]);
-            const inputProps = Object.assign({}, (CustomInputComponent
-                ? Object.assign(Object.assign({ ref }, rest), { 'data-hook': 'wsr-custom-input' }) : Object.assign({ ref }, rest)));
+            const { customInput: CustomInputComponent, ref, ...rest } = props;
+            const inputProps = {
+                ...(CustomInputComponent
+                    ? { ref, ...rest, 'data-hook': 'wsr-custom-input' }
+                    : { ref, ...rest }),
+            };
             return external_React_default().cloneElement(CustomInputComponent ? external_React_default().createElement(CustomInputComponent, null) : external_React_default().createElement("input", null), inputProps);
         };
         this._shouldShowStatusSuffix = ({ finalStatus, statusFromProp }) => !this.props.hideStatusSuffix &&
@@ -45032,27 +45099,54 @@ class Input extends external_React_.Component {
             .map(key => (ariaAttribute['aria-' + key.substr(4).toLowerCase()] =
             this.props[key]));
         /* eslint-disable no-unused-vars */
-        const { className } = props, inputElementProps = __rest(props, ["className"]);
-        const inputElement = (external_React_default().createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => (external_React_default().createElement(StatusContext.Consumer, null, statusContext => this._renderInput(Object.assign(Object.assign(Object.assign({ min,
+        const { className, ...inputElementProps } = props;
+        const inputElement = (external_React_default().createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => (external_React_default().createElement(StatusContext.Consumer, null, statusContext => this._renderInput({
+            min,
             max,
-            step, 'data-hook': 'wsr-input', 'data-mask': !!maskingClassNames, style: { textOverflow }, ref: this._extractRef, className: Input_st_css_st(Input_st_css_classes.input, {}, maskingClassNames), id,
+            step,
+            'data-hook': 'wsr-input',
+            'data-mask': !!maskingClassNames,
+            style: { textOverflow },
+            ref: this._extractRef,
+            className: Input_st_css_st(Input_st_css_classes.input, {}, maskingClassNames),
+            id,
             name,
             disabled,
             defaultValue,
-            value, onChange: this._onChange, onKeyPress: this._onKeyPress, maxLength, onFocus: this._onFocus, onBlur: this._onBlur, onWheel: () => {
+            value,
+            onChange: this._onChange,
+            onKeyPress: this._onKeyPress,
+            maxLength,
+            onFocus: this._onFocus,
+            onBlur: this._onBlur,
+            onWheel: () => {
                 // Although it's opposed to the native behavior, we decided to blur an input type="number" on wheel event in order to prevent change in value.
                 if (type === 'number')
                     this.blur();
-            }, onKeyDown: this._onKeyDown, onPaste,
+            },
+            onKeyDown: this._onKeyDown,
+            onPaste,
             placeholder,
             tabIndex,
-            autoFocus, onClick: this._onClick, onKeyUp, readOnly: readOnly || disableEditing, type,
-            required, autoComplete: autocomplete, onCompositionStart: () => this._onCompositionChange(true), onCompositionEnd: () => this._onCompositionChange(false), customInput,
-            pattern }, getAriaAttributesFromContext(statusContext)), ariaAttribute), inputElementProps))))));
+            autoFocus,
+            onClick: this._onClick,
+            onKeyUp,
+            readOnly: readOnly || disableEditing,
+            type,
+            required,
+            autoComplete: autocomplete,
+            onCompositionStart: () => this._onCompositionChange(true),
+            onCompositionEnd: () => this._onCompositionChange(false),
+            customInput,
+            pattern,
+            ...getAriaAttributesFromContext(statusContext),
+            ...ariaAttribute,
+            ...inputElementProps,
+        })))));
         return (external_React_default().createElement("div", { className: Input_st_css_classes.wrapper },
-            prefix && (external_React_default().createElement(InputContext.Provider, { value: Object.assign(Object.assign({}, this.props), { size, inPrefix: true }) }, prefix)),
+            prefix && (external_React_default().createElement(InputContext.Provider, { value: { ...this.props, size, inPrefix: true } }, prefix)),
             inputElement,
-            external_React_default().createElement(InputContext.Provider, { value: Object.assign(Object.assign({}, this.props), { size, inSuffix: true }) },
+            external_React_default().createElement(InputContext.Provider, { value: { ...this.props, size, inSuffix: true } },
                 external_React_default().createElement(StatusContext.Consumer, null, statusContext => {
                     const status = getStatusFromContext(statusContext, statusProp);
                     return (shouldRenderSuffix({
@@ -45245,7 +45339,7 @@ class ThemedInput extends Input_Input {
         const { input: inputPropsDefaults } = this.context;
         const { size = inputPropsDefaults.size, dataHook, rtl, status, disabled, forceHover, forceFocus, border, className, noLeftBorderRadius, noRightBorderRadius, readOnly, } = this.props;
         const placeholder = this.props.placeholder;
-        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(StatusContext.Consumer, null, statusContext => (external_React_default().createElement("div", Object.assign({ className: Input_st_css_st(Input_st_css_classes.root, {
+        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(StatusContext.Consumer, null, statusContext => (external_React_default().createElement("div", { className: Input_st_css_st(Input_st_css_classes.root, {
                 size,
                 hasFocus: forceFocus || this.state.focus,
                 status: getStatusFromContext(statusContext, status),
@@ -45256,11 +45350,13 @@ class ThemedInput extends Input_Input {
                 noRightBorderRadius,
                 noLeftBorderRadius,
                 newColorsBranding,
-            }, className), dir: rtl ? 'rtl' : null, "data-hook": dataHook }, this._getDataAttr({ statusContext })), super.render({ placeholder })))))));
+            }, className), dir: rtl ? 'rtl' : null, "data-hook": dataHook, ...this._getDataAttr({ statusContext }) }, super.render({ placeholder })))))));
     }
 }
 ThemedInput.contextType = WixStyleReactDefaultsOverrideContext;
-ThemedInput.propTypes = Object.assign({}, Input_Input.propTypes);
+ThemedInput.propTypes = {
+    ...Input_Input.propTypes,
+};
 /* harmony default export */ const Input_ThemedInput = (ThemedInput);
 //# sourceMappingURL=ThemedInput.js.map
 // EXTERNAL MODULE: ../../../node_modules/omit/index.js
@@ -45277,25 +45373,23 @@ class InfiniteScroll extends external_React_.Component {
         this.scrollListener = this.scrollListener.bind(this);
     }
     componentDidMount() {
-        var _a, _b;
         this.pageLoaded = this.props.pageStart;
         this.attachScrollListener();
         if (this.props.initialLoad) {
             this.scrollListener();
         }
         // when component mounts try to load more only when initial data was already rendered
-        else if (((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.length) && this.props.hasMore) {
-            ((_b = this.scrollComponent) === null || _b === void 0 ? void 0 : _b.scrollHeight) && this.scrollListener();
+        else if (this.props.data?.length && this.props.hasMore) {
+            this.scrollComponent?.scrollHeight && this.scrollListener();
         }
     }
     componentDidUpdate(prevProps) {
-        var _a, _b, _c;
         this.attachScrollListener();
         // scroll element might be not scrollable - trigger scroll listener when new data changes the scroll element height
-        if (((_a = prevProps.data) === null || _a === void 0 ? void 0 : _a.length) !== ((_b = this.props.data) === null || _b === void 0 ? void 0 : _b.length) &&
+        if (prevProps.data?.length !== this.props.data?.length &&
             this.props.hasMore) {
             // To avoid infinite loop of `loadMore` in `jsdom` we require the scroll element to have height before we trigger `scrollListener` as a reaction to new `props.data`.
-            ((_c = this.scrollComponent) === null || _c === void 0 ? void 0 : _c.scrollHeight) && this.scrollListener();
+            this.scrollComponent?.scrollHeight && this.scrollListener();
         }
     }
     render() {
@@ -45470,7 +45564,7 @@ const DROPDOWN_LAYOUT_DIRECTIONS = {
-var DropdownLayout_st_css_namespace_ = "wds_1_95_1_DropdownLayout";
+var DropdownLayout_st_css_namespace_ = "wds_1_98_0_DropdownLayout";
 var DropdownLayout_st_css_style_ = classesRuntime.bind(null, DropdownLayout_st_css_namespace_);
 var DropdownLayout_st_css_cssStates = statesRuntime.bind(null, DropdownLayout_st_css_namespace_);
@@ -45478,7 +45572,7 @@ var DropdownLayout_st_css_style = (/* unused pure expression or super */ null &&
 var DropdownLayout_st_css_st = DropdownLayout_st_css_style_;
 var DropdownLayout_st_css_namespace = (/* unused pure expression or super */ null && (DropdownLayout_st_css_namespace_));
-var DropdownLayout_st_css_classes = {"root":"wds_1_95_1_DropdownLayout__root","heading-h6":"wds_1_95_1_StylableTypography__heading-h6","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal","defaultScrollBar":"wds_1_95_1_defaultscrollbar__defaultScrollBar","contentContainer":"wds_1_95_1_DropdownLayout__contentContainer","options":"wds_1_95_1_DropdownLayout__options","option":"wds_1_95_1_DropdownLayout__option","selectableOption":"wds_1_95_1_DropdownLayout__selectableOption","arrow":"wds_1_95_1_DropdownLayout__arrow","loader":"wds_1_95_1_DropdownLayout__loader","linkItem":"wds_1_95_1_DropdownLayout__linkItem"};
+var DropdownLayout_st_css_classes = {"root":"wds_1_98_0_DropdownLayout__root","heading-h6":"wds_1_98_0_StylableTypography__heading-h6","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal","defaultScrollBar":"wds_1_98_0_defaultscrollbar__defaultScrollBar","contentContainer":"wds_1_98_0_DropdownLayout__contentContainer","options":"wds_1_98_0_DropdownLayout__options","option":"wds_1_98_0_DropdownLayout__option","selectableOption":"wds_1_98_0_DropdownLayout__selectableOption","arrow":"wds_1_98_0_DropdownLayout__arrow","loader":"wds_1_98_0_DropdownLayout__loader","linkItem":"wds_1_98_0_DropdownLayout__linkItem"};
 var DropdownLayout_st_css_keyframes = {};
 var DropdownLayout_st_css_layers = {};
 var DropdownLayout_st_css_containers = {};
@@ -45497,7 +45591,7 @@ var DropdownLayout_st_css_vars = {"wds-input-value-font-size-medium":"--wds-inpu
-var ListItemSection_st_css_namespace_ = "wds_1_95_1_ListItemSection";
+var ListItemSection_st_css_namespace_ = "wds_1_98_0_ListItemSection";
 var ListItemSection_st_css_style_ = classesRuntime.bind(null, ListItemSection_st_css_namespace_);
 var ListItemSection_st_css_cssStates = statesRuntime.bind(null, ListItemSection_st_css_namespace_);
@@ -45505,7 +45599,7 @@ var ListItemSection_st_css_style = (/* unused pure expression or super */ null &
 var ListItemSection_st_css_st = ListItemSection_st_css_style_;
 var ListItemSection_st_css_namespace = (/* unused pure expression or super */ null && (ListItemSection_st_css_namespace_));
-var ListItemSection_st_css_classes = {"root":"wds_1_95_1_ListItemSection__root","title":"wds_1_95_1_ListItemSection__title","titleWrapper":"wds_1_95_1_ListItemSection__titleWrapper","suffixWrapper":"wds_1_95_1_ListItemSection__suffixWrapper","suffix":"wds_1_95_1_ListItemSection__suffix"};
+var ListItemSection_st_css_classes = {"root":"wds_1_98_0_ListItemSection__root","title":"wds_1_98_0_ListItemSection__title","titleWrapper":"wds_1_98_0_ListItemSection__titleWrapper","suffixWrapper":"wds_1_98_0_ListItemSection__suffixWrapper","suffix":"wds_1_98_0_ListItemSection__suffix"};
 var ListItemSection_st_css_keyframes = {};
 var ListItemSection_st_css_layers = {};
 var ListItemSection_st_css_containers = {};
@@ -45645,7 +45739,7 @@ const listItemSectionBuilder = ({ id, className, dataHook, type, title, suffix,
     id,
     overrideOptionStyle: true,
     disabled: true,
-    value: props => (external_React_default().createElement(ListItemSection, Object.assign({ className: className, dataHook: dataHook, type: type, title: title, suffix: suffix, ellipsis: ellipsis }, props))),
+    value: props => (external_React_default().createElement(ListItemSection, { className: className, dataHook: dataHook, type: type, title: title, suffix: suffix, ellipsis: ellipsis, ...props })),
 });
 //# sourceMappingURL=ListItemSection.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/ListItemAction/ListItemAction.st.css.js
@@ -45657,7 +45751,7 @@ const listItemSectionBuilder = ({ id, className, dataHook, type, title, suffix,
-var ListItemAction_st_css_namespace_ = "wds_1_95_1_ListItemAction";
+var ListItemAction_st_css_namespace_ = "wds_1_98_0_ListItemAction";
 var ListItemAction_st_css_style_ = classesRuntime.bind(null, ListItemAction_st_css_namespace_);
 var ListItemAction_st_css_cssStates = statesRuntime.bind(null, ListItemAction_st_css_namespace_);
@@ -45665,7 +45759,7 @@ var ListItemAction_st_css_style = (/* unused pure expression or super */ null &&
 var ListItemAction_st_css_st = ListItemAction_st_css_style_;
 var ListItemAction_st_css_namespace = (/* unused pure expression or super */ null && (ListItemAction_st_css_namespace_));
-var ListItemAction_st_css_classes = {"root":"wds_1_95_1_ListItemAction__root","text":"wds_1_95_1_ListItemAction__text","prefixIcon":"wds_1_95_1_ListItemAction__prefixIcon","suffixIcon":"wds_1_95_1_ListItemAction__suffixIcon","textBox":"wds_1_95_1_ListItemAction__textBox","suffix":"wds_1_95_1_ListItemAction__suffix"};
+var ListItemAction_st_css_classes = {"root":"wds_1_98_0_ListItemAction__root","text":"wds_1_98_0_ListItemAction__text","prefixIcon":"wds_1_98_0_ListItemAction__prefixIcon","suffixIcon":"wds_1_98_0_ListItemAction__suffixIcon","textBox":"wds_1_98_0_ListItemAction__textBox","suffix":"wds_1_98_0_ListItemAction__suffix"};
 var ListItemAction_st_css_keyframes = {};
 var ListItemAction_st_css_layers = {};
 var ListItemAction_st_css_containers = {};
@@ -45695,7 +45789,6 @@ const ListItemAction_constants_dataHooks = {
 /** ListItemAction */
 class ListItemActionComponent extends (external_React_default()).PureComponent {
     constructor() {
@@ -45703,7 +45796,7 @@ class ListItemActionComponent extends (external_React_default()).PureComponent {
         this._renderText = () => {
             const { title, size, ellipsis, tooltipModifiers, subtitle, disabled } = this.props;
             return (external_React_default().createElement(Box_Box, { direction: "vertical", className: ListItemAction_st_css_classes.textBox, width: "100%" },
-                external_React_default().createElement(Text, Object.assign({ className: ListItemAction_st_css_st(ListItemAction_st_css_classes.text, { subtitle: Boolean(subtitle) }), dataHook: ListItemAction_constants_dataHooks.title, size: size, ellipsis: ellipsis, weight: "thin", placement: "right", skin: disabled ? 'disabled' : 'standard' }, tooltipModifiers), title),
+                external_React_default().createElement(Text, { className: ListItemAction_st_css_st(ListItemAction_st_css_classes.text, { subtitle: Boolean(subtitle) }), dataHook: ListItemAction_constants_dataHooks.title, size: size, ellipsis: ellipsis, weight: "thin", placement: "right", skin: disabled ? 'disabled' : 'standard', ...tooltipModifiers }, title),
                 subtitle && (external_React_default().createElement(Text, { dataHook: ListItemAction_constants_dataHooks.subtitle, secondary: true, size: "small", ellipsis: ellipsis, weight: "thin", placement: "right", skin: disabled ? 'disabled' : 'standard', light: !disabled }, subtitle))));
         };
         this._renderPrefix = () => {
@@ -45743,10 +45836,10 @@ class ListItemActionComponent extends (external_React_default()).PureComponent {
         }
     }
     render() {
-        const _a = this.props, { dataHook, disabled, skin, prefixIcon, onClick, focusableOnFocus, focusableOnBlur, as: Component, tabIndex, onKeyDown, autoFocus, highlighted, className, subtitle, suffix, suffixIcon } = _a, others = __rest(_a, ["dataHook", "disabled", "skin", "prefixIcon", "onClick", "focusableOnFocus", "focusableOnBlur", "as", "tabIndex", "onKeyDown", "autoFocus", "highlighted", "className", "subtitle", "suffix", "suffixIcon"]);
+        const { dataHook, disabled, skin, prefixIcon, onClick, focusableOnFocus, focusableOnBlur, as: Component, tabIndex, onKeyDown, autoFocus, highlighted, className, subtitle, suffix, suffixIcon, ...others } = this.props;
         // since we're spreading the "rest" props, we don't want to pass
-        const { selected, hovered, ellipsis, title, shouldFocusWithoutScroll } = others, rest = __rest(others, ["selected", "hovered", "ellipsis", "title", "shouldFocusWithoutScroll"]);
-        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(Component, Object.assign({}, rest, { className: ListItemAction_st_css_st(ListItemAction_st_css_classes.root, { skin, disabled, highlighted, ellipsis, newColorsBranding }, className), "data-skin": skin, "data-disabled": disabled, tabIndex: tabIndex, ref: ref => (this.innerComponentRef = ref), autoFocus: autoFocus, onFocus: focusableOnFocus, onBlur: focusableOnBlur, type: Component === 'button' ? 'button' : undefined, "data-hook": dataHook, onKeyDown: !disabled ? onKeyDown : undefined, onClick: !disabled ? onClick : undefined }),
+        const { selected, hovered, ellipsis, title, shouldFocusWithoutScroll, ...rest } = others;
+        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(Component, { ...rest, className: ListItemAction_st_css_st(ListItemAction_st_css_classes.root, { skin, disabled, highlighted, ellipsis, newColorsBranding }, className), "data-skin": skin, "data-disabled": disabled, tabIndex: tabIndex, ref: ref => (this.innerComponentRef = ref), autoFocus: autoFocus, onFocus: focusableOnFocus, onBlur: focusableOnBlur, type: Component === 'button' ? 'button' : undefined, "data-hook": dataHook, onKeyDown: !disabled ? onKeyDown : undefined, onClick: !disabled ? onClick : undefined },
             prefixIcon && this._renderPrefix(),
             this._renderText(),
             suffix && this._renderSuffix(),
@@ -45797,15 +45890,12 @@ ListItemActionComponent.defaultProps = {
     highlighted: false,
 };
 const ListItemAction = Focusable_withFocusable(ListItemActionComponent);
-const listItemActionBuilder = (_a) => {
-    var { title, prefixIcon, onClick, id, disabled, skin, size, dataHook, as, tabIndex, autoFocus, className, ellipsis, subtitle, suffix } = _a, rest = __rest(_a, ["title", "prefixIcon", "onClick", "id", "disabled", "skin", "size", "dataHook", "as", "tabIndex", "autoFocus", "className", "ellipsis", "subtitle", "suffix"]);
-    return ({
-        id,
-        disabled,
-        overrideOptionStyle: true,
-        value: ({ hovered }) => (external_React_default().createElement(ListItemAction, Object.assign({}, rest, { ellipsis: ellipsis, className: className, autoFocus: autoFocus, tabIndex: tabIndex, as: as, onClick: onClick, dataHook: dataHook, title: title, prefixIcon: prefixIcon, skin: skin, size: size, highlighted: hovered, disabled: disabled, subtitle: subtitle, suffix: suffix }))),
-    });
-};
+const listItemActionBuilder = ({ title, prefixIcon, onClick, id, disabled, skin, size, dataHook, as, tabIndex, autoFocus, className, ellipsis, subtitle, suffix, ...rest }) => ({
+    id,
+    disabled,
+    overrideOptionStyle: true,
+    value: ({ hovered }) => (external_React_default().createElement(ListItemAction, { ...rest, ellipsis: ellipsis, className: className, autoFocus: autoFocus, tabIndex: tabIndex, as: as, onClick: onClick, dataHook: dataHook, title: title, prefixIcon: prefixIcon, skin: skin, size: size, highlighted: hovered, disabled: disabled, subtitle: subtitle, suffix: suffix })),
+});
 //# sourceMappingURL=ListItemAction.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/DropdownLayout/DropdownLayout.js
@@ -45821,7 +45911,6 @@ const listItemActionBuilder = (_a) => {
 const MOUSE_EVENTS_SUPPORTED = ['mouseup', 'touchend'];
 const KEY = {
     arrowLeft: 'ArrowLeft',
@@ -46172,8 +46261,16 @@ class DropdownLayout extends (external_React_default()).PureComponent {
         }
     }
     _convertOptionToListItemActionBuilder({ option, idx }) {
-        const { id, value, disabled, optionTitle, title } = option, rest = __rest(option, ["id", "value", "disabled", "optionTitle", "title"]);
-        return listItemActionBuilder(Object.assign({ id: id !== undefined ? id : idx, ref: ref => (this.children[id] = ref), tabIndex: id === this.state.focusedItemId && !disabled ? '0' : '-1', disabled, title: optionTitle, role: 'menuitem' }, rest));
+        const { id, value, disabled, optionTitle, title, ...rest } = option;
+        return listItemActionBuilder({
+            id: id !== undefined ? id : idx,
+            ref: ref => (this.children[id] = ref),
+            tabIndex: id === this.state.focusedItemId && !disabled ? '0' : '-1',
+            disabled,
+            title: optionTitle,
+            role: 'menuitem',
+            ...rest,
+        });
     }
     _isControlled() {
         return (typeof this.props.selectedId !== 'undefined' &&
@@ -46322,10 +46419,14 @@ class DropdownLayout extends (external_React_default()).PureComponent {
             this.focusableItemsIdsList = [...this.focusableItemsIdsList, id];
         }
         const isActionItem = listType === ListType.action;
-        return (external_React_default().createElement("div", Object.assign({ "aria-selected": hasLink || isActionItem || disabled ? undefined : optionState.selected, "aria-hidden": disabled }, this._getItemDataAttr(Object.assign({}, optionState)), { role: hasLink || isActionItem ? undefined : 'option', className: overrideOptionStyle
+        return (external_React_default().createElement("div", { "aria-selected": hasLink || isActionItem || disabled ? undefined : optionState.selected, "aria-hidden": disabled, ...this._getItemDataAttr({ ...optionState }), role: hasLink || isActionItem ? undefined : 'option', className: overrideOptionStyle
                 ? null
-                : DropdownLayout_st_css_st(DropdownLayout_st_css_classes.option, Object.assign(Object.assign({}, optionState), { selected: optionState.selected && selectedHighlight, itemHeight,
-                    overrideStyle })), ref: node => this._setSelectedOptionNode(node, option), onClick: !disabled ? e => this._onSelect(idx, e) : null, key: idx, onMouseEnter: () => this._onMouseEnter(idx), onMouseLeave: this._onMouseLeave, "data-hook": `dropdown-item-${id}`, onKeyDown: e => this._onActionListKeyDown(e, id) }), option.value(optionState)));
+                : DropdownLayout_st_css_st(DropdownLayout_st_css_classes.option, {
+                    ...optionState,
+                    selected: optionState.selected && selectedHighlight,
+                    itemHeight,
+                    overrideStyle,
+                }), ref: node => this._setSelectedOptionNode(node, option), onClick: !disabled ? e => this._onSelect(idx, e) : null, key: idx, onMouseEnter: () => this._onMouseEnter(idx), onMouseLeave: this._onMouseLeave, "data-hook": `dropdown-item-${id}`, onKeyDown: e => this._onActionListKeyDown(e, id) }, option.value(optionState)));
     }
     _markOptionByProperty(props) {
         if (this.state.hovered === DropdownLayout_NOT_HOVERED_INDEX && props.markedOption) {
@@ -46363,11 +46464,11 @@ class DropdownLayout extends (external_React_default()).PureComponent {
                     : DROPDOWN_LAYOUT_DIRECTIONS.DOWN,
                 containerStyles: !inContainer,
             }, className), tabIndex: tabIndex, onKeyDown: this._onSelectListKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, ref: this.containerRef },
-            external_React_default().createElement("div", Object.assign({}, this._getDataAttributes(), { className: DropdownLayout_st_css_classes.contentContainer, style: {
+            external_React_default().createElement("div", { ...this._getDataAttributes(), className: DropdownLayout_st_css_classes.contentContainer, style: {
                     overflow,
                     maxHeight: DropdownLayout_getUnit(maxHeightPixels),
                     minWidth: DropdownLayout_getUnit(minWidthPixels),
-                } }),
+                } },
                 this._renderNode(fixedHeader),
                 external_React_default().createElement("div", { className: DropdownLayout_st_css_classes.options, style: {
                         maxHeight: DropdownLayout_getUnit(parseInt(maxHeightPixels, 10) - 35),
@@ -46511,7 +46612,7 @@ DropdownLayout.NONE_SELECTED_ID = DropdownLayout_NOT_HOVERED_INDEX;
-var DropdownBase_st_css_namespace_ = "wds_1_95_1_DropdownBase";
+var DropdownBase_st_css_namespace_ = "wds_1_98_0_DropdownBase";
 var DropdownBase_st_css_style_ = classesRuntime.bind(null, DropdownBase_st_css_namespace_);
 var DropdownBase_st_css_cssStates = statesRuntime.bind(null, DropdownBase_st_css_namespace_);
@@ -46519,7 +46620,7 @@ var DropdownBase_st_css_style = (/* unused pure expression or super */ null && (
 var DropdownBase_st_css_st = DropdownBase_st_css_style_;
 var DropdownBase_st_css_namespace = (/* unused pure expression or super */ null && (DropdownBase_st_css_namespace_));
-var DropdownBase_st_css_classes = {"root":"wds_1_95_1_DropdownBase__root","list":"wds_1_95_1_DropdownBase__list"};
+var DropdownBase_st_css_classes = {"root":"wds_1_98_0_DropdownBase__root","list":"wds_1_98_0_DropdownBase__list"};
 var DropdownBase_st_css_keyframes = {};
 var DropdownBase_st_css_layers = {};
 var DropdownBase_st_css_containers = {};
@@ -46538,7 +46639,8 @@ var DropdownBase_st_css_vars = {};
-var InputWithOptions_st_css_namespace_ = "wds_1_95_1_InputWithOptions";
+var InputWithOptions_st_css_namespace_ = "wds_1_98_0_InputWithOptions";
 var InputWithOptions_st_css_style_ = classesRuntime.bind(null, InputWithOptions_st_css_namespace_);
 var InputWithOptions_st_css_cssStates = statesRuntime.bind(null, InputWithOptions_st_css_namespace_);
@@ -46546,7 +46648,7 @@ var InputWithOptions_st_css_style = (/* unused pure expression or super */ null
 var InputWithOptions_st_css_st = InputWithOptions_st_css_style_;
 var InputWithOptions_st_css_namespace = (/* unused pure expression or super */ null && (InputWithOptions_st_css_namespace_));
-var InputWithOptions_st_css_classes = {"root":"wds_1_95_1_InputWithOptions__root","nativeSelectWrapper":"wds_1_95_1_InputWithOptions__nativeSelectWrapper","nativeSelect":"wds_1_95_1_InputWithOptions__nativeSelect","nativeOption":"wds_1_95_1_InputWithOptions__nativeOption"};
+var InputWithOptions_st_css_classes = {"root":"wds_1_98_0_InputWithOptions__root","nativeSelectWrapper":"wds_1_98_0_InputWithOptions__nativeSelectWrapper","nativeSelect":"wds_1_98_0_InputWithOptions__nativeSelect","nativeOption":"wds_1_98_0_InputWithOptions__nativeOption"};
 var InputWithOptions_st_css_keyframes = {};
 var InputWithOptions_st_css_layers = {};
 var InputWithOptions_st_css_containers = {};
@@ -46697,7 +46799,19 @@ class InputWithOptions extends external_React_.Component {
             'className',
         ], this.props), inputAdditionalProps);
         const { inputElement } = inputProps;
-        return external_React_default().cloneElement(inputElement, Object.assign(Object.assign({ menuArrow: true, ref: this.input }, inputProps), { onChange: this._onChange, onInputClicked: this._onInputClicked, onFocus: this._onFocus, onBlur: this._onBlur, onCompositionChange: this.onCompositionChange, width: inputElement.props.width, textOverflow: this.props.textOverflow || inputElement.props.textOverflow, tabIndex: this.props.native ? -1 : 0 }));
+        return external_React_default().cloneElement(inputElement, {
+            menuArrow: true,
+            ref: this.input,
+            ...inputProps,
+            onChange: this._onChange,
+            onInputClicked: this._onInputClicked,
+            onFocus: this._onFocus,
+            onBlur: this._onBlur,
+            onCompositionChange: this.onCompositionChange,
+            width: inputElement.props.width,
+            textOverflow: this.props.textOverflow || inputElement.props.textOverflow,
+            tabIndex: this.props.native ? -1 : 0,
+        });
     }
     _renderDropdownLayout() {
         const { highlight, value } = this.props;
@@ -46706,7 +46820,7 @@ class InputWithOptions extends external_React_.Component {
         const customStyle = { marginLeft: this.props.dropdownOffsetLeft };
         return (external_React_default().createElement("div", { className: `${this.uniqueId} ${this.dropdownClasses()}`, style: customStyle, "data-hook": "dropdown-layout-wrapper" },
             external_React_default().createElement(InputWithOptions_HighlightContext.Provider, { value: { highlight, match: value } },
-                external_React_default().createElement(DropdownLayout_DropdownLayout, Object.assign({ ref: dropdownLayout => (this.dropdownLayout = dropdownLayout) }, dropdownProps, { dataHook: "inputwithoptions-dropdownlayout", visible: true, onClose: this.hideOptions, onSelect: this._onSelect, isComposing: this.state.isComposing, inContainer: true, tabIndex: -1 })))));
+                external_React_default().createElement(DropdownLayout_DropdownLayout, { ref: dropdownLayout => (this.dropdownLayout = dropdownLayout), ...dropdownProps, dataHook: "inputwithoptions-dropdownlayout", visible: true, onClose: this.hideOptions, onSelect: this._onSelect, isComposing: this.state.isComposing, inContainer: true, tabIndex: -1 }))));
     }
     _renderNativeSelect() {
         const { options, onSelect, disabled } = this.props;
@@ -46719,12 +46833,11 @@ class InputWithOptions extends external_React_.Component {
                 } }, options.map((option, index) => (external_React_default().createElement("option", { "data-hook": `native-option-${option.id}`, "data-index": index, key: option.id, value: option.value, className: InputWithOptions_st_css_classes.nativeOption }, option.value))))));
     }
     render() {
-        var _a;
         const { native, dataHook, popoverProps, dropDirectionUp, dropdownWidth, className, } = this.props;
         const placement = dropDirectionUp ? 'top' : popoverProps.placement;
         const body = popoverProps.appendTo === 'window';
         const rootProps = this.rootAdditionalProps();
-        return !native ? (external_React_default().createElement(Popover_Popover, Object.assign({ className: InputWithOptions_st_css_st(InputWithOptions_st_css_classes.root, (_a = rootProps.className) !== null && _a !== void 0 ? _a : className) }, DEFAULT_POPOVER_PROPS, { dynamicWidth: body, excludeClass: this.uniqueId }, popoverProps, { width: dropdownWidth, placement: placement, dataHook: dataHook, onKeyDown: this._onKeyDown, onClickOutside: this.onClickOutside, shown: this.isDropdownLayoutVisible() }),
+        return !native ? (external_React_default().createElement(Popover_Popover, { className: InputWithOptions_st_css_st(InputWithOptions_st_css_classes.root, { size: 'medium' }, rootProps.className ?? className), ...DEFAULT_POPOVER_PROPS, dynamicWidth: body, excludeClass: this.uniqueId, ...popoverProps, width: dropdownWidth, placement: placement, dataHook: dataHook, onKeyDown: this._onKeyDown, onClickOutside: this.onClickOutside, shown: this.isDropdownLayoutVisible() },
             external_React_default().createElement(Popover_Popover.Element, null,
                 external_React_default().createElement("div", { "data-input-parent": true, className: this.inputClasses() }, this.renderInput())),
             external_React_default().createElement(Popover_Popover.Content, null, this._renderDropdownLayout()))) : (this._renderNativeSelect());
@@ -46913,32 +47026,48 @@ class InputWithOptions extends external_React_.Component {
         this.input.current && this.input.current.select();
     }
 }
-InputWithOptions.defaultProps = Object.assign(Object.assign(Object.assign({}, Input_ThemedInput.defaultProps), DropdownLayout_DropdownLayout.defaultProps), { onSelect: () => { }, options: [], closeOnSelect: true, inputElement: external_React_default().createElement(Input_ThemedInput, null), valueParser: DEFAULT_VALUE_PARSER, dropdownWidth: null, popoverProps: DEFAULT_POPOVER_PROPS, dropdownOffsetLeft: '0', showOptionsIfEmptyInput: true, autocomplete: 'off,chrome-off', native: false });
-InputWithOptions.propTypes = Object.assign(Object.assign(Object.assign({}, Input_ThemedInput.propTypes), DropdownLayout_DropdownLayout.propTypes), {
+InputWithOptions.defaultProps = {
+    ...Input_ThemedInput.defaultProps,
+    ...DropdownLayout_DropdownLayout.defaultProps,
+    onSelect: () => { },
+    options: [],
+    closeOnSelect: true,
+    inputElement: external_React_default().createElement(Input_ThemedInput, null),
+    valueParser: DEFAULT_VALUE_PARSER,
+    dropdownWidth: null,
+    popoverProps: DEFAULT_POPOVER_PROPS,
+    dropdownOffsetLeft: '0',
+    showOptionsIfEmptyInput: true,
+    autocomplete: 'off,chrome-off',
+    native: false,
+};
+InputWithOptions.propTypes = {
+    ...Input_ThemedInput.propTypes,
+    ...DropdownLayout_DropdownLayout.propTypes,
     /** Use a customized input component instead of the default @wix/design-system `<Input/>` component */
-    inputElement: (prop_types_default()).element,
+    inputElement: (prop_types_default()).element,
     /** Closes DropdownLayout on option selection */
-    closeOnSelect: (prop_types_default()).bool,
+    closeOnSelect: (prop_types_default()).bool,
     /** A callback which is called when the user performs a Submit-Action.
      * Submit-Action triggers are: "Enter", "Tab", [typing any defined delimiters], Paste action.
      * `onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters */
-    onManuallyInput: (prop_types_default()).func,
+    onManuallyInput: (prop_types_default()).func,
     /** A callback which is called when options dropdown is shown */
-    onOptionsShow: (prop_types_default()).func,
+    onOptionsShow: (prop_types_default()).func,
     /** A callback which is called when options dropdown is hidden */
-    onOptionsHide: (prop_types_default()).func,
+    onOptionsHide: (prop_types_default()).func,
     /** Function that receives an option, and should return the value to be displayed. */
-    valueParser: (prop_types_default()).func,
+    valueParser: (prop_types_default()).func,
     /** Sets the width of the dropdown */
-    dropdownWidth: (prop_types_default()).string,
+    dropdownWidth: (prop_types_default()).string,
     /** Sets the offset of the dropdown from the left */
-    dropdownOffsetLeft: (prop_types_default()).string,
+    dropdownOffsetLeft: (prop_types_default()).string,
     /** Controls whether to show options if input is empty */
-    showOptionsIfEmptyInput: (prop_types_default()).bool,
+    showOptionsIfEmptyInput: (prop_types_default()).bool,
     /** Mark in bold word parts based on search pattern */
-    highlight: (prop_types_default()).bool,
+    highlight: (prop_types_default()).bool,
     /** Indicates whether to render using the native select element */
-    native: (prop_types_default()).bool,
+    native: (prop_types_default()).bool,
     /** common popover props */
     popoverProps: prop_types_default().shape({
         appendTo: prop_types_default().oneOf(['window', 'scrollParent', 'parent', 'viewport']),
@@ -46964,7 +47093,8 @@ InputWithOptions.propTypes = Object.assign(Object.assign(Object.assign({}, Input
             'left-start',
         ]),
         dynamicWidth: (prop_types_default()).bool,
-    }) });
+    }),
+};
 InputWithOptions.displayName = 'InputWithOptions';
 /* harmony default export */ const InputWithOptions_InputWithOptions = (InputWithOptions);
 //# sourceMappingURL=InputWithOptions.js.map
@@ -46975,7 +47105,7 @@ InputWithOptions.displayName = 'InputWithOptions';
-var Dropdown_st_css_namespace_ = "wds_1_95_1_Dropdown";
+var Dropdown_st_css_namespace_ = "wds_1_98_0_Dropdown";
 var Dropdown_st_css_style_ = classesRuntime.bind(null, Dropdown_st_css_namespace_);
 var Dropdown_st_css_cssStates = statesRuntime.bind(null, Dropdown_st_css_namespace_);
@@ -46983,7 +47113,7 @@ var Dropdown_st_css_style = (/* unused pure expression or super */ null && (Drop
 var Dropdown_st_css_st = Dropdown_st_css_style_;
 var Dropdown_st_css_namespace = (/* unused pure expression or super */ null && (Dropdown_st_css_namespace_));
-var Dropdown_st_css_classes = {"root":"wds_1_95_1_Dropdown__root","input":"wds_1_95_1_Input__input","showPointer":"wds_1_95_1_Dropdown__showPointer"};
+var Dropdown_st_css_classes = {"root":"wds_1_98_0_Dropdown__root","input":"wds_1_98_0_Input__input","showPointer":"wds_1_98_0_Dropdown__showPointer"};
 var Dropdown_st_css_keyframes = {};
 var Dropdown_st_css_layers = {};
 var Dropdown_st_css_containers = {};
@@ -47007,7 +47137,11 @@ const NO_SELECTED_ID = null;
 class Dropdown extends InputWithOptions_InputWithOptions {
     constructor(props) {
         super(props);
-        this.state = Object.assign({ value: '', selectedId: NO_SELECTED_ID }, Dropdown.getNextState(props, defaultTo_default()(props.selectedId, props.initialSelectedId)));
+        this.state = {
+            value: '',
+            selectedId: NO_SELECTED_ID,
+            ...Dropdown.getNextState(props, defaultTo_default()(props.selectedId, props.initialSelectedId)),
+        };
     }
     isSelectedIdControlled() {
         return typeof this.props.selectedId !== 'undefined';
@@ -47274,16 +47408,14 @@ Dropdown.displayName = 'Dropdown';
 class DropdownBase extends (external_React_default()).PureComponent {
     constructor(props) {
-        var _a, _b;
         super(props);
         this._dropdownLayoutRef = null;
         this._shouldCloseOnMouseLeave = false;
         this.state = {
             open: this.props.open,
-            selectedId: (_b = (_a = this.props.selectedId) !== null && _a !== void 0 ? _a : this.props.initialSelectedId) !== null && _b !== void 0 ? _b : -1,
+            selectedId: this.props.selectedId ?? this.props.initialSelectedId ?? -1,
             listAutoFocus: false,
         };
         /**
@@ -47463,10 +47595,10 @@ class DropdownBase extends (external_React_default()).PureComponent {
     render() {
         const { dataHook, placement, appendTo, showArrow, zIndex, moveBy, options, minWidth, maxWidth, fixed, flip, tabIndex, overflow, dynamicWidth, maxHeight, fluid, animate, className, focusOnSelectedOption, infiniteScroll, loadMore, hasMore, focusOnOption, scrollToOption, markedOption, onMouseDown, listType, fixedHeader, fixedFooter, autoFocus, } = this.props;
         const { open, selectedId } = this.state;
-        const _a = this.props, { onShow, onHide } = _a, popoverProps = __rest(_a, ["onShow", "onHide"]);
-        return (external_React_default().createElement(Popover_Popover, Object.assign({ "data-list-type": listType }, popoverProps, { animate: animate, dataHook: dataHook, shown: open, placement: placement, dynamicWidth: dynamicWidth, appendTo: appendTo, showArrow: showArrow, zIndex: zIndex, moveBy: moveBy, onKeyDown: this._handleKeyDown, onMouseEnter: this._handlePopoverMouseEnter, onMouseLeave: this._handlePopoverMouseLeave, onClickOutside: this._handleClickOutside, fixed: fixed, flip: flip, fluid: fluid, className: DropdownBase_st_css_st(DropdownBase_st_css_classes.root, {
+        const { onShow, onHide, ...popoverProps } = this.props;
+        return (external_React_default().createElement(Popover_Popover, { "data-list-type": listType, ...popoverProps, animate: animate, dataHook: dataHook, shown: open, placement: placement, dynamicWidth: dynamicWidth, appendTo: appendTo, showArrow: showArrow, zIndex: zIndex, moveBy: moveBy, onKeyDown: this._handleKeyDown, onMouseEnter: this._handlePopoverMouseEnter, onMouseLeave: this._handlePopoverMouseLeave, onClickOutside: this._handleClickOutside, fixed: fixed, flip: flip, fluid: fluid, className: DropdownBase_st_css_st(DropdownBase_st_css_classes.root, {
                 withWidth: Boolean(minWidth || maxWidth),
-            }, className) }),
+            }, className) },
             external_React_default().createElement(Popover_Popover.Element, null, this._renderChildren()),
             external_React_default().createElement(Popover_Popover.Content, null,
                 external_React_default().createElement("div", { style: {
@@ -59990,7 +60122,7 @@ const testDataHooks = {
-var IconButton_st_css_namespace_ = "wds_1_95_1_IconButton";
+var IconButton_st_css_namespace_ = "wds_1_98_0_IconButton";
 var IconButton_st_css_style_ = classesRuntime.bind(null, IconButton_st_css_namespace_);
 var IconButton_st_css_cssStates = statesRuntime.bind(null, IconButton_st_css_namespace_);
@@ -59998,7 +60130,7 @@ var IconButton_st_css_style = (/* unused pure expression or super */ null && (Ic
 var IconButton_st_css_st = IconButton_st_css_style_;
 var IconButton_st_css_namespace = (/* unused pure expression or super */ null && (IconButton_st_css_namespace_));
-var IconButton_st_css_classes = {"root":"wds_1_95_1_IconButton__root"};
+var IconButton_st_css_classes = {"root":"wds_1_98_0_IconButton__root"};
 var IconButton_st_css_keyframes = {};
 var IconButton_st_css_layers = {};
 var IconButton_st_css_containers = {};
@@ -60019,7 +60151,6 @@ var IconButton_st_css_vars = {"wds-button-border-radius-tiny":"--wds-button-bord
 class IconButton extends external_React_.PureComponent {
     constructor(props) {
         super(props);
@@ -60036,9 +60167,12 @@ class IconButton extends external_React_.PureComponent {
     }
     render() {
         const { button: buttonPropsDefaults } = this.context;
-        const _a = this.props, { skin, className, priority, size = buttonPropsDefaults.size, children, dataHook, ariaLabel, ariaLabelledBy } = _a, rest = __rest(_a, ["skin", "className", "priority", "size", "children", "dataHook", "ariaLabel", "ariaLabelledBy"]);
+        const { skin, className, priority, size = buttonPropsDefaults.size, children, dataHook, ariaLabel, ariaLabelledBy, ...rest } = this.props;
         const childSize = iconChildSize[size];
-        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(ButtonCore_ButtonCore, Object.assign({}, rest, { ref: this.button, className: IconButton_st_css_st(IconButton_st_css_classes.root, { skin, priority, size, newColorsBranding }, className) }, generateDataAttr(Object.assign(Object.assign({}, this.props), { size }), ['skin', 'size', 'priority']), { "data-hook": dataHook, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }), children &&
+        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement(ButtonCore_ButtonCore, { ...rest, ref: this.button, className: IconButton_st_css_st(IconButton_st_css_classes.root, { skin, priority, size, newColorsBranding }, className), ...generateDataAttr({
+                ...this.props,
+                size,
+            }, ['skin', 'size', 'priority']), "data-hook": dataHook, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, children &&
             external_React_default().cloneElement(children, {
                 size: childSize,
                 width: childSize,
@@ -60113,7 +60247,7 @@ const Avatar_constants_dataHooks = {
-var AvatarCore_st_css_namespace_ = "wds_1_95_1_AvatarCore";
+var AvatarCore_st_css_namespace_ = "wds_1_98_0_AvatarCore";
 var AvatarCore_st_css_style_ = classesRuntime.bind(null, AvatarCore_st_css_namespace_);
 var AvatarCore_st_css_cssStates = statesRuntime.bind(null, AvatarCore_st_css_namespace_);
@@ -60121,7 +60255,7 @@ var AvatarCore_st_css_style = (/* unused pure expression or super */ null && (Av
 var AvatarCore_st_css_st = AvatarCore_st_css_style_;
 var AvatarCore_st_css_namespace = (/* unused pure expression or super */ null && (AvatarCore_st_css_namespace_));
-var AvatarCore_st_css_classes = {"root":"wds_1_95_1_AvatarCore__root","content":"wds_1_95_1_AvatarCore__content"};
+var AvatarCore_st_css_classes = {"root":"wds_1_98_0_AvatarCore__root","content":"wds_1_98_0_AvatarCore__content"};
 var AvatarCore_st_css_keyframes = {};
 var AvatarCore_st_css_layers = {};
 var AvatarCore_st_css_containers = {};
@@ -60139,7 +60273,7 @@ var AvatarCore_st_css_vars = {};
-var gradients_st_css_namespace_ = "wds_1_95_1_gradients";
+var gradients_st_css_namespace_ = "wds_1_98_0_gradients";
 var gradients_st_css_style_ = classesRuntime.bind(null, gradients_st_css_namespace_);
 var gradients_st_css_cssStates = statesRuntime.bind(null, gradients_st_css_namespace_);
@@ -60147,7 +60281,7 @@ var gradients_st_css_style = (/* unused pure expression or super */ null && (gra
 var gradients_st_css_st = (/* unused pure expression or super */ null && (gradients_st_css_style_));
 var gradients_st_css_namespace = (/* unused pure expression or super */ null && (gradients_st_css_namespace_));
-var gradients_st_css_classes = {"root":"wds_1_95_1_gradients__root"};
+var gradients_st_css_classes = {"root":"wds_1_98_0_gradients__root"};
 var gradients_st_css_keyframes = {};
 var gradients_st_css_layers = {};
 var gradients_st_css_containers = {};
@@ -60171,7 +60305,7 @@ var gradients_st_css_vars = {};
-var Avatar_st_css_namespace_ = "wds_1_95_1_Avatar";
+var Avatar_st_css_namespace_ = "wds_1_98_0_Avatar";
 var Avatar_st_css_style_ = classesRuntime.bind(null, Avatar_st_css_namespace_);
 var Avatar_st_css_cssStates = statesRuntime.bind(null, Avatar_st_css_namespace_);
@@ -60179,7 +60313,7 @@ var Avatar_st_css_style = (/* unused pure expression or super */ null && (Avatar
 var Avatar_st_css_st = Avatar_st_css_style_;
 var Avatar_st_css_namespace = (/* unused pure expression or super */ null && (Avatar_st_css_namespace_));
-var Avatar_st_css_classes = {"root":"wds_1_95_1_Avatar__root","text-small-bold":"wds_1_95_1_StylableTypography__text-small-bold","text-tiny-normal":"wds_1_95_1_StylableTypography__text-tiny-normal","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_95_1_StylableTypography__text-medium-bold","text-tiny-bold":"wds_1_95_1_StylableTypography__text-tiny-bold","placeholder":"wds_1_95_1_Avatar__placeholder","avatarContainer":"wds_1_95_1_Avatar__avatarContainer","coreAvatar":"wds_1_95_1_Avatar__coreAvatar","avatar":"wds_1_95_1_Avatar__avatar","presence":"wds_1_95_1_Avatar__presence","indication":"wds_1_95_1_Avatar__indication","iconButtonShadow":"wds_1_95_1_Avatar__iconButtonShadow","colorA1":"wds_1_95_1_Avatar__colorA1","colorA2":"wds_1_95_1_Avatar__colorA2","colorA3":"wds_1_95_1_Avatar__colorA3","colorA4":"wds_1_95_1_Avatar__colorA4","colorA5":"wds_1_95_1_Avatar__colorA5","colorA6":"wds_1_95_1_Avatar__colorA6","loaderContainer":"wds_1_95_1_Avatar__loaderContainer","overlay":"wds_1_95_1_Avatar__overlay","loader":"wds_1_95_1_Avatar__loader"};
+var Avatar_st_css_classes = {"root":"wds_1_98_0_Avatar__root","text-small-bold":"wds_1_98_0_StylableTypography__text-small-bold","text-tiny-normal":"wds_1_98_0_StylableTypography__text-tiny-normal","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal","text-medium-bold":"wds_1_98_0_StylableTypography__text-medium-bold","text-tiny-bold":"wds_1_98_0_StylableTypography__text-tiny-bold","placeholder":"wds_1_98_0_Avatar__placeholder","avatarContainer":"wds_1_98_0_Avatar__avatarContainer","coreAvatar":"wds_1_98_0_Avatar__coreAvatar","avatar":"wds_1_98_0_Avatar__avatar","presence":"wds_1_98_0_Avatar__presence","indication":"wds_1_98_0_Avatar__indication","iconButtonShadow":"wds_1_98_0_Avatar__iconButtonShadow","colorA1":"wds_1_98_0_Avatar__colorA1","colorA2":"wds_1_98_0_Avatar__colorA2","colorA3":"wds_1_98_0_Avatar__colorA3","colorA4":"wds_1_98_0_Avatar__colorA4","colorA5":"wds_1_98_0_Avatar__colorA5","colorA6":"wds_1_98_0_Avatar__colorA6","loaderContainer":"wds_1_98_0_Avatar__loaderContainer","overlay":"wds_1_98_0_Avatar__overlay","loader":"wds_1_98_0_Avatar__loader"};
 var Avatar_st_css_keyframes = {};
 var Avatar_st_css_layers = {};
 var Avatar_st_css_containers = {};
@@ -60289,7 +60423,6 @@ function utils_nameToInitials(name, limit = 2) {
 const DEFAULT_CONTENT_TYPE = 'placeholder';
 /**
  * AvatarCore is a type of element that visually represents a user, either as an image, placeholder or text.
@@ -60304,13 +60437,12 @@ class AvatarCore extends external_React_.Component {
         this.state = { imgLoaded: false };
         this.img = undefined;
         this.loadImg = () => {
-            var _a, _b;
             this.img = new Image();
             this.img.onload = () => {
                 // don't set state after unmount
                 this.img && this.setState({ imgLoaded: true });
             };
-            this.img.src = (_b = (_a = this.props.imgProps) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : '';
+            this.img.src = this.props.imgProps?.src ?? '';
         };
         this.unloadImg = () => {
             // TODO: Is this necessary? It is taken from https://github.com/mbrevda/react-image/blob/c402ed3f5d54b88e51eca3326a1e81d964995795/src/index.js#L146
@@ -60401,8 +60533,8 @@ class AvatarCore extends external_React_.Component {
                 if (!this.props.imgProps) {
                     return null;
                 }
-                const _a = this.props.imgProps, { alt, className } = _a, rest = __rest(_a, ["alt", "className"]);
-                return (external_React_.createElement("img", Object.assign({ "data-hook": "content", className: classnames_default()(AvatarCore_st_css_classes.content, className), alt: alt ? alt : this.props.name }, rest)));
+                const { alt, className, ...rest } = this.props.imgProps;
+                return (external_React_.createElement("img", { "data-hook": "content", className: classnames_default()(AvatarCore_st_css_classes.content, className), alt: alt ? alt : this.props.name, ...rest }));
             }
             default: {
                 return null;
@@ -60419,10 +60551,10 @@ class AvatarCore extends external_React_.Component {
             onKeyDown: this._handleKeyDown,
             tabIndex: 0,
         };
-        return (external_React_.createElement("div", Object.assign({ "data-content-type": contentType, "data-img-loaded": this.state.imgLoaded, title: title || name, "aria-label": ariaLabel || name, onClick: onClick }, focusProps, { className: AvatarCore_st_css_st(AvatarCore_st_css_classes.root, {
+        return (external_React_.createElement("div", { "data-content-type": contentType, "data-img-loaded": this.state.imgLoaded, title: title || name, "aria-label": ariaLabel || name, onClick: onClick, ...focusProps, className: AvatarCore_st_css_st(AvatarCore_st_css_classes.root, {
                 imgLoaded: this.state.imgLoaded,
                 contentType,
-            }, this.props.className) }, propsUtils_filterDataProps(this.props)), this.getContent(contentType)));
+            }, this.props.className), ...propsUtils_filterDataProps(this.props) }, this.getContent(contentType)));
     }
 }
 AvatarCore.displayName = 'AvatarCore';
@@ -60443,7 +60575,6 @@ AvatarCore.defaultProps = {
 const getSizeNumber = size => Number(size.substring(4));
 const defaultSize = 48;
 const minSmallIconButton = 60;
@@ -60470,7 +60601,7 @@ class Avatar_Avatar extends (external_React_default()).PureComponent {
         };
     }
     render() {
-        const _a = this.props, { size, presence, indication, color, customIndication, onIndicationClick, dataHook, className, shape, text, placeholder, name, onClick, showIndicationOnHover, loading } = _a, rest = __rest(_a, ["size", "presence", "indication", "color", "customIndication", "onIndicationClick", "dataHook", "className", "shape", "text", "placeholder", "name", "onClick", "showIndicationOnHover", "loading"]);
+        const { size, presence, indication, color, customIndication, onIndicationClick, dataHook, className, shape, text, placeholder, name, onClick, showIndicationOnHover, loading, ...rest } = this.props;
         const { fadeIndication, showIndication } = this.state;
         const calculatedColor = color || string_to_color(text || name); // if color is provided as a prop use it, otherwise, generate a color based on the text
         const sizeNumber = getSizeNumber(size);
@@ -60492,7 +60623,7 @@ class Avatar_Avatar extends (external_React_default()).PureComponent {
                     newColorsBranding,
                 }) },
                 external_React_default().createElement("div", { className: Avatar_st_css_classes.coreAvatar },
-                    external_React_default().createElement(AvatarCore_AvatarCore, Object.assign({}, rest, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : (external_React_default().createElement(AvatarDefaultPlaceholder, { shape: shape, size: size })), text: text, name: name, onClick: onClick, initialsLimit: sizeNumber < 30 ? 1 : undefined, "data-hook": Avatar_constants_dataHooks.avatarCore, className: Avatar_st_css_st(Avatar_st_css_classes.avatar, Avatar_st_css_classes[`color${capitalize(calculatedColor)}`]) }))),
+                    external_React_default().createElement(AvatarCore_AvatarCore, { ...rest, placeholder: placeholder ?? (external_React_default().createElement(AvatarDefaultPlaceholder, { shape: shape, size: size })), text: text, name: name, onClick: onClick, initialsLimit: sizeNumber < 30 ? 1 : undefined, "data-hook": Avatar_constants_dataHooks.avatarCore, className: Avatar_st_css_st(Avatar_st_css_classes.avatar, Avatar_st_css_classes[`color${capitalize(calculatedColor)}`]) })),
                 renderLoader && [
                     external_React_default().createElement("div", { key: "overlay", className: Avatar_st_css_st(Avatar_st_css_classes.loaderContainer, Avatar_st_css_classes.overlay) }),
                     external_React_default().createElement("div", { key: "loader", className: Avatar_st_css_st(Avatar_st_css_classes.loaderContainer, Avatar_st_css_classes.loader) },
@@ -60531,7 +60662,8 @@ const CoreAvatarPropTypes = {
     onClick: (prop_types_default()).func,
 };
 Avatar_Avatar.displayName = 'Avatar';
-Avatar_Avatar.propTypes = Object.assign(Object.assign({}, CoreAvatarPropTypes), {
+Avatar_Avatar.propTypes = {
+    ...CoreAvatarPropTypes,
     /** Controls the size of an avatar. */
     size: prop_types_default().oneOf([
         'size90',
@@ -60542,33 +60674,34 @@ Avatar_Avatar.propTypes = Object.assign(Object.assign({}, CoreAvatarPropTypes),
         'size30',
         'size24',
         'size18',
-    ]),
+    ]),
     /**
      * Controls the background color of the avatar. If not provided,
      * color is determined by the provided text or name so that each name will receive a different color.
      */
-    color: prop_types_default().oneOf(['A1', 'A2', 'A3', 'A4', 'A5', 'A6']),
+    color: prop_types_default().oneOf(['A1', 'A2', 'A3', 'A4', 'A5', 'A6']),
     /** Controls the shape of the image. */
-    shape: prop_types_default().oneOf(['circle', 'square']),
+    shape: prop_types_default().oneOf(['circle', 'square']),
     /** Specifies a CSS class name to be appended to the component’s root element. */
-    className: (prop_types_default()).string,
+    className: (prop_types_default()).string,
     /** Applies a data-hook HTML attribute that can be used in the tests. */
-    dataHook: (prop_types_default()).string,
+    dataHook: (prop_types_default()).string,
     /** Sets the presence status of an avatar. */
-    presence: prop_types_default().oneOf(['online', 'offline', 'busy']),
+    presence: prop_types_default().oneOf(['online', 'offline', 'busy']),
     /** Accept any content to render as an indication item. */
-    indication: (prop_types_default()).node,
+    indication: (prop_types_default()).node,
     /**
      * Accept any content to render as a custom indication item. This indication element will not be wrapped by an IconButton.
      * It could be rendered in other shapes (such as square).
      * */
-    customIndication: (prop_types_default()).node,
+    customIndication: (prop_types_default()).node,
     /** Defines a callback function which is called every time indication element is clicked. */
-    onIndicationClick: (prop_types_default()).func,
+    onIndicationClick: (prop_types_default()).func,
     /** Shows indication element on hover. */
-    showIndicationOnHover: (prop_types_default()).bool,
+    showIndicationOnHover: (prop_types_default()).bool,
     /** Shows a loader on top of an avatar. */
-    loading: (prop_types_default()).bool });
+    loading: (prop_types_default()).bool,
+};
 Avatar_Avatar.defaultProps = {
     size: 'size48',
     shape: 'circle',
@@ -60673,7 +60806,7 @@ const customStyles=(props,rtl)=>{return{valueContainer:provided=>({...provided,p
-var Tag_st_css_namespace_ = "wds_1_95_1_Tag";
+var Tag_st_css_namespace_ = "wds_1_98_0_Tag";
 var Tag_st_css_style_ = classesRuntime.bind(null, Tag_st_css_namespace_);
 var Tag_st_css_cssStates = statesRuntime.bind(null, Tag_st_css_namespace_);
@@ -60681,7 +60814,7 @@ var Tag_st_css_style = (/* unused pure expression or super */ null && (Tag_st_cs
 var Tag_st_css_st = Tag_st_css_style_;
 var Tag_st_css_namespace = (/* unused pure expression or super */ null && (Tag_st_css_namespace_));
-var Tag_st_css_classes = {"root":"wds_1_95_1_Tag__root","thumb":"wds_1_95_1_Tag__thumb","removeButton":"wds_1_95_1_Tag__removeButton","text":"wds_1_95_1_Tag__text"};
+var Tag_st_css_classes = {"root":"wds_1_98_0_Tag__root","thumb":"wds_1_98_0_Tag__thumb","removeButton":"wds_1_98_0_Tag__removeButton","text":"wds_1_98_0_Tag__text"};
 var Tag_st_css_keyframes = {};
 var Tag_st_css_layers = {};
 var Tag_st_css_containers = {};
@@ -60764,7 +60897,7 @@ class Tag extends (external_React_default()).PureComponent {
         const { id, onClick, maxWidth, dataHook, size, disabled, theme, thumb, removable, className, } = this.props;
         const clickable = !!onClick;
         const hoverable = !disabled && !!onClick;
-        return (external_React_default().createElement("span", Object.assign({ className: Tag_st_css_st(Tag_st_css_classes.root, {
+        return (external_React_default().createElement("span", { className: Tag_st_css_st(Tag_st_css_classes.root, {
                 withRemoveButton: removable,
                 withThumb: !!thumb,
                 disabled,
@@ -60772,15 +60905,15 @@ class Tag extends (external_React_default()).PureComponent {
                 hoverable,
                 size,
                 theme,
-            }, className) }, generateDataAttr(Object.assign(Object.assign({}, this.props), { hoverable, clickable }), [
-            'size',
-            'disabled',
-            'theme',
-            'hoverable',
-            'clickable',
-        ]), { "data-hook": dataHook, id: id, onClick: this._handleOnClick, style: {
+            }, className), ...generateDataAttr({ ...this.props, hoverable, clickable }, [
+                'size',
+                'disabled',
+                'theme',
+                'hoverable',
+                'clickable',
+            ]), "data-hook": dataHook, id: id, onClick: this._handleOnClick, style: {
                 maxWidth: typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`,
-            } }),
+            } },
             this._renderThumb(),
             this._renderText(),
             this._renderRemoveButton()));
@@ -60843,7 +60976,7 @@ Tag.defaultProps = {
-var InputWithTags_st_css_namespace_ = "wds_1_95_1_InputWithTags";
+var InputWithTags_st_css_namespace_ = "wds_1_98_0_InputWithTags";
 var InputWithTags_st_css_style_ = classesRuntime.bind(null, InputWithTags_st_css_namespace_);
 var InputWithTags_st_css_cssStates = statesRuntime.bind(null, InputWithTags_st_css_namespace_);
@@ -60851,7 +60984,7 @@ var InputWithTags_st_css_style = (/* unused pure expression or super */ null &&
 var InputWithTags_st_css_st = InputWithTags_st_css_style_;
 var InputWithTags_st_css_namespace = (/* unused pure expression or super */ null && (InputWithTags_st_css_namespace_));
-var InputWithTags_st_css_classes = {"root":"wds_1_95_1_InputWithTags__root","text-medium-normal":"wds_1_95_1_StylableTypography__text-medium-normal","inputWrapper":"wds_1_95_1_InputWithTags__inputWrapper","emptyInput":"wds_1_95_1_InputWithTags__emptyInput","selectMode":"wds_1_95_1_InputWithTags__selectMode","inputSuffix":"wds_1_95_1_InputWithTags__inputSuffix","menuArrow":"wds_1_95_1_InputWithTags__menuArrow","statusIndicator":"wds_1_95_1_InputWithTags__statusIndicator","suffixes":"wds_1_95_1_InputWithTags__suffixes","hiddenDiv":"wds_1_95_1_InputWithTags__hiddenDiv","hasMaxHeight":"wds_1_95_1_InputWithTags__hasMaxHeight","customSuffix":"wds_1_95_1_InputWithTags__customSuffix","tagsContainer":"wds_1_95_1_InputWithTags__tagsContainer","draggedTag":"wds_1_95_1_InputWithTags__draggedTag","draggedTagPlaceholder":"wds_1_95_1_InputWithTags__draggedTagPlaceholder","input":"wds_1_95_1_InputWithTags__input"};
+var InputWithTags_st_css_classes = {"root":"wds_1_98_0_InputWithTags__root","text-medium-normal":"wds_1_98_0_StylableTypography__text-medium-normal","inputWrapper":"wds_1_98_0_InputWithTags__inputWrapper","emptyInput":"wds_1_98_0_InputWithTags__emptyInput","selectMode":"wds_1_98_0_InputWithTags__selectMode","inputSuffix":"wds_1_98_0_InputWithTags__inputSuffix","menuArrow":"wds_1_98_0_InputWithTags__menuArrow","statusIndicator":"wds_1_98_0_InputWithTags__statusIndicator","suffixes":"wds_1_98_0_InputWithTags__suffixes","hiddenDiv":"wds_1_98_0_InputWithTags__hiddenDiv","hasMaxHeight":"wds_1_98_0_InputWithTags__hasMaxHeight","customSuffix":"wds_1_98_0_InputWithTags__customSuffix","tagsContainer":"wds_1_98_0_InputWithTags__tagsContainer","draggedTag":"wds_1_98_0_InputWithTags__draggedTag","draggedTagPlaceholder":"wds_1_98_0_InputWithTags__draggedTagPlaceholder","input":"wds_1_98_0_InputWithTags__input"};
 var InputWithTags_st_css_keyframes = {};
 var InputWithTags_st_css_layers = {};
 var InputWithTags_st_css_containers = {};
@@ -60905,7 +61038,11 @@ class CustomDragLayer extends (external_React_default()).Component {
         };
         this.renderPreview = () => {
             const { offsetOfHandle } = this.props;
-            const styles = Object.assign(Object.assign({}, layerStyles), { left: -offsetOfHandle.x, top: -offsetOfHandle.y });
+            const styles = {
+                ...layerStyles,
+                left: -offsetOfHandle.x,
+                top: -offsetOfHandle.y,
+            };
             return (external_React_default().createElement("div", { style: styles, ref: node => (dragPreviewRef = node) }, this.props.renderPreview({})));
         };
         this.renderPreviewInPortal = () => {
@@ -61012,7 +61149,7 @@ const source = {
             index,
             containerId,
             groupName,
-            originalIndex: index,
+            originalIndex: index, // as index is mutable during d&d, we need another storage for original index
             originalItem: item,
             onMoveOut,
             realTime: {
@@ -61041,10 +61178,10 @@ const source = {
             const isSameContainer = containerId === monitor.getDropResult().containerId;
             if (isSameGroup || isSameContainer) {
                 onDrop({
-                    payload: monitor.getItem().originalItem,
-                    removedIndex: monitor.getItem().originalIndex,
-                    addedIndex: monitor.getItem().index,
-                    addedToContainerId: monitor.getDropResult().containerId,
+                    payload: monitor.getItem().originalItem, // original item
+                    removedIndex: monitor.getItem().originalIndex, // original item index
+                    addedIndex: monitor.getItem().index, // new item index
+                    addedToContainerId: monitor.getDropResult().containerId, // new container for item
                     removedFromContainerId: containerId, // original item container
                 });
             }
@@ -61097,7 +61234,7 @@ class DraggableSource extends (external_React_default()).Component {
             return renderItem({
                 id,
                 item,
-                previewStyles: Object.assign({ width: this.state.itemWidth }, previewStyles),
+                previewStyles: { width: this.state.itemWidth, ...previewStyles },
                 isPreview: true,
                 connectHandle: (noop_default()),
                 delayed,
@@ -61196,9 +61333,9 @@ class DraggableSource extends (external_React_default()).Component {
     }
 }
 DraggableSource.propTypes = {
-    isDragging: (prop_types_default()).bool,
-    connectDragSource: (prop_types_default()).func,
-    connectDragPreview: (prop_types_default()).func,
+    isDragging: (prop_types_default()).bool, // from react-dnd
+    connectDragSource: (prop_types_default()).func, // from react-dnd
+    connectDragPreview: (prop_types_default()).func, // from react-dnd
     usePortal: (prop_types_default()).bool,
     groupName: (prop_types_default()).string,
     containerId: prop_types_default().oneOfType([(prop_types_default()).number, (prop_types_default()).string]),
@@ -61322,7 +61459,7 @@ DraggableTarget.defaultProps = {
 DraggableTarget.propTypes = {
     dataHook: (prop_types_default()).string,
     children: (prop_types_default()).any,
-    connectDropTarget: (prop_types_default()).func,
+    connectDropTarget: (prop_types_default()).func, // from react-dnd
     containerId: (prop_types_default()).string,
     droppable: (prop_types_default()).bool,
     groupName: (prop_types_default()).string,
@@ -62327,7 +62464,6 @@ DraggableManager.propTypes = {
 class Draggable extends (external_React_default()).Component {
     constructor() {
         super(...arguments);
@@ -62381,9 +62517,8 @@ class Draggable extends (external_React_default()).Component {
             return canDragByDelay && propsCanDrag;
         };
     }
-    shouldComponentUpdate(_a, nextState) {
-        var { listOfPropsThatAffectItems } = _a, nextProps = __rest(_a, ["listOfPropsThatAffectItems"]);
-        const _b = this.props, { listOfPropsThatAffectItems: prevListOfPropsThatAffectItems } = _b, prevProps = __rest(_b, ["listOfPropsThatAffectItems"]);
+    shouldComponentUpdate({ listOfPropsThatAffectItems, ...nextProps }, nextState) {
+        const { listOfPropsThatAffectItems: prevListOfPropsThatAffectItems, ...prevProps } = this.props;
         if (!shallowequal_default()(nextProps, prevProps) ||
             !shallowequal_default()(listOfPropsThatAffectItems, prevListOfPropsThatAffectItems)) {
             return true;
@@ -62397,10 +62532,10 @@ class Draggable extends (external_React_default()).Component {
         this.resetDelayTimer();
     }
     render() {
-        const _a = this.props, { hasDragged } = _a, restProps = __rest(_a, ["hasDragged"]);
-        return (external_React_default().createElement(components_DraggableTarget, Object.assign({}, restProps),
+        const { hasDragged, ...restProps } = this.props;
+        return (external_React_default().createElement(components_DraggableTarget, { ...restProps },
             external_React_default().createElement("div", { onMouseDown: this.countDelay, onMouseUp: this.resetDelayState, "data-hook": "delay-wrapper" },
-                external_React_default().createElement(components_DraggableSource, Object.assign({}, restProps, { ignoreMouseEvents: hasDragged, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, canDrag: this.canDrag, delayed: !!this.props.delay && this.state.delayed })))));
+                external_React_default().createElement(components_DraggableSource, { ...restProps, ignoreMouseEvents: hasDragged, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, canDrag: this.canDrag, delayed: !!this.props.delay && this.state.delayed }))));
     }
 }
 Draggable.defaultProps = {
@@ -62602,7 +62737,7 @@ function identity(value) {
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/utils/operators/range.js
 function range(start, end) {
     const itemsAmount = Math.abs(start - end);
-    const _range = Array.apply(null, { length: itemsAmount }).map(Number.call, Number);
+    const _range = Array.from({ length: itemsAmount }, (_, index) => index);
     if (start < end) {
         return _range.map(item => item + start);
     }
@@ -62634,7 +62769,7 @@ const SortableListBase_constants_dataHooks = {
 /* harmony default export */ const withDNDContext = (Component => {
     const withDNDContext = props => (external_React_default().createElement("div", { "data-hook": props.dataHook },
         external_React_default().createElement(Draggable_Draggable.Manager, { dataHook: SortableListBase_constants_dataHooks.provider },
-            external_React_default().createElement(Component, Object.assign({}, props)))));
+            external_React_default().createElement(Component, { ...props }))));
     withDNDContext.displayName = Component.displayName;
     return withDNDContext;
 });
@@ -62667,7 +62802,7 @@ class SortableListBase extends (external_React_default()).PureComponent {
             this.wrapperNodes[index] = { node, index, item };
         };
         this.reSetAnimationState = (overrides = {}) => {
-            this.setState(Object.assign({ animationShifts: {}, draggedId: null }, overrides));
+            this.setState({ animationShifts: {}, draggedId: null, ...overrides });
         };
         this.handleMoveOut = id => {
             this.reSetAnimationState({
@@ -62791,7 +62926,10 @@ class SortableListBase extends (external_React_default()).PureComponent {
                 else {
                     const moveToIndex = Math.min(items.length - 1, indexToInsert);
                     const shiftForward = moveToIndex > originalIndex;
-                    animationShifts = Object.assign(Object.assign({}, this.getAnimationShifts(originalIndex, moveToIndex, shiftForward)), { [originalIndex]: this.getPlaceholderShift(originalIndex, moveToIndex, shiftForward) });
+                    animationShifts = {
+                        ...this.getAnimationShifts(originalIndex, moveToIndex, shiftForward),
+                        [originalIndex]: this.getPlaceholderShift(originalIndex, moveToIndex, shiftForward),
+                    };
                 }
                 return { items, animationShifts, draggedId };
             });
@@ -62832,14 +62970,20 @@ class SortableListBase extends (external_React_default()).PureComponent {
         this.renderItem = args => {
             const dropped = this.context.dragDropManager.monitor.didDrop();
             const dragging = this.context.dragDropManager.monitor.isDragging();
-            return this.props.renderItem(Object.assign(Object.assign({}, args), { isListInDragState: dragging && !dropped }));
+            return this.props.renderItem({
+                ...args,
+                isListInDragState: dragging && !dropped,
+            });
         };
     }
     UNSAFE_componentWillReceiveProps({ items, style }) {
         // We clear state on drag end if element was dragged from another list,
         // `onDragEnd` will be called on "source" list, not "target" one.
         this.reSetAnimationState({ items: items ? items : this.state.items });
-        this.noUserSelectionStyle = Object.assign(Object.assign({}, noUserSelect), style);
+        this.noUserSelectionStyle = {
+            ...noUserSelect,
+            ...style,
+        };
     }
     renderPreview() {
         const { className, contentClassName, renderItem } = this.props;
@@ -62866,9 +63010,9 @@ class SortableListBase extends (external_React_default()).PureComponent {
         if (dragPreview) {
             return this.renderPreview();
         }
-        return (external_React_default().createElement(components_Container, Object.assign({ className: className, onDrop: this.handleDrop, total: this.state.items.length, style: isTextSelectionEnabled ? this.noUserSelectionStyle : style }, common),
+        return (external_React_default().createElement(components_Container, { className: className, onDrop: this.handleDrop, total: this.state.items.length, style: isTextSelectionEnabled ? this.noUserSelectionStyle : style, ...common },
             external_React_default().createElement("div", { className: contentClassName }, items.map((item, index) => {
-                return (external_React_default().createElement(Draggable_Draggable, Object.assign({ dataHook: item.dataHook, key: `${item.id}-${containerId}`, shift: animationShifts[index], hasDragged: !!draggedId && draggedId !== item.id, setWrapperNode: this.setWrapperNode, animationDuration: animationDuration, animationTiming: animationTiming }, common, { id: item.id, index: index, item: item, renderItem: this.renderItem, withHandle: withHandle, usePortal: usePortal, onDrop: this.handleDrop, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd, canDrag: this.props.canDrag, delay: this.props.delay, listOfPropsThatAffectItems: this.props.listOfPropsThatAffectItems })));
+                return (external_React_default().createElement(Draggable_Draggable, { dataHook: item.dataHook, key: `${item.id}-${containerId}`, shift: animationShifts[index], hasDragged: !!draggedId && draggedId !== item.id, setWrapperNode: this.setWrapperNode, animationDuration: animationDuration, animationTiming: animationTiming, ...common, id: item.id, index: index, item: item, renderItem: this.renderItem, withHandle: withHandle, usePortal: usePortal, onDrop: this.handleDrop, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd, canDrag: this.props.canDrag, delay: this.props.delay, listOfPropsThatAffectItems: this.props.listOfPropsThatAffectItems }));
             }))));
     }
 }
@@ -62882,37 +63026,38 @@ SortableListBase.displayName = 'SortableListBase';
 SortableListBase.contextTypes = {
     dragDropManager: (prop_types_default()).object,
 };
-SortableListBase.propTypes = Object.assign(Object.assign({
+SortableListBase.propTypes = {
     /** indicates if user can drop item in the list by default it's true */
-    droppable: (prop_types_default()).bool }, Draggable_Draggable.propTypes), {
+    droppable: (prop_types_default()).bool,
+    ...Draggable_Draggable.propTypes,
     /** function that specifying where the item can be inserted */
-    insertPosition: prop_types_default().oneOf(['start', 'end', 'any']),
+    insertPosition: prop_types_default().oneOf(['start', 'end', 'any']),
     /** in case of wrong position of item during drag you can force SortableListBase to use portals */
-    usePortal: (prop_types_default()).bool,
+    usePortal: (prop_types_default()).bool,
     /**
      if you are having nested SortableListBases,
      list that you are currently dragging need to be marked as dragPreview
      inside of renderItem callback
      */
-    dragPreview: (prop_types_default()).bool,
+    dragPreview: (prop_types_default()).bool,
     /** list of items with {id: any} */
-    items: (prop_types_default()).array,
+    items: (prop_types_default()).array,
     /** callback for drag start */
-    onDragStart: (prop_types_default()).func,
+    onDragStart: (prop_types_default()).func,
     /** callback for drag end */
-    onDragEnd: (prop_types_default()).func,
+    onDragEnd: (prop_types_default()).func,
     /** className of the root container */
-    className: (prop_types_default()).string,
+    className: (prop_types_default()).string,
     /** className of the first items parent container */
-    contentClassName: (prop_types_default()).string,
+    contentClassName: (prop_types_default()).string,
     /** animation duration in ms, default = 0 - disabled */
-    animationDuration: (prop_types_default()).number,
+    animationDuration: (prop_types_default()).number,
     /** animation timing function, default = '' (ease) */
-    animationTiming: (prop_types_default()).string,
+    animationTiming: (prop_types_default()).string,
     /** callback that could prevent item from dragging */
-    canDrag: (prop_types_default()).func,
+    canDrag: (prop_types_default()).func,
     /** number in seconds to add delay between initial mouseDown and drag start  */
-    delay: (prop_types_default()).number,
+    delay: (prop_types_default()).number,
     /**
       In case that you are using some external props inside of renderItems method,
       you need to define them here.
@@ -62928,7 +63073,8 @@ SortableListBase.propTypes = Object.assign(Object.assign({
         )
       }
     */
-    listOfPropsThatAffectItems: (prop_types_default()).array });
+    listOfPropsThatAffectItems: (prop_types_default()).array,
+};
 /* harmony default export */ const SortableListBase_SortableListBase = (withDNDContext(SortableListBase));
 //# sourceMappingURL=SortableListBase.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/dnd-styles/dnd-styles.st.css.js
@@ -62938,7 +63084,7 @@ SortableListBase.propTypes = Object.assign(Object.assign({
-var dnd_styles_st_css_namespace_ = "wds_1_95_1_dndstyles";
+var dnd_styles_st_css_namespace_ = "wds_1_98_0_dndstyles";
 var dnd_styles_st_css_style_ = classesRuntime.bind(null, dnd_styles_st_css_namespace_);
 var dnd_styles_st_css_cssStates = statesRuntime.bind(null, dnd_styles_st_css_namespace_);
@@ -62946,7 +63092,7 @@ var dnd_styles_st_css_style = (/* unused pure expression or super */ null && (dn
 var dnd_styles_st_css_st = (/* unused pure expression or super */ null && (dnd_styles_st_css_style_));
 var dnd_styles_st_css_namespace = (/* unused pure expression or super */ null && (dnd_styles_st_css_namespace_));
-var dnd_styles_st_css_classes = {"root":"wds_1_95_1_dndstyles__root","item":"wds_1_95_1_dndstyles__item","itemPlaceholder":"wds_1_95_1_dndstyles__itemPlaceholder","itemPreview":"wds_1_95_1_dndstyles__itemPreview","list":"wds_1_95_1_dndstyles__list","gridItemPlaceholder":"wds_1_95_1_dndstyles__gridItemPlaceholder","isInitialPositionToDrop":"wds_1_95_1_dndstyles__isInitialPositionToDrop","withGridItemStrip":"wds_1_95_1_dndstyles__withGridItemStrip","withGridItemStripRight":"wds_1_95_1_dndstyles__withGridItemStripRight","gridItemPreview":"wds_1_95_1_dndstyles__gridItemPreview"};
+var dnd_styles_st_css_classes = {"root":"wds_1_98_0_dndstyles__root","item":"wds_1_98_0_dndstyles__item","itemPlaceholder":"wds_1_98_0_dndstyles__itemPlaceholder","itemPreview":"wds_1_98_0_dndstyles__itemPreview","list":"wds_1_98_0_dndstyles__list","gridItemPlaceholder":"wds_1_98_0_dndstyles__gridItemPlaceholder","isInitialPositionToDrop":"wds_1_98_0_dndstyles__isInitialPositionToDrop","withGridItemStrip":"wds_1_98_0_dndstyles__withGridItemStrip","withGridItemStripRight":"wds_1_98_0_dndstyles__withGridItemStripRight","gridItemPreview":"wds_1_98_0_dndstyles__gridItemPreview"};
 var dnd_styles_st_css_keyframes = {};
 var dnd_styles_st_css_layers = {};
 var dnd_styles_st_css_containers = {};
@@ -62985,7 +63131,6 @@ var dnd_styles_st_css_vars = {};
 class InputWithTags extends (external_React_default()).Component {
     constructor(props) {
         super(props);
@@ -63040,9 +63185,9 @@ class InputWithTags extends (external_React_default()).Component {
         }, ...appliedClasses);
     }
     render() {
-        const _a = this.props, { tags, onRemoveTag, onReorder, placeholder, status, statusMessage, disabled, readOnly, delimiters, mode, size = 'medium', border, className } = _a, inputProps = __rest(_a, ["tags", "onRemoveTag", "onReorder", "placeholder", "status", "statusMessage", "disabled", "readOnly", "delimiters", "mode", "size", "border", "className"]);
+        const { tags, onRemoveTag, onReorder, placeholder, status, statusMessage, disabled, readOnly, delimiters, mode, size = 'medium', border, className, ...inputProps } = this.props;
         /* eslint-disable no-unused-vars */
-        const { onManuallyInput, inputElement, closeOnSelect, predicate, onClickOutside, fixedHeader, fixedFooter, dataHook, onFocus, withSelection, onBlur, menuArrow, onInputClicked } = inputProps, desiredProps = __rest(inputProps, ["onManuallyInput", "inputElement", "closeOnSelect", "predicate", "onClickOutside", "fixedHeader", "fixedFooter", "dataHook", "onFocus", "withSelection", "onBlur", "menuArrow", "onInputClicked"]);
+        const { onManuallyInput, inputElement, closeOnSelect, predicate, onClickOutside, fixedHeader, fixedFooter, dataHook, onFocus, withSelection, onBlur, menuArrow, onInputClicked, ...desiredProps } = inputProps;
         let rowMultiplier;
         if (tags.length && tags[0].size === 'large') {
             rowMultiplier = 47;
@@ -63054,21 +63199,18 @@ class InputWithTags extends (external_React_default()).Component {
             this.props.maxNumRows * rowMultiplier ||
             'initial';
         const finalStatus = getStatusFromContext(this.context, status);
-        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement("div", Object.assign({ className: this._getRootClassName(newColorsBranding), style: { maxHeight }, onClick: this.handleClick, "data-hook": this.props.dataHook, "data-focus": this._hasFocus() || null, "data-status": finalStatus }, getAriaAttributesFromContext(this.context)),
-            onReorder ? (external_React_default().createElement(SortableListBase_SortableListBase, { contentClassName: InputWithTags_st_css_classes.tagsContainer, items: tags, onDrop: onReorder, renderItem: this.renderReorderableTag })) : (tags.map((_a) => {
-                var { label } = _a, rest = __rest(_a, ["label"]);
-                return (external_React_default().createElement(Tag_Tag, Object.assign({ key: rest.id, dataHook: "tag", disabled: disabled, onRemove: onRemoveTag }, rest), label));
-            })),
+        return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (external_React_default().createElement("div", { className: this._getRootClassName(newColorsBranding), style: { maxHeight }, onClick: this.handleClick, "data-hook": this.props.dataHook, "data-focus": this._hasFocus() || null, "data-status": finalStatus, ...getAriaAttributesFromContext(this.context) },
+            onReorder ? (external_React_default().createElement(SortableListBase_SortableListBase, { contentClassName: InputWithTags_st_css_classes.tagsContainer, items: tags, onDrop: onReorder, renderItem: this.renderReorderableTag })) : (tags.map(({ label, ...rest }) => (external_React_default().createElement(Tag_Tag, { key: rest.id, dataHook: "tag", disabled: disabled, onRemove: onRemoveTag, ...rest }, label)))),
             external_React_default().createElement("span", { className: classnames_default()(InputWithTags_st_css_classes.inputWrapper, !tags.length), "data-hook": "inner-input-with-tags" },
                 external_React_default().createElement("div", { className: classnames_default()(InputWithTags_st_css_classes.hiddenDiv) }, this.state.inputValue),
-                external_React_default().createElement(Input_ThemedInput, Object.assign({ className: InputWithTags_st_css_classes.input, size: size, width: this.props.width, ref: input => (this.input = input), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, placeholder: tags.length === 0 ? placeholder : '' }, desiredProps, { dataHook: "inputWithTags-input", disabled: disabled, readOnly: readOnly, disableEditing: this._isSelectMode(), onChange: e => {
+                external_React_default().createElement(Input_ThemedInput, { className: InputWithTags_st_css_classes.input, size: size, width: this.props.width, ref: input => (this.input = input), onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, placeholder: tags.length === 0 ? placeholder : '', ...desiredProps, dataHook: "inputWithTags-input", disabled: disabled, readOnly: readOnly, disableEditing: this._isSelectMode(), onChange: e => {
                         if (!delimiters.includes(e.target.value)) {
                             this.setState({ inputValue: e.target.value });
                             desiredProps.onChange && desiredProps.onChange(e);
                         }
                     }, withSelection: true, prefix: this.props.customSuffix &&
                         !this.props.hideCustomSuffix &&
-                        !this.state.inputHasFocus && (external_React_default().createElement("span", { "data-hook": "custom-suffix", className: InputWithTags_st_css_classes.customSuffix }, this.props.customSuffix)), hideStatusSuffix: true }))),
+                        !this.state.inputHasFocus && (external_React_default().createElement("span", { "data-hook": "custom-suffix", className: InputWithTags_st_css_classes.customSuffix }, this.props.customSuffix)), hideStatusSuffix: true })),
             external_React_default().createElement("div", { className: InputWithTags_st_css_classes.inputSuffix },
                 !disabled &&
                     (['error', 'warning', 'loading'].includes(status) ||
@@ -63077,8 +63219,7 @@ class InputWithTags extends (external_React_default()).Component {
                 this._isSelectMode() && (external_React_default().createElement("div", { className: InputWithTags_st_css_classes.menuArrow, "data-hook": "input-menu-arrow" },
                     external_React_default().createElement(DropDownArrow_p, null))))))));
     }
-    renderReorderableTag(_a) {
-        var _b = _a.item, { id, label } = _b, itemProps = __rest(_b, ["id", "label"]), { previewStyles, isPlaceholder, isPreview } = _a, rest = __rest(_a, ["item", "previewStyles", "isPlaceholder", "isPreview"]);
+    renderReorderableTag({ item: { id, label, ...itemProps }, previewStyles, isPlaceholder, isPreview, ...rest }) {
         const { onRemoveTag, disabled } = this.props;
         const _classes = classnames_default()({
             [dnd_styles.itemPlaceholder]: isPlaceholder,
@@ -63087,7 +63228,7 @@ class InputWithTags extends (external_React_default()).Component {
             [InputWithTags_st_css_classes.draggedTag]: isPreview,
         });
         return (external_React_default().createElement("div", { style: previewStyles },
-            external_React_default().createElement(Tag_Tag, Object.assign({ id: id, dataHook: "tag", disabled: disabled, className: _classes, onRemove: onRemoveTag }, itemProps, rest), label)));
+            external_React_default().createElement(Tag_Tag, { id: id, dataHook: "tag", disabled: disabled, className: _classes, onRemove: onRemoveTag, ...itemProps, ...rest }, label)));
     }
     focus() {
         this.input.focus();
@@ -63149,7 +63290,7 @@ var difference_default = /*#__PURE__*/__webpack_require__.n(difference);
-var MultiSelect_st_css_namespace_ = "wds_1_95_1_MultiSelect";
+var MultiSelect_st_css_namespace_ = "wds_1_98_0_MultiSelect";
 var MultiSelect_st_css_style_ = classesRuntime.bind(null, MultiSelect_st_css_namespace_);
 var MultiSelect_st_css_cssStates = statesRuntime.bind(null, MultiSelect_st_css_namespace_);
@@ -63157,7 +63298,7 @@ var MultiSelect_st_css_style = (/* unused pure expression or super */ null && (M
 var MultiSelect_st_css_st = MultiSelect_st_css_style_;
 var MultiSelect_st_css_namespace = (/* unused pure expression or super */ null && (MultiSelect_st_css_namespace_));
-var MultiSelect_st_css_classes = {"root":"wds_1_95_1_MultiSelect__root","inputWithTags":"wds_1_95_1_MultiSelect__inputWithTags","autoSizeInput":"wds_1_95_1_MultiSelect__autoSizeInput"};
+var MultiSelect_st_css_classes = {"root":"wds_1_98_0_MultiSelect__root","inputWithTags":"wds_1_98_0_MultiSelect__inputWithTags","autoSizeInput":"wds_1_98_0_MultiSelect__autoSizeInput"};
 var MultiSelect_st_css_keyframes = {};
 var MultiSelect_st_css_layers = {};
 var MultiSelect_st_css_containers = {};
@@ -63177,14 +63318,13 @@ var MultiSelect_st_css_vars = {};
 class MultiSelect extends InputWithOptions_InputWithOptions {
     constructor(props) {
         super(props);
         this.onKeyDown = this.onKeyDown.bind(this);
         this.onPaste = this.onPaste.bind(this);
         this._onBlur = this._onBlur.bind(this);
-        this.state = Object.assign(Object.assign({}, this.state), { pasteDetected: false });
+        this.state = { ...this.state, pasteDetected: false };
     }
     hideOptions() {
         super.hideOptions();
@@ -63310,7 +63450,7 @@ class MultiSelect extends InputWithOptions_InputWithOptions {
         }
     }
     optionToTag({ id, value, tag, theme }) {
-        return tag ? Object.assign({ id }, tag) : { id, label: value, theme };
+        return tag ? { id, ...tag } : { id, label: value, theme };
     }
     onSelect(option) {
         this.clearInput();
@@ -63335,16 +63475,14 @@ class MultiSelect extends InputWithOptions_InputWithOptions {
         }
     }
 }
-MultiSelect.autoSizeInput = (_a) => {
-    var { className, 'data-ref': dataRef } = _a, rest = __rest(_a, ["className", 'data-ref']);
+MultiSelect.autoSizeInput = ({ className, 'data-ref': dataRef, ...rest }) => {
     const inputClassName = classnames_default()(className, MultiSelect_st_css_classes.autoSizeInput);
-    return external_React_default().createElement("input", Object.assign({}, rest, { ref: dataRef, className: inputClassName }));
+    return external_React_default().createElement("input", { ...rest, ref: dataRef, className: inputClassName });
 };
-MultiSelect.autoSizeInputWithRef = () => external_React_default().forwardRef((props, ref) => ((_a) => {
-    var { className, ref } = _a, rest = __rest(_a, ["className", "ref"]);
+MultiSelect.autoSizeInputWithRef = () => external_React_default().forwardRef((props, ref) => (({ className, ref, ...rest }) => {
     const inputClassName = classnames_default()(className, MultiSelect_st_css_classes.autoSizeInput);
-    return external_React_default().createElement("input", Object.assign({}, rest, { ref: ref, className: inputClassName }));
-})(Object.assign(Object.assign({}, props), { ref })));
+    return external_React_default().createElement("input", { ...rest, ref: ref, className: inputClassName });
+})({ ...props, ref }));
 MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = {
     /** Associate a control with the regions that it controls.*/
@@ -63440,7 +63578,14 @@ MultiSelect.propTypes = {
         (prop_types_default()).number,
     ]),
 };
-MultiSelect.defaultProps = Object.assign(Object.assign({}, InputWithOptions_InputWithOptions.defaultProps), { predicate: () => true, tags: [], delimiters: [','], clearOnBlur: true, customInput: MultiSelect.autoSizeInputWithRef() });
+MultiSelect.defaultProps = {
+    ...InputWithOptions_InputWithOptions.defaultProps,
+    predicate: () => true,
+    tags: [],
+    delimiters: [','],
+    clearOnBlur: true,
+    customInput: MultiSelect.autoSizeInputWithRef(),
+};
 /* harmony default export */ const MultiSelect_MultiSelect = (MultiSelect);
 //# sourceMappingURL=MultiSelect.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/MultiSelect/index.js
@@ -63493,7 +63638,7 @@ if(false /* HMR */) {}
-var EmptyState_st_css_namespace_ = "wds_1_95_1_EmptyState";
+var EmptyState_st_css_namespace_ = "wds_1_98_0_EmptyState";
 var EmptyState_st_css_style_ = classesRuntime.bind(null, EmptyState_st_css_namespace_);
 var EmptyState_st_css_cssStates = statesRuntime.bind(null, EmptyState_st_css_namespace_);
@@ -63501,7 +63646,7 @@ var EmptyState_st_css_style = (/* unused pure expression or super */ null && (Em
 var EmptyState_st_css_st = EmptyState_st_css_style_;
 var EmptyState_st_css_namespace = (/* unused pure expression or super */ null && (EmptyState_st_css_namespace_));
-var EmptyState_st_css_classes = {"root":"wds_1_95_1_EmptyState__root","imageContainer":"wds_1_95_1_EmptyState__imageContainer","childrenContainer":"wds_1_95_1_EmptyState__childrenContainer","container":"wds_1_95_1_EmptyState__container","imageElement":"wds_1_95_1_EmptyState__imageElement","titleContainer":"wds_1_95_1_EmptyState__titleContainer","title":"wds_1_95_1_EmptyState__title","sectionTitle":"wds_1_95_1_EmptyState__sectionTitle","subtitle":"wds_1_95_1_EmptyState__subtitle","subtitleContainer":"wds_1_95_1_EmptyState__subtitleContainer"};
+var EmptyState_st_css_classes = {"root":"wds_1_98_0_EmptyState__root","imageContainer":"wds_1_98_0_EmptyState__imageContainer","childrenContainer":"wds_1_98_0_EmptyState__childrenContainer","container":"wds_1_98_0_EmptyState__container","imageElement":"wds_1_98_0_EmptyState__imageElement","titleContainer":"wds_1_98_0_EmptyState__titleContainer","title":"wds_1_98_0_EmptyState__title","sectionTitle":"wds_1_98_0_EmptyState__sectionTitle","subtitle":"wds_1_98_0_EmptyState__subtitle","subtitleContainer":"wds_1_98_0_EmptyState__subtitleContainer"};
 var EmptyState_st_css_keyframes = {};
 var EmptyState_st_css_layers = {};
 var EmptyState_st_css_containers = {};
@@ -64298,7 +64443,7 @@ const InfoIcon_constants_dataHooks = {
-var InfoIcon_st_css_namespace_ = "wds_1_95_1_InfoIcon";
+var InfoIcon_st_css_namespace_ = "wds_1_98_0_InfoIcon";
 var InfoIcon_st_css_style_ = classesRuntime.bind(null, InfoIcon_st_css_namespace_);
 var InfoIcon_st_css_cssStates = statesRuntime.bind(null, InfoIcon_st_css_namespace_);
@@ -64306,7 +64451,7 @@ var InfoIcon_st_css_style = (/* unused pure expression or super */ null && (Info
 var InfoIcon_st_css_st = InfoIcon_st_css_style_;
 var InfoIcon_st_css_namespace = (/* unused pure expression or super */ null && (InfoIcon_st_css_namespace_));
-var InfoIcon_st_css_classes = {"root":"wds_1_95_1_InfoIcon__root","icon":"wds_1_95_1_InfoIcon__icon"};
+var InfoIcon_st_css_classes = {"root":"wds_1_98_0_InfoIcon__root","icon":"wds_1_98_0_InfoIcon__icon"};
 var InfoIcon_st_css_keyframes = {};
 var InfoIcon_st_css_layers = {};
 var InfoIcon_st_css_containers = {};
@@ -64332,7 +64477,7 @@ const iconComponentBySizeMap = {
 const InfoIcon = ({ dataHook, content, size = 'medium', tooltipProps, className, }) => {
     const Icon = iconComponentBySizeMap[size];
     return (external_React_default().createElement("div", { className: InfoIcon_st_css_st(InfoIcon_st_css_classes.root, className), "data-size": size, "data-hook": dataHook },
-        external_React_default().createElement(Tooltip_Tooltip, Object.assign({}, tooltipProps, { content: content, dataHook: InfoIcon_constants_dataHooks.tooltip }),
+        external_React_default().createElement(Tooltip_Tooltip, { ...tooltipProps, content: content, dataHook: InfoIcon_constants_dataHooks.tooltip },
             external_React_default().createElement(Icon, { className: InfoIcon_st_css_classes.icon }))));
 };
 InfoIcon.displayName = 'InfoIcon';
@@ -64376,7 +64521,7 @@ const FormField_constants_dataHooks = {
-var FormField_st_css_namespace_ = "wds_1_95_1_FormField";
+var FormField_st_css_namespace_ = "wds_1_98_0_FormField";
 var FormField_st_css_style_ = classesRuntime.bind(null, FormField_st_css_namespace_);
 var FormField_st_css_cssStates = statesRuntime.bind(null, FormField_st_css_namespace_);
@@ -64384,7 +64529,7 @@ var FormField_st_css_style = (/* unused pure expression or super */ null && (For
 var FormField_st_css_st = FormField_st_css_style_;
 var FormField_st_css_namespace = (/* unused pure expression or super */ null && (FormField_st_css_namespace_));
-var FormField_st_css_classes = {"root":"wds_1_95_1_FormField__root","text-small-thin":"wds_1_95_1_StylableTypography__text-small-thin","text-tiny-thin":"wds_1_95_1_StylableTypography__text-tiny-thin","label":"wds_1_95_1_FormField__label","labelIndicators":"wds_1_95_1_FormField__labelIndicators","children":"wds_1_95_1_FormField__children","statusMessage":"wds_1_95_1_FormField__statusMessage","suffix":"wds_1_95_1_FormField__suffix","labelRow":"wds_1_95_1_FormField__labelRow","labelRowMain":"wds_1_95_1_FormField__labelRowMain","asterisk":"wds_1_95_1_FormField__asterisk","charCount":"wds_1_95_1_FormField__charCount","infoIcon":"wds_1_95_1_FormField__infoIcon","statusIcon":"wds_1_95_1_FormField__statusIcon"};
+var FormField_st_css_classes = {"root":"wds_1_98_0_FormField__root","text-small-thin":"wds_1_98_0_StylableTypography__text-small-thin","text-tiny-thin":"wds_1_98_0_StylableTypography__text-tiny-thin","label":"wds_1_98_0_FormField__label","labelIndicators":"wds_1_98_0_FormField__labelIndicators","children":"wds_1_98_0_FormField__children","statusMessage":"wds_1_98_0_FormField__statusMessage","suffix":"wds_1_98_0_FormField__suffix","labelRow":"wds_1_98_0_FormField__labelRow","labelRowMain":"wds_1_98_0_FormField__labelRowMain","asterisk":"wds_1_98_0_FormField__asterisk","charCount":"wds_1_98_0_FormField__charCount","infoIcon":"wds_1_98_0_FormField__infoIcon","statusIcon":"wds_1_98_0_FormField__statusIcon"};
 var FormField_st_css_keyframes = {};
 var FormField_st_css_layers = {};
 var FormField_st_css_containers = {};
@@ -64401,6 +64546,13 @@ const StatusAlertFilledSmall_e=({size:t,...r})=>external_React_.createElement("s
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/wix-ui-icons-common/dist/esm/general/dist/components/StatusWarningFilledSmall.js
 const StatusWarningFilledSmall_a=({size:t,...e})=>external_React_.createElement("svg",{viewBox:"0 0 18 18",fill:"currentColor",width:t||"18",height:t||"18",...e},external_React_.createElement("path",{d:"M10.7037499,3.9623322 L15.7092882,11.9592754 C15.9070807,12.2850514 16.000829,12.6448689 16.000061,13 C15.9984263,13.6741191 15.6560657,14.3313518 15.0376694,14.7068067 C14.7247801,14.8967752 14.3657565,14.9972317 13.9997131,14.9972317 L4,14.9999236 C2.8954305,14.9999236 2,14.1045695 2,13 C2,12.6339566 2.10045645,12.2749331 2.29042497,11.9620437 L7.28459986,3.9623322 C7.66164996,3.34130849 8.32287747,2.99867105 9,2.99992355 C9.35233944,3.00069152 9.70898264,3.09451612 10.0321312,3.29071343 C10.3066867,3.45740786 10.5370555,3.68777667 10.7037499,3.9623322 Z M9,6 C8.44771525,6 8,6.44771525 8,7 L8,9 C8,9.55228475 8.44771525,10 9,10 C9.55228475,10 10,9.55228475 10,9 L10,7 C10,6.44771525 9.55228475,6 9,6 Z M9,11 C8.44771525,11 8,11.4477153 8,12 C8,12.5522847 8.44771525,13 9,13 C9.55228475,13 10,12.5522847 10,12 C10,11.4477153 9.55228475,11 9,11 Z"}));StatusWarningFilledSmall_a.displayName="StatusWarningFilledSmall";var StatusWarningFilledSmall_C=StatusWarningFilledSmall_a;
+;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/FieldSet/FieldSet.context.js
+const FieldSetContext = external_React_default().createContext({
+    status: null,
+    statusId: null,
+});
+//# sourceMappingURL=FieldSet.context.js.map
 ;// CONCATENATED MODULE: ../../../node_modules/@wix/design-system/dist/esm/FormField/FormField.js
@@ -64412,6 +64564,7 @@ const StatusWarningFilledSmall_a=({size:t,...e})=>external_React_.createElement(
 const PLACEMENT = {
     top: 'top',
     right: 'right',
@@ -64446,7 +64599,7 @@ class FormField extends (external_React_default()).Component {
             const colorProps = lengthLeft >= 0
                 ? { light: true, secondary: true }
                 : { skin: constants_SKINS.error };
-            return (external_React_default().createElement(Text, Object.assign({ className: FormField_st_css_st(FormField_st_css_classes.charCount, { labelSize }), size: Text_constants_SIZES.small, weight: WEIGHTS.normal }, colorProps, { dataHook: FormField_constants_dataHooks.counter, children: lengthLeft })));
+            return (external_React_default().createElement(Text, { className: FormField_st_css_st(FormField_st_css_classes.charCount, { labelSize }), size: Text_constants_SIZES.small, weight: WEIGHTS.normal, ...colorProps, dataHook: FormField_constants_dataHooks.counter, children: lengthLeft }));
         };
         this._renderCharCounter = () => {
             if (!this._hasCharCounter()) {
@@ -64534,7 +64687,7 @@ class FormField extends (external_React_default()).Component {
                 minLabelHeight: !children,
             };
         const hasInlineElements = this._hasInlineElements(label, labelPlacement);
-        return (external_React_default().createElement("div", { "data-hook": dataHook, "data-status": status, className: FormField_st_css_st(FormField_st_css_classes.root, Object.assign(Object.assign(Object.assign({}, rootStyles), (label ? { labelSize } : {})), { hasInlineElements }), classNames) },
+        return (external_React_default().createElement("div", { "data-hook": dataHook, "data-status": status, className: FormField_st_css_st(FormField_st_css_classes.root, { ...rootStyles, ...(label ? { labelSize } : {}), hasInlineElements }, classNames) },
             label && labelPlacement === PLACEMENT.top && (external_React_default().createElement("div", { className: FormField_st_css_classes.labelRow },
                 external_React_default().createElement("div", { className: FormField_st_css_classes.labelRowMain },
                     this._renderLabel({ trimLongText: true, labelSize }),
@@ -64546,11 +64699,16 @@ class FormField extends (external_React_default()).Component {
                 }) },
                 (!label || labelPlacement !== PLACEMENT.top) &&
                     this._renderSuffix(),
-                external_React_default().createElement(StatusContext.Provider, { value: {
+                external_React_default().createElement(FieldSetContext.Consumer, null, fieldSet => (external_React_default().createElement(StatusContext.Provider, { value: {
                         status,
                         ariaLabelledBy: this.labelId,
-                        ariaDescribedBy: this.statusId,
-                    } }, this._renderChildren()))),
+                        ariaDescribedBy: [
+                            this.statusId,
+                            status === fieldSet.status && fieldSet.statusId,
+                        ]
+                            .filter(Boolean)
+                            .join(' '),
+                    } }, this._renderChildren()))))),
             hasInlineElements && this._renderLabelWithIndicators({ labelSize }),
             statusMessage && this._renderStatusMessage()));
     }
@@ -64632,7 +64790,7 @@ var isNaN_default = /*#__PURE__*/__webpack_require__.n(lodash_isNaN);
-var InputArea_st_css_namespace_ = "wds_1_95_1_InputArea";
+var InputArea_st_css_namespace_ = "wds_1_98_0_InputArea";
 var InputArea_st_css_style_ = classesRuntime.bind(null, InputArea_st_css_namespace_);
 var InputArea_st_css_cssStates = statesRuntime.bind(null, InputArea_st_css_namespace_);
@@ -64640,12 +64798,12 @@ var InputArea_st_css_style = (/* unused pure expression or super */ null && (Inp
 var InputArea_st_css_st = InputArea_st_css_style_;
 var InputArea_st_css_namespace = (/* unused pure expression or super */ null && (InputArea_st_css_namespace_));
-var InputArea_st_css_classes = {"root":"wds_1_95_1_InputArea__root","text-small-thin":"wds_1_95_1_StylableTypography__text-small-thin","text-medium-thin":"wds_1_95_1_StylableTypography__text-medium-thin","defaultScrollBar":"wds_1_95_1_defaultscrollbar__defaultScrollBar","inputArea":"wds_1_95_1_InputArea__inputArea","counter":"wds_1_95_1_InputArea__counter","status":"wds_1_95_1_InputArea__status","disabled":"wds_1_95_1_InputArea__disabled","readOnly":"wds_1_95_1_InputArea__readOnly"};
+var InputArea_st_css_classes = {"root":"wds_1_98_0_InputArea__root","text-small-thin":"wds_1_98_0_StylableTypography__text-small-thin","text-medium-thin":"wds_1_98_0_StylableTypography__text-medium-thin","defaultScrollBar":"wds_1_98_0_defaultscrollbar__defaultScrollBar","inputArea":"wds_1_98_0_InputArea__inputArea","counter":"wds_1_98_0_InputArea__counter","status":"wds_1_98_0_InputArea__status","disabled":"wds_1_98_0_InputArea__disabled","readOnly":"wds_1_98_0_InputArea__readOnly"};
 var InputArea_st_css_keyframes = {};
 var InputArea_st_css_layers = {};
 var InputArea_st_css_containers = {};
 var InputArea_st_css_stVars = {};
-var InputArea_st_css_vars = {"wds-font-size-body-small":"--wds-font-size-body-small","wds-color-blue-500":"--wds-color-blue-500","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-border-destructive-secondary-active":"--wds-color-border-destructive-secondary-active","wds-color-border-warning-secondary-active":"--wds-color-border-warning-secondary-active","wds-color-border-standard-secondary-active":"--wds-color-border-standard-secondary-active","wds-color-border-standard-secondary-readonly":"--wds-color-border-standard-secondary-readonly","wds-color-border-standard-secondary-disabled":"--wds-color-border-standard-secondary-disabled","wds-color-border-standard-secondary-hover":"--wds-color-border-standard-secondary-hover","wds-color-fill-standard-tertiary-readonly":"--wds-color-fill-standard-tertiary-readonly","wds-shadow-focus-standard":"--wds-shadow-focus-standard","wds-shadow-focus-destructive":"--wds-shadow-focus-destructive","wds-shadow-focus-warning":"--wds-shadow-focus-warning","wds-space-100":"--wds-space-100","wds-input-area-padding-vertical-small":"--wds-input-area-padding-vertical-small","wds-input-area-padding-right-small":"--wds-input-area-padding-right-small","wds-input-area-padding-left-small":"--wds-input-area-padding-left-small","wds-input-area-padding-vertical-medium":"--wds-input-area-padding-vertical-medium","wds-input-area-padding-right-medium":"--wds-input-area-padding-right-medium","wds-input-area-padding-left-medium":"--wds-input-area-padding-left-medium","wds-input-area-border-radius-default-medium":"--wds-input-area-border-radius-default-medium","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-size-medium":"--wds-input-value-font-size-medium","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-input-value-font-line-height-medium":"--wds-input-value-font-line-height-medium","wds-border-radius-full":"--wds-border-radius-full","wds-input-size-small":"--wds-input-size-small","wds-input-size-medium":"--wds-input-size-medium","border-color":"--wds_1_95_1_InputArea-border-color","border-color-destructive":"--wds_1_95_1_InputArea-border-color-destructive","border-color-warning":"--wds_1_95_1_InputArea-border-color-warning","border-color-disabled":"--wds_1_95_1_InputArea-border-color-disabled","wds-input-area-height-small-adjusted":"--wds_1_95_1_InputArea-wds-input-area-height-small-adjusted","wds-input-area-height-medium-adjusted":"--wds_1_95_1_InputArea-wds-input-area-height-medium-adjusted"};
+var InputArea_st_css_vars = {"wds-font-size-body-small":"--wds-font-size-body-small","wds-color-blue-500":"--wds-color-blue-500","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-border-destructive-secondary-active":"--wds-color-border-destructive-secondary-active","wds-color-border-warning-secondary-active":"--wds-color-border-warning-secondary-active","wds-color-border-standard-secondary-active":"--wds-color-border-standard-secondary-active","wds-color-border-standard-secondary-readonly":"--wds-color-border-standard-secondary-readonly","wds-color-border-standard-secondary-disabled":"--wds-color-border-standard-secondary-disabled","wds-color-border-standard-secondary-hover":"--wds-color-border-standard-secondary-hover","wds-color-fill-standard-tertiary-readonly":"--wds-color-fill-standard-tertiary-readonly","wds-shadow-focus-standard":"--wds-shadow-focus-standard","wds-shadow-focus-destructive":"--wds-shadow-focus-destructive","wds-shadow-focus-warning":"--wds-shadow-focus-warning","wds-space-100":"--wds-space-100","wds-input-area-padding-vertical-small":"--wds-input-area-padding-vertical-small","wds-input-area-padding-right-small":"--wds-input-area-padding-right-small","wds-input-area-padding-left-small":"--wds-input-area-padding-left-small","wds-input-area-padding-vertical-medium":"--wds-input-area-padding-vertical-medium","wds-input-area-padding-right-medium":"--wds-input-area-padding-right-medium","wds-input-area-padding-left-medium":"--wds-input-area-padding-left-medium","wds-input-area-border-radius-default-medium":"--wds-input-area-border-radius-default-medium","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-size-medium":"--wds-input-value-font-size-medium","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-input-value-font-line-height-medium":"--wds-input-value-font-line-height-medium","wds-border-radius-full":"--wds-border-radius-full","wds-input-size-small":"--wds-input-size-small","wds-input-size-medium":"--wds-input-size-medium","border-color":"--wds_1_98_0_InputArea-border-color","border-color-destructive":"--wds_1_98_0_InputArea-border-color-destructive","border-color-warning":"--wds_1_98_0_InputArea-border-color-warning","border-color-disabled":"--wds_1_98_0_InputArea-border-color-disabled","wds-input-area-height-small-adjusted":"--wds_1_98_0_InputArea-wds-input-area-height-small-adjusted","wds-input-area-height-medium-adjusted":"--wds_1_98_0_InputArea-wds-input-area-height-medium-adjusted"};
@@ -64842,7 +65000,7 @@ class InputArea extends (external_React_default()).PureComponent {
         return (external_React_default().createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => {
             return (external_React_default().createElement(StatusContext.Consumer, null, statusContext => {
                 const finalStatus = getStatusFromContext(statusContext, status);
-                return (external_React_default().createElement("div", Object.assign({ "data-hook": dataHook, className: InputArea_st_css_st(InputArea_st_css_classes.root, {
+                return (external_React_default().createElement("div", { "data-hook": dataHook, className: InputArea_st_css_st(InputArea_st_css_classes.root, {
                         disabled,
                         size,
                         status: finalStatus,
@@ -64851,7 +65009,7 @@ class InputArea extends (external_React_default()).PureComponent {
                         resizable,
                         readOnly,
                         newColorsBranding,
-                    }, className) }, this._getDataAttr({ statusContext })),
+                    }, className), ...this._getDataAttr({ statusContext }) },
                     external_React_default().createElement("div", { className: InputArea_st_css_classes.inputArea },
                         typeof children === 'function' ? (children({
                             rows: rowsAttr,
@@ -64860,7 +65018,7 @@ class InputArea extends (external_React_default()).PureComponent {
                             onBlur: this._onBlur,
                             onKeyDown: this._onKeyDown,
                             onInput,
-                        })) : (external_React_default().createElement("textarea", Object.assign({ rows: rowsAttr, maxLength: maxLength, ref: ref => (this.textArea = ref), id: id, name: name, style: inlineStyle, defaultValue: defaultValue, disabled: disabled, value: value, required: required, onFocus: this._onFocus, onBlur: this._onBlur, onKeyDown: this._onKeyDown, onChange: this._onChange, onInput: onInput, placeholder: placeholder, tabIndex: tabIndex, autoFocus: autoFocus, onKeyUp: onKeyUp }, getAriaAttributesFromContext(statusContext), ariaAttribute, { readOnly: readOnly }))),
+                        })) : (external_React_default().createElement("textarea", { rows: rowsAttr, maxLength: maxLength, ref: ref => (this.textArea = ref), id: id, name: name, style: inlineStyle, defaultValue: defaultValue, disabled: disabled, value: value, required: required, onFocus: this._onFocus, onBlur: this._onBlur, onKeyDown: this._onKeyDown, onChange: this._onChange, onInput: onInput, placeholder: placeholder, tabIndex: tabIndex, autoFocus: autoFocus, onKeyUp: onKeyUp, ...getAriaAttributesFromContext(statusContext), ...ariaAttribute, readOnly: readOnly })),
                         hasCounter && maxLength && (external_React_default().createElement("span", { className: InputArea_st_css_classes.counter, "data-hook": "counter" },
                             this.state.counter,
                             "/",