@thairath/tr-design-system 0.2.5 → 0.2.7

package/dist/index.esm.js

@@ -78,13 +78,13 @@ function _toPropertyKey(t) {
   return "symbol" == typeof i ? i : i + "";
 }
 
-var _excluded$1v = ["width", "height"];
+var _excluded$1u = ["width", "height"];
 var HamburgerIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1v);
+    props = _objectWithoutProperties(_ref, _excluded$1u);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -112,13 +112,13 @@ var HamburgerIcon = _ref => {
   })));
 };
 
-var _excluded$1u = ["width", "height"];
+var _excluded$1t = ["width", "height"];
 var SearchIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1u);
+    props = _objectWithoutProperties(_ref, _excluded$1t);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -146,13 +146,13 @@ var SearchIcon = _ref => {
   })));
 };
 
-var _excluded$1t = ["width", "height"];
+var _excluded$1s = ["width", "height"];
 var UserIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1t);
+    props = _objectWithoutProperties(_ref, _excluded$1s);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -180,13 +180,13 @@ var UserIcon = _ref => {
   })));
 };
 
-var _excluded$1s = ["width", "height"];
+var _excluded$1r = ["width", "height"];
 var FacebookIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1s);
+    props = _objectWithoutProperties(_ref, _excluded$1r);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -202,13 +202,13 @@ var FacebookIcon = _ref => {
   }));
 };
 
-var _excluded$1r = ["width", "height"];
+var _excluded$1q = ["width", "height"];
 var SocilaXIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1r);
+    props = _objectWithoutProperties(_ref, _excluded$1q);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -220,13 +220,13 @@ var SocilaXIcon = _ref => {
   }));
 };
 
-var _excluded$1q = ["width", "height"];
+var _excluded$1p = ["width", "height"];
 var InstagramIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1q);
+    props = _objectWithoutProperties(_ref, _excluded$1p);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -250,13 +250,13 @@ var InstagramIcon = _ref => {
   }));
 };
 
-var _excluded$1p = ["width", "height"];
+var _excluded$1o = ["width", "height"];
 var YoutubeIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1p);
+    props = _objectWithoutProperties(_ref, _excluded$1o);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -274,13 +274,13 @@ var YoutubeIcon = _ref => {
   }));
 };
 
-var _excluded$1o = ["width", "height"];
+var _excluded$1n = ["width", "height"];
 var TiktokIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1o);
+    props = _objectWithoutProperties(_ref, _excluded$1n);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -292,13 +292,13 @@ var TiktokIcon = _ref => {
   }));
 };
 
-var _excluded$1n = ["width", "height"];
+var _excluded$1m = ["width", "height"];
 var MessagerIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1n);
+    props = _objectWithoutProperties(_ref, _excluded$1m);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -316,13 +316,13 @@ var MessagerIcon = _ref => {
   }));
 };
 
-var _excluded$1m = ["width", "height"];
+var _excluded$1l = ["width", "height"];
 var LineAppIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1m);
+    props = _objectWithoutProperties(_ref, _excluded$1l);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -340,13 +340,13 @@ var LineAppIcon = _ref => {
   }));
 };
 
-var _excluded$1l = ["width", "height"];
+var _excluded$1k = ["width", "height"];
 var GoogleIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1l);
+    props = _objectWithoutProperties(_ref, _excluded$1k);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -362,13 +362,13 @@ var GoogleIcon = _ref => {
   }));
 };
 
-var _excluded$1k = ["width", "height"];
+var _excluded$1j = ["width", "height"];
 var PublicIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1k);
+    props = _objectWithoutProperties(_ref, _excluded$1j);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -396,13 +396,13 @@ var PublicIcon = _ref => {
   })));
 };
 
-var _excluded$1j = ["width", "height"];
+var _excluded$1i = ["width", "height"];
 var FeedIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1j);
+    props = _objectWithoutProperties(_ref, _excluded$1i);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -430,13 +430,13 @@ var FeedIcon = _ref => {
   })));
 };
 
-var _excluded$1i = ["width", "height"];
+var _excluded$1h = ["width", "height"];
 var DesktopIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1i);
+    props = _objectWithoutProperties(_ref, _excluded$1h);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -464,13 +464,13 @@ var DesktopIcon = _ref => {
   })));
 };
 
-var _excluded$1h = ["width", "height"];
+var _excluded$1g = ["width", "height"];
 var DesktopFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1h);
+    props = _objectWithoutProperties(_ref, _excluded$1g);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -498,13 +498,13 @@ var DesktopFilledIcon = _ref => {
   })));
 };
 
-var _excluded$1g = ["width", "height"];
+var _excluded$1f = ["width", "height"];
 var TROAppIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1g);
+    props = _objectWithoutProperties(_ref, _excluded$1f);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -536,13 +536,13 @@ var TROAppIcon = _ref => {
   })));
 };
 
-var _excluded$1f = ["width", "height"];
+var _excluded$1e = ["width", "height"];
 var UserFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1f);
+    props = _objectWithoutProperties(_ref, _excluded$1e);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -570,13 +570,13 @@ var UserFilledIcon = _ref => {
   })));
 };
 
-var _excluded$1e = ["width", "height"];
+var _excluded$1d = ["width", "height"];
 var HomeIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1e);
+    props = _objectWithoutProperties(_ref, _excluded$1d);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -604,13 +604,13 @@ var HomeIcon = _ref => {
   })));
 };
 
-var _excluded$1d = ["width", "height"];
+var _excluded$1c = ["width", "height"];
 var HomeFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1d);
+    props = _objectWithoutProperties(_ref, _excluded$1c);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -638,13 +638,13 @@ var HomeFilledIcon = _ref => {
   })));
 };
 
-var _excluded$1c = ["width", "height"];
+var _excluded$1b = ["width", "height"];
 var LinkIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1c);
+    props = _objectWithoutProperties(_ref, _excluded$1b);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -672,13 +672,13 @@ var LinkIcon = _ref => {
   })));
 };
 
-var _excluded$1b = ["width", "height"];
+var _excluded$1a = ["width", "height"];
 var LogoutIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1b);
+    props = _objectWithoutProperties(_ref, _excluded$1a);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -706,13 +706,13 @@ var LogoutIcon = _ref => {
   })));
 };
 
-var _excluded$1a = ["width", "height"];
+var _excluded$19 = ["width", "height"];
 var BookmarkIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1a);
+    props = _objectWithoutProperties(_ref, _excluded$19);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -740,13 +740,13 @@ var BookmarkIcon = _ref => {
   })));
 };
 
-var _excluded$19 = ["width", "height"];
+var _excluded$18 = ["width", "height"];
 var BookmarkFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$19);
+    props = _objectWithoutProperties(_ref, _excluded$18);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -774,13 +774,13 @@ var BookmarkFilledIcon = _ref => {
   })));
 };
 
-var _excluded$18 = ["width", "height"];
+var _excluded$17 = ["width", "height"];
 var MailIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$18);
+    props = _objectWithoutProperties(_ref, _excluded$17);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -808,13 +808,13 @@ var MailIcon = _ref => {
   })));
 };
 
-var _excluded$17 = ["width", "height"];
+var _excluded$16 = ["width", "height"];
 var MailFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$17);
+    props = _objectWithoutProperties(_ref, _excluded$16);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -842,13 +842,13 @@ var MailFilledIcon = _ref => {
   })));
 };
 
-var _excluded$16 = ["width", "height"];
+var _excluded$15 = ["width", "height"];
 var CalendarIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$16);
