@7shifts/sous-chef 2.15.8 → 2.16.0

package/dist/index.js

@@ -137,7 +137,8 @@ var Flex = function Flex(_ref) {
       _ref$flexItems = _ref.flexItems,
       flexItems = _ref$flexItems === void 0 ? false : _ref$flexItems,
       _ref$flexWrap = _ref.flexWrap,
-      flexWrap = _ref$flexWrap === void 0 ? 'nowrap' : _ref$flexWrap;
+      flexWrap = _ref$flexWrap === void 0 ? 'nowrap' : _ref$flexWrap,
+      testId = _ref.testId;
   var className = classnames(styles$1['flex'], (_classNames = {}, _classNames[styles$1['align-start']] = alignItems === 'flex-start', _classNames[styles$1['align-end']] = alignItems === 'flex-end', _classNames[styles$1['align-center']] = alignItems === 'center', _classNames[styles$1['justify-start']] = justifyContent === 'start', _classNames[styles$1['justify-end']] = justifyContent === 'end', _classNames[styles$1['justify-center']] = justifyContent === 'center', _classNames[styles$1['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1['inline-flex']] = inlineFlex, _classNames));
   var items = React__default.Children.toArray(children).filter(Boolean);
   var lastItemIndex = items.length - 1;
@@ -147,7 +148,7 @@ var Flex = function Flex(_ref) {
       flexDirection: direction,
       flexWrap: flexWrap
     },
-    "data-testid": "flex-" + direction
+    "data-testid": testId || "flex-" + direction
   }, items.map(function (child, i) {
     return React__default.createElement("div", {
       key: i,
@@ -178,7 +179,9 @@ var Spinner = function Spinner(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'mint' : _ref$theme,
       _ref$block = _ref.block,
-      block = _ref$block === void 0 ? false : _ref$block;
+      block = _ref$block === void 0 ? false : _ref$block,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'spinner' : _ref$testId;
   return React__default.createElement("div", {
     className: classnames((_classnames = {}, _classnames[styles$2['spinner--block']] = block, _classnames))
   }, React__default.createElement("svg", {
@@ -187,7 +190,7 @@ var Spinner = function Spinner(_ref) {
     width: size,
     height: size,
     viewBox: "0 0 66 66",
-    "data-testid": "spinner"
+    "data-testid": testId
   }, React__default.createElement("defs", null, React__default.createElement("linearGradient", {
     id: "prideGradient"
   }, React__default.createElement("stop", {
@@ -445,7 +448,8 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
       onClose = _ref.onClose,
       onFocusIn = _ref.onFocusIn,
       onFocusOut = _ref.onFocusOut,
-      extraClass = _ref.extraClass;
+      extraClass = _ref.extraClass,
+      testId = _ref.testId;
 
   var _useState = React.useState(false),
       isVisible = _useState[0],
@@ -467,7 +471,8 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
   var tooltipRectPosition = tooltipRef === null || tooltipRef === void 0 ? void 0 : (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect();
   var position = calculatePosition(placement, anchorPosition, tooltipRectPosition);
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    role: "tooltip"
+    role: "tooltip",
+    "data-testid": testId
   }, React__default.createElement("div", {
     ref: tooltipRef,
     style: _extends({}, position.overlay, {
@@ -505,7 +510,8 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
       extraClass = _ref.extraClass,
       onClose = _ref.onClose,
       onVisibleChange = _ref.onVisibleChange,
-      children = _ref.children;
+      children = _ref.children,
+      testId = _ref.testId;
   var checkIsMounted = useIsMounted();
   var internalRef = React.useRef(null);
   var containerRef = forwardedRef || internalRef;
@@ -592,7 +598,8 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
         isFocusingOnTooltip.current = false;
         closeTooltip();
       },
-      extraClass: extraClass
+      extraClass: extraClass,
+      testId: testId
     }, theme === TOOLTIP_THEME.BLACK && !header ? null : overlay) : null;
   };
 
@@ -641,7 +648,8 @@ var Button = function Button(_ref, ref) {
       title = _ref.title,
       href = _ref.href,
       _ref$target = _ref.target,
-      target = _ref$target === void 0 ? '_self' : _ref$target;
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      testId = _ref.testId;
   var contrastSpinner = ['primary', 'danger', 'upsell', 'marketing', 'link-contrast'];
   var childrenArr = React.Children.toArray(children);
   var isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
@@ -655,7 +663,8 @@ var Button = function Button(_ref, ref) {
     disabled: disabled || loading,
     href: href,
     ref: ref,
-    target: target
+    target: target,
+    "data-testid": testId
   }, React__default.createElement(Inline, {
     space: 8,
     alignItems: "center"
@@ -805,13 +814,19 @@ var getIconStyles = function getIconStyles(_ref) {
   }, styles);
 };
 
-var IconInfoCircle = function IconInfoCircle(props) {
+var _excluded$2 = ["testId"];
+
+var IconInfoCircle = function IconInfoCircle(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-info-circle' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-info-circle",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -822,13 +837,19 @@ var IconInfoCircle = function IconInfoCircle(props) {
 
 IconInfoCircle.displayName = 'IconInfoCircle';
 
-var IconAnalytics = function IconAnalytics(props) {
+var _excluded$3 = ["testId"];
+
+var IconAnalytics = function IconAnalytics(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-analytics' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-analytics",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -839,13 +860,19 @@ var IconAnalytics = function IconAnalytics(props) {
 
 IconAnalytics.displayName = 'IconAnalytics';
 
-var IconArrowDown = function IconArrowDown(props) {
+var _excluded$4 = ["testId"];
+
+var IconArrowDown = function IconArrowDown(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-arrow-down' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-arrow-down",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -856,13 +883,19 @@ var IconArrowDown = function IconArrowDown(props) {
 
 IconArrowDown.displayName = 'IconArrowDown';
 
-var IconArrowLeft = function IconArrowLeft(props) {
+var _excluded$5 = ["testId"];
+
+var IconArrowLeft = function IconArrowLeft(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-arrow-left' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-arrow-left",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -873,13 +906,19 @@ var IconArrowLeft = function IconArrowLeft(props) {
 
 IconArrowLeft.displayName = 'IconArrowLeft';
 
-var IconArrowRight = function IconArrowRight(props) {
+var _excluded$6 = ["testId"];
+
+var IconArrowRight = function IconArrowRight(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-arrow-right' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-arrow-right",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -890,13 +929,19 @@ var IconArrowRight = function IconArrowRight(props) {
 
 IconArrowRight.displayName = 'IconArrowRight';
 
-var IconArrowToTop = function IconArrowToTop(props) {
+var _excluded$7 = ["testId"];
+
+var IconArrowToTop = function IconArrowToTop(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-arrow-to-top' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-arrow-to-top",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m3.887 9.688 5.781-5.801a.47.47 0 0 1 .664 0l5.781 5.8a.47.47 0 0 1 0 .665l-.277.277a.47.47 0 0 1-.664 0l-4.508-4.531V18.28a.47.47 0 0 1-.469.469h-.39a.47.47 0 0 1-.47-.469V6.098l-4.507 4.527a.47.47 0 0 1-.664 0l-.277-.277a.465.465 0 0 1 0-.66ZM2.5 1.718v.313c0 .258.21.469.469.469H17.03a.47.47 0 0 0 .469-.469V1.72a.47.47 0 0 0-.469-.469H2.97a.47.47 0 0 0-.469.469Z",
     fill: "currentColor"
@@ -905,13 +950,19 @@ var IconArrowToTop = function IconArrowToTop(props) {
 
 IconArrowToTop.displayName = 'IconArrowToTop';
 
-var IconArrowUp = function IconArrowUp(props) {
+var _excluded$8 = ["testId"];
+
+var IconArrowUp = function IconArrowUp(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-arrow-up' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-arrow-up",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -922,13 +973,19 @@ var IconArrowUp = function IconArrowUp(props) {
 
 IconArrowUp.displayName = 'IconArrowUp';
 
-var IconAward = function IconAward(props) {
+var _excluded$9 = ["testId"];
+
+var IconAward = function IconAward(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-award' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-award",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -939,13 +996,19 @@ var IconAward = function IconAward(props) {
 
 IconAward.displayName = 'IconAward';
 
-var IconBalanceScaleLeft = function IconBalanceScaleLeft(props) {
+var _excluded$a = ["testId"];
+
+var IconBalanceScaleLeft = function IconBalanceScaleLeft(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-balance-scale-left' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-balance-scale-left",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-balance-scale-left_svg__a)"
   }, React__default.createElement("path", {
@@ -961,13 +1024,19 @@ var IconBalanceScaleLeft = function IconBalanceScaleLeft(props) {
 
 IconBalanceScaleLeft.displayName = 'IconBalanceScaleLeft';
 
-var IconBalanceScale = function IconBalanceScale(props) {
+var _excluded$b = ["testId"];
+
+var IconBalanceScale = function IconBalanceScale(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-balance-scale' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-balance-scale",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-balance-scale_svg__a)"
   }, React__default.createElement("path", {
@@ -983,13 +1052,19 @@ var IconBalanceScale = function IconBalanceScale(props) {
 
 IconBalanceScale.displayName = 'IconBalanceScale';
 
-var IconBan = function IconBan(props) {
+var _excluded$c = ["testId"];
+
+var IconBan = function IconBan(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-ban' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-ban",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M10 .313C4.65.313.312 4.65.312 10S4.65 19.688 10 19.688c5.35 0 9.688-4.338 9.688-9.688C19.688 4.65 15.35.312 10 .312ZM4.034 15.966a8.437 8.437 0 0 1-.426-11.474l11.9 11.9a8.437 8.437 0 0 1-11.474-.426Zm12.358-.458-11.9-11.9a8.437 8.437 0 0 1 11.474.426 8.437 8.437 0 0 1 .426 11.474Z",
     fill: "currentColor"
@@ -998,13 +1073,19 @@ var IconBan = function IconBan(props) {
 
 IconBan.displayName = 'IconBan';
 
-var IconBarsH = function IconBarsH(props) {
+var _excluded$d = ["testId"];
+
+var IconBarsH = function IconBarsH(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-bars-h' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-bars-h",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1015,13 +1096,19 @@ var IconBarsH = function IconBarsH(props) {
 
 IconBarsH.displayName = 'IconBarsH';
 
-var IconBarsV = function IconBarsV(props) {
+var _excluded$e = ["testId"];
+
+var IconBarsV = function IconBarsV(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-bars-v' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-bars-v",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M4.762 2.381a2.38 2.38 0 1 0-4.762 0v15.238a2.381 2.381 0 1 0 4.762 0V2.381ZM12.381 12.857a2.38 2.38 0 1 0-4.762 0v4.762a2.381 2.381 0 1 0 4.762 0v-4.762ZM20 6.19a2.381 2.381 0 0 0-4.762 0v11.43a2.38 2.38 0 1 0 4.762 0V6.19Z",
     fill: "currentColor"
@@ -1030,13 +1117,19 @@ var IconBarsV = function IconBarsV(props) {
 
 IconBarsV.displayName = 'IconBarsV';
 
-var IconBell = function IconBell(props) {
+var _excluded$f = ["testId"];
+
+var IconBell = function IconBell(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-bell' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-bell",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1047,13 +1140,19 @@ var IconBell = function IconBell(props) {
 
 IconBell.displayName = 'IconBell';
 
-var IconBirthdayCake = function IconBirthdayCake(props) {
+var _excluded$g = ["testId"];
+
+var IconBirthdayCake = function IconBirthdayCake(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-birthday-cake' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-birthday-cake",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M5 3.75c-.693 0-1.25-.557-1.25-1.25C3.75 1.29 5 1.602 5 0c.469 0 1.25 1.152 1.25 2.188C6.25 3.223 5.693 3.75 5 3.75Zm5 0c-.693 0-1.25-.557-1.25-1.25C8.75 1.29 10 1.602 10 0c.469 0 1.25 1.152 1.25 2.188 0 1.035-.557 1.562-1.25 1.562Zm5 0c-.693 0-1.25-.557-1.25-1.25C13.75 1.29 15 1.602 15 0c.469 0 1.25 1.152 1.25 2.188 0 1.035-.557 1.562-1.25 1.562ZM16.875 10h-1.25V4.375h-1.25V10h-3.75V4.375h-1.25V10h-3.75V4.375h-1.25V10h-1.25c-1.035 0-1.875.84-1.875 1.875V20h17.5v-8.125c0-1.035-.84-1.875-1.875-1.875Zm.625 8.75h-15v-2.814c.634-.37.935-.936 1.67-.936 1.092 0 1.22 1.25 2.92 1.25C8.763 16.25 8.934 15 10 15c1.1 0 1.219 1.25 2.92 1.25 1.694 0 1.827-1.25 2.92-1.25.722 0 1.025.565 1.66.936v2.814Zm0-4.39c-.376-.307-.829-.61-1.66-.61-1.697 0-1.83 1.25-2.92 1.25-1.082 0-1.229-1.25-2.92-1.25-1.674 0-1.844 1.25-2.91 1.25-1.1 0-1.219-1.25-2.92-1.25-.838 0-1.293.304-1.67.612v-2.487c0-.345.28-.625.625-.625h13.75c.345 0 .625.28.625.625v2.485Z",
     fill: "currentColor"
@@ -1062,13 +1161,19 @@ var IconBirthdayCake = function IconBirthdayCake(props) {
 
 IconBirthdayCake.displayName = 'IconBirthdayCake';
 
-var IconBold = function IconBold(props) {
+var _excluded$h = ["testId"];
+
+var IconBold = function IconBold(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-bold' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-bold",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M13.828 9.145a4.36 4.36 0 0 0 .516-6.614A4.375 4.375 0 0 0 11.25 1.25H3.437a.312.312 0 0 0-.312.313v.625a.312.312 0 0 0 .313.312h.937v15h-.938a.312.312 0 0 0-.312.313v.625a.313.313 0 0 0 .313.312h8.437a5 5 0 0 0 1.953-9.605ZM5.625 2.5h5.625a3.125 3.125 0 1 1 0 6.25H5.625V2.5Zm6.25 15h-6.25V10h6.25a3.75 3.75 0 1 1 0 7.5Z",
     fill: "currentColor"
@@ -1077,13 +1182,19 @@ var IconBold = function IconBold(props) {
 
 IconBold.displayName = 'IconBold';
 
-var IconBolt = function IconBolt(props) {
+var _excluded$i = ["testId"];
+
+var IconBolt = function IconBolt(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-bolt' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-bolt",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-bolt_svg__a)"
   }, React__default.createElement("path", {
@@ -1099,13 +1210,19 @@ var IconBolt = function IconBolt(props) {
 
 IconBolt.displayName = 'IconBolt';
 
-var IconBook = function IconBook(props) {
+var _excluded$j = ["testId"];
+
+var IconBook = function IconBook(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-book' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-book",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1116,13 +1233,19 @@ var IconBook = function IconBook(props) {
 
 IconBook.displayName = 'IconBook';
 
-var IconBriefcase = function IconBriefcase(props) {
+var _excluded$k = ["testId"];
+
+var IconBriefcase = function IconBriefcase(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-briefcase' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-briefcase",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18.125 5H13.75V2.187a.937.937 0 0 0-.938-.937H7.189a.937.937 0 0 0-.938.938V5H1.875C.839 5 0 5.84 0 6.875v10c0 1.035.84 1.875 1.875 1.875h16.25c1.035 0 1.875-.84 1.875-1.875v-10C20 5.839 19.16 5 18.125 5ZM7.5 2.5h5V5h-5V2.5Zm11.25 14.375c0 .345-.28.625-.625.625H1.875a.626.626 0 0 1-.625-.625V11.25H7.5v1.563c0 .517.42.937.938.937h3.124c.518 0 .938-.42.938-.938V11.25h6.25v5.625Zm-10-4.375v-1.25h2.5v1.25h-2.5Zm10-2.5H1.25V6.875c0-.345.28-.625.625-.625h16.25c.345 0 .625.28.625.625V10Z",
     fill: "currentColor"
@@ -1131,13 +1254,19 @@ var IconBriefcase = function IconBriefcase(props) {
 
 IconBriefcase.displayName = 'IconBriefcase';
 
-var IconBullseyeArrow = function IconBullseyeArrow(props) {
+var _excluded$l = ["testId"];
+
+var IconBullseyeArrow = function IconBullseyeArrow(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-bullseye-arrow' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-bullseye-arrow",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1148,13 +1277,19 @@ var IconBullseyeArrow = function IconBullseyeArrow(props) {
 
 IconBullseyeArrow.displayName = 'IconBullseyeArrow';
 
-var IconCalculator = function IconCalculator(props) {
+var _excluded$m = ["testId"];
+
+var IconCalculator = function IconCalculator(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calculator' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calculator",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1165,13 +1300,19 @@ var IconCalculator = function IconCalculator(props) {
 
 IconCalculator.displayName = 'IconCalculator';
 
-var IconCalendarAlt = function IconCalendarAlt(props) {
+var _excluded$n = ["testId"];
+
+var IconCalendarAlt = function IconCalendarAlt(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calendar-alt' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calendar-alt",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1182,13 +1323,19 @@ var IconCalendarAlt = function IconCalendarAlt(props) {
 
 IconCalendarAlt.displayName = 'IconCalendarAlt';
 
-var IconCalendarCheck = function IconCalendarCheck(props) {
+var _excluded$o = ["testId"];
+
+var IconCalendarCheck = function IconCalendarCheck(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calendar-check' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calendar-check",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1199,13 +1346,19 @@ var IconCalendarCheck = function IconCalendarCheck(props) {
 
 IconCalendarCheck.displayName = 'IconCalendarCheck';
 
-var IconCalendarDay = function IconCalendarDay(props) {
+var _excluded$p = ["testId"];
+
+var IconCalendarDay = function IconCalendarDay(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calendar-day' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calendar-day",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-calendar-day_svg__a)"
   }, React__default.createElement("path", {
@@ -1222,13 +1375,19 @@ var IconCalendarDay = function IconCalendarDay(props) {
 
 IconCalendarDay.displayName = 'IconCalendarDay';
 
-var IconCalendarExclamation = function IconCalendarExclamation(props) {
+var _excluded$q = ["testId"];
+
+var IconCalendarExclamation = function IconCalendarExclamation(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calendar-exclamation' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calendar-exclamation",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M17.857 2.5h-2.143V.469c0-.258-.24-.469-.535-.469h-.358c-.294 0-.535.21-.535.469V2.5H5.714V.469C5.714.21 5.474 0 5.18 0H4.82c-.294 0-.535.21-.535.469V2.5H2.143C.96 2.5 0 3.34 0 4.375v13.75C0 19.16.96 20 2.143 20h15.714C19.04 20 20 19.16 20 18.125V4.375C20 3.34 19.04 2.5 17.857 2.5ZM2.143 3.75h15.714c.393 0 .714.281.714.625V6.25H1.43V4.375c0-.344.321-.625.714-.625Zm15.714 15H2.143c-.393 0-.714-.281-.714-.625V7.5H18.57v10.625c0 .344-.321.625-.714.625Zm-8.361-10h1.008c.309 0 .554.227.536.496l-.299 4.688c-.018.25-.25.441-.536.441H9.79c-.286 0-.518-.195-.536-.441l-.299-4.688c-.013-.27.232-.496.54-.496Zm1.754 7.5c0 .605-.558 1.094-1.25 1.094s-1.25-.489-1.25-1.094c0-.605.558-1.094 1.25-1.094s1.25.489 1.25 1.094Z",
     fill: "currentColor"
@@ -1237,13 +1396,19 @@ var IconCalendarExclamation = function IconCalendarExclamation(props) {
 
 IconCalendarExclamation.displayName = 'IconCalendarExclamation';
 
-var IconCalendarStar = function IconCalendarStar(props) {
+var _excluded$r = ["testId"];
+
+var IconCalendarStar = function IconCalendarStar(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calendar-star' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calendar-star",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m6.952 14.406-.325 1.808c-.074.414.103.824.461 1.07a1.186 1.186 0 0 0 1.211.082l1.71-.851 1.71.85a1.2 1.2 0 0 0 1.215-.081c.358-.246.536-.656.461-1.07l-.325-1.808 1.38-1.276c.317-.293.428-.723.292-1.12a1.127 1.127 0 0 0-.93-.743l-1.912-.265-.853-1.644a1.166 1.166 0 0 0-1.038-.613c-.44 0-.836.235-1.03.61l-.853 1.643-1.911.266a1.127 1.127 0 0 0-.931.741c-.136.398-.025.828.292 1.12l1.376 1.281Zm2.044-2.268 1.013-1.948 1.014 1.948 2.265.312-1.64 1.52.388 2.139-2.027-1.008-2.027 1.011.387-2.139-1.64-1.519 2.267-.316Zm8.263-9.64h-1.977V.313a.322.322 0 0 0-.33-.312h-.659c-.18 0-.33.14-.33.312V2.5H6.055V.312A.322.322 0 0 0 5.724 0h-.658c-.182 0-.33.14-.33.312V2.5H2.759C1.667 2.499.78 3.338.78 4.373v13.742c0 1.035.886 1.874 1.978 1.874h14.5c1.092 0 1.978-.84 1.978-1.874V4.373c0-1.035-.886-1.874-1.977-1.874Zm.66 15.617c0 .344-.297.625-.66.625H2.76c-.363 0-.66-.281-.66-.625V7.496h15.82v10.62Zm0-11.868H2.099V4.373c0-.344.297-.625.66-.625h14.5c.363 0 .66.281.66.625v1.874Z",
     fill: "currentColor"
@@ -1252,13 +1417,19 @@ var IconCalendarStar = function IconCalendarStar(props) {
 
 IconCalendarStar.displayName = 'IconCalendarStar';
 
-var IconCalendarTomorrow = function IconCalendarTomorrow(props) {
+var _excluded$s = ["testId"];
+
+var IconCalendarTomorrow = function IconCalendarTomorrow(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calendar-tomorrow' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calendar-tomorrow",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-calendar-tomorrow_svg__a)",
     fill: "currentColor"
@@ -1277,13 +1448,19 @@ var IconCalendarTomorrow = function IconCalendarTomorrow(props) {
 
 IconCalendarTomorrow.displayName = 'IconCalendarTomorrow';
 
-var IconCalendar = function IconCalendar(props) {
+var _excluded$t = ["testId"];
+
+var IconCalendar = function IconCalendar(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-calendar' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-calendar",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1294,13 +1471,19 @@ var IconCalendar = function IconCalendar(props) {
 
 IconCalendar.displayName = 'IconCalendar';
 
-var IconCameraSlash = function IconCameraSlash(props) {
+var _excluded$u = ["testId"];
+
+var IconCameraSlash = function IconCameraSlash(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-camera-slash' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-camera-slash",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m19.905 17.838-1.975-1.702V5.766c0-.906-.671-1.641-1.5-1.641h-2.75l-.446-1.3c-.182-.536-.647-.888-1.17-.888H7.972c-.625 0-1.184.424-1.403 1.063L6.18 4.125H3.984L.718 1.312a.232.232 0 0 0-.35.04l-.313.428a.289.289 0 0 0 .038.383L7.009 8.12c-.004.003-.004.006-.007.006l.788.677c.003-.003.003-.007.006-.007l4.319 3.72c-.003.003-.003.006-.006.006l.787.677c.003-.003.003-.007.006-.007l6.382 5.496c.109.096.265.076.35-.04l.312-.428a.29.29 0 0 0-.04-.383ZM8.572 8.073c.4-.253.866-.397 1.36-.397 1.515 0 2.75 1.35 2.75 3.008 0 .29-.038.571-.11.834l-4-3.445Zm1.36-1.487c-.82 0-1.576.287-2.191.772l-2.485-2.14h1.622l.628-1.832a.505.505 0 0 1 .47-.355h4.093c.103 0 .197.072.234.178l.691 2.01h3.44c.276 0 .5.246.5.547v9.509l-3.527-3.039a4.437 4.437 0 0 0 .278-1.548c-.003-2.263-1.685-4.102-3.754-4.102ZM3.43 16.153c-.274 0-.5-.246-.5-.547V6.005l-1-.79v10.388c0 .906.673 1.64 1.5 1.64h12.55l-1.268-1.093H3.431v.003Z",
     fill: "currentColor"
@@ -1312,13 +1495,19 @@ var IconCameraSlash = function IconCameraSlash(props) {
 
 IconCameraSlash.displayName = 'IconCameraSlash';
 
-var IconCamera = function IconCamera(props) {
+var _excluded$v = ["testId"];
+
+var IconCamera = function IconCamera(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-camera' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-camera",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M12.668 2.5c.129 0 .246.082.293.203L13.824 5h4.301c.344 0 .625.281.625.625v11.25a.627.627 0 0 1-.625.625H1.875a.627.627 0 0 1-.625-.625V5.625c0-.344.281-.625.625-.625H6.18l.785-2.094A.626.626 0 0 1 7.55 2.5h5.117Zm0-1.25H7.551c-.781 0-1.48.484-1.754 1.215L5.313 3.75H1.874C.84 3.75 0 4.59 0 5.625v11.25c0 1.035.84 1.875 1.875 1.875h16.25c1.035 0 1.875-.84 1.875-1.875V5.625c0-1.035-.84-1.875-1.875-1.875h-3.438l-.558-1.484a1.553 1.553 0 0 0-1.461-1.016ZM10 15.938a4.691 4.691 0 0 1-4.688-4.688A4.691 4.691 0 0 1 10 6.562a4.691 4.691 0 0 1 4.688 4.688A4.691 4.691 0 0 1 10 15.938Zm0-8.126a3.443 3.443 0 0 0-3.438 3.438A3.443 3.443 0 0 0 10 14.688a3.443 3.443 0 0 0 3.438-3.438A3.443 3.443 0 0 0 10 7.812Z",
     fill: "currentColor"
@@ -1327,13 +1516,19 @@ var IconCamera = function IconCamera(props) {
 
 IconCamera.displayName = 'IconCamera';
 
-var IconCashRegister = function IconCashRegister(props) {
+var _excluded$w = ["testId"];
+
+var IconCashRegister = function IconCashRegister(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-cash-register' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-cash-register",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M9.063 9.688a.627.627 0 0 0-.626-.626h-.624a.627.627 0 0 0-.625.626v.624c0 .344.28.626.625.626h.625a.627.627 0 0 0 .624-.626v-.624Zm-3.75 0a.627.627 0 0 0-.625-.626h-.625a.627.627 0 0 0-.625.626v.624c0 .344.28.626.624.626h.625a.627.627 0 0 0 .625-.626v-.624Zm1.25 1.874h-.625a.627.627 0 0 0-.625.626v.624c0 .344.28.626.625.626h.625a.627.627 0 0 0 .625-.626v-.624a.627.627 0 0 0-.625-.626Zm3.75 0h-.626a.627.627 0 0 0-.624.626v.624c0 .344.28.626.624.626h.626a.627.627 0 0 0 .624-.626v-.624a.627.627 0 0 0-.624-.626Zm2.5-1.874a.627.627 0 0 0-.626-.626h-.624a.627.627 0 0 0-.626.626v.624c0 .344.282.626.626.626h.624a.627.627 0 0 0 .626-.626v-.624Zm7.164 5.136L18.98 7.86a1.876 1.876 0 0 0-1.855-1.609H7.5v-2.5h3.125a.627.627 0 0 0 .625-.625v-2.5A.627.627 0 0 0 10.625 0h-7.5A.627.627 0 0 0 2.5.625v2.5c0 .344.281.625.625.625H6.25v2.5H2.875c-.934 0-1.723.688-1.855 1.61l-.997 6.964A2.673 2.673 0 0 0 0 15.18v2.945C0 19.16.84 20 1.875 20h16.25C19.16 20 20 19.16 20 18.125v-2.95c0-.116-.008-.234-.023-.35ZM3.75 2.5V1.25H10V2.5H3.75ZM2.258 8.035a.626.626 0 0 1 .617-.535h14.246c.309 0 .574.23.617.535l1 6.965H1.262l.996-6.965Zm16.492 10.09a.627.627 0 0 1-.625.625H1.875a.627.627 0 0 1-.625-.625V16.25h17.5v1.875Zm-2.813-9.063h-.624a.627.627 0 0 0-.626.626v.624c0 .344.282.626.626.626h.624a.627.627 0 0 0 .626-.626v-.624a.627.627 0 0 0-.625-.626Zm-1.874 2.5h-.626a.627.627 0 0 0-.624.626v.624c0 .344.28.626.624.626h.626a.627.627 0 0 0 .624-.626v-.624a.627.627 0 0 0-.624-.626Z",
     fill: "currentColor"
@@ -1342,13 +1537,19 @@ var IconCashRegister = function IconCashRegister(props) {
 
 IconCashRegister.displayName = 'IconCashRegister';
 
-var IconChartBar = function IconChartBar(props) {
+var _excluded$x = ["testId"];
+
+var IconChartBar = function IconChartBar(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-chart-bar' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-chart-bar",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1359,13 +1560,19 @@ var IconChartBar = function IconChartBar(props) {
 
 IconChartBar.displayName = 'IconChartBar';
 
-var IconCheck = function IconCheck(props) {
+var _excluded$y = ["testId"];
+
+var IconCheck = function IconCheck(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-check' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-check",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1376,13 +1583,19 @@ var IconCheck = function IconCheck(props) {
 
 IconCheck.displayName = 'IconCheck';
 
-var IconChevronDown = function IconChevronDown(props) {
+var _excluded$z = ["testId"];
+
+var IconChevronDown = function IconChevronDown(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-chevron-down' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-chevron-down",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1393,13 +1606,19 @@ var IconChevronDown = function IconChevronDown(props) {
 
 IconChevronDown.displayName = 'IconChevronDown';
 
-var IconChevronLeft = function IconChevronLeft(props) {
+var _excluded$A = ["testId"];
+
+var IconChevronLeft = function IconChevronLeft(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-chevron-left' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-chevron-left",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1410,13 +1629,19 @@ var IconChevronLeft = function IconChevronLeft(props) {
 
 IconChevronLeft.displayName = 'IconChevronLeft';
 
-var IconChevronRight = function IconChevronRight(props) {
+var _excluded$B = ["testId"];
+
+var IconChevronRight = function IconChevronRight(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-chevron-right' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-chevron-right",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1427,13 +1652,19 @@ var IconChevronRight = function IconChevronRight(props) {
 
 IconChevronRight.displayName = 'IconChevronRight';
 
-var IconChevronUp = function IconChevronUp(props) {
+var _excluded$C = ["testId"];
+
+var IconChevronUp = function IconChevronUp(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-chevron-up' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-chevron-up",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1444,13 +1675,19 @@ var IconChevronUp = function IconChevronUp(props) {
 
 IconChevronUp.displayName = 'IconChevronUp';
 
-var IconClipboardList = function IconClipboardList(props) {
+var _excluded$D = ["testId"];
+
+var IconClipboardList = function IconClipboardList(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-clipboard-list' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-clipboard-list",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1461,13 +1698,19 @@ var IconClipboardList = function IconClipboardList(props) {
 
 IconClipboardList.displayName = 'IconClipboardList';
 
-var IconClock = function IconClock(props) {
+var _excluded$E = ["testId"];
+
+var IconClock = function IconClock(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-clock' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-clock",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M10 .313A9.686 9.686 0 0 0 .312 10 9.686 9.686 0 0 0 10 19.688 9.686 9.686 0 0 0 19.688 10 9.686 9.686 0 0 0 10 .312ZM18.438 10c0 4.637-3.754 8.438-8.438 8.438-4.637 0-8.438-3.754-8.438-8.438 0-4.637 3.754-8.438 8.438-8.438 4.637 0 8.438 3.754 8.438 8.438Zm-5.817 3.45L9.45 11.144a.472.472 0 0 1-.191-.38V4.532a.47.47 0 0 1 .469-.468h.546a.47.47 0 0 1 .47.468v5.715l2.753 2.004c.211.152.254.445.102.656l-.32.442a.472.472 0 0 1-.657.101Z",
     fill: "currentColor"
@@ -1476,13 +1719,19 @@ var IconClock = function IconClock(props) {
 
 IconClock.displayName = 'IconClock';
 
-var IconCog = function IconCog(props) {
+var _excluded$F = ["testId"];
+
+var IconCog = function IconCog(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-cog' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-cog",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m18.855 11.69-1.274-.735a7.63 7.63 0 0 0 0-1.91l1.274-.736a.935.935 0 0 0 .432-1.074 9.672 9.672 0 0 0-2.248-3.89.938.938 0 0 0-1.15-.167l-1.271.734a7.584 7.584 0 0 0-1.654-.956v-1.47a.938.938 0 0 0-.722-.912 9.756 9.756 0 0 0-4.484 0 .938.938 0 0 0-.722.912v1.47a7.582 7.582 0 0 0-1.654.956l-1.271-.734a.938.938 0 0 0-1.15.167 9.671 9.671 0 0 0-2.248 3.89.935.935 0 0 0 .432 1.074l1.273.736a7.624 7.624 0 0 0 0 1.91l-1.273.736a.935.935 0 0 0-.432 1.074 9.671 9.671 0 0 0 2.248 3.89.938.938 0 0 0 1.15.168l1.271-.735a7.58 7.58 0 0 0 1.654.956v1.47c0 .434.3.812.722.912a9.754 9.754 0 0 0 4.484 0 .938.938 0 0 0 .722-.912v-1.47a7.59 7.59 0 0 0 1.653-.956l1.272.735a.938.938 0 0 0 1.15-.168 9.672 9.672 0 0 0 2.248-3.89.935.935 0 0 0-.432-1.075Zm-2.558 3.925L14.49 14.57c-1.055.901-1.429 1.128-2.775 1.604v2.09a8.482 8.482 0 0 1-3.428 0v-2.09c-1.313-.464-1.693-.68-2.775-1.604l-1.809 1.045a8.437 8.437 0 0 1-1.716-2.967l1.81-1.045c-.255-1.383-.255-1.822 0-3.206l-1.81-1.045a8.444 8.444 0 0 1 1.716-2.967l1.81 1.045c1.069-.915 1.447-1.135 2.774-1.604v-2.09a8.468 8.468 0 0 1 3.428 0v2.09c1.327.469 1.705.689 2.775 1.604l1.808-1.045a8.444 8.444 0 0 1 1.716 2.967l-1.81 1.045c.256 1.384.256 1.822 0 3.206l1.81 1.045a8.438 8.438 0 0 1-1.716 2.967ZM10 6.25A3.754 3.754 0 0 0 6.25 10 3.754 3.754 0 0 0 10 13.75 3.754 3.754 0 0 0 13.75 10 3.754 3.754 0 0 0 10 6.25Zm0 6.25A2.503 2.503 0 0 1 7.5 10c0-1.379 1.121-2.5 2.5-2.5s2.5 1.121 2.5 2.5-1.121 2.5-2.5 2.5Z",
     fill: "currentColor"
@@ -1491,13 +1740,19 @@ var IconCog = function IconCog(props) {
 
 IconCog.displayName = 'IconCog';
 
-var IconCommentLines = function IconCommentLines(props) {
+var _excluded$G = ["testId"];
+
+var IconCommentLines = function IconCommentLines(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-comment-lines' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-comment-lines",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1511,13 +1766,19 @@ var IconCommentLines = function IconCommentLines(props) {
 
 IconCommentLines.displayName = 'IconCommentLines';
 
-var IconComment = function IconComment(props) {
+var _excluded$H = ["testId"];
+
+var IconComment = function IconComment(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-comment' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-comment",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1528,13 +1789,19 @@ var IconComment = function IconComment(props) {
 
 IconComment.displayName = 'IconComment';
 
-var IconCopy = function IconCopy(props) {
+var _excluded$I = ["testId"];
+
+var IconCopy = function IconCopy(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-copy' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-copy",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-copy_svg__a)"
   }, React__default.createElement("path", {
@@ -1550,13 +1817,19 @@ var IconCopy = function IconCopy(props) {
 
 IconCopy.displayName = 'IconCopy';
 
-var IconCreditCardPlus = function IconCreditCardPlus(props) {
+var _excluded$J = ["testId"];
+
+var IconCreditCardPlus = function IconCreditCardPlus(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-credit-card-plus' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-credit-card-plus",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-credit-card-plus_svg__a)"
   }, React__default.createElement("path", {
@@ -1574,13 +1847,19 @@ var IconCreditCardPlus = function IconCreditCardPlus(props) {
 
 IconCreditCardPlus.displayName = 'IconCreditCardPlus';
 
-var IconCreditCard = function IconCreditCard(props) {
+var _excluded$K = ["testId"];
+
+var IconCreditCard = function IconCreditCard(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-credit-card' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-credit-card",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-credit-card_svg__a)"
   }, React__default.createElement("path", {
@@ -1596,13 +1875,19 @@ var IconCreditCard = function IconCreditCard(props) {
 
 IconCreditCard.displayName = 'IconCreditCard';
 
-var IconDownload = function IconDownload(props) {
+var _excluded$L = ["testId"];
+
+var IconDownload = function IconDownload(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-download' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-download",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1613,13 +1898,19 @@ var IconDownload = function IconDownload(props) {
 
 IconDownload.displayName = 'IconDownload';
 
-var IconEdit = function IconEdit(props) {
+var _excluded$M = ["testId"];
+
+var IconEdit = function IconEdit(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-edit' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-edit",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m14.507 12.092.694-.703a.207.207 0 0 1 .355.147v5.777c0 .931-.747 1.687-1.667 1.687H1.667C.747 19 0 18.244 0 17.312V4.938C0 4.006.747 3.25 1.667 3.25h10.149c.184 0 .278.229.146.359l-.695.703a.213.213 0 0 1-.146.063H1.667a.56.56 0 0 0-.556.563v12.375c0 .309.25.562.556.562h12.222a.56.56 0 0 0 .555-.563V12.24c0-.056.021-.109.063-.147Zm5.066-6.722L8.723 16.356l-3.47.39a.733.733 0 0 1-.805-.815l.385-3.512L15.684 1.432a1.446 1.446 0 0 1 2.063 0l1.826 1.85a1.49 1.49 0 0 1 0 2.088Zm-3.25 1.701-2.316-2.344-8.111 8.208-.288 2.64 2.607-.291 8.108-8.213Zm2.465-2.995-1.826-1.849a.343.343 0 0 0-.49 0l-1.68 1.702 2.316 2.344 1.68-1.701a.353.353 0 0 0 0-.496Z",
     fill: "currentColor"
@@ -1628,13 +1919,19 @@ var IconEdit = function IconEdit(props) {
 
 IconEdit.displayName = 'IconEdit';
 
-var IconEllipsisV = function IconEllipsisV(props) {
+var _excluded$N = ["testId"];
+
+var IconEllipsisV = function IconEllipsisV(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-ellipsis-v' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-ellipsis-v",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1645,13 +1942,19 @@ var IconEllipsisV = function IconEllipsisV(props) {
 
 IconEllipsisV.displayName = 'IconEllipsisV';
 
-var IconEnvelope = function IconEnvelope(props) {
+var _excluded$O = ["testId"];
+
+var IconEnvelope = function IconEnvelope(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-envelope' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-envelope",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18.125 2.5H1.875C.84 2.5 0 3.34 0 4.375v11.25C0 16.66.84 17.5 1.875 17.5h16.25c1.035 0 1.875-.84 1.875-1.875V4.375C20 3.34 19.16 2.5 18.125 2.5ZM1.875 3.75h16.25c.344 0 .625.281.625.625v1.617c-.855.723-2.078 1.719-5.883 4.738-.66.524-1.96 1.786-2.867 1.77-.906.016-2.21-1.246-2.867-1.77C3.328 7.71 2.105 6.715 1.25 5.992V4.375c0-.344.281-.625.625-.625Zm16.25 12.5H1.875a.627.627 0 0 1-.625-.625V7.617c.89.73 2.297 1.86 5.105 4.09.801.64 2.215 2.05 3.645 2.043 1.422.012 2.824-1.387 3.645-2.043 2.808-2.23 4.214-3.36 5.105-4.09v8.008a.627.627 0 0 1-.625.625Z",
     fill: "currentColor"
@@ -1660,13 +1963,19 @@ var IconEnvelope = function IconEnvelope(props) {
 
 IconEnvelope.displayName = 'IconEnvelope';
 
-var IconExclaimationTriangle = function IconExclaimationTriangle(props) {
+var _excluded$P = ["testId"];
+
+var IconExclaimationTriangle = function IconExclaimationTriangle(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-exclaimation-triangle' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-exclaimation-triangle",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1677,13 +1986,19 @@ var IconExclaimationTriangle = function IconExclaimationTriangle(props) {
 
 IconExclaimationTriangle.displayName = 'IconExclaimationTriangle';
 
-var IconExclaimation = function IconExclaimation(props) {
+var _excluded$Q = ["testId"];
+
+var IconExclaimation = function IconExclaimation(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-exclaimation' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-exclaimation",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M9.15 0h1.714c.51 0 .916.424.895.933l-.523 12.537a.895.895 0 0 1-.895.858h-.67a.896.896 0 0 1-.894-.858L8.254.933A.896.896 0 0 1 9.15 0Zm.857 15.82a2.09 2.09 0 1 0 0 4.18 2.09 2.09 0 0 0 0-4.18Z",
     fill: "currentColor"
@@ -1692,13 +2007,19 @@ var IconExclaimation = function IconExclaimation(props) {
 
 IconExclaimation.displayName = 'IconExclaimation';
 
-var IconExpand = function IconExpand(props) {
+var _excluded$R = ["testId"];
+
+var IconExpand = function IconExpand(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-expand' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-expand",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m9.017 10.762.22.221a.469.469 0 0 1 0 .663L3.385 17.5H5.78c.26 0 .469.21.469.469v.312c0 .26-.21.469-.469.469H1.72a.469.469 0 0 1-.469-.469V14.22c0-.26.21-.469.469-.469h.312c.26 0 .469.21.469.469v2.397l5.854-5.854a.469.469 0 0 1 .663 0ZM18.28 1.25H14.22a.469.469 0 0 0-.469.469v.312c0 .26.21.469.469.469h2.397l-5.854 5.854a.469.469 0 0 0 0 .663l.221.22c.183.184.48.184.663 0L17.5 3.385V5.78c0 .26.21.469.469.469h.312c.26 0 .469-.21.469-.469V1.72a.469.469 0 0 0-.469-.469Z",
     fill: "currentColor"
@@ -1707,13 +2028,19 @@ var IconExpand = function IconExpand(props) {
 
 IconExpand.displayName = 'IconExpand';
 
-var IconExternalLink = function IconExternalLink(props) {
+var _excluded$S = ["testId"];
+
+var IconExternalLink = function IconExternalLink(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-external-link' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-external-link",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1724,13 +2051,19 @@ var IconExternalLink = function IconExternalLink(props) {
 
 IconExternalLink.displayName = 'IconExternalLink';
 
-var IconEyeSlash = function IconEyeSlash(props) {
+var _excluded$T = ["testId"];
+
+var IconEyeSlash = function IconEyeSlash(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-eye-slash' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-eye-slash",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-eye-slash_svg__a)"
   }, React__default.createElement("g", {
@@ -1754,13 +2087,19 @@ var IconEyeSlash = function IconEyeSlash(props) {
 
 IconEyeSlash.displayName = 'IconEyeSlash';
 
-var IconEye = function IconEye(props) {
+var _excluded$U = ["testId"];
+
+var IconEye = function IconEye(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-eye' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-eye",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-eye_svg__a)"
   }, React__default.createElement("path", {
@@ -1777,13 +2116,19 @@ var IconEye = function IconEye(props) {
 
 IconEye.displayName = 'IconEye';
 
-var IconFilePdf = function IconFilePdf(props) {
+var _excluded$V = ["testId"];
+
+var IconFilePdf = function IconFilePdf(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-file-pdf' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-file-pdf",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-file-pdf_svg__a)"
   }, React__default.createElement("path", {
@@ -1799,13 +2144,19 @@ var IconFilePdf = function IconFilePdf(props) {
 
 IconFilePdf.displayName = 'IconFilePdf';
 
-var IconFile = function IconFile(props) {
+var _excluded$W = ["testId"];
+
+var IconFile = function IconFile(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-file' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-file",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-file_svg__a)"
   }, React__default.createElement("path", {
@@ -1821,13 +2172,19 @@ var IconFile = function IconFile(props) {
 
 IconFile.displayName = 'IconFile';
 
-var IconFlag = function IconFlag(props) {
+var _excluded$X = ["testId"];
+
+var IconFlag = function IconFlag(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-flag' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-flag",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-flag_svg__a)"
   }, React__default.createElement("path", {
@@ -1843,13 +2200,19 @@ var IconFlag = function IconFlag(props) {
 
 IconFlag.displayName = 'IconFlag';
 
-var IconFourDotsCircle = function IconFourDotsCircle(props) {
+var _excluded$Y = ["testId"];
+
+var IconFourDotsCircle = function IconFourDotsCircle(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-four-dots-circle' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-four-dots-circle",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1860,13 +2223,19 @@ var IconFourDotsCircle = function IconFourDotsCircle(props) {
 
 IconFourDotsCircle.displayName = 'IconFourDotsCircle';
 
-var IconFourSquares = function IconFourSquares(props) {
+var _excluded$Z = ["testId"];
+
+var IconFourSquares = function IconFourSquares(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-four-squares' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-four-squares",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("rect", {
     x: 0.833,
     y: 10.573,
@@ -1901,13 +2270,19 @@ var IconFourSquares = function IconFourSquares(props) {
 
 IconFourSquares.displayName = 'IconFourSquares';
 
-var IconGavel = function IconGavel(props) {
+var _excluded$_ = ["testId"];
+
+var IconGavel = function IconGavel(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-gavel' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 60 60",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-gavel",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m58.698 21.863-2.418-2.42a4.442 4.442 0 0 0-5.476-.638l-9.61-9.609a4.442 4.442 0 0 0-.638-5.476l-2.418-2.418a4.438 4.438 0 0 0-6.28 0L18.551 14.605a4.446 4.446 0 0 0 0 6.28l2.42 2.42a4.448 4.448 0 0 0 5.475.637l3.48 3.48-6.891 6.89-.947-.946a5.095 5.095 0 0 0-7.198 0l-13.403 13.4a5.095 5.095 0 0 0 0 7.198l4.548 4.548a5.095 5.095 0 0 0 7.197 0l13.401-13.403a5.095 5.095 0 0 0 0-7.198l-.947-.947 6.891-6.89 3.48 3.479a4.449 4.449 0 0 0 .637 5.476l2.42 2.419a4.446 4.446 0 0 0 6.28 0l13.303-13.305a4.439 4.439 0 0 0 0-6.28ZM23.983 42.457l-13.401 13.4a1.34 1.34 0 0 1-1.894 0l-4.546-4.545a1.34 1.34 0 0 1 0-1.894l13.401-13.4a1.34 1.34 0 0 1 1.894 0l4.546 4.545a1.341 1.341 0 0 1 0 1.894Zm32.065-16.966L42.743 38.796a.69.69 0 0 1-.977 0l-2.42-2.42a.691.691 0 0 1 0-.976l1.932-1.93L26.53 18.721l-1.93 1.931a.692.692 0 0 1-.978 0l-2.419-2.419a.692.692 0 0 1 0-.977L34.51 3.952a.691.691 0 0 1 .977 0l2.419 2.42a.691.691 0 0 1 0 .976l-1.93 1.931L50.72 24.026l1.931-1.93a.69.69 0 0 1 .977 0l2.419 2.418a.692.692 0 0 1 0 .977Z",
     fill: "currentColor"
@@ -1916,12 +2291,18 @@ var IconGavel = function IconGavel(props) {
 
 IconGavel.displayName = 'IconGavel';
 
-var IconGif = function IconGif(props) {
+var _excluded$$ = ["testId"];
+
+var IconGif = function IconGif(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-gif' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-gif",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18.096 2.85H1.906c-.79 0-1.43.64-1.43 1.429v11.428c0 .79.64 1.429 1.43 1.429h16.19c.789 0 1.428-.64 1.428-1.429V4.28c0-.79-.64-1.429-1.428-1.429Z",
     stroke: "currentColor",
@@ -1935,13 +2316,19 @@ var IconGif = function IconGif(props) {
 
 IconGif.displayName = 'IconGif';
 
-var IconGift = function IconGift(props) {
+var _excluded$10 = ["testId"];
+
+var IconGift = function IconGift(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-gift' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-gift",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18.125 6H16.59a3.229 3.229 0 0 0 .598-1.875c0-1.723-1.305-3.125-2.91-3.125-1.653 0-2.61.992-4.278 3.742C8.332 1.992 7.375 1 5.723 1c-1.606 0-2.91 1.402-2.91 3.125 0 .707.226 1.352.597 1.875H1.875C.84 6 0 6.84 0 7.875v3.75c0 .344.281.625.625.625h.625v5.625c0 1.035.84 1.875 1.875 1.875h13.75c1.035 0 1.875-.84 1.875-1.875V12.25h.625a.627.627 0 0 0 .625-.625v-3.75C20 6.84 19.16 6 18.125 6Zm-7.336-.14c1.934-3.255 2.578-3.61 3.488-3.61.914 0 1.66.84 1.66 1.875 0 1.035-.746 1.875-1.66 1.875h-3.574l.086-.14ZM5.723 2.25c.914 0 1.554.355 3.488 3.61l.082.14H5.719c-.914 0-1.66-.84-1.66-1.875.003-1.035.75-1.875 1.664-1.875ZM7.5 18.5H3.125a.627.627 0 0 1-.625-.625V12.25h5v6.25Zm0-7.5H1.25V7.875c0-.344.281-.625.625-.625H7.5V11Zm3.75 7.5h-2.5V7.25h2.5V18.5Zm6.25-.625a.627.627 0 0 1-.625.625H12.5v-6.25h5v5.625ZM18.75 11H12.5V7.25h5.625c.344 0 .625.281.625.625V11Z",
     fill: "currentColor"
@@ -1950,13 +2337,19 @@ var IconGift = function IconGift(props) {
 
 IconGift.displayName = 'IconGift';
 
-var IconGrinBeam = function IconGrinBeam(props) {
+var _excluded$11 = ["testId"];
+
+var IconGrinBeam = function IconGrinBeam(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-grin-beam' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-grin-beam",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M4.746 9.676a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.298-2.79-2.258-2.79S4.65 7.707 4.516 9.352a.317.317 0 0 0 .23.324Zm6.452 0a.335.335 0 0 0 .375-.145l.383-.664c.31-.535.774-.844 1.27-.844s.96.309 1.27.844l.383.664c.085.145.25.184.375.145a.314.314 0 0 0 .23-.324c-.133-1.645-1.299-2.79-2.258-2.79-.96 0-2.125 1.145-2.258 2.79a.317.317 0 0 0 .23.324Zm3.766 2.855c-1.218.38-3.029.594-4.964.594-1.935 0-3.746-.215-4.964-.594a.662.662 0 0 0-.617.121.62.62 0 0 0-.213.579c.37 2.148 3.354 3.644 5.798 3.644s5.423-1.496 5.798-3.645a.624.624 0 0 0-.213-.578.66.66 0 0 0-.625-.12ZM10 15.625c-1.411 0-3.105-.637-3.972-1.574 2.319.422 5.63.422 7.948 0-.871.937-2.565 1.574-3.976 1.574ZM10 .312C4.476.313 0 4.649 0 10s4.476 9.688 10 9.688S20 15.351 20 10 15.524.312 10 .312Zm0 18.125c-4.802 0-8.71-3.785-8.71-8.437 0-4.652 3.908-8.438 8.71-8.438 4.802 0 8.71 3.786 8.71 8.438 0 4.652-3.908 8.438-8.71 8.438Z",
     fill: "currentColor"
@@ -1965,13 +2358,19 @@ var IconGrinBeam = function IconGrinBeam(props) {
 
 IconGrinBeam.displayName = 'IconGrinBeam';
 
-var IconGripVertical = function IconGripVertical(props) {
+var _excluded$12 = ["testId"];
+
+var IconGripVertical = function IconGripVertical(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-grip-vertical' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-grip-vertical",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("circle", {
     cx: 6.667,
     cy: 3.333,
@@ -2007,13 +2406,19 @@ var IconGripVertical = function IconGripVertical(props) {
 
 IconGripVertical.displayName = 'IconGripVertical';
 
-var IconHandshake = function IconHandshake(props) {
+var _excluded$13 = ["testId"];
+
+var IconHandshake = function IconHandshake(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-handshake' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-handshake",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-handshake_svg__a)"
   }, React__default.createElement("path", {
@@ -2030,13 +2435,19 @@ var IconHandshake = function IconHandshake(props) {
 
 IconHandshake.displayName = 'IconHandshake';
 
-var IconImage = function IconImage(props) {
+var _excluded$14 = ["testId"];
+
+var IconImage = function IconImage(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-image' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-image",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-image_svg__a)"
   }, React__default.createElement("path", {
@@ -2052,13 +2463,19 @@ var IconImage = function IconImage(props) {
 
 IconImage.displayName = 'IconImage';
 
-var IconIslandTropical = function IconIslandTropical(props) {
+var _excluded$15 = ["testId"];
+
+var IconIslandTropical = function IconIslandTropical(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-island-tropical' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-island-tropical",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2069,13 +2486,19 @@ var IconIslandTropical = function IconIslandTropical(props) {
 
 IconIslandTropical.displayName = 'IconIslandTropical';
 
-var IconItalic = function IconItalic(props) {
+var _excluded$16 = ["testId"];
+
+var IconItalic = function IconItalic(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-italic' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-italic",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M16.75 1.563v.625a.312.312 0 0 1-.313.312H13.02l-3.75 15h3.418a.313.313 0 0 1 .313.313v.625a.313.313 0 0 1-.313.312H4.563a.312.312 0 0 1-.313-.313v-.625a.313.313 0 0 1 .313-.312H7.98l3.75-15H8.313A.312.312 0 0 1 8 2.187v-.624a.312.312 0 0 1 .313-.313h8.124a.313.313 0 0 1 .313.313Z",
     fill: "currentColor"
@@ -2084,13 +2507,19 @@ var IconItalic = function IconItalic(props) {
 
 IconItalic.displayName = 'IconItalic';
 
-var IconLaptopSearch = function IconLaptopSearch(props) {
+var _excluded$17 = ["testId"];
+
+var IconLaptopSearch = function IconLaptopSearch(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-laptop-search' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-laptop-search",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-laptop-search_svg__a)"
   }, React__default.createElement("path", {
@@ -2108,13 +2537,19 @@ var IconLaptopSearch = function IconLaptopSearch(props) {
 
 IconLaptopSearch.displayName = 'IconLaptopSearch';
 
-var IconLink = function IconLink(props) {
+var _excluded$18 = ["testId"];
+
+var IconLink = function IconLink(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-link' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-link",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-link_svg__a)"
   }, React__default.createElement("path", {
@@ -2130,13 +2565,19 @@ var IconLink = function IconLink(props) {
 
 IconLink.displayName = 'IconLink';
 
-var IconListOI = function IconListOI(props) {
+var _excluded$19 = ["testId"];
+
+var IconListOI = function IconListOI(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-list-o-i' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-list-o-i",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-list-o-i_svg__a)"
   }, React__default.createElement("path", {
@@ -2152,13 +2593,19 @@ var IconListOI = function IconListOI(props) {
 
 IconListOI.displayName = 'IconListOI';
 
-var IconList = function IconList(props) {
+var _excluded$1a = ["testId"];
+
+var IconList = function IconList(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-list' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-list",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M3.438 2.188H1.562a.625.625 0 0 0-.625.625v1.875a.625.625 0 0 0 .625.625h1.875a.625.625 0 0 0 .626-.625V2.813a.625.625 0 0 0-.625-.625Zm0 6.25H1.562a.625.625 0 0 0-.625.625v1.875a.625.625 0 0 0 .625.625h1.875a.625.625 0 0 0 .626-.625V9.063a.625.625 0 0 0-.625-.625Zm0 6.25H1.562a.625.625 0 0 0-.625.625v1.875a.625.625 0 0 0 .625.625h1.875a.625.625 0 0 0 .626-.625v-1.875a.625.625 0 0 0-.625-.625Zm16.25.937H6.563a.313.313 0 0 0-.313.313v.625a.313.313 0 0 0 .313.312h13.125a.313.313 0 0 0 .312-.312v-.625a.312.312 0 0 0-.313-.313Zm0-12.5H6.563a.313.313 0 0 0-.313.313v.625a.312.312 0 0 0 .313.312h13.125A.313.313 0 0 0 20 4.063v-.625a.313.313 0 0 0-.313-.313Zm0 6.25H6.563a.313.313 0 0 0-.313.313v.625a.313.313 0 0 0 .313.312h13.125a.313.313 0 0 0 .312-.312v-.625a.313.313 0 0 0-.313-.313Z",
     fill: "currentColor"
@@ -2167,13 +2614,19 @@ var IconList = function IconList(props) {
 
 IconList.displayName = 'IconList';
 
-var IconLock = function IconLock(props) {
+var _excluded$1b = ["testId"];
+
+var IconLock = function IconLock(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-lock' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-lock",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M16.865 8.75h-.937V5.937A5.945 5.945 0 0 0 9.99 0a5.945 5.945 0 0 0-5.937 5.938V8.75h-.938c-1.035 0-1.875.84-1.875 1.875v7.5C1.24 19.16 2.08 20 3.115 20h13.75c1.035 0 1.875-.84 1.875-1.875v-7.5c0-1.035-.84-1.875-1.875-1.875Zm-4.062 0H7.178V5.937A2.816 2.816 0 0 1 9.99 3.126a2.816 2.816 0 0 1 2.813 2.813V8.75Z",
     fill: "currentColor"
@@ -2182,13 +2635,19 @@ var IconLock = function IconLock(props) {
 
 IconLock.displayName = 'IconLock';
 
-var IconMagicSolid = function IconMagicSolid(props) {
+var _excluded$1c = ["testId"];
+
+var IconMagicSolid = function IconMagicSolid(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-magic-solid' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-magic-solid",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2199,13 +2658,19 @@ var IconMagicSolid = function IconMagicSolid(props) {
 
 IconMagicSolid.displayName = 'IconMagicSolid';
 
-var IconMapMarker = function IconMapMarker(props) {
+var _excluded$1d = ["testId"];
+
+var IconMapMarker = function IconMapMarker(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-map-marker' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-map-marker",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2216,13 +2681,19 @@ var IconMapMarker = function IconMapMarker(props) {
 
 IconMapMarker.displayName = 'IconMapMarker';
 
-var IconMegaphone = function IconMegaphone(props) {
+var _excluded$1e = ["testId"];
+
+var IconMegaphone = function IconMegaphone(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-megaphone' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-megaphone",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2233,13 +2704,19 @@ var IconMegaphone = function IconMegaphone(props) {
 
 IconMegaphone.displayName = 'IconMegaphone';
 
-var IconMinusCircle = function IconMinusCircle(props) {
+var _excluded$1f = ["testId"];
+
+var IconMinusCircle = function IconMinusCircle(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-minus-circle' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-minus-circle",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M5.469 10.703A.47.47 0 0 1 5 10.234v-.468a.47.47 0 0 1 .469-.47h9.062a.47.47 0 0 1 .469.47v.468a.47.47 0 0 1-.469.47H5.47ZM19.687 10A9.686 9.686 0 0 1 10 19.688 9.686 9.686 0 0 1 .312 10 9.686 9.686 0 0 1 10 .312 9.686 9.686 0 0 1 19.688 10Zm-1.25 0c0-4.684-3.8-8.438-8.437-8.438-4.684 0-8.438 3.801-8.438 8.438 0 4.684 3.801 8.438 8.438 8.438 4.684 0 8.438-3.801 8.438-8.438Z",
     fill: "currentColor"
@@ -2248,13 +2725,19 @@ var IconMinusCircle = function IconMinusCircle(props) {
 
 IconMinusCircle.displayName = 'IconMinusCircle';
 
-var IconMinus = function IconMinus(props) {
+var _excluded$1g = ["testId"];
+
+var IconMinus = function IconMinus(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-minus' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-minus",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M17.188 9.063H2.813a.312.312 0 0 0-.313.312v1.25c0 .173.14.313.313.313h14.374c.173 0 .313-.14.313-.313v-1.25a.312.312 0 0 0-.313-.313Z",
     fill: "currentColor"
@@ -2263,13 +2746,19 @@ var IconMinus = function IconMinus(props) {
 
 IconMinus.displayName = 'IconMinus';
 
-var IconMoneyBill = function IconMoneyBill(props) {
+var _excluded$1h = ["testId"];
+
+var IconMoneyBill = function IconMoneyBill(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-money-bill' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-money-bill",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M10 5.25c-1.657 0-3 1.79-3 4 0 2.209 1.343 4 3 4 1.656 0 3-1.79 3-4s-1.343-4-3-4Zm0 6.857c-1.103 0-2-1.282-2-2.857 0-1.575.897-2.857 2-2.857s2 1.282 2 2.857c0 1.575-.897 2.857-2 2.857Zm9.411-10.055c-1.212-.58-2.425-.802-3.638-.802-3.849 0-7.697 2.226-11.546 2.226-2.029 0-2.761-.547-3.22-.547C.47 2.929 0 3.404 0 4.065v11.33c0 .451.226.879.589 1.053 1.212.58 2.425.802 3.638.802 3.849 0 7.697-2.227 11.546-2.227 2.029 0 2.761.548 3.22.548.537 0 1.007-.475 1.007-1.136V3.105c0-.452-.226-.879-.589-1.053ZM1.03 4.081c.632.229 1.282.376 1.958.46-.061 1.193-.913 2.144-1.965 2.158l.007-2.618ZM1 15.395l.004-1.519c1.05.003 1.903.94 1.98 2.123A6.94 6.94 0 0 1 1 15.395Zm17.97-.976a8.933 8.933 0 0 0-1.952-.46c.09-1.16.928-2.076 1.96-2.09l-.008 2.55Zm.01-3.698c-1.563.013-2.83 1.405-2.956 3.165-2.21-.051-4.287.565-6.268 1.138-2.346.679-3.955 1.115-5.763 1.067-.039-1.858-1.359-3.358-2.986-3.362l.013-4.881c1.583-.012 2.866-1.44 2.962-3.233 2.204.05 4.281-.565 6.262-1.138 2.337-.677 3.953-1.115 5.757-1.068.006 1.89 1.344 3.427 2.992 3.431l-.013 4.881Zm.016-6.028c-1.07-.003-1.939-.977-1.987-2.192A6.938 6.938 0 0 1 19 3.105l-.004 1.588Z",
     fill: "currentColor"
@@ -2278,13 +2767,19 @@ var IconMoneyBill = function IconMoneyBill(props) {
 
 IconMoneyBill.displayName = 'IconMoneyBill';
 
-var IconNotesMedical = function IconNotesMedical(props) {
+var _excluded$1i = ["testId"];
+
+var IconNotesMedical = function IconNotesMedical(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-notes-medical' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-notes-medical",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M15.625 2.5h-3.46A2.189 2.189 0 0 0 10 0a2.189 2.189 0 0 0-2.165 2.5H4.375C3.34 2.5 2.5 3.34 2.5 4.375v13.75C2.5 19.16 3.34 20 4.375 20h11.25c1.035 0 1.875-.84 1.875-1.875V4.375c0-1.035-.84-1.875-1.875-1.875ZM10 1.25c.52 0 .938.418.938.938 0 .519-.418.937-.938.937a.935.935 0 0 1-.938-.938c0-.519.418-.937.938-.937Zm6.25 16.875a.627.627 0 0 1-.625.625H4.375a.627.627 0 0 1-.625-.625V4.375c0-.344.281-.625.625-.625H6.25v.781c0 .258.21.469.469.469h6.562a.47.47 0 0 0 .469-.469V3.75h1.875c.344 0 .625.281.625.625v13.75Zm-2.813-6.875H11.25V9.062a.313.313 0 0 0-.313-.312H9.063a.313.313 0 0 0-.313.313v2.187H6.562a.313.313 0 0 0-.312.313v1.874c0 .172.14.313.313.313H8.75v2.188c0 .171.14.312.313.312h1.874c.172 0 .313-.14.313-.313V13.75h2.188c.171 0 .312-.14.312-.313v-1.874a.313.313 0 0 0-.313-.313Z",
     fill: "currentColor"
@@ -2293,13 +2788,19 @@ var IconNotesMedical = function IconNotesMedical(props) {
 
 IconNotesMedical.displayName = 'IconNotesMedical';
 
-var IconOvertime = function IconOvertime(props) {
+var _excluded$1j = ["testId"];
+
+var IconOvertime = function IconOvertime(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-overtime' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 21 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-overtime",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-overtime_svg__a)"
   }, React__default.createElement("path", {
@@ -2316,13 +2817,19 @@ var IconOvertime = function IconOvertime(props) {
 
 IconOvertime.displayName = 'IconOvertime';
 
-var IconPaperPlaneClock = function IconPaperPlaneClock(props) {
+var _excluded$1k = ["testId"];
+
+var IconPaperPlaneClock = function IconPaperPlaneClock(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-paper-plane-clock' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-paper-plane-clock",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-paper-plane-clock_svg__a)",
     fill: "currentColor"
@@ -2343,13 +2850,19 @@ var IconPaperPlaneClock = function IconPaperPlaneClock(props) {
 
 IconPaperPlaneClock.displayName = 'IconPaperPlaneClock';
 
-var IconPaperPlane = function IconPaperPlane(props) {
+var _excluded$1l = ["testId"];
+
+var IconPaperPlane = function IconPaperPlane(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-paper-plane' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 19 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-paper-plane",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2360,13 +2873,19 @@ var IconPaperPlane = function IconPaperPlane(props) {
 
 IconPaperPlane.displayName = 'IconPaperPlane';
 
-var IconPaperclip = function IconPaperclip(props) {
+var _excluded$1m = ["testId"];
+
+var IconPaperclip = function IconPaperclip(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-paperclip' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-paperclip",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-paperclip_svg__a)"
   }, React__default.createElement("path", {
@@ -2382,13 +2901,19 @@ var IconPaperclip = function IconPaperclip(props) {
 
 IconPaperclip.displayName = 'IconPaperclip';
 
-var IconPencil = function IconPencil(props) {
+var _excluded$1n = ["testId"];
+
+var IconPencil = function IconPencil(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-pencil' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-pencil",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2399,13 +2924,19 @@ var IconPencil = function IconPencil(props) {
 
 IconPencil.displayName = 'IconPencil';
 
-var IconPercentage = function IconPercentage(props) {
+var _excluded$1o = ["testId"];
+
+var IconPercentage = function IconPercentage(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-percentage' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-percentage",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M16.843 4.63a.347.347 0 0 0 0-.49l-.982-.983a.347.347 0 0 0-.491 0L3.157 15.37a.347.347 0 0 0 0 .49l.983.983a.347.347 0 0 0 .49 0L15.925 5.549l.918-.919ZM5.833 8.611a2.778 2.778 0 1 0-.001-5.555 2.778 2.778 0 0 0 .002 5.555Zm-.981-3.76a1.38 1.38 0 0 1 .982-.406 1.39 1.39 0 0 1 0 2.778 1.39 1.39 0 0 1-.982-2.371Zm9.315 6.538a2.778 2.778 0 1 0 0 5.556 2.778 2.778 0 0 0 0-5.556Zm.982 3.76a1.38 1.38 0 0 1-.982.407 1.39 1.39 0 0 1 0-2.778 1.39 1.39 0 0 1 .982 2.371Z",
     fill: "currentColor"
@@ -2414,12 +2945,18 @@ var IconPercentage = function IconPercentage(props) {
 
 IconPercentage.displayName = 'IconPercentage';
 
-var IconPhone = function IconPhone(props) {
+var _excluded$1p = ["testId"];
+
+var IconPhone = function IconPhone(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-phone' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1p);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-phone",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
@@ -2429,13 +2966,19 @@ var IconPhone = function IconPhone(props) {
 
 IconPhone.displayName = 'IconPhone';
 
-var IconPlug = function IconPlug(props) {
+var _excluded$1q = ["testId"];
+
+var IconPlug = function IconPlug(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-plug' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1q);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-plug",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2446,13 +2989,19 @@ var IconPlug = function IconPlug(props) {
 
 IconPlug.displayName = 'IconPlug';
 
-var IconPlus = function IconPlus(props) {
+var _excluded$1r = ["testId"];
+
+var IconPlus = function IconPlus(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-plus' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1r);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-plus",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2463,13 +3012,19 @@ var IconPlus = function IconPlus(props) {
 
 IconPlus.displayName = 'IconPlus';
 
-var IconPrint = function IconPrint(props) {
+var _excluded$1s = ["testId"];
+
+var IconPrint = function IconPrint(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-print' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1s);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-print",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2480,13 +3035,19 @@ var IconPrint = function IconPrint(props) {
 
 IconPrint.displayName = 'IconPrint';
 
-var IconQuestionCircle = function IconQuestionCircle(props) {
+var _excluded$1t = ["testId"];
+
+var IconQuestionCircle = function IconQuestionCircle(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-question-circle' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1t);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-question-circle",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M10 13.281a1.094 1.094 0 1 0 0 2.188 1.094 1.094 0 0 0 0-2.188Zm.3-.937h-.625a.469.469 0 0 1-.47-.469v-.015c0-2.748 3.026-2.485 3.026-4.196 0-.781-.694-1.57-2.244-1.57-1.138 0-1.729.377-2.313 1.12a.467.467 0 0 1-.635.093l-.513-.357a.468.468 0 0 1-.103-.671c.83-1.064 1.813-1.748 3.564-1.748 2.044 0 3.806 1.162 3.806 3.133 0 2.634-3.025 2.495-3.025 4.196v.015c0 .259-.21.469-.468.469ZM10 1.563c4.634 0 8.438 3.752 8.438 8.437A8.435 8.435 0 0 1 10 18.438 8.435 8.435 0 0 1 1.562 10 8.437 8.437 0 0 1 10 1.562Zm0-1.25a9.687 9.687 0 1 0 0 19.375A9.687 9.687 0 0 0 19.688 10C19.688 4.652 15.35.312 10 .312Z",
     fill: "currentColor"
@@ -2495,13 +3056,19 @@ var IconQuestionCircle = function IconQuestionCircle(props) {
 
 IconQuestionCircle.displayName = 'IconQuestionCircle';
 
-var IconRepeat = function IconRepeat(props) {
+var _excluded$1u = ["testId"];
+
+var IconRepeat = function IconRepeat(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-repeat' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1u);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-repeat",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M0 10c0 3.469 2.804 6.29 6.25 6.29h9.429l-2.665 2.682a.474.474 0 0 0 0 .667l.221.223c.184.184.48.184.663 0l3.842-3.867a.474.474 0 0 0 0-.667l-3.842-3.867a.467.467 0 0 0-.663 0l-.22.223a.474.474 0 0 0 0 .667l2.664 2.682H6.25c-2.757 0-5-2.258-5-5.033 0-1.123.367-2.16.987-2.999a.475.475 0 0 0-.043-.616L1.97 6.16a.467.467 0 0 0-.706.05A6.284 6.284 0 0 0 0 10Zm17.763 2.999c.62-.838.987-1.876.987-2.999 0-2.775-2.243-5.033-5-5.033H4.321L6.986 7.65a.474.474 0 0 1 0 .667l-.221.223a.467.467 0 0 1-.663 0L2.26 4.672a.474.474 0 0 1 0-.667L6.102.138a.467.467 0 0 1 .663 0l.22.223a.474.474 0 0 1 0 .667L4.321 3.709h9.429C17.196 3.71 20 6.531 20 10a6.285 6.285 0 0 1-1.265 3.79.468.468 0 0 1-.706.05l-.223-.225a.475.475 0 0 1-.043-.616Z",
     fill: "currentColor"
@@ -2510,13 +3077,19 @@ var IconRepeat = function IconRepeat(props) {
 
 IconRepeat.displayName = 'IconRepeat';
 
-var IconReply = function IconReply(props) {
+var _excluded$1v = ["testId"];
+
+var IconReply = function IconReply(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-reply' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1v);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-reply",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m.788 9.854 5.893 6.161c.828.866 2.307.288 2.307-.926v-2.94c5.17.06 7.335.56 6.067 5.058-.28.988.852 1.749 1.663 1.156 1.115-.815 2.985-2.665 2.985-5.845 0-5.729-5.175-6.731-10.715-6.798V2.77c0-1.215-1.48-1.79-2.307-.926L.788 8.003a1.34 1.34 0 0 0 0 1.851Zm.775-1.11 5.893-6.161a.268.268 0 0 1 .461.185v4.018c5.26 0 10.714.374 10.714 5.732 0 2.49-1.339 4.09-2.545 4.972 1.719-6.093-2.43-6.418-8.169-6.418v4.017a.268.268 0 0 1-.461.186L1.563 9.114a.267.267 0 0 1 0-.37Z",
     fill: "currentColor"
@@ -2525,13 +3098,19 @@ var IconReply = function IconReply(props) {
 
 IconReply.displayName = 'IconReply';
 
-var IconSearch = function IconSearch(props) {
+var _excluded$1w = ["testId"];
+
+var IconSearch = function IconSearch(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-search' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1w);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-search",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2542,13 +3121,19 @@ var IconSearch = function IconSearch(props) {
 
 IconSearch.displayName = 'IconSearch';
 
-var IconSignOut = function IconSignOut(props) {
+var _excluded$1x = ["testId"];
+
+var IconSignOut = function IconSignOut(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-sign-out' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1x);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-sign-out",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M6.25 9.314c0-.344.281-.625.625-.625H12.5V5.02c0-.278.336-.418.531-.223l5.531 5.59a.625.625 0 0 1 0 .887l-5.53 5.59a.311.311 0 0 1-.532-.223v-3.668H6.875a.627.627 0 0 1-.625-.625V9.314Zm-1.25 0v3.035c0 1.035.84 1.875 1.875 1.875h4.375v2.418c0 1.387 1.68 2.09 2.664 1.105l5.535-5.586a1.877 1.877 0 0 0 0-2.656l-5.535-5.59c-.98-.98-2.664-.285-2.664 1.106v2.418H6.875A1.878 1.878 0 0 0 5 9.314ZM0 5.208v11.25c0 1.035.84 1.875 1.875 1.875h5.156a.47.47 0 0 0 .469-.468v-.313a.47.47 0 0 0-.469-.469H1.875a.627.627 0 0 1-.625-.625V5.208c0-.344.281-.625.625-.625h5.156a.47.47 0 0 0 .469-.469v-.312a.47.47 0 0 0-.469-.469H1.875C.84 3.333 0 4.173 0 5.208Z",
     fill: "currentColor"
@@ -2557,13 +3142,19 @@ var IconSignOut = function IconSignOut(props) {
 
 IconSignOut.displayName = 'IconSignOut';
 
-var IconSitemap = function IconSitemap(props) {
+var _excluded$1y = ["testId"];
+
+var IconSitemap = function IconSitemap(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-sitemap' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1y);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-sitemap",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2574,13 +3165,19 @@ var IconSitemap = function IconSitemap(props) {
 
 IconSitemap.displayName = 'IconSitemap';
 
-var IconSlidersH = function IconSlidersH(props) {
+var _excluded$1z = ["testId"];
+
+var IconSlidersH = function IconSlidersH(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-sliders-h' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1z);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-sliders-h",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-sliders-h_svg__a)"
   }, React__default.createElement("path", {
@@ -2596,13 +3193,19 @@ var IconSlidersH = function IconSlidersH(props) {
 
 IconSlidersH.displayName = 'IconSlidersH';
 
-var IconSort = function IconSort(props) {
+var _excluded$1A = ["testId"];
+
+var IconSort = function IconSort(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-sort' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1A);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-sort",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m16.74 4.602-3.284-3.215a.466.466 0 0 0-.66 0l-3.28 3.216a.469.469 0 0 0-.004.664l.22.222a.466.466 0 0 0 .66.003l2.11-2.057v15.002a.313.313 0 0 0 .312.313h.625a.312.312 0 0 0 .312-.313V3.441l2.107 2.045a.469.469 0 0 0 .661 0l.22-.222a.469.469 0 0 0 0-.662Zm-6.468 9.912a.464.464 0 0 0-.66-.003l-2.11 2.057V1.562a.312.312 0 0 0-.313-.312h-.625a.312.312 0 0 0-.313.313v14.996l-2.107-2.045a.468.468 0 0 0-.66 0l-.221.222a.47.47 0 0 0 0 .664l3.283 3.214a.467.467 0 0 0 .66 0l3.28-3.215a.468.468 0 0 0 .004-.664l-.218-.22Z",
     fill: "currentColor"
@@ -2611,13 +3214,19 @@ var IconSort = function IconSort(props) {
 
 IconSort.displayName = 'IconSort';
 
-var IconStarSolid = function IconStarSolid(props) {
+var _excluded$1B = ["testId"];
+
+var IconStarSolid = function IconStarSolid(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-star-solid' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1B);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-star-solid",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M8.944 1.591 6.602 6.34l-5.239.763C.423 7.24.047 8.398.73 9.06l3.79 3.694-.897 5.217c-.16.943.832 1.65 1.664 1.209l4.687-2.464 4.686 2.463c.832.438 1.826-.265 1.664-1.208l-.896-5.217 3.79-3.694c.681-.663.305-1.821-.635-1.958l-5.239-.763-2.341-4.748c-.42-.846-1.635-.857-2.058 0Z",
     fill: "currentColor"
@@ -2626,13 +3235,19 @@ var IconStarSolid = function IconStarSolid(props) {
 
 IconStarSolid.displayName = 'IconStarSolid';
 
-var IconStar = function IconStar(props) {
+var _excluded$1C = ["testId"];
+
+var IconStar = function IconStar(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-star' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1C);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-star",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m18.976 6.699-5.462-.832L11.073.696a1.175 1.175 0 0 0-2.146 0L6.486 5.867l-5.462.832c-.98.148-1.372 1.41-.661 2.132l3.951 4.023-.935 5.683c-.168 1.027.868 1.797 1.735 1.317L10 17.17l4.886 2.683c.867.477 1.903-.289 1.735-1.316l-.935-5.683 3.951-4.023c.71-.722.318-1.984-.661-2.132Zm-4.572 5.718 1.039 6.327L10 15.76l-5.44 2.988 1.04-6.327-4.404-4.488 6.083-.922L10 1.251l2.722 5.76 6.082.922-4.4 4.484Z",
     fill: "currentColor"
@@ -2641,13 +3256,19 @@ var IconStar = function IconStar(props) {
 
 IconStar.displayName = 'IconStar';
 
-var IconStickyNoteLines = function IconStickyNoteLines(props) {
+var _excluded$1D = ["testId"];
+
+var IconStickyNoteLines = function IconStickyNoteLines(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-sticky-note-lines' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1D);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-sticky-note-lines",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M20 14.112V2.142C20 .96 19.04 0 17.857 0H2.143C.959 0 0 .96 0 2.143v15.714C0 19.041.96 20 2.143 20h11.97c.568 0 1.113-.226 1.515-.628l3.744-3.745c.402-.401.628-.946.628-1.515Zm-5.383 4.25a.71.71 0 0 1-.331.188v-4.264h4.263a.708.708 0 0 1-.187.331l-3.744 3.745Zm3.954-16.22v10.715H13.93c-.592 0-1.072.48-1.072 1.071v4.643H2.143a.714.714 0 0 1-.714-.714V2.143c0-.395.32-.714.714-.714h15.714c.395 0 .714.32.714.714Z",
     fill: "currentColor"
@@ -2659,13 +3280,19 @@ var IconStickyNoteLines = function IconStickyNoteLines(props) {
 
 IconStickyNoteLines.displayName = 'IconStickyNoteLines';
 
-var IconStopwatch = function IconStopwatch(props) {
+var _excluded$1E = ["testId"];
+
+var IconStopwatch = function IconStopwatch(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-stopwatch' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1E);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-stopwatch",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2676,13 +3303,19 @@ var IconStopwatch = function IconStopwatch(props) {
 
 IconStopwatch.displayName = 'IconStopwatch';
 
-var IconStrikethrough = function IconStrikethrough(props) {
+var _excluded$1F = ["testId"];
+
+var IconStrikethrough = function IconStrikethrough(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-strikethrough' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1F);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-strikethrough",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-strikethrough_svg__a)"
   }, React__default.createElement("path", {
@@ -2698,12 +3331,18 @@ var IconStrikethrough = function IconStrikethrough(props) {
 
 IconStrikethrough.displayName = 'IconStrikethrough';
 
-var IconSyncExclaimation = function IconSyncExclaimation(props) {
+var _excluded$1G = ["testId"];
+
+var IconSyncExclaimation = function IconSyncExclaimation(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-sync-exclaimation' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1G);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-sync-exclaimation",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18 10a7.939 7.939 0 0 0-2.351-5.649L13 7.001V1h6l-1.938 1.937A9.93 9.93 0 0 1 20 10c0 5.514-4.486 10-10 10v-2c4.411 0 8-3.589 8-8ZM10 0v2c-4.41 0-8 3.589-8 8a7.94 7.94 0 0 0 2.35 5.649L7 12.999v6H1l1.938-1.937A9.926 9.926 0 0 1 0 10C0 4.486 4.485 0 10 0Zm.084 12.334a.915.915 0 1 1 0 1.833.915.915 0 0 1-.917-.917c0-.507.41-.916.917-.916ZM10.769 5c.13 0 .235.09.231.2l-.29 6.335c-.003.103-.107.187-.23.187h-.792c-.123 0-.228-.08-.231-.187L9.167 5.2c-.004-.11.1-.2.232-.2h1.37Z",
     fill: "currentColor",
@@ -2713,12 +3352,18 @@ var IconSyncExclaimation = function IconSyncExclaimation(props) {
 
 IconSyncExclaimation.displayName = 'IconSyncExclaimation';
 
-var IconSync = function IconSync(props) {
+var _excluded$1H = ["testId"];
+
+var IconSync = function IconSync(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-sync' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1H);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-sync",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18 10a7.939 7.939 0 0 0-2.351-5.649L13 7.001V1h6l-1.938 1.937A9.93 9.93 0 0 1 20 10c0 5.514-4.486 10-10 10v-2c4.411 0 8-3.589 8-8ZM2 10a7.94 7.94 0 0 0 2.35 5.649L7 12.999v6H1l1.938-1.937A9.926 9.926 0 0 1 0 10C0 4.486 4.485 0 10 0v2c-4.41 0-8 3.589-8 8Z",
     fill: "currentColor",
@@ -2728,11 +3373,17 @@ var IconSync = function IconSync(props) {
 
 IconSync.displayName = 'IconSync';
 
-var IconTachometer = function IconTachometer(props) {
+var _excluded$1I = ["testId"];
+
+var IconTachometer = function IconTachometer(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-tachometer' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1I);
+
   return React__default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-tachometer",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
@@ -2742,13 +3393,19 @@ var IconTachometer = function IconTachometer(props) {
 
 IconTachometer.displayName = 'IconTachometer';
 
-var IconTimesOctagon = function IconTimesOctagon(props) {
+var _excluded$1J = ["testId"];
+
+var IconTimesOctagon = function IconTimesOctagon(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-times-octagon' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1J);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-times-octagon",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2759,13 +3416,19 @@ var IconTimesOctagon = function IconTimesOctagon(props) {
 
 IconTimesOctagon.displayName = 'IconTimesOctagon';
 
-var IconTimes = function IconTimes(props) {
+var _excluded$1K = ["testId"];
+
+var IconTimes = function IconTimes(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-times' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1K);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-times",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2776,13 +3439,19 @@ var IconTimes = function IconTimes(props) {
 
 IconTimes.displayName = 'IconTimes';
 
-var IconTrash = function IconTrash(props) {
+var _excluded$1L = ["testId"];
+
+var IconTrash = function IconTrash(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-trash' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1L);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-trash",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2793,13 +3462,19 @@ var IconTrash = function IconTrash(props) {
 
 IconTrash.displayName = 'IconTrash';
 
-var IconUnderline = function IconUnderline(props) {
+var _excluded$1M = ["testId"];
+
+var IconUnderline = function IconUnderline(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-underline' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1M);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-underline",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18.196.29h-5.464a.303.303 0 0 0-.303.304V1.2a.304.304 0 0 0 .303.303h2.125v8.5a4.857 4.857 0 1 1-9.714 0v-8.5h2.125a.304.304 0 0 0 .303-.303V.594A.304.304 0 0 0 7.268.29H1.804A.304.304 0 0 0 1.5.594V1.2a.304.304 0 0 0 .304.303h2.125v8.5A6.079 6.079 0 0 0 10 16.076a6.079 6.079 0 0 0 6.071-6.072v-8.5h2.125a.304.304 0 0 0 .304-.303V.594a.304.304 0 0 0-.304-.304Zm0 18.214H1.804a.304.304 0 0 0-.304.304v.607a.303.303 0 0 0 .304.304h16.392a.304.304 0 0 0 .304-.304v-.607a.304.304 0 0 0-.304-.304Z",
     fill: "currentColor"
@@ -2808,13 +3483,19 @@ var IconUnderline = function IconUnderline(props) {
 
 IconUnderline.displayName = 'IconUnderline';
 
-var IconUndo = function IconUndo(props) {
+var _excluded$1N = ["testId"];
+
+var IconUndo = function IconUndo(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-undo' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1N);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-undo",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M.781.313h.39c.26 0 .47.21.47.468v4.322a9.682 9.682 0 0 1 8.39-4.79c5.328.016 9.665 4.375 9.656 9.702-.008 5.344-4.342 9.672-9.687 9.672a9.652 9.652 0 0 1-6.491-2.496.47.47 0 0 1-.02-.68l.277-.277a.468.468 0 0 1 .644-.018A8.327 8.327 0 0 0 10 18.36c4.6 0 8.36-3.724 8.36-8.359 0-4.6-3.724-8.36-8.36-8.36a8.357 8.357 0 0 0-7.433 4.532H7.03c.26 0 .469.21.469.469v.39c0 .26-.21.469-.469.469H.781a.469.469 0 0 1-.469-.469V.781c0-.259.21-.468.47-.468Z",
     fill: "currentColor"
@@ -2823,13 +3504,19 @@ var IconUndo = function IconUndo(props) {
 
 IconUndo.displayName = 'IconUndo';
 
-var IconUniversity = function IconUniversity(props) {
+var _excluded$1O = ["testId"];
+
+var IconUniversity = function IconUniversity(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-university' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1O);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-university",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-university_svg__a)"
   }, React__default.createElement("path", {
@@ -2845,13 +3532,19 @@ var IconUniversity = function IconUniversity(props) {
 
 IconUniversity.displayName = 'IconUniversity';
 
-var IconUserComputer = function IconUserComputer(props) {
+var _excluded$1P = ["testId"];
+
+var IconUserComputer = function IconUserComputer(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-computer' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1P);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-computer",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18.958 2.5H6.25c-.575 0-1.042.466-1.042 1.042v1.172a3.125 3.125 0 1 0 3.125 3.125A3.116 3.116 0 0 0 6.25 4.905V3.542h12.708v9.505H9.94c-.019-.03-.033-.064-.053-.094-.562-.834-1.52-1.273-2.504-1.273-.904 0-1.131.325-2.174.325-1.04 0-1.268-.325-2.174-.325-.984 0-1.942.44-2.503 1.273A3.11 3.11 0 0 0 0 14.696v1.216c0 .719.583 1.301 1.302 1.301h7.813c.719 0 1.302-.582 1.302-1.302v-1.215c0-.208-.028-.41-.067-.607h8.608c.576 0 1.042-.467 1.042-1.042V3.542c0-.576-.466-1.042-1.042-1.042ZM7.292 7.839a2.086 2.086 0 0 1-2.084 2.083 2.086 2.086 0 0 1-2.083-2.083c0-1.15.935-2.084 2.083-2.084 1.15 0 2.084.935 2.084 2.084Zm2.083 8.072a.26.26 0 0 1-.26.26H1.302a.26.26 0 0 1-.26-.26v-1.215c0-.416.122-.818.353-1.16.343-.51.955-.814 1.64-.814.709 0 .975.325 2.173.325s1.465-.325 2.174-.325c.684 0 1.297.304 1.64.813.23.343.353.745.353 1.161v1.216Z",
     fill: "currentColor"
@@ -2871,13 +3564,19 @@ var IconUserComputer = function IconUserComputer(props) {
 
 IconUserComputer.displayName = 'IconUserComputer';
 
-var IconUserFriends = function IconUserFriends(props) {
+var _excluded$1Q = ["testId"];
+
+var IconUserFriends = function IconUserFriends(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-friends' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1Q);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-friends",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M15 10a3 3 0 1 0-.002-6.002A3 3 0 0 0 15 10Zm0-5c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2Zm-9 5c1.934 0 3.5-1.566 3.5-3.5S7.934 3 6 3a3.498 3.498 0 0 0-3.5 3.5C2.5 8.434 4.066 10 6 10Zm0-6c1.378 0 2.5 1.122 2.5 2.5S7.378 9 6 9a2.503 2.503 0 0 1-2.5-2.5C3.5 5.122 4.622 4 6 4Zm2.503 6.625C7.46 10.625 7.2 11 6 11c-1.2 0-1.46-.375-2.503-.375-1.135 0-2.238.506-2.885 1.466A3.581 3.581 0 0 0 0 14.1v1.4A1.5 1.5 0 0 0 1.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-1.4c0-.744-.225-1.434-.613-2.01-.646-.959-1.75-1.465-2.884-1.465ZM11 15.5c0 .275-.225.5-.5.5h-9a.501.501 0 0 1-.5-.5v-1.4c0-.519.153-1.022.44-1.45.432-.64 1.2-1.025 2.054-1.025.856 0 1.162.375 2.506.375 1.344 0 1.65-.375 2.503-.375.853 0 1.622.384 2.053 1.025.288.428.44.931.44 1.45v1.4H11Zm8.49-3.59c-.54-.8-1.459-1.223-2.402-1.223-.87 0-1.088.313-2.088.313s-1.219-.313-2.088-.313a3.05 3.05 0 0 0-1.19.254c.475.48.578.737.631.83a2.05 2.05 0 0 1 .56-.08c.68 0 .937.312 2.087.312 1.15 0 1.406-.312 2.087-.312.657 0 1.244.29 1.576.78.221.329.34.716.34 1.117v1.162a.25.25 0 0 1-.25.25H13c0 .553.01.703-.05 1h5.8c.69 0 1.25-.56 1.25-1.25v-1.166c0-.621-.188-1.197-.51-1.675Z",
     fill: "currentColor"
@@ -2886,13 +3585,19 @@ var IconUserFriends = function IconUserFriends(props) {
 
 IconUserFriends.displayName = 'IconUserFriends';
 
-var IconUserLight = function IconUserLight(props) {
+var _excluded$1R = ["testId"];
+
+var IconUserLight = function IconUserLight(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-light' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1R);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-light",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2903,13 +3608,19 @@ var IconUserLight = function IconUserLight(props) {
 
 IconUserLight.displayName = 'IconUserLight';
 
-var IconUserPlus = function IconUserPlus(props) {
+var _excluded$1S = ["testId"];
+
+var IconUserPlus = function IconUserPlus(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-plus' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1S);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-plus",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M19.77 9.063h-2.52V6.483a.232.232 0 0 0-.23-.234h-.458a.232.232 0 0 0-.229.234v2.579h-2.52a.232.232 0 0 0-.23.234v.469c0 .129.103.234.23.234h2.52v2.578c0 .129.103.235.23.235h.457c.127 0 .23-.106.23-.235V10h2.52c.127 0 .23-.105.23-.234v-.47a.232.232 0 0 0-.23-.233ZM6.667 10c2.104 0 3.81-1.865 3.81-4.167 0-2.301-1.706-4.166-3.81-4.166s-3.81 1.865-3.81 4.166C2.857 8.135 4.562 10 6.667 10Zm2.666 1.042h-.497c-.66.332-1.396.52-2.17.52a4.825 4.825 0 0 1-2.169-.52H4c-2.208 0-4 1.96-4 4.375v1.354c0 .863.64 1.562 1.429 1.562h10.476c.789 0 1.428-.7 1.428-1.562v-1.354c0-2.416-1.791-4.375-4-4.375Z",
     fill: "currentColor"
@@ -2918,13 +3629,19 @@ var IconUserPlus = function IconUserPlus(props) {
 
 IconUserPlus.displayName = 'IconUserPlus';
 
-var IconUserSlash = function IconUserSlash(props) {
+var _excluded$1T = ["testId"];
+
+var IconUserSlash = function IconUserSlash(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-slash' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1T);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-slash",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-user-slash_svg__a)"
   }, React__default.createElement("path", {
@@ -2940,13 +3657,19 @@ var IconUserSlash = function IconUserSlash(props) {
 
 IconUserSlash.displayName = 'IconUserSlash';
 
-var IconUserSolid = function IconUserSolid(props) {
+var _excluded$1U = ["testId"];
+
+var IconUserSolid = function IconUserSolid(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-solid' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1U);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-solid",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M10 10c2.63 0 4.762-2.238 4.762-5S12.63 0 10 0C7.37 0 5.238 2.238 5.238 5S7.37 10 10 10Zm3.334 1.25h-.622a6.226 6.226 0 0 1-2.712.625 6.238 6.238 0 0 1-2.712-.625h-.621c-2.76 0-5 2.352-5 5.25v1.625c0 1.035.8 1.875 1.786 1.875h13.095c.986 0 1.786-.84 1.786-1.875V16.5c0-2.898-2.24-5.25-5-5.25Z",
     fill: "currentColor"
@@ -2955,13 +3678,19 @@ var IconUserSolid = function IconUserSolid(props) {
 
 IconUserSolid.displayName = 'IconUserSolid';
 
-var IconUserTag = function IconUserTag(props) {
+var _excluded$1V = ["testId"];
+
+var IconUserTag = function IconUserTag(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-tag' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1V);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-tag",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -2972,13 +3701,19 @@ var IconUserTag = function IconUserTag(props) {
 
 IconUserTag.displayName = 'IconUserTag';
 
-var IconUserTie = function IconUserTie(props) {
+var _excluded$1W = ["testId"];
+
+var IconUserTie = function IconUserTie(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-user-tie' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1W);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-user-tie",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M10 10a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm3.742 1.273-1.867 7.477-1.25-5.313 1.25-2.187h-3.75l1.25 2.188-1.25 5.312-1.867-7.477c-2.785.133-5.008 2.41-5.008 5.227v1.625C1.25 19.16 2.09 20 3.125 20h13.75c1.035 0 1.875-.84 1.875-1.875V16.5c0-2.816-2.223-5.094-5.008-5.227Z",
     fill: "currentColor"
@@ -2987,13 +3722,19 @@ var IconUserTie = function IconUserTie(props) {
 
 IconUserTie.displayName = 'IconUserTie';
 
-var IconUsers = function IconUsers(props) {
+var _excluded$1X = ["testId"];
+
+var IconUsers = function IconUsers(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-users' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1X);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-users",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M17 9a2.5 2.5 0 1 0 .001-4.999A2.5 2.5 0 0 0 17 9Zm0-4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-7 5c1.934 0 3.5-1.566 3.5-3.5S11.934 3 10 3a3.498 3.498 0 0 0-3.5 3.5C6.5 8.434 8.066 10 10 10Zm0-6c1.378 0 2.5 1.122 2.5 2.5S11.378 9 10 9a2.503 2.503 0 0 1-2.5-2.5C7.5 5.122 8.622 4 10 4Zm7.625 6h-1.25c-.475 0-.916.15-1.284.403.293.2.559.434.793.7.154-.066.32-.103.491-.103h1.25c.756 0 1.375.672 1.375 1.5 0 .275.225.5.5.5s.5-.225.5-.5c0-1.378-1.066-2.5-2.375-2.5ZM3 9a2.5 2.5 0 1 0 .001-4.999A2.5 2.5 0 0 0 3 9Zm0-4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm9.503 5.625C11.46 10.625 11.2 11 10 11c-1.2 0-1.46-.375-2.503-.375-1.135 0-2.238.506-2.885 1.466A3.581 3.581 0 0 0 4 14.1v1.4A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-1.4c0-.744-.225-1.434-.613-2.01-.646-.959-1.75-1.465-2.884-1.465ZM15 15.5c0 .275-.225.5-.5.5h-9a.501.501 0 0 1-.5-.5v-1.4c0-.519.153-1.022.44-1.45.432-.64 1.2-1.025 2.054-1.025.856 0 1.162.375 2.506.375 1.344 0 1.65-.375 2.503-.375.853 0 1.622.384 2.053 1.025.288.428.44.931.44 1.45v1.4H15ZM4.91 10.403A2.276 2.276 0 0 0 3.624 10h-1.25C1.065 10 0 11.122 0 12.5c0 .275.225.5.5.5s.5-.225.5-.5c0-.828.619-1.5 1.375-1.5h1.25c.172 0 .337.037.49.103.235-.265.504-.5.794-.7Z",
     fill: "currentColor"
@@ -3002,13 +3743,19 @@ var IconUsers = function IconUsers(props) {
 
 IconUsers.displayName = 'IconUsers';
 
-var IconVideo = function IconVideo(props) {
+var _excluded$1Y = ["testId"];
+
+var IconVideo = function IconVideo(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-video' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1Y);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-video",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M18.885 4.555c-.215 0-.434.063-.632.198L14.444 7.18V5.104c0-.917-.805-1.66-1.798-1.66H1.799C.806 3.444 0 4.187 0 5.104v10.014c0 .917.806 1.66 1.799 1.66h10.847c.993 0 1.798-.743 1.798-1.66v-2.076l3.806 2.427c.198.139.42.198.632.198.576 0 1.114-.452 1.114-1.094V5.649c.004-.642-.534-1.094-1.11-1.094Zm-5.552 10.563c0 .299-.316.549-.687.549H1.799c-.372 0-.688-.25-.688-.55V5.105c0-.299.316-.549.688-.549h10.847c.371 0 .687.25.687.55v10.013Zm5.556-.545-.042-.045-4.403-2.806V8.496l4.445-2.83v8.907Z",
     fill: "currentColor"
@@ -3017,13 +3764,19 @@ var IconVideo = function IconVideo(props) {
 
 IconVideo.displayName = 'IconVideo';
 
-var IconVolumeMute = function IconVolumeMute(props) {
+var _excluded$1Z = ["testId"];
+
+var IconVolumeMute = function IconVolumeMute(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-volume-mute' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1Z);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-volume-mute",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "m17.759 10 2.15-2.15a.313.313 0 0 0 0-.442l-.442-.441a.313.313 0 0 0-.442 0l-2.15 2.149-2.15-2.15a.313.313 0 0 0-.441 0l-.442.442a.313.313 0 0 0 0 .442L15.99 10l-2.15 2.15a.313.313 0 0 0 0 .441l.442.442c.122.122.32.122.442 0l2.15-2.15 2.15 2.15c.122.122.32.122.441 0l.442-.441a.313.313 0 0 0 0-.442L17.76 10ZM9.055 2.5a.916.916 0 0 0-.655.275L4.924 6.25H.937A.937.937 0 0 0 0 7.187v5.625c0 .518.42.938.938.938h3.986L8.4 17.224a.936.936 0 0 0 1.6-.663V3.438a.936.936 0 0 0-.945-.938ZM8.75 15.807l-2.942-2.941-.366-.366H1.25v-5h4.192l.366-.366L8.75 4.192v11.615Z",
     fill: "currentColor"
@@ -3032,13 +3785,19 @@ var IconVolumeMute = function IconVolumeMute(props) {
 
 IconVolumeMute.displayName = 'IconVolumeMute';
 
-var IconVolume = function IconVolume(props) {
+var _excluded$1_ = ["testId"];
+
+var IconVolume = function IconVolume(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-volume' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1_);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-volume",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M13.995 7.561a.625.625 0 1 0-.54 1.127c.552.265.895.767.895 1.312 0 .544-.343 1.047-.895 1.312a.625.625 0 0 0 .54 1.126c.99-.474 1.605-1.408 1.605-2.438 0-1.03-.616-1.964-1.605-2.439ZM9.655 2.5a.916.916 0 0 0-.656.275L5.524 6.25H1.537a.937.937 0 0 0-.937.938v5.625c0 .517.42.937.937.937h3.987l3.475 3.475a.936.936 0 0 0 1.6-.663V3.438a.936.936 0 0 0-.944-.938ZM9.35 15.807 6.04 12.5H1.85v-5H6.04L9.35 4.193v11.614Zm10-5.807c0-2.583-1.33-4.946-3.47-6.167a.635.635 0 0 0-.86.23c-.174.3-.07.681.232.854 1.75.998 2.837 2.945 2.837 5.083 0 2.137-1.088 4.085-2.837 5.082a.623.623 0 0 0-.232.854c.168.289.549.408.86.23 2.14-1.22 3.47-3.583 3.47-6.166Z",
     fill: "currentColor"
@@ -3047,13 +3806,19 @@ var IconVolume = function IconVolume(props) {
 
 IconVolume.displayName = 'IconVolume';
 
-var IconWrench = function IconWrench(props) {
+var _excluded$1$ = ["testId"];
+
+var IconWrench = function IconWrench(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'icon-wrench' : _ref$testId,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1$);
+
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "data-testid": "icon-wrench",
-    style: getIconStyles(props)
+    style: getIconStyles(props),
+    "data-testid": testId
   }, props), React__default.createElement("path", {
     d: "M19.002 4.933a.974.974 0 0 0-1.636-.452l-2.287 2.287-1.585-.264-.264-1.584 2.287-2.287A.976.976 0 0 0 15.06.995 5.376 5.376 0 0 0 9.933 2.42C8.578 3.776 8.063 5.732 8.55 7.6l-6.922 6.922a2.726 2.726 0 0 0 0 3.847 2.704 2.704 0 0 0 1.924.798 2.7 2.7 0 0 0 1.924-.798l6.915-6.914a5.364 5.364 0 0 0 5.188-1.39 5.366 5.366 0 0 0 1.423-5.132ZM16.77 9.255c-1.14 1.139-2.808 1.526-4.36 1.01l-.336-.112-7.407 7.407c-.596.595-1.633.595-2.228 0a1.579 1.579 0 0 1 0-2.228L9.85 7.921l-.11-.335c-.513-1.556-.128-3.225 1.003-4.356a4.225 4.225 0 0 1 3.743-1.186l-2.482 2.483.494 2.973 2.975.495 2.48-2.483a4.225 4.225 0 0 1-1.184 3.743ZM3.698 15.729a.573.573 0 1 0 0 1.146.573.573 0 0 0 0-1.146Z",
     fill: "currentColor"
@@ -3116,10 +3881,10 @@ var WHITE = '#ffffff';
 var EGGPLANT200 = '#d3dbf4';
 var EGGPLANT300 = '#a7b7ea';
 var EGGPLANT400 = '#6d87dd';
-var EGGPLANT700 = '#32295c';
+var EGGPLANT600 = '#415184';
 var RADISH400 = '#e76767';
 var GREY100 = '#F3F3F3';
-var GREY200 = '#C8C8C8';
+var GREY200 = '#D5D5D5';
 var GREY300 = '#949494';
 var GREY400 = '#767676';
 var GREY500 = '#464646';
@@ -3266,9 +4031,11 @@ var PaginationControls = function PaginationControls(_ref) {
       _ref$hasNext = _ref.hasNext,
       hasNext = _ref$hasNext === void 0 ? true : _ref$hasNext,
       onPreviousClick = _ref.onPreviousClick,
-      onNextClick = _ref.onNextClick;
+      onNextClick = _ref.onNextClick,
+      testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$8['pagination-controls']
+    className: styles$8['pagination-controls'],
+    "data-testid": testId
   }, React__default.createElement(Button$1, {
     disabled: !hasPrevious,
     onClick: onPreviousClick,
@@ -3390,18 +4157,20 @@ var Toggle = function Toggle(_ref) {
       onChange = _ref.onChange,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      id = _ref.id;
+      id = _ref.id,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'toggle' : _ref$testId;
   return React__default.createElement(Stack, {
     space: 8
   }, React__default.createElement("label", {
     className: styles$a['toggle']
   }, React__default.createElement("input", {
-    "data-testid": "toggle",
     type: "checkbox",
     checked: checked,
     onChange: onChange,
     disabled: disabled,
-    id: id
+    id: id,
+    "data-testid": testId
   }), React__default.createElement("span", {
     className: styles$a['toggle__switch']
   }), label && React__default.createElement("span", {
@@ -3436,7 +4205,7 @@ var ActionsCell = function ActionsCell(_ref) {
   }))));
 };
 
-var _excluded$2 = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding"];
+var _excluded$20 = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding"];
 
 var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
   var _classnames;
@@ -3449,7 +4218,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       _ref$hasDefaultPaddin = _ref.hasDefaultPadding,
       hasDefaultPadding = _ref$hasDefaultPaddin === void 0 ? true : _ref$hasDefaultPaddin,
-      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$20);
 
   var _useDataTableContext = useDataTableContext(),
       columns = _useDataTableContext.columns,
@@ -3603,7 +4372,8 @@ var DataTable = function DataTable(_ref) {
       showActionMenu = _ref$showActionMenu === void 0 ? false : _ref$showActionMenu,
       footerComponent = _ref.footerComponent,
       _ref$hasVerticalBorde = _ref.hasVerticalBorders,
-      hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde;
+      hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde,
+      testId = _ref.testId;
   var RowItem = itemComponent || DefaultItemComponent$1;
   var conditionalStyles = {};
 
@@ -3629,7 +4399,8 @@ var DataTable = function DataTable(_ref) {
   }), React__default.createElement("div", {
     className: styles$b['body'],
     style: conditionalStyles,
-    role: "table"
+    role: "table",
+    "data-testid": testId
   }, isLoading && React__default.createElement(Spinner, {
     block: true
   }), !isLoading && items.map(function (item, index) {
@@ -3837,7 +4608,8 @@ var Modal = function Modal(_ref) {
       height = _ref.height,
       maxWidth = _ref.maxWidth,
       _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
-      shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu;
+      shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
+      testId = _ref.testId;
   var style = {
     content: {
       width: width,
@@ -3850,6 +4622,7 @@ var Modal = function Modal(_ref) {
   };
   return React__default.createElement(ReactModal, {
     isOpen: true,
+    testId: testId,
     shouldCloseOnEsc: true,
     shouldCloseOnOverlayClick: false,
     shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
@@ -3909,7 +4682,8 @@ var styles$f = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"}
 var ModalBody = function ModalBody(_ref) {
   var _classNames;
 
-  var children = _ref.children;
+  var children = _ref.children,
+      testId = _ref.testId;
 
   var _useScrollShadow = useScrollShadow(),
       ref = _useScrollShadow.ref,
@@ -3917,7 +4691,8 @@ var ModalBody = function ModalBody(_ref) {
 
   return React__default.createElement("div", {
     className: classnames(styles$f['modal-body'], (_classNames = {}, _classNames[styles$f['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
-    ref: ref
+    ref: ref,
+    "data-testid": testId
   }, children);
 };
 
@@ -3925,7 +4700,8 @@ var styles$g = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
-      actions = _ref.actions;
+      actions = _ref.actions,
+      testId = _ref.testId;
 
   if (actions) {
     var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
@@ -3939,7 +4715,9 @@ var ModalFooter = function ModalFooter(_ref) {
     var tertiaryButton = updateButtonProps(actions.tertiary, {
       theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary'
     });
-    return React__default.createElement(FooterContainer, null, React__default.createElement(Inline, {
+    return React__default.createElement(FooterContainer, {
+      testId: testId
+    }, React__default.createElement(Inline, {
       justifyContent: "space-between"
     }, React__default.createElement("div", {
       className: classnames((_classnames = {}, _classnames[styles$g['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
@@ -3966,11 +4744,13 @@ var updateButtonProps = function updateButtonProps(button, newProps) {
 };
 
 var FooterContainer = function FooterContainer(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+      testId = _ref2.testId;
   var childrenItens = React__default.Children.toArray(children);
   var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
   return React__default.createElement("div", {
-    className: styles$g['modal-footer']
+    className: styles$g['modal-footer'],
+    "data-testid": testId
   }, React__default.createElement(Inline, {
     justifyContent: "end",
     space: 12,
@@ -4096,7 +4876,8 @@ var Calendar = function Calendar(_ref) {
       onSelect = _ref.onSelect,
       onClickOutside = _ref.onClickOutside,
       disabledDays = _ref.disabledDays,
-      anchorRef = _ref.anchorRef;
+      anchorRef = _ref.anchorRef,
+      testId = _ref.testId;
 
   var _useState = React.useState(null),
       calendarRef = _useState[0],
@@ -4150,7 +4931,8 @@ var Calendar = function Calendar(_ref) {
     },
     style: _extends({}, calendarPosition, {
       zIndex: Z_INDEX_LAYERS.MODAL
-    })
+    }),
+    "data-testid": testId
   }, React__default.createElement(DayPicker__default, {
     format: "MM/dd/yyyy",
     classNames: style,
@@ -4365,7 +5147,8 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
       suffix = _ref.suffix,
       defaultValue = _ref.defaultValue,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type;
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      testId = _ref.testId;
 
   var _useDataTableContext = useDataTableContext(),
       columns = _useDataTableContext.columns,
@@ -4393,7 +5176,8 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
     id: controllers.id
   };
   return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$n['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$n['data-table-editable-cell'])
+    className: classnames((_classnames = {}, _classnames[styles$n['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$n['data-table-editable-cell']),
+    "data-testid": testId
   }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: prefix,
     suffix: suffix
@@ -4570,7 +5354,8 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
       onBlur = _ref.onBlur,
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
-      prefix = _ref.prefix;
+      prefix = _ref.prefix,
+      testId = _ref.testId;
   var controllers = useSelectFieldControllers({
     name: name,
     value: value,
@@ -4592,7 +5377,8 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
     components: {
       Option: Select.components.Option,
       Control: Select.components.Control
-    }
+    },
+    testId: testId
   }));
 };
 
@@ -4607,7 +5393,9 @@ var Form = function Form(_ref) {
       wide = _ref$wide === void 0 ? false : _ref$wide,
       formik = _ref.formik,
       _ref$stackContent = _ref.stackContent,
-      stackContent = _ref$stackContent === void 0 ? true : _ref$stackContent;
+      stackContent = _ref$stackContent === void 0 ? true : _ref$stackContent,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'form' : _ref$testId;
 
   var handleSubmit = function handleSubmit(e) {
     e.preventDefault();
@@ -4621,7 +5409,7 @@ var Form = function Form(_ref) {
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
     className: classnames((_classnames = {}, _classnames[styles$o['form--standard-size']] = !wide, _classnames)),
-    "data-testid": "form"
+    "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, children) : children));
 };
 
@@ -4634,7 +5422,8 @@ var SIZE_75_PERCENT = '75%';
 var FormRow = function FormRow(_ref) {
   var children = _ref.children,
       columns = _ref.columns,
-      sizes = _ref.sizes;
+      sizes = _ref.sizes,
+      testId = _ref.testId;
   var items = React__default.Children.toArray(children).filter(Boolean);
   var additionalColumns = [];
 
@@ -4650,7 +5439,8 @@ var FormRow = function FormRow(_ref) {
     flex: [].concat(items, additionalColumns).map(function (_, index) {
       return (sizes === null || sizes === void 0 ? void 0 : sizes[index]) || 1;
     }),
-    space: 20
+    space: 20,
+    testId: testId
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -4704,7 +5494,8 @@ var TextAreaField = function TextAreaField(_ref) {
       minHeight = _ref$minHeight === void 0 ? 40 : _ref$minHeight,
       _ref$maxHeight = _ref.maxHeight,
       maxHeight = _ref$maxHeight === void 0 ? 320 : _ref$maxHeight,
-      toolbar = _ref.toolbar;
+      toolbar = _ref.toolbar,
+      testId = _ref.testId;
   var containerRef = React.useRef(null);
   var toolbarRef = React.useRef(null);
 
@@ -4746,7 +5537,7 @@ var TextAreaField = function TextAreaField(_ref) {
   }, React__default.createElement("textarea", {
     name: name,
     id: controllers.id,
-    "data-testid": "text-field-" + name,
+    "data-testid": testId || "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
     "aria-invalid": hasError,
     disabled: disabled,
@@ -4800,7 +5591,8 @@ var useTextField = function useTextField(_ref) {
       onKeyDown = _ref.onKeyDown,
       placeholder = _ref.placeholder,
       value = _ref.value,
-      ref = _ref.ref;
+      ref = _ref.ref,
+      testId = _ref.testId;
   var controllers = useFieldControllers({
     error: error,
     id: id,
@@ -4818,7 +5610,7 @@ var useTextField = function useTextField(_ref) {
     autoComplete: autoComplete,
     autoFocus: autoFocus,
     className: classnames(styles$q['text-field'], (_classnames = {}, _classnames[styles$q['text-field--invalid']] = hasError, _classnames)),
-    'data-testid': "text-field-" + name,
+    'data-testid': testId || "text-field-" + name,
     disabled: disabled,
     defaultValue: defaultValue,
     id: controllers.id,
@@ -4847,12 +5639,12 @@ var useTextField = function useTextField(_ref) {
   };
 };
 
-var _excluded$3 = ["prefix", "suffix"];
+var _excluded$21 = ["prefix", "suffix"];
 
 var TextFieldElement = function TextFieldElement(_ref, ref) {
   var prefix = _ref.prefix,
       suffix = _ref.suffix,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$21);
 
   var _useTextField = useTextField(_extends({}, props, {
     ref: ref
@@ -4925,7 +5717,8 @@ var CheckboxField = function CheckboxField(_ref) {
       label = _ref.label,
       caption = _ref.caption,
       error = _ref.error,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      testId = _ref.testId;
   var controllers = useCheckBoxFieldControllers({
     name: name,
     id: inputId,
@@ -4946,7 +5739,7 @@ var CheckboxField = function CheckboxField(_ref) {
     name: name,
     id: controllers.id,
     type: "checkbox",
-    "data-testid": "check-box-field-" + name,
+    "data-testid": testId || "check-box-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
     "aria-invalid": hasError,
     disabled: disabled,
@@ -5029,7 +5822,8 @@ var PillSelectField = function PillSelectField(_ref) {
       label = _ref.label,
       caption = _ref.caption,
       error = _ref.error,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      testId = _ref.testId;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -5062,7 +5856,7 @@ var PillSelectField = function PillSelectField(_ref) {
       name: name + "-" + itemIdentifier,
       id: itemId,
       type: "checkbox",
-      "data-testid": "pill-select-field-" + name + "-" + itemIdentifier,
+      "data-testid": testId || "pill-select-field-" + name + "-" + itemIdentifier,
       "aria-describedby": hasError ? itemId + "-error-message" : itemId + "-describer",
       "aria-invalid": hasError,
       disabled: option.isDisabled || disabled,
@@ -5139,7 +5933,8 @@ var RadioGroupField = function RadioGroupField(_ref) {
       inline = _ref$inline === void 0 ? false : _ref$inline,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children;
+      children = _ref.children,
+      testId = _ref.testId;
   var controllers = useRadioGroupFieldControllers({
     name: name,
     value: value,
@@ -5163,13 +5958,17 @@ var RadioGroupField = function RadioGroupField(_ref) {
     className: styles$t['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
-  }, inline ? React__default.createElement(InlineOptions, null, children) : React__default.createElement(Stack, {
-    space: 12
+  }, inline ? React__default.createElement(InlineOptions, {
+    testId: testId
+  }, children) : React__default.createElement(Stack, {
+    space: 12,
+    testId: testId
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
 var InlineOptions = function InlineOptions(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+      testId = _ref2.testId;
   var MAX_OPTIONS_PER_ROW = 4;
   var numberOfElements = React__default.Children.count(children);
 
@@ -5182,7 +5981,8 @@ var InlineOptions = function InlineOptions(_ref2) {
     }
 
     return React__default.createElement(Stack, {
-      space: 12
+      space: 12,
+      testId: testId
     }, rows.map(function (row, rowIndex) {
       return React__default.createElement(FormRow, {
         key: rowIndex,
@@ -5191,7 +5991,9 @@ var InlineOptions = function InlineOptions(_ref2) {
     }));
   }
 
-  return React__default.createElement(FormRow, null, children);
+  return React__default.createElement(FormRow, {
+    testId: testId
+  }, children);
 };
 
 var styles$u = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
@@ -5200,7 +6002,8 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
       inputId = _ref.id,
       label = _ref.label,
-      caption = _ref.caption;
+      caption = _ref.caption,
+      testId = _ref.testId;
   var radioGroupContext = useRadioGroupFieldContext();
   var id = useFieldId({
     name: radioGroupContext.name,
@@ -5215,6 +6018,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     className: styles$u['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
+    "data-testid": testId,
     id: id,
     name: radioGroupContext.name,
     value: value,
@@ -5298,7 +6102,8 @@ var PasswordField = function PasswordField(_ref) {
       disabled = _ref.disabled,
       defaultValue = _ref.defaultValue,
       _ref$criterias = _ref.criterias,
-      criterias = _ref$criterias === void 0 ? [] : _ref$criterias;
+      criterias = _ref$criterias === void 0 ? [] : _ref$criterias,
+      testId = _ref.testId;
 
   var _useState = React.useState('password'),
       type = _useState[0],
@@ -5332,7 +6137,7 @@ var PasswordField = function PasswordField(_ref) {
     id: controllers.id,
     className: classnames(styles$v['text-field'], (_classnames = {}, _classnames[styles$v['text-field--invalid']] = hasError, _classnames)),
     type: type,
-    "data-testid": "text-field-" + name,
+    "data-testid": testId || "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
     "aria-invalid": hasError,
     disabled: disabled,
@@ -5444,7 +6249,7 @@ var getSelectStyles$1 = function getSelectStyles(_ref) {
     option: function option(base, state) {
       return Object.assign({}, base, {
         backgroundColor: state.isDisabled ? null : state.isSelected ? EGGPLANT200 : state.isFocused ? GREY100 : WHITE,
-        color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT700 : GREY500,
+        color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT600 : GREY500,
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',
@@ -5485,12 +6290,12 @@ var getSelectStyles$1 = function getSelectStyles(_ref) {
   };
 };
 
-var _excluded$4 = ["children", "CustomComponent"];
+var _excluded$22 = ["children", "CustomComponent"];
 
 function CustomOption(_ref) {
   var children = _ref.children,
       CustomComponent = _ref.CustomComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$22);
 
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -5534,7 +6339,8 @@ var MultiSelectField = function MultiSelectField(_ref) {
       _ref$closeOnSelect = _ref.closeOnSelect,
       closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
       _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
-      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll;
+      menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll,
+      testId = _ref.testId;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -5571,6 +6377,13 @@ var MultiSelectField = function MultiSelectField(_ref) {
     isMulti: true,
     closeMenuOnSelect: closeOnSelect,
     components: {
+      SelectContainer: function SelectContainer(props) {
+        return React__default.createElement(Select.components.SelectContainer, Object.assign({}, props, {
+          innerProps: Object.assign({}, props.innerProps, {
+            'data-testid': testId
+          })
+        }));
+      },
       Option: UserCustomOption ? function (props) {
         return React__default.createElement(CustomOption, Object.assign({
           CustomComponent: UserCustomOption
@@ -5592,14 +6405,14 @@ var MultiSelectField = function MultiSelectField(_ref) {
 
 var styles$x = {"custom-control":"_1cDCR"};
 
-var _excluded$5 = ["children", "CustomPrefixComponent"];
+var _excluded$23 = ["children", "CustomPrefixComponent"];
 
 function CustomControl(_ref) {
   var _props$getValue;
 
   var children = _ref.children,
       CustomPrefixComponent = _ref.CustomPrefixComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$23);
 
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, Object.assign({}, props), CustomPrefixComponent && selectedOption ? React__default.createElement("div", {
@@ -5616,12 +6429,12 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var _excluded$6 = ["children", "CustomComponent"];
+var _excluded$24 = ["children", "CustomComponent"];
 
 function CustomOption$1(_ref) {
   var children = _ref.children,
       CustomComponent = _ref.CustomComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$24);
 
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -5647,7 +6460,8 @@ var useSelectField = function useSelectField(_ref) {
       value = _ref.value,
       defaultValue = _ref.defaultValue,
       UserCustomOption = _ref.CustomOption,
-      SelectedOptionPrefix = _ref.SelectedOptionPrefix;
+      SelectedOptionPrefix = _ref.SelectedOptionPrefix,
+      testId = _ref.testId;
   var controllers = useSelectFieldControllers({
     error: error,
     id: id,
@@ -5669,6 +6483,13 @@ var useSelectField = function useSelectField(_ref) {
       return !isScrollingTheSelectMenu(e.target);
     },
     components: {
+      SelectContainer: function SelectContainer(props) {
+        return React__default.createElement(Select.components.SelectContainer, Object.assign({}, props, {
+          innerProps: Object.assign({}, props.innerProps, {
+            'data-testid': testId
+          })
+        }));
+      },
       Option: UserCustomOption ? function (props) {
         return React__default.createElement(CustomOption$1, Object.assign({
           CustomComponent: UserCustomOption
@@ -5724,13 +6545,13 @@ var SelectField = function SelectField(props) {
 
 var styles$y = {"custom-list":"_uC4zU"};
 
-var _excluded$7 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$25 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
       hasMoreOptions = _ref.hasMoreOptions,
       hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$25);
 
   var showFooter = hasMoreOptions;
 
@@ -5745,11 +6566,11 @@ var CustomList = function CustomList(_ref) {
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
-var _excluded$8 = ["loadOptions"];
+var _excluded$26 = ["loadOptions"];
 
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$26);
 
   var _useState = React.useState(false),
       hasMoreOptions = _useState[0],
@@ -5896,7 +6717,8 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       onFocus = _ref.onFocus,
       tabIndex = _ref.tabIndex,
       showCalendar = _ref.showCalendar,
-      onClickOutside = _ref.onClickOutside;
+      onClickOutside = _ref.onClickOutside,
+      testId = _ref.testId;
   var inputPosition = inputNode.getBoundingClientRect();
   var calendarRef = React.useRef(null);
   useOnClickOutside(calendarRef, onClickOutside);
@@ -5915,7 +6737,8 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       left: inputPosition.left,
       top: inputPosition.top + window.scrollY + inputPosition.height + 3
     },
-    ref: calendarRef
+    ref: calendarRef,
+    "data-testid": testId
   }, React__default.createElement("div", {
     className: classNames.overlay
   }, children)));
@@ -5943,7 +6766,8 @@ var DateField = function DateField(_ref) {
       defaultValue = _ref.defaultValue,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      onMonthChange = _ref.onMonthChange;
+      onMonthChange = _ref.onMonthChange,
+      testId = _ref.testId;
   var inputRef = React.useRef();
 
   var _useState = React.useState(false),
@@ -6010,7 +6834,7 @@ var DateField = function DateField(_ref) {
       name: name,
       id: controllers.id,
       className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date-field--invalid']] = hasError, _classnames)),
-      'data-testid': "date-field-" + name,
+      'data-testid': testId || "date-field-" + name,
       'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
       'aria-invalid': hasError,
       autoComplete: 'off',
@@ -6313,7 +7137,8 @@ var DateRangeField = function DateRangeField(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
       _ref$weekStart = _ref.weekStart,
-      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart;
+      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
+      testId = _ref.testId;
   var toInputRef = React.useRef(null);
   var controllers = useRangeFieldControllers({
     name: name,
@@ -6335,7 +7160,8 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$z['date-range-field'], (_classnames = {}, _classnames[styles$z['date-range-field--invalid']] = hasError, _classnames[styles$z['date-range-field--disabled']] = disabled, _classnames))
+    className: classnames(styles$z['date-range-field'], (_classnames = {}, _classnames[styles$z['date-range-field--invalid']] = hasError, _classnames[styles$z['date-range-field--disabled']] = disabled, _classnames)),
+    "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
     color: GREY400
@@ -6406,7 +7232,8 @@ var WeekField = function WeekField(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
       _ref$weekStart = _ref.weekStart,
-      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart;
+      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
+      testId = _ref.testId;
 
   var _useState = React.useState(null),
       hoverDate = _useState[0],
@@ -6510,7 +7337,7 @@ var WeekField = function WeekField(_ref) {
       name: name,
       id: controllers.id,
       className: classnames(inputStyles['date-field'], (_classnames = {}, _classnames[inputStyles['date-field--invalid']] = hasError, _classnames)),
-      'data-testid': "week-field-" + name,
+      'data-testid': testId || "week-field-" + name,
       'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
       'aria-invalid': hasError,
       autoComplete: 'off',
@@ -6527,14 +7354,14 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var _excluded$9 = ["placeholder", "autoComplete"];
+var _excluded$27 = ["placeholder", "autoComplete"];
 
 var TimeFieldElement = function TimeFieldElement(_ref, ref) {
   var _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? '9am' : _ref$placeholder,
       _ref$autoComplete = _ref.autoComplete,
       autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$27);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     placeholder: placeholder,
@@ -6555,12 +7382,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var _excluded$a = ["currencySymbol"];
+var _excluded$28 = ["currencySymbol"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
       currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$28);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -6593,7 +7420,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
-var _excluded$b = ["max", "min", "precision", "stepSize"];
+var _excluded$29 = ["max", "min", "precision", "stepSize"];
 
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
@@ -6604,7 +7431,7 @@ var PercentageElement = function PercentageElement(_ref, ref) {
       precision = _ref$precision === void 0 ? 0 : _ref$precision,
       _ref$stepSize = _ref.stepSize,
       stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$29);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -6784,12 +7611,14 @@ var InlineBanner = function InlineBanner(_ref) {
       onClose = _ref.onClose,
       caption = _ref.caption,
       primaryButton = _ref.primaryButton,
-      secondaryButton = _ref.secondaryButton;
+      secondaryButton = _ref.secondaryButton,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'inline_banner' : _ref$testId;
   var multiLine = !!title;
   var dismissable = !!onClose;
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
-    "data-testid": "inline_banner",
+    "data-testid": testId,
     className: classnames(styles$A['banner'], (_classnames = {}, _classnames[styles$A['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$A['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$A['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$A['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$A['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$A['banner--single-line']] = !multiLine, _classnames))
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
@@ -6825,7 +7654,7 @@ var InlineBanner = function InlineBanner(_ref) {
 
 var styles$C = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$c = ["children", "theme", "title"];
+var _excluded$2a = ["children", "theme", "title", "testId"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -6833,7 +7662,8 @@ var Badge = function Badge(_ref, forwardedRef) {
   var children = _ref.children,
       theme = _ref.theme,
       title = _ref.title,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      testId = _ref.testId,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2a);
 
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -6847,7 +7677,8 @@ var Badge = function Badge(_ref, forwardedRef) {
     ref: ref
   }, React__default.createElement("div", Object.assign({
     className: classnames(styles$C['badge'], (_classnames = {}, _classnames[styles$C['badge--success']] = theme === 'success', _classnames[styles$C['badge--danger']] = theme === 'danger', _classnames[styles$C['badge--info']] = theme === 'info', _classnames[styles$C['badge--warning']] = theme === 'warning', _classnames)),
-    ref: ref
+    ref: ref,
+    "data-testid": testId
   }, otherProps), children));
 };
 
@@ -6935,7 +7766,8 @@ var Avatar = function Avatar(_ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       url = _ref.url,
       badge = _ref.badge,
-      alt = _ref.alt;
+      alt = _ref.alt,
+      testId = _ref.testId;
 
   var _useState = React.useState(false),
       showIconInsteadOfImage = _useState[0],
@@ -6951,7 +7783,8 @@ var Avatar = function Avatar(_ref) {
     className: classnames(styles$D['avatar'], (_classnames = {}, _classnames[styles$D['avatar--small']] = size === 'small', _classnames[styles$D['avatar--medium']] = size === 'medium', _classnames[styles$D['avatar--large']] = size === 'large', _classnames[styles$D['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
-    }
+    },
+    "data-testid": testId
   }, children || React__default.createElement(AvatarImage, {
     url: url,
     color: defaultProfilePictureColors.avatarColor,
@@ -6964,12 +7797,60 @@ var Avatar = function Avatar(_ref) {
   }, badge));
 };
 
+var CHIP_THEME = {
+  MARKETING: 'marketing',
+  SUCCESS: 'success',
+  UPSELL: 'upsell',
+  WARNING: 'warning',
+  INFO: 'info',
+  DANGER: 'danger'
+};
+
+var styles$F = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+
+var Chip = function Chip(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? CHIP_THEME.MARKETING : _ref$theme,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    "data-testid": testId,
+    className: classnames(styles$F['chip'], (_classnames = {}, _classnames[styles$F['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$F['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$F['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$F['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$F['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$F['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+  }, children);
+};
+
+var styles$G = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+
+var PILL_THEME = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  DANGER: 'danger',
+  WARNING: 'warning',
+  DEFAULT: 'default'
+};
+
+var Pill = function Pill(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? PILL_THEME.DEFAULT : _ref$theme,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    "data-testid": testId,
+    className: classnames(styles$G['pill'], (_classnames = {}, _classnames[styles$G['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$G['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$G['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$G['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$G['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+  }, children);
+};
+
 exports.AsyncSelectField = AsyncSelectField;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
 exports.Calendar = Calendar;
 exports.CheckboxField = CheckboxField;
+exports.Chip = Chip;
 exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
@@ -7114,6 +7995,7 @@ exports.MultiSelectField = MultiSelectField;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
 exports.PercentageField = PercentageField;
+exports.Pill = Pill;
 exports.PillSelectField = PillSelectField;
 exports.RadioGroupField = RadioGroupField;
 exports.RadioGroupOption = RadioGroupOption;