npm - scorer-ui-kit - Versions diffs - 2.1.0-beta.3 → 2.1.0-beta.6 - Mend

scorer-ui-kit 2.1.0-beta.3 → 2.1.0-beta.6

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

Files changed (17) hide show

package/dist/hooks/index.d.ts +2 -1
package/dist/hooks/useThemeToggle.d.ts +8 -0
package/dist/index.d.ts +3 -5
package/dist/index.js +327 -1224
package/dist/index.js.map +1 -1
package/dist/index.modern.js +326 -1222
package/dist/index.modern.js.map +1 -1
package/dist/themes/light/colors.d.ts +1 -0
package/dist/themes/light/light.d.ts +5 -0
package/dist/themes/light/styles.d.ts +4 -0
package/package.json +1 -1
package/dist/themes/dark/colors.d.ts +0 -24
package/dist/themes/dark/custom.d.ts +0 -139
package/dist/themes/dark/dark.d.ts +0 -1051
package/dist/themes/dark/styles.d.ts +0 -301
package/dist/themes/dark/typography.d.ts +0 -485
package/dist/themes/themeFallbackHelper.d.ts +0 -5

package/dist/index.js CHANGED Viewed

@@ -1,6 +1,5 @@
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-var defaultsDeep = _interopDefault(require('lodash.defaultsdeep'));
 var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
@@ -195,28 +194,28 @@ var typography = {
           "fontSize": "16px",
           "fontWeight": 600,
           "textDecoration": "none",
-          "color": "var(--grey-11)"
+          "color": "var(--white-1)"
         },
         "large": {
           "textAlign": "center",
           "fontSize": "20px",
           "fontWeight": 600,
           "textDecoration": "none",
-          "color": "var(--grey-11)"
+          "color": "var(--white-1)"
         },
         "small": {
           "textAlign": "center",
           "fontSize": "14px",
           "fontWeight": 600,
           "textDecoration": "none",
-          "color": "var(--grey-11)"
+          "color": "var(--white-1)"
         },
         "xsmall": {
           "textAlign": "center",
           "fontSize": "12px",
           "fontWeight": 600,
           "textDecoration": "none",
-          "color": "var(--grey-11)"
+          "color": "var(--white-1)"
         }
       },
       "primary": {
@@ -314,7 +313,7 @@ var typography = {
           "fontWeight": 500,
           "lineHeight": "25px",
           "textDecoration": "none",
-          "color": "var(--grey-11)"
+          "color": "var(--grey-12)"
         },
         "compact": {
           "textAlign": "left",
@@ -322,7 +321,7 @@ var typography = {
           "fontWeight": 500,
           "lineHeight": "15px",
           "textDecoration": "none",
-          "color": "var(--grey-11)"
+          "color": "var(--grey-12)"
         }
       }
     },