+    props = _objectWithoutProperties(_ref, _excluded$15);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -876,13 +876,13 @@ var CalendarIcon = _ref => {
   })));
 };
 
-var _excluded$15 = ["width", "height"];
+var _excluded$14 = ["width", "height"];
 var CalendarFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$15);
+    props = _objectWithoutProperties(_ref, _excluded$14);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -910,13 +910,13 @@ var CalendarFilledIcon = _ref => {
   })));
 };
 
-var _excluded$14 = ["width", "height"];
+var _excluded$13 = ["width", "height"];
 var ShareIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$14);
+    props = _objectWithoutProperties(_ref, _excluded$13);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -944,13 +944,13 @@ var ShareIcon = _ref => {
   })));
 };
 
-var _excluded$13 = ["width", "height"];
+var _excluded$12 = ["width", "height"];
 var ShareFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$13);
+    props = _objectWithoutProperties(_ref, _excluded$12);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -978,13 +978,13 @@ var ShareFilledIcon = _ref => {
   })));
 };
 
-var _excluded$12 = ["width", "height"];
+var _excluded$11 = ["width", "height"];
 var BedtimeIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$12);
+    props = _objectWithoutProperties(_ref, _excluded$11);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1012,13 +1012,13 @@ var BedtimeIcon = _ref => {
   })));
 };
 
-var _excluded$11 = ["width", "height"];
+var _excluded$10 = ["width", "height"];
 var BedtimeFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$11);
+    props = _objectWithoutProperties(_ref, _excluded$10);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1046,13 +1046,13 @@ var BedtimeFilledIcon = _ref => {
   })));
 };
 
-var _excluded$10 = ["width", "height"];
+var _excluded$$ = ["width", "height"];
 var ClearDayIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$10);
+    props = _objectWithoutProperties(_ref, _excluded$$);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1080,13 +1080,13 @@ var ClearDayIcon = _ref => {
   })));
 };
 
-var _excluded$$ = ["width", "height"];
+var _excluded$_ = ["width", "height"];
 var ClearDayFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$$);
+    props = _objectWithoutProperties(_ref, _excluded$_);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1114,13 +1114,13 @@ var ClearDayFilledIcon = _ref => {
   })));
 };
 
-var _excluded$_ = ["width", "height"];
+var _excluded$Z = ["width", "height"];
 var AddCircleIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$_);
+    props = _objectWithoutProperties(_ref, _excluded$Z);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1148,13 +1148,13 @@ var AddCircleIcon = _ref => {
   })));
 };
 
-var _excluded$Z = ["width", "height"];
+var _excluded$Y = ["width", "height"];
 var AddCircleFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$Z);
+    props = _objectWithoutProperties(_ref, _excluded$Y);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1182,13 +1182,13 @@ var AddCircleFilledIcon = _ref => {
   })));
 };
 
-var _excluded$Y = ["width", "height"];
+var _excluded$X = ["width", "height"];
 var NotifationFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$Y);
+    props = _objectWithoutProperties(_ref, _excluded$X);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1216,13 +1216,13 @@ var NotifationFilledIcon = _ref => {
   })));
 };
 
-var _excluded$X = ["width", "height"];
+var _excluded$W = ["width", "height"];
 var NotifationIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$X);
+    props = _objectWithoutProperties(_ref, _excluded$W);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1250,13 +1250,13 @@ var NotifationIcon = _ref => {
   })));
 };
 
-var _excluded$W = ["width", "height"];
+var _excluded$V = ["width", "height"];
 var VisibilityIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$W);
+    props = _objectWithoutProperties(_ref, _excluded$V);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1284,13 +1284,13 @@ var VisibilityIcon = _ref => {
   })));
 };
 
-var _excluded$V = ["width", "height"];
+var _excluded$U = ["width", "height"];
 var VisibilityFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$V);
+    props = _objectWithoutProperties(_ref, _excluded$U);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1318,13 +1318,13 @@ var VisibilityFilledIcon = _ref => {
   })));
 };
 
-var _excluded$U = ["width", "height"];
+var _excluded$T = ["width", "height"];
 var VisibilityOffIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$U);
+    props = _objectWithoutProperties(_ref, _excluded$T);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1352,13 +1352,13 @@ var VisibilityOffIcon = _ref => {
   })));
 };
 
-var _excluded$T = ["width", "height"];
+var _excluded$S = ["width", "height"];
 var VisibilityOffFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$T);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1386,13 +1386,13 @@ var VisibilityOffFilledIcon = _ref => {
   })));
 };
 
-var _excluded$S = ["width", "height"];
+var _excluded$R = ["width", "height"];
 var LockIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$S);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1420,13 +1420,13 @@ var LockIcon = _ref => {
   })));
 };
 
-var _excluded$R = ["width", "height"];
+var _excluded$Q = ["width", "height"];
 var LockFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$R);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1454,13 +1454,13 @@ var LockFilledIcon = _ref => {
   })));
 };
 
-var _excluded$Q = ["width", "height"];
+var _excluded$P = ["width", "height"];
 var MobileIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1488,13 +1488,13 @@ var MobileIcon = _ref => {
   })));
 };
 
-var _excluded$P = ["width", "height"];
+var _excluded$O = ["width", "height"];
 var MobileFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1522,13 +1522,13 @@ var MobileFilledIcon = _ref => {
   })));
 };
 
-var _excluded$O = ["width", "height"];
+var _excluded$N = ["width", "height"];
 var CloudDownloadIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1556,13 +1556,13 @@ var CloudDownloadIcon = _ref => {
   })));
 };
 
-var _excluded$N = ["width", "height"];
+var _excluded$M = ["width", "height"];
 var CloudDownloadFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1590,13 +1590,13 @@ var CloudDownloadFilledIcon = _ref => {
   })));
 };
 
-var _excluded$M = ["width", "height"];
+var _excluded$L = ["width", "height"];
 var CloudUpLoadIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1624,13 +1624,13 @@ var CloudUpLoadIcon = _ref => {
   })));
 };
 
-var _excluded$L = ["width", "height"];
+var _excluded$K = ["width", "height"];
 var CloudUpLoadFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1658,13 +1658,13 @@ var CloudUpLoadFilledIcon = _ref => {
   })));
 };
 
-var _excluded$K = ["width", "height"];
+var _excluded$J = ["width", "height"];
 var CloudDoneIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1692,13 +1692,13 @@ var CloudDoneIcon = _ref => {
   })));
 };
 
-var _excluded$J = ["width", "height"];
+var _excluded$I = ["width", "height"];
 var CloudDoneFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1726,13 +1726,13 @@ var CloudDoneFilledIcon = _ref => {
   })));
 };
 
-var _excluded$I = ["width", "height"];
+var _excluded$H = ["width", "height"];
 var NotificationsActiveIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1760,13 +1760,13 @@ var NotificationsActiveIcon = _ref => {
   })));
 };
 
-var _excluded$H = ["width", "height"];
+var _excluded$G = ["width", "height"];
 var NotificationsActiveFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1794,13 +1794,13 @@ var NotificationsActiveFilledIcon = _ref => {
   })));
 };
 
-var _excluded$G = ["width", "height"];
+var _excluded$F = ["width", "height"];
 var NotificationsOffIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1828,13 +1828,13 @@ var NotificationsOffIcon = _ref => {
   })));
 };
 
-var _excluded$F = ["width", "height"];
+var _excluded$E = ["width", "height"];
 var NotificationsOffFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1862,13 +1862,13 @@ var NotificationsOffFilledIcon = _ref => {
   })));
 };
 
