npm - @7shifts/sous-chef - Versions diffs - 2.18.0 → 2.19.0 - Mend

@7shifts/sous-chef 2.18.0 → 2.19.0

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

Files changed (453) hide show

package/dist/index.js CHANGED Viewed

@@ -743,8 +743,7 @@ var getIconStyles = function getIconStyles(_ref) {
 };
 var _excluded$2 = ["testId"];
-var IconInfoCircle = function IconInfoCircle(_ref) {
+var IconInfoCircle = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-info-circle' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
@@ -754,20 +753,19 @@ var IconInfoCircle = function IconInfoCircle(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.313 10C.313 4.652 4.65.312 10 .312s9.688 4.34 9.688 9.688A9.687 9.687 0 0 1 10 19.688 9.687 9.687 0 0 1 .312 10Zm18.125 0c0-4.685-3.804-8.438-8.438-8.438A8.437 8.437 0 0 0 1.562 10 8.435 8.435 0 0 0 10 18.438 8.435 8.435 0 0 0 18.438 10Zm-9.844 3.75h.469V9.062h-.47a.469.469 0 0 1-.468-.468V8.28c0-.259.21-.469.469-.469h1.875c.259 0 .469.21.469.47v5.468h.468c.26 0 .469.21.469.469v.312c0 .26-.21.469-.469.469H8.594a.469.469 0 0 1-.469-.469v-.312c0-.26.21-.469.469-.469Zm.156-8.125a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z",
     fill: "currentColor"
   }));
-};
+});
 IconInfoCircle.displayName = 'IconInfoCircle';
 var _excluded$3 = ["testId"];
-var IconAnalytics = function IconAnalytics(_ref) {
+var IconAnalytics = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-analytics' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
@@ -777,20 +775,19 @@ var IconAnalytics = function IconAnalytics(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M18.333 4.444c-.322 0-.62-.095-.876-.254l-3.11 2.489c.059.171.097.352.097.543a1.667 1.667 0 1 1-3.333 0c0-.191.039-.372.098-.543L8.1 4.189a1.652 1.652 0 0 1-.877.255 1.65 1.65 0 0 1-.714-.166l-3.341 3.34c.103.218.166.458.166.715a1.667 1.667 0 1 1-1.666-1.666c.257 0 .497.062.714.166l3.341-3.34a1.65 1.65 0 0 1-.166-.715 1.667 1.667 0 1 1 3.333 0c0 .191-.039.372-.098.543L11.9 5.81c.256-.159.554-.255.877-.255.322 0 .62.096.876.255l3.11-2.49a1.65 1.65 0 0 1-.097-.542 1.667 1.667 0 1 1 1.666 1.666Zm-1.666 3.89c0-.308.248-.556.555-.556h2.222c.307 0 .556.248.556.555v10a.555.555 0 0 1-.556.556h-2.222a.555.555 0 0 1-.555-.556v-10ZM3.333 13.888a.555.555 0 0 0-.555-.556H.556A.555.555 0 0 0 0 13.89v4.444c0 .307.249.556.556.556h2.222a.555.555 0 0 0 .555-.556V13.89Zm-1.11.555v3.334H1.11v-3.334h1.111Zm15.555 3.334v-8.89h1.11v8.89h-1.11Zm.555-15.556a.556.556 0 1 1-.001 1.113.556.556 0 0 1 .001-1.113ZM1.111 8.333a.556.556 0 1 0 1.113-.001.556.556 0 0 0-1.113.001Zm6.111-5a.556.556 0 1 1 .002-1.112.556.556 0 0 1-.002 1.112Zm5 3.89a.556.556 0 1 0 1.113-.002.556.556 0 0 0-1.113.001Zm-3.889.555H6.111a.555.555 0 0 0-.555.555v10c0 .307.248.556.555.556h2.222a.555.555 0 0 0 .556-.556v-10a.555.555 0 0 0-.556-.555Zm-1.666 10h1.11v-8.89h-1.11v8.89Zm7.222-5.556h-2.222a.555.555 0 0 0-.556.556v5.555c0 .307.249.556.556.556h2.222a.555.555 0 0 0 .555-.556v-5.555a.555.555 0 0 0-.555-.556Zm-1.667 1.111v4.445h1.111v-4.445h-1.11Z",
     fill: "currentColor"
   }));
-};
+});
 IconAnalytics.displayName = 'IconAnalytics';
 var _excluded$4 = ["testId"];
-var IconArrowDown = function IconArrowDown(_ref) {
+var IconArrowDown = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-arrow-down' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
@@ -800,20 +797,19 @@ var IconArrowDown = function IconArrowDown(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m18.574 9.707-.277-.277a.47.47 0 0 0-.664 0l-6.969 6.972V1.72a.47.47 0 0 0-.469-.469h-.39a.47.47 0 0 0-.47.469v14.683L2.364 9.43a.47.47 0 0 0-.664 0l-.277.277a.47.47 0 0 0 0 .664l8.242 8.246a.47.47 0 0 0 .664 0l8.242-8.246a.466.466 0 0 0 .004-.664Z",
     fill: "currentColor"
   }));
-};
+});
 IconArrowDown.displayName = 'IconArrowDown';
 var _excluded$5 = ["testId"];
-var IconArrowLeft = function IconArrowLeft(_ref) {
+var IconArrowLeft = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-arrow-left' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
@@ -823,20 +819,19 @@ var IconArrowLeft = function IconArrowLeft(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m10.293 18.574.277-.277a.47.47 0 0 0 0-.664l-6.972-6.969H18.28a.47.47 0 0 0 .469-.469v-.39a.47.47 0 0 0-.469-.47H3.598l6.972-6.972a.47.47 0 0 0 0-.664l-.277-.277a.47.47 0 0 0-.664 0L1.383 9.664a.47.47 0 0 0 0 .664l8.246 8.242c.187.188.48.188.664.004Z",
     fill: "currentColor"
   }));
-};
+});
 IconArrowLeft.displayName = 'IconArrowLeft';
 var _excluded$6 = ["testId"];
-var IconArrowRight = function IconArrowRight(_ref) {
+var IconArrowRight = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-arrow-right' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
@@ -846,20 +841,19 @@ var IconArrowRight = function IconArrowRight(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m9.707 1.426-.277.277a.47.47 0 0 0 0 .664l6.972 6.969H1.72a.47.47 0 0 0-.469.469v.39c0 .258.21.47.469.47h14.683L9.43 17.636a.47.47 0 0 0 0 .664l.277.277a.47.47 0 0 0 .664 0l8.246-8.242a.47.47 0 0 0 0-.664L10.371 1.43a.466.466 0 0 0-.664-.004Z",
     fill: "currentColor"
   }));
-};
+});
 IconArrowRight.displayName = 'IconArrowRight';
 var _excluded$7 = ["testId"];
-var IconArrowToTop = function IconArrowToTop(_ref) {
+var IconArrowToTop = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-arrow-to-top' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
@@ -869,18 +863,17 @@ var IconArrowToTop = function IconArrowToTop(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconArrowToTop.displayName = 'IconArrowToTop';
 var _excluded$8 = ["testId"];
-var IconArrowUp = function IconArrowUp(_ref) {
+var IconArrowUp = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-arrow-up' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
@@ -890,20 +883,19 @@ var IconArrowUp = function IconArrowUp(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m1.426 10.293.277.277a.47.47 0 0 0 .664 0l6.969-6.972V18.28c0 .258.21.469.469.469h.39a.47.47 0 0 0 .47-.469V3.598l6.972 6.972a.47.47 0 0 0 .664 0l.277-.277a.47.47 0 0 0 0-.664l-8.242-8.246a.47.47 0 0 0-.664 0L1.43 9.629a.466.466 0 0 0-.004.664Z",
     fill: "currentColor"
   }));
-};
+});
 IconArrowUp.displayName = 'IconArrowUp';
 var _excluded$9 = ["testId"];
-var IconAward = function IconAward(_ref) {
+var IconAward = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-award' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
@@ -913,20 +905,19 @@ var IconAward = function IconAward(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M16.834 10.635a2.246 2.246 0 0 0 .563-2.134l-.05-.188c-.09-.34-.136-.51-.136-.68 0-.171.045-.342.136-.683l.05-.188c.2-.76-.016-1.577-.563-2.135l-.105-.106c-.27-.27-.4-.4-.486-.555-.08-.143-.122-.307-.204-.622l-.058-.218a2.205 2.205 0 0 0-1.545-1.57l-.182-.049c-.327-.087-.494-.132-.64-.216-.153-.089-.28-.221-.544-.493L12.967.69a2.183 2.183 0 0 0-2.122-.576l-.157.044c-.349.097-.52.145-.691.144-.166 0-.331-.046-.657-.137L9.154.115a2.179 2.179 0 0 0-2.12.578L6.907.82c-.25.257-.374.384-.52.469-.143.083-.307.127-.631.214l-.191.052a2.206 2.206 0 0 0-1.547 1.569l-.055.21c-.084.324-.127.489-.208.633-.085.151-.212.278-.47.54l-.12.12a2.245 2.245 0 0 0-.562 2.135l.05.187c.09.34.136.51.136.68 0 .17-.045.341-.136.683l-.05.189c-.2.76.016 1.577.563 2.134l.105.106c.27.27.4.401.485.556.08.143.123.306.205.622l.057.218c.078.297.23.559.414.793l-1.857 4.567a.623.623 0 0 0 .576.858h.002l.45-.017h.006l1.616-.062 1.41 1.49a.62.62 0 0 0 1.029-.193l2.041-5.021a.909.909 0 0 1 .588 0l2.04 5.02a.62.62 0 0 0 1.03.194l1.41-1.49 1.619.062.453.017h.003a.623.623 0 0 0 .575-.858l-1.856-4.567c.184-.234.335-.495.414-.792l.055-.21c.084-.324.127-.49.208-.634.085-.151.211-.278.47-.54l.12-.12ZM6.264 7.508A3.74 3.74 0 0 1 10 3.772a3.74 3.74 0 0 1 3.736 3.736A3.74 3.74 0 0 1 10 11.243a3.74 3.74 0 0 1-3.735-3.735Zm1.246 0A2.493 2.493 0 0 0 10 9.998a2.493 2.493 0 0 0 2.49-2.49A2.493 2.493 0 0 0 10 5.018a2.493 2.493 0 0 0-2.49 2.49ZM5.743 17.01l1.133 1.197 1.317-3.239a2.159 2.159 0 0 1-1.4-.642l-.013-.013c-.174-.178-.268-.273-.379-.34-.13-.08-.283-.12-.615-.207l-.221-.059c-.017-.005-.033-.012-.048-.02-.014-.006-.027-.013-.041-.018l-1.383 3.404 1.136-.044.514-.02Zm10.165.063-1.104-.042-.546-.021-1.134 1.197-1.319-3.245a2.152 2.152 0 0 0 1.402-.636l.015-.015c.18-.184.276-.281.389-.349.126-.075.274-.113.587-.194l.238-.061a.27.27 0 0 0 .047-.02c.014-.006.027-.013.042-.018l1.383 3.404Zm-1.8-4.567a.96.96 0 0 0 .67-.686c.157-.6.231-.894.375-1.148.144-.254.357-.469.793-.91a.995.995 0 0 0 .247-.946l-.002-.005c-.316-1.178-.316-1.18.002-2.366a.994.994 0 0 0-.247-.946c-.854-.861-.855-.866-1.146-1.972l-.022-.086a.96.96 0 0 0-.67-.685c-.585-.159-.875-.234-1.126-.38-.253-.147-.466-.365-.903-.813a.934.934 0 0 0-.907-.248c-.591.164-.882.245-1.172.245-.29 0-.58-.082-1.173-.245a.929.929 0 0 0-.906.25c-.438.444-.645.66-.894.806-.248.146-.536.222-1.135.385a.957.957 0 0 0-.67.685c-.157.6-.231.894-.375 1.148-.144.254-.357.469-.793.91a.995.995 0 0 0-.247.946c.318 1.182.317 1.186.003 2.361l-.003.01c-.089.339.006.7.247.946.854.861.855.866 1.146 1.972l.022.086a.96.96 0 0 0 .67.685l.186.05c.77.205.975.259 1.603.898a.92.92 0 0 0 1.158.137 2.184 2.184 0 0 1 2.322 0 .917.917 0 0 0 1.158-.136c.634-.647.84-.7 1.6-.899l.189-.05Z",
     fill: "currentColor"
   }));
-};
+});
 IconAward.displayName = 'IconAward';
 var _excluded$a = ["testId"];