@@ -452,7 +451,7 @@ var typography = {
           "fontSize": "14px",
           "fontWeight": 300,
           "textDecoration": "none",
-          "color": "var(--grey-11)"
+          "color": "var(--grey-12)"
         },
         "placeholder": {
           "textAlign": "left",
@@ -534,7 +533,7 @@ var typography = {
       "fontSize": "14px",
       "fontWeight": 600,
       "textDecoration": "none",
-      "color": "var(--grey-11)"
+      "color": "var(--grey-12)"
     }
   },
   "meta": {
@@ -749,7 +748,7 @@ var typography = {
           "fontSize": "14px",
           "fontWeight": 400,
           "textDecoration": "none",
-          "color": "var(--grey-a11)"
+          "color": "var(--grey-a8)"
         },
         "default": {
           "textAlign": "center",
@@ -763,7 +762,7 @@ var typography = {
           "fontSize": "12px",
           "fontWeight": 700,
           "textDecoration": "none",
-          "color": "calendar: "
+          "color": "var(--grey-a12)"
         }
       },
       "monthLink": {
@@ -775,7 +774,7 @@ var typography = {
           "textTransform": "uppercase",
           "letterSpacing": "0.4px",
           "textDecoration": "none",
-          "color": "var(--grey-8)"
+          "color": "var(--grey-9)"
         },
         "hover": {
           "textAlign": "center",
@@ -829,7 +828,7 @@ var typography = {
         "fontSize": "13px",
         "fontWeight": 500,
         "textDecoration": "none",
-        "color": "var(--white-11)"
+        "color": "var(--grey-a12)"
       }
     },
     "presetAction": {
@@ -837,7 +836,7 @@ var typography = {
       "fontSize": "13px",
       "fontWeight": 500,
       "textDecoration": "none",
-      "color": "var(--white-11)"
+      "color": "var(--gray-12)"
     },
     "filterButton": {
       "default": {
@@ -876,7 +875,7 @@ var typography = {
         "fontSize": "12px",
         "fontWeight": 400,
         "textDecoration": "none",
-        "color": "var(--grey-11)"
+        "color": "var(--grey-12)"
       }
     }
   },
@@ -895,7 +894,7 @@ var typography = {
       "textAlign": "left",
       "fontSize": "20px",
       "fontWeight": 400,
-      "textShadow": "0px 0px 10px #ffffffcc",
+      "textShadow": "0px 0px 10px var(--white-a5)",
       "textDecoration": "none",
       "color": "var(--grey-11)"
     },
@@ -915,17 +914,18 @@ var colors = {
   "pureTop": "var(--black-1)",
   "divider": "var(--grey-6)",
   "icons": {
-    "inverse": "var(--white-1)",
-    "mono": "var(--black-9)",
-    "dimmed": "var(--grey-9)",
-    "subtle": "var(--white-9)",
+    "inverse": "var(--grey-1)",
+    "mono": "var(--grey-12)",
+    "dimmed": "var(--grey-11)",
+    "subtle": "var(--grey-10)",
     "primary": "var(--primary-9)",
-    "danger": "var(--error-9)"
+    "danger": "var(--error-9)",
+    "white": "var(--white-1)"
   },
   "menu": {
     "active": "var(--primary-9)",
-    "hover": "var(--primary-6)",
-    "default": "var(--primary-a6)",
+    "hover": "var(--primary-8)",
+    "default": "var(--gray-2)",
     "indicator": "var(--grey-a1)",
     "passive": "var(--primary-a7)"
   },
@@ -937,7 +937,7 @@ var colors = {
     "warning": "var(--warning-8)"
   },
   "status": {
-    "caution": "var(--warning-7)",
+    "caution": "var(--warning-10)",
     "danger": "var(--error-8)",
     "folder": "var(--primary-7)",
     "highlight": "var(--primary-7)",
@@ -960,13 +960,13 @@ var styles = {
     "input": {
       "default": {
         "normal": {
-          "backgroundColor": "var(--white-1)",
+          "backgroundColor": "var(--grey-1)",
           "borderColor": colors.input.border["default"],
           "border": colors.input.border["default"] + " 1px solid"
         },
         "focused": {
-          "boxShadow": "0px 3px 7px 0px var(--primary-a11)",
-          "backgroundColor": "var(--white-1)",
+          "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
+          "backgroundColor": "var(--grey-1)",
           "borderColor": "var(--primary-7)",
           "border": "var(--primary-7) 1px solid"
         }
@@ -983,49 +983,52 @@ var styles = {
       },
       "required": {
         "focused": {
-          "boxShadow": "0px 3px 7px 0px var(--primary-a11)",
-          "backgroundColor": "var(--white-1)",
+          "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
+          "backgroundColor": "var(--grey-1)",
           "borderColor": "var(--primary-7)",
           "border": "var(--primary-7) 2px solid"
         },
         "normal": {
           "borderColor": "var(--primary-7)",
-          "border": "var(--primary-7) 1px solid"
+          "border": "var(--primary-7) 1px solid",
+          "backgroundColor": "var(--grey-1)"
         }
       },
       "valid": {
         "focused": {
-          "boxShadow": "0px 3px 5px 0px var(--success-a12)",
-          "backgroundColor": "var(--white-1)",
+          "boxShadow": "0px 3px 5px 0px var(--success-a2)",
+          "backgroundColor": "var(--grey-1)",
           "borderColor": "var(--success-7)",
           "border": "var(--success-7) 2px solid"
         },
         "normal": {
           "borderColor": "var(--success-7)",
-          "border": "var(--success-7) 1px solid"
+          "border": "var(--success-7) 1px solid",
+          "backgroundColor": "var(--grey-1)"
         }
       },
       "invalid": {
         "focused": {
-          "boxShadow": "0px 3px 7px 0px var(--error-a1)",
-          "backgroundColor": "var(--white-1)",
+          "boxShadow": "0px 3px 7px 0px var(--error-a2)",
+          "backgroundColor": "var(--grey-1)",
           "borderColor": "var(--error-8)",
           "border": "var(--error-8) 2px solid"
         },
         "normal": {
           "borderColor": "var(--error-8)",
-          "border": "var(--error-8) 1px solid"
+          "border": "var(--error-8) 1px solid",
+          "backgroundColor": "var(--grey-1)"
         }
       },
       "processing": {
         "focused": {
-          "boxShadow": "0px 3px 7px 0px var(--primary-a10)",
-          "backgroundColor": "var(--white-1)",
+          "boxShadow": "0px 3px 7px 0px var(--primary-a2)",
+          "backgroundColor": "var(--grey-1)",
           "borderColor": "var(--primary-7)",
           "border": "var(--primary-7) 2px solid"
         },
         "normal": {
-          "backgroundColor": "var(--white-1)",
+          "backgroundColor": "var(--grey-1)",
           "borderColor": "var(--primary-7)",
           "border": "var(--primary-7) 1px solid"
         }
@@ -1043,45 +1046,46 @@ var styles = {
     "button": {
       "primary": {
         "default": {
-          "backgroundColor": "var(--primary-7)",
-          "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
+          "backgroundColor": "var(--primary-9)",
+          "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
         },
         "hover": {
-          "backgroundColor": "var(--primary-8)"
+          "backgroundColor": "var(--primary-10)"
         },
         "active": {
-          "backgroundColor": "var(--primary-7)"
+          "backgroundColor": "var(--primary-9)"
         },
         "divider": {
-          "backgroundColor": "var(--primary-7)"
+          "backgroundColor": "var(--primary-a8)"
         },
         "disabled": {
-          "backgroundColor": "var(--primary-7)",
-          "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
+          "backgroundColor": "var(--primary-a10)",
+          "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
         },
         "actionArea": {
-          "backgroundColor": "var(--primary-7)",
-          "backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
+          "backgroundColor": "var(--primary-9)",
+          "backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
         }
       },
       "secondary": {
         "default": {
-          "backgroundColor": "var(--grey-5)"
+          "backgroundColor": "var(--grey-9)"
         },
         "hover": {
-          "backgroundColor": "var(--grey-5)"
+          "backgroundColor": "var(--grey-10)"
         },
         "active": {
-          "backgroundColor": "var(--grey-6)"
+          "backgroundColor": "var(--grey-9)"
         },
         "disabled": {
-          "backgroundColor": "var(--grey-2)"
+          "backgroundColor": "var(--grey-a10)"
         },
         "divider": {
           "backgroundColor": "var(--grey-a8)"
         },
         "actionArea": {
-          "backgroundColor": "var(--grey-a3)"
+          "backgroundColor": "var(--grey-9)",
+          "backgroundImage": "linear-gradient(135.00deg, var(--grey-9) 0%, var(--grey-8) 100%)"
         }
       },
       "danger": {
@@ -1090,13 +1094,13 @@ var styles = {
           "backgroundImage": "linear-gradient(317.51deg, var(--error-9) 0%, var(--error-8) 100%)"
         },
         "hover": {
-          "backgroundColor": "var(--error-9)"
+          "backgroundColor": "var(--error-10)"
         },
         "active": {
-          "backgroundColor": "var(--error-8)"
+          "backgroundColor": "var(--error-9)"
         },
         "disabled": {
-          "backgroundColor": "var(--error-6)"
+          "backgroundColor": "var(--error-a10)"
         },
         "divider": {
           "backgroundColor": "var(--error-8)"
@@ -1123,8 +1127,8 @@ var styles = {
         },
         "disabled": {
           "outer": {
-            "backgroundColor": "var(--white-1)",
-            "backgroundImage": "linear-gradient(180.00deg, var(--white-1) 0%, var(--grey-1) 100%)",
+            "backgroundColor": "var(--grey-1)",
+            "backgroundImage": "linear-gradient(180.00deg, var(--grey-1)0%, var(--grey-1) 100%)",
             "borderColor": "var(--grey-a7)",
             "border": "var(--grey-a7) 1px solid"
           },
@@ -1232,13 +1236,13 @@ var styles = {
       "locked": {
         "default": {
           "outer": {
-            "backgroundColor": "var(--white-1)",
-            "backgroundImage": "linear-gradient(180.00deg, var(--white-1) 0%, var(--grey-1) 100%)",
-            "borderColor": "var(--grey-a7)",
-            "border": "var(--grey-a7) 1px solid"
+            "backgroundColor": "var(--grey-1) ",
+            "backgroundImage": "linear-gradient(180.00deg, var(--grey-1) 0%, var(--grey-1) 100%)",
+            "borderColor": "var(--grey-a8)",
+            "border": "var(--grey-a8) 1px solid"
           },
           "inner": {
-            "backgroundColor": "var(--grey-6)"
+            "backgroundColor": "var(--grey-8)"
           }
         }
       }
@@ -1251,12 +1255,12 @@ var styles = {
           "border": "var(--grey-6) 2px solid"
         },
         "default": {
-          "borderColor": "var(--grey-8)",
-          "border": "var(--grey-8) 2px solid"
+          "borderColor": "var(--grey-9)",
+          "border": "var(--grey-9) 2px solid"
         },
         "hover": {
-          "borderColor": "var(--primary-7)",
-          "border": "var(--primary-7) 2px solid"
+          "borderColor": "var(--primary-8)",
+          "border": "var(--primary-8) 2px solid"
         }
       },
       "checked": {
@@ -1266,11 +1270,11 @@ var styles = {
         },
         "default": {
           "boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
-          "backgroundColor": "var(--primary-7)"
+          "backgroundColor": "var(--primary-8)"
         },
         "hover": {
           "boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
-          "backgroundColor": "var(--primary-7)"
+          "backgroundColor": "var(--primary-8)"
         }
       },
       "indeterminate": {
@@ -1316,7 +1320,7 @@ var styles = {
     "drawer": {
       "background": {
         "boxShadow": "-5px 0px 10px 0px var(--white-a2)",
-        "backgroundColor": "var(--white-1)"
+        "backgroundColor": "var(--grey-1)"
       }
     },
     "topBar": {
@@ -1346,1115 +1350,150 @@ var styles = {
           "borderColor": "var(--grey-8)",
           "border": "var(--grey-8) 3px solid"
         }
-      },
-      "primary": {
-        "top": {
-          "borderColor": "var(--white-1)",
-          "border": "var(--white-1) 3px solid"
-        },
-        "base": {
-          "borderColor": "var(--primary-6)",
-          "border": "var(--primary-6) 3px solid"
-        }
-      },
-      "simple": {
-        "top": {
-          "borderColor": "var(--white-1)",
-          "border": "var(--white-1) 3px solid"
-        },
-        "base": {
-          "borderColor": "var(--grey-a8)",
-          "border": "var(--grey-a8) 3px solid"
-        }
-      }
-    }
-  },
-  "filters": {
-    "dropdownContainer": {
-      "background": {
-        "boxShadow": "0px 5px 25px 0px var(--primary-a1)",
-        "backgroundColor": "var(--white-1)",
-        "borderColor": "var(--grey-6)",
-        "border": "var(--grey-6) 1px solid"
-      },
-      "topBorder": {
-        "backgroundColor": "var(--primary-7)"
-      }
-    },
-    "filterButton": {
-      "default": {
-        "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
-        "backgroundColor": "var(--grey-2)",
-        "borderColor": "var(--grey-7)",
-        "border": "var(--grey-7) 1px solid",
-        "textColor": "var(--grey-11)"
-      },
-      "active": {
-        "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
-        "backgroundColor": "var(--primary-7)",
-        "borderColor": "var(--primary-7)",
-        "border": "var(--primary-7) 1px solid",
-        "textColor": "var(--white-1)"
-      },
-      "hover": {
-        "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
-        "backgroundColor": "var(--primary-6)",
-        "borderColor": "var(--primary-7)",
-        "border": "var(--primary-7) 1px solid",
-        "textColor": "var(--white-1)"
-      }
-    },
-    "searchInput": {
-      "default": {
-        "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
-        "backgroundColor": "var(--white-1)",
-        "borderColor": "var(--grey-7)",
-        "border": "var(--grey-7) 1px solid"
-      },
-      "focused": {
-        "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
-        "backgroundColor": "var(--white-1)",
-        "borderColor": "var(--primary-6)",
-        "border": "var(--primary-6) 1px solid"
-      }
-    }
-  },
-  "tables": {
-    "loadingOverlay": {
-      "backgroundColor": "var(--grey-2)",
-      "backgroundImage": "linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%)"
-    },
-    "rows": {
-      "divider": {
-        "backgroundColor": colors.divider
-      }
-    },
-    "header": {
-      "groupLine": {
-        "backgroundColor": colors.divider
-      },
-      "divider": {
-        "backgroundColor": colors.divider
-      },
-      "sortable": {
-        "hover": {
-          "backgroundColor": "var(--grey-4)"
-        },
-        "default": {
-          "backgroundColor": "var(--grey-a4)"
-        }
-      }
-    }
-  },
-  "general": {
-    "divider": {
-      "backgroundColor": colors.divider
-    }
-  },
-  "feedbackBar": {
-    "neutral": {
-      "backgroundColor": colors.feedback.neutral
-    },
-    "error": {
-      "backgroundColor": colors.feedback.error
-    },
-    "info": {
-      "backgroundColor": colors.feedback.info
-    },
-    "success": {
-      "backgroundColor": colors.feedback.success
-    },
-    "warning": {
-      "backgroundColor": colors.feedback.warning
-    }
-  },
-  "filterButton": {
-    "active": {
-      "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
-      "backgroundColor": "var(--grey-2)",
-      "borderColor": "var(--primary-7)",
-      "border": "var(--primary-7) 1px solid"
-    }
-  },
-  "modal": {
-    "overlay": {
-      "backgroundColor": "var(--grey-a3)"
-    },
-    "container": {
-      "boxShadow": "0px 10px 15px 0px var(--primary-a1)",
-      "backgroundColor": "var(--white-1)",
-      "borderColor": "var(--grey-6)",
-      "border": "var(--grey-6) 1px solid"
-    }
-  }
-};
-var custom = {
-  "lines": {
-    "primary": {
-      label: {
-        fill: "#fff"
-      },
-      contrastLine: {
-        stroke: 'hsla(205deg, 80%, 45%, 100%);'
-      },
-      highlightLine: {
-        stroke: 'hsla(205deg, 45%, 90%, 90%);'
-      },
-      grabHandle: {
-        fill: 'hsla(205deg, 45%, 90%, 100%)',
-        stroke: 'hsla(205deg, 45%, 100%, 100%)'
-      },
-      point: {
-        fill: 'hsla(205deg, 45%, 90%, 100%)'
-      },
-      grabHandleContrast: {
-        stroke: 'hsla(205deg, 80%, 45%, 100%)'
-      },
-      grabHandleText: {
-        fill: 'hsla(205deg, 80%, 25%, 100%);'
-      },
-      handleBase: {
-        fill: 'hsla(235deg, 100%, 80%, 100%);'
-      },
-      handleRingLayer: {
-        stroke: 'hsla(205deg, 100%, 89%, 100%);'
-      },
-      handleReactiveFill: {
-        fill: 'hsla(192deg, 100%, 45%, 100%);'
-      },
-      handleReactiveRing: {
-        stroke: 'hsla(205deg, 100%, 36%, 27%);'
-      },
-      handleContrastLayer: {
-        stroke: 'hsla(205deg, 100%, 36%, 15%);'
-      },
-      stopStart: {
-        stopColor: ' hsla(205deg, 100%, 15%, 35%);'
-      },
-      stopEnd: {
-        stopColor: 'hsla(205deg, 100%, 15%, 0%)'
-      }
-    },
-    "secondary": {
-      label: {
-        fill: "#fff"
-      },
-      contrastLine: {
-        stroke: 'hsla(120deg, 80%, 45%, 100%);'
-      },
-      highlightLine: {
-        stroke: 'hsla(120deg, 45%, 90%, 90%);'
-      },
-      grabHandle: {
-        fill: 'hsla(120deg, 45%, 90%, 100%)',
-        stroke: 'hsla(120deg, 45%, 100%, 100%)'
-      },
-      point: {
-        fill: 'hsla(120deg, 45%, 90%, 100%)'
-      },
-      grabHandleContrast: {
-        stroke: 'hsla(120deg, 80%, 45%, 100%)'
-      },
-      grabHandleText: {
-        fill: 'hsla(120deg, 80%, 25%, 100%);'
-      },
-      handleBase: {
-        fill: 'hsla(150deg, 100%, 80%, 100%);'
-      },
-      handleRingLayer: {
-        stroke: 'hsla(120deg, 100%, 89%, 100%);'
-      },
-      handleReactiveFill: {
-        fill: 'hsla(108deg, 100%, 45%, 100%);'
-      },
-      handleReactiveRing: {
-        stroke: 'hsla(120deg, 100%, 36%, 27%);'
-      },
-      handleContrastLayer: {
-        stroke: 'hsla(120deg, 100%, 36%, 15%);'
-      },
-      stopStart: {
-        stopColor: ' hsla(120deg, 100%, 15%, 35%);'
-      },
-      stopEnd: {
-        stopColor: 'hsla(120deg, 100%, 15%, 0%)'
-      }
-    },
-    "danger": {
-      label: {
-        fill: "#fff"
-      },
-      contrastLine: {
-        stroke: 'hsla(0, 80%, 45%, 100%);'
-      },
-      highlightLine: {
-        stroke: 'hsla(0, 45%, 90%, 90%);'
-      },
-      grabHandle: {
-        fill: 'hsla(0, 45%, 90%, 100%)',
-        stroke: 'hsla(0, 45%, 100%, 100%)'
-      },
-      point: {
-        fill: 'hsla(0, 45%, 90%, 100%)'
-      },
-      grabHandleText: {
-        fill: 'hsla(0, 80%, 25%, 100%);'
-      },
-      grabHandleContrast: {
-        stroke: 'hsla(0, 80%, 45%, 100%)'
-      },
-      handleBase: {
-        fill: 'hsla(30deg, 100%, 80%, 100%);'
-      },
-      handleRingLayer: {
-        stroke: 'hsla(0, 100%, 89%, 100%);'
-      },
-      handleReactiveFill: {
-        fill: 'hsla(348deg, 100%, 45%, 100%);'
-      },
-      handleReactiveRing: {
-        stroke: 'hsla(0deg, 100%, 36%, 27%);'
-      },
-      handleContrastLayer: {
-        stroke: 'hsla(0deg, 100%, 36%, 15%);'
-      },
-      stopStart: {
-        stopColor: ' hsla(0, 100%, 15%, 35%);'
-      },
-      stopEnd: {
-        stopColor: 'hsla(0, 100%, 15%, 0%);'
-      }
-    }
-  }
-};
-var light = {
-  fontFamily: fontFamily,
-  dimensions: dimensions,
-  typography: typography,
-  colors: colors,
-  styles: styles,
-  animation: animation,
-  custom: custom,
-  deviceSize: deviceSize,
-  deviceMediaQuery: deviceMediaQuery
-};
-var typography$1 = {
-  "form": {
-    "label": {
-      "default": {
-        "textAlign": "left",
-        "fontSize": "14px",
-        "fontWeight": 400,
-        "textDecoration": "none",
-        "color": "hsla(207, 5%, 56.7%, 1.000)"
-      }
-    },
-    "input": {
-      "label": {
-        "textAlign": "left",
-        "fontSize": "14px",
-        "fontWeight": 400,
-        "textDecoration": "none",
-        "color": "hsla(207, 5%, 56.7%, 1.000)"
-      },
-      "placeholder": {
-        "normal": {
-          "textAlign": "left",
-          "fontStyle": "italic",
-          "fontSize": "16px",
-          "fontWeight": 500,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 46.3%, 1.000)"
-        }
-      },
-      "value": {
-        "normal": {
-          "textAlign": "left",
-          "fontSize": "16px",
-          "fontWeight": 500,
-          "lineHeight": "25px",
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 96.9%, 1.000)"
-        }
-      }
-    },
-    "button": {
-      "secondary": {
-        "normal": {
-          "textAlign": "center",
-          "fontSize": "16px",
-          "fontWeight": 600,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 91.4%, 1.000)"
-        },
-        "large": {
-          "textAlign": "center",
-          "fontSize": "20px",
-          "fontWeight": 600,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 91.4%, 1.000)"
-        },
-        "small": {
-          "textAlign": "center",
-          "fontSize": "14px",
-          "fontWeight": 600,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 91.4%, 1.000)"
-        },
-        "xsmall": {
-          "textAlign": "center",
-          "fontSize": "12px",
-          "fontWeight": 600,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 91.4%, 1.000)"
-        }
-      }
-    }
-  },
-  "global": {
-    "mainMenu": {
-      "subItem": {
-        "default": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 100%, 0.549)"
-        },
-        "hover": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 100%, 0.800)"
-        }
-      },
-      "subheader": {
-        "textAlign": "left",
-        "fontSize": "14px",
-        "fontWeight": 600,
-        "textTransform": "uppercase",
-        "letterSpacing": "0.35px",
-        "textDecoration": "none",
-        "color": "hsla(0, 0%, 100%, 0.545)"
-      },
-      "identity": {
-        "textAlign": "left",
-        "fontSize": "12px",
-        "fontWeight": 400,
-        "textDecoration": "none",
-        "color": "hsla(0, 0%, 88.6%, 0.651)"
-      },
-      "menuItem": {
-        "active": {
-          "textAlign": "left",
-          "fontSize": "16px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 100%, 1.000)"
-        },
-        "default": {
-          "textAlign": "left",
-          "fontSize": "16px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 100%, 1.000)"
-        },
-        "hover": {
-          "textAlign": "left",
-          "fontSize": "16px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 100%, 1.000)"
-        }
-      },
-      "hidePrompt": {
-        "textAlign": "left",
-        "fontSize": "14px",
-        "fontWeight": 300,
-        "textDecoration": "none",
-        "color": "hsla(203, 13.2%, 73.3%, 1.000)"
-      },
-      "sub-MenuItem": {
-        "default": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(203, 6.6%, 76.1%, 1.000)"
-        },
-        "active": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(203, 6.6%, 76.1%, 1.000)"
-        },
-        "hover": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(203, 6.6%, 76.1%, 1.000)"
-        }
-      }
-    },
-    "topBar": {
-      "search": {
-        "value": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 300,
-          "textDecoration": "none",
-          "color": "hsla(0, 0%, 34.9%, 1.000)"
-        }
-      }
-    }
-  },
-  "pageHeader": {
-    "introduction": {
-      "textAlign": "left",
-      "fontSize": "14px",
-      "fontWeight": 300,
-      "lineHeight": "20px",
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 85.9%, 1.000)"
-    },
-    "mainTitle": {
-      "textAlign": "left",
-      "fontSize": "26px",
-      "fontWeight": 600,
-      "textDecoration": "none",
-      "color": "hsla(208, 17.8%, 85.7%, 1.000)"
-    },
-    "areaTitle": {
-      "textAlign": "left",
-      "fontSize": "12px",
-      "fontWeight": 400,
-      "textDecoration": "none",
-      "color": "hsla(205, 7.6%, 69%, 1.000)"
-    }
-  },
-  "styleGuide": {
-    "guideTitle": {
-      "textAlign": "left",
-      "fontSize": "24px",
-      "fontWeight": 300,
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 48.2%, 1.000)",
-      "textTransform": "uppercase",
-      "letterSpacing": "0.4px"
-    },
-    "guideNotes": {
-      "textAlign": "left",
-      "fontStyle": "italic",
-      "fontSize": "14px",
-      "fontWeight": 300,
-      "lineHeight": "30px",
-      "paragraphSpacing": "15px",
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 48.2%, 1.000)"
-    },
-    "itemName": {
-      "textAlign": "left",
-      "fontSize": "12px",
-      "fontWeight": 300,
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 22.7%, 1.000)"
-    },
-    "guideAreaSubtitle": {
-      "textAlign": "left",
-      "fontSize": "16px",
-      "fontWeight": 300,
-      "textTransform": "uppercase",
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 48.2%, 1.000)"
-    },
-    "guideAreaTitle": {
-      "textAlign": "left",
-      "fontSize": "20px",
-      "fontWeight": 300,
-      "textTransform": "uppercase",
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 48.2%, 1.000)"
-    }
-  },
-  "active": {
-    "textAlign": "left",
-    "fontSize": "14px",
-    "fontWeight": 600,
-    "textDecoration": "none",
-    "color": "hsla(0, 0%, 100%, 0.800)"
-  },
-  "filters": {
-    "filterButton": {
-      "default": {
-        "textAlign": "left",
-        "fontSize": "12px",
-        "fontWeight": 400,
-        "textDecoration": "none",
-        "color": "hsla(0, 0%, 86.3%, 1.000)"
-      },
-      "active": {
-        "textAlign": "left",
-        "fontSize": "12px",
-        "fontWeight": 400,
-        "textDecoration": "none",
-        "color": "hsla(0, 0%, 100%, 1.000)"
-      },
-      "hover": {
-        "textAlign": "left",
-        "fontSize": "12px",
-        "fontWeight": 400,
-        "textDecoration": "none",
-        "color": "hsla(0, 0%, 100%, 1.000)"
-      }
-    },
-    "searchInput": {
-      "placeholder": {
-        "textAlign": "left",
-        "fontStyle": "italic",
-        "fontSize": "12px",
-        "fontWeight": 500,
-        "textDecoration": "none",
-        "color": "hsla(0, 0%, 46.3%, 1.000)"
-      },
-      "value": {
-        "textAlign": "left",
-        "fontSize": "12px",
-        "fontWeight": 400,
-        "textDecoration": "none",
-        "color": "hsla(0, 0%, 96.9%, 1.000)"
-      }
-    }
-  },
-  "table": {
-    "columnData": {
-      "firstColumn": {
-        "textAlign": "left",
-        "fontSize": "14px",
-        "fontWeight": 500,
-        "textDecoration": "none",
-        "color": "hsla(196, 25.3%, 82.2%, 1.000)"
-      },
-      "lowImportance": {
-        "left": {
-          "textAlign": "left",
-          "fontStyle": "italic",
-          "fontSize": "14px",
-          "fontWeight": 500,
-          "textDecoration": "none",
-          "color": "hsla(197, 7.4%, 52.2%, 1.000)"
-        },
-        "center": {
-          "textAlign": "center",
-          "fontStyle": "italic",
-          "fontSize": "14px",
-          "fontWeight": 500,
-          "textDecoration": "none",
-          "color": "hsla(197, 7.4%, 52.2%, 1.000)"
-        },
-        "right": {
-          "textAlign": "right",
-          "fontStyle": "italic",
-          "fontSize": "14px",
-          "fontWeight": 500,
-          "textDecoration": "none",
-          "color": "hsla(197, 7.4%, 52.2%, 1.000)"
-        }
-      },
-      "highImportance": {
-        "left": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 900,
-          "textDecoration": "none",
-          "color": "hsla(196, 25.3%, 82.2%, 1.000)"
-        },
-        "right": {
-          "textAlign": "right",
-          "fontSize": "14px",
-          "fontWeight": 900,
-          "textDecoration": "none",
-          "color": "hsla(196, 25.3%, 82.2%, 1.000)"
-        },
-        "center": {
-          "textAlign": "center",
-          "fontSize": "14px",
-          "fontWeight": 900,
-          "textDecoration": "none",
-          "color": "hsla(196, 25.3%, 82.2%, 1.000)"
-        }
-      },
-      "normalImportance": {
-        "right": {
-          "textAlign": "right",
-          "fontSize": "14px",
-          "fontWeight": 500,
-          "textDecoration": "none",
-          "color": "hsla(196, 10.9%, 73.1%, 1.000)"
-        },
-        "center": {
-          "textAlign": "center",
-          "fontSize": "14px",
-          "fontWeight": 500,
-          "textDecoration": "none",
-          "color": "hsla(196, 10.9%, 73.1%, 1.000)"
-        },
-        "left": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 500,
-          "textDecoration": "none",
-          "color": "hsla(196, 10.9%, 73.1%, 1.000)"
-        }
-      },
-      "unit": {
-        "textAlign": "right",
-        "fontStyle": "italic",
-        "fontSize": "12px",
-        "fontWeight": 500,
-        "textDecoration": "none",
-        "color": "hsla(193, 9.7%, 63.5%, 1.000)"
-      }
-    },
-    "header": {
-      "right": {
-        "textAlign": "right",
-        "fontSize": "14px",
-        "fontWeight": 700,
-        "letterSpacing": "0.4px",
-        "textDecoration": "none",
-        "color": "hsla(204, 10.6%, 81.6%, 1.000)"
-      },
-      "left": {
-        "textAlign": "left",
-        "fontSize": "14px",
-        "fontWeight": 700,
-        "letterSpacing": "0.4px",
-        "textDecoration": "none",
-        "color": "hsla(204, 10.6%, 81.6%, 1.000)"
-      },
-      "center": {
-        "textAlign": "center",
-        "fontSize": "14px",
-        "fontWeight": 700,
-        "letterSpacing": "0.4px",
-        "textDecoration": "none",
-        "color": "hsla(204, 10.6%, 81.6%, 1.000)"
-      }
-    },
-    "subHeader": {
-      "right": {
-        "textAlign": "right",
-        "fontSize": "14px",
-        "fontWeight": 700,
-        "letterSpacing": "0.4px",
-        "textDecoration": "none",
-        "color": "hsla(204, 10.6%, 81.6%, 1.000)"
-      },
-      "left": {
-        "textAlign": "left",
-        "fontSize": "14px",
-        "fontWeight": 700,
-        "letterSpacing": "0.4px",
-        "textDecoration": "none",
-        "color": "hsla(204, 10.6%, 81.6%, 1.000)"
-      },
-      "center": {
-        "textAlign": "center",
-        "fontSize": "14px",
-        "fontWeight": 700,
-        "letterSpacing": "0.4px",
-        "textDecoration": "none",
-        "color": "hsla(204, 10.6%, 81.6%, 1.000)"
-      }
-    }
-  },
-  "tables": {
-    "groupName": {
-      "textAlign": "left",
-      "fontSize": "12px",
-      "fontWeight": 400,
-      "letterSpacing": "0.3px",
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 56.5%, 1.000)"
-    }
-  },
-  "meta": {
-    "tagList": {
-      "item": {
-        "normal": {
-          "textAlign": "left",
-          "fontSize": "14px",
-          "fontWeight": 600,
-          "textDecoration": "none",
-          "color": "hsla(200, 3%, 38.8%, 1.000)"
-        }
-      }
-    }
-  },
-  "searchBar": {
-    "placeholder": {
-      "textAlign": "left",
-      "fontStyle": "italic",
-      "fontSize": "14px",
-      "fontWeight": 700,
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 46.3%, 0.647)"
-    }
-  },
-  "modal": {
-    "basicContent": {
-      "textAlign": "left",
-      "fontSize": "14px",
-      "fontWeight": 400,
-      "lineHeight": "25px",
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 86.3%, 1.000)"
-    },
-    "title": {
-      "textAlign": "left",
-      "fontSize": "20px",
-      "fontWeight": 400,
-      "textShadow": "0px 0px 10px #1a97e959",
-      "textDecoration": "none",
-      "color": "hsla(0, 0%, 86.3%, 1.000)"
-    }
-  }
-};
-var colors$1 = {
-  "divider": "hsla(240, 4.7%, 25.1%, 1.000)",
-  "menu": {
-    "active": "hsla(215, 66.3%, 59.2%, 1.000)",
-    "hover": "hsla(215, 19.1%, 36.9%, 1.000)",
-    "default": "hsla(215, 19.1%, 36.9%, 0.000)"
-  },
-  "icons": {
-    "subtle": "hsla(207, 4.8%, 37.1%, 1.000)",
-    "dimmed": "hsla(0, 0%, 65.1%, 1.000)",
-    "inverse": "hsla(0, 0%, 25.1%, 1.000)",
-    "mono": "hsla(0, 0%, 100%, 1.000)",
-    "danger": "hsla(0, 100%, 70%, 1.000)",
-    "primary": "hsla(205, 100%, 65.1%, 1.000)"
-  },
-  "status": {
-    "good": "hsla(126, 48.1%, 68.2%, 1.000)"
-  },
-  "input": {
-    "border": {
-      "default": "hsla(120, 1.3%, 85.3%, 1.000)"
-    }
-  }
-};
-var styles$1 = {
-  "global": {
-    "mainMenu": {
-      "background": {
-        "boxShadow": "5px 0px 10px 0px hsla(205, 14%, 16.9%, 0.251)",
-        "backgroundColor": "hsla(210, 7.9%, 14.9%, 1.000)"
-      },
-      "footerBackground": {
-        "backgroundColor": "hsla(210, 7.9%, 14.9%, 0.800)"
-      },
-      "lines": {
-        "backgroundColor": "hsla(225, 3.5%, 22.4%, 1.000)"
-      },
-      "iconBackground": {
-        "default": {
-          "backgroundColor": colors$1.menu["default"]
-        },
-        "hover": {
-          "backgroundColor": colors$1.menu.hover
+      },
+      "primary": {
+        "top": {
+          "borderColor": "var(--white-1)",
+          "border": "var(--white-1) 3px solid"
         },
-        "active": {
-          "backgroundColor": colors$1.menu.active
+        "base": {
+          "borderColor": "var(--primary-6)",
+          "border": "var(--primary-6) 3px solid"
         }
       },
-      "desktop": {
-        "open": {}
+      "simple": {
+        "top": {
+          "borderColor": "var(--white-1)",
+          "border": "var(--white-1) 3px solid"
+        },
+        "base": {
+          "borderColor": "var(--grey-a8)",
+          "border": "var(--grey-a8) 3px solid"
+        }
       }
-    },
-    "drawer": {
+    }
+  },
+  "filters": {
+    "dropdownContainer": {
       "background": {
-        "boxShadow": "5px 0px 10px 0px hsla(205, 14%, 16.9%, 0.251)",
-        "backgroundColor": "hsla(210, 7.9%, 14.9%, 1.000)"
+        "boxShadow": "0px 5px 25px 0px var(--primary-a1)",
+        "backgroundColor": "var(--grey-1)",
+        "borderColor": "var(--grey-6)",
+        "border": "var(--grey-6) 1px solid"
+      },
+      "topBorder": {
+        "backgroundColor": "var(--primary-7)"
       }
     },
-    "topBar": {
-      "lines": {
-        "backgroundColor": "hsla(225, 3.5%, 22.4%, 1.000)"
+    "filterButton": {
+      "default": {
+        "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
+        "backgroundColor": "var(--grey-1)",
+        "borderColor": "var(--grey-7)",
+        "border": "var(--grey-7) 1px solid",
+        "textColor": "var(--grey-11)"
+      },
+      "active": {
+        "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
+        "backgroundColor": "var(--primary-7)",
+        "borderColor": "var(--primary-7)",
+        "border": "var(--primary-7) 1px solid",
+        "textColor": "var(--white-1)"
+      },
+      "hover": {
+        "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
+        "backgroundColor": "var(--primary-7)",
+        "borderColor": "var(--primary-7)",
+        "border": "var(--primary-7) 1px solid",
+        "textColor": "var(--white-1)"
       }
     },
-    "background": {
-      "backgroundColor": "hsla(220, 4.2%, 13.9%, 1.000)",
-      "backgroundImage": "linear-gradient(180.00deg, hsla(220, 4.2%, 13.9%, 1.000) 0%, hsla(220, 4.9%, 12%, 1.000) 100%)"
-    }
-  },
-  "general": {
-    "divider": {
-      "backgroundColor": "hsla(213, 11.6%, 18.6%, 1.000)"
+    "searchInput": {
+      "default": {
+        "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
+        "backgroundColor": "var(--grey-1)",
+        "borderColor": "var(--grey-7)",
+        "border": "var(--grey-7) 1px solid"
+      },
+      "focused": {
+        "boxShadow": "0px 4px 9px 0px var(--primary-a2)",
+        "backgroundColor": "var(--grey-1)",
+        "borderColor": "var(--primary-6)",
+        "border": "var(--primary-6) 1px solid"
+      }
     }
   },
   "tables": {
     "loadingOverlay": {
-      "backgroundColor": "hsla(220, 4.2%, 13.9%, 0.851)",
-      "backgroundImage": "linear-gradient(180.00deg, hsla(220, 4.2%, 13.9%, 0.851) 0%, hsla(220, 4.2%, 13.9%, 1.000) 100%)"
+      "backgroundColor": "var(--grey-2)",
+      "backgroundImage": "linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%)"
     },
     "rows": {
       "divider": {
-        "backgroundColor": colors$1.divider
+        "backgroundColor": colors.divider
       }
     },
     "header": {
       "groupLine": {
-        "backgroundColor": "hsla(240, 4.7%, 25.1%, 1.000)"
+        "backgroundColor": colors.divider
       },
       "divider": {
-        "backgroundColor": colors$1.divider
+        "backgroundColor": colors.divider
       },
       "sortable": {
-        "default": {
-          "backgroundColor": "hsla(221, 15.9%, 38.2%, 0.000)"
-        },
         "hover": {
-          "backgroundColor": "hsla(221, 15.9%, 38.2%, 1.000)"
+          "backgroundColor": "var(--grey-4)"
+        },
+        "default": {
+          "backgroundColor": "var(--grey-2)"
         }
       }
     }
   },
-  "filters": {
-    "filterButton": {
-      "hover": {
-        "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
-        "backgroundColor": "hsla(205, 86.8%, 70.4%, 1.000)",
-        "borderColor": "hsla(205, 100%, 72%, 1.000)",
-        "border": "hsla(205, 100%, 72%, 1.000) 1px solid",
-        "textColor": "hsla(0, 0%, 100%, 1.000)"
-      },
-      "default": {
-        "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
-        "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-        "borderColor": "hsla(210, 3.5%, 22.4%, 1.000)",
-        "border": "hsla(210, 3.5%, 22.4%, 1.000) 1px solid",
-        "textColor": "hsla(0, 0%, 86.3%, 1.000)"
-      },
-      "active": {
-        "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
-        "backgroundColor": "hsla(205, 81.2%, 64.5%, 1.000)",
-        "borderColor": "hsla(205, 100%, 72%, 1.000)",
-        "border": "hsla(205, 100%, 72%, 1.000) 1px solid",
-        "textColor": "hsla(0, 0%, 100%, 1.000)"
-      }
-    },
-    "searchInput": {
-      "default": {
-        "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
-        "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-        "borderColor": "hsla(210, 3.5%, 22.4%, 1.000)",
-        "border": "hsla(210, 3.5%, 22.4%, 1.000) 1px solid"
-      },
-      "focused": {
-        "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
-        "backgroundColor": "hsla(210, 14.3%, 19.2%, 1.000)",
-        "borderColor": "hsla(207, 19.8%, 34.7%, 1.000)",
-        "border": "hsla(207, 19.8%, 34.7%, 1.000) 1px solid"
-      }
-    },
-    "dropdownContainer": {
-      "topBorder": {
-        "backgroundColor": "hsla(205, 100%, 72%, 1.000)"
-      },
-      "background": {
-        "boxShadow": "0px 4px 9px 0px hsla(205, 68.4%, 7.5%, 0.071)",
-        "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-        "borderColor": colors$1.divider,
-        "border": colors$1.divider + " 1px solid"
-      }
+  "general": {
+    "divider": {
+      "backgroundColor": colors.divider
     }
   },
-  "form": {
-    "checkbox": {
-      "unchecked": {
-        "disabled": {
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(208, 24.6%, 77.6%, 1.000)",
-          "border": "hsla(208, 24.6%, 77.6%, 1.000) 2px solid"
-        },
-        "default": {
-          "borderColor": "hsla(208, 24.6%, 77.6%, 1.000)",
-          "border": "hsla(208, 24.6%, 77.6%, 1.000) 2px solid"
-        }
-      },
-      "checked": {
-        "default": {
-          "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
-          "backgroundColor": "hsla(207, 95.3%, 66.5%, 1.000)"
-        },
-        "disabled": {
-          "boxShadow": "inset 0px 1px 5px 0px hsla(205, 50.3%, 30%, 0.051)",
-          "backgroundColor": "hsla(207, 4.8%, 37.1%, 1.000)"
-        }
-      }
+  "feedbackBar": {
+    "neutral": {
+      "backgroundColor": colors.feedback.neutral
     },
-    "button": {
-      "secondary": {
-        "hover": {
-          "backgroundColor": "hsla(205, 33.3%, 32.9%, 1.000)"
-        },
-        "disabled": {
-          "backgroundColor": "hsla(205, 12.8%, 18.4%, 1.000)"
-        },
-        "actionArea": {
-          "backgroundColor": "hsla(0, 0%, 94.9%, 0.302)"
-        },
-        "default": {
-          "backgroundColor": "hsla(205, 15.1%, 28.6%, 1.000)"
-        },
-        "divider": {
-          "backgroundColor": "hsla(204, 18.2%, 78.4%, 0.302)"
-        },
-        "active": {
-          "backgroundColor": "hsla(205, 56.9%, 28.2%, 1.000)"
-        }
-      },
-      "danger": {
-        "disabled": {
-          "backgroundColor": "hsla(0,54%,38%, 1.000)"
-        },
-        "divider": {
-          "backgroundColor": "hsla(204, 18.2%, 78.4%, 0.302)"
-        }
-      }
+    "error": {
+      "backgroundColor": colors.feedback.error
     },
-    "input": {
-      "default": {
-        "normal": {
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(216, 3.4%, 28.8%, 1.000)",
-          "border": "hsla(216, 3.4%, 28.8%, 1.000) 1px solid"
-        },
-        "focused": {
-          "backgroundColor": "hsla(210, 14.3%, 19.2%, 1.000)",
-          "borderColor": "hsla(207, 19.8%, 34.7%, 1.000)",
-          "border": "hsla(207, 19.8%, 34.7%, 1.000) 1px solid",
-          "boxShadow": "0px 3px 7px 0px hsla(205, 68.4%, 7.5%, 0.071)"
-        }
-      },
-      "required": {
-        "normal": {
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)",
-          "border": "hsla(205, 58.9%, 71.4%, 1.000) 1px solid"
-        },
-        "focused": {
-          "boxShadow": "0px 3px 7px 0px hsla(207, 67.8%, 35.3%, 0.071)",
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(205, 58.9%, 71.4%, 1.000)",
-          "border": "hsla(205, 58.9%, 71.4%, 1.000) 2px solid"
-        }
-      },
-      "processing": {
-        "focused": {
-          "boxShadow": "0px 3px 7px 0px hsla(195, 67.8%, 35.3%, 0.071)",
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(195, 79.5%, 71.4%, 1.000)",
-          "border": "hsla(195, 79.5%, 71.4%, 1.000) 2px solid"
-        },
-        "normal": {
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(195, 79.5%, 71.4%, 1.000)",
-          "border": "hsla(195, 79.5%, 71.4%, 1.000) 1px solid"
-        }
-      },
-      "disabled": {
-        "normal": {
-          "backgroundColor": "hsla(220, 3.6%, 16.3%, 1.000)",
-          "borderColor": "hsla(220, 2.9%, 20.6%, 1.000)",
-          "border": "hsla(220, 2.9%, 20.6%, 1.000) 1px solid"
-        }
-      },
-      "valid": {
-        "normal": {
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(120, 35.2%, 71.6%, 1.000)",
-          "border": "hsla(120, 35.2%, 71.6%, 1.000) 1px solid"
-        },
-        "focused": {
-          "boxShadow": "0px 3px 5px 0px hsla(120, 76.6%, 15.1%, 0.071)",
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(120, 35.2%, 71.6%, 1.000)",
-          "border": "hsla(120, 35.2%, 71.6%, 1.000) 2px solid"
-        }
-      },
-      "invalid": {
-        "normal": {
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)",
-          "border": "hsla(0, 78.8%, 70.4%, 1.000) 1px solid"
-        },
-        "focused": {
-          "boxShadow": "0px 3px 7px 0px hsla(0, 100%, 50%, 0.102)",
-          "backgroundColor": "hsla(210, 4.3%, 18%, 1.000)",
-          "borderColor": "hsla(0, 78.8%, 70.4%, 1.000)",
-          "border": "hsla(0, 78.8%, 70.4%, 1.000) 2px solid"
-        }
-      }
+    "info": {
+      "backgroundColor": colors.feedback.info
+    },
+    "success": {
+      "backgroundColor": colors.feedback.success
+    },
+    "warning": {
+      "backgroundColor": colors.feedback.warning
     }
   },
-  "indicators": {
-    "spinner": {
-      "secondary": {
-        "top": {
-          "borderColor": "hsla(195, 59.4%, 72%, 1.000)",
-          "border": "hsla(195, 59.4%, 72%, 1.000) 3px solid"
-        },
-        "base": {
-          "borderColor": "hsla(0, 2%, 29.6%, 1.000)",
-          "border": "hsla(0, 2%, 29.6%, 1.000) 3px solid"
-        }
-      },
-      "simple": {
-        "base": {
-          "borderColor": "hsla(0, 0%, 76.9%, 0.329)",
-          "border": "hsla(0, 0%, 76.9%, 0.329) 3px solid"
-        },
-        "top": {
-          "borderColor": "hsla(0, 0%, 100%, 1.000)",
-          "border": "hsla(0, 0%, 100%, 1.000) 3px solid"
-        }
-      },
-      "primary": {
-        "base": {
-          "borderColor": "hsla(195, 54.1%, 30.8%, 1.000)",
-          "border": "hsla(195, 54.1%, 30.8%, 1.000) 3px solid"
-        },
-        "top": {
-          "borderColor": "hsla(210, 100%, 65.9%, 1.000)",
-          "border": "hsla(210, 100%, 65.9%, 1.000) 3px solid"
-        }
-      }
+  "filterButton": {
+    "active": {
+      "boxShadow": "0px 4px 9px 0px var(--primary-a1)",
+      "backgroundColor": "var(--grey-1)",
+      "borderColor": "var(--primary-7)",
+      "border": "var(--primary-7) 1px solid"
     }
   },
   "modal": {
-    "container": {
-      "boxShadow": "0px 10px 15px 0px hsla(205, 38.7%, 12.2%, 0.149)",
-      "backgroundColor": "hsla(210, 17.1%, 13.7%, 1.000)",
-      "borderColor": "hsla(206, 7.1%, 19.4%, 1.000)",
-      "border": "hsla(206, 7.1%, 19.4%, 1.000) 1px solid"
-    },
     "overlay": {
-      "backgroundColor": "hsla(203, 100%, 4.7%, 0.647)"
+      "backgroundColor": "var(--grey-a3)"
+    },
+    "container": {
+      "boxShadow": "0px 10px 15px 0px var(--primary-a1)",
+      "backgroundColor": "var(--grey-1)",
+      "borderColor": "var(--grey-6)",
+      "border": "var(--grey-6) 1px solid"
     }
   }
 };
-var custom$1 = {
+var custom = {
   "lines": {
     "primary": {
       label: {
@@ -2594,22 +1633,18 @@ var custom$1 = {
   }
 };
-var dark = {
+var light = {
   fontFamily: fontFamily,
   dimensions: dimensions,
-  typography: typography$1,
-  colors: colors$1,
-  styles: styles$1,
+  typography: typography,
+  colors: colors,
+  styles: styles,
   animation: animation,
-  custom: custom$1,
+  custom: custom,
   deviceSize: deviceSize,
   deviceMediaQuery: deviceMediaQuery
 };
-function themeFallbackHelper(theme, themeFallback) {
-  return defaultsDeep({}, theme, themeFallback);
-}
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2691,7 +1726,7 @@ var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$
 var IconButton = styled__default.button(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    opacity: .8;\n  }\n  &:active:enabled {\n    opacity: .9;\n  }\n  &:disabled {\n    opacity: 0.1;\n  }\n"])), resetButtonStyles, function (_ref) {
   var _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected;
-  return selected && styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid hsl(207, 80%, 64%);\n  "])));
+  return selected && styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid var(--primary-7);\n  "])));
 });
 var AlertWrapper = styled__default.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  min-height: 50px;\n  border-radius: 3px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 0 14px;\n\n  font-family: ", ";\n  ", ";\n  ", ";\n\n  ", " {\n    [stroke]{\n      stroke: ", ";\n    }\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
@@ -2779,7 +1814,7 @@ var IconNames$1 = {
 var IconButton$1 = styled__default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    opacity: .8;\n  }\n  &:active:enabled {\n    opacity: .9;\n  }\n  &:disabled {\n    opacity: 0.1;\n  }\n"])), resetButtonStyles, function (_ref7) {
   var _ref7$selected = _ref7.selected,
       selected = _ref7$selected === void 0 ? false : _ref7$selected;
-  return selected && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid hsl(207, 80%, 64%);\n  "])));
+  return selected && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid var(--primary-7);\n  "])));
 });
 var TextButton = styled__default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  ", ";\n  font-weight: 700;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n  &:active:enabled {\n    opacity: .9;\n  }\n  &:disabled {\n    opacity: 0.1;\n  }\n"])), resetButtonStyles, function (_ref8) {
   var theme = _ref8.theme;
@@ -2928,7 +1963,7 @@ var TextContainer = styled__default.div(_templateObject$5 || (_templateObject$5
   var theme = _ref2.theme;
   return theme && styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n    transition: padding ", " ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
 });
-var IconContainer = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ", "\n\n  svg {\n    display:block;\n    path, rect, circle, d {\n      stroke: hsla(0, 0%, 100%, 1.000);\n    }\n  }\n"])), function (_ref3) {
+var IconContainer = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ", "\n\n  svg {\n    display:block;\n    path, rect, circle, d {\n      stroke: var(--white-1);\n    }\n  }\n"])), function (_ref3) {
   var position = _ref3.position;
   return styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n    order: ", ";\n  "])), position && position === 'left' ? 0 : 2);
 });
@@ -3044,7 +2079,7 @@ var TextContainer$1 = styled__default.div(_templateObject3$6 || (_templateObject
   var theme = _ref2.theme;
   return theme && styled.css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n    transition: padding ", " ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
 });
-var LoadingContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  flex: 0 0 35px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  opacity: 0;\n\n  ", "\n\n  svg {\n    display:block;\n  }\n"])), function (_ref3) {
+var LoadingContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  flex: 0 0 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  opacity: 0;\n\n  ", "\n\n  svg {\n    display:block;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme,
       position = _ref3.position;
   return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n    transition:\n      flex ", " ", " ", ",\n      opacity ", " ", ";\n\n    order: ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut, theme.animation.speed.slow, theme.animation.speed.slow, theme.animation.easing.primary.easeInOut, position && position === 'left' ? 0 : 2);
@@ -3199,7 +2234,7 @@ var InputContainer = styled__default.div(_templateObject10$2 || (_templateObject
   var hasAction = _ref6.hasAction;
   return hasAction && styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n    ", "{\n      padding-right: 60px;\n\n      // Used to control password manager injection.\n      background-position: calc(100% - 50px) 50% !important;\n    }\n  "])), StyledInput);
 });
-var Container$2 = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n\n  ", "{\n    ", ";\n\n    &:focus {}\n\n    ", "\n  }\n\n  ", " {\n    background: ", ";\n    border-color: ", ";\n\n    ", "\n  }\n\n  &:focus-within ", " {\n    ", ";\n  }\n\n"])), StyledInput, function (_ref7) {
+var Container$2 = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n\n  ", "{\n    ", ";\n\n    &:focus {}\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n\n    ", "\n  }\n\n  ", " {\n    background: ", ";\n    border-color: ", ";\n\n    ", "\n  }\n\n  &:focus-within ", " {\n    ", ";\n  }\n"])), StyledInput, function (_ref7) {
   var theme = _ref7.theme,
       fieldState = _ref7.fieldState;
   return theme.styles.form.input[fieldState].normal;
@@ -3293,7 +2328,7 @@ var Input = function Input(_ref13) {
 var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
 var _templateObject$b, _templateObject2$a;
-var StyledLabel = styled__default.label(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 14px;\n  font-weight: 500;\n  ", ";\n"])), function (_ref) {
+var StyledLabel = styled__default.label(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-10);\n  font-size: 14px;\n  font-weight: 500;\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 }, function (_ref2) {
@@ -3338,7 +2373,7 @@ var InputContainer$1 = styled__default.div(_templateObject5$6 || (_templateObjec
   var hasAction = _ref3.hasAction;
   return hasAction && styled.css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n    ", "{\n      padding-right: 200px;\n\n      // Used to control password manager injection.\n      background-position: calc(100% - 50px) 50% !important;\n    }\n  "])), StyledInput$1);
 });
-var UnitKey = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 10px;\n  bottom: 0;\n  top:0;\n  font-family: ", ";\n  font-size: 12px;\n  color: #99a1a3;\n  line-height:30px;\n"])), function (_ref4) {
+var UnitKey = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 10px;\n  bottom: 0;\n  top:0;\n  font-family: ", ";\n  font-size: 12px;\n  color: var(--grey-10);\n  line-height:30px;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.ui;
 });
@@ -3465,6 +2500,10 @@ var Container$4 = styled__default.label(_templateObject7$5 || (_templateObject7$
   return p.useIntent && intentPosition(p.theme.dimensions.form["switch"].positions[getPositionKey(p.position)], p.checked);
 });
+var isTypeSwitchState = function isTypeSwitchState(value) {
+  return value === 'default' || value === 'loading' || value === 'locked' || value === 'disabled' || value === 'failure';
+};
 var Switch = function Switch(_ref4) {
   var _inputRef$current4;
@@ -3532,7 +2571,7 @@ var Switch = function Switch(_ref4) {
     updateThemeChoice();
   }, [leftTheme, rightTheme, updateThemeChoice]);
   React.useEffect(function () {
-    setSwitchState(stateCheck(state));
+    if (isTypeSwitchState(state)) setSwitchState(stateCheck(state));
   }, [state, setSwitchState]);
   React.useEffect(function () {
     if (state === 'locked') {
@@ -3827,7 +2866,7 @@ var FeedbackMessage$1 = styled__default.div(_templateObject7$8 || (_templateObje
   var theme = _ref4.theme;
   return theme.typography.form.feedback.message;
 });
-var Container$7 = styled__default.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ", "{\n    ", ";\n\n    &:focus {\n      box-shadow: 0px 3px 7px 0px hsla(207, 65.8%, 31%, 0.078);\n    }\n\n    ", "\n  }\n\n  ", " {\n    background: ", ";\n    border-color: ", ";\n\n    ", "\n  }\n\n  &:focus-within ", " {\n    ", ";\n\n    ", ";\n\n    ", ";\n  }\n\n"])), StyledTextArea, function (_ref5) {
+var Container$7 = styled__default.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ", "{\n    ", ";\n\n    &:focus {\n      box-shadow: 0px 3px 7px 0px var(--primary-a3);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n\n    ", "\n  }\n\n  ", " {\n    background: ", ";\n    border-color: ", ";\n\n    ", "\n  }\n\n  &:focus-within ", " {\n    ", ";\n\n    ", ";\n\n    ", ";\n  }\n\n"])), StyledTextArea, function (_ref5) {
   var theme = _ref5.theme,
       fieldState = _ref5.fieldState;
   return theme.styles.form.input[fieldState].normal;
@@ -3847,13 +2886,13 @@ var Container$7 = styled__default.div(_templateObject8$7 || (_templateObject8$7
   return ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      display:none;\n    "])));
 }, FeedbackContainer$1, function (_ref10) {
   var fieldState = _ref10.fieldState;
-  return fieldState === 'required' ? "\n      box-shadow: 0px 3px 7px 0px hsla(207, 67.8%, 35.3%, 0.071);\n    " : null;
+  return fieldState === 'required' ? "\n      box-shadow: 0px 3px 7px 0px var(--primary-a3);\n    " : null;
 }, function (_ref11) {
   var fieldState = _ref11.fieldState;
-  return fieldState === 'valid' ? "\n      box-shadow: 0px 3px 5px 0px hsla(120, 76.6%, 15.1%, 0.071);\n    " : null;
+  return fieldState === 'valid' ? "\n      box-shadow: 0px 3px 5px 0px var(--success-a3);\n    " : null;
 }, function (_ref12) {
   var fieldState = _ref12.fieldState;
-  return fieldState === 'invalid' ? "\n      box-shadow: 0px 3px 7px 0px hsla(0, 100%, 50%, 0.102);\n    " : null;
+  return fieldState === 'invalid' ? "\n      box-shadow: 0px 3px 7px 0px var(--error-a3);\n    " : null;
 });
 var TextArea = function TextArea(_ref13) {
@@ -3877,21 +2916,21 @@ var TextArea = function TextArea(_ref13) {
         return React__default.createElement(Icon, {
           icon: 'Required',
           size: 20,
-          color: 'inverse'
+          color: 'white'
         });
       case 'valid':
         return React__default.createElement(Icon, {
           icon: 'Success',
           size: 20,
-          color: 'inverse'
+          color: 'white'
         });
       case 'invalid':
         return React__default.createElement(Icon, {
           icon: 'Invalid',
           size: 20,
-          color: 'inverse'
+          color: 'white'
         });
       case 'processing':
@@ -4085,12 +3124,12 @@ var HiddenInput$1 = styled__default.input(_templateObject3$f || (_templateObject
   var disabled = _ref3.disabled;
   return disabled ? "not-allowed" : "pointer";
 });
-var Rail = styled__default.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", "px;\n  top: 10px;\n  width: calc(100% - ", "px);\n  height: 2px;\n  border-radius: 11px;\n  background-image: linear-gradient(to bottom, hsl(210, 30%, 96%), hsl(203, 42%, 94%) 98%);\n"])), ThumbDiameter / 2, ThumbDiameter);
-var Mark = styled__default.span(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -3px;\n  left: ", ";\n  width: 1px;\n  height: 9px;\n  opacity: 0.25;\n  background-color: hsl(205, 77%, 64%);\n"])), function (_ref4) {
+var Rail = styled__default.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", "px;\n  top: 10px;\n  width: calc(100% - ", "px);\n  height: 2px;\n  border-radius: 11px;\n  background-image: linear-gradient(to bottom, var(--grey-10), var(--primary-10) 98%);\n"])), ThumbDiameter / 2, ThumbDiameter);
+var Mark = styled__default.span(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -3px;\n  left: ", ";\n  width: 1px;\n  height: 9px;\n  opacity: 0.25;\n  background-color: var(--primary-11);\n"])), function (_ref4) {
   var leftValue = _ref4.leftValue;
   return "calc(" + leftValue + "% + 7px)";
 });
-var MarkLabel = styled__default.span(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -24px;\n  left: ", ";\n\n  font-size: 10px;\n  font-style: italic;\n  line-height: normal;\n  text-align: center;\n  color: hsla(195, 10%, 52%, 0.72);\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref5) {
+var MarkLabel = styled__default.span(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -24px;\n  left: ", ";\n\n  font-size: 10px;\n  font-style: italic;\n  line-height: normal;\n  text-align: center;\n  color: var(--grey-a11);\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref5) {
   var leftValue = _ref5.leftValue;
   return "calc(" + leftValue + "% + 7px)";
 }, function (_ref6) {
@@ -4367,12 +3406,12 @@ var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlle
 var _templateObject$k, _templateObject2$j, _templateObject3$h, _templateObject4$f, _templateObject5$d;
 var Container$a = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose([""])));
-var Headers = styled__default.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 30px;\n  padding: 0 6px;\n"])));
+var Headers = styled__default.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: var(--grey-10);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 30px;\n  padding: 0 6px;\n"])));
 var ValueLabel = styled__default(Label)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin-bottom: 0;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
-var Unit = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsla(195, 10%, 52%, 0.72);\n  font-style: italic;\n  font-size: 12px;\n  line-height: 1.5;\n"])), function (_ref2) {
+var Unit = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-a11);\n  font-style: italic;\n  font-size: 12px;\n  line-height: 1.5;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.data;
 });
@@ -4422,7 +3461,7 @@ var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateT
 var _templateObject$l, _templateObject2$k, _templateObject3$i;
 var Container$b = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose([""])));
-var Headers$1 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: hsl(207, 5%, 57%);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  padding: 0 6px;\n"])));
+var Headers$1 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: var(--grey-10);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  padding: 0 6px;\n"])));
 var ValueTitle$1 = styled__default(Label)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.data;
@@ -4575,7 +3614,7 @@ var Container$c = styled__default.div(_templateObject$m || (_templateObject$m =
 });
 var DragAndDrop = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  border-radius: 5px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: ", ";\n"])), function (_ref2) {
   var inDropZone = _ref2.inDropZone;
-  return inDropZone ? "dashed #afa9a9 2px" : null;
+  return inDropZone ? "dashed var(--grey-8) 2px" : null;
 });
 var DropArea = function DropArea(_ref3) {
@@ -4892,7 +3931,7 @@ var TopLine = styled__default.div(_templateObject2$m || (_templateObject2$m = _t
 var RightLine = styled__default.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: e-resize;\n  right: -3px;\n  top: 0;\n  width: 5px;\n  height: 100%;\n"])), CropLineStyle);
 var BottomLine = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  ", "\n  cursor: s-resize;\n  bottom: -3px;\n  height: 5px;\n  width: 100%;\n  left: 0;\n"])), CropLineStyle);
 var LeftLine = styled__default.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: w-resize;\n  left: -3px;\n  top: 0;\n  width: 5px;\n  height: 100%;\n"])), CropLineStyle);
-var resizeSquaresCss = styled.css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border: solid 1px hsl(0, 1%, 28%);\n  background-color: hsl(0, 0%, 100%);\n"])));
+var resizeSquaresCss = styled.css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border: solid 1px var(--black-a12);\n  background-color: var(--white-1);\n"])));
 var PointN = styled__default.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  margin-left: -5px;\n  left: 50%;\n  ", ";\n"])), resizeSquaresCss, function (_ref) {
   var isResizable = _ref.isResizable;
   return isResizable && styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n    cursor: n-resize;\n  "])));
@@ -4965,7 +4004,7 @@ var CropArea = function CropArea(_ref9) {
 };
 var _templateObject$o, _templateObject2$n, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$c, _templateObject7$c, _templateObject8$b, _templateObject9$b;
-var Container$d = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsla(202, 33%, 95%, 0.51);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  font-family: ", ";\n  z-index: 999;\n"])), function (_ref) {
+var Container$d = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--grey-3);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  font-family: ", ";\n  z-index: 999;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
@@ -4976,7 +4015,7 @@ var TextGroup = styled__default.div(_templateObject4$h || (_templateObject4$h =
   return theme.colors.icons.mono;
 }, IconWrapper);
 var ButtonsGroup = styled__default.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  button + button {\n    margin-left: 10px;\n  }\n"])));
-var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  width: ", ";\n  border-radius: 5px;\n  background-color: hsla(202, 33%, 95%, 0.8);\n  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.8) 35px, rgba(255,255,255,.8) 70px);\n"])), function (_ref3) {
+var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  width: ", ";\n  border-radius: 5px;\n  background-color: var(--grey-3);\n  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);\n"])), function (_ref3) {
   var canvasHeight = _ref3.canvasHeight;
   return canvasHeight ? canvasHeight + "px" : "462px";
 }, function (_ref4) {
@@ -4984,7 +4023,7 @@ var PreviewArea = styled__default.div(_templateObject6$c || (_templateObject6$c
   return canvasWidth ? canvasWidth + "px" : "485px";
 });
 var HiddenImage = styled__default.img(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
-var SelectedArea = styled__default.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  border: dashed 1px hsl(0, 0%, 24%);\n  box-shadow: 0 0 0 9999em hsla(0, 0%, 32%, 0.75);\n  ", ";\n  cursor: move;\n"])), function (_ref5) {
+var SelectedArea = styled__default.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  border: dashed 1px var(--black-a12);\n  box-shadow: 0 0 0 9999em var(--black-a11);\n  ", ";\n  cursor: move;\n"])), function (_ref5) {
   var cropLeft = _ref5.cropLeft,
       cropTop = _ref5.cropTop,
       cropWidth = _ref5.cropWidth,
@@ -5308,9 +4347,9 @@ var Container$e = styled__default.div(_templateObject$p || (_templateObject$p =
   return styled.css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
 });
 var PreviewImageGroup = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-bottom: 17px;\n  height: ", ";\n  width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
-var PhotoContainerStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 5px;\n  background-color: hsl(0, 0%, 90%);\n"])));
+var PhotoContainerStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 5px;\n  background-color: var(--grey-5);\n"])));
 var PreviewImage = styled__default.img(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  ", "\n  object-fit: cover;\n"])), PhotoContainerStyle);
-var PlaceholderText = styled__default.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  color: hsl(207, 5%, 57%);\n  font-size: 14px;\n"])));
+var PlaceholderText = styled__default.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  color: var(--grey-10);\n  font-size: 14px;\n"])));
 var NoPhoto = styled__default.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  padding-top: 15px;\n  ", " {\n    margin-top: 18px;\n  }\n"])), PhotoContainerStyle, PlaceholderText);
 var StyledInputFileButton = styled__default(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var ButtonsWrapper = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  button {\n    margin-bottom: 10px;\n  }\n\n"])));
@@ -5468,7 +4507,7 @@ var _excluded$h = ["icons", "color", "size", "weight"];
 var _templateObject$q, _templateObject2$p, _templateObject3$m;
 var Container$f = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 27px;\n  ", " {\n    display: flex;\n    align-items: center;\n  }\n"])), IconWrapper);
 var PlusIcon = styled__default(Icon)(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose([""])));
-var PlusIconWrapper = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  margin: 0 30px;\n  ", "{\n    transform: rotate(45deg);\n    [stroke]{\n      stroke: hsl(205, 22%, 66%);\n    }\n  }\n"])), IconWrapper);
+var PlusIconWrapper = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  margin: 0 30px;\n  ", "{\n    transform: rotate(45deg);\n    [stroke]{\n      stroke: var(--primary-7);\n    }\n  }\n"])), IconWrapper);
 var BigIconsSummary = function BigIconsSummary(_ref) {
   var icons = _ref.icons,
@@ -5510,8 +4549,8 @@ var FilesUploadGroup = styled__default.div(_templateObject4$j || (_templateObjec
   var theme = _ref3.theme;
   return theme.styles.filters.dropdownContainer.background;
 });
-var Title = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  color: hsl(208, 8%, 38%);\n  font-size: 20px;\n"])));
-var Description = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 2.14;\n  text-align: center;\n  color: hsl(207, 5%, 57%);\n  margin-top: 10px;\n  max-width: 386px;\n"])));
+var Title = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  color: var(--grey-11);\n  font-size: 20px;\n"])));
+var Description = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 2.14;\n  text-align: center;\n  color: var(--grey-10);\n  margin-top: 10px;\n  max-width: 386px;\n"])));
 var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes) {
   var newFilesTransfer = new DataTransfer();
@@ -6141,10 +5180,9 @@ var StyledButton$3 = styled__default.button(_templateObject3$q || (_templateObje
       theme = _ref2.theme;
   return theme && styled.css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n\n    ", ";\n    ", ";\n\n    font-family: ", ";\n    transition: opacity ", " ", ";\n\n    ", " {\n      padding: 0 9px;\n      display: flex;\n      align-items: center;\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n\n    &:hover:enabled {\n      ", ";\n      ", ";\n      transition:\n        background ", " ", ",\n        border ", " ", ";\n    }\n\n    &:active:enabled {\n      ", ";\n      ", ";\n    }\n\n    &:hover:enabled, &:active:enabled {\n      ", " {\n        [stroke]{\n          transition: stroke ", " ", ";\n          stroke: ", ";\n        }\n      }\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 50%;\n    }\n"])), styles.filters.filterButton["default"], typography.filters.filterButton["default"], theme.fontFamily.ui, theme.animation.speed.normal, theme.animation.easing.primary.inOut, IconWrapper, theme.colors.icons.dimmed, styles.filters.filterButton.hover, typography.filters.filterButton.hover, animation.speed.fast, animation.easing.primary.inOut, animation.speed.fast, animation.easing.primary.inOut, styles.filters.filterButton.active, typography.filters.filterButton.active, IconWrapper, animation.speed.faster, animation.easing.primary.inOut, theme.colors.pureBase);
 }, function (_ref3) {
-  var theme = _ref3.theme,
-      isOpen = _ref3.isOpen,
+  var isOpen = _ref3.isOpen,
       hasFlipArrow = _ref3.hasFlipArrow;
-  return isOpen && hasFlipArrow && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n    background-color: hsl(205, 100%, 72%);\n    border: solid 1px hsl(205, 100%, 72%);\n    color: ", ";\n\n    ", " {\n      [stroke]{\n        stroke: ", ";\n      }\n    }\n  "])), theme.colors.icons.inverse, IconWrapper, theme.colors.icons.inverse);
+  return isOpen && hasFlipArrow && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-7);\n    border: solid 1px var(--primary-7);\n    color: var(--white-1);\n\n    ", " {\n      [stroke]{\n        stroke: var(--white-1);\n      }\n    }\n  "])), IconWrapper);
 });
 var InnerContainer$3 = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n"])));
 var ButtonText = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  padding-right: ", ";\n"])), function (_ref4) {
@@ -6184,7 +5222,7 @@ var FilterButton = function FilterButton(_ref5) {
 var _excluded$l = ["title", "value", "optionType", "selected", "disabled", "onClick"];
 var _templateObject$x, _templateObject2$w, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$f, _templateObject10$d;
-var Title$1 = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  display: block;\n  color: hsl(0, 0%, 56%);\n  font-size: 14px;\n  font-weight: 500;\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n"])), function (_ref) {
+var Title$1 = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  display: block;\n  color: var(--grey-9);\n  font-size: 14px;\n  font-weight: 500;\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.data;
 });
@@ -6200,7 +5238,7 @@ var Container$k = styled__default.div(_templateObject7$h || (_templateObject7$h
   var styles = _ref3.theme.styles,
       selected = _ref3.selected,
       disabled = _ref3.disabled;
-  return styles && styled.css(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      ", ";\n    }\n\n    &:hover {\n      cursor: pointer;\n      ", " {\n        color: ", ";\n      }\n\n      ", " {\n        ", ";\n      }\n\n      ", " {\n        border-color: ", ";\n      }\n    }\n\n    ", ";\n\n    ", ";\n  "])), FakeCheckbox, FakeRadioButton, styles.form.checkbox.unchecked["default"], Title$1, styles.form.checkbox.checked.hover.backgroundColor, FakeCheckbox, styles.form.checkbox.unchecked.hover, FakeRadioButton, styles.form.checkbox.unchecked.hover.borderColor, selected && styled.css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n      ", " {\n        color: ", ";\n      }\n      ", " {\n        ", ";\n        border: none;\n      }\n\n      ", " {\n        border-color: ", ";\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &:hover {\n        ", "{\n          ", ";\n        }\n\n        ", " {\n          border-color: ", ";\n          ", " {\n            background-color: ", ";\n          }\n        }\n      }\n    "])), Title$1, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked["default"], FakeRadioButton, styles.form.checkbox.checked["default"].backgroundColor, FakeInnerRadio, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked.hover, FakeRadioButton, styles.form.checkbox.checked.hover.backgroundColor, FakeInnerRadio, styles.form.checkbox.checked.hover.backgroundColor), disabled && styled.css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))));
+  return styles && styled.css(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      ", ";\n    }\n\n    &:hover {\n      cursor: pointer;\n      ", " {\n        color: ", ";\n      }\n\n      ", " {\n        ", ";\n      }\n\n      ", " {\n        border-color: ", ";\n      }\n    }\n\n    ", ";\n\n    ", ";\n  "])), FakeCheckbox, FakeRadioButton, styles.form.checkbox.unchecked["default"], Title$1, styles.form.checkbox.unchecked.hover.borderColor, FakeCheckbox, styles.form.checkbox.unchecked.hover, FakeRadioButton, styles.form.checkbox.unchecked.hover.borderColor, selected && styled.css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n      ", " {\n        color: ", ";\n      }\n      ", " {\n        ", ";\n        border: none;\n      }\n\n      ", " {\n        border-color: ", ";\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &:hover {\n        ", "{\n          ", ";\n        }\n\n        ", " {\n          border-color: ", ";\n          ", " {\n            background-color: ", ";\n          }\n        }\n      }\n    "])), Title$1, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked["default"], FakeRadioButton, styles.form.checkbox.checked["default"].backgroundColor, FakeInnerRadio, styles.form.checkbox.checked["default"].backgroundColor, FakeCheckbox, styles.form.checkbox.checked.hover, FakeRadioButton, styles.form.checkbox.checked.hover.backgroundColor, FakeInnerRadio, styles.form.checkbox.checked.hover.backgroundColor), disabled && styled.css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))));
 });
 var FilterOption = function FilterOption(_ref4) {
@@ -6444,8 +5482,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
 };
 var _templateObject$A, _templateObject2$z, _templateObject3$u;