-var _excluded$E = ["width", "height"];
+var _excluded$D = ["width", "height"];
 var NotificationsUnreadIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1896,13 +1896,13 @@ var NotificationsUnreadIcon = _ref => {
   })));
 };
 
-var _excluded$D = ["width", "height"];
+var _excluded$C = ["width", "height"];
 var NotificationsUnreadFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1930,13 +1930,13 @@ var NotificationsUnreadFilledIcon = _ref => {
   })));
 };
 
-var _excluded$C = ["width", "height"];
+var _excluded$B = ["width", "height"];
 var GoogleColorIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1962,13 +1962,13 @@ var GoogleColorIcon = _ref => {
   }));
 };
 
-var _excluded$B = ["width", "height"];
+var _excluded$A = ["width", "height"];
 var FacebookColorIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1985,13 +1985,13 @@ var FacebookColorIcon = _ref => {
   }));
 };
 
-var _excluded$A = ["width", "height"];
+var _excluded$z = ["width", "height"];
 var InstagramColorIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2058,13 +2058,13 @@ var InstagramColorIcon = _ref => {
   }))));
 };
 
-var _excluded$z = ["width", "height"];
+var _excluded$y = ["width", "height"];
 var TiktokColorIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2087,13 +2087,13 @@ var TiktokColorIcon = _ref => {
   }));
 };
 
-var _excluded$y = ["width", "height"];
+var _excluded$x = ["width", "height"];
 var MessagerColorIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2130,13 +2130,13 @@ var MessagerColorIcon = _ref => {
   }))));
 };
 
-var _excluded$x = ["width", "height"];
+var _excluded$w = ["width", "height"];
 var LineAppColorIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2155,13 +2155,13 @@ var LineAppColorIcon = _ref => {
   }));
 };
 
-var _excluded$w = ["width", "height"];
+var _excluded$v = ["width", "height"];
 var ArrowCircleLeftIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2189,13 +2189,13 @@ var ArrowCircleLeftIcon = _ref => {
   })));
 };
 
-var _excluded$v = ["width", "height"];
+var _excluded$u = ["width", "height"];
 var ArrowCircleRightIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2223,13 +2223,13 @@ var ArrowCircleRightIcon = _ref => {
   })));
 };
 
-var _excluded$u = ["width", "height"];
+var _excluded$t = ["width", "height"];
 var ArrowCircleUpIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2257,13 +2257,13 @@ var ArrowCircleUpIcon = _ref => {
   })));
 };
 
-var _excluded$t = ["width", "height"];
+var _excluded$s = ["width", "height"];
 var ArrowCircleDownIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2291,13 +2291,13 @@ var ArrowCircleDownIcon = _ref => {
   })));
 };
 
-var _excluded$s = ["width", "height"];
+var _excluded$r = ["width", "height"];
 var ArrowCircleLeftFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2325,13 +2325,13 @@ var ArrowCircleLeftFilledIcon = _ref => {
   })));
 };
 
-var _excluded$r = ["width", "height"];
+var _excluded$q = ["width", "height"];
 var ArrowCircleRightFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2359,13 +2359,13 @@ var ArrowCircleRightFilledIcon = _ref => {
   })));
 };
 
-var _excluded$q = ["width", "height"];
+var _excluded$p = ["width", "height"];
 var ArrowCircleUpFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2393,13 +2393,13 @@ var ArrowCircleUpFilledIcon = _ref => {
   })));
 };
 
-var _excluded$p = ["width", "height"];
+var _excluded$o = ["width", "height"];
 var ArrowCircleDownFilledIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2427,13 +2427,13 @@ var ArrowCircleDownFilledIcon = _ref => {
   })));
 };
 
-var _excluded$o = ["width", "height"];
+var _excluded$n = ["width", "height"];
 var ArrowLeftAltIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2461,13 +2461,13 @@ var ArrowLeftAltIcon = _ref => {
   })));
 };
 
-var _excluded$n = ["width", "height"];
+var _excluded$m = ["width", "height"];
 var ArrowRightAltIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2495,13 +2495,13 @@ var ArrowRightAltIcon = _ref => {
   })));
 };
 
-var _excluded$m = ["width", "height"];
+var _excluded$l = ["width", "height"];
 var ArrowDownwardAltIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2529,13 +2529,13 @@ var ArrowDownwardAltIcon = _ref => {
   })));
 };
 
-var _excluded$l = ["width", "height"];
+var _excluded$k = ["width", "height"];
 var ArrowUpwardAltIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2563,13 +2563,13 @@ var ArrowUpwardAltIcon = _ref => {
   })));
 };
 
-var _excluded$k = ["width", "height"];
+var _excluded$j = ["width", "height"];
 var KeyboardArrowLeftIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2597,13 +2597,13 @@ var KeyboardArrowLeftIcon = _ref => {
   })));
 };
 
-var _excluded$j = ["width", "height"];
+var _excluded$i = ["width", "height"];
 var KeyboardArrowRightIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2631,13 +2631,13 @@ var KeyboardArrowRightIcon = _ref => {
   })));
 };
 
-var _excluded$i = ["width", "height"];
+var _excluded$h = ["width", "height"];
 var KeyboardArrowUpIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2665,13 +2665,13 @@ var KeyboardArrowUpIcon = _ref => {
   })));
 };
 
-var _excluded$h = ["width", "height"];
+var _excluded$g = ["width", "height"];
 var KeyboardArrowDownIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2699,13 +2699,13 @@ var KeyboardArrowDownIcon = _ref => {
   })));
 };
 
-var _excluded$g = ["width", "height"];
+var _excluded$f = ["width", "height"];
 var LastPageIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2733,13 +2733,13 @@ var LastPageIcon = _ref => {
   })));
 };
 
-var _excluded$f = ["width", "height"];
+var _excluded$e = ["width", "height"];
 var FirstPageIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2767,13 +2767,13 @@ var FirstPageIcon = _ref => {
   })));
 };
 
-var _excluded$e = ["width", "height"];
+var _excluded$d = ["width", "height"];
 var InfoIcon = _ref => {
   var {
       width,
       height
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var size = width || height || 24;
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2931,12 +2931,12 @@ var getColorOpposite = (defaultColor, fill) => {
   }
 };
 
-var _excluded$d = ["fill"];
+var _excluded$c = ["fill"];
 var TROlineLogo = _ref => {
   var {
       fill
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 114 40"
@@ -3084,12 +3084,12 @@ var TROlineENLogo = _a => {
   }), /*#__PURE__*/React.createElement("title", null, "Logo Thairath"));
 };
 
-var _excluded$c = ["fill"];
+var _excluded$b = ["fill"];
 var TRMoneyLogo = _ref => {
   var {
       fill
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 126 40"
@@ -3146,12 +3146,12 @@ var TRMoneyLogo = _ref => {
   }), /*#__PURE__*/React.createElement("title", null, "Logo TR Money"));
 };
 
-var _excluded$b = ["fill"];
+var _excluded$a = ["fill"];
 var TRTVLogo = _ref => {
   var {
       fill
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 164 40"
@@ -3253,12 +3253,12 @@ var TRPlusLogo = _a => {
   }), /*#__PURE__*/React.createElement("title", null, "Logo TR Plus"));
 };
 
-var _excluded$a = ["fill"];
+var _excluded$9 = ["fill"];
 var TRLogisticsLogo = _ref => {
   var {
       fill
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 112 40"
@@ -3521,12 +3521,12 @@ var TRFutureperfectLogo = _ref => {
   }))), /*#__PURE__*/React.createElement("title", null, "Logo Futureperfect"));
 };
 