-var IconBalanceScaleLeft = function IconBalanceScaleLeft(_ref) {
+var IconBalanceScaleLeft = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-balance-scale-left' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
@@ -936,7 +927,8 @@ var IconBalanceScaleLeft = function IconBalanceScaleLeft(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-balance-scale-left_svg__a)"
   }, React__default.createElement("path", {
@@ -948,13 +940,11 @@ var IconBalanceScaleLeft = function IconBalanceScaleLeft(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconBalanceScaleLeft.displayName = 'IconBalanceScaleLeft';
 var _excluded$b = ["testId"];
-var IconBalanceScale = function IconBalanceScale(_ref) {
+var IconBalanceScale = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-balance-scale' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
@@ -964,7 +954,8 @@ var IconBalanceScale = function IconBalanceScale(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-balance-scale_svg__a)"
   }, React__default.createElement("path", {
@@ -976,13 +967,11 @@ var IconBalanceScale = function IconBalanceScale(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconBalanceScale.displayName = 'IconBalanceScale';
 var _excluded$c = ["testId"];
-var IconBan = function IconBan(_ref) {
+var IconBan = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-ban' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -992,18 +981,17 @@ var IconBan = function IconBan(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconBan.displayName = 'IconBan';
 var _excluded$d = ["testId"];
-var IconBarsH = function IconBarsH(_ref) {
+var IconBarsH = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-bars-h' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
@@ -1013,20 +1001,19 @@ var IconBarsH = function IconBarsH(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.313 5h16.875c.172 0 .312-.14.312-.313v-.625a.312.312 0 0 0-.313-.312H.313A.312.312 0 0 0 0 4.063v.625C0 4.86.14 5 .313 5Zm19.375 4.375H2.813a.312.312 0 0 0-.313.313v.624c0 .173.14.313.313.313h16.875c.172 0 .312-.14.312-.313v-.624a.312.312 0 0 0-.313-.313ZM.313 15h16.875c.172 0 .312.14.312.313v.624c0 .173-.14.313-.313.313H.313A.312.312 0 0 1 0 15.937v-.624C0 15.14.14 15 .313 15Z",
     fill: "currentColor"
   }));
-};
+});
 IconBarsH.displayName = 'IconBarsH';
 var _excluded$e = ["testId"];
-var IconBarsV = function IconBarsV(_ref) {
+var IconBarsV = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-bars-v' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
@@ -1036,18 +1023,17 @@ var IconBarsV = function IconBarsV(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconBarsV.displayName = 'IconBarsV';
 var _excluded$f = ["testId"];
-var IconBell = function IconBell(_ref) {
+var IconBell = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-bell' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
@@ -1057,20 +1043,19 @@ var IconBell = function IconBell(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M17.93 13.079c-1.093-1.04-1.928-2.129-1.928-5.817 0-3.11-2.476-5.645-5.627-5.951V.625a.625.625 0 1 0-1.25 0v.686C5.975 1.618 3.5 4.153 3.5 7.26c0 3.689-.836 4.778-1.928 5.817a1.818 1.818 0 0 0-.44 2.002c.285.71.97 1.17 1.744 1.17h13.75c.775 0 1.46-.46 1.744-1.17a1.817 1.817 0 0 0-.44-2.002Zm-8.18 5.67c-.69 0-1.25-.56-1.25-1.25H7.25a2.504 2.504 0 0 0 2.5 2.5c1.378 0 2.5-1.121 2.5-2.5H11c0 .69-.56 1.25-1.25 1.25ZM2.875 15h13.75c.554 0 .835-.642.442-1.016-1.37-1.304-2.315-2.763-2.315-6.722 0-2.632-2.238-4.762-5.002-4.762S4.75 4.63 4.75 7.262c0 3.974-.954 5.426-2.316 6.722-.391.373-.114 1.016.442 1.016Z",
     fill: "currentColor"
   }));
-};
+});
 IconBell.displayName = 'IconBell';
 var _excluded$g = ["testId"];
-var IconBirthdayCake = function IconBirthdayCake(_ref) {
+var IconBirthdayCake = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-birthday-cake' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
@@ -1080,18 +1065,17 @@ var IconBirthdayCake = function IconBirthdayCake(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconBirthdayCake.displayName = 'IconBirthdayCake';
 var _excluded$h = ["testId"];
-var IconBold = function IconBold(_ref) {
+var IconBold = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-bold' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
@@ -1101,18 +1085,17 @@ var IconBold = function IconBold(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconBold.displayName = 'IconBold';
 var _excluded$i = ["testId"];
-var IconBolt = function IconBolt(_ref) {
+var IconBolt = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-bolt' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
@@ -1122,7 +1105,8 @@ var IconBolt = function IconBolt(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-bolt_svg__a)"
   }, React__default.createElement("path", {
@@ -1134,13 +1118,11 @@ var IconBolt = function IconBolt(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconBolt.displayName = 'IconBolt';
 var _excluded$j = ["testId"];
-var IconBook = function IconBook(_ref) {
+var IconBook = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-book' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
@@ -1150,20 +1132,19 @@ var IconBook = function IconBook(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M18.152 18.75h.13a.47.47 0 0 1 .468.469v.312a.47.47 0 0 1-.469.469H4.375a3.124 3.124 0 0 1-3.125-3.125V3.125A3.124 3.124 0 0 1 4.375 0h13.438c.519 0 .937.418.937.938v14.374c0 .391-.242.727-.582.868-.14.629-.172 1.78-.016 2.57ZM8.594 6.25h6.562a.47.47 0 0 0 .469-.469V5.47A.47.47 0 0 0 15.156 5H8.594a.47.47 0 0 0-.469.469v.312c0 .258.21.469.469.469Zm7.031 1.719v.312a.47.47 0 0 1-.469.469H8.594a.47.47 0 0 1-.469-.469V7.97a.47.47 0 0 1 .469-.469h6.562a.47.47 0 0 1 .469.469ZM17.5 15H6.25V1.25H17.5V15Zm-15 .625A3.126 3.126 0 0 1 4.375 15H5V1.25h-.625C3.34 1.25 2.5 2.09 2.5 3.125v12.5Zm14.543.625a8.929 8.929 0 0 0 0 2.5H4.375c-2.5 0-2.5-2.5 0-2.5h12.668Z",
     fill: "currentColor"
   }));
-};
+});
 IconBook.displayName = 'IconBook';
 var _excluded$k = ["testId"];
-var IconBriefcase = function IconBriefcase(_ref) {
+var IconBriefcase = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-briefcase' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
@@ -1173,18 +1154,17 @@ var IconBriefcase = function IconBriefcase(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconBriefcase.displayName = 'IconBriefcase';
 var _excluded$l = ["testId"];
-var IconBullseyeArrow = function IconBullseyeArrow(_ref) {
+var IconBullseyeArrow = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-bullseye-arrow' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
@@ -1194,20 +1174,19 @@ var IconBullseyeArrow = function IconBullseyeArrow(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m18.213 8.097 1.022-1.023A9.687 9.687 0 0 1 10 19.687 9.687 9.687 0 0 1 .312 10 9.687 9.687 0 0 1 12.927.764l-1.023 1.023A8.396 8.396 0 0 0 10 1.563c-4.652 0-8.438 3.785-8.438 8.437 0 4.652 3.786 8.438 8.438 8.438 4.652 0 8.438-3.786 8.438-8.438 0-.655-.083-1.29-.225-1.903Zm-5.985-4.24.936 2.095-3.606 3.606a.625.625 0 1 0 .883.884l3.607-3.607 2.094.936a.803.803 0 0 0 .822-.194l2.488-2.487a.803.803 0 0 0-.315-1.33l-2.174-.724L16.24.862a.799.799 0 0 0-1.33-.314l-2.486 2.487a.804.804 0 0 0-.194.822Zm3.054-1.914.496 1.488.198.593.593.198 1.488.496-1.755 1.755-1.918-.857-.856-1.917 1.754-1.756Zm-4.239 2.309a2.072 2.072 0 0 1-.105-.564l-.06-.01A5.961 5.961 0 0 0 10 3.595 6.403 6.403 0 0 0 3.594 10 6.403 6.403 0 0 0 10 16.406 6.403 6.403 0 0 0 16.406 10c0-.314-.045-.615-.09-.916l-.005-.036a2.048 2.048 0 0 1-.584-.098c-.004 0-.007-.002-.01-.003a5.308 5.308 0 0 1-.32-.14l-.457-.204c.126.447.216.91.216 1.397A5.162 5.162 0 0 1 10 15.156 5.162 5.162 0 0 1 4.844 10 5.162 5.162 0 0 1 10 4.844c.488 0 .95.09 1.397.217l-.201-.45c-.122-.273-.134-.3-.143-.328a.327.327 0 0 1-.01-.031ZM6.875 10A3.129 3.129 0 0 1 10 6.875c.125 0 .245.017.366.034l.064.01-1.756 1.755a1.877 1.877 0 0 0 1.325 3.2c.518.001.986-.21 1.326-.549l1.757-1.755.009.064c.017.12.034.241.034.366A3.129 3.129 0 0 1 10 13.125 3.129 3.129 0 0 1 6.875 10Z",
     fill: "currentColor"
   }));
-};
+});
 IconBullseyeArrow.displayName = 'IconBullseyeArrow';
 var _excluded$m = ["testId"];
-var IconCalculator = function IconCalculator(_ref) {
+var IconCalculator = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calculator' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
@@ -1217,20 +1196,19 @@ var IconCalculator = function IconCalculator(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M3.125 0h13.75c1 0 1.875.875 1.875 1.875v16.25c0 1-.875 1.875-1.875 1.875H3.125c-1 0-1.875-.875-1.875-1.875V1.875C1.25.875 2.125 0 3.125 0Zm1.25 17.5h11.25c.345 0 .625-.28.625-.625v-7.5a.625.625 0 0 0-.625-.625H4.375a.625.625 0 0 0-.625.625v7.5c0 .345.28.625.625.625Zm8.125-3.75V10H15v6.25h-2.5v-2.5ZM11.25 10h-2.5v2.5h2.5V10Zm-2.5 3.75h2.5v2.5h-2.5v-2.5ZM7.5 10H5v2.5h2.5V10ZM5 13.75h2.5v2.5H5v-2.5Zm12.5 4.375c0 .31-.315.625-.625.625H3.125c-.31 0-.625-.315-.625-.625V7.5h15v10.625ZM2.5 6.25h15V1.875c0-.31-.315-.625-.625-.625H3.125c-.31 0-.625.315-.625.625V6.25Z",
     fill: "currentColor"
   }));
-};
+});
 IconCalculator.displayName = 'IconCalculator';
 var _excluded$n = ["testId"];
-var IconCalendarAlt = function IconCalendarAlt(_ref) {
+var IconCalendarAlt = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calendar-alt' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
@@ -1240,20 +1218,19 @@ var IconCalendarAlt = function IconCalendarAlt(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M17.292 2.5h-1.875V.469A.47.47 0 0 0 14.948 0h-.312a.47.47 0 0 0-.469.469V2.5h-7.5V.469A.47.47 0 0 0 6.198 0h-.312a.47.47 0 0 0-.469.469V2.5H3.542c-1.035 0-1.875.84-1.875 1.875v13.75c0 1.035.84 1.875 1.875 1.875h13.75c1.035 0 1.875-.84 1.875-1.875V4.375c0-1.035-.84-1.875-1.875-1.875ZM3.542 3.75h13.75c.344 0 .625.281.625.625V6.25h-15V4.375c0-.344.281-.625.625-.625Zm0 15h13.75a.627.627 0 0 0 .625-.625V7.5h-15v10.625c0 .344.281.625.625.625Zm3.906-6.25H5.886a.47.47 0 0 1-.469-.469V10.47A.47.47 0 0 1 5.886 10h1.562a.47.47 0 0 1 .469.469v1.562a.47.47 0 0 1-.469.469Zm2.188 0h1.562a.47.47 0 0 0 .469-.469V10.47a.47.47 0 0 0-.469-.469H9.636a.47.47 0 0 0-.469.469v1.562c0 .258.21.469.469.469Zm5.312 0h-1.562a.47.47 0 0 1-.469-.469V10.47a.47.47 0 0 1 .469-.469h1.562a.47.47 0 0 1 .469.469v1.562a.47.47 0 0 1-.469.469Zm-5.312 3.75h1.562a.47.47 0 0 0 .469-.469V14.22a.47.47 0 0 0-.469-.469H9.636a.47.47 0 0 0-.469.469v1.562c0 .258.21.469.469.469Zm-2.188 0H5.886a.47.47 0 0 1-.469-.469V14.22a.47.47 0 0 1 .469-.469h1.562a.47.47 0 0 1 .469.469v1.562a.47.47 0 0 1-.469.469Zm5.938 0h1.562a.47.47 0 0 0 .469-.469V14.22a.47.47 0 0 0-.469-.469h-1.562a.47.47 0 0 0-.469.469v1.562c0 .258.21.469.469.469Z",
     fill: "currentColor"
   }));
-};
+});
 IconCalendarAlt.displayName = 'IconCalendarAlt';
 var _excluded$o = ["testId"];
-var IconCalendarCheck = function IconCalendarCheck(_ref) {
+var IconCalendarCheck = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calendar-check' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -1263,20 +1240,19 @@ var IconCalendarCheck = function IconCalendarCheck(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M15 2.5h1.875c1.035 0 1.875.84 1.875 1.875v13.75c0 1.035-.84 1.875-1.875 1.875H3.125a1.875 1.875 0 0 1-1.875-1.875V4.375c0-1.036.84-1.875 1.875-1.875H5V.469C5 .209 5.21 0 5.469 0h.312c.26 0 .469.21.469.469V2.5h7.5V.469c0-.26.21-.469.469-.469h.312c.26 0 .469.21.469.469V2.5Zm1.875 1.25H3.125a.626.626 0 0 0-.625.625V6.25h15V4.375a.626.626 0 0 0-.625-.625Zm0 15H3.125a.626.626 0 0 1-.625-.625V7.5h15v10.625c0 .345-.28.625-.625.625Zm-7.862-2.392 5.266-5.223a.47.47 0 0 0 .002-.663l-.33-.333a.469.469 0 0 0-.664-.003l-4.6 4.564-1.97-1.976a.47.47 0 0 0-.664 0l-.332.33a.47.47 0 0 0-.001.664l2.63 2.639a.469.469 0 0 0 .663.001Z",
     fill: "currentColor"
   }));
-};
+});
 IconCalendarCheck.displayName = 'IconCalendarCheck';
 var _excluded$p = ["testId"];
-var IconCalendarDay = function IconCalendarDay(_ref) {
+var IconCalendarDay = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calendar-day' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
@@ -1286,7 +1262,8 @@ var IconCalendarDay = function IconCalendarDay(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-calendar-day_svg__a)"
   }, React__default.createElement("path", {
@@ -1299,13 +1276,11 @@ var IconCalendarDay = function IconCalendarDay(_ref) {
     transform: "translate(1)",
     d: "M0 0h17.5v20H0z"
   }))));
-};
+});
 IconCalendarDay.displayName = 'IconCalendarDay';
 var _excluded$q = ["testId"];
-var IconCalendarExclamation = function IconCalendarExclamation(_ref) {
+var IconCalendarExclamation = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calendar-exclamation' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
@@ -1315,18 +1290,17 @@ var IconCalendarExclamation = function IconCalendarExclamation(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconCalendarExclamation.displayName = 'IconCalendarExclamation';
 var _excluded$r = ["testId"];
-var IconCalendarStar = function IconCalendarStar(_ref) {
+var IconCalendarStar = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calendar-star' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
@@ -1336,18 +1310,17 @@ var IconCalendarStar = function IconCalendarStar(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconCalendarStar.displayName = 'IconCalendarStar';
 var _excluded$s = ["testId"];
-var IconCalendarTomorrow = function IconCalendarTomorrow(_ref) {
+var IconCalendarTomorrow = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calendar-tomorrow' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
@@ -1357,7 +1330,8 @@ var IconCalendarTomorrow = function IconCalendarTomorrow(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-calendar-tomorrow_svg__a)",
     fill: "currentColor"
@@ -1372,13 +1346,11 @@ var IconCalendarTomorrow = function IconCalendarTomorrow(_ref) {
     transform: "translate(1)",
     d: "M0 0h17.5v20H0z"
   }))));
-};
+});
 IconCalendarTomorrow.displayName = 'IconCalendarTomorrow';
 var _excluded$t = ["testId"];
-var IconCalendar = function IconCalendar(_ref) {
+var IconCalendar = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-calendar' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
@@ -1388,20 +1360,19 @@ var IconCalendar = function IconCalendar(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M16.875 2.5H15V.469A.469.469 0 0 0 14.531 0h-.312a.469.469 0 0 0-.469.469V2.5h-7.5V.469A.469.469 0 0 0 5.781 0H5.47A.469.469 0 0 0 5 .469V2.5H3.125c-1.036 0-1.875.84-1.875 1.875v13.75C1.25 19.16 2.09 20 3.125 20h13.75c1.035 0 1.875-.84 1.875-1.875V4.375c0-1.036-.84-1.875-1.875-1.875ZM3.125 3.75h13.75c.345 0 .625.28.625.625V6.25h-15V4.375c0-.345.28-.625.625-.625Zm0 15h13.75c.345 0 .625-.28.625-.625V7.5h-15v10.625c0 .345.28.625.625.625Z",
     fill: "currentColor"
   }));
