labsense-ui-kit 1.0.21 → 1.0.22

package/dist/Buttons/Button.d.ts

@@ -3,6 +3,11 @@ import { IconNames } from '../Icons';
 export declare type buttonSizes = 'small' | 'medium' | 'large' | 'custom';
 export declare type buttonVariant = 'primary' | 'secondary' | 'tertiary' | 'error' | 'outline-primary' | 'outline-secondary' | 'outline-error';
 export declare type iconPosition = 'right' | 'left';
+export interface ButtonLoaderProps {
+    loading?: boolean;
+    loaderPosition?: 'right' | 'left';
+    loaderColor?: string;
+}
 export interface ButtonProps {
     onClick?: () => void;
     text?: string;
@@ -22,11 +27,7 @@ export interface ButtonProps {
     iconSize?: number;
     disabled?: boolean;
     variant?: buttonVariant;
-    loaderProps?: {
-        loading?: boolean;
-        loaderPosition?: 'right' | 'left';
-        loaderColor?: string;
-    };
+    loaderProps?: ButtonLoaderProps;
 }
 declare const ButtonComponent: React.FC<ButtonProps>;
 export default ButtonComponent;

package/dist/Buttons/index.d.ts

@@ -1,2 +1,2 @@
-import Button, { ButtonProps } from "./Button";
-export { Button, ButtonProps };
+import Button, { ButtonProps, ButtonLoaderProps } from "./Button";
+export { Button, ButtonProps, ButtonLoaderProps };

package/dist/Icons/SVGs/Hazard.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SVGProps } from "..";
+declare const Hazard: React.FC<SVGProps>;
+export default Hazard;

package/dist/Icons/SVGs/Maps.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SVGProps } from "..";
+declare const Maps: React.FC<SVGProps>;
+export default Maps;

package/dist/Icons/SVGs/Profile_3.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SVGProps } from "..";
+declare const Profile_3: React.FC<SVGProps>;
+export default Profile_3;

package/dist/Icons/index.d.ts

@@ -9,7 +9,7 @@ export interface SVGProps {
     color: string;
     weight: string;
 }