-var _excluded$9 = ["fill"];
+var _excluded$8 = ["fill"];
 var TRSportLogo = _ref => {
   var {
       fill
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 118 40"
@@ -3626,12 +3626,12 @@ var TRSportLogo = _ref => {
   }), /*#__PURE__*/React.createElement("title", null, "Logo TR Sport"));
 };
 
-var _excluded$8 = ["fill"];
+var _excluded$7 = ["fill"];
 var MirrorLogo = _ref => {
   var {
       fill
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 205 40"
@@ -3656,12 +3656,12 @@ var MirrorLogo = _ref => {
   }), /*#__PURE__*/React.createElement("title", null, "Logo Mirror"));
 };
 
-var _excluded$7 = ["fill"];
+var _excluded$6 = ["fill"];
 var TrenVG3Logo = _ref => {
   var {
       fill
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 177 40"
@@ -4406,7 +4406,7 @@ var TRO_Button = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "produc
   return iconPosition === 'Left' ? 'flex-direction: row-reverse;' : 'flex-direction: row;';
 }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJ1dHRvblN0eWxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0MiLCJmaWxlIjoiYnV0dG9uU3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLy8gYnV0dG9uU3R5bGUudHN4XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmV4cG9ydCBjb25zdCBUUk9fQnV0dG9uID0gc3R5bGVkLmJ1dHRvbiBgXG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLWZ1bGwpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1kZWZhdWx0KTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDY1MDtcbiAgICBsaW5lLWhlaWdodDogMTAwJTtcblxuICAgICR7KHsgdmFyaWFudCB9KSA9PiB7XG4gICAgc3dpdGNoICh2YXJpYW50KSB7XG4gICAgICAgIGNhc2UgJ1ByaW1hcnknOlxuICAgICAgICAgICAgcmV0dXJuIGBcbiAgICAgICAgICAgICAgICAgICAgY29sb3I6IHZhcigtLWNvbXBvbmVudHMtYnV0dG9uLXRleHQtd2hpdGUpO1xuICAgICAgICAgICAgICAgICAgICBib3JkZXI6IHZhcigtLWJvcmRlci1zbSkgc29saWQgdmFyKC0tY29tcG9uZW50cy1idXR0b24tYm9yZGVyLWdyZWVuLXByaW1hcnkpO1xuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1jb21wb25lbnRzLWJ1dHRvbi1iYWNrZ3JvdW5kLWdyZWVuLXByaW1hcnkpO1xuICAgICAgICAgICAgICAgIGA7XG4gICAgICAgIGNhc2UgJ1NlY29uZGFyeSc6XG4gICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBjb2xvcjogdmFyKC0tY29tcG9uZW50cy1idXR0b24tdGV4dC1ncmVlbi1wcmltYXJ5KTtcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiB2YXIoLS1ib3JkZXItc20pIHNvbGlkIHZhcigtLWNvbXBvbmVudHMtYnV0dG9uLWJvcmRlci1ncmVlbi1wcmltYXJ5KTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tY29tcG9uZW50cy1idXR0b24tYmFja2dyb3VuZC13aGl0ZSk7XG4gICAgICAgICAgICAgICAgYDtcbiAgICAgICAgY2FzZSAnRGlzYWJsZSc6XG4gICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBjb2xvcjogdmFyKC0tY29tcG9uZW50cy1idXR0b24tdGV4dC1kaXNhYmxlKTtcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiB2YXIoLS1ib3JkZXItc20pIHNvbGlkIHZhcigtLWNvbXBvbmVudHMtYnV0dG9uLWJvcmRlci1kaXNhYmxlKTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tY29tcG9uZW50cy1idXR0b24tYmFja2dyb3VuZC1kaXNhYmxlKTtcbiAgICAgICAgICAgICAgICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICAgICAgICAgICAgICBgO1xuICAgICAgICBkZWZhdWx0OlxuICAgICAgICAgICAgcmV0dXJuICcnO1xuICAgIH1cbn19XG5cbiAgICAkeyh7IHZhcmlhbnQgfSkgPT4gdmFyaWFudCAhPT0gJ0Rpc2FibGUnICYmIGBcblxuICAgICAgICA6aG92ZXJ7XG4gICAgICAgICAgICBjb2xvcjogdmFyKC0tY29tcG9uZW50cy1idXR0b24tdGV4dC13aGl0ZSk7XG4gICAgICAgICAgICBib3JkZXI6IHZhcigtLWJvcmRlci1zbSkgc29saWQgdmFyKC0tY29tcG9uZW50cy1idXR0b24tYm9yZGVyLWdyZWVuLWRhcmspO1xuICAgICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tY29tcG9uZW50cy1idXR0b24tYmFja2dyb3VuZC1ncmVlbi1kYXJrKTtcblxuICAgICAgICAgICAgLmJ1dHRvbi1pY29ue1xuICAgICAgICAgICAgICAgIGZpbGw6IHZhcigtLWNvbXBvbmVudHMtYnV0dG9uLWljb24td2hpdGUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgYH1cblxuICAgICR7KHsgc2l6ZSB9KSA9PiB7XG4gICAgc3dpdGNoIChzaXplKSB7XG4gICAgICAgIGNhc2UgJ1NtYWxsJzpcbiAgICAgICAgICAgIHJldHVybiBgXG4gICAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IHZhcigtLWdhcC14cykgdmFyKC0tZ2FwLXNtKTtcbiAgICAgICAgICAgICAgICAgICAgZ2FwOiB2YXIoLS1nYXAtMnhzKTtcbiAgICAgICAgICAgICAgICAgICAgZm9udC1zaXplOjEycHg7XG4gICAgICAgICAgICAgICAgYDtcbiAgICAgICAgY2FzZSAnTWVkaXVtJzpcbiAgICAgICAgICAgIHJldHVybiBgXG4gICAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IHZhcigtLWdhcC14cykgdmFyKC0tZ2FwLWxnKTtcbiAgICAgICAgICAgICAgICAgICAgZ2FwOiB2YXIoLS1nYXAtMnhzKTtcbiAgICAgICAgICAgICAgICAgICAgZm9udC1zaXplOjE2cHg7XG4gICAgICAgICAgICAgICAgYDtcbiAgICAgICAgY2FzZSAnTGFyZ2UnOlxuICAgICAgICAgICAgcmV0dXJuIGBcbiAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogdmFyKC0tZ2FwLXNtKSB2YXIoLS1nYXAteGwpO1xuICAgICAgICAgICAgICAgICAgICBnYXA6IHZhcigtLWdhcC0yeHMpO1xuICAgICAgICAgICAgICAgICAgICBmb250LXNpemU6IDIwcHg7XG4gICAgICAgICAgICAgICAgYDtcbiAgICAgICAgY2FzZSAnWC1MYXJnZSc6XG4gICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nOiB2YXIoLS1nYXAtc20pIHZhcigtLWdhcC0yeGwpO1xuICAgICAgICAgICAgICAgICAgICBnYXA6IHZhcigtLWdhcC1zbSk7XG4gICAgICAgICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjZweDtcbiAgICAgICAgICAgICAgICBgO1xuICAgICAgICBkZWZhdWx0OlxuICAgICAgICAgICAgcmV0dXJuICcnO1xuICAgIH1cbn19XG5cbiAgICAkeyh7IGljb25Qb3NpdGlvbiB9KSA9PiBpY29uUG9zaXRpb24gPT09ICdMZWZ0JyA/ICdmbGV4LWRpcmVjdGlvbjogcm93LXJldmVyc2U7JyA6ICdmbGV4LWRpcmVjdGlvbjogcm93Oyd9XG4gIFxuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWJ1dHRvblN0eWxlLmpzeC5tYXAiXX0= */"));
 
-var _excluded$6 = ["variant", "size", "label", "icon", "iconPosition", "href", "target", "ariaLabel", "rel", "onClick"];
+var _excluded$5 = ["variant", "size", "label", "icon", "iconPosition", "href", "target", "ariaLabel", "rel", "onClick"];
 var buttonSizeMap = {
   Small: 18,
   Medium: 20,
@@ -4426,7 +4426,7 @@ var Button = _ref => {
       rel,
       onClick
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$6);
+    restProps = _objectWithoutProperties(_ref, _excluded$5);
   var fillColor = getFillColorFromVariant(variant !== null && variant !== void 0 ? variant : 'Primary');
   var iconSize = buttonSizeMap[size !== null && size !== void 0 ? size : 'Small'];
   var isDisabled = variant === 'Disable';
@@ -4662,7 +4662,7 @@ var Form = _ref => {
   }))), children, description && /*#__PURE__*/React.createElement(TRO_FormDescription, null, description));
 };
 