-};
+});
 IconCalendar.displayName = 'IconCalendar';
 var _excluded$u = ["testId"];
-var IconCameraSlash = function IconCameraSlash(_ref) {
+var IconCameraSlash = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-camera-slash' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
@@ -1411,7 +1382,8 @@ var IconCameraSlash = function IconCameraSlash(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
@@ -1419,13 +1391,11 @@ var IconCameraSlash = function IconCameraSlash(_ref) {
     d: "M6.487 9.072a4.438 4.438 0 0 0-.303 1.617c0 2.263 1.68 4.102 3.75 4.102.84 0 1.618-.305 2.243-.817l-.825-.711a2.57 2.57 0 0 1-1.418.434c-1.516 0-2.75-1.35-2.75-3.008 0-.314.043-.622.128-.906l-.825-.71Z",
     fill: "currentColor"
   }));
-};
+});
 IconCameraSlash.displayName = 'IconCameraSlash';
 var _excluded$v = ["testId"];
-var IconCamera = function IconCamera(_ref) {
+var IconCamera = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-camera' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
@@ -1435,18 +1405,17 @@ var IconCamera = function IconCamera(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconCamera.displayName = 'IconCamera';
 var _excluded$w = ["testId"];
-var IconCashRegister = function IconCashRegister(_ref) {
+var IconCashRegister = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-cash-register' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
@@ -1456,18 +1425,17 @@ var IconCashRegister = function IconCashRegister(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconCashRegister.displayName = 'IconCashRegister';
 var _excluded$x = ["testId"];
-var IconChartBar = function IconChartBar(_ref) {
+var IconChartBar = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-chart-bar' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
@@ -1477,20 +1445,19 @@ var IconChartBar = function IconChartBar(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M1.25 16.25h18.438c.172 0 .312.14.312.313v.625c0 .172-.14.312-.313.312H.625A.625.625 0 0 1 0 16.875V2.812C0 2.64.14 2.5.313 2.5h.625c.172 0 .312.14.312.313V16.25Zm15.313-2.5h.625c.171 0 .312-.14.312-.313V4.063a.313.313 0 0 0-.313-.313h-.625a.313.313 0 0 0-.312.313v9.375c0 .171.14.312.313.312Zm-3.75 0h.624c.172 0 .313-.14.313-.313V7.814a.313.313 0 0 0-.313-.313h-.624a.313.313 0 0 0-.313.313v5.625c0 .171.14.312.313.312Zm-6.876 0h-.625A.313.313 0 0 1 5 13.437v-3.124c0-.172.14-.313.313-.313h.625c.171 0 .312.14.312.313v3.124c0 .172-.14.313-.313.313Zm3.125 0h.626c.171 0 .312-.14.312-.313V5.313A.313.313 0 0 0 9.687 5h-.624a.313.313 0 0 0-.313.313v8.125c0 .171.14.312.313.312Z",
     fill: "currentColor"
   }));
-};
+});
 IconChartBar.displayName = 'IconChartBar';
 var _excluded$y = ["testId"];
-var IconCheck = function IconCheck(_ref) {
+var IconCheck = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-check' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
@@ -1500,20 +1467,19 @@ var IconCheck = function IconCheck(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M7.324 16.832a.827.827 0 0 1-1.169-.005L.24 10.864a.827.827 0 0 1 .004-1.169l.587-.582a.827.827 0 0 1 1.17.005l4.75 4.79L18.01 2.74a.827.827 0 0 1 1.17.004l.581.587a.826.826 0 0 1-.005 1.17L7.325 16.831Z",
     fill: "currentColor"
   }));
-};
+});
 IconCheck.displayName = 'IconCheck';
 var _excluded$z = ["testId"];
-var IconChevronDown = function IconChevronDown(_ref) {
+var IconChevronDown = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-chevron-down' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
@@ -1523,20 +1489,19 @@ var IconChevronDown = function IconChevronDown(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.502 14.778 1.873 6.57a.783.783 0 0 1-.206-.537c0-.202.073-.393.206-.536l.256-.275a.671.671 0 0 1 .997 0L10 12.62l6.874-7.397A.676.676 0 0 1 17.374 5c.188 0 .365.079.498.222l.256.275a.787.787 0 0 1 .206.536.787.787 0 0 1-.206.537l-7.63 8.208a.67.67 0 0 1-.996 0Z",
     fill: "currentColor"
   }));
-};
+});
 IconChevronDown.displayName = 'IconChevronDown';
 var _excluded$A = ["testId"];
-var IconChevronLeft = function IconChevronLeft(_ref) {
+var IconChevronLeft = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-chevron-left' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
@@ -1546,20 +1511,19 @@ var IconChevronLeft = function IconChevronLeft(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m5.222 9.502 8.208-7.629a.783.783 0 0 1 .537-.206c.202 0 .393.073.536.206l.275.256a.671.671 0 0 1 0 .997L7.38 10l7.397 6.875c.143.133.222.31.222.498a.677.677 0 0 1-.222.499l-.275.255a.787.787 0 0 1-.536.206.787.787 0 0 1-.537-.206L5.222 10.5a.671.671 0 0 1 0-.997Z",
     fill: "currentColor"
   }));
-};
+});
 IconChevronLeft.displayName = 'IconChevronLeft';
 var _excluded$B = ["testId"];
-var IconChevronRight = function IconChevronRight(_ref) {
+var IconChevronRight = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-chevron-right' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
@@ -1569,20 +1533,19 @@ var IconChevronRight = function IconChevronRight(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.778 10.498 6.57 18.127a.784.784 0 0 1-.537.206.784.784 0 0 1-.536-.206l-.275-.256a.671.671 0 0 1 0-.997L12.62 10 5.222 3.125A.676.676 0 0 1 5 2.627c0-.189.079-.366.222-.499l.275-.255a.787.787 0 0 1 .536-.206c.195 0 .389.068.537.206L14.778 9.5a.671.671 0 0 1 0 .997Z",
     fill: "currentColor"
   }));
-};
+});
 IconChevronRight.displayName = 'IconChevronRight';
 var _excluded$C = ["testId"];
-var IconChevronUp = function IconChevronUp(_ref) {
+var IconChevronUp = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-chevron-up' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
@@ -1592,20 +1555,19 @@ var IconChevronUp = function IconChevronUp(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.502 5.222 1.873 13.43a.783.783 0 0 0-.206.537c0 .202.073.393.206.536l.256.275a.671.671 0 0 0 .997 0L10 7.38l6.874 7.397c.133.143.31.222.499.222a.676.676 0 0 0 .498-.222l.256-.275a.787.787 0 0 0 .206-.536.787.787 0 0 0-.206-.537l-7.63-8.208a.67.67 0 0 0-.996 0Z",
     fill: "currentColor"
   }));
-};
+});
 IconChevronUp.displayName = 'IconChevronUp';
 var _excluded$D = ["testId"];
-var IconClipboardList = function IconClipboardList(_ref) {
+var IconClipboardList = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-clipboard-list' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
@@ -1615,20 +1577,19 @@ var IconClipboardList = function IconClipboardList(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12.164 2.5h3.461c1.035 0 1.875.84 1.875 1.875v13.75c0 1.035-.84 1.875-1.875 1.875H4.375A1.875 1.875 0 0 1 2.5 18.125V4.375C2.5 3.34 3.34 2.5 4.375 2.5h3.46A2.189 2.189 0 0 1 10 0a2.189 2.189 0 0 1 2.165 2.5ZM5.938 10c0-.52.417-.938.937-.938s.938.418.938.938-.418.938-.938.938A.935.935 0 0 1 5.937 10Zm7.5-.625H9.061a.313.313 0 0 0-.312.313v.624c0 .172.14.313.313.313h4.374c.172 0 .313-.14.313-.313v-.624a.313.313 0 0 0-.313-.313Zm0 3.75H9.061a.313.313 0 0 0-.312.313v.624c0 .172.14.313.313.313h4.374c.172 0 .313-.14.313-.313v-.624a.313.313 0 0 0-.313-.313Zm-6.563-.313a.935.935 0 0 0-.938.938c0 .52.418.938.938.938s.938-.418.938-.938a.935.935 0 0 0-.938-.938ZM10 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-.937Zm5.625 17.5a.627.627 0 0 0 .625-.625V4.375a.627.627 0 0 0-.625-.625H13.75v.781a.47.47 0 0 1-.469.469H6.72a.47.47 0 0 1-.469-.469V3.75H4.375a.627.627 0 0 0-.625.625v13.75c0 .344.281.625.625.625h11.25Z",
     fill: "currentColor"
   }));
-};
+});
 IconClipboardList.displayName = 'IconClipboardList';
 var _excluded$E = ["testId"];
-var IconClock = function IconClock(_ref) {
+var IconClock = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-clock' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
@@ -1638,18 +1599,17 @@ var IconClock = function IconClock(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconClock.displayName = 'IconClock';
 var _excluded$F = ["testId"];
-var IconCog = function IconCog(_ref) {
+var IconCog = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-cog' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
@@ -1659,18 +1619,17 @@ var IconCog = function IconCog(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconCog.displayName = 'IconCog';
 var _excluded$G = ["testId"];
-var IconCommentLines = function IconCommentLines(_ref) {
+var IconCommentLines = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-comment-lines' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
@@ -1680,7 +1639,8 @@ var IconCommentLines = function IconCommentLines(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -1690,13 +1650,11 @@ var IconCommentLines = function IconCommentLines(_ref) {
     d: "M5.313 10.417h5.625c.171 0 .312.14.312.312v.625c0 .172-.14.313-.313.313H5.314A.313.313 0 0 1 5 11.354v-.625c0-.172.14-.312.313-.312ZM5.313 6.667h9.375c.171 0 .312.14.312.312v.625c0 .172-.14.313-.313.313H5.313A.313.313 0 0 1 5 7.604V6.98c0-.172.14-.312.313-.312Z",
     fill: "currentColor"
   }));
-};
+});
 IconCommentLines.displayName = 'IconCommentLines';
 var _excluded$H = ["testId"];
-var IconComment = function IconComment(_ref) {
+var IconComment = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-comment' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
@@ -1706,20 +1664,19 @@ var IconComment = function IconComment(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.04 9.376c0-4.48 4.468-8.109 9.98-8.109 5.513 0 9.98 3.63 9.98 8.11 0 4.479-4.467 8.108-9.98 8.108-1.279 0-2.495-.202-3.626-.557-1.134.803-3.025 1.805-5.423 1.805a.936.936 0 0 1-.678-1.579c.02-.016 1.228-1.318 1.81-2.854C.815 12.932.04 11.232.04 9.376Zm18.713 0c0-3.781-3.918-6.861-8.733-6.861s-8.733 3.08-8.733 6.861c0 1.466.597 2.873 1.723 4.067l.535.569-.277.729c-.429 1.138-1.123 2.125-1.59 2.713 1.718-.167 3.102-.908 4-1.544l.506-.358.593.187c1.048.331 2.14.499 3.243.499 4.815 0 8.733-3.08 8.733-6.862Z",
     fill: "currentColor"
   }));
-};
+});
 IconComment.displayName = 'IconComment';
 var _excluded$I = ["testId"];
