@7shifts/sous-chef 2.15.8 → 2.16.0

package/dist/index.modern.js

@@ -132,7 +132,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;
@@ -142,7 +143,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,
@@ -173,7 +174,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", {
@@ -182,7 +185,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", {
@@ -440,7 +443,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 = useState(false),
       isVisible = _useState[0],
@@ -462,7 +466,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, {
@@ -500,7 +505,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 = useRef(null);
   var containerRef = forwardedRef || internalRef;
@@ -587,7 +593,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;
   };
 
@@ -636,7 +643,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 = Children.toArray(children);
   var isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
@@ -650,7 +658,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"
@@ -800,13 +809,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",
@@ -817,13 +832,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",
@@ -834,13 +855,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",
@@ -851,13 +878,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",
@@ -868,13 +901,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",
@@ -885,13 +924,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"
@@ -900,13 +945,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",
@@ -917,13 +968,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",
@@ -934,13 +991,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", {
@@ -956,13 +1019,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", {
@@ -978,13 +1047,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"
@@ -993,13 +1068,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",
@@ -1010,13 +1091,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"
@@ -1025,13 +1112,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",
@@ -1042,13 +1135,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"
@@ -1057,13 +1156,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"
@@ -1072,13 +1177,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", {
@@ -1094,13 +1205,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",
@@ -1111,13 +1228,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"
@@ -1126,13 +1249,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",
@@ -1143,13 +1272,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",
@@ -1160,13 +1295,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",
@@ -1177,13 +1318,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",
@@ -1194,13 +1341,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", {
@@ -1217,13 +1370,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"
@@ -1232,13 +1391,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"
@@ -1247,13 +1412,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"
@@ -1272,13 +1443,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",
@@ -1289,13 +1466,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"
@@ -1307,13 +1490,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"
@@ -1322,13 +1511,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"
@@ -1337,13 +1532,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",
@@ -1354,13 +1555,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",
@@ -1371,13 +1578,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",
@@ -1388,13 +1601,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",
@@ -1405,13 +1624,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",
@@ -1422,13 +1647,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",
@@ -1439,13 +1670,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",
@@ -1456,13 +1693,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"
@@ -1471,13 +1714,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"
@@ -1486,13 +1735,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",
@@ -1506,13 +1761,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",
@@ -1523,13 +1784,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", {
@@ -1545,13 +1812,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", {
@@ -1569,13 +1842,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", {
@@ -1591,13 +1870,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",
@@ -1608,13 +1893,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"
@@ -1623,13 +1914,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",
@@ -1640,13 +1937,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"
@@ -1655,13 +1958,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",
@@ -1672,13 +1981,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"
@@ -1687,13 +2002,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"
@@ -1702,13 +2023,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",
@@ -1719,13 +2046,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", {
@@ -1749,13 +2082,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", {
@@ -1772,13 +2111,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", {
@@ -1794,13 +2139,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", {
@@ -1816,13 +2167,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", {
@@ -1838,13 +2195,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",
@@ -1855,13 +2218,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,
@@ -1896,13 +2265,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"
@@ -1911,12 +2286,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",
@@ -1930,13 +2311,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"
@@ -1945,13 +2332,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"
@@ -1960,13 +2353,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,
@@ -2002,13 +2401,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", {
@@ -2025,13 +2430,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", {
@@ -2047,13 +2458,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",
@@ -2064,13 +2481,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"
@@ -2079,13 +2502,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", {
@@ -2103,13 +2532,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", {
@@ -2125,13 +2560,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", {
@@ -2147,13 +2588,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"
@@ -2162,13 +2609,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"
@@ -2177,13 +2630,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",
@@ -2194,13 +2653,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",
@@ -2211,13 +2676,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",
@@ -2228,13 +2699,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"
@@ -2243,13 +2720,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"
@@ -2258,13 +2741,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"
@@ -2273,13 +2762,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"
@@ -2288,13 +2783,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", {
@@ -2311,13 +2812,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"
@@ -2338,13 +2845,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",
@@ -2355,13 +2868,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", {
@@ -2377,13 +2896,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",
@@ -2394,13 +2919,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"
@@ -2409,12 +2940,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",
@@ -2424,13 +2961,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",
@@ -2441,13 +2984,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",
@@ -2458,13 +3007,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",
@@ -2475,13 +3030,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"
@@ -2490,13 +3051,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"
@@ -2505,13 +3072,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"
@@ -2520,13 +3093,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",
@@ -2537,13 +3116,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"
@@ -2552,13 +3137,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",
@@ -2569,13 +3160,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", {
@@ -2591,13 +3188,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"
@@ -2606,13 +3209,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"
@@ -2621,13 +3230,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"
@@ -2636,13 +3251,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"
@@ -2654,13 +3275,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",
@@ -2671,13 +3298,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", {
@@ -2693,12 +3326,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",
@@ -2708,12 +3347,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",
@@ -2723,11 +3368,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",
@@ -2737,13 +3388,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",
@@ -2754,13 +3411,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",
@@ -2771,13 +3434,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",
@@ -2788,13 +3457,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"
@@ -2803,13 +3478,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"
@@ -2818,13 +3499,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", {
@@ -2840,13 +3527,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"
@@ -2866,13 +3559,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"
@@ -2881,13 +3580,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",
@@ -2898,13 +3603,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"
@@ -2913,13 +3624,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", {
@@ -2935,13 +3652,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"
@@ -2950,13 +3673,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",
@@ -2967,13 +3696,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"
@@ -2982,13 +3717,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"
@@ -2997,13 +3738,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"
@@ -3012,13 +3759,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"
@@ -3027,13 +3780,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"
@@ -3042,13 +3801,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"
@@ -3111,10 +3876,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';
@@ -3261,9 +4026,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,
@@ -3385,18 +4152,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", {
@@ -3431,7 +4200,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;
@@ -3444,7 +4213,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,
@@ -3598,7 +4367,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 = {};
 