-var Container$n = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 146px;\n  border-top: 1px solid hsl(0, 0%, 91%);\n"])));
-var LoadingText = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  ", "\n  color: hsl(0, 0%, 55%);\n  font-size: 12px;\n  font-style: italic;\n  padding: 15px 0;\n"])), function (_ref) {
+var Container$n = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 146px;\n  border-top: 1px solid var(--grey-5);\n"])));
+var LoadingText = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  ", "\n  color: var(--grey-11);\n  font-size: 12px;\n  font-style: italic;\n  padding: 15px 0;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme && styled.css(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
 });
@@ -6476,7 +5514,7 @@ var ResultsContainer = styled__default.div(_templateObject6$k || (_templateObjec
   var theme = _ref3.theme;
   return theme.colors.divider;
 });
-var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  opacity: 0.75;\n  font-family: ", ";\n  color: hsl(0, 0%, 55%);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  padding-left: 9px;\n  height: 30px;\n  margin-bottom: 6px;\n  border-bottom: ", " 1px solid;\n"])), function (_ref4) {
+var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  opacity: 0.75;\n  font-family: ", ";\n  color: var(--grey-10);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  padding-left: 9px;\n  height: 30px;\n  margin-bottom: 6px;\n  border-bottom: ", " 1px solid;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 }, function (_ref5) {
@@ -6484,7 +5522,7 @@ var ResultCounter = styled__default.div(_templateObject7$j || (_templateObject7$
   return theme.colors.divider;
 });
 var SearchWrapper = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  height: 41px;\n  display: flex;\n  align-items: center;\n"])));
-var EmptyResultText = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  display: block;\n  color: hsl(0, 0%, 56%);\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n  height: 35px;\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n"])));
+var EmptyResultText = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  display: block;\n  color: var(--grey-10);\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n  height: 35px;\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n"])));
 var isValueSelected = function isValueSelected(item, selected) {
   var isItemSelected = false;
@@ -6722,7 +5760,7 @@ var TopLine$2 = styled__default.div(_templateObject2$B || (_templateObject2$B =
   var theme = _ref.theme;
   return theme.styles.filters.dropdownContainer.topBorder;
 });
-var InnerBox$1 = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  box-shadow: 0 4px 9px 0 hsla(204, 22%, 67%, 0.07);\n  border: solid 1px hsl(207, 16%, 86%);\n  border-top: unset;\n  ", ";\n"])), function (_ref2) {
+var InnerBox$1 = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  border: solid 1px var(--grey-7);\n  border-top: unset;\n  ", ";\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.styles.filters.dropdownContainer.background;
 });