-var IconCopy = function IconCopy(_ref) {
+var IconCopy = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-copy' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
@@ -1729,7 +1686,8 @@ var IconCopy = function IconCopy(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-copy_svg__a)"
   }, React__default.createElement("path", {
@@ -1741,13 +1699,11 @@ var IconCopy = function IconCopy(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconCopy.displayName = 'IconCopy';
 var _excluded$J = ["testId"];
-var IconCreditCardPlus = function IconCreditCardPlus(_ref) {
+var IconCreditCardPlus = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-credit-card-plus' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
@@ -1757,7 +1713,8 @@ var IconCreditCardPlus = function IconCreditCardPlus(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-credit-card-plus_svg__a)"
   }, React__default.createElement("path", {
@@ -1771,13 +1728,11 @@ var IconCreditCardPlus = function IconCreditCardPlus(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconCreditCardPlus.displayName = 'IconCreditCardPlus';
 var _excluded$K = ["testId"];
-var IconCreditCard = function IconCreditCard(_ref) {
+var IconCreditCard = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-credit-card' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
@@ -1787,7 +1742,8 @@ var IconCreditCard = function IconCreditCard(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-credit-card_svg__a)"
   }, React__default.createElement("path", {
@@ -1799,13 +1755,11 @@ var IconCreditCard = function IconCreditCard(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconCreditCard.displayName = 'IconCreditCard';
 var _excluded$L = ["testId"];
-var IconDownload = function IconDownload(_ref) {
+var IconDownload = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-download' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
@@ -1815,20 +1769,19 @@ var IconDownload = function IconDownload(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M18.281 20c.95 0 1.719-.77 1.719-1.719V14.22c0-.95-.77-1.719-1.719-1.719h-3.883l2.204-2.203c.98-.985.285-2.668-1.106-2.668h-2.059V1.563C13.438.699 12.739 0 11.876 0h-3.75c-.863 0-1.563.7-1.563 1.563v6.066H4.505c-1.39 0-2.09 1.684-1.106 2.668L5.602 12.5H1.719C.769 12.5 0 13.27 0 14.219v4.062C0 19.231.77 20 1.719 20H18.28Zm-3.906-3.906a.783.783 0 0 0-.781.781c0 .43.351.781.781.781.43 0 .781-.351.781-.781a.783.783 0 0 0-.781-.781Zm3.281.781c0 .43-.351.781-.781.781a.783.783 0 0 1-.781-.781c0-.43.351-.781.781-.781.43 0 .781.351.781.781ZM9.777 14.91c.121.121.32.121.442 0l5.496-5.496a.314.314 0 0 0-.223-.535h-3.305V1.563a.313.313 0 0 0-.312-.313h-3.75a.313.313 0 0 0-.313.313v7.316H4.504a.315.315 0 0 0-.223.535l5.496 5.496Zm8.504-1.16a.47.47 0 0 1 .469.469v4.062a.47.47 0 0 1-.469.469H1.72a.47.47 0 0 1-.469-.469V14.22a.47.47 0 0 1 .469-.469h5.133l2.043 2.043c.609.61 1.601.61 2.21 0l2.043-2.043h5.133Z",
     fill: "currentColor"
   }));
-};
+});
 IconDownload.displayName = 'IconDownload';
 var _excluded$M = ["testId"];
-var IconEdit = function IconEdit(_ref) {
+var IconEdit = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-edit' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
@@ -1838,18 +1791,17 @@ var IconEdit = function IconEdit(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconEdit.displayName = 'IconEdit';
 var _excluded$N = ["testId"];
-var IconEllipsisV = function IconEllipsisV(_ref) {
+var IconEllipsisV = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-ellipsis-v' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
@@ -1859,20 +1811,19 @@ var IconEllipsisV = function IconEllipsisV(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 2.188C8 3.34 8.892 4.27 9.997 4.27c1.104 0 1.996-.931 1.996-2.083 0-1.153-.892-2.084-1.996-2.084C8.892.104 8 1.035 8 2.188Zm1.997 5.729c1.104 0 1.996.93 1.996 2.083 0 1.152-.892 2.083-1.996 2.083C8.892 12.083 8 11.153 8 10c0-1.152.892-2.083 1.997-2.083Zm0 11.979C8.892 19.896 8 18.965 8 17.813c0-1.153.892-2.084 1.997-2.084 1.104 0 1.996.931 1.996 2.084 0 1.152-.892 2.083-1.996 2.083Z",
     fill: "currentColor"
   }));
-};
+});
 IconEllipsisV.displayName = 'IconEllipsisV';
 var _excluded$O = ["testId"];
-var IconEnvelope = function IconEnvelope(_ref) {
+var IconEnvelope = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-envelope' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
@@ -1882,18 +1833,17 @@ var IconEnvelope = function IconEnvelope(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconEnvelope.displayName = 'IconEnvelope';
 var _excluded$P = ["testId"];
-var IconExclaimationTriangle = function IconExclaimationTriangle(_ref) {
+var IconExclaimationTriangle = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-exclaimation-triangle' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
@@ -1903,20 +1853,19 @@ var IconExclaimationTriangle = function IconExclaimationTriangle(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m19.74 16.378-8.315-14.42C10.787.85 9.182.85 8.54 1.958L.225 16.378c-.637 1.105.16 2.495 1.442 2.495h16.635c1.275 0 2.08-1.386 1.438-2.495Zm-9.144-9.706h-1.23a.208.208 0 0 0-.208.215l.26 6.794a.207.207 0 0 0 .208.201h.71a.21.21 0 0 0 .208-.2l.26-6.795a.208.208 0 0 0-.208-.215Zm-1.584 8.874c0-.537.433-.97.97-.97.538 0 .971.433.971.97 0 .537-.433.97-.97.97a.969.969 0 0 1-.97-.97Zm-7.348 2.218h16.638a.554.554 0 0 0 .478-.832L10.461 2.513a.555.555 0 0 0-.96 0l-8.319 14.42a.556.556 0 0 0 .482.831Z",
     fill: "currentColor"
   }));
-};
+});
 IconExclaimationTriangle.displayName = 'IconExclaimationTriangle';
 var _excluded$Q = ["testId"];
-var IconExclaimation = function IconExclaimation(_ref) {
+var IconExclaimation = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-exclaimation' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
@@ -1926,18 +1875,17 @@ var IconExclaimation = function IconExclaimation(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconExclaimation.displayName = 'IconExclaimation';
 var _excluded$R = ["testId"];
-var IconExpand = function IconExpand(_ref) {
+var IconExpand = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-expand' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
@@ -1947,18 +1895,17 @@ var IconExpand = function IconExpand(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconExpand.displayName = 'IconExpand';
 var _excluded$S = ["testId"];
-var IconExternalLink = function IconExternalLink(_ref) {
+var IconExternalLink = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-external-link' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
@@ -1968,20 +1915,19 @@ var IconExternalLink = function IconExternalLink(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.789 13.537a.417.417 0 0 0 0 .589l.196.196a.417.417 0 0 0 .59 0l11.22-11.22.024.024-.011 3.124c0 .23.186.417.416.417h.347c.23 0 .417-.187.417-.417L20 1.528a.417.417 0 0 0-.417-.417l-4.722.012a.417.417 0 0 0-.417.417v.347c0 .23.187.417.417.417l3.124-.012.024.024-11.22 11.22ZM14.566 9l.278-.278a.417.417 0 0 1 .712.295v8.205c0 .92-.747 1.667-1.667 1.667H1.667c-.92 0-1.667-.746-1.667-1.667V5c0-.92.746-1.667 1.667-1.667h12.082c.371 0 .557.45.295.712l-.278.277a.416.416 0 0 1-.295.122H1.667A.556.556 0 0 0 1.11 5v12.222c0 .307.249.556.556.556h12.222a.556.556 0 0 0 .555-.556V9.294c0-.11.044-.216.122-.294Z",
     fill: "currentColor"
   }));
-};
+});
 IconExternalLink.displayName = 'IconExternalLink';
 var _excluded$T = ["testId"];
-var IconEyeSlash = function IconEyeSlash(_ref) {
+var IconEyeSlash = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-eye-slash' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
@@ -1991,7 +1937,8 @@ var IconEyeSlash = function IconEyeSlash(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-eye-slash_svg__a)"
   }, React__default.createElement("g", {
@@ -2011,13 +1958,11 @@ var IconEyeSlash = function IconEyeSlash(_ref) {
     transform: "translate(0 2.4)",
     d: "M0 0h20v15.2H0z"
   }))));
-};
+});
 IconEyeSlash.displayName = 'IconEyeSlash';
 var _excluded$U = ["testId"];
-var IconEye = function IconEye(_ref) {
+var IconEye = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-eye' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
@@ -2027,7 +1972,8 @@ var IconEye = function IconEye(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-eye_svg__a)"
   }, React__default.createElement("path", {
@@ -2040,13 +1986,11 @@ var IconEye = function IconEye(_ref) {
     transform: "translate(1 2)",
     d: "M0 0h18v16H0z"
   }))));
-};
+});
 IconEye.displayName = 'IconEye';
 var _excluded$V = ["testId"];
-var IconFilePdf = function IconFilePdf(_ref) {
+var IconFilePdf = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-file-pdf' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
@@ -2056,7 +2000,8 @@ var IconFilePdf = function IconFilePdf(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-file-pdf_svg__a)"
   }, React__default.createElement("path", {
@@ -2068,13 +2013,11 @@ var IconFilePdf = function IconFilePdf(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconFilePdf.displayName = 'IconFilePdf';
 var _excluded$W = ["testId"];
-var IconFile = function IconFile(_ref) {
+var IconFile = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-file' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
@@ -2084,7 +2027,8 @@ var IconFile = function IconFile(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-file_svg__a)"
   }, React__default.createElement("path", {
@@ -2096,13 +2040,11 @@ var IconFile = function IconFile(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconFile.displayName = 'IconFile';
 var _excluded$X = ["testId"];
-var IconFlag = function IconFlag(_ref) {
+var IconFlag = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-flag' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
@@ -2112,7 +2054,8 @@ var IconFlag = function IconFlag(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-flag_svg__a)"
   }, React__default.createElement("path", {
@@ -2124,13 +2067,11 @@ var IconFlag = function IconFlag(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconFlag.displayName = 'IconFlag';
 var _excluded$Y = ["testId"];
-var IconFourDotsCircle = function IconFourDotsCircle(_ref) {
+var IconFourDotsCircle = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-four-dots-circle' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
@@ -2140,20 +2081,19 @@ var IconFourDotsCircle = function IconFourDotsCircle(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.313 10A9.686 9.686 0 0 1 10 .312 9.686 9.686 0 0 1 19.688 10 9.686 9.686 0 0 1 10 19.688 9.686 9.686 0 0 1 .312 10ZM10 18.438c4.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.438 0 4.684 3.801 8.438 8.438 8.438ZM7.083 9.166a2.083 2.083 0 1 0 0-4.167 2.083 2.083 0 0 0 0 4.167Zm2.084 3.75a2.083 2.083 0 1 1-4.167 0 2.083 2.083 0 0 1 4.167 0Zm3.75-3.75a2.083 2.083 0 1 0 0-4.167 2.083 2.083 0 0 0 0 4.167ZM15 12.917a2.083 2.083 0 1 1-4.167 0 2.083 2.083 0 0 1 4.167 0Z",
     fill: "currentColor"
   }));
-};
+});
 IconFourDotsCircle.displayName = 'IconFourDotsCircle';
 var _excluded$Z = ["testId"];
-var IconFourSquares = function IconFourSquares(_ref) {
+var IconFourSquares = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-four-squares' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
@@ -2163,7 +2103,8 @@ var IconFourSquares = function IconFourSquares(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("rect", {
     x: 0.833,
     y: 10.573,
@@ -2194,13 +2135,11 @@ var IconFourSquares = function IconFourSquares(_ref) {
     rx: 1,
     fill: "currentColor"
   }));
-};
+});
 IconFourSquares.displayName = 'IconFourSquares';
 var _excluded$_ = ["testId"];
-var IconGavel = function IconGavel(_ref) {
+var IconGavel = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-gavel' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
@@ -2210,18 +2149,17 @@ var IconGavel = function IconGavel(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconGavel.displayName = 'IconGavel';
 var _excluded$$ = ["testId"];
-var IconGif = function IconGif(_ref) {
+var IconGif = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-gif' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
@@ -2230,7 +2168,8 @@ var IconGif = function IconGif(_ref) {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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",
@@ -2240,13 +2179,11 @@ var IconGif = function IconGif(_ref) {
     d: "M7.124 12.541c.876 0 1.592-.373 2.087-.93V9.715H6.804v.785h1.524v.785c-.23.22-.686.457-1.204.457-1.006 0-1.753-.777-1.753-1.836 0-1.074.747-1.836 1.753-1.836a1.64 1.64 0 0 1 1.318.678l.724-.42c-.404-.578-1.052-1.05-2.042-1.05-1.478 0-2.667 1.028-2.667 2.628 0 1.592 1.189 2.636 2.667 2.636Zm3.907-.099V7.36h-.892v5.082h.892Zm1.971 0V10.24h2.538v-.785h-2.538v-1.31h2.59V7.36h-3.481v5.082h.891Z",
     fill: "currentColor"
   }));
-};
+});
 IconGif.displayName = 'IconGif';
 var _excluded$10 = ["testId"];
-var IconGift = function IconGift(_ref) {
+var IconGift = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-gift' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
@@ -2256,18 +2193,17 @@ var IconGift = function IconGift(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconGift.displayName = 'IconGift';
 var _excluded$11 = ["testId"];
-var IconGrinBeam = function IconGrinBeam(_ref) {
+var IconGrinBeam = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-grin-beam' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
@@ -2277,18 +2213,17 @@ var IconGrinBeam = function IconGrinBeam(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconGrinBeam.displayName = 'IconGrinBeam';
 var _excluded$12 = ["testId"];
-var IconGripVertical = function IconGripVertical(_ref) {
+var IconGripVertical = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-grip-vertical' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
@@ -2298,7 +2233,8 @@ var IconGripVertical = function IconGripVertical(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("circle", {
     cx: 6.667,
     cy: 3.333,
@@ -2330,13 +2266,11 @@ var IconGripVertical = function IconGripVertical(_ref) {
     fill: "currentColor",
     r: 1.667
   }));
-};
+});
 IconGripVertical.displayName = 'IconGripVertical';
 var _excluded$13 = ["testId"];
-var IconHandshake = function IconHandshake(_ref) {
+var IconHandshake = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-handshake' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
@@ -2346,7 +2280,8 @@ var IconHandshake = function IconHandshake(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-handshake_svg__a)"
   }, React__default.createElement("path", {
@@ -2359,13 +2294,11 @@ var IconHandshake = function IconHandshake(_ref) {
     transform: "translate(0 2)",
     d: "M0 0h20v16H0z"
   }))));
-};
+});
 IconHandshake.displayName = 'IconHandshake';
 var _excluded$14 = ["testId"];
-var IconImage = function IconImage(_ref) {
+var IconImage = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-image' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
@@ -2375,7 +2308,8 @@ var IconImage = function IconImage(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-image_svg__a)"
   }, React__default.createElement("path", {
@@ -2387,13 +2321,11 @@ var IconImage = function IconImage(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconImage.displayName = 'IconImage';
 var _excluded$15 = ["testId"];
-var IconIslandTropical = function IconIslandTropical(_ref) {
+var IconIslandTropical = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-island-tropical' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
@@ -2403,20 +2335,19 @@ var IconIslandTropical = function IconIslandTropical(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.646 1.493a6.69 6.69 0 0 1 1.716-.243c2.939 0 5.372 1.846 5.796 4.252a.645.645 0 0 1-.647.748h-5.895c.247 1.895.453 4.738.074 7.64 2.273.524 3.977 2.555 3.977 4.985A1.127 1.127 0 0 1 15.542 20H2.792a1.127 1.127 0 0 1-1.125-1.125 5.13 5.13 0 0 1 5.125-5.125h.8c.627-1.626 1.283-3.717 1.629-5.943l-3.248 3.247c-.22.221-.707.326-.986-.072C3.82 9.317 3.93 6.948 5.192 5H2.323a.645.645 0 0 1-.647-.748C2.1 1.845 4.533 0 7.472 0c1.635 0 3.11.573 4.173 1.493ZM2.918 18.75h12.496A3.879 3.879 0 0 0 11.542 15h-4.75a3.879 3.879 0 0 0-3.873 3.75Zm8.518-5h-2.51c.697-1.893 1.199-4.563 1.45-7.098l.4-.402h.578c.244 1.822.46 4.648.082 7.5ZM5.66 9.6l4.6-4.6h7.448c-.642-1.466-2.375-2.5-4.346-2.5-.691 0-1.38.189-1.83.312l-.207.056-.498-.43C9.942 1.672 8.75 1.25 7.472 1.25c-1.97 0-3.704 1.034-4.346 2.5h3.12a6.635 6.635 0 0 1 1.785-1.192.313.313 0 0 1 .413.174l.235.583a.312.312 0 0 1-.167.4C5.968 4.858 4.93 7.684 5.66 9.6Z",
     fill: "currentColor"
   }));
-};
+});
 IconIslandTropical.displayName = 'IconIslandTropical';
 var _excluded$16 = ["testId"];