-export declare type IconNames = 'Add' | 'AddProfile' | 'Back' | 'Bin' | 'Business' | 'Calendar' | 'CCTV_1' | 'CCTV_2' | 'Circle' | 'CircularEdit' | 'CircularPause' | 'CircularPlay' | 'CircularWarning' | 'Client' | 'Close' | 'CloseCircle' | 'CloseEye' | 'Copy' | 'Cyber' | 'DownArrow' | 'Download' | 'Email' | 'ExitFullScreen' | 'OpenEye' | 'FilesBox' | 'FilledCircle' | 'Filter_1' | 'Filter_2' | 'Forward_10_Sec' | 'Forward' | 'FullScreen' | 'Grid_2x2_Hollow' | 'Grid_2x2' | 'Grid_3x3' | 'Grid_4x4' | 'Grid_5x5' | 'History' | 'Information' | 'Key' | 'KeyDown' | 'LeftArrow' | 'Letter' | 'Live' | 'Lock' | 'Logout' | 'MediumVolume' | 'Mute' | 'MuteVolume' | 'Menu' | 'NoCam' | 'Notifications' | 'OpenBin' | 'OpenEye' | 'Phone' | 'Play' | 'Profile_1' | 'Profile_2' | 'Recording' | 'Return' | 'Rewind_10_Sec' | 'RightArrow' | 'RunAway' | 'SandTimer' | 'Search' | 'Settings' | 'Shield' | 'SquareEdit' | 'SquareTick' | 'Tag' | 'Team' | 'ThreeDots' | 'ThumbsUp' | 'Tick' | 'UpArrow' | 'Video' | 'FullVolume' | 'Wallet' | 'WiFiCam' | 'Zapper';
+export declare type IconNames = 'Add' | 'AddProfile' | 'Back' | 'Bin' | 'Business' | 'Calendar' | 'CCTV_1' | 'CCTV_2' | 'Circle' | 'CircularEdit' | 'CircularPause' | 'CircularPlay' | 'CircularWarning' | 'Client' | 'Close' | 'CloseCircle' | 'CloseEye' | 'Copy' | 'Cyber' | 'DownArrow' | 'Download' | 'Email' | 'ExitFullScreen' | 'OpenEye' | 'FilesBox' | 'FilledCircle' | 'Filter_1' | 'Filter_2' | 'Forward_10_Sec' | 'Forward' | 'FullScreen' | 'Grid_2x2_Hollow' | 'Grid_2x2' | 'Grid_3x3' | 'Grid_4x4' | 'Grid_5x5' | 'Hazard' | 'History' | 'Information' | 'Key' | 'KeyDown' | 'LeftArrow' | 'Letter' | 'Live' | 'Lock' | 'Logout' | 'Maps' | 'MediumVolume' | 'Mute' | 'MuteVolume' | 'Menu' | 'NoCam' | 'Notifications' | 'OpenBin' | 'OpenEye' | 'Phone' | 'Play' | 'Profile_1' | 'Profile_2' | 'Profile_3' | 'Recording' | 'Return' | 'Rewind_10_Sec' | 'RightArrow' | 'RunAway' | 'SandTimer' | 'Search' | 'Settings' | 'Shield' | 'SquareEdit' | 'SquareTick' | 'Tag' | 'Team' | 'ThreeDots' | 'ThumbsUp' | 'Tick' | 'UpArrow' | 'Video' | 'FullVolume' | 'Wallet' | 'WiFiCam' | 'Zapper';
 export interface IconProps {
     icon: IconNames;
     size?: number;

package/dist/Themes/Colors.d.ts

@@ -56,4 +56,12 @@ export declare const colorVariables: {
         info: string;
         warning: string;
     };
+    badge: {
+        lavender: string;
+        papayaWhip: string;
+        water: string;
+        paleBlue: string;
+        teaGreen: string;
+        lightBlue: string;
+    };
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from "./Buttons";
+import { Button, ButtonProps, ButtonLoaderProps } from "./Buttons";
 import { Input } from "./Inputs";
 import { Icon, IconNames } from './Icons';
 import { Tabs } from './Tabs';
@@ -8,5 +8,5 @@ import { CircularLoader } from './Loader';
 import { useClickOutside, useCustomModal } from './hooks';
 export { Button, Input, Icon, Tabs, ProgressBar, colorVariables };
 export { CircularLoader };
-export { IconNames, ButtonProps };
+export { IconNames, ButtonProps, ButtonLoaderProps };
 export { useClickOutside, useCustomModal };

package/dist/index.js

@@ -1961,6 +1961,77 @@ var Zapper = function Zapper(_ref) {
   }));
 };
 