-var _excluded$5 = ["variant", "label", "placeholder", "description", "value", "info"];
+var _excluded$4 = ["variant", "label", "placeholder", "description", "value", "info"];
 var Textbox = _ref => {
   var {
       variant = "Default",
@@ -4672,7 +4672,7 @@ var Textbox = _ref => {
       value,
       info
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   return /*#__PURE__*/React.createElement(Form, {
     variant: variant,
     label: label,
@@ -4685,7 +4685,7 @@ var Textbox = _ref => {
   })));
 };
 
-var _excluded$4 = ["variant", "label", "placeholder", "description", "info", "value"];
+var _excluded$3 = ["variant", "label", "placeholder", "description", "info", "value"];
 var Textarea = _ref => {
   var {
       variant = "Default",
@@ -4695,7 +4695,7 @@ var Textarea = _ref => {
       info,
       value
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(Form, {
     variant: variant,
     label: label,
@@ -4708,7 +4708,7 @@ var Textarea = _ref => {
   })));
 };
 
-var _excluded$3 = ["variant", "label", "placeholder", "description", "info", "value", "icon", "children"];
+var _excluded$2 = ["variant", "label", "placeholder", "description", "info", "value", "icon", "children"];
 var Select = _ref => {
   var {
       variant = "Default",
@@ -4720,7 +4720,7 @@ var Select = _ref => {
       icon,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React.createElement(Form, {
     variant: variant,
     label: label,
@@ -4801,7 +4801,7 @@ var TRO_StyledRadio = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "pro
   }
 }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJhZGlvU3R5bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Dc0UiLCJmaWxlIjoicmFkaW9TdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvLyByYWRpb1N0eWxlLnRzeFxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBSYWRpb1ZhcmlhbnQgfSBmcm9tIFwiLi4vdXRpbHNGb3JtXCI7XG5cbmV4cG9ydCBjb25zdCBUUk9fUmFkaW8gPSBzdHlsZWQuZGl2PHsgZGlzYWJsZWQ/OiBib29sZWFuIH0+YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IDEwcHg7XG4gICAgY3Vyc29yOiAkeyh7IGRpc2FibGVkIH0pID0+IChkaXNhYmxlZCA/IFwibm90LWFsbG93ZWRcIiA6IFwicG9pbnRlclwiKX07XG5gO1xuXG5leHBvcnQgY29uc3QgVFJPX0hpZGRlblJhZGlvID0gc3R5bGVkLmlucHV0YFxuICAgIGRpc3BsYXk6IG5vbmU7XG5gO1xuZXhwb3J0IGNvbnN0IFRST19SYWRpb0xhYmVsID0gc3R5bGVkLmxhYmVsPHsgdmFyaWFudD86IFJhZGlvVmFyaWFudCB9PmBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktZGVmYXVsdCwgXCJLYUxhVGVYYSBEaXNwbGF5XCIpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tc2l6ZS1ub3JtYWwtc20sIDE0cHgpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxMDAlO1xuXG4gICAgJHsoeyB2YXJpYW50IH0pID0+IHtcbiAgICAgICAgXG4gICAgICAgIHN3aXRjaCAodmFyaWFudCkge1xuICAgICAgICAgICAgY2FzZSAnZXJyb3InOlxuICAgICAgICAgICAgICAgIHJldHVybiBgXG4gICAgICAgICAgICAgICAgICAgIGNvbG9yOiB2YXIoLS1jb21wb25lbnRzLWZvcm0tdGV4dC1lcnJvcik7XG4gICAgICAgICAgICAgICAgYDtcbiAgICAgICAgICAgIGNhc2UgJ2Rpc2FibGVkJzpcbiAgICAgICAgICAgICAgICByZXR1cm4gYGNvbG9yOiB2YXIoLS1jb21wb25lbnRzLWZvcm0tdGV4dC1kaXNhYmxlKTtgXG4gICAgICAgICAgICBkZWZhdWx0OlxuICAgICAgICAgICAgICAgIHJldHVybiBgY29sb3I6IHZhcigtLWNvbXBvbmVudHMtZm9ybS10ZXh0LWJsYWNrKTtgO1xuICAgICAgICB9XG4gICAgfX07XG5gXG5cbmV4cG9ydCBjb25zdCBUUk9fU3R5bGVkUmFkaW8gPSBzdHlsZWQuc3Bhbjx7IHZhcmlhbnQ/OiBSYWRpb1ZhcmlhbnQgfT5gXG4gICAgd2lkdGg6IDE4cHg7XG4gICAgaGVpZ2h0OiAxOHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtZnVsbCk7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJHsoeyB2YXJpYW50IH0pID0+IHtcbiAgICAgICAgXG4gICAgICAgIHN3aXRjaCAodmFyaWFudCkge1xuICAgICAgICAgICAgY2FzZSAnZXJyb3InOlxuICAgICAgICAgICAgICAgIHJldHVybiBgXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbXBvbmVudHMtZm9ybS1ib3JkZXItZXJyb3IpO1xuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1jb21wb25lbnRzLWZvcm0taWNvbi13aGl0ZSk7XG4gICAgICAgICAgICAgICAgYDtcbiAgICAgICAgICAgIGNhc2UgJ3NlbGVjdGVkJzpcbiAgICAgICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb21wb25lbnRzLWZvcm0tYm9yZGVyLWdyZWVuLXByaW1hcnkpO1xuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1jb21wb25lbnRzLWZvcm0tYmFja2dyb3VuZC13aGl0ZSk7XG5cbiAgICAgICAgICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiA4cHg7XG4gICAgICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDhweDtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6ICMwNGJjMDA7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICBgXG4gICAgICAgICAgICBjYXNlICdkaXNhYmxlZCc6XG4gICAgICAgICAgICAgICAgcmV0dXJuIGBcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tY29tcG9uZW50cy1mb3JtLWJvcmRlci1kaXNhYmxlKTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tY29tcG9uZW50cy1mb3JtLWJhY2tncm91bmQtZGlzYWJsZSk7XG4gICAgICAgICAgICAgICAgYFxuICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb21wb25lbnRzLWZvcm0tYm9yZGVyLWJsYWNrKTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tY29tcG9uZW50cy1mb3JtLWJhY2tncm91bmQtd2hpdGUpO1xuICAgICAgICAgICAgICAgIGA7XG4gICAgICAgIH1cbiAgICB9fTtcbmA7Il19 */"));
 
-var _excluded$2 = ["id", "label", "value", "variant", "disabled", "onChange", "checked"];
+var _excluded$1 = ["id", "label", "value", "variant", "disabled", "onChange", "checked"];
 var RadioButton = _ref => {
   var {
       id = 'label',
@@ -4812,7 +4812,7 @@ var RadioButton = _ref => {
       onChange,
       checked = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   var isDisabled = variant === "disabled" ? true : disabled;
   var isChecked = variant === "selected" ? true : checked;
   var handleChange = () => {
@@ -4903,7 +4903,7 @@ var TRO_StyledCheckbox = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "
   }
 }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNoZWNrYm94U3R5bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DeUUiLCJmaWxlIjoiY2hlY2tib3hTdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvLyBzcmMvY29tcG9uZW50cy9hdG9tcy9mb3JtL3N0eWxlcy9jaGVja2JveFN0eWxlLnRzeFxuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFJhZGlvVmFyaWFudCB9IGZyb20gXCIuLi91dGlsc0Zvcm1cIjtcblxuZXhwb3J0IGNvbnN0IFRST19DaGVja2JveCA9IHN0eWxlZC5kaXY8eyBkaXNhYmxlZD86IGJvb2xlYW4gfT5gXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogMTBweDtcbiAgICBjdXJzb3I6ICR7KHsgZGlzYWJsZWQgfSkgPT4gKGRpc2FibGVkID8gXCJub3QtYWxsb3dlZFwiIDogXCJwb2ludGVyXCIpfTtcbmBcbmV4cG9ydCBjb25zdCBUUk9fSGlkZGVuQ2hlY2tib3g9IHN0eWxlZC5pbnB1dGBcbiAgICBkaXNwbGF5OiBub25lO1xuYDtcbmV4cG9ydCBjb25zdCBUUk9fQ2hlY2tib3hMYWJlbCA9IHN0eWxlZC5sYWJlbDx7IHZhcmlhbnQ/OiBSYWRpb1ZhcmlhbnQgfT5gXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWRlZmF1bHQsIFwiS2FMYVRlWGEgRGlzcGxheVwiKTtcbiAgICBmb250LXNpemU6IHZhcigtLXNpemUtbm9ybWFsLXNtLCAxNHB4KTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgICBsaW5lLWhlaWdodDogMTAwJTtcblxuICAgICR7KHsgdmFyaWFudCB9KSA9PiB7XG4gICAgICAgIFxuICAgICAgICBzd2l0Y2ggKHZhcmlhbnQpIHtcbiAgICAgICAgICAgIGNhc2UgJ2Vycm9yJzpcbiAgICAgICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBjb2xvcjogdmFyKC0tY29tcG9uZW50cy1mb3JtLXRleHQtZXJyb3IpO1xuICAgICAgICAgICAgICAgIGA7XG4gICAgICAgICAgICBjYXNlICdkaXNhYmxlZCc6XG4gICAgICAgICAgICAgICAgcmV0dXJuIGBjb2xvcjogdmFyKC0tY29tcG9uZW50cy1mb3JtLXRleHQtZGlzYWJsZSk7IGN1cnNvcjogbm90LWFsbG93ZWQ7YFxuICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICByZXR1cm4gYGNvbG9yOiB2YXIoLS1jb21wb25lbnRzLWZvcm0tdGV4dC1ibGFjayk7YDtcbiAgICAgICAgfVxuICAgIH19O1xuYFxuZXhwb3J0IGNvbnN0IFRST19TdHlsZWRDaGVja2JveCA9IHN0eWxlZC5zcGFuPHsgdmFyaWFudD86IFJhZGlvVmFyaWFudCB9PmBcbiAgICB3aWR0aDogMThweDtcbiAgICBoZWlnaHQ6IDE4cHg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cy14cyk7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJHsoeyB2YXJpYW50IH0pID0+IHtcbiAgICAgICAgXG4gICAgICAgIHN3aXRjaCAodmFyaWFudCkge1xuICAgICAgICAgICAgY2FzZSAnZXJyb3InOlxuICAgICAgICAgICAgICAgIHJldHVybiBgXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbXBvbmVudHMtZm9ybS1ib3JkZXItZXJyb3IpO1xuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1jb21wb25lbnRzLWZvcm0taWNvbi13aGl0ZSk7XG4gICAgICAgICAgICAgICAgYDtcbiAgICAgICAgICAgIGNhc2UgJ3NlbGVjdGVkJzpcbiAgICAgICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb21wb25lbnRzLWZvcm0tYm9yZGVyLWdyZWVuLXByaW1hcnkpO1xuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1jb21wb25lbnRzLWZvcm0tYmFja2dyb3VuZC13aGl0ZSk7XG5cbiAgICAgICAgICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiAxMHB4O1xuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiA4cHg7XG4gICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2RhdGE6aW1hZ2Uvc3ZnK3htbDt1dGY4LDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTBcIiBoZWlnaHQ9XCI4XCIgdmlld0JveD1cIjAgMCAxMCA4XCIgZmlsbD1cIm5vbmVcIj48cGF0aCBkPVwiTTMuMzMzMzMgNS42Mjk4MUw4LjM5NDE3IDAuNTYwODU2QzguNTA5MTcgMC40NDU1NzggOC42NTU0MSAwLjM4NzkzOSA4LjgzMjkyIDAuMzg3OTM5QzkuMDEwNTUgMC4zODc5MzkgOS4xNTcwOCAwLjQ0NTQ0IDkuMjcyNSAwLjU2MDQ0QzkuMzg3NzggMC42NzU0NCA5LjQ0NTQyIDAuODIxNzU4IDkuNDQ1NDIgMC45OTkzOTdDOS40NDU0MiAxLjE3NzE4IDkuMzg3NzggMS4zMjM3NyA5LjI3MjUgMS40MzkxOUwzLjg2MDYyIDYuODQyOTRDMy43MDk5MyA2Ljk5MzYzIDMuNTM0MTYgNy4wNjg5OCAzLjMzMzMzIDcuMDY4OThDMy4xMzI1IDcuMDY4OTggMi45NTY3MyA2Ljk5MzYzIDIuODA2MDQgNi44NDI5NEwwLjcyNzQ5OCA0Ljc3MjUyQzAuNjEyMjIgNC42NTc1MiAwLjU1NDU4MSA0LjUxMTI3IDAuNTU0NTgxIDQuMzMzNzdDMC41NTQ1ODEgNC4xNTYxMyAwLjYxMjA4MSA0LjAwOTYxIDAuNzI3MDgxIDMuODk0MTlDMC44NDIwODEgMy43Nzg5MSAwLjk4ODQgMy43MjEyNyAxLjE2NjA0IDMuNzIxMjdDMS4zNDM4MiAzLjcyMTI3IDEuNDkwNDEgMy43Nzg5MSAxLjYwNTgzIDMuODk0MTlMMy4zMzMzMyA1LjYyOTgxWlwiIGZpbGw9XCIlMjMwMEI0MDBcIi8+PC9zdmc+Jyk7XG4gICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47XG4gICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgICAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICBgXG4gICAgICAgICAgICBjYXNlICdkaXNhYmxlZCc6XG4gICAgICAgICAgICAgICAgcmV0dXJuIGBcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tY29tcG9uZW50cy1mb3JtLWJvcmRlci1kaXNhYmxlKTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tY29tcG9uZW50cy1mb3JtLWJhY2tncm91bmQtZGlzYWJsZSk7XG4gICAgICAgICAgICAgICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgICAgICAgICAgICAgYFxuICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICByZXR1cm4gYFxuICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb21wb25lbnRzLWZvcm0tYm9yZGVyLWJsYWNrKTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tY29tcG9uZW50cy1mb3JtLWJhY2tncm91bmQtd2hpdGUpO1xuICAgICAgICAgICAgICAgIGA7XG4gICAgICAgIH1cbiAgICB9fTtcbmA7Il19 */"));
 
-var _excluded$1 = ["id", "label", "value", "variant", "disabled", "onChange", "checked"];
+var _excluded = ["id", "label", "value", "variant", "disabled", "onChange", "checked"];
 var Checkbox = _ref => {
   var {
       id = 'label',
@@ -4914,7 +4914,7 @@ var Checkbox = _ref => {
       onChange,
       checked = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded);
   var isDisabled = variant === "disabled" ? true : disabled;
   var isChecked = variant === "selected" ? true : checked;
   var handleChange = () => {
@@ -4984,16 +4984,29 @@ var Thumbnail = _ref => {
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var TRO_Title = /*#__PURE__*/_styled("h3", process.env.NODE_ENV === "production" ? {
+  target: "e1lm6nwo3"
+} : {
+  target: "e1lm6nwo3",
+  label: "TRO_Title"
+})(process.env.NODE_ENV === "production" ? {
+  name: "9pb8x7",
+  styles: "font-family:var(--font-family-graphik, \"Graphik TH\");font-style:normal;font-weight:700;line-height:150%;margin:0"
+} : {
+  name: "9pb8x7",
+  styles: "font-family:var(--font-family-graphik, \"Graphik TH\");font-style:normal;font-weight:700;line-height:150%;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRleHRTdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ21DIiwiZmlsZSI6InRleHRTdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5leHBvcnQgY29uc3QgVFJPX1RpdGxlID0gc3R5bGVkLmgzIGBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktZ3JhcGhpaywgXCJHcmFwaGlrIFRIXCIpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNzAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxNTAlO1xuICAgIG1hcmdpbjogMDtcbmA7XG5leHBvcnQgY29uc3QgVFJPX0hlYWRpbmcgPSBzdHlsZWQuaDMgYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1oZWFkaW5nLCBcIktvbmRvbGFyIFRoYWlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA3MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG4gICAgbWFyZ2luOiAwO1xuYDtcbmV4cG9ydCBjb25zdCBUUk9fRGVzY3JpcHRpb24gPSBzdHlsZWQucCBgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWRlZmF1bHQsIFwiS2FMYVRlWGEgRGlzcGxheVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuZXhwb3J0IGNvbnN0IFRST19JbmZvID0gc3R5bGVkLnNwYW4gYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1kZWZhdWx0LCBcIkthTGFUZVhhIERpc3BsYXlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG5gO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9dGV4dFN0eWxlLmpzeC5tYXAiXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
+});
+var TRO_Heading = /*#__PURE__*/_styled("h3", process.env.NODE_ENV === "production" ? {
   target: "e1lm6nwo2"
 } : {
   target: "e1lm6nwo2",
-  label: "TRO_Title"
+  label: "TRO_Heading"
 })(process.env.NODE_ENV === "production" ? {
   name: "14cjv5",
   styles: "font-family:var(--font-family-heading, \"Kondolar Thai\");font-style:normal;font-weight:700;line-height:150%;margin:0"
 } : {
   name: "14cjv5",
-  styles: "font-family:var(--font-family-heading, \"Kondolar Thai\");font-style:normal;font-weight:700;line-height:150%;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRleHRTdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWtDIiwiZmlsZSI6InRleHRTdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBUUk9fVGl0bGUgPSBzdHlsZWQuaDNgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWhlYWRpbmcsIFwiS29uZG9sYXIgVGhhaVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVFJPX0Rlc2NyaXB0aW9uID0gc3R5bGVkLnBgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWRlZmF1bHQsIFwiS2FMYVRlWGEgRGlzcGxheVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVFJPX0luZm8gPSBzdHlsZWQuc3BhbmBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktZGVmYXVsdCwgXCJLYUxhVGVYYSBEaXNwbGF5XCIpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxNTAlO1xuYDsiXX0= */",
+  styles: "font-family:var(--font-family-heading, \"Kondolar Thai\");font-style:normal;font-weight:700;line-height:150%;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRleHRTdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXFDIiwiZmlsZSI6InRleHRTdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5leHBvcnQgY29uc3QgVFJPX1RpdGxlID0gc3R5bGVkLmgzIGBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktZ3JhcGhpaywgXCJHcmFwaGlrIFRIXCIpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNzAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxNTAlO1xuICAgIG1hcmdpbjogMDtcbmA7XG5leHBvcnQgY29uc3QgVFJPX0hlYWRpbmcgPSBzdHlsZWQuaDMgYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1oZWFkaW5nLCBcIktvbmRvbGFyIFRoYWlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA3MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG4gICAgbWFyZ2luOiAwO1xuYDtcbmV4cG9ydCBjb25zdCBUUk9fRGVzY3JpcHRpb24gPSBzdHlsZWQucCBgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWRlZmF1bHQsIFwiS2FMYVRlWGEgRGlzcGxheVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuZXhwb3J0IGNvbnN0IFRST19JbmZvID0gc3R5bGVkLnNwYW4gYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1kZWZhdWx0LCBcIkthTGFUZVhhIERpc3BsYXlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG5gO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9dGV4dFN0eWxlLmpzeC5tYXAiXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
 });
 var TRO_Description = /*#__PURE__*/_styled("p", process.env.NODE_ENV === "production" ? {
@@ -5006,7 +5019,7 @@ var TRO_Description = /*#__PURE__*/_styled("p", process.env.NODE_ENV === "produc
   styles: "font-family:var(--font-family-default, \"KaLaTeXa Display\");font-style:normal;font-weight:400;line-height:150%;margin:0"
 } : {
   name: "w44oy1",
-  styles: "font-family:var(--font-family-default, \"KaLaTeXa Display\");font-style:normal;font-weight:400;line-height:150%;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRleHRTdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXVDIiwiZmlsZSI6InRleHRTdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBUUk9fVGl0bGUgPSBzdHlsZWQuaDNgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWhlYWRpbmcsIFwiS29uZG9sYXIgVGhhaVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVFJPX0Rlc2NyaXB0aW9uID0gc3R5bGVkLnBgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWRlZmF1bHQsIFwiS2FMYVRlWGEgRGlzcGxheVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVFJPX0luZm8gPSBzdHlsZWQuc3BhbmBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktZGVmYXVsdCwgXCJLYUxhVGVYYSBEaXNwbGF5XCIpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxNTAlO1xuYDsiXX0= */",
+  styles: "font-family:var(--font-family-default, \"KaLaTeXa Display\");font-style:normal;font-weight:400;line-height:150%;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRleHRTdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXdDIiwiZmlsZSI6InRleHRTdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5leHBvcnQgY29uc3QgVFJPX1RpdGxlID0gc3R5bGVkLmgzIGBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktZ3JhcGhpaywgXCJHcmFwaGlrIFRIXCIpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNzAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxNTAlO1xuICAgIG1hcmdpbjogMDtcbmA7XG5leHBvcnQgY29uc3QgVFJPX0hlYWRpbmcgPSBzdHlsZWQuaDMgYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1oZWFkaW5nLCBcIktvbmRvbGFyIFRoYWlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA3MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG4gICAgbWFyZ2luOiAwO1xuYDtcbmV4cG9ydCBjb25zdCBUUk9fRGVzY3JpcHRpb24gPSBzdHlsZWQucCBgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWRlZmF1bHQsIFwiS2FMYVRlWGEgRGlzcGxheVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuZXhwb3J0IGNvbnN0IFRST19JbmZvID0gc3R5bGVkLnNwYW4gYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1kZWZhdWx0LCBcIkthTGFUZVhhIERpc3BsYXlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG5gO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9dGV4dFN0eWxlLmpzeC5tYXAiXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
 });
 var TRO_Info = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
@@ -5019,20 +5032,21 @@ var TRO_Info = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production
   styles: "font-family:var(--font-family-default, \"KaLaTeXa Display\");font-style:normal;font-weight:400;line-height:150%"
 } : {
   name: "36qrt",
-  styles: "font-family:var(--font-family-default, \"KaLaTeXa Display\");font-style:normal;font-weight:400;line-height:150%/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRleHRTdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JtQyIsImZpbGUiOiJ0ZXh0U3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgVFJPX1RpdGxlID0gc3R5bGVkLmgzYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1oZWFkaW5nLCBcIktvbmRvbGFyIFRoYWlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA3MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG4gICAgbWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFRST19EZXNjcmlwdGlvbiA9IHN0eWxlZC5wYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1kZWZhdWx0LCBcIkthTGFUZVhhIERpc3BsYXlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG4gICAgbWFyZ2luOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFRST19JbmZvID0gc3R5bGVkLnNwYW5gXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWRlZmF1bHQsIFwiS2FMYVRlWGEgRGlzcGxheVwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbmA7Il19 */",
+  styles: "font-family:var(--font-family-default, \"KaLaTeXa Display\");font-style:normal;font-weight:400;line-height:150%/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRleHRTdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JvQyIsImZpbGUiOiJ0ZXh0U3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuZXhwb3J0IGNvbnN0IFRST19UaXRsZSA9IHN0eWxlZC5oMyBgXG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWdyYXBoaWssIFwiR3JhcGhpayBUSFwiKTtcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XG4gICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICBsaW5lLWhlaWdodDogMTUwJTtcbiAgICBtYXJnaW46IDA7XG5gO1xuZXhwb3J0IGNvbnN0IFRST19IZWFkaW5nID0gc3R5bGVkLmgzIGBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktaGVhZGluZywgXCJLb25kb2xhciBUaGFpXCIpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNzAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxNTAlO1xuICAgIG1hcmdpbjogMDtcbmA7XG5leHBvcnQgY29uc3QgVFJPX0Rlc2NyaXB0aW9uID0gc3R5bGVkLnAgYFxuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1kZWZhdWx0LCBcIkthTGFUZVhhIERpc3BsYXlcIik7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgbGluZS1oZWlnaHQ6IDE1MCU7XG4gICAgbWFyZ2luOiAwO1xuYDtcbmV4cG9ydCBjb25zdCBUUk9fSW5mbyA9IHN0eWxlZC5zcGFuIGBcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHktZGVmYXVsdCwgXCJLYUxhVGVYYSBEaXNwbGF5XCIpO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGxpbmUtaGVpZ2h0OiAxNTAlO1xuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXRleHRTdHlsZS5qc3gubWFwIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
 });
 
-var _excluded = ["children", "variant"];
-var Text = _ref => {
+var Text = _a => {
   var {
       children,
       variant = 'description'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = _a,
+    props = __rest(_a, ["children", "variant"]);
   switch (variant) {
     case 'title':
       return /*#__PURE__*/React.createElement(TRO_Title, props, children);
+    case 'heading':
+      return /*#__PURE__*/React.createElement(TRO_Heading, props, children);
     case 'description':
       return /*#__PURE__*/React.createElement(TRO_Description, props, children);
     case 'info':
@@ -5581,20 +5595,26 @@ var CardArticle = _ref => {
   return /*#__PURE__*/React.createElement(TRO_Card, {
     variant: variant,
     className: className ? className : ''
-  }, thumbnail && /*#__PURE__*/React.createElement(TRO_CardThumbnail, null, /*#__PURE__*/React.createElement("a", {
+  }, thumbnail && /*#__PURE__*/React.createElement(TRO_CardThumbnail, {
+    className: "tro--card--thumbnail"
+  }, /*#__PURE__*/React.createElement("a", {
     href: link
   }, /*#__PURE__*/React.createElement(Thumbnail, {
     src: thumbnail,
     size: size,
     alt: title
-  }))), /*#__PURE__*/React.createElement(TRO_CardContainer, null, /*#__PURE__*/React.createElement("a", {
+  }))), /*#__PURE__*/React.createElement(TRO_CardContainer, {
+    className: "tro--card--container"
+  }, /*#__PURE__*/React.createElement("a", {
     href: link,
     className: "tro--card--container--inner"
   }, /*#__PURE__*/React.createElement(TRO_CardTitle, {
     variant: "title"
   }, title), description !== undefined && /*#__PURE__*/React.createElement(TRO_CardDescription, {
     variant: "description"
-  }, description)), (category || datetime) && /*#__PURE__*/React.createElement(TRO_CardInfo, null, category && /*#__PURE__*/React.createElement("a", {
+  }, description)), (category || datetime) && /*#__PURE__*/React.createElement(TRO_CardInfo, {
+    className: "tro--card--info"
+  }, category && /*#__PURE__*/React.createElement("a", {
     href: linkCategory
   }, /*#__PURE__*/React.createElement(TRO_CardCategory, {
     variant: "info"
@@ -5902,6 +5922,7 @@ var TROHeader = _ref => {
     isLoggedIn,
     username,
     userPhoto,
+    logoColor = 'Color',
     onLogin,
     onLogout,
     dataFile
@@ -5944,7 +5965,7 @@ var TROHeader = _ref => {
     href: 'https://www.thairath.co.th/home',
     className: "tro--header--icon"
   }, /*#__PURE__*/React.createElement(Logo, {
-    fill: "Color",
+    fill: logoColor,
     name: "tr_online"
   })), /*#__PURE__*/React.createElement(TRO_HeaderInner, null, /*#__PURE__*/React.createElement(TRO_WrapIcon, {
     onClick: isLoggedIn ? handleUserDropdown : onLogin
@@ -6543,7 +6564,8 @@ var TROEN_SlidebarNavOther = /*#__PURE__*/_styled("div", process.env.NODE_ENV ==
 // src/components/organisms/HeaderEN/headerEN.tsx
 var TROENHeader = _ref => {
   var {
-    dataFile = '/data/menuEN.json'
+    dataFile = '/data/menuEN.json',
+    logoColor = 'Color'
   } = _ref;
   var [data, setData] = useState(null);
   var [isOpen, setIsOpen] = useState(false);
@@ -6629,7 +6651,7 @@ var TROENHeader = _ref => {
   }, [isMobileView]);
   if (!data) return /*#__PURE__*/React.createElement("div", null, "Loading...");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TROEN_Header, null, /*#__PURE__*/React.createElement(TROEN_HeaderTOP, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, /*#__PURE__*/React.createElement(Logo, {
-    fill: "Color",
+    fill: logoColor,
     mode: "auto-width",
     name: "tr_online_en",
     size: "24"