@@ -6735,7 +5773,7 @@ var OrderGroup = styled__default.div(_templateObject6$l || (_templateObject6$l =
   var colors = _ref4.theme.colors;
   return colors.divider;
 });
-var OrderButton = styled__default.button(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 100%;\n  display: flex;\n  align-items: center;\n  font-family: ", ";\n  color: hsl(0, 0%, 56%);\n  font-size: 14px;\n  height: 35px;\n  ", "\n"])), resetButtonStyles, function (_ref5) {
+var OrderButton = styled__default.button(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 100%;\n  display: flex;\n  align-items: center;\n  font-family: ", ";\n  color: var(--grey-12);\n  font-size: 14px;\n  height: 35px;\n  ", "\n"])), resetButtonStyles, function (_ref5) {
   var theme = _ref5.theme;
   return theme.fontFamily.data;
 }, function (_ref6) {
@@ -7046,11 +6084,11 @@ var _excluded$s = ["labelLists", "totalResults", "resultTextTemplate", "clearTex
 var _templateObject$F, _templateObject2$D, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$k;
 var Container$s = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  min-height: 22px;\n"])));
-var ResultsTextWrapper = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n"])), function (_ref) {
+var ResultsTextWrapper = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-9);\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
-var FilterLabel = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: 18px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 11px 0 8px;\n  margin-left: 3px;\n  color: hsl(207, 5%, 57%);\n\n  ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n  }\n  border-right: 1px solid hsla(0, 0%, 13%, 0.16);\n"])), function (_ref2) {
+var FilterLabel = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: 18px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 11px 0 8px;\n  margin-left: 3px;\n  color: var(--grey-9);\n\n  ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n  }\n  border-right: 1px solid var(--grey-8);\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.data);
 }, IconWrapper);