+var Profile_3 = function Profile_3(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 14 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M7 9.5C6.10999 9.5 5.23996 9.23608 4.49994 8.74162C3.75991 8.24715 3.18314 7.54434 2.84254 6.72208C2.50195 5.89981 2.41283 4.99501 2.58647 4.1221C2.7601 3.24918 3.18869 2.44736 3.81802 1.81802C4.44736 1.18869 5.24918 0.760102 6.1221 0.586468C6.99501 0.412835 7.89981 0.50195 8.72208 0.842544C9.54434 1.18314 10.2471 1.75991 10.7416 2.49994C11.2361 3.23996 11.5 4.10999 11.5 5C11.5 6.19348 11.0259 7.33807 10.182 8.18198C9.33807 9.0259 8.19348 9.5 7 9.5ZM7 1.25C6.25832 1.25 5.5333 1.46994 4.91661 1.88199C4.29993 2.29405 3.81928 2.87972 3.53545 3.56494C3.25163 4.25016 3.17736 5.00416 3.32206 5.73159C3.46675 6.45902 3.8239 7.12721 4.34835 7.65165C4.8728 8.1761 5.54098 8.53325 6.26841 8.67795C6.99584 8.82264 7.74984 8.74838 8.43506 8.46455C9.12029 8.18072 9.70596 7.70007 10.118 7.08339C10.5301 6.46671 10.75 5.74168 10.75 5C10.75 4.00544 10.3549 3.05161 9.65165 2.34835C8.94839 1.64509 7.99456 1.25 7 1.25Z",
+    fill: color
+  }), React__default.createElement("path", {
+    d: "M13.375 15.5002H0.643752C0.592607 15.5005 0.541937 15.4904 0.49486 15.4704C0.447782 15.4504 0.405292 15.421 0.370002 15.384C0.334743 15.3465 0.30756 15.3022 0.290142 15.2539C0.272724 15.2055 0.265443 15.154 0.268752 15.1027C0.395611 13.4043 1.15985 11.8165 2.40823 10.6579C3.6566 9.49933 5.29682 8.85547 7 8.85547C8.70318 8.85547 10.3434 9.49933 11.5918 10.6579C12.8402 11.8165 13.6044 13.4043 13.7313 15.1027C13.7346 15.154 13.7273 15.2055 13.7099 15.2539C13.6924 15.3022 13.6653 15.3465 13.63 15.384C13.5632 15.4542 13.4718 15.4959 13.375 15.5002ZM1.05625 14.7502H12.9438C12.7458 13.3145 12.0348 11.9989 10.9422 11.0467C9.84964 10.0945 8.44931 9.56986 7 9.56986C5.55069 9.56986 4.15037 10.0945 3.05779 11.0467C1.96521 11.9989 1.25424 13.3145 1.05625 14.7502Z",
+    fill: color
+  }), React__default.createElement("path", {
+    opacity: "0.35",
+    d: "M9.51625 1.7334C10.1235 2.52742 10.4218 3.51495 10.3556 4.51238C10.2894 5.50982 9.86332 6.44928 9.15648 7.15613C8.44964 7.86297 7.51017 8.28909 6.51274 8.35526C5.51531 8.42144 4.52778 8.12316 3.73375 7.5159C4.09079 7.98275 4.54348 8.36791 5.06147 8.64558C5.57947 8.92326 6.15083 9.08703 6.73727 9.12594C7.32371 9.16485 7.91169 9.07799 8.46183 8.87118C9.01197 8.66437 9.51157 8.34239 9.92716 7.9268C10.3427 7.51122 10.6647 7.01162 10.8715 6.46148C11.0783 5.91134 11.1652 5.32335 11.1263 4.73691C11.0874 4.15047 10.9236 3.57912 10.6459 3.06112C10.3683 2.54312 9.9831 2.09044 9.51625 1.7334ZM10 9.87465C10.9934 10.8678 11.628 12.1634 11.8038 13.5571C11.8119 13.6109 11.8083 13.6658 11.7931 13.718C11.778 13.7702 11.7516 13.8185 11.716 13.8595C11.6803 13.9005 11.6361 13.9333 11.5865 13.9555C11.537 13.9778 11.4831 13.989 11.4288 13.9884H0.816253C0.724208 14.3573 0.666462 14.7339 0.643753 15.1134H13.375C13.3078 14.0243 12.9622 12.9708 12.3713 12.0535C11.7803 11.1363 10.9639 10.386 10 9.87465Z",
+    fill: color
+  }));
+};
+
+var Maps = function Maps(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M3.04688 7.26562H2.8657C2.60031 7.26562 2.35752 7.41505 2.23796 7.65198L0.632335 10.8338C0.514337 11.0676 0.684282 11.3438 0.946196 11.3438H11.0538C11.3158 11.3438 11.4856 11.0676 11.3677 10.8338L9.76205 7.65198C9.64249 7.41505 9.3997 7.26562 9.13431 7.26562H9.09376",
+    stroke: color,
+    strokeLinecap: "round"
+  }), React__default.createElement("path", {
+    d: "M3.15532 5.86505C2.33225 4.51803 2.54345 2.77794 3.65966 1.66171C4.98854 0.332834 7.14896 0.326956 8.47784 1.65583C9.58996 2.76795 9.79503 4.49733 8.97384 5.8387L8.63559 6.3912L8.56764 6.48186C7.90437 7.36674 7.17751 8.20474 6.39544 8.98662C6.20738 9.17463 5.9021 9.17505 5.71404 8.98704C4.9336 8.20678 4.20987 7.37178 3.54841 6.4884L3.48205 6.39978L3.15532 5.86505Z",
+    stroke: color
+  }), React__default.createElement("path", {
+    d: "M6.07031 5.50781C6.7693 5.50781 7.33594 4.94117 7.33594 4.24219C7.33594 3.5432 6.7693 2.97656 6.07031 2.97656C5.37133 2.97656 4.80469 3.5432 4.80469 4.24219C4.80469 4.94117 5.37133 5.50781 6.07031 5.50781Z",
+    stroke: color
+  }));
+};
+
+var Hazard = function Hazard(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M6.94531 8.77734C7.24609 8.77734 7.49219 8.53125 7.49219 8.23047V4.40234C7.49219 4.10156 7.24609 3.85547 6.94531 3.85547C6.64453 3.85547 6.39844 4.10156 6.39844 4.40234V8.23047C6.39844 8.53125 6.64453 8.77734 6.94531 8.77734Z",
+    fill: color
+  }), React__default.createElement("path", {
+    d: "M6.94531 11.4926C7.38174 11.4926 7.73554 11.1388 7.73554 10.7023C7.73554 10.2659 7.38174 9.91211 6.94531 9.91211C6.50887 9.91211 6.15508 10.2659 6.15508 10.7023C6.15508 11.1388 6.50887 11.4926 6.94531 11.4926Z",
+    fill: color
+  }), React__default.createElement("path", {
+    d: "M13.8359 11.5443L8.2168 0.970508C7.94337 0.453711 7.45118 0.147461 6.89884 0.147461H6.88516C6.33009 0.15293 5.8379 0.467383 5.56993 0.992383L0.199616 11.5553C-0.0710867 12.0885 -0.0464773 12.7365 0.265241 13.2451C0.546882 13.7045 1.01993 13.9834 1.53126 13.9834L12.5234 13.9998H12.5262C13.043 13.9998 13.516 13.7182 13.7949 13.2533C14.1039 12.7365 14.1203 12.0803 13.8359 11.5443ZM12.857 12.69C12.8106 12.7693 12.7039 12.9061 12.5262 12.9061L1.53399 12.8896C1.35626 12.8896 1.24962 12.7557 1.2004 12.6764C1.11016 12.5287 1.05821 12.2881 1.17579 12.0529L6.54884 1.48457C6.62813 1.32871 6.75665 1.23027 6.89884 1.23027H6.90157C7.04376 1.23027 7.17227 1.32324 7.2543 1.4791L12.8707 12.0584C12.9965 12.2936 12.9445 12.5424 12.857 12.69Z",
+    fill: color
+  }));
+};
+
 var _templateObject, _templateObject2, _templateObject3;
 var wrapperCss = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n    line,\n    path,\n    circle,\n    ellipse,\n    foreignObject,\n    polygon,\n    polyline,\n    rect,\n    text,\n    textPath,\n    tspan {\n      vector-effect: non-scaling-stroke;\n    }\n  }\n"])));
 var IconWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  ", ";\n"])), function (_ref) {