-var IconItalic = function IconItalic(_ref) {
+var IconItalic = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-italic' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
@@ -2426,18 +2357,17 @@ var IconItalic = function IconItalic(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconItalic.displayName = 'IconItalic';
 var _excluded$17 = ["testId"];
-var IconLaptopSearch = function IconLaptopSearch(_ref) {
+var IconLaptopSearch = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-laptop-search' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
@@ -2447,7 +2377,8 @@ var IconLaptopSearch = function IconLaptopSearch(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-laptop-search_svg__a)"
   }, React__default.createElement("path", {
@@ -2461,13 +2392,11 @@ var IconLaptopSearch = function IconLaptopSearch(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconLaptopSearch.displayName = 'IconLaptopSearch';
 var _excluded$18 = ["testId"];
-var IconLink = function IconLink(_ref) {
+var IconLink = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-link' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
@@ -2477,7 +2406,8 @@ var IconLink = function IconLink(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-link_svg__a)"
   }, React__default.createElement("path", {
@@ -2489,13 +2419,11 @@ var IconLink = function IconLink(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconLink.displayName = 'IconLink';
 var _excluded$19 = ["testId"];
-var IconListOI = function IconListOI(_ref) {
+var IconListOI = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-list-o-i' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
@@ -2505,7 +2433,8 @@ var IconListOI = function IconListOI(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-list-o-i_svg__a)"
   }, React__default.createElement("path", {
@@ -2517,13 +2446,11 @@ var IconListOI = function IconListOI(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconListOI.displayName = 'IconListOI';
 var _excluded$1a = ["testId"];
-var IconList = function IconList(_ref) {
+var IconList = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-list' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
@@ -2533,18 +2460,17 @@ var IconList = function IconList(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconList.displayName = 'IconList';
 var _excluded$1b = ["testId"];
-var IconLock = function IconLock(_ref) {
+var IconLock = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-lock' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
@@ -2554,18 +2480,17 @@ var IconLock = function IconLock(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconLock.displayName = 'IconLock';
 var _excluded$1c = ["testId"];
-var IconMagicSolid = function IconMagicSolid(_ref) {
+var IconMagicSolid = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-magic-solid' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
@@ -2575,20 +2500,19 @@ var IconMagicSolid = function IconMagicSolid(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M19.635 3.059 16.961.385a1.244 1.244 0 0 0-.882-.365c-.32 0-.639.121-.883.365L.405 15.177a1.247 1.247 0 0 0 0 1.764l2.674 2.674a1.243 1.243 0 0 0 1.765 0L19.634 4.823a1.248 1.248 0 0 0 0-1.764ZM3.158 6.257l1.04-2.079 2.08-1.04-2.08-1.04L3.158.02l-1.04 2.079L.04 3.139l2.08 1.04 1.04 2.078Zm5.614-2.495.624-1.247 1.247-.624-1.247-.624L8.772.02l-.624 1.247-1.247.624 1.247.624.624 1.247Zm-4.99-.624a.624.624 0 1 0-1.247 0 .624.624 0 0 0 1.247 0Zm13.1 8.11-1.04 2.079-2.08 1.04 2.08 1.04 1.04 2.078 1.039-2.079 2.08-1.04-2.08-1.04-1.04-2.078Zm-.624 3.119a.624.624 0 1 0 1.247 0 .624.624 0 0 0-1.247 0Zm-4.016-9.264 2.675 2.674 3.836-3.836-2.674-2.674h-.002l-3.835 3.836Z",
     fill: "currentColor"
   }));
-};
+});
 IconMagicSolid.displayName = 'IconMagicSolid';
 var _excluded$1d = ["testId"];
-var IconMapMarker = function IconMapMarker(_ref) {
+var IconMapMarker = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-map-marker' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
@@ -2598,20 +2522,19 @@ var IconMapMarker = function IconMapMarker(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 0a7.5 7.5 0 0 0-7.5 7.5c0 2.485.711 3.498 4.113 8.344a531.627 531.627 0 0 1 2.616 3.752.938.938 0 0 0 1.542 0c1.012-1.467 1.877-2.7 2.616-3.752C16.789 10.998 17.5 9.984 17.5 7.5A7.5 7.5 0 0 0 10 0ZM6.25 7.5A3.754 3.754 0 0 1 10 3.75a3.754 3.754 0 0 1 3.75 3.75A3.754 3.754 0 0 1 10 11.25 3.754 3.754 0 0 1 6.25 7.5Zm1.25 0C7.5 8.879 8.621 10 10 10s2.5-1.121 2.5-2.5S11.379 5 10 5a2.503 2.503 0 0 0-2.5 2.5Zm.068 7.526c.684.976 1.489 2.123 2.432 3.487a608.11 608.11 0 0 1 2.432-3.487C15.698 10.37 16.25 9.582 16.25 7.5c0-1.67-.65-3.239-1.83-4.42A6.209 6.209 0 0 0 10 1.25c-1.67 0-3.239.65-4.42 1.83A6.209 6.209 0 0 0 3.75 7.5c0 2.083.553 2.87 3.818 7.526Z",
     fill: "currentColor"
   }));
-};
+});
 IconMapMarker.displayName = 'IconMapMarker';
 var _excluded$1e = ["testId"];
-var IconMegaphone = function IconMegaphone(_ref) {
+var IconMegaphone = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-megaphone' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
@@ -2621,20 +2544,19 @@ var IconMegaphone = function IconMegaphone(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M19.722 2.222h-.555a.278.278 0 0 0-.278.278v.671L1.11 7.354v-.41a.278.278 0 0 0-.278-.277H.278A.278.278 0 0 0 0 6.944v6.112c0 .153.124.277.278.277h.555a.278.278 0 0 0 .278-.277v-.41l4.534 1.066a3.26 3.26 0 0 0-.09.732 3.333 3.333 0 0 0 3.334 3.333 3.313 3.313 0 0 0 3.217-2.544l6.783 1.596v.67c0 .154.124.279.278.279h.555A.278.278 0 0 0 20 17.5v-15a.278.278 0 0 0-.278-.278ZM8.89 16.667a2.225 2.225 0 0 1-2.222-2.223c0-.165.025-.323.06-.477l4.31 1.014a2.22 2.22 0 0 1-2.148 1.686ZM1.11 8.495v3.01l17.778 4.182V4.312L1.11 8.495Z",
     fill: "currentColor"
   }));
-};
+});
 IconMegaphone.displayName = 'IconMegaphone';
 var _excluded$1f = ["testId"];
-var IconMinusCircle = function IconMinusCircle(_ref) {
+var IconMinusCircle = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-minus-circle' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
@@ -2644,18 +2566,17 @@ var IconMinusCircle = function IconMinusCircle(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconMinusCircle.displayName = 'IconMinusCircle';
 var _excluded$1g = ["testId"];
-var IconMinus = function IconMinus(_ref) {
+var IconMinus = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-minus' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
@@ -2665,18 +2586,17 @@ var IconMinus = function IconMinus(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconMinus.displayName = 'IconMinus';
 var _excluded$1h = ["testId"];
-var IconMoneyBill = function IconMoneyBill(_ref) {
+var IconMoneyBill = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-money-bill' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
@@ -2686,18 +2606,17 @@ var IconMoneyBill = function IconMoneyBill(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconMoneyBill.displayName = 'IconMoneyBill';
 var _excluded$1i = ["testId"];
-var IconNotesMedical = function IconNotesMedical(_ref) {
+var IconNotesMedical = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-notes-medical' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
@@ -2707,18 +2626,17 @@ var IconNotesMedical = function IconNotesMedical(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconNotesMedical.displayName = 'IconNotesMedical';
 var _excluded$1j = ["testId"];
-var IconOvertime = function IconOvertime(_ref) {
+var IconOvertime = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-overtime' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
@@ -2728,7 +2646,8 @@ var IconOvertime = function IconOvertime(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-overtime_svg__a)"
   }, React__default.createElement("path", {
@@ -2741,13 +2660,11 @@ var IconOvertime = function IconOvertime(_ref) {
     transform: "translate(.2)",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconOvertime.displayName = 'IconOvertime';
 var _excluded$1k = ["testId"];
-var IconPaperPlaneClock = function IconPaperPlaneClock(_ref) {
+var IconPaperPlaneClock = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-paper-plane-clock' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
@@ -2757,7 +2674,8 @@ var IconPaperPlaneClock = function IconPaperPlaneClock(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-paper-plane-clock_svg__a)",
     fill: "currentColor"
@@ -2774,13 +2692,11 @@ var IconPaperPlaneClock = function IconPaperPlaneClock(_ref) {
     transform: "translate(0 2)",
     d: "M0 0h20v15.641H0z"
   }))));
-};
+});
 IconPaperPlaneClock.displayName = 'IconPaperPlaneClock';
 var _excluded$1l = ["testId"];
-var IconPaperPlane = function IconPaperPlane(_ref) {
+var IconPaperPlane = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-paper-plane' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
@@ -2790,20 +2706,19 @@ var IconPaperPlane = function IconPaperPlane(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M17.188.206.628 10.261c-.85.517-.765 1.836.14 2.23l5.183 2.256v3.969c0 1.175 1.397 1.685 2.096.79l2.244-2.872 4.672 2.031c.706.308 1.505-.163 1.62-.96l2.365-16.23c.151-1.04-.91-1.786-1.76-1.269ZM7.134 18.716V15.26l2.014.875-2.014 2.58Zm.658-4.518 7.622 3.316 2.366-16.23L1.22 11.342l4.195 1.821 9.437-8.467c.207-.186.492.11.314.327l-7.374 9.175Z",
     fill: "currentColor"
   }));
-};
+});
 IconPaperPlane.displayName = 'IconPaperPlane';
 var _excluded$1m = ["testId"];
-var IconPaperclip = function IconPaperclip(_ref) {
+var IconPaperclip = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-paperclip' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
@@ -2813,7 +2728,8 @@ var IconPaperclip = function IconPaperclip(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-paperclip_svg__a)"
   }, React__default.createElement("path", {
@@ -2825,13 +2741,11 @@ var IconPaperclip = function IconPaperclip(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconPaperclip.displayName = 'IconPaperclip';
 var _excluded$1n = ["testId"];
-var IconPencil = function IconPencil(_ref) {
+var IconPencil = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-pencil' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
@@ -2841,20 +2755,19 @@ var IconPencil = function IconPencil(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m17.79.73 1.46 1.462a2.495 2.495 0 0 1 0 3.53L5.512 19.46l-4.451.495a.936.936 0 0 1-1.034-1.033l.495-4.452L14.261.73a2.495 2.495 0 0 1 3.528 0ZM6.802 16.404l8.736-8.735-3.226-3.226-8.736 8.735h1.355v1.872h1.871v1.354ZM4.938 18.27l-2.3.255-1.182-1.181.256-2.3.774-.774H3.84v1.871h1.872v1.355l-.774.774ZM16.42 6.786l1.947-1.947a1.247 1.247 0 0 0 0-1.764l-1.462-1.462a1.247 1.247 0 0 0-1.764 0L13.195 3.56l3.226 3.226Z",
     fill: "currentColor"
   }));
-};
+});
 IconPencil.displayName = 'IconPencil';
 var _excluded$1o = ["testId"];
-var IconPercentage = function IconPercentage(_ref) {
+var IconPercentage = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-percentage' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
@@ -2864,18 +2777,17 @@ var IconPercentage = function IconPercentage(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconPercentage.displayName = 'IconPercentage';
 var _excluded$1p = ["testId"];
-var IconPhone = function IconPhone(_ref) {
+var IconPhone = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-phone' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1p);
@@ -2884,19 +2796,18 @@ var IconPhone = function IconPhone(_ref) {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "m19.93 15.126-.909 3.93a1.21 1.21 0 0 1-1.185.944C7.96 20 0 11.996 0 2.163c0-.569.39-1.06.947-1.189L4.873.07a1.217 1.217 0 0 1 1.392.705l1.813 4.227c.214.495.07 1.08-.347 1.423L5.629 8.144a13.645 13.645 0 0 0 6.223 6.222l1.719-2.101a1.223 1.223 0 0 1 1.423-.347l4.23 1.813c.542.233.838.822.706 1.395ZM5.13 1.292l-3.883.897C1.26 11.33 8.667 18.742 17.81 18.75l.896-3.883-4.187-1.793-2.32 2.838c-4.023-1.887-6.218-4.074-8.113-8.113l2.839-2.32L5.13 1.292Z"
   }));
-};
+});
 IconPhone.displayName = 'IconPhone';
 var _excluded$1q = ["testId"];
-var IconPlug = function IconPlug(_ref) {
+var IconPlug = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-plug' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1q);
@@ -2906,20 +2817,19 @@ var IconPlug = function IconPlug(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M13.125 5.625v-5a.625.625 0 1 1 1.25 0v5h-1.25Zm-9.688.625h13.126c.517 0 .937.42.937.938v1.875c0 .517-.42.937-.938.937h-.312a6.25 6.25 0 0 1-5.625 6.219V20h-1.25v-3.781A6.25 6.25 0 0 1 3.75 10h-.313a.937.937 0 0 1-.937-.938V7.188c0-.518.42-.938.938-.938ZM15 8.75h1.25V7.5H3.75v1.25H5V10c0 2.764 2.237 5 5 5 2.764 0 5-2.237 5-5V8.75ZM5.625.625v5h1.25v-5a.625.625 0 1 0-1.25 0Z",
     fill: "currentColor"
   }));
-};
+});
 IconPlug.displayName = 'IconPlug';
 var _excluded$1r = ["testId"];
-var IconPlus = function IconPlus(_ref) {
+var IconPlus = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-plus' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1r);
@@ -2929,20 +2839,19 @@ var IconPlus = function IconPlus(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M19.672 9.063h-8.734V.336a.312.312 0 0 0-.312-.313h-1.25a.312.312 0 0 0-.313.313v8.727H.33a.312.312 0 0 0-.312.312v1.25c0 .173.14.313.312.313h8.733v8.714c0 .173.14.313.313.313h1.25c.173 0 .312-.14.312-.313v-8.715h8.734c.173 0 .313-.14.313-.312v-1.25a.312.312 0 0 0-.313-.312Z",
     fill: "currentColor"
   }));
-};
+});
 IconPlus.displayName = 'IconPlus';
 var _excluded$1s = ["testId"];
-var IconPrint = function IconPrint(_ref) {
+var IconPrint = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-print' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1s);
@@ -2952,20 +2861,19 @@ var IconPrint = function IconPrint(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M16.25 7.5h.625C18.601 7.5 20 8.9 20 10.625v3.75c0 .345-.28.625-.625.625H16.25v4.375c0 .345-.28.625-.625.625H4.375a.625.625 0 0 1-.625-.625V15H.625A.625.625 0 0 1 0 14.375v-3.75C0 8.899 1.4 7.5 3.125 7.5h.625V1.25C3.75.56 4.283 0 4.94 0h7.042c.332 0 .65.132.884.366l3.018 3.018c.234.234.366.552.366.884V7.5Zm-1.768-3.75L12.5 1.768V3.75h1.982Zm-9.477-2.5h6.245v2.5c0 .69.56 1.25 1.25 1.25H15v2.5H5l.005-6.25ZM5 18.75h10V15H5v3.75Zm13.75-5H1.25v-3.125c0-1.034.841-1.875 1.875-1.875h13.75c1.034 0 1.875.841 1.875 1.875v3.125Zm-4.063-2.5a.937.937 0 1 1 1.875 0 .937.937 0 0 1-1.875 0Z",
     fill: "currentColor"
   }));
-};
+});
 IconPrint.displayName = 'IconPrint';
 var _excluded$1t = ["testId"];