@@ -7058,7 +6096,7 @@ var FilterLabelText = styled__default.div(_templateObject5$q || (_templateObject
   var hasIcon = _ref3.hasIcon;
   return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
 });
-var ClearTextButton = styled__default.button(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  color: hsl(216, 4%, 77%);\n  margin-left: 11px;\n  font-size: 12px;\n"])), resetButtonStyles, function (_ref4) {
+var ClearTextButton = styled__default.button(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: ", ";\n  color: var(--grey-10);\n  margin-left: 11px;\n  font-size: 12px;\n"])), resetButtonStyles, function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 });
@@ -7154,7 +6192,7 @@ var FiltersResults = function FiltersResults(_ref5) {
 var _excluded$t = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
 var _templateObject$G, _templateObject2$E, _templateObject3$z;
-var Title$2 = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
+var Title$2 = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-10);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
@@ -7595,7 +6633,7 @@ var StatusCounter = styled__default.div(_templateObject2$F || (_templateObject2$
 }, function (_ref2) {
   var theme = _ref2.theme,
       color = _ref2.color;
-  return color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)';
+  return color ? theme.colors.status[color] : 'var(--grey-5)';
 });
 var StatusDot = styled__default.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  position: absolute;\n  top: -4px;\n  right: -7px;\n  ", "\n  background-color: ", ";\n"])), function (_ref3) {
   var animation = _ref3.theme.animation;
@@ -7603,7 +6641,7 @@ var StatusDot = styled__default.div(_templateObject4$u || (_templateObject4$u =
 }, function (_ref4) {
   var theme = _ref4.theme,
       color = _ref4.color;
-  return color ? theme.colors.status[color] : 'hsla(0, 0%, 91.8%, 0)';
+  return color ? theme.colors.status[color] : 'var(--grey-5)';
 });
 var StatusIcon = function StatusIcon(_ref5) {
@@ -9554,7 +8592,7 @@ var MediaBoxWrapper = styled__default.div(_templateObject$T || (_templateObject$
   var minWidth = _ref2.minWidth;
   return minWidth && "min-width: " + minWidth;
 });
-var mediaStyle = "\n  max-width:  100%;\n  max-height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n";
+var mediaStyle = "\n  max-width:  100%;\n  max-height: 100%;\n  border-radius: 3px;\n  background-color: var(--grey-11);\n";
 var LoadingOverlay$3 = styled__default.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top:0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
 var Video$3 = styled__default.video(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  ", ";\n  outline: none;\n\n  ", ";\n"])), mediaStyle, function (_ref3) {
   var theme = _ref3.theme,
@@ -9665,7 +8703,7 @@ var MediaBox = function MediaBox(_ref5) {
 };
 var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$z, _templateObject6$s, _templateObject7$r;
-var Container$C = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsla(202, 33%, 95%, 0.51);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  z-index: 999;\n  ", "\n\n  font-family: ", ";\n  ", ";\n"])), function (_ref) {
+var Container$C = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--grey-3);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  z-index: 999;\n  ", "\n\n  font-family: ", ";\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme && styled.css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose([""])));
 }, function (_ref2) {
@@ -9682,7 +8720,7 @@ var CloseButton = styled__default.button(_templateObject4$C || (_templateObject4
 }, IconWrapper, function (_ref5) {
   var _ref5$selected = _ref5.selected,
       selected = _ref5$selected === void 0 ? false : _ref5$selected;
-  return selected && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid hsl(207, 80%, 64%);\n  "])));
+  return selected && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid var(--primary-7);\n  "])));
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme && styled.css(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n      opacity: .8;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
@@ -9967,7 +9005,7 @@ var Image$2 = styled__default.img(_templateObject6$t || (_templateObject6$t = _t
   var showImage = _ref5.showImage;
   return showImage === true ? 'block' : 'none';
 });
-var PlayableDrop = styled__default.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: hsla(0, 0%, 0%, .5);\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    display: flex;\n    svg {\n      padding-left: 2px;\n      path {\n        stroke: hsla(0, 0%, 100%, 1.000);\n      }\n    }\n  };\n"])), IconWrapper);
+var PlayableDrop = styled__default.div(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--black-a1);\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    display: flex;\n    svg {\n      padding-left: 2px;\n      path {\n        stroke: var(--white-1);\n      }\n    }\n  };\n"])), IconWrapper);
 var TableRowThumbnail = function TableRowThumbnail(_ref6) {
   var _ref6$hoverZoom = _ref6.hoverZoom,
@@ -10467,12 +9505,12 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
 var _templateObject$$, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$D;
 var Container$F = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose([""])));
 var TableContainer = styled__default.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: table;\n  width: 100%;\n  position: relative;\n"])));
-var LoadingText$1 = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  color: hsla(195, 10%, 52%, 0.72);\n"])));
+var LoadingText$1 = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  color: var(--grey-a11);\n"])));
 var LoadingBox$1 = styled__default.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  background-color: ", ";\n  height: calc(100% - 50px);\n  width: 100%;\n  min-height: 100px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n\n  ", " {\n    margin-top: 10px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.styles.tables.loadingOverlay;
 }, LoadingText$1);