@@ -2005,6 +2076,7 @@ var IconSVGs = {
   Grid_3x3: Grid_3x3,
   Grid_4x4: Grid_4x4,
   Grid_5x5: Grid_5x5,
+  Hazard: Hazard,
   History: History,
   Information: Information,
   Key: Key,
@@ -2014,6 +2086,7 @@ var IconSVGs = {
   Live: Live,
   Lock: Lock,
   Logout: Logout,
+  Maps: Maps,
   MediumVolume: MediumVolume,
   Mute: Mute,
   MuteVolume: MuteVolume,
@@ -2026,6 +2099,7 @@ var IconSVGs = {
   Play: Play,
   Profile_1: Profile_1,
   Profile_2: Profile_2,
+  Profile_3: Profile_3,
   Recording: Recording,
   Return: Return,
   Rewind_10_Sec: Rewind_10_Sec,
@@ -2129,6 +2203,14 @@ var colorVariables = {
     error: "#B71C1C",
     info: "#0D30A1",
     warning: "#E65100"
+  },
+  badge: {
+    lavender: '#E8DAFF',
+    papayaWhip: '#FFEDD5',
+    water: '#C7E3FF',
+    paleBlue: '#B0F0E4',
+    teaGreen: '#D5F7C2',
+    lightBlue: '#ADD8E6'
   }
 };
 
@@ -2169,7 +2251,7 @@ var Container = styled__default.div(_templateObject4 || (_templateObject4 = _tag
   var gap = _ref8.gap;
   return gap || '4px';
 });
-var StyledButton = styled__default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: max-content;\n  box-sizing: border-box;\n  border-radius: ", ";\n  outline: none;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n\n  ", "\n"])), function (_ref9) {
+var StyledButton = styled__default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: max-content;\n  box-sizing: border-box;\n  border-radius: ", ";\n  outline: none;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  color: ", "; \n"])), function (_ref9) {
   var disabled = _ref9.disabled;
   return disabled ? 'none' : 'auto';
 }, function (_ref10) {
@@ -2203,53 +2285,55 @@ var StyledButton = styled__default.button(_templateObject5 || (_templateObject5
     default:
       return '';
   }
+}, function (_ref14) {
+  var color = _ref14.color;
+  return color;
 });
-var ButtonText = styled__default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref14) {
-  var fontFamily = _ref14.fontFamily;
+var ButtonText = styled__default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref15) {
+  var fontFamily = _ref15.fontFamily;
   return fontFamily ? fontFamily : GlobalFonts.bold;
-}, function (_ref15) {
-  var size = _ref15.size,
-    fontSize = _ref15.fontSize;
-  return size === 'small' ? '14px' : size === 'medium' ? '16px' : size === 'large' ? '18px' : size === 'custom' ? fontSize : '16px';
 }, function (_ref16) {
-  var fontWeight = _ref16.fontWeight,
-    size = _ref16.size;
-  return size === 'custom' && fontWeight || '500';
+  var size = _ref16.size,
+    fontSize = _ref16.fontSize;
+  return size === 'small' ? '14px' : size === 'medium' ? '16px' : size === 'large' ? '18px' : size === 'custom' ? fontSize : '16px';
 }, function (_ref17) {
-  var size = _ref17.size,
-    fontSize = _ref17.fontSize;
+  var fontWeight = _ref17.fontWeight,
+    size = _ref17.size;
+  return size === 'custom' && fontWeight || '500';
+}, function (_ref18) {
+  var size = _ref18.size,
+    fontSize = _ref18.fontSize;
   return size === 'small' ? '14px' : size === 'medium' ? '16px' : size === 'large' ? '18px' : size === 'custom' ? fontSize : '16px';
 });