-var IconQuestionCircle = function IconQuestionCircle(_ref) {
+var IconQuestionCircle = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-question-circle' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1t);
@@ -2975,18 +2883,17 @@ var IconQuestionCircle = function IconQuestionCircle(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconQuestionCircle.displayName = 'IconQuestionCircle';
 var _excluded$1u = ["testId"];
-var IconRepeat = function IconRepeat(_ref) {
+var IconRepeat = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-repeat' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1u);
@@ -2996,18 +2903,17 @@ var IconRepeat = function IconRepeat(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconRepeat.displayName = 'IconRepeat';
 var _excluded$1v = ["testId"];
-var IconReply = function IconReply(_ref) {
+var IconReply = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-reply' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1v);
@@ -3017,18 +2923,17 @@ var IconReply = function IconReply(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconReply.displayName = 'IconReply';
 var _excluded$1w = ["testId"];
-var IconSearch = function IconSearch(_ref) {
+var IconSearch = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-search' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1w);
@@ -3038,20 +2943,19 @@ var IconSearch = function IconSearch(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m14.795 13.747 5.03 5.029a.468.468 0 0 1 0 .663l-.386.386a.468.468 0 0 1-.663 0l-5.03-5.03a.48.48 0 0 1-.136-.331v-.398A8.108 8.108 0 0 1 0 8.11C0 3.63 3.63 0 8.11 0a8.108 8.108 0 0 1 5.952 13.61h.402c.125 0 .242.047.331.137ZM1.248 8.109a6.857 6.857 0 0 0 6.861 6.862 6.857 6.857 0 0 0 6.862-6.862 6.857 6.857 0 0 0-6.862-6.861 6.857 6.857 0 0 0-6.861 6.861Z",
     fill: "currentColor"
   }));
-};
+});
 IconSearch.displayName = 'IconSearch';
 var _excluded$1x = ["testId"];
-var IconSignOut = function IconSignOut(_ref) {
+var IconSignOut = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-sign-out' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1x);
@@ -3061,18 +2965,17 @@ var IconSignOut = function IconSignOut(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconSignOut.displayName = 'IconSignOut';
 var _excluded$1y = ["testId"];
-var IconSitemap = function IconSitemap(_ref) {
+var IconSitemap = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-sitemap' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1y);
@@ -3082,20 +2985,19 @@ var IconSitemap = function IconSitemap(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M19 12.667h-1v-3.05a.95.95 0 0 0-.95-.95H10.5v-2H12a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1.5v2H2.95a.95.95 0 0 0-.95.95v3.05H1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3v-3h6.5v3h-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-1v-3H17v3h-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-15 1v3H1v-3h3Zm7.5 3v-3h-3v3h3Zm-3.5-11v-3h4v3H8Zm8 11h3v-3h-3v3Z",
     fill: "currentColor"
   }));
-};
+});
 IconSitemap.displayName = 'IconSitemap';
 var _excluded$1z = ["testId"];
-var IconSlidersH = function IconSlidersH(_ref) {
+var IconSlidersH = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-sliders-h' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1z);
@@ -3105,7 +3007,8 @@ var IconSlidersH = function IconSlidersH(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-sliders-h_svg__a)"
   }, React__default.createElement("path", {
@@ -3117,13 +3020,11 @@ var IconSlidersH = function IconSlidersH(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconSlidersH.displayName = 'IconSlidersH';
 var _excluded$1A = ["testId"];
-var IconSort = function IconSort(_ref) {
+var IconSort = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-sort' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1A);
@@ -3133,18 +3034,17 @@ var IconSort = function IconSort(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconSort.displayName = 'IconSort';
 var _excluded$1B = ["testId"];
-var IconStarSolid = function IconStarSolid(_ref) {
+var IconStarSolid = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-star-solid' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1B);
@@ -3154,18 +3054,17 @@ var IconStarSolid = function IconStarSolid(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconStarSolid.displayName = 'IconStarSolid';
 var _excluded$1C = ["testId"];
-var IconStar = function IconStar(_ref) {
+var IconStar = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-star' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1C);
@@ -3175,18 +3074,17 @@ var IconStar = function IconStar(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconStar.displayName = 'IconStar';
 var _excluded$1D = ["testId"];
-var IconStickyNoteLines = function IconStickyNoteLines(_ref) {
+var IconStickyNoteLines = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-sticky-note-lines' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1D);
@@ -3196,7 +3094,8 @@ var IconStickyNoteLines = function IconStickyNoteLines(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
@@ -3204,13 +3103,11 @@ var IconStickyNoteLines = function IconStickyNoteLines(_ref) {
     d: "M5.313 9.583h5.625c.171 0 .312.14.312.313v.625c0 .172-.14.312-.313.312H5.314A.313.313 0 0 1 5 10.521v-.625c0-.172.14-.313.313-.313ZM5.313 5.833h9.375c.171 0 .312.14.312.313v.625c0 .172-.14.312-.313.312H5.313A.313.313 0 0 1 5 6.771v-.625c0-.172.14-.313.313-.313Z",
     fill: "currentColor"
   }));
-};
+});
 IconStickyNoteLines.displayName = 'IconStickyNoteLines';
 var _excluded$1E = ["testId"];
-var IconStopwatch = function IconStopwatch(_ref) {
+var IconStopwatch = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-stopwatch' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1E);
@@ -3220,20 +3117,19 @@ var IconStopwatch = function IconStopwatch(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m16.613 5.52.684-.684a.47.47 0 0 0 0-.664l-.223-.223a.47.47 0 0 0-.664 0l-.683.684a8.72 8.72 0 0 0-5.145-2.117V1.25h.977a.47.47 0 0 0 .468-.469V.47A.47.47 0 0 0 11.56 0H8.434a.47.47 0 0 0-.47.469V.78c0 .258.212.469.47.469h.898v1.273A8.75 8.75 0 0 0 1.25 11.25a8.75 8.75 0 1 0 15.363-5.73ZM10 18.75a7.497 7.497 0 0 1-7.5-7.5c0-4.145 3.355-7.5 7.5-7.5s7.5 3.355 7.5 7.5-3.355 7.5-7.5 7.5Zm-.625-5.469c0 .258.21.469.469.469h.312a.47.47 0 0 0 .469-.469V6.72a.47.47 0 0 0-.469-.469h-.312a.47.47 0 0 0-.469.469v6.562Z",
     fill: "currentColor"
   }));
-};
+});
 IconStopwatch.displayName = 'IconStopwatch';
 var _excluded$1F = ["testId"];
-var IconStrikethrough = function IconStrikethrough(_ref) {
+var IconStrikethrough = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-strikethrough' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1F);
@@ -3243,7 +3139,8 @@ var IconStrikethrough = function IconStrikethrough(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-strikethrough_svg__a)"
   }, React__default.createElement("path", {
@@ -3255,13 +3152,11 @@ var IconStrikethrough = function IconStrikethrough(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconStrikethrough.displayName = 'IconStrikethrough';
 var _excluded$1G = ["testId"];
-var IconSyncExclaimation = function IconSyncExclaimation(_ref) {
+var IconSyncExclaimation = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-sync-exclaimation' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1G);
@@ -3270,19 +3165,18 @@ var IconSyncExclaimation = function IconSyncExclaimation(_ref) {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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",
     fillRule: "evenodd"
   }));
-};
+});
 IconSyncExclaimation.displayName = 'IconSyncExclaimation';
 var _excluded$1H = ["testId"];
-var IconSync = function IconSync(_ref) {
+var IconSync = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-sync' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1H);
@@ -3291,19 +3185,18 @@ var IconSync = function IconSync(_ref) {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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",
     fillRule: "evenodd"
   }));
-};
+});
 IconSync.displayName = 'IconSync';
 var _excluded$1I = ["testId"];
-var IconTachometer = function IconTachometer(_ref) {
+var IconTachometer = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-tachometer' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1I);
@@ -3311,19 +3204,18 @@ var IconTachometer = function IconTachometer(_ref) {
   return React__default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M0 10.556c0-5.523 4.477-10 10-10s10 4.477 10 10a9.95 9.95 0 0 1-1.356 5.027 1.098 1.098 0 0 1-.953.528H2.309a1.1 1.1 0 0 1-.953-.528A9.948 9.948 0 0 1 0 10.556Zm10-5.834a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM5.278 5a.833.833 0 1 0 0 1.666.833.833 0 0 0 0-1.666Zm8.61.833a.833.833 0 1 1 1.667 0 .833.833 0 0 1-1.666 0Zm2.779 3.89a.833.833 0 1 0 0 1.666.833.833 0 0 0 0-1.667ZM17.69 15l-15.375.024a8.877 8.877 0 0 1-1.205-4.468c0-4.902 3.988-8.89 8.889-8.89s8.889 3.988 8.889 8.89A8.791 8.791 0 0 1 17.69 15ZM2.5 10.556a.833.833 0 1 1 1.666 0 .833.833 0 0 1-1.666 0ZM12.681 3.92a.56.56 0 0 0-.706.343l-1.8 5.2-.069-.009c-.035-.005-.07-.01-.106-.01a2.222 2.222 0 1 0 1.229.372l1.796-5.19a.556.556 0 0 0-.344-.706Zm4.15 13.58c.14 0 .253.14.253.313v.625c0 .172-.113.312-.253.312H3.17c-.14 0-.253-.14-.253-.313v-.625c0-.172.113-.312.253-.312ZM10 10.556a1.112 1.112 0 0 1 0 2.222 1.113 1.113 0 0 1-1.111-1.111c0-.613.498-1.111 1.111-1.111Z"
   }));
-};
+});
 IconTachometer.displayName = 'IconTachometer';
 var _excluded$1J = ["testId"];
-var IconTimesOctagon = function IconTimesOctagon(_ref) {
+var IconTimesOctagon = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-times-octagon' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1J);
@@ -3333,20 +3225,19 @@ var IconTimesOctagon = function IconTimesOctagon(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.094.57c-.351-.35-.827-.55-1.322-.55H7.193c-.495 0-.97.2-1.322.55L.55 5.888c-.351.35-.55.826-.55 1.321v5.58c0 .494.199.97.55 1.32l5.321 5.323c.351.35.827.55 1.322.55h5.579c.495 0 .97-.2 1.322-.55l5.321-5.322c.351-.35.55-.827.55-1.322V7.213c0-.495-.199-.97-.55-1.321L14.094.57Zm4.62 12.217a.62.62 0 0 1-.184.441l-5.318 5.322a.619.619 0 0 1-.44.183H7.193a.62.62 0 0 1-.44-.183L1.43 13.232a.62.62 0 0 1-.183-.44v-5.58a.62.62 0 0 1 .183-.44L6.749 1.45a.62.62 0 0 1 .44-.183h5.58a.62.62 0 0 1 .44.183l5.321 5.322a.62.62 0 0 1 .183.44v5.575Zm-5.369.909.331-.332a.475.475 0 0 0 0-.662L10.975 10l2.701-2.702a.468.468 0 0 0 0-.663l-.331-.331a.468.468 0 0 0-.663 0L9.981 9.006 7.279 6.304a.468.468 0 0 0-.663 0l-.331.331a.468.468 0 0 0 0 .663L8.986 10l-2.701 2.702a.468.468 0 0 0 0 .662l.331.332c.183.183.48.183.663 0l2.702-2.702 2.701 2.702c.184.183.48.183.663 0Z",
     fill: "currentColor"
   }));
-};
+});
 IconTimesOctagon.displayName = 'IconTimesOctagon';
 var _excluded$1K = ["testId"];
-var IconTimes = function IconTimes(_ref) {
+var IconTimes = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-times' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1K);
@@ -3356,20 +3247,19 @@ var IconTimes = function IconTimes(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m19.457 18.143-8.135-8.145 8.135-8.175a.312.312 0 0 0 0-.442l-.884-.884a.312.312 0 0 0-.442 0L9.996 8.672 1.86.497a.312.312 0 0 0-.441 0l-.884.884a.312.312 0 0 0 0 .442L8.67 9.998.534 18.143a.312.312 0 0 0 0 .442l.884.884c.122.122.32.122.441 0l8.137-8.145 8.135 8.145c.122.122.32.122.442 0l.884-.884a.312.312 0 0 0 0-.442Z",
     fill: "currentColor"
   }));
-};
+});
 IconTimes.displayName = 'IconTimes';
 var _excluded$1L = ["testId"];
-var IconTrash = function IconTrash(_ref) {
+var IconTrash = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-trash' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1L);
@@ -3379,20 +3269,19 @@ var IconTrash = function IconTrash(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "m13.063.75 1.312 1.75h3.438c.519 0 .937.418.937.938v.078a.235.235 0 0 1-.234.234H17.5v14.375c0 1.035-.84 1.875-1.875 1.875H4.375A1.875 1.875 0 0 1 2.5 18.125V3.75H1.484a.235.235 0 0 1-.234-.234v-.079c0-.519.418-.937.938-.937h3.437L6.938.75c.355-.473.91-.75 1.5-.75h3.124c.59 0 1.145.277 1.5.75Zm-1.5.5H8.437a.629.629 0 0 0-.5.25l-.75 1h5.625l-.75-1a.63.63 0 0 0-.5-.25Zm4.687 16.875a.627.627 0 0 1-.625.625H4.375a.627.627 0 0 1-.625-.625V3.75h12.5v14.375ZM9.375 6.094v10.312c0 .258.21.469.469.469h.312a.47.47 0 0 0 .469-.469V6.094a.47.47 0 0 0-.469-.469h-.312a.47.47 0 0 0-.469.469ZM6.25 16.406V6.094a.47.47 0 0 1 .469-.469h.312a.47.47 0 0 1 .469.469v10.312a.47.47 0 0 1-.469.469H6.72a.47.47 0 0 1-.469-.469ZM12.5 6.094v10.312c0 .258.21.469.469.469h.312a.47.47 0 0 0 .469-.469V6.094a.47.47 0 0 0-.469-.469h-.312a.47.47 0 0 0-.469.469Z",
     fill: "currentColor"
   }));
-};
+});
 IconTrash.displayName = 'IconTrash';
 var _excluded$1M = ["testId"];