@@ -3624,7 +4394,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) {
@@ -3832,7 +4603,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,
@@ -3845,6 +4617,7 @@ var Modal = function Modal(_ref) {
   };
   return React__default.createElement(ReactModal, {
     isOpen: true,
+    testId: testId,
     shouldCloseOnEsc: true,
     shouldCloseOnOverlayClick: false,
     shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
@@ -3904,7 +4677,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,
@@ -3912,7 +4686,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);
 };
 
@@ -3920,7 +4695,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;
@@ -3934,7 +4710,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))
@@ -3961,11 +4739,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,
@@ -4091,7 +4871,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 = useState(null),
       calendarRef = _useState[0],
@@ -4145,7 +4926,8 @@ var Calendar = function Calendar(_ref) {
     },
     style: _extends({}, calendarPosition, {
       zIndex: Z_INDEX_LAYERS.MODAL
-    })
+    }),
+    "data-testid": testId
   }, React__default.createElement(DayPicker, {
     format: "MM/dd/yyyy",
     classNames: style,
@@ -4360,7 +5142,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,
@@ -4388,7 +5171,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
@@ -4565,7 +5349,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,
@@ -4587,7 +5372,8 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
     components: {
       Option: components.Option,
       Control: components.Control
-    }
+    },
+    testId: testId
   }));
 };
 
@@ -4602,7 +5388,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();
@@ -4616,7 +5404,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));
 };
 
@@ -4629,7 +5417,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 = [];
 
@@ -4645,7 +5434,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,
@@ -4699,7 +5489,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 = useRef(null);
   var toolbarRef = useRef(null);
 
@@ -4741,7 +5532,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,
@@ -4795,7 +5586,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,
@@ -4813,7 +5605,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,
@@ -4842,12 +5634,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
@@ -4920,7 +5712,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,
@@ -4941,7 +5734,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,
@@ -5024,7 +5817,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,
@@ -5057,7 +5851,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,
@@ -5134,7 +5928,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,
@@ -5158,13 +5953,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);
 
@@ -5177,7 +5976,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,
@@ -5186,7 +5986,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-"};
@@ -5195,7 +5997,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,
@@ -5210,6 +6013,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,
@@ -5293,7 +6097,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 = useState('password'),
       type = _useState[0],
@@ -5327,7 +6132,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,
@@ -5439,7 +6244,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',
@@ -5480,12 +6285,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(components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -5529,7 +6334,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,
@@ -5566,6 +6372,13 @@ var MultiSelectField = function MultiSelectField(_ref) {
     isMulti: true,
     closeMenuOnSelect: closeOnSelect,
     components: {
+      SelectContainer: function SelectContainer(props) {
+        return React__default.createElement(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
@@ -5587,14 +6400,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(components.Control, Object.assign({}, props), CustomPrefixComponent && selectedOption ? React__default.createElement("div", {
@@ -5611,12 +6424,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(components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -5642,7 +6455,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,
@@ -5664,6 +6478,13 @@ var useSelectField = function useSelectField(_ref) {
       return !isScrollingTheSelectMenu(e.target);
     },
     components: {
+      SelectContainer: function SelectContainer(props) {
+        return React__default.createElement(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
@@ -5719,13 +6540,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;
 
@@ -5740,11 +6561,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 = useState(false),
       hasMoreOptions = _useState[0],
@@ -5891,7 +6712,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 = useRef(null);
   useOnClickOutside(calendarRef, onClickOutside);
@@ -5910,7 +6732,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)));
@@ -5938,7 +6761,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 = useRef();
 
   var _useState = useState(false),
@@ -6005,7 +6829,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',
@@ -6308,7 +7132,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 = useRef(null);
   var controllers = useRangeFieldControllers({
     name: name,
@@ -6330,7 +7155,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
@@ -6401,7 +7227,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 = useState(null),
       hoverDate = _useState[0],
@@ -6505,7 +7332,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',
@@ -6522,14 +7349,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,
@@ -6550,12 +7377,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = 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
@@ -6588,7 +7415,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = 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,
@@ -6599,7 +7426,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
@@ -6779,12 +7606,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',
@@ -6820,7 +7649,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;
@@ -6828,7 +7657,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 = useRef(null);
   var ref = forwardedRef || internalRef;
@@ -6842,7 +7672,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));
 };
 
@@ -6930,7 +7761,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 = useState(false),
       showIconInsteadOfImage = _useState[0],
@@ -6946,7 +7778,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,
@@ -6959,5 +7792,52 @@ var Avatar = function Avatar(_ref) {
   }, badge));
 };
 
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Button$1 as Button, Calendar, CheckboxField, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateRangeField, Form, FormRow, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowUp, IconAward, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMinus, IconMinusCircle, IconMoneyBill, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, PillSelectField, RadioGroupField, RadioGroupOption, ResourceTable, ResourceTableRow, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SelectField, Spinner, Stack, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, WeekField };
+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);
+};
+
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Button$1 as Button, Calendar, CheckboxField, Chip, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateRangeField, Form, FormRow, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowUp, IconAward, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMinus, IconMinusCircle, IconMoneyBill, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, Pill, PillSelectField, RadioGroupField, RadioGroupOption, ResourceTable, ResourceTableRow, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SelectField, Spinner, Stack, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, WeekField };
 //# sourceMappingURL=index.modern.js.map