@blateral/b.kit 2.8.4 → 3.0.1

package/esm/{Filter-19220970.js → ButtonLeft-a9a132f5.js}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useId } from 'react';
 import styled from 'styled-components';
 
 /******************************************************************************
@@ -199,10 +199,10 @@ function __makeTemplateObject(cooked, raw) {
   return cooked;
 }
 
-var SVG$Y = styled.svg.withConfig({
+var SVG$$ = styled.svg.withConfig({
   displayName: "CalendarToday__SVG",
   componentId: "sc-gyzva2-0"
-})(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var CalendarToday = function (_a) {
   var _b = _a.iconColor,
@@ -210,7 +210,7 @@ var CalendarToday = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$Y, {
+  return React.createElement(SVG$$, {
     viewBox: "0 0 20 22",
     width: "20",
     height: "22",
@@ -223,12 +223,12 @@ var CalendarToday = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$Y;
+var templateObject_1$$;
 
-var SVG$X = styled.svg.withConfig({
+var SVG$_ = styled.svg.withConfig({
   displayName: "DateRange__SVG",
   componentId: "sc-1uddtlm-0"
-})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var DateRange = function (_a) {
   var _b = _a.iconColor,
@@ -236,7 +236,7 @@ var DateRange = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$X, {
+  return React.createElement(SVG$_, {
     viewBox: "0 0 18 20",
     width: "18",
     height: "20",
@@ -249,12 +249,12 @@ var DateRange = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$X;
+var templateObject_1$_;
 
-var SVG$W = styled.svg.withConfig({
+var SVG$Z = styled.svg.withConfig({
   displayName: "ArrowUp__SVG",
   componentId: "sc-3bd7jq-0"
-})(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ArrowUp = function (_a) {
   var _b = _a.iconColor,
@@ -262,7 +262,7 @@ var ArrowUp = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$W, {
+  return React.createElement(SVG$Z, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -275,12 +275,12 @@ var ArrowUp = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$W;
+var templateObject_1$Z;
 
-var SVG$V = styled.svg.withConfig({
+var SVG$Y = styled.svg.withConfig({
   displayName: "ArrowDown__SVG",
   componentId: "sc-51nj23-0"
-})(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ArrowDown = function (_a) {
   var _b = _a.iconColor,
@@ -288,7 +288,7 @@ var ArrowDown = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$V, {
+  return React.createElement(SVG$Y, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -301,12 +301,12 @@ var ArrowDown = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$V;
+var templateObject_1$Y;
 
-var SVG$U = styled.svg.withConfig({
+var SVG$X = styled.svg.withConfig({
   displayName: "ArrowRight__SVG",
   componentId: "sc-hksqct-0"
-})(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ArrowRight = function (_a) {
   var _b = _a.iconColor,
@@ -314,7 +314,7 @@ var ArrowRight = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$U, {
+  return React.createElement(SVG$X, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -327,12 +327,12 @@ var ArrowRight = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$U;
+var templateObject_1$X;
 
-var SVG$T = styled.svg.withConfig({
+var SVG$W = styled.svg.withConfig({
   displayName: "ArrowRightGhost__SVG",
   componentId: "sc-1vnb87a-0"
-})(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ArrowRightGhost = function (_a) {
   var _b = _a.iconColor,
@@ -340,7 +340,7 @@ var ArrowRightGhost = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$T, {
+  return React.createElement(SVG$W, {
     width: "58",
     height: "58",
     viewBox: "0 0 24 24",
@@ -352,12 +352,12 @@ var ArrowRightGhost = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$T;
+var templateObject_1$W;
 
-var SVG$S = styled.svg.withConfig({
+var SVG$V = styled.svg.withConfig({
   displayName: "ArrowLeft__SVG",
   componentId: "sc-fpisoc-0"
-})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ArrowLeft = function (_a) {
   var _b = _a.iconColor,
@@ -365,7 +365,7 @@ var ArrowLeft = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$S, {
+  return React.createElement(SVG$V, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -378,12 +378,12 @@ var ArrowLeft = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$S;
+var templateObject_1$V;
 
-var SVG$R = styled.svg.withConfig({
+var SVG$U = styled.svg.withConfig({
   displayName: "ArrowLeftGhost__SVG",
   componentId: "sc-6amvbf-0"
-})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ArrowLeftGhost = function (_a) {
   var _b = _a.iconColor,
@@ -391,7 +391,7 @@ var ArrowLeftGhost = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$R, {
+  return React.createElement(SVG$U, {
     width: "58",
     height: "58",
     viewBox: "0 0 24 24",
@@ -403,12 +403,12 @@ var ArrowLeftGhost = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$R;
+var templateObject_1$U;
 
-var SVG$Q = styled.svg.withConfig({
+var SVG$T = styled.svg.withConfig({
   displayName: "ArrowLeftRight__SVG",
   componentId: "sc-khgxp-0"
-})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ArrowLeftRight = function (_a) {
   var _b = _a.iconColor,
@@ -416,7 +416,7 @@ var ArrowLeftRight = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$Q, {
+  return React.createElement(SVG$T, {
     width: "25",
     height: "24",
     viewBox: "0 0 25 24",
@@ -434,12 +434,12 @@ var ArrowLeftRight = function (_a) {
     fill: iconColor
   })));
 };
-var templateObject_1$Q;
+var templateObject_1$T;
 
-var SVG$P = styled.svg.withConfig({
+var SVG$S = styled.svg.withConfig({
   displayName: "AngleUp__SVG",
   componentId: "sc-1d69j7j-0"
-})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var AngleUp = function (_a) {
   var _b = _a.iconColor,
@@ -447,7 +447,7 @@ var AngleUp = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$P, {
+  return React.createElement(SVG$S, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -460,12 +460,12 @@ var AngleUp = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$P;
+var templateObject_1$S;
 
-var SVG$O = styled.svg.withConfig({
+var SVG$R = styled.svg.withConfig({
   displayName: "AngleDown__SVG",
   componentId: "sc-1ijlld0-0"
-})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var AngleDown = function (_a) {
   var _b = _a.iconColor,
@@ -473,7 +473,7 @@ var AngleDown = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$O, {
+  return React.createElement(SVG$R, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -486,12 +486,12 @@ var AngleDown = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$O;
+var templateObject_1$R;
 
-var SVG$N = styled.svg.withConfig({
+var SVG$Q = styled.svg.withConfig({
   displayName: "AngleLeft__SVG",
   componentId: "sc-19ifty2-0"
-})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var AngleLeft = function (_a) {
   var _b = _a.iconColor,
@@ -499,7 +499,7 @@ var AngleLeft = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$N, {
+  return React.createElement(SVG$Q, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -512,12 +512,12 @@ var AngleLeft = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$N;
+var templateObject_1$Q;
 
-var SVG$M = styled.svg.withConfig({
+var SVG$P = styled.svg.withConfig({
   displayName: "AngleRight__SVG",
   componentId: "sc-x3dg9i-0"
-})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var AngleRight = function (_a) {
   var _b = _a.iconColor,
@@ -525,7 +525,7 @@ var AngleRight = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$M, {
+  return React.createElement(SVG$P, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -538,12 +538,12 @@ var AngleRight = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$M;
+var templateObject_1$P;
 
-var SVG$L = styled.svg.withConfig({
+var SVG$O = styled.svg.withConfig({
   displayName: "UnfoldMore__SVG",
   componentId: "sc-a9d3-0"
-})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var UnfoldMore = function (_a) {
   var _b = _a.iconColor,
@@ -551,7 +551,7 @@ var UnfoldMore = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$L, {
+  return React.createElement(SVG$O, {
     viewBox: "0 0 10 18",
     xmlns: "http://www.w3.org/2000/svg",
     width: "10",
@@ -564,12 +564,12 @@ var UnfoldMore = function (_a) {
     d: "M5 2.83 8.17 6l1.41-1.41L5 0 .41 4.59 1.83 6 5 2.83Zm0 12.34L1.83 12 .42 13.41 5 18l4.59-4.59L8.17 12 5 15.17Z"
   }));
 };
-var templateObject_1$L;
+var templateObject_1$O;
 
-var SVG$K = styled.svg.withConfig({
+var SVG$N = styled.svg.withConfig({
   displayName: "UploadFile__SVG",
   componentId: "sc-vmteuf-0"
-})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var UploadFile = function (_a) {
   var _b = _a.iconColor,
@@ -577,7 +577,7 @@ var UploadFile = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$K, {
+  return React.createElement(SVG$N, {
     viewBox: "0 0 16 20",
     width: "16",
     height: "20",
@@ -590,12 +590,12 @@ var UploadFile = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$K;
+var templateObject_1$N;
 
-var SVG$J = styled.svg.withConfig({
+var SVG$M = styled.svg.withConfig({
   displayName: "Excel__SVG",
   componentId: "sc-crc04g-0"
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Excel = function (_a) {
   var className = _a.className,
@@ -603,7 +603,7 @@ var Excel = function (_a) {
       iconColor = _b === void 0 ? 'currentColor' : _b,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$J, {
+  return React.createElement(SVG$M, {
     viewBox: "0 0 21 24",
     className: className,
     width: "21",
@@ -623,12 +623,12 @@ var Excel = function (_a) {
     d: "M0 0h20.571v24H0z"
   }))));
 };
-var templateObject_1$J;
+var templateObject_1$M;
 
-var SVG$I = styled.svg.withConfig({
+var SVG$L = styled.svg.withConfig({
   displayName: "Image__SVG",
   componentId: "sc-1yemy7l-0"
-})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Image = function (_a) {
   var className = _a.className,
@@ -636,7 +636,7 @@ var Image = function (_a) {
       iconColor = _b === void 0 ? 'currentColor' : _b,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$I, {
+  return React.createElement(SVG$L, {
     viewBox: "0 0 21 24",
     className: className,
     width: "21",
@@ -656,12 +656,12 @@ var Image = function (_a) {
     d: "M0 0h20.571v24H0z"
   }))));
 };
-var templateObject_1$I;
+var templateObject_1$L;
 
-var SVG$H = styled.svg.withConfig({
+var SVG$K = styled.svg.withConfig({
   displayName: "Pdf__SVG",
   componentId: "sc-l6fosk-0"
-})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Pdf = function (_a) {
   var className = _a.className,
@@ -669,7 +669,7 @@ var Pdf = function (_a) {
       iconColor = _b === void 0 ? 'currentColor' : _b,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$H, {
+  return React.createElement(SVG$K, {
     viewBox: "0 0 21 24",
     className: className,
     width: "21",
@@ -689,12 +689,12 @@ var Pdf = function (_a) {
     d: "M0 0h20.571v24H0z"
   }))));
 };
-var templateObject_1$H;
+var templateObject_1$K;
 
-var SVG$G = styled.svg.withConfig({
+var SVG$J = styled.svg.withConfig({
   displayName: "PowerPoint__SVG",
   componentId: "sc-1r9trf2-0"
-})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var PowerPoint = function (_a) {
   var className = _a.className,
@@ -702,7 +702,7 @@ var PowerPoint = function (_a) {
       iconColor = _b === void 0 ? 'currentColor' : _b,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$G, {
+  return React.createElement(SVG$J, {
     viewBox: "0 0 21 24",
     className: className,
     width: "21",
@@ -722,12 +722,12 @@ var PowerPoint = function (_a) {
     d: "M0 0h20.571v24H0z"
   }))));
 };
-var templateObject_1$G;
+var templateObject_1$J;
 
-var SVG$F = styled.svg.withConfig({
+var SVG$I = styled.svg.withConfig({
   displayName: "Word__SVG",
   componentId: "sc-ip0os5-0"
-})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Word = function (_a) {
   var className = _a.className,
@@ -735,7 +735,7 @@ var Word = function (_a) {
       iconColor = _b === void 0 ? 'currentColor' : _b,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$F, {
+  return React.createElement(SVG$I, {
     viewBox: "0 0 21 24",
     className: className,
     width: "21",
@@ -755,12 +755,12 @@ var Word = function (_a) {
     d: "M0 0h20.571v24H0z"
   }))));
 };
-var templateObject_1$F;
+var templateObject_1$I;
 
-var SVG$E = styled.svg.withConfig({
+var SVG$H = styled.svg.withConfig({
   displayName: "Zip__SVG",
   componentId: "sc-1ra0auw-0"
-})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Zip = function (_a) {
   var className = _a.className,
@@ -768,7 +768,7 @@ var Zip = function (_a) {
       iconColor = _b === void 0 ? 'currentColor' : _b,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$E, {
+  return React.createElement(SVG$H, {
     viewBox: "0 0 21 24",
     className: className,
     width: "21",
@@ -788,12 +788,12 @@ var Zip = function (_a) {
     d: "M0 0h20.571v24H0z"
   }))));
 };
-var templateObject_1$E;
+var templateObject_1$H;
 
-var SVG$D = styled.svg.withConfig({
+var SVG$G = styled.svg.withConfig({
   displayName: "External__SVG",
   componentId: "sc-5p5vys-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var External = function (_a) {
   var _b = _a.iconColor,
@@ -801,7 +801,7 @@ var External = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$D, {
+  return React.createElement(SVG$G, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -814,12 +814,12 @@ var External = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$D;
+var templateObject_1$G;
 
-var SVG$C = styled.svg.withConfig({
+var SVG$F = styled.svg.withConfig({
   displayName: "BoxArrowUpRight__SVG",
   componentId: "sc-lhf0hy-0"
-})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var BoxArrowUpRight = function (_a) {
   var _b = _a.iconColor,
@@ -827,7 +827,7 @@ var BoxArrowUpRight = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$C, {
+  return React.createElement(SVG$F, {
     viewBox: "0 0 14 16",
     width: "21",
     height: "24",
@@ -847,12 +847,12 @@ var BoxArrowUpRight = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$C;
+var templateObject_1$F;
 
-var SVG$B = styled.svg.withConfig({
+var SVG$E = styled.svg.withConfig({
   displayName: "Facebook__SVG",
   componentId: "sc-fdec8a-0"
-})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Facebook = function (_a) {
   var _b = _a.iconColor,
@@ -860,7 +860,7 @@ var Facebook = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$B, {
+  return React.createElement(SVG$E, {
     width: "30",
     height: "30",
     viewBox: "0 0 30 30",
@@ -875,12 +875,12 @@ var Facebook = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$B;
+var templateObject_1$E;
 
-var SVG$A = styled.svg.withConfig({
+var SVG$D = styled.svg.withConfig({
   displayName: "Instagram__SVG",
   componentId: "sc-16vefo4-0"
-})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Instagram = function (_a) {
   var _b = _a.iconColor,
@@ -888,7 +888,7 @@ var Instagram = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$A, {
+  return React.createElement(SVG$D, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -911,12 +911,12 @@ var Instagram = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$A;
+var templateObject_1$D;
 
-var SVG$z = styled.svg.withConfig({
+var SVG$C = styled.svg.withConfig({
   displayName: "LinkedIn__SVG",
   componentId: "sc-9saevw-0"
-})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var LinkedIn = function (_a) {
   var _b = _a.iconColor,
@@ -924,7 +924,7 @@ var LinkedIn = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$z, {
+  return React.createElement(SVG$C, {
     width: "30",
     height: "30",
     viewBox: "0 0 30 30",
@@ -939,12 +939,12 @@ var LinkedIn = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$z;
+var templateObject_1$C;
 
-var SVG$y = styled.svg.withConfig({
+var SVG$B = styled.svg.withConfig({
   displayName: "Twitter__SVG",
   componentId: "sc-13x28li-0"
-})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Twitter = function (_a) {
   var _b = _a.iconColor,
@@ -952,7 +952,7 @@ var Twitter = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$y, {
+  return React.createElement(SVG$B, {
     width: "30",
     height: "30",
     viewBox: "0 0 30 30",
@@ -967,12 +967,12 @@ var Twitter = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$y;
+var templateObject_1$B;
 
-var SVG$x = styled.svg.withConfig({
+var SVG$A = styled.svg.withConfig({
   displayName: "Xing__SVG",
   componentId: "sc-fc5524-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Xing = function (_a) {
   var _b = _a.iconColor,
@@ -980,7 +980,7 @@ var Xing = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$x, {
+  return React.createElement(SVG$A, {
     width: "30",
     height: "30",
     viewBox: "0 0 30 30",
@@ -995,12 +995,12 @@ var Xing = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$x;
+var templateObject_1$A;
 
-var SVG$w = styled.svg.withConfig({
+var SVG$z = styled.svg.withConfig({
   displayName: "Youtube__SVG",
   componentId: "sc-16z7w9u-0"
-})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Youtube = function (_a) {
   var _b = _a.iconColor,
@@ -1008,7 +1008,7 @@ var Youtube = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$w, {
+  return React.createElement(SVG$z, {
     width: "43",
     height: "30",
     viewBox: "0 0 43 30",
@@ -1022,12 +1022,12 @@ var Youtube = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$w;
+var templateObject_1$z;
 
-var SVG$v = styled.svg.withConfig({
+var SVG$y = styled.svg.withConfig({
   displayName: "Mail__SVG",
   componentId: "sc-l72fpd-0"
-})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Mail = function (_a) {
   var _b = _a.iconColor,
@@ -1035,7 +1035,7 @@ var Mail = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React__default.createElement(SVG$v, {
+  return React__default.createElement(SVG$y, {
     viewBox: "0 0 20 16",
     width: "21",
     height: "24",
@@ -1048,12 +1048,12 @@ var Mail = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$v;
+var templateObject_1$y;
 
-var SVG$u = styled.svg.withConfig({
+var SVG$x = styled.svg.withConfig({
   displayName: "Phone__SVG",
   componentId: "sc-vk8yww-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Phone = function (_a) {
   var _b = _a.iconColor,
@@ -1061,7 +1061,7 @@ var Phone = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$u, {
+  return React.createElement(SVG$x, {
     viewBox: "0 0 18 18",
     width: "18",
     height: "18",
@@ -1074,12 +1074,12 @@ var Phone = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$u;
+var templateObject_1$x;
 
-var SVG$t = styled.svg.withConfig({
+var SVG$w = styled.svg.withConfig({
   displayName: "Play__SVG",
   componentId: "sc-svc0jx-0"
-})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Play = function (_a) {
   var _b = _a.iconColor,
@@ -1087,7 +1087,7 @@ var Play = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$t, {
+  return React.createElement(SVG$w, {
     viewBox: "0 0 80 80",
     width: "80",
     height: "80",
@@ -1103,12 +1103,12 @@ var Play = function (_a) {
     fill: "#fff"
   })));
 };
-var templateObject_1$t;
+var templateObject_1$w;
 
-var SVG$s = styled.svg.withConfig({
+var SVG$v = styled.svg.withConfig({
   displayName: "MenuBurger__SVG",
   componentId: "sc-srqv4f-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var MenuBurger = function (_a) {
   var _b = _a.iconColor,
@@ -1116,7 +1116,7 @@ var MenuBurger = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$s, {
+  return React.createElement(SVG$v, {
     width: "30",
     height: "30",
     viewBox: "0 0 24 24",
@@ -1129,12 +1129,12 @@ var MenuBurger = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$s;
+var templateObject_1$v;
 
-var SVG$r = styled.svg.withConfig({
+var SVG$u = styled.svg.withConfig({
   displayName: "Language__SVG",
   componentId: "sc-18ub5by-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var LanguageIcon = function (_a) {
   var _b = _a.iconColor,
@@ -1142,7 +1142,7 @@ var LanguageIcon = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$r, {
+  return React.createElement(SVG$u, {
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -1155,12 +1155,12 @@ var LanguageIcon = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$r;
+var templateObject_1$u;
 
-var SVG$q = styled.svg.withConfig({
+var SVG$t = styled.svg.withConfig({
   displayName: "Cross__SVG",
   componentId: "sc-767nfw-0"
-})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Cross = function (_a) {
   var _b = _a.iconColor,
@@ -1172,7 +1172,7 @@ var Cross = function (_a) {
       _e = _a.height,
       height = _e === void 0 ? 40 : _e,
       className = _a.className;
-  return React.createElement(SVG$q, {
+  return React.createElement(SVG$t, {
     width: width,
     height: height,
     viewBox: "0 0 24 24",
@@ -1185,12 +1185,12 @@ var Cross = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$q;
+var templateObject_1$t;
 
-var SVG$p = styled.svg.withConfig({
+var SVG$s = styled.svg.withConfig({
   displayName: "CrossSmall__SVG",
   componentId: "sc-ql3gq5-0"
-})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var CrossSmall = function (_a) {
   var _b = _a.iconColor,
@@ -1198,7 +1198,7 @@ var CrossSmall = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$p, {
+  return React.createElement(SVG$s, {
     width: "15",
     height: "15",
     viewBox: "0 0 24 24",
@@ -1211,12 +1211,51 @@ var CrossSmall = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$p;
+var templateObject_1$s;
 
-var SVG$o = styled.svg.withConfig({
+var SVG$r = styled.svg.withConfig({
+  displayName: "CircleX__SVG",
+  componentId: "sc-p09n0z-0"
+})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+
+var CircleX = function (_a) {
+  var _b = _a.iconColor,
+      iconColor = _b === void 0 ? 'currentColor' : _b,
+      _c = _a.ariaHidden,
+      ariaHidden = _c === void 0 ? true : _c,
+      _d = _a.width,
+      width = _d === void 0 ? 40 : _d,
+      _e = _a.height,
+      height = _e === void 0 ? 40 : _e,
+      className = _a.className;
+  return React.createElement(SVG$r, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: iconColor,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": ariaHidden,
+    className: className
+  }, React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), React.createElement("path", {
+    d: "m15 9-6 6"
+  }), React.createElement("path", {
+    d: "m9 9 6 6"
+  }));
+};
+var templateObject_1$r;
+
+var SVG$q = styled.svg.withConfig({
   displayName: "Check__SVG",
   componentId: "sc-1eshtow-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Check = function (_a) {
   var _b = _a.iconColor,
@@ -1224,7 +1263,7 @@ var Check = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$o, {
+  return React.createElement(SVG$q, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -1236,12 +1275,12 @@ var Check = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$o;
+var templateObject_1$q;
 
-var SVG$n = styled.svg.withConfig({
+var SVG$p = styled.svg.withConfig({
   displayName: "Clock__SVG",
   componentId: "sc-qfdxh2-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Clock = function (_a) {
   var _b = _a.iconColor,
@@ -1249,7 +1288,7 @@ var Clock = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$n, {
+  return React.createElement(SVG$p, {
     width: "24",
     height: "24",
     fill: "none",
@@ -1265,12 +1304,12 @@ var Clock = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$n;
+var templateObject_1$p;
 
-var SVG$m = styled.svg.withConfig({
+var SVG$o = styled.svg.withConfig({
   displayName: "Info__SVG",
   componentId: "sc-ufn29a-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Info = function (_a) {
   var _b = _a.iconColor,
@@ -1278,7 +1317,7 @@ var Info = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$m, {
+  return React.createElement(SVG$o, {
     viewBox: "0 0 24 24",
     width: "24",
     height: "24",
@@ -1291,12 +1330,12 @@ var Info = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$m;
+var templateObject_1$o;
 
-var SVG$l = styled.svg.withConfig({
+var SVG$n = styled.svg.withConfig({
   displayName: "FlyTo__SVG",
   componentId: "sc-8fhjzq-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var FlyTo = function (_a) {
   var _b = _a.iconColor,
@@ -1304,7 +1343,7 @@ var FlyTo = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$l, {
+  return React.createElement(SVG$n, {
     width: "52",
     height: "52",
     viewBox: "0 0 52 52",
@@ -1317,12 +1356,12 @@ var FlyTo = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$l;
+var templateObject_1$n;
 
-var SVG$k = styled.svg.withConfig({
+var SVG$m = styled.svg.withConfig({
   displayName: "LocationPin__SVG",
   componentId: "sc-1jaynh8-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var LocationPin = function (_a) {
   var _b = _a.iconColor,
@@ -1330,7 +1369,7 @@ var LocationPin = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$k, {
+  return React.createElement(SVG$m, {
     viewBox: "0 0 24 24",
     width: "24",
     height: "24",
@@ -1343,12 +1382,12 @@ var LocationPin = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$k;
+var templateObject_1$m;
 
-var SVG$j = styled.svg.withConfig({
+var SVG$l = styled.svg.withConfig({
   displayName: "Place__SVG",
   componentId: "sc-1smw98o-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Place = function (_a) {
   var _b = _a.ariaHidden,
@@ -1356,7 +1395,7 @@ var Place = function (_a) {
       _c = _a.iconColor,
       iconColor = _c === void 0 ? 'currentColor' : _c,
       className = _a.className;
-  return React.createElement(SVG$j, {
+  return React.createElement(SVG$l, {
     viewBox: "0 0 16 20",
     width: "16",
     height: "20",
@@ -1369,12 +1408,12 @@ var Place = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$j;
+var templateObject_1$l;
 
-var SVG$i = styled.svg.withConfig({
+var SVG$k = styled.svg.withConfig({
   displayName: "MyLocation__SVG",
   componentId: "sc-1iysrje-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var MyLocation = function (_a) {
   var _b = _a.iconColor,
@@ -1382,7 +1421,7 @@ var MyLocation = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$i, {
+  return React.createElement(SVG$k, {
     viewBox: "0 0 22 22",
     width: "22",
     height: "22",
@@ -1395,12 +1434,12 @@ var MyLocation = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$i;
+var templateObject_1$k;
 
-var SVG$h = styled.svg.withConfig({
+var SVG$j = styled.svg.withConfig({
   displayName: "Map__SVG",
   componentId: "sc-ivinw8-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Map = function (_a) {
   var _b = _a.ariaHidden,
@@ -1408,7 +1447,7 @@ var Map = function (_a) {
       _c = _a.iconColor,
       iconColor = _c === void 0 ? 'currentColor' : _c,
       className = _a.className;
-  return React.createElement(SVG$h, {
+  return React.createElement(SVG$j, {
     viewBox: "0 0 18 18",
     width: "18",
     height: "18",
@@ -1421,12 +1460,12 @@ var Map = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$h;
+var templateObject_1$j;
 
-var SVG$g = styled.svg.withConfig({
+var SVG$i = styled.svg.withConfig({
   displayName: "Money__SVG",
   componentId: "sc-pfju9o-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Money = function (_a) {
   var _b = _a.ariaHidden,
@@ -1434,7 +1473,7 @@ var Money = function (_a) {
       _c = _a.iconColor,
       iconColor = _c === void 0 ? 'currentColor' : _c,
       className = _a.className;
-  return React.createElement(SVG$g, {
+  return React.createElement(SVG$i, {
     viewBox: "0 0 20 16",
     width: "20",
     height: "16",
@@ -1447,12 +1486,12 @@ var Money = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$g;
+var templateObject_1$i;
 
-var SVG$f = styled.svg.withConfig({
+var SVG$h = styled.svg.withConfig({
   displayName: "Computer__SVG",
   componentId: "sc-1e7tp0i-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Computer = function (_a) {
   var _b = _a.iconColor,
@@ -1460,7 +1499,7 @@ var Computer = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$f, {
+  return React.createElement(SVG$h, {
     viewBox: "0 0 24 16",
     width: "24",
     height: "16",
@@ -1473,12 +1512,12 @@ var Computer = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$f;
+var templateObject_1$h;
 
-var SVG$e = styled.svg.withConfig({
+var SVG$g = styled.svg.withConfig({
   displayName: "Route__SVG",
   componentId: "sc-3gutvf-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Route = function (_a) {
   var _b = _a.iconColor,
@@ -1486,7 +1525,7 @@ var Route = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$e, {
+  return React.createElement(SVG$g, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -1499,12 +1538,12 @@ var Route = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$e;
+var templateObject_1$g;
 
-var SVG$d = styled.svg.withConfig({
+var SVG$f = styled.svg.withConfig({
   displayName: "Star__SVG",
   componentId: "sc-1t91fci-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Star = function (_a) {
   var _b = _a.iconColor,
@@ -1512,7 +1551,7 @@ var Star = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$d, {
+  return React.createElement(SVG$f, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -1525,12 +1564,12 @@ var Star = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$d;
+var templateObject_1$f;
 
-var SVG$c = styled.svg.withConfig({
+var SVG$e = styled.svg.withConfig({
   displayName: "Plus__SVG",
   componentId: "sc-1tnyr90-0"
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Plus = function (_a) {
   var _b = _a.iconColor,
@@ -1538,7 +1577,7 @@ var Plus = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$c, {
+  return React.createElement(SVG$e, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -1551,12 +1590,12 @@ var Plus = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$c;
+var templateObject_1$e;
 
-var SVG$b = styled.svg.withConfig({
+var SVG$d = styled.svg.withConfig({
   displayName: "Minus__SVG",
   componentId: "sc-13tpns1-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Minus = function (_a) {
   var _b = _a.iconColor,
@@ -1564,7 +1603,7 @@ var Minus = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$b, {
+  return React.createElement(SVG$d, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -1577,12 +1616,12 @@ var Minus = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$b;
+var templateObject_1$d;
 
-var SVG$a = styled.svg.withConfig({
+var SVG$c = styled.svg.withConfig({
   displayName: "DeleteForever__SVG",
   componentId: "sc-gv2rto-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var DeleteForever = function (_a) {
   var _b = _a.iconColor,
@@ -1590,7 +1629,7 @@ var DeleteForever = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$a, {
+  return React.createElement(SVG$c, {
     viewBox: "0 0 14 18",
     width: "14",
     height: "18",
@@ -1603,12 +1642,12 @@ var DeleteForever = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$a;
+var templateObject_1$c;
 
-var SVG$9 = styled.svg.withConfig({
+var SVG$b = styled.svg.withConfig({
   displayName: "Person__SVG",
   componentId: "sc-fw4r6j-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Person = function (_a) {
   var _b = _a.ariaHidden,
@@ -1616,7 +1655,7 @@ var Person = function (_a) {
       _c = _a.iconColor,
       iconColor = _c === void 0 ? 'currentColor' : _c,
       className = _a.className;
-  return React.createElement(SVG$9, {
+  return React.createElement(SVG$b, {
     viewBox: "0 0 16 16",
     width: "16",
     height: "16",
@@ -1629,12 +1668,12 @@ var Person = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$9;
+var templateObject_1$b;
 
-var SVG$8 = styled.svg.withConfig({
+var SVG$a = styled.svg.withConfig({
   displayName: "Category__SVG",
   componentId: "sc-171ovx3-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Category = function (_a) {
   var _b = _a.ariaHidden,
@@ -1642,7 +1681,7 @@ var Category = function (_a) {
       _c = _a.iconColor,
       iconColor = _c === void 0 ? 'currentColor' : _c,
       className = _a.className;
-  return React.createElement(SVG$8, {
+  return React.createElement(SVG$a, {
     viewBox: "0 0 19 20",
     width: "19",
     height: "20",
@@ -1655,12 +1694,12 @@ var Category = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$8;
+var templateObject_1$a;
 
-var SVG$7 = styled.svg.withConfig({
+var SVG$9 = styled.svg.withConfig({
   displayName: "CurrentLocation__SVG",
   componentId: "sc-xy1kii-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var CurrentLocation = function (_a) {
   var _b = _a.iconColor,
@@ -1668,7 +1707,7 @@ var CurrentLocation = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$7, {
+  return React.createElement(SVG$9, {
     viewBox: "0 0 24 24",
     width: "24",
     height: "24",
@@ -1687,12 +1726,12 @@ var CurrentLocation = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$7;
+var templateObject_1$9;
 
-var SVG$6 = styled.svg.withConfig({
+var SVG$8 = styled.svg.withConfig({
   displayName: "ToggleOn__SVG",
   componentId: "sc-1jki89v-0"
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ToggleOn = function (_a) {
   var _b = _a.iconColor,
@@ -1700,7 +1739,7 @@ var ToggleOn = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$6, {
+  return React.createElement(SVG$8, {
     viewBox: "0 0 22 12",
     width: "22",
     height: "12",
@@ -1713,12 +1752,12 @@ var ToggleOn = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$6;
+var templateObject_1$8;
 
-var SVG$5 = styled.svg.withConfig({
+var SVG$7 = styled.svg.withConfig({
   displayName: "ToggleOff__SVG",
   componentId: "sc-1ygj02g-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ToggleOff = function (_a) {
   var _b = _a.iconColor,
@@ -1726,7 +1765,7 @@ var ToggleOff = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$5, {
+  return React.createElement(SVG$7, {
     viewBox: "0 0 22 12",
     width: "22",
     height: "12",
@@ -1739,12 +1778,12 @@ var ToggleOff = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$5;
+var templateObject_1$7;
 
-var SVG$4 = styled.svg.withConfig({
+var SVG$6 = styled.svg.withConfig({
   displayName: "LocationSearch__SVG",
   componentId: "sc-1o98abw-0"
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var LocationSearch = function (_a) {
   var _b = _a.iconColor,
@@ -1752,7 +1791,7 @@ var LocationSearch = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$4, {
+  return React.createElement(SVG$6, {
     viewBox: "0 0 24 24",
     width: "24",
     height: "24",
@@ -1765,12 +1804,12 @@ var LocationSearch = function (_a) {
     fill: iconColor
   })));
 };
-var templateObject_1$4;
+var templateObject_1$6;
 
-var SVG$3 = styled.svg.withConfig({
+var SVG$5 = styled.svg.withConfig({
   displayName: "ClockFilled__SVG",
   componentId: "sc-1i51tgl-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var ClockFilled = function (_a) {
   var _b = _a.iconColor,
@@ -1778,7 +1817,7 @@ var ClockFilled = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG$3, {
+  return React.createElement(SVG$5, {
     viewBox: "0 0 28 28",
     width: "28",
     height: "28",
@@ -1791,12 +1830,12 @@ var ClockFilled = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$3;
+var templateObject_1$5;
 
-var SVG$2 = styled.svg.withConfig({
+var SVG$4 = styled.svg.withConfig({
   displayName: "Magnifier__SVG",
   componentId: "sc-1i44xjf-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Magnifier = function (_a) {
   var _b = _a.iconColor,
@@ -1808,7 +1847,7 @@ var Magnifier = function (_a) {
       className = _a.className,
       _e = _a.ariaHidden,
       ariaHidden = _e === void 0 ? true : _e;
-  return React.createElement(SVG$2, {
+  return React.createElement(SVG$4, {
     viewBox: "0 0 18 18",
     width: width,
     height: height,
@@ -1821,12 +1860,12 @@ var Magnifier = function (_a) {
     fill: iconColor
   }));
 };
-var templateObject_1$2;
+var templateObject_1$4;
 
-var SVG$1 = styled.svg.withConfig({
+var SVG$3 = styled.svg.withConfig({
   displayName: "CrossBubble__SVG",
   componentId: "sc-aw6xut-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var CrossBubble = function (_a) {
   var _b = _a.iconColor,
@@ -1834,7 +1873,7 @@ var CrossBubble = function (_a) {
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c,
       className = _a.className;
-  return React.createElement(SVG$1, {
+  return React.createElement(SVG$3, {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
@@ -1847,12 +1886,12 @@ var CrossBubble = function (_a) {
     d: "M10 0c5.53 0 10 4.47 10 10s-4.47 10-10 10S0 15.53 0 10 4.47 0 10 0Zm3.59 5L10 8.59 6.41 5 5 6.41 8.59 10 5 13.59 6.41 15 10 11.41 13.59 15 15 13.59 11.41 10 15 6.41 13.59 5Z"
   }));
 };
-var templateObject_1$1;
+var templateObject_1$3;
 
-var SVG = styled.svg.withConfig({
+var SVG$2 = styled.svg.withConfig({
   displayName: "Filter__SVG",
   componentId: "sc-noawe1-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 
 var Filter = function (_a) {
   var _b = _a.iconColor,
@@ -1860,7 +1899,7 @@ var Filter = function (_a) {
       className = _a.className,
       _c = _a.ariaHidden,
       ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG, {
+  return React.createElement(SVG$2, {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -1873,7 +1912,84 @@ var Filter = function (_a) {
     fill: iconColor
   }));
 };
+var templateObject_1$2;
+
+var SVG$1 = styled.svg.withConfig({
+  displayName: "ButtonRight__SVG",
+  componentId: "sc-ibg8un-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+
+var ButtonRight = function (_a) {
+  var className = _a.className,
+      _b = _a.ariaHidden,
+      ariaHidden = _b === void 0 ? true : _b;
+  var id = useId();
+  return React__default.createElement(SVG$1, {
+    width: "48",
+    height: "48",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className,
+    "aria-hidden": ariaHidden
+  }, React__default.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "24",
+    fill: "#000",
+    fillOpacity: ".4"
+  }), React__default.createElement("g", {
+    clipPath: "url(#button-right-path-".concat(id, ")")
+  }, React__default.createElement("path", {
+    d: "m18.49 32.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L26.62 24l-8.13 8.13Z",
+    fill: "#fff"
+  })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
+    id: "button-right-path-".concat(id)
+  }, React__default.createElement("path", {
+    fill: "#fff",
+    d: "M12 12h24v24H12z"
+  }))));
+};
+var templateObject_1$1;
+
+var SVG = styled.svg.withConfig({
+  displayName: "ButtonLeft__SVG",
+  componentId: "sc-1k7dd0m-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+
+var ButtonLeft = function (_a) {
+  var className = _a.className,
+      _b = _a.ariaHidden,
+      ariaHidden = _b === void 0 ? true : _b;
+  var id = useId();
+  return React__default.createElement(SVG, {
+    width: "48",
+    height: "48",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className,
+    "aria-hidden": ariaHidden
+  }, React__default.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "24",
+    transform: "rotate(-180 24 24)",
+    fill: "#000",
+    fillOpacity: ".4"
+  }), React__default.createElement("g", {
+    clipPath: "url(#button-left-path-".concat(id, ")")
+  }, React__default.createElement("path", {
+    d: "m29.51 15.87-1.77-1.77-9.9 9.9 9.9 9.9 1.77-1.77L21.38 24l8.13-8.13Z",
+    fill: "#fff"
+  })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
+    id: "button-left-path-".concat(id)
+  }, React__default.createElement("path", {
+    fill: "#fff",
+    d: "M36 36H12V12h24z"
+  }))));
+};
 var templateObject_1;
 
-export { MyLocation as $, AngleRight as A, BoxArrowUpRight as B, Check as C, DateRange as D, Excel as E, Facebook as F, Instagram as G, LinkedIn as H, Image as I, Twitter as J, Play as K, LocationPin as L, Mail as M, MenuBurger as N, CrossSmall as O, Phone as P, Clock as Q, Info as R, FlyTo as S, ToggleOn as T, UnfoldMore as U, Place as V, Word as W, Xing as X, Youtube as Y, Zip as Z, __assign as _, __makeTemplateObject as a, Map as a0, Money as a1, Computer as a2, Route as a3, Star as a4, Plus as a5, Minus as a6, Person as a7, Category as a8, CurrentLocation as a9, ClockFilled as aa, CrossBubble as ab, Filter as ac, Pdf as b, PowerPoint as c, __rest as d, __spreadArray as e, Cross as f, AngleDown as g, Magnifier as h, AngleUp as i, CalendarToday as j, __awaiter as k, __generator as l, DeleteForever as m, UploadFile as n, ToggleOff as o, LocationSearch as p, LanguageIcon as q, AngleLeft as r, ArrowUp as s, ArrowDown as t, ArrowRight as u, ArrowRightGhost as v, ArrowLeft as w, ArrowLeftGhost as x, ArrowLeftRight as y, External as z };
-//# sourceMappingURL=Filter-19220970.js.map
+export { Info as $, AngleRight as A, BoxArrowUpRight as B, Check as C, DateRange as D, Excel as E, ArrowLeftRight as F, External as G, Facebook as H, Image as I, Instagram as J, LinkedIn as K, LocationPin as L, Mail as M, Twitter as N, Play as O, Phone as P, MenuBurger as Q, CrossSmall as R, CircleX as S, ToggleOn as T, UnfoldMore as U, Clock as V, Word as W, Xing as X, Youtube as Y, Zip as Z, __assign as _, __makeTemplateObject as a, FlyTo as a0, Place as a1, MyLocation as a2, Map as a3, Money as a4, Computer as a5, Route as a6, Star as a7, Plus as a8, Minus as a9, Person as aa, Category as ab, CurrentLocation as ac, ClockFilled as ad, CrossBubble as ae, Filter as af, Pdf as b, PowerPoint as c, __rest as d, __spreadArray as e, ButtonLeft as f, ButtonRight as g, Cross as h, AngleDown as i, Magnifier as j, AngleUp as k, CalendarToday as l, __awaiter as m, __generator as n, DeleteForever as o, UploadFile as p, ToggleOff as q, LocationSearch as r, LanguageIcon as s, AngleLeft as t, ArrowUp as u, ArrowDown as v, ArrowRight as w, ArrowRightGhost as x, ArrowLeft as y, ArrowLeftGhost as z };
+//# sourceMappingURL=ButtonLeft-a9a132f5.js.map