-var EmptyTableBox = styled__default.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  padding: 20px;\n  width: 100%;\n  min-height: 100px;\n  text-align: center;\n  h3 {\n    font-weight: 500;\n    color: hsl(208, 8%, 38%);\n  }\n  color: hsl(207, 5%, 57%);\n"])));
+var EmptyTableBox = styled__default.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  padding: 20px;\n  width: 100%;\n  min-height: 100px;\n  text-align: center;\n  h3 {\n    font-weight: 500;\n    color: var(--grey-11);\n  }\n  color: var(--grey-10);\n"])));
 var isChecked = function isChecked(_ref2) {
   var _ref2$_checked = _ref2._checked,
@@ -10568,7 +9606,7 @@ var Container$G = styled__default.div(_templateObject$10 || (_templateObject$10
 var StyledButton$4 = styled__default(Button)(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
 var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
 var StyledLink = styled__default(reactRouterDom.Link)(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n  color: inherit;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
-var EditContainer = styled__default.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  min-width: 320px;\n  background-color: hsl(0, 0%, 100%);\n  z-index: 99;\n  position: absolute;\n  bottom: -15px;\n  left: -11px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    margin:0;\n    span {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-left: 5px;\n  }\n  ", " {\n    margin-left: 5px;\n  }\n"])), StyledLabel, StyledButton$4, StyledLoadingButton);
+var EditContainer = styled__default.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  min-width: 320px;\n  background-color: var(--gray-2);\n  z-index: 99;\n  position: absolute;\n  bottom: -15px;\n  left: -11px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", " {\n    margin:0;\n    span {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-left: 5px;\n  }\n  ", " {\n    margin-left: 5px;\n  }\n"])), StyledLabel, StyledButton$4, StyledLoadingButton);
 var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose([""])));
 var TextContainer$2 = styled__default.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 18px;\n\n  ", "\n\n  ", "\n\n  ", " {\n    opacity: 0;\n    position: absolute;\n    top: 7px;\n    right: 0;\n  };\n\n  &:hover {\n    ", " {\n      opacity: 1;\n    };\n  }\n"])), function (_ref2) {
   var alignment = _ref2.alignment;
@@ -12400,25 +11438,25 @@ var LeftData = styled__default.div(_templateObject2$13 || (_templateObject2$13 =
 }, IconWrapper);
 var RightData = styled__default.div(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n  padding: 0 12px 0 16px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var DeviceDataGroup = styled__default.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n  justify-content: center;\n"])));
-var LeftTitle = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "};\n  ", ";\n\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
+var LeftTitle = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", "};\n  ", ";\n\n  color: var(--grey-a10);\n  font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
   var hasRightData = _ref2.hasRightData;
   return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
 }, function (_ref3) {
   var hasMarginBottom = _ref3.hasMarginBottom;
   return hasMarginBottom && "margin-bottom: 1px;";
 });
-var LeftSubTitle = styled__default.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  ", "\n\n  color: hsl(208, 8%, 38%);\n  font-size: 16px;\n"])), function (_ref4) {
+var LeftSubTitle = styled__default.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  ", ";\n  ", "\n\n  color: var(--grey-11);\n  font-size: 16px;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 }, EllipsisStyles, function (_ref5) {
   var hasRightData = _ref5.hasRightData;
   return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
 });