-var IconUnderline = function IconUnderline(_ref) {
+var IconUnderline = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-underline' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1M);
@@ -3402,18 +3291,17 @@ var IconUnderline = function IconUnderline(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconUnderline.displayName = 'IconUnderline';
 var _excluded$1N = ["testId"];
-var IconUndo = function IconUndo(_ref) {
+var IconUndo = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-undo' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1N);
@@ -3423,18 +3311,17 @@ var IconUndo = function IconUndo(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconUndo.displayName = 'IconUndo';
 var _excluded$1O = ["testId"];
-var IconUniversity = function IconUniversity(_ref) {
+var IconUniversity = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-university' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1O);
@@ -3444,7 +3331,8 @@ var IconUniversity = function IconUniversity(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-university_svg__a)"
   }, React__default.createElement("path", {
@@ -3456,13 +3344,11 @@ var IconUniversity = function IconUniversity(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconUniversity.displayName = 'IconUniversity';
 var _excluded$1P = ["testId"];
-var IconUserComputer = function IconUserComputer(_ref) {
+var IconUserComputer = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-computer' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1P);
@@ -3472,7 +3358,8 @@ var IconUserComputer = function IconUserComputer(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
@@ -3488,13 +3375,11 @@ var IconUserComputer = function IconUserComputer(_ref) {
     fill: "currentColor",
     d: "M12.083 13.307h1.042v2.702h-1.042z"
   }));
-};
+});
 IconUserComputer.displayName = 'IconUserComputer';
 var _excluded$1Q = ["testId"];
-var IconUserFriends = function IconUserFriends(_ref) {
+var IconUserFriends = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-friends' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1Q);
@@ -3504,18 +3389,17 @@ var IconUserFriends = function IconUserFriends(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconUserFriends.displayName = 'IconUserFriends';
 var _excluded$1R = ["testId"];
-var IconUserLight = function IconUserLight(_ref) {
+var IconUserLight = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-light' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1R);
@@ -3525,20 +3409,19 @@ var IconUserLight = function IconUserLight(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 10a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm2.203 1.505c.426-.135.806-.255 1.297-.255a5.251 5.251 0 0 1 5.25 5.25v1.625c0 1.035-.84 1.875-1.875 1.875H3.125a1.875 1.875 0 0 1-1.875-1.875V16.5a5.251 5.251 0 0 1 5.25-5.25c.494 0 .874.12 1.3.255.546.173 1.168.37 2.2.37 1.033 0 1.656-.197 2.203-.37Zm4.672 7.245a.627.627 0 0 0 .625-.625V16.5c0-2.207-1.793-4-4-4-.294 0-.588.092-.95.206-.581.182-1.337.419-2.55.419-1.215 0-1.971-.237-2.551-.42-.362-.113-.655-.205-.949-.205-2.207 0-4 1.793-4 4v1.625c0 .344.281.625.625.625h13.75ZM13.75 5A3.756 3.756 0 0 0 10 1.25 3.756 3.756 0 0 0 6.25 5 3.756 3.756 0 0 0 10 8.75 3.756 3.756 0 0 0 13.75 5Z",
     fill: "currentColor"
   }));
-};
+});
 IconUserLight.displayName = 'IconUserLight';
 var _excluded$1S = ["testId"];
-var IconUserPlus = function IconUserPlus(_ref) {
+var IconUserPlus = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-plus' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1S);
@@ -3548,18 +3431,17 @@ var IconUserPlus = function IconUserPlus(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconUserPlus.displayName = 'IconUserPlus';
 var _excluded$1T = ["testId"];
-var IconUserSlash = function IconUserSlash(_ref) {
+var IconUserSlash = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-slash' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1T);
@@ -3569,7 +3451,8 @@ var IconUserSlash = function IconUserSlash(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("g", {
     clipPath: "url(#icon-user-slash_svg__a)"
   }, React__default.createElement("path", {
@@ -3581,13 +3464,11 @@ var IconUserSlash = function IconUserSlash(_ref) {
     fill: "#fff",
     d: "M0 0h20v20H0z"
   }))));
-};
+});
 IconUserSlash.displayName = 'IconUserSlash';
 var _excluded$1U = ["testId"];
-var IconUserSolid = function IconUserSolid(_ref) {
+var IconUserSolid = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-solid' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1U);
@@ -3597,18 +3478,17 @@ var IconUserSolid = function IconUserSolid(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconUserSolid.displayName = 'IconUserSolid';
 var _excluded$1V = ["testId"];
-var IconUserTag = function IconUserTag(_ref) {
+var IconUserTag = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-tag' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1V);
@@ -3618,20 +3498,19 @@ var IconUserTag = function IconUserTag(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, props), React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.18 2c1.363 0 2.467 1.128 2.467 2.519v2.833l3.131 2.664a.638.638 0 0 1 0 .968l-3.13 2.664v2.833c0 1.391-1.105 2.519-2.467 2.519H2.466C1.104 19 0 17.872 0 16.481V4.52C0 3.128 1.104 2 2.466 2h11.715Zm-3.082 5.667c0 1.39-1.104 2.518-2.466 2.518S6.166 9.058 6.166 7.667c0-1.391 1.104-2.519 2.466-2.519s2.466 1.128 2.466 2.519Zm-1.38 3.276c.21-.068.398-.128.64-.128 1.43 0 2.59 1.184 2.59 2.644v.819a.935.935 0 0 1-.925.944H5.241a.935.935 0 0 1-.925-.944v-.819c0-1.46 1.16-2.644 2.59-2.644.243 0 .43.06.64.128.27.088.577.187 1.086.187.51 0 .817-.1 1.086-.187Z",
     fill: "currentColor"
   }));
-};
+});
 IconUserTag.displayName = 'IconUserTag';
 var _excluded$1W = ["testId"];