-var ButtonComponent = function ButtonComponent(_ref18) {
-  var onClick = _ref18.onClick,
-    text = _ref18.text,
-    size = _ref18.size,
-    background = _ref18.background,
-    _ref18$color = _ref18.color,
-    color = _ref18$color === void 0 ? colorVariables.text.white : _ref18$color,
-    border = _ref18.border,
-    borderRadius = _ref18.borderRadius,
-    fontWeight = _ref18.fontWeight,
-    fontSize = _ref18.fontSize,
-    fontFamily = _ref18.fontFamily,
-    padding = _ref18.padding,
-    icon = _ref18.icon,
-    gap = _ref18.gap,
-    _ref18$variant = _ref18.variant,
-    variant = _ref18$variant === void 0 ? 'primary' : _ref18$variant,
-    _ref18$iconPosition = _ref18.iconPosition,
-    iconPosition = _ref18$iconPosition === void 0 ? 'right' : _ref18$iconPosition,
-    _ref18$iconWeight = _ref18.iconWeight,
-    iconWeight = _ref18$iconWeight === void 0 ? '2' : _ref18$iconWeight,
-    iconSize = _ref18.iconSize,
-    _ref18$disabled = _ref18.disabled,
-    disabled = _ref18$disabled === void 0 ? false : _ref18$disabled,
-    _ref18$loaderProps = _ref18.loaderProps,
-    loaderProps = _ref18$loaderProps === void 0 ? {
+var ButtonComponent = function ButtonComponent(_ref19) {
+  var onClick = _ref19.onClick,
+    text = _ref19.text,
+    size = _ref19.size,
+    background = _ref19.background,
+    color = _ref19.color,
+    border = _ref19.border,
+    borderRadius = _ref19.borderRadius,
+    fontWeight = _ref19.fontWeight,
+    fontSize = _ref19.fontSize,
+    fontFamily = _ref19.fontFamily,
+    padding = _ref19.padding,
+    icon = _ref19.icon,
+    gap = _ref19.gap,
+    _ref19$variant = _ref19.variant,
+    variant = _ref19$variant === void 0 ? 'primary' : _ref19$variant,
+    _ref19$iconPosition = _ref19.iconPosition,
+    iconPosition = _ref19$iconPosition === void 0 ? 'right' : _ref19$iconPosition,
+    _ref19$iconWeight = _ref19.iconWeight,
+    iconWeight = _ref19$iconWeight === void 0 ? '2' : _ref19$iconWeight,
+    iconSize = _ref19.iconSize,
+    _ref19$disabled = _ref19.disabled,
+    disabled = _ref19$disabled === void 0 ? false : _ref19$disabled,
+    _ref19$loaderProps = _ref19.loaderProps,
+    loaderProps = _ref19$loaderProps === void 0 ? {
       loading: false,
       loaderPosition: 'right',
       loaderColor: colorVariables.text.white
-    } : _ref18$loaderProps;
+    } : _ref19$loaderProps;
   var _useState = React.useState(false),
     isHovered = _useState[0],
     setIsHovered = _useState[1];
@@ -2278,7 +2362,7 @@ var ButtonComponent = function ButtonComponent(_ref18) {
     icon: icon,
     weight: iconWeight,
     size: iconSize ? iconSize : size === 'small' ? 6 : size === 'medium' ? 8 : 10,
-    color: variant === 'tertiary' && isHovered ? colorVariables.hover.primary : variant === 'tertiary' && disabled ? colorVariables.disabled.primary : variant === 'tertiary' ? colorVariables["default"].primary : variant === 'outline-primary' && isHovered ? colorVariables.text.white : variant === 'outline-primary' && disabled ? colorVariables.disabled.primary : variant === 'outline-primary' ? colorVariables["default"].primary : variant === 'outline-secondary' && isHovered ? colorVariables.text.white : variant === 'outline-secondary' && disabled ? colorVariables.disabled.secondary : variant === 'outline-secondary' ? colorVariables["default"].secondary : variant === 'outline-error' && isHovered ? colorVariables.text.white : variant === 'outline-error' && disabled ? colorVariables.disabled.error : variant === 'outline-error' ? colorVariables["default"].error : color
+    color: variant === 'tertiary' && isHovered ? colorVariables.hover.primary : variant === 'tertiary' && disabled ? colorVariables.disabled.primary : variant === 'tertiary' ? colorVariables["default"].primary : variant === 'outline-primary' && isHovered ? colorVariables.text.white : variant === 'outline-primary' && disabled ? colorVariables.disabled.primary : variant === 'outline-primary' ? colorVariables["default"].primary : variant === 'outline-secondary' && isHovered ? colorVariables.text.white : variant === 'outline-secondary' && disabled ? colorVariables.disabled.secondary : variant === 'outline-secondary' ? colorVariables["default"].secondary : variant === 'outline-error' && isHovered ? colorVariables.text.white : variant === 'outline-error' && disabled ? colorVariables.disabled.error : variant === 'outline-error' ? colorVariables["default"].error : color ? color : colorVariables.text.white
   }), text && React__default.createElement(ButtonText, {
     size: size,
     color: color,
@@ -2289,7 +2373,7 @@ var ButtonComponent = function ButtonComponent(_ref18) {
     loaderPosition: loaderPos
   }, React__default.createElement(Spinner, {
     size: size === 'small' ? 12 : size === 'medium' ? 16 : 18,
-    color: loaderProps.loaderColor || color
+    color: loaderProps.loaderColor || 'color'
   })));
 };