-var Title$5 = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsla(195, 10%, 52%, 0.72);\n  font-size: 10px;\n  ", ";\n"])), EllipsisStyles, function (_ref6) {
+var Title$5 = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: var(--grey-a10);\n  font-size: 10px;\n  ", ";\n"])), EllipsisStyles, function (_ref6) {
   var hasMarginBottom = _ref6.hasMarginBottom;
   return hasMarginBottom && "margin-bottom: 6px;";
 });
-var SubTitle = styled__default.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: hsl(195, 10%, 52%);\n  font-size: 12px;\n"])), EllipsisStyles);
+var SubTitle = styled__default.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 80px;\n  color: var(--grey-11);\n  font-size: 12px;\n"])), EllipsisStyles);
 var PanelMetaData = function PanelMetaData(_ref7) {
   var _ref7$deviceIcon = _ref7.deviceIcon,
@@ -12452,7 +11490,7 @@ var PanelMetaData = function PanelMetaData(_ref7) {
 var _excluded$A = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
 var _templateObject$1a;
-var CameraPanelWrapper = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  width: 300px;\n  height: 230px;\n  border-radius: 3px;\n  box-shadow: 0 2px 10px 0 hsla(211, 42%, 86%, 0.41);\n  background-color: ", ";\n  }\n\n  ", ";\n"])), function (_ref) {
+var CameraPanelWrapper = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  width: 300px;\n  height: 230px;\n  border-radius: 3px;\n  box-shadow: 0 2px 10px 0 var(--grey-a5);\n  background-color: ", ";\n  }\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.styles.global.background.backgroundImage;
 }, function (_ref2) {
@@ -12490,7 +11528,7 @@ var _excluded$B = ["icon", "size", "weight", "label", "linkTo"];
 var _templateObject$1c, _templateObject2$14, _templateObject3$X, _templateObject4$R;
 var TextContainer$3 = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
 var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n"])));
-var TagWrapper = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 500;\n  color: hsl(200, 3%, 39%);\n  padding: 4px 10px;\n  border: solid 1px hsl(120, 1%, 85%);\n  display: inline-flex;\n  align-items: center;\n  border-radius: 3px;\n  height: 26px;\n\n  ", " {\n    [stroke]{\n      ", ";\n    }\n    margin-right: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ", ";\n"])), function (_ref) {
+var TagWrapper = styled__default.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 500;\n  color: var(--grey-11);\n  padding: 4px 10px;\n  border: solid 1px var(--grey-8);\n  display: inline-flex;\n  align-items: center;\n  border-radius: 3px;\n  height: 26px;\n\n  ", " {\n    [stroke]{\n      ", ";\n    }\n    margin-right: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 }, function (_ref2) {
@@ -12585,14 +11623,14 @@ var _excluded$D = ["design", "size", "position", "text"];
 var _templateObject$1e, _templateObject2$15, _templateObject3$Y, _templateObject4$S, _templateObject5$N, _templateObject6$A;
 var Container$Q = styled__default.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose([""])));
-var Title$6 = styled__default.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
+var Title$6 = styled__default.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-10);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
 var ButtonsWrapper$1 = styled__default.div(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
 var LeftButtons = styled__default.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n  button {\n    margin: 0 10px 10px 0;\n  }\n"])));
 var RightButtons = styled__default.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var SelectedResults = styled__default.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin-top: 29px;\n  min-height: 19px;\n  color: hsl(207, 5%, 57%);\n  font-size: 12px;\n"])), function (_ref2) {
+var SelectedResults = styled__default.div(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin-top: 29px;\n  min-height: 19px;\n  color: var(--grey-10);\n  font-size: 12px;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
 });