-var IconUserTie = function IconUserTie(_ref) {
+var IconUserTie = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-user-tie' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1W);
@@ -3641,18 +3520,17 @@ var IconUserTie = function IconUserTie(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconUserTie.displayName = 'IconUserTie';
 var _excluded$1X = ["testId"];
-var IconUsers = function IconUsers(_ref) {
+var IconUsers = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-users' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1X);
@@ -3662,18 +3540,17 @@ var IconUsers = function IconUsers(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconUsers.displayName = 'IconUsers';
 var _excluded$1Y = ["testId"];
-var IconVideo = function IconVideo(_ref) {
+var IconVideo = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-video' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1Y);
@@ -3683,18 +3560,17 @@ var IconVideo = function IconVideo(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconVideo.displayName = 'IconVideo';
 var _excluded$1Z = ["testId"];
-var IconVolumeMute = function IconVolumeMute(_ref) {
+var IconVolumeMute = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-volume-mute' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1Z);
@@ -3704,18 +3580,17 @@ var IconVolumeMute = function IconVolumeMute(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconVolumeMute.displayName = 'IconVolumeMute';
 var _excluded$1_ = ["testId"];
-var IconVolume = function IconVolume(_ref) {
+var IconVolume = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-volume' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1_);
@@ -3725,18 +3600,17 @@ var IconVolume = function IconVolume(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconVolume.displayName = 'IconVolume';
 var _excluded$1$ = ["testId"];
-var IconWrench = function IconWrench(_ref) {
+var IconWrench = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'icon-wrench' : _ref$testId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1$);
@@ -3746,13 +3620,13 @@ var IconWrench = function IconWrench(_ref) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: getIconStyles(props),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, 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"
   }));
-};
+});
 IconWrench.displayName = 'IconWrench';
 var styles$6 = {"pagination-controls":"_1IynL"};
@@ -4871,7 +4745,7 @@ var updateButtonProps = function updateButtonProps(button, newProps) {
   }
   return React__default.cloneElement(button, _extends({
-    wide: true
+    size: BUTTON_SIZES.MIN_WIDTH_100
   }, newProps));
 };
@@ -5179,10 +5053,12 @@ var styles$n = {"error-message":"_nZ2MD"};
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
-      children = _ref.children;
+      children = _ref.children,
+      testId = _ref.testId;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$n['error-message']
+    className: styles$n['error-message'],
+    "data-testid": testId
   }, React__default.createElement(Inline, {
     space: 8,
     alignItems: "center"
@@ -5743,7 +5619,152 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
-var styles$t = {"form--standard-size":"_3CaV0"};
+var styles$t = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
+var SegmentedControl = function SegmentedControl(_ref) {
+  var options = _ref.options,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      testId = _ref.testId;
+  var isSelected = function isSelected(option) {
+    return option === value;
+  };
+  var isLastElement = function isLastElement(index) {
+    return index === options.length - 1;
+  };
+  return React__default.createElement("div", {
+    className: styles$t['segmented-control'],
+    "data-testid": testId
+  }, options.map(function (option, i) {
+    var _classnames;
+    return React__default.createElement(React__default.Fragment, {
+      key: option
+    }, React__default.createElement("button", {
+      onClick: function onClick() {
+        return onChange(option);
+      },
+      className: classnames(styles$t['segmented-control__button'], (_classnames = {}, _classnames[styles$t['segmented-control__button--selected']] = isSelected(option), _classnames))
+    }, option), !isLastElement(i) && React__default.createElement("div", {
+      className: classnames(styles$t['segmented-control__divider'])
+    }));
+  }));
+};
+var styles$u = {"form--standard-size":"_3CaV0"};
+var styles$v = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
+var Card = function Card(_ref) {
+  var _classnames, _classnames2;
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      actions = _ref.actions,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: classnames(styles$v['card'])
+  }, onClick ? React__default.createElement("button", {
+    className: classnames(styles$v['card__body'], styles$v['card__body--interactive'], (_classnames = {}, _classnames[styles$v['card__body--focus']] = isSelected, _classnames[styles$v['card__body--with-kebab']] = actions, _classnames)),
+    "data-testid": testId,
+    tabIndex: 0,
+    onClick: onClick
+  }, children) : React__default.createElement("div", {
+    className: classnames(styles$v['card__body'], (_classnames2 = {}, _classnames2[styles$v['card__body--focus']] = isSelected, _classnames2[styles$v['card__body--with-kebab']] = actions, _classnames2)),
+    "data-testid": testId
+  }, children), actions && React__default.createElement("div", {
+    className: classnames(styles$v['card__kebab'])
+  }, React__default.createElement(KebabMenu, {
+    actions: actions
+  })));
+};
+var styles$w = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
+var FormSection = function FormSection(_ref) {
+  var _classnames;
+  var children = _ref.children,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      _ref$noMargin = _ref.noMargin,
+      noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: classnames(styles$w['form-section'], (_classnames = {}, _classnames[styles$w['form-section--no-margin']] = noMargin, _classnames)),
+    "data-testid": testId
+  }, React__default.createElement(Stack, null, React__default.createElement(Stack, {
+    space: 8
+  }, title && React__default.createElement("h2", {
+    className: classnames(styles$w['form-section__title'])
+  }, title), subtitle && React__default.createElement("h3", {
+    className: classnames(styles$w['form-section__subtitle'])
+  }, subtitle)), children));
+};
+var updateButtonProps$1 = function updateButtonProps(child, newProps) {
+  if (!child) {
+    return null;
+  }
+  if (child.type !== Button$1) {
+    return child;
+  }
+  return React__default.cloneElement(child, _extends({
+    size: child.props.size || BUTTON_SIZES.MIN_WIDTH_100
+  }, newProps, child.props));
+};
+var styles$x = {"form-footer":"_3vVBF"};
+var FormFooterActions = function FormFooterActions(_ref) {
+  var _actions$primary, _actions$secondary, _actions$tertiary;
+  var actions = _ref.actions;
+  var primaryButton = updateButtonProps$1(actions.primary, {
+    theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || BUTTON_THEMES.PRIMARY
+  });
+  var secondaryButton = updateButtonProps$1(actions.secondary, {
+    theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || BUTTON_THEMES.DEFAULT
+  });
+  var tertiaryButton = updateButtonProps$1(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) || BUTTON_THEMES.LINK_PRIMARY
+  });
+  return React__default.createElement(Inline, {
+    justifyContent: "space-between"
+  }, React__default.createElement(Inline, {
+    space: 12
+  }, primaryButton, secondaryButton), tertiaryButton);
+};
+var FormFooter = function FormFooter(_ref) {
+  var children = _ref.children,
+      actions = _ref.actions,
+      testId = _ref.testId;
+  var formattedChildren = React__default.Children.map(children, function (child) {
+    if (React__default.isValidElement(child)) {
+      return updateButtonProps$1(child);
+    }
+    return child;
+  });
+  var isInlineChildren = React__default.Children.count(children) === 1 && React__default.isValidElement(children) && children.type === Inline;
+  return React__default.createElement("div", {
+    className: classnames(styles$x['form-footer']),
+    "data-testid": testId
+  }, actions && React__default.createElement(FormFooterActions, {
+    actions: actions
+  }), children && React__default.createElement(Inline, {
+    space: 12,
+    flex: isInlineChildren ? ['1'] : []
+  }, formattedChildren));
+};
 var Form = function Form(_ref) {
   var _classnames;
@@ -5763,18 +5784,27 @@ var Form = function Form(_ref) {
     onSubmit && onSubmit(e.currentTarget.elements);
   };
+  var formattedChildren = React__default.Children.map(children, function (child, index) {
+    if (children && children[index + 1] && React__default.isValidElement(child) && children[index + 1].type === FormFooter && child.type === FormSection) {
+      return React__default.cloneElement(child, _extends({
+        noMargin: true
+      }, child.props));
+    }
+    return child;
+  });
   return React__default.createElement(Context$2.Provider, {
     value: {
       formik: formik
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$t['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$u['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
-  }, stackContent ? React__default.createElement(Stack, null, children) : children));
+  }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
-var styles$u = {"form-row":"_2i-Ll"};
+var styles$y = {"form-row":"_2i-Ll"};
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -5805,7 +5835,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$u['form-row']
+    extraClass: styles$y['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -5814,7 +5844,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
-var styles$v = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$z = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = React.useRef(null);
@@ -5890,7 +5920,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$v['text-field'], (_classnames = {}, _classnames[styles$v['text-field--invalid']] = hasError, _classnames[styles$v['text-field--disabled']] = disabled, _classnames[styles$v['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$z['text-field'], (_classnames = {}, _classnames[styles$z['text-field--invalid']] = hasError, _classnames[styles$z['text-field--disabled']] = disabled, _classnames[styles$z['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -5922,7 +5952,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$v['text-field__toolbar'],
+    className: styles$z['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -6071,7 +6101,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
-var styles$w = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$A = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -6101,7 +6131,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$w['check-box-field']
+    className: styles$A['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -6114,12 +6144,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$w['check-box-field__custom-input']
+    className: styles$A['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$w['check-box-field__caption']
+    className: styles$A['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -6127,7 +6157,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
-var styles$x = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$B = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -6219,7 +6249,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$x['pill-select-field']
+      className: styles$B['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -6241,7 +6271,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$x['pill-select-field__custom-input']
+      className: styles$B['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -6289,9 +6319,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
-var styles$y = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
+var styles$C = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
-var styles$z = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
+var styles$D = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var value = _ref.value,
@@ -6306,7 +6336,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$z['radio-group-box-option']
+    className: styles$D['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -6317,7 +6347,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("div", {
-    className: styles$z['radio-group-box-option__box']
+    className: styles$D['radio-group-box-option__box']
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -6326,13 +6356,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: styles$z['radio-group-box-option__label']
+    className: styles$D['radio-group-box-option__label']
   }, label), caption && React__default.createElement(Caption, {
     fieldId: id
   }, caption)))));
 };
-var styles$A = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$E = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -6351,7 +6381,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$A['radio-group-option']
+    className: styles$E['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -6362,11 +6392,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$A['radio-group-option__custom-input']
+    className: styles$E['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$A['radio-group-option__caption']
+    className: styles$E['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -6501,7 +6531,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$y['radio-group-field__label']
+    className: styles$C['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -6514,9 +6544,9 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
-var styles$B = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$F = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
-var styles$C = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$G = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -6524,7 +6554,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$C['password-criteria'], (_classnames = {}, _classnames[styles$C['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$G['password-criteria'], (_classnames = {}, _classnames[styles$G['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -6609,11 +6639,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$B['password-container']
+    className: styles$F['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$B['text-field'], (_classnames = {}, _classnames[styles$B['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$F['text-field'], (_classnames = {}, _classnames[styles$F['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId || "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -6625,7 +6655,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$B['password-toggle'],
+    className: styles$F['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": "password-toggle",
@@ -6884,7 +6914,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
-var styles$D = {"custom-control":"_1cDCR"};
+var styles$H = {"custom-control":"_1cDCR"};
 var _excluded$23 = ["children"];
@@ -6897,7 +6927,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$D['custom-control'],
+    className: styles$H['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6910,7 +6940,7 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
-var styles$E = {"custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
+var styles$I = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
 var _excluded$24 = ["children"];
@@ -6970,15 +7000,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(Select.components.Menu, Object.assign({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$E['custom-menu-hr']
+    className: styles$I['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
-    className: styles$E['custom-menu-div']
+    className: styles$I['custom-menu-div']
   }, React__default.createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: textFieldStyles['text-field'],
+    className: classnames(textFieldStyles['text-field'], styles$I['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -7129,7 +7159,7 @@ var SelectField = function SelectField(props) {
   }, React__default.createElement(Select__default, Object.assign({}, selectProps))));
 };
-var styles$F = {"custom-list":"_uC4zU"};
+var styles$J = {"custom-list":"_uC4zU"};
 var _excluded$25 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
@@ -7148,7 +7178,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(Select.components.MenuList, Object.assign({}, props), React__default.createElement(React.Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$F['custom-list']
+    className: styles$J['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
@@ -7504,7 +7534,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
-var styles$G = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
+var styles$K = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -7542,7 +7572,7 @@ var FromDate = function FromDate(_ref) {
   }
   var dayPickerProps = {
-    classNames: styles$G,
+    classNames: styles$K,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -7569,7 +7599,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$G,
+    classNames: styles$K,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -7642,7 +7672,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
   var dayPickerProps = {
-    classNames: styles$G,
+    classNames: styles$K,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -7661,7 +7691,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$G,
+    classNames: styles$K,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -7746,7 +7776,7 @@ 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$G['date-range-field'], (_classnames = {}, _classnames[styles$G['date-range-field--invalid']] = hasError, _classnames[styles$G['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$K['date-range-field'], (_classnames = {}, _classnames[styles$K['date-range-field--invalid']] = hasError, _classnames[styles$K['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -8097,6 +8127,16 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 var PercentageField = React.forwardRef(PercentageElement);
+var FormFeedback = function FormFeedback(_ref) {
+  var children = _ref.children,
+      fieldId = _ref.fieldId,
+      testId = _ref.testId;
+  return React__default.createElement(ErrorMessage, {
+    fieldId: fieldId,
+    testId: testId
+  }, children);
+};
 var BANNER_THEME = {
   INFO: 'info',
   WARNING: 'warning',
@@ -8109,7 +8149,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
-var styles$H = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
+var styles$L = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
 var ButtonCTA = function ButtonCTA(_ref) {
   var button = _ref.button,
@@ -8132,7 +8172,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
-var styles$I = {"banner__caption":"_1jqm8"};
+var styles$M = {"banner__caption":"_1jqm8"};
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -8164,7 +8204,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$I['banner__caption']
+    className: styles$M['banner__caption']
   }, caption));
 };
@@ -8207,13 +8247,13 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$H['banner'], (_classnames = {}, _classnames[styles$H['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$H['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$H['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$H['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$H['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$H['banner--single-line']] = !multiLine, _classnames))
+    className: classnames(styles$L['banner'], (_classnames = {}, _classnames[styles$L['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$L['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$L['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$L['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$L['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$L['banner--single-line']] = !multiLine, _classnames))
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$H['banner__icon']
+    className: styles$L['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -8224,9 +8264,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$H['banner__title']
+    className: styles$L['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$H['banner__body'], (_classnames2 = {}, _classnames2[styles$H['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$L['banner__body'], (_classnames2 = {}, _classnames2[styles$L['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -8234,7 +8274,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$H['banner__close']
+    className: styles$L['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -8242,41 +8282,13 @@ var InlineBanner = function InlineBanner(_ref) {
   }, React__default.createElement(IconTimes, null)))));
 };
-var styles$J = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
-var Card = function Card(_ref) {
-  var _classnames, _classnames2;
-  var children = _ref.children,
-      onClick = _ref.onClick,
-      _ref$isSelected = _ref.isSelected,
-      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-      actions = _ref.actions,
-      testId = _ref.testId;
-  return React__default.createElement("div", {
-    className: classnames(styles$J['card'])
-  }, onClick ? React__default.createElement("button", {
-    className: classnames(styles$J['card__body'], styles$J['card__body--interactive'], (_classnames = {}, _classnames[styles$J['card__body--focus']] = isSelected, _classnames[styles$J['card__body--with-kebab']] = actions, _classnames)),
-    "data-testid": testId,
-    tabIndex: 0,
-    onClick: onClick
-  }, children) : React__default.createElement("div", {
-    className: classnames(styles$J['card__body'], (_classnames2 = {}, _classnames2[styles$J['card__body--focus']] = isSelected, _classnames2[styles$J['card__body--with-kebab']] = actions, _classnames2)),
-    "data-testid": testId
-  }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$J['card__kebab'])
-  }, React__default.createElement(KebabMenu, {
-    actions: actions
-  })));
-};
 var PERSISTENT_BANNER_THEME = {
   UPSELL: 'upsell',
   INFO: 'info',
   DANGER: 'danger'
 };
-var styles$K = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+var styles$N = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -8305,7 +8317,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
   return React__default.createElement("div", {
-    className: classnames(styles$K['persistent-banner'], (_classNames = {}, _classNames[styles$K['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$K['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$K['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    className: classnames(styles$N['persistent-banner'], (_classNames = {}, _classNames[styles$N['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$N['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$N['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
     flex: [1],
@@ -8316,7 +8328,137 @@ var PersistentBanner = function PersistentBanner(_ref) {
   }, React__default.createElement(IconTimes, null))) : React__default.createElement(BannerContent, null));
 };
-var styles$L = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var getProgressMetric = function getProgressMetric(progress, maxValue) {
+  var updatedMaxValue = maxValue > 0 ? maxValue : 100;
+  var updatedProgress = progress;
+  if (updatedProgress > updatedMaxValue) {
+    updatedProgress = updatedMaxValue;
+  }
+  if (updatedProgress < 0) {
+    updatedProgress = 0;
+  }
+  return {
+    progress: updatedProgress,
+    maxValue: updatedMaxValue
+  };
+};
+var getProgressMetricWithSteps = function getProgressMetricWithSteps(progress, amountOfSteps) {
+  var maxValue = amountOfSteps * 2;
+  var actualProgress = progress;
+  if (progress < 0) {
+    actualProgress = 0;
+  }
+  if (progress > 0) {
+    var previousProgress = (progress - 1) * 2;
+    actualProgress = previousProgress + 1;
+  }
+  if (actualProgress > maxValue) {
+    actualProgress = maxValue;
+  }
+  return {
+    progress: actualProgress,
+    maxValue: maxValue
+  };
+};
+var useProgress = function useProgress(progress, maxValue, getMetric) {
+  if (getMetric === void 0) {
+    getMetric = getProgressMetric;
+  }
+  var metric = getMetric(progress, maxValue);
+  var percentage = metric.progress / metric.maxValue * 100;
+  var elementProps = {
+    'aria-valuemax': metric.maxValue,
+    'aria-valuemin': 0,
+    'aria-valuenow': metric.progress,
+    role: 'progressbar'
+  };
+  return {
+    elementProps: elementProps,
+    metric: _extends({}, metric, {
+      percentage: percentage
+    })
+  };
+};
+var styles$O = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
+var CircularProgress = function CircularProgress(_ref) {
+  var progress = _ref.progress,
+      _ref$maxValue = _ref.maxValue,
+      maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
+      children = _ref.children,
+      testId = _ref.testId;
+  var _useProgress = useProgress(progress, maxValue),
+      elementProps = _useProgress.elementProps,
+      metric = _useProgress.metric;
+  var determinant = metric.percentage * 2.79;
+  return React__default.createElement("div", Object.assign({}, elementProps, {
+    className: styles$O['circular-progress'],
+    "data-testid": testId
+  }), React__default.createElement("svg", {
+    viewBox: "0 0 100 100"
+  }, React__default.createElement("circle", {
+    cx: 50,
+    cy: 50,
+    r: 45,
+    strokeWidth: "10px",
+    className: styles$O['circular-progress__track']
+  }), React__default.createElement("circle", {
+    cx: 50,
+    cy: 50,
+    r: 45,
+    strokeWidth: "10px",
+    className: styles$O['circular-progress__indicator'],
+    strokeDashoffset: "66",
+    strokeDasharray: determinant + " " + (279 - determinant)
+  })), React__default.createElement("div", {
+    className: styles$O['circular-progress__label']
+  }, children || metric.progress + "/" + metric.maxValue));
+};
+var styles$P = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
+var ProgressBar = function ProgressBar(_ref) {
+  var progress = _ref.progress,
+      maxValue = _ref.maxValue,
+      testId = _ref.testId,
+      steps = _ref.steps;
+  var isUsingStepsAsMaxValue = !maxValue && steps && steps.length > 0;
+  var inferedMaxValue = !maxValue && steps && steps.length > 0 ? steps.length : maxValue;
+  var _useProgress = useProgress(progress, inferedMaxValue || 100, isUsingStepsAsMaxValue ? getProgressMetricWithSteps : getProgressMetric),
+      elementProps = _useProgress.elementProps,
+      metric = _useProgress.metric;
+  return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
+    className: styles$P['progress-bar'],
+    "data-testid": testId
+  }), React__default.createElement("div", {
+    className: styles$P['progress-bar__indicator'],
+    style: {
+      width: metric.percentage + "%"
+    }
+  })), steps && steps.length > 0 && React__default.createElement("div", {
+    className: styles$P['progress-bar__steps']
+  }, steps.map(function (step) {
+    return React__default.createElement("div", {
+      key: step
+    }, step);
+  })));
+};
+var styles$Q = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 var _excluded$2a = ["children", "theme", "title", "testId"];
@@ -8332,7 +8474,7 @@ var Badge = function Badge(_ref, forwardedRef) {
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
   React.useLayoutEffect(function () {
-    if (typeof ref !== 'function' && ref.current && React__default.isValidElement(children) && typeof (children === null || children === void 0 ? void 0 : children.type) === 'function') {
+    if (typeof ref !== 'function' && ref.current && React__default.isValidElement(children) && typeof (children === null || children === void 0 ? void 0 : children.type) !== 'string' && typeof (children === null || children === void 0 ? void 0 : children.type) !== 'number') {
       ref.current.style.height = ref.current.offsetWidth + 'px';
     }
   });
@@ -8340,7 +8482,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$L['badge'], (_classnames = {}, _classnames[styles$L['badge--success']] = theme === 'success', _classnames[styles$L['badge--danger']] = theme === 'danger', _classnames[styles$L['badge--info']] = theme === 'info', _classnames[styles$L['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$Q['badge'], (_classnames = {}, _classnames[styles$Q['badge--success']] = theme === 'success', _classnames[styles$Q['badge--danger']] = theme === 'danger', _classnames[styles$Q['badge--info']] = theme === 'info', _classnames[styles$Q['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -8348,9 +8490,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 var Badge$1 = React.forwardRef(Badge);
-var styles$M = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$R = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
-var styles$N = {"avatar-image":"_GKL9P"};
+var styles$S = {"avatar-image":"_GKL9P"};
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -8375,7 +8517,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
   return React__default.createElement("div", {
-    className: styles$N['avatar-image']
+    className: styles$S['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -8444,7 +8586,7 @@ var Avatar = function Avatar(_ref) {
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$M['avatar'], (_classnames = {}, _classnames[styles$M['avatar--small']] = size === 'small', _classnames[styles$M['avatar--medium']] = size === 'medium', _classnames[styles$M['avatar--large']] = size === 'large', _classnames[styles$M['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$R['avatar'], (_classnames = {}, _classnames[styles$R['avatar--small']] = size === 'small', _classnames[styles$R['avatar--medium']] = size === 'medium', _classnames[styles$R['avatar--large']] = size === 'large', _classnames[styles$R['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -8457,7 +8599,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$M['avatar__badge']
+    className: styles$R['avatar__badge']
   }, badge));
 };
@@ -8470,7 +8612,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
-var styles$O = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$T = {"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;
@@ -8481,11 +8623,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$O['chip'], (_classnames = {}, _classnames[styles$O['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$O['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$O['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$O['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$O['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$O['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$T['chip'], (_classnames = {}, _classnames[styles$T['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$T['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$T['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$T['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$T['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$T['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
-var styles$P = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$U = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 var PILL_THEME = {
   INFO: 'info',
@@ -8504,7 +8646,7 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$P['pill'], (_classnames = {}, _classnames[styles$P['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$P['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$P['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$P['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$P['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$U['pill'], (_classnames = {}, _classnames[styles$U['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$U['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$U['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$U['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$U['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
@@ -8516,6 +8658,7 @@ exports.Calendar = Calendar;
 exports.Card = Card;
 exports.CheckboxField = CheckboxField;
 exports.Chip = Chip;
+exports.CircularProgress = CircularProgress;
 exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
@@ -8525,7 +8668,10 @@ exports.DateField = DateField;
 exports.DateFilter = DateFilter;
 exports.DateRangeField = DateRangeField;
 exports.Form = Form;
+exports.FormFeedback = FormFeedback;
+exports.FormFooter = FormFooter;
 exports.FormRow = FormRow;
+exports.FormSection = FormSection;
 exports.IconAnalytics = IconAnalytics;
 exports.IconArrowDown = IconArrowDown;
 exports.IconArrowLeft = IconArrowLeft;
@@ -8665,6 +8811,7 @@ exports.PercentageField = PercentageField;
 exports.PersistentBanner = PersistentBanner;
 exports.Pill = Pill;
 exports.PillSelectField = PillSelectField;
+exports.ProgressBar = ProgressBar;
 exports.RadioGroupField = RadioGroupField;
 exports.RadioGroupOption = RadioGroupOption;
 exports.ResourceTable = ResourceTable;
@@ -8674,6 +8821,7 @@ exports.SIZE_33_PERCENT = SIZE_33_PERCENT;
 exports.SIZE_50_PERCENT = SIZE_50_PERCENT;
 exports.SIZE_66_PERCENT = SIZE_66_PERCENT;
 exports.SIZE_75_PERCENT = SIZE_75_PERCENT;
+exports.SegmentedControl = SegmentedControl;
 exports.SelectField = SelectField;
 exports.SousChefProvider = SousChefProvider;
 exports.Spinner = Spinner;