@@ -12857,6 +11895,72 @@ function useBreakpoints() {
   return breakpoints;
 }
+var matchDark = '(prefers-color-scheme: dark)';
+var toggleThemeClass = function toggleThemeClass(isDarkEnabled) {
+  if (isDarkEnabled) {
+    document.body.classList.add('light-theme');
+    document.body.classList.remove('dark-theme');
+  } else {
+    document.body.classList.add('dark-theme');
+    document.body.classList.remove('light-theme');
+  }
+};
+var setInitial = function setInitial() {
+  var localStorageTheme = localStorage.getItem('isDarkThemeEnabled');
+  var startDark = true;
+  if (localStorageTheme === null) {
+    startDark = window.matchMedia(matchDark) && window.matchMedia(matchDark).matches;
+  } else {
+    startDark = localStorageTheme !== 'false';
+  }
+  toggleThemeClass(!startDark);
+  return startDark;
+};
+var useThemeToggle = function useThemeToggle() {
+  var _useState = React.useState(setInitial),
+      isDarkThemeEnabled = _useState[0],
+      setIsDarkThemeEnabled = _useState[1];
+  var onThemeToggle = React.useCallback(function () {
+    setIsDarkThemeEnabled(function (enabled) {
+      localStorage.isDarkThemeEnabled = !enabled;
+      toggleThemeClass(enabled);
+      return !enabled;
+    });
+  }, []);
+  var osThemeToggle = React.useCallback(function (event) {
+    var localStorageTheme = localStorage.getItem('isDarkThemeEnabled');
+    if (localStorageTheme !== null) {
+      return;
+    }
+    var isDark = event.matches;
+    setIsDarkThemeEnabled(function () {
+      toggleThemeClass(!isDark);
+      return isDark;
+    });
+  }, []);
+  React.useEffect(function () {
+    var matcher = window.matchMedia(matchDark);
+    matcher.addEventListener('change', osThemeToggle);
+    return function () {
+      matcher.removeEventListener('change', osThemeToggle);
+    };
+  }, [onThemeToggle, osThemeToggle]);
+  return {
+    isDarkThemeEnabled: isDarkThemeEnabled,
+    setIsDarkThemeEnabled: setIsDarkThemeEnabled,
+    onThemeToggle: onThemeToggle,
+    isLightMode: !isDarkThemeEnabled
+  };
+};
 var _templateObject$1f, _templateObject2$16, _templateObject3$Z, _templateObject4$T, _templateObject5$O;
 var Container$R = styled__default.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose([""])));
 var Title$7 = styled__default.div(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
@@ -13645,16 +12749,16 @@ var UserMenu = function UserMenu(_ref7) {
 var _templateObject$1m, _templateObject2$1d, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$y;
 var Container$U = styled__default.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 18px 20px 12px 20px;\n  height: 122px;\n"])));
 var ImgWrapper = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  border-radius: 5px;\n  overflow: hidden;\n  height: 40px;\n  width: 40px;\n  flex-shrink: 0;\n"])));
-var EmptyImg = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  background-color: hsl(210, 22%, 91%);\n  width: 100%;\n  height: 100%;\n"])));
-var Image$3 = styled__default.div(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-image: url(", ");\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat; \n  display: ", ";\n"])), function (p) {
+var EmptyImg = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  background-color: var(--grey-5);\n  width: 100%;\n  height: 100%;\n"])));
+var Image$3 = styled__default.div(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-image: url(", ");\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  display: ", ";\n"])), function (p) {
   return p.image;
 }, function (p) {
   return p.image ? 'block' : 'none';
 });
 var InfoContainer = styled__default.div(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
-var Title$9 = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: hsl(0, 0%, 34%);\n"])));
-var Message = styled__default.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  overflow: hidden;\n  color: hsl(0, 0%, 34%);\n  margin: 4px 0;\n  height: 30px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: inline-block;\n  vertical-align: middle;\n"])));
-var TimeMsg = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  color: hsl(0, 0%, 67%);\n  margin-top: 15px;\n"])));
+var Title$9 = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--grey-11);\n"])));
+var Message = styled__default.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  overflow: hidden;\n  color: var(--grey-11);\n  margin: 4px 0;\n  height: 30px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: inline-block;\n  vertical-align: middle;\n"])));
+var TimeMsg = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--grey-12);\n  margin-top: 15px;\n"])));
 var NotificationItem = function NotificationItem(_ref) {
   var imgUrl = _ref.imgUrl,
@@ -13668,7 +12772,7 @@ var NotificationItem = function NotificationItem(_ref) {
 var _templateObject$1n, _templateObject2$1e, _templateObject3$15;
 var Container$V = styled__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var StatusContainer = styled__default.h2(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n    padding: 10px 0 10px 20px;\n    font-size: 14px;\n    font-weight: 500;\n    color: hsl(0, 0%, 34%);\n    border-bottom: ", " 1px solid;\n    margin: 0;\n"])), function (_ref) {
+var StatusContainer = styled__default.h2(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n    padding: 10px 0 10px 20px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--grey-12);\n    border-bottom: ", " 1px solid;\n    margin: 0;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.divider;
 });
@@ -13706,7 +12810,7 @@ var _templateObject$1o, _templateObject2$1f, _templateObject3$16, _templateObjec
 var Container$W = styled__default.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n  z-index: 9;\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 65px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       colors = _ref.theme.colors;
-  return colors && styled.css(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    // box-shadow: 5px 7px 10px 0 hsla(205, 16%, 77%, 0.1);\n    background-color:", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
+  return colors && styled.css(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " 1px solid;\n    background-color:", ";\n  "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
 });
 var SearchBar = styled__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n  margin-left: 25px;\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var IconWrapper$3 = styled__default.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  flex: 0 40px;\n  width: 5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])));
@@ -13918,10 +13022,10 @@ var TabLabel = styled__default.label(_templateObject2$1g || (_templateObject2$1g
   return active ? '600' : '500';
 }, function (_ref3) {
   var active = _ref3.active;
-  return active ? '#0097ce' : '#787878';
+  return active ? 'var(--primary-11)' : 'var(--grey-11)';
 }, function (_ref4) {
   var active = _ref4.active;
-  return active ? '2px solid #0097ce' : '2px solid transparent';
+  return active ? '2px solid var(--primary-11)' : '2px solid transparent';
 });
 var Tab = function Tab(_ref5) {
@@ -14008,16 +13112,16 @@ var _excluded$H = ["icon", "title", "subtitle", "tabFor"];
 var _templateObject$1t, _templateObject2$1i, _templateObject3$19, _templateObject4$11, _templateObject5$W, _templateObject6$I;
 var Container$Z = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: 22px;\n  padding-bottom: 7px;\n  height: 60px;\n  cursor: pointer;\n\n  ", ";\n  ", " {\n    margin-left: 2px;\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
   var active = _ref.active;
-  return active ? styled.css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid hsl(196, 100%, 40%);\n    "]))) : styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
+  return active ? styled.css(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid var(--primary-11);\n    "]))) : styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
 }, IconWrapper);
 var Title$a = styled__default.div(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-family: ", ";\n  letter-spacing: 0.09px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontFamily.ui;
 }, function (_ref3) {
   var active = _ref3.active;
-  return active ? 'hsl(196, 100%, 40%)' : 'hsl(0, 0%, 46%)';
+  return active ? 'var(--primary-11)' : 'var(--grey-11)';
 });
-var SubTitle$2 = styled__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-family: ", ";\n  font-style: italic;\n  color: hsla(195, 10%, 52%, 0.72);\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref4) {
+var SubTitle$2 = styled__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-family: ", ";\n  font-style: italic;\n  color: var(--grey-a10);\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 });
@@ -14057,7 +13161,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
 var _templateObject$1u, _templateObject2$1j;
 var Container$_ = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose([""])));
-var TabListWrapper$1 = styled__default.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n  padding-top: 10px;\n  padding-left: ", ";\n  box-shadow: 0 -5px 5px 0 hsla(0, 0%, 0%, 0.01);\n  border-bottom: 1px solid hsl(0, 0%, 89%);\n  overflow-y: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n    &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n  }\n"])), function (_ref) {
+var TabListWrapper$1 = styled__default.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n  padding-top: 10px;\n  padding-left: ", ";\n  box-shadow: 0 -5px 5px 0 var(--black-a1);\n  border-bottom: 1px solid var(--grey-6);\n  overflow-y: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n    &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n  }\n"])), function (_ref) {
   var paddingLeft = _ref.paddingLeft;
   return paddingLeft ? paddingLeft : '87px';
 });
@@ -14539,12 +13643,10 @@ exports.TextField = TextField;
 exports.TopBar = TopBar;
 exports.TypeTable = TypeTable;
 exports.WebRTCClient = WebRTCPlayer;
-exports.darkTheme = dark;
 exports.isDateInterval = isDateInterval;
 exports.isFilterItem = isFilterItem;
-exports.lightTheme = light;
 exports.resetButtonStyles = resetButtonStyles;
-exports.themeFallbackHelper = themeFallbackHelper;
+exports.scorerTheme = light;
 exports.useClickOutside = useClickOutside;
 exports.useCopyToClipboard = useCopyToClipboard;
 exports.useInterval = useInterval;
@@ -14553,6 +13655,7 @@ exports.useModal = useModal;
 exports.useNotification = useNotification;
 exports.usePTZ = usePTZ;
 exports.usePoll = usePoll;
+exports.useThemeToggle = useThemeToggle;
 exports.useTitle = useTitle;
 exports.useTo = useTo;
 //# sourceMappingURL=index.js.map