scorer-ui-kit 2.6.7 → 2.8.0

package/dist/index.js

@@ -1563,10 +1563,10 @@ var _templateObject$1;
 var animationVariables = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  :root {\n\n    --easing-primary-in-out: cubic-bezier(0.76, 0, 0.24, 1);\n    --easing-primary-in: cubic-bezier(0.5, 0, 0.75, 0);\n    --easing-primary-out: cubic-bezier(0.25, 1, 0.5, 1);\n    \n    --speed-faster: 0.085s;\n    --speed-fast: 0.175s;\n    --speed-normal: 0.35s;\n    --speed-slow: 0.7s;\n    --speed-slower: 1.4s;\n    --speed-slowest: 2.8s;\n    \n  }\n"])));
 
 var _templateObject$2;
-var colorVariables = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  .light-theme {\n    /* --- Light Mode --- */\n    --primary-1: #fcfdff;\n    --primary-2: #f5f9ff;\n    --primary-3: #eaf3ff;\n    --primary-4: #dbecff;\n    --primary-5: #c9e2ff;\n    --primary-6: #b5d5ff;\n    --primary-7: #9bc3fa;\n    --primary-8: #76aaf4;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #3c6eb3;\n    --primary-12: #0b3162;\n    --primary-a1: #0055ff03;\n    --primary-a2: #0066ff0a;\n    --primary-a3: #006eff15;\n    --primary-a4: #0079ff24;\n    --primary-a5: #0077ff36;\n    --primary-a6: #016fff4a;\n    --primary-a7: #0066f364;\n    --primary-a8: #0061eb89;\n    --primary-a9: #006bff7f;\n    --primary-a10: #0062e98a;\n    --primary-a11: #00429cc3;\n    --primary-a12: #00285bf4;\n\n    --secondary-1: #fafefd;\n    --secondary-2: #f1fcfa;\n    --secondary-3: #e7f9f5;\n    --secondary-4: #d9f3ee;\n    --secondary-5: #c7ebe5;\n    --secondary-6: #afdfd7;\n    --secondary-7: #8dcec3;\n    --secondary-8: #53b9ab;\n    --secondary-9: #12a594;\n    --secondary-10: #0e9888;\n    --secondary-11: #067a6f;\n    --secondary-12: #10302b;\n    --secondary-a1: #05cd9b05;\n    --secondary-a2: #01c8a40e;\n    --secondary-a3: #02c09718;\n    --secondary-a4: #02af8c26;\n    --secondary-a5: #00a48938;\n    --secondary-a6: #00998050;\n    --secondary-a7: #01927a72;\n    --secondary-a8: #009783ac;\n    --secondary-a9: #009e8ced;\n    --secondary-a10: #009281f1;\n    --secondary-a11: #00776bf9;\n    --secondary-a12: #00221def;\n\n    --grey-1: #fcfcfd;\n    --grey-2: #f9f9fb;\n    --grey-3: #f0f0f3;\n    --grey-4: #e8e8ec;\n    --grey-5: #e0e1e6;\n    --grey-6: #d9d9e0e0;\n    --grey-7: #cdced6;\n    --grey-8: #b9bbc6;\n    --grey-9: #8b8d98;\n    --grey-10: #80838d;\n    --grey-11: #717989;\n    --grey-12: #5a6671;\n    --grey-a1: #00005503;\n    --grey-a2: #00005506;\n    --grey-a3: #00003310;\n    --grey-a4: #00002d17;\n    --grey-a5: #0009321f;\n    --grey-a6: #00002f26;\n    --grey-a7: #00062e32;\n    --grey-a8: #00083046;\n    --grey-a9: #00051d74;\n    --grey-a10: #00071b7f;\n    --grey-a11: #020b1d9f;\n    --grey-a12: #020b1de3;\n\n    --green-1: #fbfefc;\n    --green-2: #f2fcf5;\n    --green-3: #e9f9ee;\n    --green-4: #ddf3e4;\n    --green-5: #ccebd7;\n    --green-6: #b4dfc4;\n    --green-7: #92ceac;\n    --green-8: #5bb98c;\n    --green-9: #30a46c;\n    --green-10: #299764;\n    --green-11: #18794e;\n    --green-12: #153226;\n    --green-a1: #05c04304;\n    --green-a2: #00c43b0d;\n    --green-a3: #02ba3c16;\n    --green-a4: #01a63522;\n    --green-a5: #009b3633;\n    --green-a6: #0193364b;\n    --green-a7: #008c3d6d;\n    --green-a8: #00934ca4;\n    --green-a9: #008f4acf;\n    --green-a10: #008346d6;\n    --green-a11: #006b3be7;\n    --green-a12: #002012ea;\n\n    --orange-1: #fefcfb;\n    --orange-2: #fef8f4;\n    --orange-3: #fff1e7;\n    --orange-4: #ffe8d7;\n    --orange-5: #ffdcc3;\n    --orange-6: #ffcca7;\n    --orange-7: #ffb381;\n    --orange-8: #fa934e;\n    --orange-9: #f76808;\n    --orange-10: #ed5f00;\n    --orange-11: #bd4b00;\n    --orange-12: #451e11;\n    --orange-a1: #c0430504;\n    --orange-a2: #e860050b;\n    --orange-a3: #ff6c0318;\n    --orange-a4: #ff6e0028;\n    --orange-a5: #ff6b013c;\n    --orange-a6: #ff6b0158;\n    --orange-a7: #ff66017e;\n    --orange-a8: #f86300b1;\n    --orange-a9: #f76300f7;\n    --orange-a10: #ed5b00fa;\n    --orange-a11: #bc4800fa;\n    --orange-a12: #380e00ee;\n\n    --red-1: #fefcfc;\n    --red-2: #fdf8f8;\n    --red-3: #faedec;\n    --red-4: #fddfdd;\n    --red-5: #f8d2d0;\n    --red-6: #f1c3c1;\n    --red-7: #e6b1ae;\n    --red-8: #da9996;\n    --red-9: #d16565;\n    --red-10: #c45859;\n    --red-11: #b64d4e;\n    --red-12: #592525;\n    --red-a1: #aa000003;\n    --red-a2: #b7000007;\n    --red-a3: #bc0e0013;\n    --red-a4: #f00f0022;\n    --red-a5: #da0b002f;\n    --red-a6: #c609003e;\n    --red-a7: #b10a0051;\n    --red-a8: #a6080069;\n    --red-a9: #b300009a;\n    --red-a10: #a50002a7;\n    --red-a11: #970002b2;\n    --red-a12: #3d0000da;\n\n  }\n\n  .dark-theme {\n    /* --- Dark mode --- */\n    --primary-1: #000;\n    --primary-2: #09121e;\n    --primary-3: #0e2341;\n    --primary-4: #0c2f5d;\n    --primary-5: #153c70;\n    --primary-6: #214a81;\n    --primary-7: #2d5a97;\n    --primary-8: #366bb5;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #81b7ff;\n    --primary-12: #cee3ff;\n    --primary-a1: #0000;\n    --primary-a2: #4d99ff1e;\n    --primary-a3: #378aff41;\n    --primary-a4: #2181ff5d;\n    --primary-a5: #3089ff70;\n    --primary-a6: #4293ff81;\n    --primary-a7: #4c98ff97;\n    --primary-a8: #4c97ffb5;\n    --primary-a9: #80b5ff;\n    --primary-a10: #7bb2fff3;\n    --primary-a11: #81b7ff;\n    --primary-a12: #cee3ff;\n\n    --secondary-1: #091915;\n    --secondary-2: #04201b;\n    --secondary-3: #062923;\n    --secondary-4: #07312b;\n    --secondary-5: #083932;\n    --secondary-6: #09443c;\n    --secondary-7: #0b544a;\n    --secondary-8: #0c6d62;\n    --secondary-9: #12a594;\n    --secondary-10: #10b3a3;\n    --secondary-11: #0ac5b3;\n    --secondary-12: #e1faf4;\n    --secondary-a1: #0000;\n    --secondary-a2: #00fbd508;\n    --secondary-a3: #00fddc12;\n    --secondary-a4: #00fde81b;\n    --secondary-a5: #02fee424;\n    --secondary-a6: #09ffe630;\n    --secondary-a7: #11ffe342;\n    --secondary-a8: #11ffe75d;\n    --secondary-a9: #18ffe49b;\n    --secondary-a10: #13ffe7ab;\n    --secondary-a11: #0affe7bf;\n    --secondary-a12: #e6fff9fa;\n\n    --grey-1: #111113;\n    --grey-2: #18191b;\n    --grey-3: #212225;\n    --grey-4: #272a2d;\n    --grey-5: #2e3135;\n    --grey-6: #363a3f;\n    --grey-7: #43484e;\n    --grey-8: #5a6169;\n    --grey-9: #696e77;\n    --grey-10: #777b84;\n    --grey-11: #9a9fa7;\n    --grey-12: #d5d8dc;\n    --grey-a1: #0000;\n    --grey-a2: #d8f4f609;\n    --grey-a3: #ddeaf814;\n    --grey-a4: #d3edf81d;\n    --grey-a5: #d9edfe25;\n    --grey-a6: #d6ebfd30;\n    --grey-a7: #d9edff40;\n    --grey-a8: #d9edff5d;\n    --grey-a9: #dfebfd6d;\n    --grey-a10: #e5edfd7b;\n    --grey-a11: #f1f7feb5;\n    --grey-a12: #fcfdffef;\n\n    --green-1: #0d1912;\n    --green-2: #0c1f17;\n    --green-3: #0f291e;\n    --green-4: #113123;\n    --green-5: #133929;\n    --green-6: #164430;\n    --green-7: #1b543a;\n    --green-8: #236e4a;\n    --green-9: #30a46c;\n    --green-10: #3cb179;\n    --green-11: #4cc38a;\n    --green-12: #e5fbeb;\n    --green-a1: #0000;\n    --green-a2: #00f7ca07;\n    --green-a3: #2afebe12;\n    --green-a4: #33feb31b;\n    --green-a5: #38feb524;\n    --green-a6: #3dffb130;\n    --green-a7: #43ffad42;\n    --green-a8: #49ffaa5e;\n    --green-a9: #47ffa69a;\n    --green-a10: #54ffafa9;\n    --green-a11: #62ffb3bd;\n    --green-a12: #eafff0fa;\n\n    --orange-1: #1f1206;\n    --orange-2: #2b1400;\n    --orange-3: #391a03;\n    --orange-4: #441f04;\n    --orange-5: #4f2305;\n    --orange-6: #5f2a06;\n    --orange-7: #763205;\n    --orange-8: #943e00;\n    --orange-9: #f76808;\n    --orange-10: #ff802b;\n    --orange-11: #ff8b3e;\n    --orange-12: #feeadd;\n    --orange-a1: #0000;\n    --orange-a2: #fd37000e;\n    --orange-a3: #fd54001e;\n    --orange-a4: #fe61002a;\n    --orange-a5: #fe620137;\n    --orange-a6: #ff650649;\n    --orange-a7: #ff640363;\n    --orange-a8: #fe660085;\n    --orange-a9: #ff6b08f6;\n    --orange-a10: #ff842cfa;\n    --orange-a11: #ff8c3ffa;\n    --orange-a12: #ffeee1fa;\n\n    --red-1: #150f0f;\n    --red-2: #1e1413;\n    --red-3: #361717;\n    --red-4: #49191a;\n    --red-5: #582122;\n    --red-6: #692e2e;\n    --red-7: #813e3e;\n    --red-8: #a75252;\n    --red-9: #d16565;\n    --red-10: #c35959;\n    --red-11: #ff9795;\n    --red-12: #f9d5d3;\n    --red-a1: #de000005;\n    --red-a2: #fe48360e;\n    --red-a3: #fd383828;\n    --red-a4: #ff33383c;\n    --red-a5: #fd464a4d;\n    --red-a6: #fd5f5f5f;\n    --red-a7: #ff717178;\n    --red-a8: #ff7878a1;\n    --red-a9: #ff7979ce;\n    --red-a10: #ff7272bf;\n    --red-a11: #ff9795ef;\n    --red-a12: #ffdad8f9;\n\n  }\n\n  .light-theme, .dark-theme {\n\n    /* --- Constant Colors --- */\n    // The should not change between light and dark.\n    --white: #FFFFFF;\n    --white-1: var(--white);\n    --white-2: var(--white);\n    --white-3: var(--white);\n    --white-4: var(--white);\n    --white-5: var(--white);\n    --white-6: var(--white);\n    --white-7: var(--white);\n    --white-8: var(--white);\n    --white-9: var(--white);\n    --white-10: var(--white);\n    --white-11: var(--white);\n    --white-12: var(--white);\n\n    --white-a1: #fff0;\n    --white-a2: #ffffff03;\n    --white-a3: #ffffff09;\n    --white-a4: #ffffff0e;\n    --white-a5: #ffffff16;\n    --white-a6: #ffffff20;\n    --white-a7: #ffffff2d;\n    --white-a8: #ffffff3f;\n    --white-a9: #ffffff62;\n    --white-a10: #ffffff72;\n    --white-a11: #ffffff97;\n    --white-a12: #ffffffeb;\n\n    --black: #000;\n    --black-1: var(--black);\n    --black-2: var(--black);\n    --black-3: var(--black);\n    --black-4: var(--black);\n    --black-5: var(--black);\n    --black-6: var(--black);\n    --black-7: var(--black);\n    --black-8: var(--black);\n    --black-9: var(--black);\n    --black-10: var(--black);\n    --black-11: var(--black);\n    --black-12: var(--black);\n\n    --black-a1: #00000003;\n    --black-a2: #00000007;\n    --black-a3: #0000000c;\n    --black-a4: #00000012;\n    --black-a5: #00000017;\n    --black-a6: #0000001d;\n    --black-a7: #00000024;\n    --black-a8: #00000038;\n    --black-a9: #00000070;\n    --black-a10: #0000007a;\n    --black-a11: #00000090;\n    --black-a12: #000000e8;\n\n  }\n\n\n  /** --- Color Aliases --- */\n  // Used for state based variable names that can be detached later from base colors if needed.\n  .light-theme, .dark-theme {\n\n    --info-1: var(--secondary-1);\n    --info-2: var(--secondary-2);\n    --info-3: var(--secondary-3);\n    --info-4: var(--secondary-4);\n    --info-5: var(--secondary-5);\n    --info-6: var(--secondary-6);\n    --info-7: var(--secondary-7);\n    --info-8: var(--secondary-8);\n    --info-9: var(--secondary-9);\n    --info-10: var(--secondary-10);\n    --info-11: var(--secondary-11);\n    --info-12: var(--secondary-12);\n    --info-a1: var(--secondary-a1);\n    --info-a2: var(--secondary-a2);\n    --info-a3: var(--secondary-a3);\n    --info-a4: var(--secondary-a4);\n    --info-a5: var(--secondary-a5);\n    --info-a6: var(--secondary-a6);\n    --info-a7: var(--secondary-a7);\n    --info-a8: var(--secondary-a8);\n    --info-a9: var(--secondary-a9);\n    --info-a10: var(--secondary-a10);\n    --info-a11: var(--secondary-a11);\n    --info-a12: var(--secondary-a12);\n\n    --success-1: var(--green-1);\n    --success-2: var(--green-2);\n    --success-3: var(--green-3);\n    --success-4: var(--green-4);\n    --success-5: var(--green-5);\n    --success-6: var(--green-6);\n    --success-7: var(--green-7);\n    --success-8: var(--green-8);\n    --success-9: var(--green-9);\n    --success-10: var(--green-10);\n    --success-11: var(--green-11);\n    --success-12: var(--green-12);\n    --success-a1: var(--green-a1);\n    --success-a2: var(--green-a2);\n    --success-a3: var(--green-a3);\n    --success-a4: var(--green-a4);\n    --success-a5: var(--green-a5);\n    --success-a6: var(--green-a6);\n    --success-a7: var(--green-a7);\n    --success-a8: var(--green-a8);\n    --success-a9: var(--green-a9);\n    --success-a10: var(--green-a10);\n    --success-a11: var(--green-a11);\n    --success-a12: var(--green-a12);\n\n    --caution-1: var(--orange-1);\n    --caution-2: var(--orange-2);\n    --caution-3: var(--orange-3);\n    --caution-4: var(--orange-4);\n    --caution-5: var(--orange-5);\n    --caution-6: var(--orange-6);\n    --caution-7: var(--orange-7);\n    --caution-8: var(--orange-8);\n    --caution-9: var(--orange-9);\n    --caution-10: var(--orange-10);\n    --caution-11: var(--orange-11);\n    --caution-12: var(--orange-12);\n    --caution-a1: var(--orange-a1);\n    --caution-a2: var(--orange-a2);\n    --caution-a3: var(--orange-a3);\n    --caution-a4: var(--orange-a4);\n    --caution-a5: var(--orange-a5);\n    --caution-a6: var(--orange-a6);\n    --caution-a7: var(--orange-a7);\n    --caution-a8: var(--orange-a8);\n    --caution-a9: var(--orange-a9);\n    --caution-a10: var(--orange-a10);\n    --caution-a11: var(--orange-a11);\n    --caution-a12: var(--orange-a12);\n\n    --warning-1: var(--red-1);\n    --warning-2: var(--red-2);\n    --warning-3: var(--red-3);\n    --warning-4: var(--red-4);\n    --warning-5: var(--red-5);\n    --warning-6: var(--red-6);\n    --warning-7: var(--red-7);\n    --warning-8: var(--red-8);\n    --warning-9: var(--red-9);\n    --warning-10: var(--red-10);\n    --warning-11: var(--red-11);\n    --warning-12: var(--red-12);\n    --warning-a1: var(--red-a1);\n    --warning-a2: var(--red-a2);\n    --warning-a3: var(--red-a3);\n    --warning-a4: var(--red-a4);\n    --warning-a5: var(--red-a5);\n    --warning-a6: var(--red-a6);\n    --warning-a7: var(--red-a7);\n    --warning-a8: var(--red-a8);\n    --warning-a9: var(--red-a9);\n    --warning-a10: var(--red-a10);\n    --warning-a11: var(--red-a11);\n    --warning-a12: var(--red-a12);\n\n  }\n\n  .light-theme {\n    --shadow-primary-default: var(--grey-a4);\n    --shadow-primary-elevate: var(--primary-a5);\n\n    --shadow-secondary-default: var(--grey-3);\n    --shadow-secondary-elevate: var(--grey-a4);\n\n    --shadow-warning-default: var(--grey-a4);\n    --shadow-warning-elevate: var(--warning-a5);\n  }\n\n  .dark-theme {\n    --shadow-primary-default: var(--primary-a2);\n    --shadow-primary-elevate: var(--primary-a2);\n\n    --shadow-secondary-default: var(--black-a8);\n    --shadow-secondary-elevate: var(--primary-a4);\n\n    --shadow-warning-default: var(--grey-a3);\n    --shadow-warning-elevate: var(--warning-a7);\n  }\n\n  /* --- Component Aliases --- */\n  // For specific component uses within the UI Kit.\n  .light-theme, .dark-theme {\n    /* feedback */\n    --error: var(--warning-8);\n    --info: var(--primary-7);\n    --neutral: var(--grey-9);\n    --success: var(--success-8);\n    --warning: var(--caution-8);\n\n    /* tooltip */\n    --tooltip-warning: var(--warning-a9);\n    --tooltip-warning-arrow: var(--warning-9);\n    --tooltip-warning-border: var(--warning-a7);\n\n    --tooltip-success: var(--success-9);\n    --tooltip-success-arrow: var(--success-8);\n    --tooltip-success-border: var(--success-a7);\n\n    --tooltip-info: var(--primary-8);\n    --tooltip-info-arrow: var(--primary-8);\n    --tooltip-info-border: var(--primary-a8);\n\n    --tooltip-neutral: var(--grey-8);\n    --tooltip-neutral-arrow: var(--grey-7);\n    --tooltip-neutral-border: var(--grey-7);\n\n      /* icons */\n    --inverse: var(--white-1);\n    --mono: var(--grey-12);\n    --dimmed: var(--grey-11);\n    --subtle: var(--grey-10);\n    --primary: var(--primary-9);\n    --danger: var(--warning-9);\n\n\n    --spinner-danger: var(--warning-8);\n    --spinner-secondary: var(--grey-8);\n    --spinner-primary: var(--primary-6);\n    --spinner-simple: var(--grey-a8);\n\n    /* Global */\n    --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n    --main-background-color: var(--grey-3);\n\n    --primary-gradient-start: var(--primary-9);\n    --primary-gradient-end: var(--primary-10);\n    --primary-gradient: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));\n\n    --secondary-gradient-start: var(--grey-5);\n    --secondary-gradient-end: var(--grey-6);\n    --secondary-gradient: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));\n\n    --warning-gradient-start: var(--warning-9);\n    --warning-gradient-end: var(--warning-10);\n    --warning-gradient: linear-gradient(135deg, var(--warning-gradient-start), var(--warning-gradient-end));\n    \n    --dividing-line: var(--grey-4);\n    --global-element-background: var(--grey-2);\n    --global-menu-icon-background-default: transparent;\n    --global-menu-icon-background-hover: var(--primary-8);\n    --global-menu-icon-background-active: var(--primary-9);\n\n    /* Inputs */\n    --input-color-default: var(--grey-12);\n    --input-color-disabled: var(--grey-10);\n    --input-color-placeholder: var(--grey-10);\n    --input-color-unit: var(--grey-10);\n        \n    --input-default-background-color: var(--grey-1);\n    --input-default-border-color: var(--grey-6);\n    --input-default-shadow-color: transparent;\n\n    --input-default-focused-background-color: var(--grey-1);\n    --input-default-focused-border-color: var(--grey-6);\n    --input-default-focused-shadow-color: var(--grey-3);\n\n    --input-disabled-background-color: var(--grey-3);\n    --input-disabled-border-color: var(--grey-6);\n    --input-disabled-shadow-color: transparent;\n\n    --input-required-background-color: var(--grey-1);\n    --input-required-border-color: var(--primary-6);\n    --input-required-shadow-color: transparent;\n\n    --input-required-focused-background-color: var(--grey-1);\n    --input-required-focused-border-color: var(--primary-6);\n    --input-required-focused-shadow-color: var(--grey-3);\n\n    --input-valid-background-color: var(--grey-1);\n    --input-valid-border-color: var(--success-9);\n    --input-valid-shadow-color: transparent;\n\n    --input-valid-focused-background-color: var(--grey-1);\n    --input-valid-focused-border-color: var(--success-9);\n    --input-valid-focused-shadow-color: var(--grey-3);\n\n    --input-invalid-background-color: var(--grey-1);\n    --input-invalid-border-color: var(--warning-9);\n    --input-invalid-shadow-color: transparent;\n\n    --input-invalid-focused-background-color: var(--grey-1);\n    --input-invalid-focused-border-color: var(--warning-9);\n    --input-invalid-focused-shadow-color: var(--grey-3);\n\n    --input-processing-background-color: var(--grey-3)2;\n    --input-processing-border-color: var(--primary-10);\n    --input-processing-shadow-color: transparent;\n\n    --input-processing-focused-background-color: var(--grey-2);\n    --input-processing-focused-border-color: var(--primary-10);\n    --input-processing-focused-shadow-color: var(--grey-3);\n\n    /* Input Icons */\n    --input-lead-icon: var(--grey-12);\n    --input-disabled-lead-icon: var(--grey-10);\n\n    /* Checkboxes and Radio Buttons */\n    --input-toggle-icon-color: var(--white-12);\n    \n    --input-toggle-unchecked-border-color: var(--grey-8);\n    --input-toggle-unchecked-background-color: transparent;\n    \n    --input-toggle-checked-border-color: var(--primary-9);\n    --input-toggle-checked-background-color: var(--primary-9);\n    \n    \n    --input-toggle-unchecked-hover-border-color: var(--primary-9);\n    --input-toggle-unchecked-hover-background-color: transparent;\n    \n    --input-toggle-checked-hover-border-color: var(--primary-7);\n    --input-toggle-checked-hover-background-color: var(--primary-7);\n    \n    \n    --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n    --input-toggle-unchecked-disabled-background-color: transparent;\n\n    --input-toggle-checked-disabled-border-color: var(--grey-7);\n    --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n    \n    --input-toggle-intermediate-border-color: var(--primary-11);\n    --input-toggle-intermediate-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-hover-border-color: var(--primary-11);\n    --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n    --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n    /* Labels */\n    --input-label: var(--grey-11);\n    --input-label-hover: var(--primary-8);\n    --input-label-active: var(--grey-12);\n\n  }\n\n  /* Filters */\n  .light-theme, .dark-theme {\n    --filter-button-text-color: var(--grey-11);\n    --filter-button-icon-color: var(--grey-10);\n    --filter-button-background-color: var(--grey-2);\n    --filter-button-stroke-color: var(--grey-a5);\n    --filter-button-shadow-color: var(--primary-a3);\n\n    --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n    --filter-dropdown-background-color-fallback: var(--grey-3);\n    --filter-dropdown-accent: var(--primary-a9); \n\n  }\n\n  .dark-theme {\n    --filter-button-shadow-color: var(--black-a8);\n  }\n\n  /* Buttons */\n  .light-theme, .dark-theme {\n    --button-background-color: var(--primary-9);\n    --button-border-color: var(--primary-9);\n    --button-inner-shadow-color: transparent;\n    --button-drop-shadow-color: var(--shadow-primary-default);\n    --button-text-color: var(--white-1);\n    --button-divider-color: var(--primary-a3);\n    --button-loading-area-background-color: var(--primary-a7);\n    --button-loading-area-divider-color: var(--primary-a8);\n\n    --button-hover-background-color: var(--primary-8);\n    --button-hover-border-color: var(--primary-a6);\n    --button-hover-inner-shadow-color: transparent;\n    --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n    --button-hover-text-color: var(--white-1);\n    --button-hover-divider-color: var(--primary-a3);\n    --button-hover-icon-area-background-color: var(--primary-a3);\n\n    --button-active-background-color: var(--button-hover-background-color);\n    --button-active-border-color: var(--button-hover-border-color);\n    --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n    --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n    --button-active-text-color: var(--white-1);\n    --button-active-divider-color: var(--primary-a3);\n    --button-active-icon-area-background-color: var(--primary-a3);\n\n    --button-gradient-start: var(--primary-gradient-start);\n    --button-gradient-end: var(--primary-gradient-end);\n\n    .button-design-secondary {\n      --button-background-color: var(--grey-9);\n      --button-border-color: var(--grey-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-secondary-default);\n      --button-text-color: var(--grey-12);\n      --button-divider-color: var(--grey-a3);\n      \n      --button-loading-area-background-color: var(--grey-a4);\n      --button-loading-area-divider-color: var(--grey-a3);\n\n      --button-hover-background-color: var(--grey-8);\n      --button-hover-border-color: var(--grey-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--secondary-gradient-start);\n      --button-gradient-end: var(--secondary-gradient-end);\n    }\n\n    .button-design-danger, .button-design-warning {\n      --button-background-color: var(--warning-9);\n      --button-border-color: var(--warning-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-warning-default);\n      --button-text-color: var(--white-1);\n      --button-divider-color: var(--warning-9);\n\n      --button-loading-area-background-color: var(--warning-a7);\n      --button-loading-area-divider-color: var(--warning-a9);\n\n      --button-hover-background-color: var(--warning-8);\n      --button-hover-border-color: var(--warning-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--warning-gradient-start);\n      --button-gradient-end: var(--warning-gradient-end);\n    }\n\n  }\n\n"])));
+var colorVariables = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  .light-theme {\n    /* --- Light Mode --- */\n    --primary-1: #fcfdff;\n    --primary-2: #f5f9ff;\n    --primary-3: #eaf3ff;\n    --primary-4: #dbecff;\n    --primary-5: #c9e2ff;\n    --primary-6: #b5d5ff;\n    --primary-7: #9bc3fa;\n    --primary-8: #76aaf4;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #3c6eb3;\n    --primary-12: #0b3162;\n    --primary-a1: #0055ff03;\n    --primary-a2: #0066ff0a;\n    --primary-a3: #006eff15;\n    --primary-a4: #0079ff24;\n    --primary-a5: #0077ff36;\n    --primary-a6: #016fff4a;\n    --primary-a7: #0066f364;\n    --primary-a8: #0061eb89;\n    --primary-a9: #006bff7f;\n    --primary-a10: #0062e98a;\n    --primary-a11: #00429cc3;\n    --primary-a12: #00285bf4;\n\n    --secondary-1: #fafefd;\n    --secondary-2: #f1fcfa;\n    --secondary-3: #e7f9f5;\n    --secondary-4: #d9f3ee;\n    --secondary-5: #c7ebe5;\n    --secondary-6: #afdfd7;\n    --secondary-7: #8dcec3;\n    --secondary-8: #53b9ab;\n    --secondary-9: #12a594;\n    --secondary-10: #0e9888;\n    --secondary-11: #067a6f;\n    --secondary-12: #10302b;\n    --secondary-a1: #05cd9b05;\n    --secondary-a2: #01c8a40e;\n    --secondary-a3: #02c09718;\n    --secondary-a4: #02af8c26;\n    --secondary-a5: #00a48938;\n    --secondary-a6: #00998050;\n    --secondary-a7: #01927a72;\n    --secondary-a8: #009783ac;\n    --secondary-a9: #009e8ced;\n    --secondary-a10: #009281f1;\n    --secondary-a11: #00776bf9;\n    --secondary-a12: #00221def;\n\n    --grey-1: #fcfcfd;\n    --grey-2: #f9f9fb;\n    --grey-3: #f0f0f3;\n    --grey-4: #e8e8ec;\n    --grey-5: #e0e1e6;\n    --grey-6: #d9d9e0e0;\n    --grey-7: #cdced6;\n    --grey-8: #b9bbc6;\n    --grey-9: #8b8d98;\n    --grey-10: #80838d;\n    --grey-11: #717989;\n    --grey-12: #5a6671;\n    --grey-a1: #00005503;\n    --grey-a2: #00005506;\n    --grey-a3: #00003310;\n    --grey-a4: #00002d17;\n    --grey-a5: #0009321f;\n    --grey-a6: #00002f26;\n    --grey-a7: #00062e32;\n    --grey-a8: #00083046;\n    --grey-a9: #00051d74;\n    --grey-a10: #00071b7f;\n    --grey-a11: #020b1d9f;\n    --grey-a12: #020b1de3;\n\n    --green-1: #fbfefc;\n    --green-2: #f2fcf5;\n    --green-3: #e9f9ee;\n    --green-4: #ddf3e4;\n    --green-5: #ccebd7;\n    --green-6: #b4dfc4;\n    --green-7: #92ceac;\n    --green-8: #5bb98c;\n    --green-9: #30a46c;\n    --green-10: #299764;\n    --green-11: #18794e;\n    --green-12: #153226;\n    --green-a1: #05c04304;\n    --green-a2: #00c43b0d;\n    --green-a3: #02ba3c16;\n    --green-a4: #01a63522;\n    --green-a5: #009b3633;\n    --green-a6: #0193364b;\n    --green-a7: #008c3d6d;\n    --green-a8: #00934ca4;\n    --green-a9: #008f4acf;\n    --green-a10: #008346d6;\n    --green-a11: #006b3be7;\n    --green-a12: #002012ea;\n\n    --orange-1: #fefcfb;\n    --orange-2: #fef8f4;\n    --orange-3: #fff1e7;\n    --orange-4: #ffe8d7;\n    --orange-5: #ffdcc3;\n    --orange-6: #ffcca7;\n    --orange-7: #ffb381;\n    --orange-8: #fa934e;\n    --orange-9: #f76808;\n    --orange-10: #ed5f00;\n    --orange-11: #bd4b00;\n    --orange-12: #451e11;\n    --orange-a1: #c0430504;\n    --orange-a2: #e860050b;\n    --orange-a3: #ff6c0318;\n    --orange-a4: #ff6e0028;\n    --orange-a5: #ff6b013c;\n    --orange-a6: #ff6b0158;\n    --orange-a7: #ff66017e;\n    --orange-a8: #f86300b1;\n    --orange-a9: #f76300f7;\n    --orange-a10: #ed5b00fa;\n    --orange-a11: #bc4800fa;\n    --orange-a12: #380e00ee;\n\n    --red-1: #fefcfc;\n    --red-2: #fdf8f8;\n    --red-3: #faedec;\n    --red-4: #fddfdd;\n    --red-5: #f8d2d0;\n    --red-6: #f1c3c1;\n    --red-7: #e6b1ae;\n    --red-8: #da9996;\n    --red-9: #d16565;\n    --red-10: #c45859;\n    --red-11: #b64d4e;\n    --red-12: #592525;\n    --red-a1: #aa000003;\n    --red-a2: #b7000007;\n    --red-a3: #bc0e0013;\n    --red-a4: #f00f0022;\n    --red-a5: #da0b002f;\n    --red-a6: #c609003e;\n    --red-a7: #b10a0051;\n    --red-a8: #a6080069;\n    --red-a9: #b300009a;\n    --red-a10: #a50002a7;\n    --red-a11: #970002b2;\n    --red-a12: #3d0000da;\n\n  }\n\n  .dark-theme {\n    /* --- Dark mode --- */\n    --primary-1: #000;\n    --primary-2: #09121e;\n    --primary-3: #0e2341;\n    --primary-4: #0c2f5d;\n    --primary-5: #153c70;\n    --primary-6: #214a81;\n    --primary-7: #2d5a97;\n    --primary-8: #366bb5;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #81b7ff;\n    --primary-12: #cee3ff;\n    --primary-a1: #0000;\n    --primary-a2: #4d99ff1e;\n    --primary-a3: #378aff41;\n    --primary-a4: #2181ff5d;\n    --primary-a5: #3089ff70;\n    --primary-a6: #4293ff81;\n    --primary-a7: #4c98ff97;\n    --primary-a8: #4c97ffb5;\n    --primary-a9: #80b5ff;\n    --primary-a10: #7bb2fff3;\n    --primary-a11: #81b7ff;\n    --primary-a12: #cee3ff;\n\n    --secondary-1: #091915;\n    --secondary-2: #04201b;\n    --secondary-3: #062923;\n    --secondary-4: #07312b;\n    --secondary-5: #083932;\n    --secondary-6: #09443c;\n    --secondary-7: #0b544a;\n    --secondary-8: #0c6d62;\n    --secondary-9: #12a594;\n    --secondary-10: #10b3a3;\n    --secondary-11: #0ac5b3;\n    --secondary-12: #e1faf4;\n    --secondary-a1: #0000;\n    --secondary-a2: #00fbd508;\n    --secondary-a3: #00fddc12;\n    --secondary-a4: #00fde81b;\n    --secondary-a5: #02fee424;\n    --secondary-a6: #09ffe630;\n    --secondary-a7: #11ffe342;\n    --secondary-a8: #11ffe75d;\n    --secondary-a9: #18ffe49b;\n    --secondary-a10: #13ffe7ab;\n    --secondary-a11: #0affe7bf;\n    --secondary-a12: #e6fff9fa;\n\n    --grey-1: #111113;\n    --grey-2: #18191b;\n    --grey-3: #212225;\n    --grey-4: #272a2d;\n    --grey-5: #2e3135;\n    --grey-6: #363a3f;\n    --grey-7: #43484e;\n    --grey-8: #5a6169;\n    --grey-9: #696e77;\n    --grey-10: #777b84;\n    --grey-11: #9a9fa7;\n    --grey-12: #d5d8dc;\n    --grey-a1: #0000;\n    --grey-a2: #d8f4f609;\n    --grey-a3: #ddeaf814;\n    --grey-a4: #d3edf81d;\n    --grey-a5: #d9edfe25;\n    --grey-a6: #d6ebfd30;\n    --grey-a7: #d9edff40;\n    --grey-a8: #d9edff5d;\n    --grey-a9: #dfebfd6d;\n    --grey-a10: #e5edfd7b;\n    --grey-a11: #f1f7feb5;\n    --grey-a12: #fcfdffef;\n\n    --green-1: #0d1912;\n    --green-2: #0c1f17;\n    --green-3: #0f291e;\n    --green-4: #113123;\n    --green-5: #133929;\n    --green-6: #164430;\n    --green-7: #1b543a;\n    --green-8: #236e4a;\n    --green-9: #30a46c;\n    --green-10: #3cb179;\n    --green-11: #4cc38a;\n    --green-12: #e5fbeb;\n    --green-a1: #0000;\n    --green-a2: #00f7ca07;\n    --green-a3: #2afebe12;\n    --green-a4: #33feb31b;\n    --green-a5: #38feb524;\n    --green-a6: #3dffb130;\n    --green-a7: #43ffad42;\n    --green-a8: #49ffaa5e;\n    --green-a9: #47ffa69a;\n    --green-a10: #54ffafa9;\n    --green-a11: #62ffb3bd;\n    --green-a12: #eafff0fa;\n\n    --orange-1: #1f1206;\n    --orange-2: #2b1400;\n    --orange-3: #391a03;\n    --orange-4: #441f04;\n    --orange-5: #4f2305;\n    --orange-6: #5f2a06;\n    --orange-7: #763205;\n    --orange-8: #943e00;\n    --orange-9: #f76808;\n    --orange-10: #ff802b;\n    --orange-11: #ff8b3e;\n    --orange-12: #feeadd;\n    --orange-a1: #0000;\n    --orange-a2: #fd37000e;\n    --orange-a3: #fd54001e;\n    --orange-a4: #fe61002a;\n    --orange-a5: #fe620137;\n    --orange-a6: #ff650649;\n    --orange-a7: #ff640363;\n    --orange-a8: #fe660085;\n    --orange-a9: #ff6b08f6;\n    --orange-a10: #ff842cfa;\n    --orange-a11: #ff8c3ffa;\n    --orange-a12: #ffeee1fa;\n\n    --red-1: #150f0f;\n    --red-2: #1e1413;\n    --red-3: #361717;\n    --red-4: #49191a;\n    --red-5: #582122;\n    --red-6: #692e2e;\n    --red-7: #813e3e;\n    --red-8: #a75252;\n    --red-9: #d16565;\n    --red-10: #c35959;\n    --red-11: #ff9795;\n    --red-12: #f9d5d3;\n    --red-a1: #de000005;\n    --red-a2: #fe48360e;\n    --red-a3: #fd383828;\n    --red-a4: #ff33383c;\n    --red-a5: #fd464a4d;\n    --red-a6: #fd5f5f5f;\n    --red-a7: #ff717178;\n    --red-a8: #ff7878a1;\n    --red-a9: #ff7979ce;\n    --red-a10: #ff7272bf;\n    --red-a11: #ff9795ef;\n    --red-a12: #ffdad8f9;\n\n  }\n\n  .light-theme, .dark-theme {\n\n    /* --- Constant Colors --- */\n    // The should not change between light and dark.\n    --white: #FFFFFF;\n    --white-1: var(--white);\n    --white-2: var(--white);\n    --white-3: var(--white);\n    --white-4: var(--white);\n    --white-5: var(--white);\n    --white-6: var(--white);\n    --white-7: var(--white);\n    --white-8: var(--white);\n    --white-9: var(--white);\n    --white-10: var(--white);\n    --white-11: var(--white);\n    --white-12: var(--white);\n\n    --white-a1: #fff0;\n    --white-a2: #ffffff03;\n    --white-a3: #ffffff09;\n    --white-a4: #ffffff0e;\n    --white-a5: #ffffff16;\n    --white-a6: #ffffff20;\n    --white-a7: #ffffff2d;\n    --white-a8: #ffffff3f;\n    --white-a9: #ffffff62;\n    --white-a10: #ffffff72;\n    --white-a11: #ffffff97;\n    --white-a12: #ffffffeb;\n\n    --black: #000;\n    --black-1: var(--black);\n    --black-2: var(--black);\n    --black-3: var(--black);\n    --black-4: var(--black);\n    --black-5: var(--black);\n    --black-6: var(--black);\n    --black-7: var(--black);\n    --black-8: var(--black);\n    --black-9: var(--black);\n    --black-10: var(--black);\n    --black-11: var(--black);\n    --black-12: var(--black);\n\n    --black-a1: #00000003;\n    --black-a2: #00000007;\n    --black-a3: #0000000c;\n    --black-a4: #00000012;\n    --black-a5: #00000017;\n    --black-a6: #0000001d;\n    --black-a7: #00000024;\n    --black-a8: #00000038;\n    --black-a9: #00000070;\n    --black-a10: #0000007a;\n    --black-a11: #00000090;\n    --black-a12: #000000e8;\n\n  }\n\n\n  /** --- Color Aliases --- */\n  // Used for state based variable names that can be detached later from base colors if needed.\n  .light-theme, .dark-theme {\n\n    --info-1: var(--secondary-1);\n    --info-2: var(--secondary-2);\n    --info-3: var(--secondary-3);\n    --info-4: var(--secondary-4);\n    --info-5: var(--secondary-5);\n    --info-6: var(--secondary-6);\n    --info-7: var(--secondary-7);\n    --info-8: var(--secondary-8);\n    --info-9: var(--secondary-9);\n    --info-10: var(--secondary-10);\n    --info-11: var(--secondary-11);\n    --info-12: var(--secondary-12);\n    --info-a1: var(--secondary-a1);\n    --info-a2: var(--secondary-a2);\n    --info-a3: var(--secondary-a3);\n    --info-a4: var(--secondary-a4);\n    --info-a5: var(--secondary-a5);\n    --info-a6: var(--secondary-a6);\n    --info-a7: var(--secondary-a7);\n    --info-a8: var(--secondary-a8);\n    --info-a9: var(--secondary-a9);\n    --info-a10: var(--secondary-a10);\n    --info-a11: var(--secondary-a11);\n    --info-a12: var(--secondary-a12);\n\n    --success-1: var(--green-1);\n    --success-2: var(--green-2);\n    --success-3: var(--green-3);\n    --success-4: var(--green-4);\n    --success-5: var(--green-5);\n    --success-6: var(--green-6);\n    --success-7: var(--green-7);\n    --success-8: var(--green-8);\n    --success-9: var(--green-9);\n    --success-10: var(--green-10);\n    --success-11: var(--green-11);\n    --success-12: var(--green-12);\n    --success-a1: var(--green-a1);\n    --success-a2: var(--green-a2);\n    --success-a3: var(--green-a3);\n    --success-a4: var(--green-a4);\n    --success-a5: var(--green-a5);\n    --success-a6: var(--green-a6);\n    --success-a7: var(--green-a7);\n    --success-a8: var(--green-a8);\n    --success-a9: var(--green-a9);\n    --success-a10: var(--green-a10);\n    --success-a11: var(--green-a11);\n    --success-a12: var(--green-a12);\n\n    --caution-1: var(--orange-1);\n    --caution-2: var(--orange-2);\n    --caution-3: var(--orange-3);\n    --caution-4: var(--orange-4);\n    --caution-5: var(--orange-5);\n    --caution-6: var(--orange-6);\n    --caution-7: var(--orange-7);\n    --caution-8: var(--orange-8);\n    --caution-9: var(--orange-9);\n    --caution-10: var(--orange-10);\n    --caution-11: var(--orange-11);\n    --caution-12: var(--orange-12);\n    --caution-a1: var(--orange-a1);\n    --caution-a2: var(--orange-a2);\n    --caution-a3: var(--orange-a3);\n    --caution-a4: var(--orange-a4);\n    --caution-a5: var(--orange-a5);\n    --caution-a6: var(--orange-a6);\n    --caution-a7: var(--orange-a7);\n    --caution-a8: var(--orange-a8);\n    --caution-a9: var(--orange-a9);\n    --caution-a10: var(--orange-a10);\n    --caution-a11: var(--orange-a11);\n    --caution-a12: var(--orange-a12);\n\n    --warning-1: var(--red-1);\n    --warning-2: var(--red-2);\n    --warning-3: var(--red-3);\n    --warning-4: var(--red-4);\n    --warning-5: var(--red-5);\n    --warning-6: var(--red-6);\n    --warning-7: var(--red-7);\n    --warning-8: var(--red-8);\n    --warning-9: var(--red-9);\n    --warning-10: var(--red-10);\n    --warning-11: var(--red-11);\n    --warning-12: var(--red-12);\n    --warning-a1: var(--red-a1);\n    --warning-a2: var(--red-a2);\n    --warning-a3: var(--red-a3);\n    --warning-a4: var(--red-a4);\n    --warning-a5: var(--red-a5);\n    --warning-a6: var(--red-a6);\n    --warning-a7: var(--red-a7);\n    --warning-a8: var(--red-a8);\n    --warning-a9: var(--red-a9);\n    --warning-a10: var(--red-a10);\n    --warning-a11: var(--red-a11);\n    --warning-a12: var(--red-a12);\n\n  }\n\n  .light-theme {\n    --shadow-primary-default: var(--grey-a4);\n    --shadow-primary-elevate: var(--primary-a5);\n\n    --shadow-secondary-default: var(--grey-3);\n    --shadow-secondary-elevate: var(--grey-a4);\n\n    --shadow-warning-default: var(--grey-a4);\n    --shadow-warning-elevate: var(--warning-a5);\n  }\n\n  .dark-theme {\n    --shadow-primary-default: var(--primary-a2);\n    --shadow-primary-elevate: var(--primary-a2);\n\n    --shadow-secondary-default: var(--black-a8);\n    --shadow-secondary-elevate: var(--primary-a4);\n\n    --shadow-warning-default: var(--grey-a3);\n    --shadow-warning-elevate: var(--warning-a7);\n  }\n\n  /* --- Component Aliases --- */\n  // For specific component uses within the UI Kit.\n  .light-theme, .dark-theme {\n    /* feedback */\n    --error: var(--warning-8);\n    --info: var(--primary-7);\n    --neutral: var(--grey-9);\n    --success: var(--success-8);\n    --warning: var(--caution-8);\n\n    /* tooltip */\n    --tooltip-warning: var(--warning-a9);\n    --tooltip-warning-arrow: var(--warning-9);\n    --tooltip-warning-border: var(--warning-a7);\n\n    --tooltip-success: var(--success-9);\n    --tooltip-success-arrow: var(--success-8);\n    --tooltip-success-border: var(--success-a7);\n\n    --tooltip-info: var(--primary-8);\n    --tooltip-info-arrow: var(--primary-8);\n    --tooltip-info-border: var(--primary-a8);\n\n    --tooltip-neutral: var(--grey-8);\n    --tooltip-neutral-arrow: var(--grey-7);\n    --tooltip-neutral-border: var(--grey-7);\n\n      /* icons */\n    --inverse: var(--white-1);\n    --mono: var(--grey-12);\n    --dimmed: var(--grey-11);\n    --subtle: var(--grey-10);\n    --primary: var(--primary-9);\n    --danger: var(--warning-9);\n\n    /* Spinner */\n    --spinner-primary-base: var(--primary-6);\n    --spinner-primary-top: var(--white-1);\n    \n    --spinner-secondary-base: var(--grey-8);\n    --spinner-secondary-top: var(--white-1);\n    \n    --spinner-simple-base: var(--grey-a8);\n    --spinner-simple-top: var(--white-1);\n    \n    --spinner-warning-base: var(--warning-8);\n    --spinner-warning-top: var(--white-1);\n    \n    /* Global */\n    --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n    --main-background-color: var(--grey-3);\n\n    --primary-gradient-start: var(--primary-9);\n    --primary-gradient-end: var(--primary-10);\n    --primary-gradient: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));\n\n    --secondary-gradient-start: var(--grey-5);\n    --secondary-gradient-end: var(--grey-6);\n    --secondary-gradient: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));\n\n    --warning-gradient-start: var(--warning-9);\n    --warning-gradient-end: var(--warning-10);\n    --warning-gradient: linear-gradient(135deg, var(--warning-gradient-start), var(--warning-gradient-end));\n    \n    --dividing-line: var(--grey-4);\n    --global-element-background: var(--grey-2);\n    --global-menu-icon-background-default: transparent;\n    --global-menu-icon-background-hover: var(--primary-8);\n    --global-menu-icon-background-active: var(--primary-9);\n\n    /* Inputs */\n    --input-color-default: var(--grey-12);\n    --input-color-disabled: var(--grey-10);\n    --input-color-placeholder: var(--grey-10);\n    --input-color-unit: var(--grey-10);\n        \n    --input-default-background-color: var(--grey-1);\n    --input-default-border-color: var(--grey-6);\n    --input-default-shadow-color: transparent;\n\n    --input-default-focused-background-color: var(--grey-1);\n    --input-default-focused-border-color: var(--grey-6);\n    --input-default-focused-shadow-color: var(--grey-3);\n\n    --input-disabled-background-color: var(--grey-3);\n    --input-disabled-border-color: var(--grey-6);\n    --input-disabled-shadow-color: transparent;\n\n    --input-required-background-color: var(--grey-1);\n    --input-required-border-color: var(--primary-6);\n    --input-required-shadow-color: transparent;\n\n    --input-required-focused-background-color: var(--grey-1);\n    --input-required-focused-border-color: var(--primary-6);\n    --input-required-focused-shadow-color: var(--grey-3);\n\n    --input-valid-background-color: var(--grey-1);\n    --input-valid-border-color: var(--success-9);\n    --input-valid-shadow-color: transparent;\n\n    --input-valid-focused-background-color: var(--grey-1);\n    --input-valid-focused-border-color: var(--success-9);\n    --input-valid-focused-shadow-color: var(--grey-3);\n\n    --input-invalid-background-color: var(--grey-1);\n    --input-invalid-border-color: var(--warning-9);\n    --input-invalid-shadow-color: transparent;\n\n    --input-invalid-focused-background-color: var(--grey-1);\n    --input-invalid-focused-border-color: var(--warning-9);\n    --input-invalid-focused-shadow-color: var(--grey-3);\n\n    --input-processing-background-color: var(--grey-3)2;\n    --input-processing-border-color: var(--primary-10);\n    --input-processing-shadow-color: transparent;\n\n    --input-processing-focused-background-color: var(--grey-2);\n    --input-processing-focused-border-color: var(--primary-10);\n    --input-processing-focused-shadow-color: var(--grey-3);\n\n    /* Input Icons */\n    --input-lead-icon: var(--grey-12);\n    --input-disabled-lead-icon: var(--grey-10);\n\n    /* Checkboxes and Radio Buttons */\n    --input-toggle-icon-color: var(--white-12);\n    \n    --input-toggle-unchecked-border-color: var(--grey-8);\n    --input-toggle-unchecked-background-color: transparent;\n    \n    --input-toggle-checked-border-color: var(--primary-9);\n    --input-toggle-checked-background-color: var(--primary-9);\n    \n    \n    --input-toggle-unchecked-hover-border-color: var(--primary-9);\n    --input-toggle-unchecked-hover-background-color: transparent;\n    \n    --input-toggle-checked-hover-border-color: var(--primary-7);\n    --input-toggle-checked-hover-background-color: var(--primary-7);\n    \n    \n    --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n    --input-toggle-unchecked-disabled-background-color: transparent;\n\n    --input-toggle-checked-disabled-border-color: var(--grey-7);\n    --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n    \n    --input-toggle-intermediate-border-color: var(--primary-11);\n    --input-toggle-intermediate-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-hover-border-color: var(--primary-11);\n    --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n    --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n    /* Labels */\n    --input-label: var(--grey-11);\n    --input-label-hover: var(--primary-8);\n    --input-label-active: var(--grey-12);\n\n  }\n\n  /* Filters */\n  .light-theme, .dark-theme {\n    --filter-button-text-color: var(--grey-11);\n    --filter-button-icon-color: var(--grey-10);\n    --filter-button-background-color: var(--grey-2);\n    --filter-button-stroke-color: var(--grey-a5);\n    --filter-button-shadow-color: var(--primary-a3);\n\n    --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n    --filter-dropdown-background-color-fallback: var(--grey-3);\n    --filter-dropdown-accent: var(--primary-a9); \n\n  }\n\n  .dark-theme {\n    --filter-button-shadow-color: var(--black-a8);\n  }\n\n  /* Typography */\n  .light-theme, .dark-theme {\n    --label-color: var(--grey-11);\n  }\n\n  /* Buttons */\n  .light-theme, .dark-theme {\n    --button-background-color: var(--primary-9);\n    --button-border-color: var(--primary-9);\n    --button-inner-shadow-color: transparent;\n    --button-drop-shadow-color: var(--shadow-primary-default);\n    --button-text-color: var(--white-1);\n    --button-divider-color: var(--primary-a3);\n    --button-loading-area-background-color: var(--primary-a7);\n    --button-loading-area-divider-color: var(--primary-a8);\n\n    --button-hover-background-color: var(--primary-8);\n    --button-hover-border-color: var(--primary-a6);\n    --button-hover-inner-shadow-color: transparent;\n    --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n    --button-hover-text-color: var(--white-1);\n    --button-hover-divider-color: var(--primary-a3);\n    --button-hover-icon-area-background-color: var(--primary-a3);\n\n    --button-active-background-color: var(--button-hover-background-color);\n    --button-active-border-color: var(--button-hover-border-color);\n    --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n    --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n    --button-active-text-color: var(--white-1);\n    --button-active-divider-color: var(--primary-a3);\n    --button-active-icon-area-background-color: var(--primary-a3);\n\n    --button-gradient-start: var(--primary-gradient-start);\n    --button-gradient-end: var(--primary-gradient-end);\n\n    .button-design-secondary {\n      --button-background-color: var(--grey-9);\n      --button-border-color: var(--grey-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-secondary-default);\n      --button-text-color: var(--grey-12);\n      --button-divider-color: var(--grey-a3);\n      \n      --button-loading-area-background-color: var(--grey-a4);\n      --button-loading-area-divider-color: var(--grey-a3);\n\n      --button-hover-background-color: var(--grey-8);\n      --button-hover-border-color: var(--grey-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--secondary-gradient-start);\n      --button-gradient-end: var(--secondary-gradient-end);\n    }\n\n    .button-design-danger, .button-design-warning {\n      --button-background-color: var(--warning-9);\n      --button-border-color: var(--warning-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-warning-default);\n      --button-text-color: var(--white-1);\n      --button-divider-color: var(--warning-9);\n\n      --button-loading-area-background-color: var(--warning-a7);\n      --button-loading-area-divider-color: var(--warning-a9);\n\n      --button-hover-background-color: var(--warning-8);\n      --button-hover-border-color: var(--warning-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--warning-gradient-start);\n      --button-gradient-end: var(--warning-gradient-end);\n    }\n\n  }\n\n  /* Switches */\n  .light-theme, .dark-theme {\n    // Background\n    --switch-default-off-background: var(--grey-4);\n    --switch-default-on-background: var(--primary-9);\n    --switch-default-danger-background: var(--warning-9);\n\n    --switch-disabled-off-background: var(--grey-3);\n    --switch-disabled-on-background: var(--primary-8);\n    --switch-disabled-danger-background: var(--warning-8);\n    \n    // Border\n    --switch-default-off-border: var(--grey-7);\n    --switch-default-on-border: var(--primary-9);\n    --switch-default-danger-border: var(--warning-9);\n    \n    --switch-disabled-off-border: var(--grey-6);\n    --switch-disabled-on-border: var(--primary-a6);\n    --switch-disabled-danger-border: var(--warning-a6);\n    \n    // Inner\n    --switch-default-off-inner: var(--primary-9);\n    --switch-default-on-inner: var(--white-12);\n    --switch-default-danger-inner: var(--white-12);\n    \n    --switch-disabled-off-inner: var(--grey-7);\n    --switch-disabled-on-inner: var(--primary-a9);\n    --switch-disabled-danger-inner: var(--warning-a9);\n    \n    // Special States\n    --switch-special-locked-background: var(--grey-3);\n    --switch-special-locked-border: var(--grey-11);\n    --switch-special-locked-inner: transparent;\n    --switch-special-locked-icon: var(--grey-11);\n\n    --switch-special-failure-background: var(--warning-8);\n    --switch-special-failure-border: var(--warning-9);\n    --switch-special-failure-inner: var(--white-12);\n    --switch-special-failure-icon: var(--warning-8);\n\n  }\n\n  .light-theme {\n    // Background\n    --switch-default-off-background: var(--grey-2);\n    --switch-default-on-background: var(--primary-7);\n    --switch-default-danger-background: var(--warning-9);\n    \n    --switch-disabled-off-background: var(--grey-3);\n    --switch-disabled-on-background: var(--primary-6);\n    --switch-disabled-danger-background: var(--warning-8);\n\n    // Border\n    --switch-default-off-border: var(--grey-6);\n    --switch-default-on-border: var(--primary-7);\n    --switch-default-danger-border: var(--warning-9);\n    \n    --switch-disabled-off-border: var(--grey-6);\n    --switch-disabled-on-border: var(--primary-7);\n    --switch-disabled-danger-border: var(--warning-a5);\n    \n    // Inner\n    --switch-default-off-inner: var(--primary-9);\n    --switch-default-on-inner: var(--white-12);\n    --switch-default-danger-inner: var(--white-12);\n\n    --switch-disabled-off-inner: var(--grey-7);\n    --switch-disabled-on-inner: var(--primary-9);\n    --switch-disabled-danger-inner: var(--warning-a8);\n    \n    // Special States\n    --switch-special-locked-background: var(--grey-3);\n    --switch-special-locked-border: var(--grey-8);\n    --switch-special-locked-inner: transparent;\n    --switch-special-locked-icon: var(--grey-11);\n  }\n\n"])));
 
 var _templateObject$3;
-var ThemeVariables = styled.createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n  ", ";\n  ", ";\n  ", ";\n\n  :root {\n\n    --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n    --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n    --common-height: 32px;\n\n    --font-size: 14px;\n\n    --global-menu-width-closed: 80px;\n    --global-menu-width-open: 280px;\n\n    --input-height: 40px;\n    --input-compact-height: 32px;\n    --input-required-dot-display: inline-block;\n\n    --button-font-size: 14px;\n    --button-height: 32px;\n    --button-h-padding: 8px;\n    --button-lift-default-x: 0px;\n    --button-lift-default-y: 2px;\n    --button-lift-default-blur: 4px;\n    --button-lift-default-spread: 2px;\n\n    --button-icon-size: 14px;\n    --button-icon-h-padding: 8px;\n\n    --input-box-shadow-x: 0;\n    --input-box-shadow-y: 0;\n    --input-box-shadow-blur: 0;\n    --input-box-shadow-spread: 0;\n\n    --input-focused-box-shadow-x: 0;\n    --input-focused-box-shadow-y: 3px;\n    --input-focused-box-shadow-blur: 3px;\n    --input-focused-box-shadow-spread: 0;\n\n  }\n\n  .button-size-xsmall {\n    --button-font-size: 12px;\n    --button-height: 20px;\n    --button-h-padding: 4px;\n    --button-icon-size: 10px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .button-size-small {\n    --button-font-size: 12px;\n    --button-height: 24px;\n    --button-h-padding: 4px;\n    --button-icon-size: 12px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .button-size-large {\n    --button-font-size: 16px;\n    --button-height: 40px;\n    --button-h-padding: 8px;\n    --button-icon-size: 16px;\n    --button-icon-h-padding: 8px;\n  }\n\n  \n\n  .split-button-primary {\n    --border-color: var(--primary-9);\n    --border-active-color: var(--primary-11);\n    --toggle-icon-border: var(--primary-9);\n    --gradient-1: #72C3EE;\n    --gradient-2: #5CACEE;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--primary-a3);\n    --button-active-bg: var(--primary-10);\n    --toggle-icon-hover-bg: var(--white-a7);\n    --toggle-icon-active-bg:  var(--black-a6);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-secondary {\n    --border-color: var(--grey-7);\n    --border-active-color: var(--grey-7);\n    --toggle-icon-border: var(--grey-6);\n    --gradient-1: #2E3135;\n    --gradient-2: #363A3F;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--grey-12);\n    --text-disabled-color: var(--grey-a11);\n    --button-hover-bg: var(--grey-a6);\n    --button-active-bg: var(--grey-a3);\n    --toggle-icon-hover-bg: var(--grey-a6);\n    --toggle-icon-active-bg:  var(--grey-a3);\n    --toggle-icon: var(--grey-12);\n    --toggle-icon-active: var(--grey-a11);\n    --toggle-icon-disabled: var(--grey-10);\n  }\n\n  .split-button-danger {\n    --border-color: var(--warning-10);\n    --border-active-color: var(--warning-10);\n    --toggle-icon-border: var(--warning-9);\n    --gradient-1: #D16565;\n    --gradient-2: #E76F6F;\n    --button-lift-default-color: rgba(255, 113, 113, 0.47);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--warning-a7);\n    --button-active-bg: var(--warning-8);\n    --toggle-icon-hover-bg: var(--warning-a7);\n    --toggle-icon-active-bg:  var(--warning-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-custom {\n    --border-color: var(--info-10);\n    --border-active-color: var(--info-10);\n    --toggle-icon-border: var(--info-9);\n    --gradient-1: var(--info-10);\n    --gradient-2: var(--info-9);\n    --button-lift-default-color:  var(--info-a3);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--info-a7);\n    --button-active-bg: var(--info-8);\n    --toggle-icon-hover-bg: var(--info-a7);\n    --toggle-icon-active-bg:  var(--info-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-size-small {\n    --button-font-size: 12px;\n    --button-height: 24px;\n    --button-h-padding: 4px;\n    --button-icon-size: 12px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .split-button-size-large {\n    --button-font-size: 16px;\n    --button-height: 40px;\n    --button-h-padding: 8px;\n    --button-icon-size: 16px;\n    --button-icon-h-padding: 8px;\n  }\n\n"])), layoutVariables, animationVariables, colorVariables);
+var ThemeVariables = styled.createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n  ", ";\n  ", ";\n  ", ";\n\n  :root {\n\n    --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n    --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n    --common-height: 32px;\n\n    --font-size: 14px;\n\n    --global-menu-width-closed: 80px;\n    --global-menu-width-open: 280px;\n\n    --input-height: 40px;\n    --input-compact-height: 32px;\n    --input-required-dot-display: inline-block;\n\n    --button-font-size: 14px;\n    --button-height: 32px;\n    --button-h-padding: 8px;\n    --button-lift-default-x: 0px;\n    --button-lift-default-y: 2px;\n    --button-lift-default-blur: 4px;\n    --button-lift-default-spread: 2px;\n\n    --button-icon-size: 14px;\n    --button-icon-h-padding: 8px;\n    \n    // Inputs\n    --input-box-shadow-x: 0;\n    --input-box-shadow-y: 0;\n    --input-box-shadow-blur: 0;\n    --input-box-shadow-spread: 0;\n\n    --input-focused-box-shadow-x: 0;\n    --input-focused-box-shadow-y: 3px;\n    --input-focused-box-shadow-blur: 3px;\n    --input-focused-box-shadow-spread: 0;\n\n    // Switches\n    --switch-height: 24px;\n    --switch-width: 40px;\n    --switch-border-width: 2px;\n    --switch-inner-size: 16px;\n    --switch-intent-offset: 3px;\n\n    // Labels\n    --label-font: var(--font-ui);\n    --label-font-size: 14px;\n    --label-weight: 500;\n\n  }\n\n  .button-size-xsmall {\n    --button-font-size: 12px;\n    --button-height: 20px;\n    --button-h-padding: 4px;\n    --button-icon-size: 10px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .button-size-small {\n    --button-font-size: 12px;\n    --button-height: 24px;\n    --button-h-padding: 4px;\n    --button-icon-size: 12px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .button-size-large {\n    --button-font-size: 16px;\n    --button-height: 40px;\n    --button-h-padding: 8px;\n    --button-icon-size: 16px;\n    --button-icon-h-padding: 8px;\n  }\n\n  \n\n  .split-button-primary {\n    --border-color: var(--primary-9);\n    --border-active-color: var(--primary-11);\n    --toggle-icon-border: var(--primary-9);\n    --gradient-1: #72C3EE;\n    --gradient-2: #5CACEE;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--primary-a3);\n    --button-active-bg: var(--primary-10);\n    --toggle-icon-hover-bg: var(--white-a7);\n    --toggle-icon-active-bg:  var(--black-a6);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-secondary {\n    --border-color: var(--grey-7);\n    --border-active-color: var(--grey-7);\n    --toggle-icon-border: var(--grey-6);\n    --gradient-1: #2E3135;\n    --gradient-2: #363A3F;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--grey-12);\n    --text-disabled-color: var(--grey-a11);\n    --button-hover-bg: var(--grey-a6);\n    --button-active-bg: var(--grey-a3);\n    --toggle-icon-hover-bg: var(--grey-a6);\n    --toggle-icon-active-bg:  var(--grey-a3);\n    --toggle-icon: var(--grey-12);\n    --toggle-icon-active: var(--grey-a11);\n    --toggle-icon-disabled: var(--grey-10);\n  }\n\n  .split-button-danger {\n    --border-color: var(--warning-10);\n    --border-active-color: var(--warning-10);\n    --toggle-icon-border: var(--warning-9);\n    --gradient-1: #D16565;\n    --gradient-2: #E76F6F;\n    --button-lift-default-color: rgba(255, 113, 113, 0.47);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--warning-a7);\n    --button-active-bg: var(--warning-8);\n    --toggle-icon-hover-bg: var(--warning-a7);\n    --toggle-icon-active-bg:  var(--warning-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-custom {\n    --border-color: var(--info-10);\n    --border-active-color: var(--info-10);\n    --toggle-icon-border: var(--info-9);\n    --gradient-1: var(--info-10);\n    --gradient-2: var(--info-9);\n    --button-lift-default-color:  var(--info-a3);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--info-a7);\n    --button-active-bg: var(--info-8);\n    --toggle-icon-hover-bg: var(--info-a7);\n    --toggle-icon-active-bg:  var(--info-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-size-small {\n    --button-font-size: 12px;\n    --button-height: 24px;\n    --button-h-padding: 4px;\n    --button-icon-size: 12px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .split-button-size-large {\n    --button-font-size: 16px;\n    --button-height: 40px;\n    --button-h-padding: 8px;\n    --button-icon-size: 16px;\n    --button-icon-h-padding: 8px;\n  }\n\n"])), layoutVariables, animationVariables, colorVariables);
 
 var _templateObject$4;
 var BaseStyles = styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n  * , body{\n    box-sizing: border-box;\n    text-rendering: geometricPrecision; \n  }\n  body, html , #root {\n    min-width: 100%;\n    min-height: 100vh;\n    margin: 0;\n  }\n\n  body {\n    font-family: var(--font-ui);\n    color: var(--grey-11);\n    background: var(--main-background-gradient);\n    background-attachment: fixed;\n  }\n  \n"])));
@@ -2009,39 +2009,32 @@ var animation$1 = function animation(radius) {
 };
 var rotate = styled.keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
 var BaseCircle = styled__default.circle(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  stroke: ", ";\n  fill: none;\n"])), function (_ref) {
-  var styling = _ref.styling;
-  return "var(--spinner-" + styling + ", --grey-a8)";
-});
-var RotatingCircle = styled__default.circle(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  stroke: var(--white-1);\n  fill: none;\n  stroke-dasharray: ", ";\n  stroke-dashoffset: ", ";\n  animation:\n    ", " 4s linear infinite,\n    ", " 1s linear infinite;\n  stroke-linecap: round;\n"])), function (_ref2) {
-  var r = _ref2.r;
-  return circumference(r);
+  var styling = _ref.styling,
+    customColor = _ref.customColor;
+  return customColor ? customColor : "var(--spinner-" + styling + "-base, var(--grey-a8))";
+});
+var RotatingCircle = styled__default.circle(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  stroke: ", ";\n  fill: none;\n  stroke-dasharray: ", ";\n  stroke-dashoffset: ", ";\n  animation:\n    ", " 4s linear infinite,\n    ", " 1s linear infinite;\n  stroke-linecap: round;\n"])), function (_ref2) {
+  var styling = _ref2.styling,
+    customColor = _ref2.customColor;
+  return customColor ? customColor : "var(--spinner-" + styling + "-top, var(--white-1))";
 }, function (_ref3) {
   var r = _ref3.r;
-  return 2 * 3.1416 * r / 2;
+  return circumference(r);
 }, function (_ref4) {
   var r = _ref4.r;
+  return 2 * 3.1416 * r / 2;
+}, function (_ref5) {
+  var r = _ref5.r;
   return animation$1(r);
 }, rotate);
-var buttonSpinnerSize = function buttonSpinnerSize(buttonSize) {
-  switch (buttonSize) {
-    case 'xsmall':
-    case 'small':
-      return 'xsmall';
-    case 'large':
-      return 'small';
-    default:
-      return 'small';
-  }
-};
-var isTypeButtonDesigns = function isTypeButtonDesigns(value) {
-  switch (value) {
-    case 'primary':
-    case 'secondary':
-    case 'danger':
-      return true;
-    default:
-      return false;
+var getButtonDesign = function getButtonDesign(value) {
+  if (value === 'primary' || value === 'secondary' || value === 'warning') {
+    return value;
+  } else if (value === 'danger') {
+    console.warn('Button.tsx - Warning, the design prop value `danger` is being deprecated. Use `warning` instead.');
+    return 'danger';
   }
+  return 'simple';
 };
 var sizeGuide = {
   xsmall: 12,
@@ -2050,12 +2043,16 @@ var sizeGuide = {
   large: 36,
   xlarge: 48
 };
-var Spinner = function Spinner(_ref5) {
-  var _ref5$size = _ref5.size,
-    size = _ref5$size === void 0 ? 'medium' : _ref5$size,
-    _ref5$styling = _ref5.styling,
-    styling = _ref5$styling === void 0 ? 'primary' : _ref5$styling;
-  var sizeVal = sizeGuide[size];
+var Spinner = function Spinner(_ref6) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'medium' : _ref6$size,
+    _ref6$styling = _ref6.styling,
+    styling = _ref6$styling === void 0 ? 'primary' : _ref6$styling,
+    _ref6$custom = _ref6.custom,
+    custom = _ref6$custom === void 0 ? {} : _ref6$custom;
+  var baseColor = custom.baseColor,
+    topColor = custom.topColor;
+  var sizeVal = custom !== null && custom !== void 0 && custom.size ? custom.size : sizeGuide[size];
   var strokeWidth = sizeVal / 5.333;
   var circleRadius = sizeVal / 2 - strokeWidth / 2;
   return React__default.createElement("svg", {
@@ -2068,12 +2065,15 @@ var Spinner = function Spinner(_ref5) {
     cy: '0',
     r: circleRadius,
     strokeWidth: strokeWidth,
-    styling: isTypeButtonDesigns(styling) ? styling : 'simple'
+    styling: getButtonDesign(styling),
+    customColor: baseColor
   }), React__default.createElement(RotatingCircle, {
     cx: '0',
     cy: '0',
     r: circleRadius,
-    strokeWidth: strokeWidth
+    strokeWidth: strokeWidth,
+    styling: getButtonDesign(styling),
+    customColor: topColor
   }));
 };
 
@@ -2340,51 +2340,50 @@ var Input = function Input(_ref4) {
   }))) : null), fieldState && showFeedback ? React__default.createElement(FeedbackContainer, null, React__default.createElement(FeedbackIcon, null, feedbackIcon(fieldState)), feedbackMessage ? React__default.createElement(FeedbackMessage, null, feedbackMessage) : null) : null);
 };
 
-var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "required", "children"];
-var _templateObject$i, _templateObject2$c, _templateObject3$b;
-var StyledLabel = styled__default.label(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-11);\n  font-size: 14px;\n  font-weight: 500;\n  ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.fontFamily.ui;
-}, function (_ref2) {
-  var rightAlign = _ref2.rightAlign;
-  return rightAlign ? "\n        display: flex;\n        align-items: center;\n        flex-direction: row-reverse;\n        justify-content: left;\n      " : "\n        display: block;\n        margin-bottom: 20px;\n      ";
-});
-var LabelText = styled__default.span(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
-  var rightAlign = _ref3.rightAlign;
-  return rightAlign ? "\n        margin-left: 12px;\n        " : "\n        margin-bottom: 10px;\n      ";
-}, function (_ref4) {
-  var required = _ref4.required;
-  return required && styled.css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n    &::after {\n      content: '';\n      display: var(--input-required-dot-display);\n      height: 8px;\n      width: 8px;\n      background-color: var(--primary-9);\n      border-radius: 4px;\n    }\n  "])));
-});
-var Label = function Label(_ref5) {
-  var htmlFor = _ref5.htmlFor,
-    labelText = _ref5.labelText,
-    _ref5$rightAlign = _ref5.rightAlign,
-    rightAlign = _ref5$rightAlign === void 0 ? false : _ref5$rightAlign,
-    _ref5$required = _ref5.required,
-    required = _ref5$required === void 0 ? false : _ref5$required,
-    children = _ref5.children,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded$5);
+var _excluded$5 = ["htmlFor", "labelText", "direction", "rightAlign", "required", "children"];
+var _templateObject$i, _templateObject2$c, _templateObject3$b, _templateObject4$a, _templateObject5$8;
+var LabelText = styled__default.span(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var required = _ref.required;
+  return required && styled.css(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n    &::after {\n      content: '';\n      display: var(--input-required-dot-display);\n      height: 8px;\n      width: 8px;\n      background-color: var(--primary-9);\n      border-radius: 4px;\n    }\n  "])));
+});
+var StyledLabel = styled__default.label(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  color: var(--grey-11);\n  font-size: 14px;\n  font-weight: 500;\n\n  display: flex;\n  gap: 8px;\n\n  ", "\n"])), function (_ref2) {
+  var direction = _ref2.direction;
+  return direction && styled.css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n    flex-direction: ", ";\n    ", "\n  "])), direction, ['row', 'row-reverse'].includes(direction) && styled.css(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      \n      ", "{\n        align-self: center;\n      }\n    "])), LabelText));
+});
+var Label = function Label(_ref3) {
+  var htmlFor = _ref3.htmlFor,
+    labelText = _ref3.labelText,
+    _ref3$direction = _ref3.direction,
+    direction = _ref3$direction === void 0 ? 'column' : _ref3$direction,
+    _ref3$rightAlign = _ref3.rightAlign,
+    rightAlign = _ref3$rightAlign === void 0 ? false : _ref3$rightAlign,
+    _ref3$required = _ref3.required,
+    required = _ref3$required === void 0 ? false : _ref3$required,
+    children = _ref3.children,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$5);
+  if (rightAlign) {
+    console.warn('Deprecation warning: `Label` is deprecating `rightAlign`, please update this to use `direction=\'row-reverse\'` instead.');
+    direction = 'row-reverse';
+  }
   return React__default.createElement(StyledLabel, Object.assign({}, {
     htmlFor: htmlFor,
-    rightAlign: rightAlign
+    direction: direction
   }, props), React__default.createElement(LabelText, Object.assign({}, {
-    rightAlign: rightAlign,
     required: required
   }), labelText), children);
 };
 
 var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
-var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$5, _templateObject7$5;
+var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$5, _templateObject7$5;
 var StyledInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-data);\n  line-height: var(--input-compact-height);\n\n  font-size: 14px;\n  flex: 1;\n  color: var(--input-color-default);\n  width: 100%;\n  border: none;\n  background-color: transparent;\n  box-sizing: border-box;\n  outline: none;\n    \n  &::placeholder {\n    color: var(--input-color-placeholder);\n    font-style: italic;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    color: var(--input-color-disabled);\n  }\n"])), removeAutoFillStyle);
 var InputContainer$1 = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: var(--input-compact-height);\n  padding: 0 8px;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  border-radius: 3px;\n  \n  ", ";\n\n  ", "\n\n"])), function (_ref) {
   var fieldState = _ref.fieldState;
   return styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    transition: \n      border var(--speed-normal) var(--easing-primary-out),\n      background-color var(--speed-normal) var(--easing-primary-out);\n  "])), fieldState, fieldState);
 }, function (_ref2) {
   var hasAction = _ref2.hasAction;
-  return hasAction && styled.css(_templateObject4$a || (_templateObject4$a = _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);
+  return hasAction && styled.css(_templateObject4$b || (_templateObject4$b = _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(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  flex: 0 1;\n  font-size: 12px;\n  font-family: var(--font-ui);\n  color: var(--input-color-unit);\n  margin-top: 1px;\n  white-space: nowrap;\n"])));
+var UnitKey = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  flex: 0 1;\n  font-size: 12px;\n  font-family: var(--font-ui);\n  color: var(--input-color-unit);\n  margin-top: 1px;\n  white-space: nowrap;\n"])));
 var Container$6 = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  \n  ", ";\n"])), function (_ref3) {
   var fieldState = _ref3.fieldState;
   return fieldState && styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n    &:focus-within ", " {\n      transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n      box-shadow: 0 3px 3px var(--input-", "-focused-shadow-color, var(--input-", "-shadow-color));\n    }\n  "])), InputContainer$1, fieldState, fieldState);
@@ -2422,7 +2421,7 @@ var SmallInput = function SmallInput(_ref4) {
   }, props)), unit ? React__default.createElement(UnitKey, null, unit) : null)));
 };
 
-var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject10$2, _templateObject11$1;
+var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15;
 var SwitchPosition;
 (function (SwitchPosition) {
   SwitchPosition[SwitchPosition["Off"] = 0] = "Off";
@@ -2430,13 +2429,6 @@ var SwitchPosition;
   SwitchPosition[SwitchPosition["Neutral"] = 2] = "Neutral";
   SwitchPosition[SwitchPosition["Locked"] = 3] = "Locked";
 })(SwitchPosition || (SwitchPosition = {}));
-var intentPosition = function intentPosition(left, checked) {
-  var offset = checked ? -2 : 2;
-  var intentLeft = (parseInt(left) + offset).toString();
-  return intentLeft + "px";
-};
-var RealInput = styled__default.input(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
-var SwitchOuter = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: pointer;\n  position: relative;\n"])));
 var getPositionKey = function getPositionKey(switchPos) {
   switch (switchPos) {
     case SwitchPosition.Off:
@@ -2451,51 +2443,65 @@ var getPositionKey = function getPositionKey(switchPos) {
       return 'off';
   }
 };
-var SwitchInner = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  box-sizing: border-box;\n"])));
-var LabelText$1 = styled__default.span(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n\n  flex: 1;\n  margin-left: 10px;\n  display: block;\n\n  line-height: ", ";\n\n  ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.fontFamily.ui;
-}, function (p) {
-  return p.theme.dimensions.form["switch"].outer.height;
-}, function (p) {
-  return p.theme.typography.form.input.label;
-});
-var IconWrapper$1 = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: inherit;\n  height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    display: block;\n  }\n"])));
-var SpinnerWrapper = styled__default.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n"])));
-var Container$7 = styled__default.label(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  ", "{\n    ", "\n\n    ", "\n\n    ", "\n  }\n\n  ", "{\n    ", "\n  }\n\n  &:hover {\n    ", "{\n      left: ", ";\n    }\n  }\n"])), SwitchInner, function (_ref2) {
-  var theme = _ref2.theme,
-    position = _ref2.position,
-    themeState = _ref2.themeState,
-    activeTheming = _ref2.activeTheming;
-  return theme && styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n      ", ";\n      left: ", ";\n      top: ", ";\n      transition:\n        left ", " ", ",\n        border ", " ", ",\n        width ", " ", ";\n\n      ", "\n    "])), theme.dimensions.form["switch"].inner, theme.dimensions.form["switch"].positions[getPositionKey(position)], theme.dimensions.form["switch"].positions.top, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.animation.speed.normal, theme.animation.easing.primary.out, theme.styles.form["switch"][activeTheming][themeState].inner);
-}, function (p) {
-  return p.activeTheming === 'locked' && styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - ", "px);\n    "])), parseInt(p.theme.dimensions.form["switch"].positions.locked) * 2);
-}, function (p) {
-  return p.$loading && styled.css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      top: 1px;\n    "])));
-}, SwitchOuter, function (_ref3) {
-  var theme = _ref3.theme,
-    activeTheming = _ref3.activeTheming,
-    themeState = _ref3.themeState;
-  return theme && styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", "};\n      flex: 0 0 ", "};\n    "])), theme.styles.form["switch"][activeTheming][themeState].outer, theme.dimensions.form["switch"].outer, theme.dimensions.form["switch"].outer.width);
-}, SwitchInner, function (p) {
-  return p.useIntent && intentPosition(p.theme.dimensions.form["switch"].positions[getPositionKey(p.position)], p.checked);
+var RealInput = styled__default.input(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var SwitchOuter = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  border: var(--switch-border-width) solid transparent;\n  box-sizing: border-box;\n  cursor: pointer;\n  position: relative;\n\n  width: var(--switch-width);\n  height: var(--switch-height);\n  border-radius: calc(var(--switch-height) / 2);\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: calc(var(--switch-border-width) * -1);\n    left: calc(var(--switch-border-width) * -1);\n    bottom: calc(var(--switch-border-width) * -1);\n    right: calc(var(--switch-border-width) * -1);\n    pointer-events: none;\n    border-radius: 12px;\n    box-shadow: \n      0px 2px 2px 0px var(--grey-a4) inset, \n      0px -8px 8px 0px var(--grey-a2) inset,\n      0px 2px 4px var(--black-a4),\n      0px -2px 4px var(--white-a4);\n  }\n"])));
+var SwitchInner = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  --offset: calc(((var(--switch-height) - var(--switch-inner-size)) / 2) - var(--switch-border-width));\n  --position-off: var(--offset);\n  --position-on: calc(var(--switch-width) - var(--switch-inner-size) - (var(--switch-border-width)*2) - var(--offset));\n  --position-neutral: calc((var(--switch-width) / 2) - (var(--switch-inner-size) / 2) - var(--offset));\n  --position-locked: var(--offset);\n\n  position: absolute;\n  top: var(--offset);\n  left: ", ";\n  \n  box-sizing: border-box;\n  height: var(--switch-inner-size);\n  width: var(--switch-inner-size);\n  border-radius: calc(var(--switch-inner-size) / 2);\n  \n  background-color: var(--switch-default-off-background);\n\n  box-shadow: \n    0px 2px 4px 0px var(--black-a8),\n    0px 1px 2px 0px var(--white-a5) inset, \n    0px -1px 1px 0px var(--black-a5) inset;\n"])), function (_ref) {
+  var position = _ref.position;
+  return position && "var(--position-" + position + ")";
+});
+var LabelText$1 = styled__default.span(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose([""])));
+var IconWrapper$1 = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: inherit;\n  height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    display: block;\n  }\n"])));
+var SpinnerWrapper = styled__default.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose([""])));
+var Container$7 = styled__default(StyledLabel)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  \n  ", "{\n    ", ";\n  \n    ", ";\n\n    ", ";\n\n    ", ";\n\n  }\n\n  ", "{\n    ", ";\n\n    transition:\n      left var(--speed-fast) var(--easing-primary-in-out),\n      border var(--speed-fast) var(--easing-primary-in-out),\n      width var(--speed-fast) var(--easing-primary-in-out);\n\n    ", "\n\n    ", "\n\n    ", ";\n    \n  }\n\n  &:hover {\n    ", "{\n      left: ", ";\n    }\n  }\n"])), SwitchOuter, function (_ref2) {
+  var activeTheming = _ref2.activeTheming,
+    themeState = _ref2.themeState;
+  return styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n      border-color: var(--switch-", "-", "-border);\n      background-color: var(--switch-", "-", "-background);\n    "])), themeState, activeTheming, themeState, activeTheming);
+}, function (_ref3) {
+  var activeTheming = _ref3.activeTheming;
+  return activeTheming === 'locked' && styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n      background-color: var(--switch-special-locked-background);\n      border-color: var(--switch-special-locked-border);\n    "])));
+}, function (_ref4) {
+  var activeTheming = _ref4.activeTheming;
+  return activeTheming === 'failure' && styled.css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      background-color: var(--switch-special-failure-background);\n      border-color: var(--switch-special-failure-border);\n    "])));
+}, function (_ref5) {
+  var activeTheming = _ref5.activeTheming,
+    $loading = _ref5.$loading;
+  return $loading && styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      background-color: var(--switch-default-", "-background);\n      border-color: var(--switch-default-", "-border);\n    "])), activeTheming, activeTheming);
+}, SwitchInner, function (_ref6) {
+  var activeTheming = _ref6.activeTheming,
+    themeState = _ref6.themeState;
+  return styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n      background-color: var(--switch-", "-", "-inner);\n    "])), themeState, activeTheming);
+}, function (_ref7) {
+  var activeTheming = _ref7.activeTheming;
+  return activeTheming === 'locked' && styled.css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - var(--switch-border-width));\n      background-color: var(--switch-special-locked-inner);\n      box-shadow: none;\n\n      ", " svg {\n        transform: translateX(-1px);\n      }\n    "])), IconWrapper$1);
+}, function (_ref8) {
+  var activeTheming = _ref8.activeTheming;
+  return activeTheming === 'failure' && styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      background-color: var(--switch-special-failure-inner);\n    "])));
+}, function (_ref9) {
+  var activeTheming = _ref9.activeTheming,
+    $loading = _ref9.$loading;
+  return $loading && styled.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      border-color: var(--switch-default-", "-inner);\n      box-shadow: none;\n    "])), activeTheming);
+}, SwitchInner, function (_ref10) {
+  var useIntent = _ref10.useIntent,
+    position = _ref10.position;
+  return useIntent && position === SwitchPosition.Off && 'calc(var(--position-off) + var(--switch-intent-offset))' || useIntent && position === SwitchPosition.On && 'calc(var(--position-on) - var(--switch-intent-offset))';
 });
 var isTypeSwitchState = function isTypeSwitchState(value) {
   return value === 'default' || value === 'loading' || value === 'locked' || value === 'disabled' || value === 'failure';
 };
-var Switch = function Switch(_ref4) {
+var Switch = function Switch(_ref11) {
   var _inputRef$current4;
-  var _ref4$state = _ref4.state,
-    state = _ref4$state === void 0 ? 'default' : _ref4$state,
-    _ref4$leftTheme = _ref4.leftTheme,
-    leftTheme = _ref4$leftTheme === void 0 ? 'off' : _ref4$leftTheme,
-    _ref4$rightTheme = _ref4.rightTheme,
-    rightTheme = _ref4$rightTheme === void 0 ? 'on' : _ref4$rightTheme,
-    labelText = _ref4.labelText,
-    onChangeCallback = _ref4.onChangeCallback,
-    _ref4$checked = _ref4.checked,
-    checked = _ref4$checked === void 0 ? false : _ref4$checked;
+  var _ref11$state = _ref11.state,
+    state = _ref11$state === void 0 ? 'default' : _ref11$state,
+    _ref11$leftTheme = _ref11.leftTheme,
+    leftTheme = _ref11$leftTheme === void 0 ? 'off' : _ref11$leftTheme,
+    _ref11$rightTheme = _ref11.rightTheme,
+    rightTheme = _ref11$rightTheme === void 0 ? 'on' : _ref11$rightTheme,
+    labelText = _ref11.labelText,
+    onChangeCallback = _ref11.onChangeCallback,
+    _ref11$checked = _ref11.checked,
+    checked = _ref11$checked === void 0 ? false : _ref11$checked;
   var inputRef = React.useRef(null);
+  var innerRef = React.useRef(null);
   var _useState = React.useState(checked ? SwitchPosition.On : SwitchPosition.Off),
     position = _useState[0],
     setPosition = _useState[1];
@@ -2505,6 +2511,12 @@ var Switch = function Switch(_ref4) {
   var _useState3 = React.useState('default'),
     switchState = _useState3[0],
     setSwitchState = _useState3[1];
+  var _useState4 = React.useState(false),
+    justUpdated = _useState4[0],
+    setJustUpdated = _useState4[1];
+  var _useState5 = React.useState(0),
+    innerSize = _useState5[0],
+    setInnerSize = _useState5[1];
   React.useEffect(function () {
     setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
     if (inputRef.current) {
@@ -2523,6 +2535,7 @@ var Switch = function Switch(_ref4) {
   }, [setPosition, setActiveTheming, leftTheme, rightTheme, inputRef]);
   var customOnChange = function customOnChange() {
     positionSwitch();
+    setJustUpdated(true);
     if (onChangeCallback) {
       var _inputRef$current3;
       onChangeCallback(((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.checked) || false);
@@ -2552,27 +2565,40 @@ var Switch = function Switch(_ref4) {
       positionSwitch();
     }
   }, [state, setPosition, positionSwitch]);
+  React.useEffect(function () {
+    if (innerRef.current) {
+      setInnerSize(parseInt(getComputedStyle(innerRef.current).getPropertyValue('--switch-inner-size')));
+    }
+  }, [innerRef]);
   return React__default.createElement(Container$7, {
     onChange: customOnChange,
+    onMouseLeave: function onMouseLeave() {
+      return setJustUpdated(false);
+    },
     activeTheming: activeTheming,
     "$loading": state === 'loading',
-    useIntent: state === 'default' || state === 'failure',
+    useIntent: !justUpdated && (state === 'default' || state === 'failure'),
     themeState: switchState,
     position: position,
     checked: (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.checked
-  }, React__default.createElement(SwitchOuter, null, React__default.createElement(SwitchInner, null, state === 'failure' ? React__default.createElement(IconWrapper$1, null, React__default.createElement(Icon, {
+  }, React__default.createElement(SwitchOuter, null, React__default.createElement(SwitchInner, {
+    position: getPositionKey(position),
+    ref: innerRef
+  }, state === 'failure' ? React__default.createElement(IconWrapper$1, null, React__default.createElement(Icon, {
     icon: 'Exclamation',
     color: 'danger',
     size: 18,
     weight: 'regular'
   })) : null, state === 'locked' ? React__default.createElement(IconWrapper$1, null, React__default.createElement(Icon, {
     icon: 'Locked',
-    color: 'dimmed',
-    size: 10,
-    weight: 'light'
-  })) : null, state === 'loading' ? React__default.createElement(SpinnerWrapper, null, React__default.createElement(Spinner, {
-    size: 'small',
-    styling: 'simple'
+    color: 'switch-special-locked-icon',
+    size: 12,
+    weight: 'regular'
+  })) : null, state === 'loading' && innerSize > 0 ? React__default.createElement(SpinnerWrapper, null, React__default.createElement(Spinner, {
+    styling: 'simple',
+    custom: {
+      size: innerSize
+    }
   })) : null)), labelText ? React__default.createElement(LabelText$1, null, labelText) : null, React__default.createElement(RealInput, {
     ref: inputRef,
     type: 'checkbox',
@@ -2695,7 +2721,7 @@ function SvgNoImage() {
   }));
 }
 
-var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14;
+var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$1;
 var CheckboxState;
 (function (CheckboxState) {
   CheckboxState["Off"] = "off";
@@ -2705,11 +2731,11 @@ var CheckboxState;
 var RealInput$1 = styled__default.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 var CheckboxOuter = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  box-sizing: border-box;\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 5px;\n  border-width: 2px;\n  border-style: solid;\n\n  transition: \n    background-color var(--speed-faster) var(--easing-primary-out),\n    border-color var(--speed-faster) var(--easing-primary-out);\n"])));
 var CheckboxInner = styled__default.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  box-sizing: border-box;\n"])));
-var IconWrapper$2 = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    display: block;\n    [stroke]{\n      stroke: transparent;\n    }\n    [fill] {\n      fill: ", ";\n    }\n  }\n"])), function (_ref) {
+var IconWrapper$2 = styled__default.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    display: block;\n    [stroke]{\n      stroke: transparent;\n    }\n    [fill] {\n      fill: ", ";\n    }\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--" + color + ")";
 });
-var Container$8 = styled__default.label(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  user-select: none;\n  ", "{\n    border: var(--input-toggle-unchecked-border-color) 2px solid;\n  }\n  \n  ", "\n\n  ", "\n\n  ", "\n\n"])), CheckboxOuter, function (_ref2) {
+var Container$8 = styled__default.label(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  user-select: none;\n  ", "{\n    border: var(--input-toggle-unchecked-border-color) 2px solid;\n  }\n  \n  ", "\n\n  ", "\n\n  ", "\n\n"])), CheckboxOuter, function (_ref2) {
   var visualState = _ref2.visualState,
     disabled = _ref2.disabled;
   return visualState === CheckboxState.Off && styled.css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n    /* Unchecked */\n    ", "{\n      background-color: var(--input-toggle-unchecked-background-color);\n      border-color: var(--input-toggle-unchecked-border-color);\n    }\n\n    /* Unchecked - Hover */\n    ", ";\n\n    /* Unchecked - Disabled */\n    ", "\n  "])), CheckboxOuter, !disabled && styled.css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n      &:hover ", " {\n        background-color: var(--input-toggle-unchecked-hover-background-color);\n        border-color: var(--input-toggle-unchecked-hover-border-color);\n      }"])), CheckboxOuter), disabled && styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n      ", "{\n        background-color: var(--input-toggle-unchecked-disabled-background-color);\n        border-color: var(--input-toggle-unchecked-disabled-border-color);\n        border: var(--grey-6) 2px solid;\n        cursor: not-allowed;\n      }\n    "])), CheckboxOuter));
@@ -2720,7 +2746,7 @@ var Container$8 = styled__default.label(_templateObject5$a || (_templateObject5$
 }, function (_ref4) {
   var visualState = _ref4.visualState,
     disabled = _ref4.disabled;
-  return visualState === CheckboxState.Indeterminate && styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n    ", "{\n      background-color: var(--input-toggle-intermediate-background-color);\n      border-color: var(--input-toggle-intermediate-border-color);\n    }\n    ", ";\n    ", "\n\n  "])), CheckboxOuter, !disabled && styled.css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      &:hover ", "{\n        background-color: var(--input-toggle-intermediate-hover-background-color);\n        border-color: var(--input-toggle-intermediate-hover-border-color);\n      }\n    "])), CheckboxOuter), disabled && styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      ", "{\n        background-color: var(--input-toggle-intermediate-disabled-background-color);\n        border-color: var(--input-toggle-intermediate-disabled-border-color);\n        cursor: not-allowed;\n      }\n      ", "{\n        opacity: 0.65;\n      }\n    "])), CheckboxOuter, IconWrapper$2));
+  return visualState === CheckboxState.Indeterminate && styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n    ", "{\n      background-color: var(--input-toggle-intermediate-background-color);\n      border-color: var(--input-toggle-intermediate-border-color);\n    }\n    ", ";\n    ", "\n\n  "])), CheckboxOuter, !disabled && styled.css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n      &:hover ", "{\n        background-color: var(--input-toggle-intermediate-hover-background-color);\n        border-color: var(--input-toggle-intermediate-hover-border-color);\n      }\n    "])), CheckboxOuter), disabled && styled.css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      ", "{\n        background-color: var(--input-toggle-intermediate-disabled-background-color);\n        border-color: var(--input-toggle-intermediate-disabled-border-color);\n        cursor: not-allowed;\n      }\n      ", "{\n        opacity: 0.65;\n      }\n    "])), CheckboxOuter, IconWrapper$2));
 });
 var Checkbox = function Checkbox(_ref5) {
   var _ref5$indeterminate = _ref5.indeterminate,
@@ -2772,12 +2798,12 @@ var Checkbox = function Checkbox(_ref5) {
   })), " ");
 };
 
-var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$5, _templateObject10$4;
+var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$5, _templateObject10$4;
 var InnerRadio = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  user-select: none;\n"])));
 var OuterRadio = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  border-radius: 50%;\n  border-width: 2px;\n  border-style: solid;\n  user-select: none;\n\n  ", ";\n"])), function (_ref) {
   var isChecked = _ref.isChecked,
     disabled = _ref.disabled;
-  return styled.css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n    border-color: var(--input-toggle-unchecked-border-color);\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", "\n  "])), !disabled && styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      &:hover {\n        cursor: pointer;\n        border-color: var(--input-toggle-unchecked-hover-border-color);\n      }\n    "]))), isChecked && !disabled && styled.css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n      border-color: var(--input-toggle-checked-border-color);\n      ", " {\n        background-color: var(--input-toggle-checked-background-color);\n      }\n    "])), InnerRadio), isChecked && !disabled && styled.css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-color: var(--input-toggle-checked-hover-border-color);\n        ", " {\n          background-color: var(--input-toggle-checked-hover-background-color);\n        }\n      }\n    "])), InnerRadio), isChecked && disabled && styled.css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n      border-color: var(--input-toggle-checked-disabled-border-color);\n      ", " {\n        background-color: var(--input-toggle-checked-disabled-background-color);\n      }\n    "])), InnerRadio), !isChecked && disabled && styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n      border-color: var(--input-toggle-unchecked-disabled-border-color);\n      ", " {\n        background-color: var(--input-toggle-unchecked-disabled-background-color);\n      }\n    "])), InnerRadio));
+  return styled.css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n    border-color: var(--input-toggle-unchecked-border-color);\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", "\n  "])), !disabled && styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      &:hover {\n        cursor: pointer;\n        border-color: var(--input-toggle-unchecked-hover-border-color);\n      }\n    "]))), isChecked && !disabled && styled.css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      border-color: var(--input-toggle-checked-border-color);\n      ", " {\n        background-color: var(--input-toggle-checked-background-color);\n      }\n    "])), InnerRadio), isChecked && !disabled && styled.css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-color: var(--input-toggle-checked-hover-border-color);\n        ", " {\n          background-color: var(--input-toggle-checked-hover-background-color);\n        }\n      }\n    "])), InnerRadio), isChecked && disabled && styled.css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n      border-color: var(--input-toggle-checked-disabled-border-color);\n      ", " {\n        background-color: var(--input-toggle-checked-disabled-background-color);\n      }\n    "])), InnerRadio), !isChecked && disabled && styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n      border-color: var(--input-toggle-unchecked-disabled-border-color);\n      ", " {\n        background-color: var(--input-toggle-unchecked-disabled-background-color);\n      }\n    "])), InnerRadio));
 });
 var HiddenInput = styled__default.input(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  padding:0;\n  opacity: 0;\n"])));
 var Container$9 = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  user-select: none;\n  border-radius: 50%;\n"])));
@@ -2814,14 +2840,14 @@ var RadioButton = function RadioButton(_ref2) {
 };
 
 var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
-var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$6;
+var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$6;
 var FeedbackIcon$1 = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  flex: 0 0 40px;\n  width: 40px;\n  display: flex;\n  justify-content:center;\n  align-items:center;\n  padding-top: 2px;\n"])));
 var StyledTextArea = styled__default.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n  ", ";\n\n  padding: 8px 15px;\n  box-sizing: border-box;\n  outline: none;\n  height: 100%;\n  width: 100%;\n  border-radius: 3px;\n\n\n  color: var(--input-color-default);\n  font-size: 14px;\n  \n  transition: \n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  &::placeholder {\n    font-family: var(--font-data);\n    color: var(--input-color-placeholder);\n    font-style: italic;\n    font-weight: 400;\n  }\n\n"])), function (_ref) {
   var fieldState = _ref.fieldState;
   return styled.css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n    font-family: var(--font-data);\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-", "-shadow-color, transparent);\n  "])), fieldState, fieldState, fieldState);
 });
-var FeedbackContainer$1 = styled__default.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n  padding: 8px 0;\n  background-color: transparent;\n  border: 1px solid transparent;\n\n  border-left: none;\n  border-radius: 0 0 3px 3px;\n  overflow: hidden;\n\n  display:flex;\n  justify-content:left;\n  align-items:center;\n"])));
-var FeedbackMessage$1 = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  flex: 0 1 400px;\n  padding: 0 10px 0 0;\n  font-weight: 500;\n  color: var(--white-1);\n"])));
+var FeedbackContainer$1 = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n  padding: 8px 0;\n  background-color: transparent;\n  border: 1px solid transparent;\n\n  border-left: none;\n  border-radius: 0 0 3px 3px;\n  overflow: hidden;\n\n  display:flex;\n  justify-content:left;\n  align-items:center;\n"])));
+var FeedbackMessage$1 = styled__default.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n  flex: 0 1 400px;\n  padding: 0 10px 0 0;\n  font-weight: 500;\n  color: var(--white-1);\n"])));
 var Container$a = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref2) {
   var fieldState = _ref2.fieldState,
     showFeedback = _ref2.showFeedback;
@@ -2880,7 +2906,7 @@ var TextArea = function TextArea(_ref3) {
 };
 
 var _excluded$8 = ["fieldState", "placeholder", "label", "icon", "isCompact", "defaultValue", "changeCallback", "children"];
-var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$7;
+var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$7;
 var SelectWrapper = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  width: 100%;\n"])));
 var OpenIcon = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  right: ", ";\n  pointer-events: none;\n"])), function (_ref) {
   var isCompact = _ref.isCompact;
@@ -2890,15 +2916,15 @@ var SubjectIcon = styled__default.div(_templateObject3$h || (_templateObject3$h
   var isCompact = _ref2.isCompact;
   return isCompact ? '10px' : '12px';
 });
-var StyledSelect = styled__default.select(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 3px;\n  appearance: none;\n  font-family: var(--font-data);\n  height: var(--input-height);\n  width: 100%;\n  border-radius: 3px;\n  color: var(--input-color-default);\n  font-size: 14px;\n  cursor: pointer;\n\n  transition: \n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  ", ";\n\n\n  ", ";\n\n  &:disabled {\n    opacity: 1;\n    cursor: not-allowed;\n    color: var(--input-disabled-color-default);\n    border: 1px solid var(--input-disabled-border-color);\n    background: var(--input-disabled-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-disabled-shadow-color, transparent);\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n"])), function (_ref3) {
+var StyledSelect = styled__default.select(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 3px;\n  appearance: none;\n  font-family: var(--font-data);\n  height: var(--input-height);\n  width: 100%;\n  border-radius: 3px;\n  color: var(--input-color-default);\n  font-size: 14px;\n  cursor: pointer;\n\n  transition: \n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  ", ";\n\n\n  ", ";\n\n  &:disabled {\n    opacity: 1;\n    cursor: not-allowed;\n    color: var(--input-disabled-color-default);\n    border: 1px solid var(--input-disabled-border-color);\n    background: var(--input-disabled-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-disabled-shadow-color, transparent);\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n"])), function (_ref3) {
   var fieldState = _ref3.fieldState;
-  return styled.css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-", "-shadow-color, transparent);\n  "])), fieldState, fieldState, fieldState);
+  return styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-", "-shadow-color, transparent);\n  "])), fieldState, fieldState, fieldState);
 }, function (_ref4) {
   var isCompact = _ref4.isCompact,
     withIcon = _ref4.withIcon;
   return isCompact ? styled.css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n    height: var(--input-compact-height);\n    padding: 0 16px 1px ", ";\n\n    ", "{\n      right: 14px;\n    }\n  "])), withIcon ? '30px' : '8px', OpenIcon) : styled.css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n    height: var(--input-height);\n    padding: 0 16px 1px ", ";\n  "])), withIcon ? '36px' : '12px');
 });
-var Container$b = styled__default.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n  span {\n    margin-bottom: 8px;\n  }\n\n  ", ";\n\n"])), function (_ref5) {
+var Container$b = styled__default.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n  ", ";\n\n"])), function (_ref5) {
   var activePlaceholder = _ref5.activePlaceholder;
   return activePlaceholder && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n    ", " {\n      font-family: var(--font-data);\n      color: var(--input-color-placeholder);\n      font-style: italic;\n      font-weight: 400;\n    }\n  "])), StyledSelect);
 });
@@ -2914,6 +2940,9 @@ var SelectField = function SelectField(_ref6) {
     changeCallback = _ref6$changeCallback === void 0 ? function () {} : _ref6$changeCallback,
     children = _ref6.children,
     props = _objectWithoutPropertiesLoose(_ref6, _excluded$8);
+  if (label !== null && label !== void 0 && label.isSameRow) {
+    console.warn('Deprecation warning: `SelectField` is deprecating `label.isSameRow`, please update this to use `label.direction` set to `row`.');
+  }
   var _useState = React.useState(!defaultValue ? true : false),
     activePlaceholder = _useState[0],
     setPlaceholderStatus = _useState[1];
@@ -2967,11 +2996,10 @@ var SelectField = function SelectField(_ref6) {
   return React__default.createElement(Container$b, Object.assign({}, {
     isCompact: isCompact,
     activePlaceholder: activePlaceholder
-  }, {
-    isLabelSameRow: label === null || label === void 0 ? void 0 : label.isSameRow
   }), label ? React__default.createElement(Label, {
     htmlFor: label.htmlFor,
-    labelText: label.text
+    labelText: label.text,
+    direction: label.isSameRow ? 'row' : label.direction
   }, renderSelect(label.htmlFor)) : renderSelect());
 };
 
@@ -3031,7 +3059,7 @@ var isNotNumber = function isNotNumber(value) {
 };
 
 var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
-var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$3, _templateObject12$2;
+var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$3, _templateObject12$3;
 var ThumbDiameter = 16;
 var SliderWrapper = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  position: relative;\n  height: 30px;\n  margin-top: 20px;\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -3044,8 +3072,8 @@ var HiddenInput$1 = styled__default.input(_templateObject3$i || (_templateObject
   var disabled = _ref3.disabled;
   return disabled ? "not-allowed" : "pointer";
 });
-var Rail = styled__default.div(_templateObject4$g || (_templateObject4$g = _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$e || (_templateObject5$e = _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 Rail = styled__default.div(_templateObject4$h || (_templateObject4$h = _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$f || (_templateObject5$f = _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)";
 });
@@ -3071,7 +3099,7 @@ var Thumb = styled__default.span(_templateObject11$3 || (_templateObject11$3 = _
   var leftValue = _ref10.leftValue;
   return leftValue + "%";
 });
-var GhostThumb = styled__default(Thumb)(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  opacity: .5;\n"])));
+var GhostThumb = styled__default(Thumb)(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  opacity: .5;\n"])));
 var thumbLeftPosition = function thumbLeftPosition(value, min, max) {
   return valueToPercent(value, min, max);
 };
@@ -3290,18 +3318,18 @@ var InputFileButton = function InputFileButton(_ref) {
 };
 
 var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
-var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$h, _templateObject5$f;
+var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$i, _templateObject5$g;
 var Container$d = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
 var Headers = styled__default.div(_templateObject2$l || (_templateObject2$l = _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$k || (_templateObject3$k = _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$h || (_templateObject4$h = _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 Unit = styled__default.div(_templateObject4$i || (_templateObject4$i = _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;
 });
-var ValueTitle = styled__default.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var ValueTitle = styled__default.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var DurationSlider = function DurationSlider(_ref3) {
   var max = _ref3.max,
     min = _ref3.min,
@@ -3776,12 +3804,12 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
   return isDifferent;
 };
 
-var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$6, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 var CropLineStyle = styled.css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  opacity: 0.1;\n"])));
 var TopLine = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: n-resize;\n  width: 100%;\n  height: 5px;\n  left: 0;\n  top: -3px;\n"])), CropLineStyle);
 var RightLine = styled__default.div(_templateObject3$m || (_templateObject3$m = _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$i || (_templateObject4$i = _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$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: w-resize;\n  left: -3px;\n  top: 0;\n  width: 5px;\n  height: 100%;\n"])), CropLineStyle);
+var BottomLine = styled__default.div(_templateObject4$j || (_templateObject4$j = _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$h || (_templateObject5$h = _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$c || (_templateObject6$c = _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$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  margin-left: -5px;\n  left: 50%;\n  ", ";\n"])), resizeSquaresCss, function (_ref) {
   var isResizable = _ref.isResizable;
@@ -3793,13 +3821,13 @@ var PointNW = styled__default.div(_templateObject9$9 || (_templateObject9$9 = _t
 });
 var PointNE = styled__default.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref3) {
   var isResizable = _ref3.isResizable;
-  return isResizable && styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n    cursor: ne-resize;\n  "])));
+  return isResizable && styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n    cursor: ne-resize;\n  "])));
 });
-var PointE = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n    margin-top: -5px;\n    top: 50%;\n    right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref4) {
+var PointE = styled__default.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n    margin-top: -5px;\n    top: 50%;\n    right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref4) {
   var isResizable = _ref4.isResizable;
-  return isResizable && styled.css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n    cursor: e-resize;\n  "])));
+  return isResizable && styled.css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n    cursor: e-resize;\n  "])));
 });
-var PointSE = styled__default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  ", ";\n  bottom: -5px;\n  right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref5) {
+var PointSE = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  bottom: -5px;\n  right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref5) {
   var isResizable = _ref5.isResizable;
   return isResizable && styled.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n    cursor: se-resize;\n  "])));
 });
@@ -3853,15 +3881,15 @@ var CropArea = function CropArea(_ref9) {
   })));
 };
 
-var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a;
+var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a;
 var Container$g = styled__default.div(_templateObject$v || (_templateObject$v = _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;
 });
 var InnerContainer$2 = styled__default.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n    position: relative;\n  z-index: 99;\n"])));
 var ToolHeader = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 17px;\n"])));
-var TextGroup = styled__default.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 20px;\n  font-weight: 500;\n  color: var(--mono);\n\n  ", " {\n    display: flex;\n    align-items: center;\n    margin-right: 14px;\n  }\n"])), IconWrapper);
-var ButtonsGroup = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  button + button {\n    margin-left: 10px;\n  }\n"])));
+var TextGroup = styled__default.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 20px;\n  font-weight: 500;\n  color: var(--mono);\n\n  ", " {\n    display: flex;\n    align-items: center;\n    margin-right: 14px;\n  }\n"])), IconWrapper);
+var ButtonsGroup = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  button + button {\n    margin-left: 10px;\n  }\n"])));
 var PreviewArea = styled__default.div(_templateObject6$d || (_templateObject6$d = _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 (_ref2) {
   var canvasHeight = _ref2.canvasHeight;
   return canvasHeight ? canvasHeight + "px" : "462px";
@@ -4139,7 +4167,7 @@ var CropTool = function CropTool(_ref5) {
   })))))), document.body);
 };
 
-var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$b;
+var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$b;
 var CROP_HEIGHT_AREA = 500;
 var CROP_WIDTH_AREA = 475;
 var CANVAS_HEIGHT = 490;
@@ -4152,8 +4180,8 @@ var Container$h = styled__default.div(_templateObject$w || (_templateObject$w =
   return styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
 });
 var PreviewImageGroup = styled__default.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-bottom: 17px;\n  height: ", ";\n  width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
-var PhotoContainerStyle = styled.css(_templateObject4$k || (_templateObject4$k = _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$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  ", "\n  object-fit: cover;\n"])), PhotoContainerStyle);
+var PhotoContainerStyle = styled.css(_templateObject4$l || (_templateObject4$l = _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$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  ", "\n  object-fit: cover;\n"])), PhotoContainerStyle);
 var PlaceholderText = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  color: var(--grey-10);\n  font-size: 14px;\n"])));
 var NoPhoto = styled__default.div(_templateObject7$e || (_templateObject7$e = _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"])));
@@ -4330,18 +4358,18 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
   }));
 };
 
-var _templateObject$y, _templateObject2$s, _templateObject3$q, _templateObject4$l, _templateObject5$j, _templateObject6$f;
+var _templateObject$y, _templateObject2$s, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$f;
 var Container$j = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
 });
 var StyledDropArea = styled__default(DropArea)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
 var InputButtonWrapper = styled__default.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  margin-top: 20px;\n  display: flex;\n  gap: 20px;\n"])));
-var FilesUploadGroup = styled__default.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 5px;\n  background-color: var(--grey-4);\n  position: relative;\n"])), function (_ref2) {
+var FilesUploadGroup = styled__default.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 5px;\n  background-color: var(--grey-4);\n  position: relative;\n"])), function (_ref2) {
   var hasFiles = _ref2.hasFiles;
   return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
 });
-var Title = styled__default.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  color: var(--grey-11);\n  font-size: 20px;\n"])));
+var Title = styled__default.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  color: var(--grey-11);\n  font-size: 20px;\n"])));
 var Description = styled__default.div(_templateObject6$f || (_templateObject6$f = _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();
@@ -4462,7 +4490,7 @@ var Form = function Form(_ref2) {
 };
 
 var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
-var _templateObject$A, _templateObject2$u, _templateObject3$r, _templateObject4$m, _templateObject5$k, _templateObject6$g, _templateObject7$f, _templateObject8$d;
+var _templateObject$A, _templateObject2$u, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$g, _templateObject7$f, _templateObject8$d;
 var StyledButton$3 = styled__default.button(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  ", "\n  ", ";\n\n  color: var(--text-color);\n  height: var(--button-height);\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  align-self: stretch;\n\n  &:hover:enabled {\n    background: var(--button-hover-bg);\n\n    ", " {\n      svg g, svg path {\n        stroke: var(--white-a12);\n      }\n    }\n  }\n\n  &:active:enabled {\n    background: var(--button-active-bg);\n\n    ", ";\n\n    ", " {\n      svg g, svg path {\n        stroke: var(--white-a12);\n      }\n    }\n  }\n\n  &:disabled {\n    color: var(--text-disabled-color);\n    cursor: not-allowed;\n  }\n"])), resetButtonStyles, function (_ref) {
   var noBorderTop = _ref.noBorderTop;
   return noBorderTop ? "border-top: none" : styled.css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n        border-top: 1px solid var(--border-color)"])));
@@ -4470,8 +4498,8 @@ var StyledButton$3 = styled__default.button(_templateObject$A || (_templateObjec
   var noBorderTop = _ref2.noBorderTop;
   return noBorderTop ? "border-top: none" : styled.css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n          border-top: 1px solid var(--border-active-color)"])));
 }, IconWrapper);
-var OptionText = styled__default.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-size: var(--button-font-size);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: center;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n"])));
-var TextWrapper = styled__default.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  padding: 0px var(--button-h-padding);\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n"])), function (_ref3) {
+var OptionText = styled__default.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-size: var(--button-font-size);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: center;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n"])));
+var TextWrapper = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  padding: 0px var(--button-h-padding);\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n"])), function (_ref3) {
   var textMaxWidth = _ref3.textMaxWidth;
   return textMaxWidth && styled.css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["max-width: ", ";"])), textMaxWidth);
 });
@@ -4495,9 +4523,13 @@ var SplitButtonOption = function SplitButtonOption(_ref5) {
     closeCallback = _ref5.closeCallback,
     hasOnSelectLoading = _ref5.hasOnSelectLoading,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
+  var buttonRef = React.useRef(null);
   var _useState = React.useState(false),
     isLoading = _useState[0],
     setIsLoading = _useState[1];
+  var _useState2 = React.useState(0),
+    iconSize = _useState2[0],
+    setIconSize = _useState2[1];
   var handleClick = React.useCallback(function () {
     onClickCallback && onClickCallback();
     if (hasOnSelectLoading) {
@@ -4512,14 +4544,24 @@ var SplitButtonOption = function SplitButtonOption(_ref5) {
       }, 200);
     }
   }, [closeCallback, hasOnSelectLoading, onClickCallback]);
-  return React__default.createElement(StyledButton$3, Object.assign({}, {
-    noBorderTop: noBorderTop
+  React.useEffect(function () {
+    if (buttonRef.current) {
+      setIconSize(parseInt(getComputedStyle(buttonRef.current).getPropertyValue('--button-icon-size')));
+    }
+  }, [buttonRef]);
+  return React__default.createElement(StyledButton$3, Object.assign({
+    ref: buttonRef
+  }, {
+    noBorderTop: noBorderTop,
+    size: size
   }, {
     onClick: handleClick
   }, props), React__default.createElement(LeftIconWrapper, {
     isAscendingIcon: icon === 'FilterAscending'
   }, isLoading ? React__default.createElement(Spinner, {
-    size: buttonSpinnerSize(size),
+    custom: {
+      size: iconSize
+    },
     styling: design
   }) : React__default.createElement(Icon, {
     icon: icon
@@ -4661,7 +4703,7 @@ function useClickOutside(elRef, elCallback) {
   }, [elCallback, elRef]);
 }
 
-var _templateObject$B, _templateObject2$v, _templateObject3$s, _templateObject4$n, _templateObject5$l, _templateObject6$h, _templateObject7$g;
+var _templateObject$B, _templateObject2$v, _templateObject3$s, _templateObject4$o, _templateObject5$m, _templateObject6$h, _templateObject7$g;
 var Container$k = styled__default.div(_templateObject$B || (_templateObject$B = _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$v || (_templateObject2$v = _taggedTemplateLiteralLoose([""])));
@@ -4673,10 +4715,10 @@ var Container$k = styled__default.div(_templateObject$B || (_templateObject$B =
   return theme.styles.modal.overlay;
 });
 var CloseIcon = styled__default(Icon)(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose([""])));
-var CloseButton = styled__default.button(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  top: -30px;\n  color: var(--mono);\n  font-size: 14px;\n  font-weight: 500;\n\n  ", " {\n    display: flex;\n    margin-left: 12px;\n  }\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    opacity: .9;\n  }\n  &:disabled {\n    opacity: 0.1;\n  }\n"])), resetButtonStyles, IconWrapper, function (_ref4) {
+var CloseButton = styled__default.button(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  top: -30px;\n  color: var(--mono);\n  font-size: 14px;\n  font-weight: 500;\n\n  ", " {\n    display: flex;\n    margin-left: 12px;\n  }\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    opacity: .9;\n  }\n  &:disabled {\n    opacity: 0.1;\n  }\n"])), resetButtonStyles, IconWrapper, function (_ref4) {
   var _ref4$selected = _ref4.selected,
     selected = _ref4$selected === void 0 ? false : _ref4$selected;
-  return selected && styled.css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid var(--primary-7);\n  "])));
+  return selected && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid var(--primary-7);\n  "])));
 }, function (_ref5) {
   var theme = _ref5.theme;
   return theme && styled.css(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n      opacity: .8;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
@@ -5021,7 +5063,7 @@ function SvgNoImageBig(props) {
 }
 
 var _excluded$k = ["loop", "autoPlay", "controls", "muted"];
-var _templateObject$C, _templateObject2$w, _templateObject3$t, _templateObject4$o, _templateObject5$m, _templateObject6$i, _templateObject7$h, _templateObject8$e;
+var _templateObject$C, _templateObject2$w, _templateObject3$t, _templateObject4$p, _templateObject5$n, _templateObject6$i, _templateObject7$h, _templateObject8$e;
 var MediaBoxWrapper = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  ", ";\n  ", ";\n"])), function (_ref) {
   var minHeight = _ref.minHeight;
   return minHeight && "min-height: " + minHeight;
@@ -5035,7 +5077,7 @@ var Video = styled__default.video(_templateObject3$t || (_templateObject3$t = _t
   var theme = _ref3.theme,
     isLoaded = _ref3.isLoaded,
     hasModalLimits = _ref3.hasModalLimits;
-  return styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n    opacity: ", ";\n\n    ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
+  return styled.css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n    opacity: ", ";\n\n    ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
 });
 var StyledImage = styled__default.img(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), mediaStyle, function (_ref4) {
   var theme = _ref4.theme,
@@ -5297,7 +5339,7 @@ var useThemeToggle = function useThemeToggle() {
 var _excluded$l = ["mainButtonId", "buttonList", "design", "size", "textMaxWidth", "disabled"],
   _excluded2 = ["id", "text", "icon", "disabled"],
   _excluded3 = ["id", "text", "icon", "disabled"];
-var _templateObject$D, _templateObject2$x, _templateObject3$u, _templateObject4$p;
+var _templateObject$D, _templateObject2$x, _templateObject3$u, _templateObject4$q;
 var TOGGLE_ICON_WIDTH = 30;
 var Container$l = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n  overflow: visible;\n"])));
 var ButtonsWrapper$1 = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: var(--font-ui);\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  border-radius: 3px;\n  border: 1px solid var(--border);\n  background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);\n  box-shadow: var(--button-lift-default-x, 0px) var(--button-lift-default-y, 2px) var(--button-lift-default-blur, 4px) var(--button-lift-default-spread, 2px) var(--button-lift-default-color, rgba(221, 234, 248, 0.08));\n"])), function (_ref) {
@@ -5305,7 +5347,7 @@ var ButtonsWrapper$1 = styled__default.div(_templateObject2$x || (_templateObjec
   return isOpen && "z-index: 100";
 });
 var MainButtonWrapper = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  align-self: stretch;\n"])));
-var ToggleIcon = styled__default.button(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  height: var(--button-height);\n  padding: 3px var(--button-icon-h-padding);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  border-left: 1px solid var(--toggle-icon-border);\n  cursor: pointer;\n\n  ", " {\n    svg {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      path, g {\n        stroke: var(--toggle-icon);\n      }\n    }\n  }\n\n  &:hover:enabled {\n    background: var(--toggle-icon-hover-bg);\n  }\n\n  &:active:enabled {\n    background: var(--toggle-icon-active-bg);\n    ", " {\n      svg path, svg g {\n        stroke: var(--toggle-icon-active);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n\n    ", " {\n      svg path {\n        stroke: var(--toggle-icon-disabled);\n      }\n    }\n  }\n\n"])), resetButtonStyles, IconWrapper, IconWrapper, IconWrapper);
+var ToggleIcon = styled__default.button(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  height: var(--button-height);\n  padding: 3px var(--button-icon-h-padding);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  border-left: 1px solid var(--toggle-icon-border);\n  cursor: pointer;\n\n  ", " {\n    svg {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      path, g {\n        stroke: var(--toggle-icon);\n      }\n    }\n  }\n\n  &:hover:enabled {\n    background: var(--toggle-icon-hover-bg);\n  }\n\n  &:active:enabled {\n    background: var(--toggle-icon-active-bg);\n    ", " {\n      svg path, svg g {\n        stroke: var(--toggle-icon-active);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n\n    ", " {\n      svg path {\n        stroke: var(--toggle-icon-disabled);\n      }\n    }\n  }\n\n"])), resetButtonStyles, IconWrapper, IconWrapper, IconWrapper);
 var validateMaxWidth = function validateMaxWidth(btnTextMaxWidth, textMaxWidth) {
   if (textMaxWidth) return textMaxWidth;
   if (btnTextMaxWidth) return btnTextMaxWidth - TOGGLE_ICON_WIDTH + "px";
@@ -5417,14 +5459,14 @@ var ButtonsStack = function ButtonsStack(_ref) {
   }));
 };
 
-var _templateObject$F, _templateObject2$y, _templateObject3$v, _templateObject4$q, _templateObject5$n, _templateObject6$j, _templateObject7$i, _templateObject8$f;
+var _templateObject$F, _templateObject2$y, _templateObject3$v, _templateObject4$r, _templateObject5$o, _templateObject6$j, _templateObject7$i, _templateObject8$f;
 var Container$n = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref) {
   var hide = _ref.hide;
   return hide && styled.css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n    display: none;\n  "])));
 });
 var Label$1 = styled__default.label(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 12px;\n  font-weight: 500;\n  text-decoration: none;\n  color: var(--primary-10);\n  padding: 12px;\n  border-bottom: var(--grey-6) 1px solid;\n"])));
-var Item = styled__default.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  padding: 12px;\n  display: flex;\n  justify-content: left;\n"])));
-var IconWrap = styled__default.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n  flex: 0 0 32px;\n  align-items: center;\n  display: flex;\n  padding-top: 1px;\n"])));
+var Item = styled__default.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n  padding: 12px;\n  display: flex;\n  justify-content: left;\n"])));
+var IconWrap = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n  flex: 0 0 32px;\n  align-items: center;\n  display: flex;\n  padding-top: 1px;\n"])));
 var Input$1 = styled__default.input(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  text-align: left;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.2px;\n  text-decoration: none;\n  color: var(--grey-12);\n  background-color: transparent;\n\n  width: 100%;\n  border: ", ";\n  outline: none;\n  flex: 1;\n  justify-content: space-between;\n  border-radius: 3px;\n\n  &:focus, &:hover {\n\n    border-color: ", ";\n  }\n"])), function (_ref2) {
   var isTimeInput = _ref2.isTimeInput;
   return isTimeInput ? function (_ref3) {
@@ -5600,7 +5642,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
   })))));
 };
 
-var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
 var initializeInterval = function initializeInterval(day) {
   return {
     start: dateFns.set(day, {
@@ -5615,48 +5657,62 @@ var TODAY_INTERVAL = initializeInterval(dateFns.startOfDay(new Date()));
 var Container$o = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var DateTimeArea = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  border-right: var(--grey-6) 1px solid;\n  width: 170px;\n  display: flex;\n  flex-direction: column;\n"])));
 var TimeZoneOption = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  border-top: var(--grey-6) 1px solid;\n  margin-top: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n  box-sizing: border-box;\n"])));
-var TimeZoneLabel = styled__default.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
-var TimeZoneValue = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  text-align: left;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
+var TimeZoneLabel = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
+var TimeZoneValue = styled__default.div(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  text-align: left;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
 var CalendarArea = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
 var CalendarHeader = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 70px;\n  border-bottom: var(--grey-6) 1px solid;\n  text-align: center;\n"])));
 var CurrentMonth = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  flex-direction: column;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  text-align: center;\n  font-size: 20px;\n  font-weight: 400;\n  line-height: 20px;\n  letter-spacing: 0.5px;\n  color: var(--primary-10);\n\n  span {\n    display: block;\n    flex: 0;\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.33px;\n  }\n"])));
 var IconWrap$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  [stroke]{\n    stroke: var(--grey-8);\n  }\n"])));
 var PaginateMonth = styled__default.button(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  flex: 0 0 72px;\n  border: none;\n  background: transparent;\n  outline: none;\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 20px;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--grey-10);\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n\n  transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n  ", "{\n    svg * {\n      transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n    }\n  }\n\n  &:hover:enabled  {\n    color: var(--grey-12);\n\n    ", "{\n      [stroke]{\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n"])), IconWrap$1, IconWrap$1);
 var CalBody = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  padding: 5px 0;\n"])));
-var CalRow = styled__default.div(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 40px);\n  height: 40px;\n  box-sizing: border-box;\n\n  padding: 0 10px;\n"])));
-var CalHRow = styled__default(CalRow)(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--grey-6) 1px solid;\n"])));
-var CalCell = styled__default.button(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n  border-radius: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  text-decoration: none;\n  color: var(--grey-12);\n  font-family: var(--font-data);\n"])), resetButtonStyles);
-var CalHCell = styled__default(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--grey-a11);\n"])));
-var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 400;\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    color: var(--grey-6);\n    cursor: not-allowed;\n\n    ", "\n\n    ", ";\n  }\n\n"])), function (_ref) {
-  var thisMonth = _ref.thisMonth;
-  return !thisMonth && styled.css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n    color: var(--grey-a8);\n  "])));
+var CalRow = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 40px);\n  height: 40px;\n  box-sizing: border-box;\n\n  padding: 0 10px;\n"])));
+var CalHRow = styled__default(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--grey-6) 1px solid;\n"])));
+var CalCell = styled__default.button(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n  border-radius: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  text-decoration: none;\n  color: var(--grey-12);\n  font-family: var(--font-data);\n"])), resetButtonStyles);
+var CalHCell = styled__default(CalCell)(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--grey-a11);\n"])));
+var ContentDot = styled__default.div(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 18px;\n  bottom: 5px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: var(--primary-11);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var state = _ref.state;
+  return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n    background-color: var(--white-12);"])));
 }, function (_ref2) {
-  var isToday = _ref2.isToday;
-  return isToday && styled.css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--primary-a7);\n  "])));
+  var state = _ref2.state;
+  return state === 'inside' && styled.css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-12);"])));
 }, function (_ref3) {
-  var state = _ref3.state;
-  return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n    &:hover:enabled {\n      background: var(--primary-a6);\n      color: var(--white-1);\n    }\n  "])));
+  var isToday = _ref3.isToday;
+  return isToday && styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n    left: 16px;\n    bottom: 3px;\n  "])));
 }, function (_ref4) {
-  var state = _ref4.state;
-  return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-9);\n    color: var(--white-1);\n  "])));
-}, function (_ref5) {
-  var state = _ref5.state;
-  return state === 'start' && styled.css(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])));
+  var hasContent = _ref4.hasContent;
+  return !hasContent && styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n    display: none;\n  "])));
+});
+var DayText = styled__default.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  transform: translateY(-1px);\n"])));
+var CalCellB = styled__default(CalCell)(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 400;\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    color: var(--grey-6);\n    cursor: not-allowed;\n\n    ", "\n\n    ", ";\n  }\n\n"])), function (_ref5) {
+  var thisMonth = _ref5.thisMonth;
+  return !thisMonth && styled.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n    color: var(--grey-a8);\n  "])));
 }, function (_ref6) {
-  var state = _ref6.state;
-  return state === 'end' && styled.css(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "])));
+  var isToday = _ref6.isToday;
+  return isToday && styled.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--primary-a7);\n  "])));
 }, function (_ref7) {
   var state = _ref7.state;
-  return state === 'insideHover' && styled.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a9) !important;\n    color: var(--white-1);\n  "])));
+  return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n    &:hover:enabled {\n      background: var(--primary-a6);\n      color: var(--white-1);\n    }\n  "])));
 }, function (_ref8) {
   var state = _ref8.state;
-  return state === 'inside' && styled.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a5);\n    border-radius: 0;\n    opacity: 1;\n\n    &:nth-child(7n+1), &:nth-child(7n){\n      &::after {\n        background: var(--primary-a5);\n        display: block;\n        content: '';\n        position: absolute;\n        left: -10px;\n        width: 10px;\n        top: 0;\n        height: 40px;\n      }\n    }\n\n    &:nth-child(7n)::after {\n      left: auto;\n      right: -10px;\n    }\n  "])));
+  return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-9);\n    color: var(--white-1);\n  "])));
 }, function (_ref9) {
   var state = _ref9.state;
-  return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a9);\n    "])));
+  return state === 'start' && styled.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])));
 }, function (_ref10) {
   var state = _ref10.state;
-  return state === 'inside' && styled.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a7);\n      &:nth-child(7n+1), &:nth-child(7n){\n        &::after {\n          background: var(--red-a7);\n        }\n      }\n    "])));
+  return state === 'end' && styled.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "])));
+}, function (_ref11) {
+  var state = _ref11.state;
+  return state === 'insideHover' && styled.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a9) !important;\n    color: var(--white-1);\n  "])));
+}, function (_ref12) {
+  var state = _ref12.state;
+  return state === 'inside' && styled.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a5);\n    border-radius: 0;\n    opacity: 1;\n\n    &:nth-child(7n+1), &:nth-child(7n){\n      &::after {\n        background: var(--primary-a5);\n        display: block;\n        content: '';\n        position: absolute;\n        left: -10px;\n        width: 10px;\n        top: 0;\n        height: 40px;\n      }\n    }\n\n    &:nth-child(7n)::after {\n      left: auto;\n      right: -10px;\n    }\n  "])));
+}, function (_ref13) {
+  var state = _ref13.state;
+  return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a9);\n    "])));
+}, function (_ref14) {
+  var state = _ref14.state;
+  return state === 'inside' && styled.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a7);\n      &:nth-child(7n+1), &:nth-child(7n){\n        &::after {\n          background: var(--red-a7);\n        }\n      }\n    "])));
 });
 var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
 var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
@@ -5672,27 +5728,28 @@ var isDateInterval = function isDateInterval(value) {
   }
   return value.start instanceof Date && value.end instanceof Date;
 };
-var DatePicker = function DatePicker(_ref11) {
-  var _ref11$dateMode = _ref11.dateMode,
-    dateMode = _ref11$dateMode === void 0 ? 'interval' : _ref11$dateMode,
-    _ref11$timeMode = _ref11.timeMode,
-    timeMode = _ref11$timeMode === void 0 ? 'interval' : _ref11$timeMode,
-    _ref11$dateTimeTextUp = _ref11.dateTimeTextUpper,
-    dateTimeTextUpper = _ref11$dateTimeTextUp === void 0 ? 'From' : _ref11$dateTimeTextUp,
-    _ref11$dateTimeTextLo = _ref11.dateTimeTextLower,
-    dateTimeTextLower = _ref11$dateTimeTextLo === void 0 ? 'To' : _ref11$dateTimeTextLo,
-    _ref11$timeZoneTitle = _ref11.timeZoneTitle,
-    timeZoneTitle = _ref11$timeZoneTitle === void 0 ? 'Timezone' : _ref11$timeZoneTitle,
-    _ref11$timeZoneValueT = _ref11.timeZoneValueTitle,
-    timeZoneValueTitle = _ref11$timeZoneValueT === void 0 ? 'JST' : _ref11$timeZoneValueT,
-    _ref11$hasEmptyValue = _ref11.hasEmptyValue,
-    hasEmptyValue = _ref11$hasEmptyValue === void 0 ? false : _ref11$hasEmptyValue,
-    _ref11$updateCallback = _ref11.updateCallback,
-    updateCallback = _ref11$updateCallback === void 0 ? function () {} : _ref11$updateCallback,
-    initialValue = _ref11.initialValue,
-    availableRange = _ref11.availableRange,
-    _ref11$lang = _ref11.lang,
-    lang = _ref11$lang === void 0 ? 'en' : _ref11$lang;
+var DatePicker = function DatePicker(_ref15) {
+  var _ref15$dateMode = _ref15.dateMode,
+    dateMode = _ref15$dateMode === void 0 ? 'interval' : _ref15$dateMode,
+    _ref15$timeMode = _ref15.timeMode,
+    timeMode = _ref15$timeMode === void 0 ? 'interval' : _ref15$timeMode,
+    _ref15$dateTimeTextUp = _ref15.dateTimeTextUpper,
+    dateTimeTextUpper = _ref15$dateTimeTextUp === void 0 ? 'From' : _ref15$dateTimeTextUp,
+    _ref15$dateTimeTextLo = _ref15.dateTimeTextLower,
+    dateTimeTextLower = _ref15$dateTimeTextLo === void 0 ? 'To' : _ref15$dateTimeTextLo,
+    _ref15$timeZoneTitle = _ref15.timeZoneTitle,
+    timeZoneTitle = _ref15$timeZoneTitle === void 0 ? 'Timezone' : _ref15$timeZoneTitle,
+    _ref15$timeZoneValueT = _ref15.timeZoneValueTitle,
+    timeZoneValueTitle = _ref15$timeZoneValueT === void 0 ? 'JST' : _ref15$timeZoneValueT,
+    _ref15$hasEmptyValue = _ref15.hasEmptyValue,
+    hasEmptyValue = _ref15$hasEmptyValue === void 0 ? false : _ref15$hasEmptyValue,
+    _ref15$updateCallback = _ref15.updateCallback,
+    updateCallback = _ref15$updateCallback === void 0 ? function () {} : _ref15$updateCallback,
+    initialValue = _ref15.initialValue,
+    availableRange = _ref15.availableRange,
+    contentDays = _ref15.contentDays,
+    _ref15$lang = _ref15.lang,
+    lang = _ref15$lang === void 0 ? 'en' : _ref15$lang;
   var _useState = React.useState(getInitialValue(hasEmptyValue, initialValue)),
     selectedRange = _useState[0],
     setSelectedRange = _useState[1];
@@ -5758,9 +5815,9 @@ var DatePicker = function DatePicker(_ref11) {
     }
   }, [dateMode, selectedRange, targetedDate]);
   React.useEffect(function () {
-    var _ref12 = selectedRange ? selectedRange : TODAY_INTERVAL,
-      start = _ref12.start,
-      end = _ref12.end;
+    var _ref16 = selectedRange ? selectedRange : TODAY_INTERVAL,
+      start = _ref16.start,
+      end = _ref16.end;
     if (timeMode === 'interval' && dateFns.isAfter(dateFns.add(start, {
       minutes: 1
     }), end)) {
@@ -5774,16 +5831,16 @@ var DatePicker = function DatePicker(_ref11) {
     }
   }, [selectedRange, timeMode]);
   var updateStartDate = React.useCallback(function (start) {
-    var _ref13 = selectedRange ? selectedRange : TODAY_INTERVAL,
-      end = _ref13.end;
+    var _ref17 = selectedRange ? selectedRange : TODAY_INTERVAL,
+      end = _ref17.end;
     setSelectedRange({
       start: start,
       end: end
     });
   }, [selectedRange]);
   var updateEndDate = React.useCallback(function (end) {
-    var _ref14 = selectedRange ? selectedRange : TODAY_INTERVAL,
-      start = _ref14.start;
+    var _ref18 = selectedRange ? selectedRange : TODAY_INTERVAL,
+      start = _ref18.start;
     setSelectedRange({
       start: start,
       end: end
@@ -5844,16 +5901,22 @@ var DatePicker = function DatePicker(_ref11) {
     return React__default.createElement(CalRow, {
       key: index
     }, days.map(function (day, index) {
+      var dayState = cellState(day, selectedRange);
+      var isTodayValue = dateFns.isToday(day);
       return React__default.createElement(CalCellB, {
         key: index,
         disabled: isDayOutOfRange(day, availableRange),
         onClick: function onClick() {
           return onCellClick(day);
         },
-        state: cellState(day, selectedRange),
+        state: dayState,
         thisMonth: dateFns.isSameMonth(day, focusedMonth),
-        isToday: dateFns.isToday(day)
-      }, dateFns.format(day, "d"));
+        isToday: isTodayValue
+      }, React__default.createElement(DayText, null, dateFns.format(day, "d")), React__default.createElement(ContentDot, {
+        hasContent: dayHasContent(day, contentDays),
+        state: dayState,
+        isToday: isTodayValue
+      }));
     }));
   }))));
 };
@@ -5940,6 +6003,12 @@ var isDayOutOfRange = function isDayOutOfRange(currentDay, availableRange) {
   }
   return false;
 };
+var dayHasContent = function dayHasContent(currentDay, contentDays) {
+  if (!contentDays) return false;
+  return contentDays.some(function (day) {
+    return dateFns.isSameDay(currentDay, day);
+  });
+};
 
 var _excluded$n = ["children"];
 var _templateObject$H, _templateObject2$A;
@@ -5952,17 +6021,17 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
 };
 
 var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
-var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$8;
+var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$8;
 var LeftIconWrapper$1 = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding: 0 6px;\n"])), function (_ref) {
   var isSortAscending = _ref.isSortAscending;
   return isSortAscending && styled.css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n      transform: scaleY(-1);\n  "])));
 });
 var fadeInAnimation = styled.keyframes(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
-var FlipArrowContainer = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref2) {
+var FlipArrowContainer = styled__default.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref2) {
   var design = _ref2.design;
   return design === 'default' ? "padding: 0px 12px 0px 8px;" : "padding: 0px 8px;";
 });
-var StyledButton$4 = styled__default.button(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  ", ";\n  border-radius: 3px;\n  height: var(--common-height);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  padding: 4px 10px 4px 4px;\n\n  ", ";\n\n  ", ";\n\n  text-align: left;\n  font-size: 12px;\n  font-weight: 500;\n  text-decoration: none;\n  color: var(--filter-button-text-color);\n  font-family: var(--font-ui);\n  transition:\n    opacity ", " ", ",\n    background-color ", " ", ",\n    box-shadow ", " ", ",\n    color ", " ", ",\n    border ", " ", ";\n\n  animation: ", " ", " ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n    [stroke]{\n      transition: stroke ", " ", ";\n    }\n  }\n\n  &:hover:enabled, &:active:enabled {\n    color: var(--grey-12);\n\n    ", ";\n\n    ", " {\n      [stroke]{\n        stroke: var(--primary-9);\n      }\n    }\n\n    ", ";\n\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 50%;\n  }\n\n  ", ";\n\n"])), resetButtonStyles, function (_ref3) {
+var StyledButton$4 = styled__default.button(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n  ", ";\n  border-radius: 3px;\n  height: var(--common-height);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  padding: 4px 10px 4px 4px;\n\n  ", ";\n\n  ", ";\n\n  text-align: left;\n  font-size: 12px;\n  font-weight: 500;\n  text-decoration: none;\n  color: var(--filter-button-text-color);\n  font-family: var(--font-ui);\n  transition:\n    opacity ", " ", ",\n    background-color ", " ", ",\n    box-shadow ", " ", ",\n    color ", " ", ",\n    border ", " ", ";\n\n  animation: ", " ", " ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n    [stroke]{\n      transition: stroke ", " ", ";\n    }\n  }\n\n  &:hover:enabled, &:active:enabled {\n    color: var(--grey-12);\n\n    ", ";\n\n    ", " {\n      [stroke]{\n        stroke: var(--primary-9);\n      }\n    }\n\n    ", ";\n\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 50%;\n  }\n\n  ", ";\n\n"])), resetButtonStyles, function (_ref3) {
   var design = _ref3.design;
   return design === 'basic' ? "\n        background-color: transparent;\n        border: 1px solid transparent;\n        padding: 4px;\n      " : "\n        background-color: var(--filter-button-background-color);\n        border: var(--filter-button-stroke-color) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n      ";
 }, function (_ref4) {
@@ -6017,12 +6086,12 @@ var FilterButton = function FilterButton(_ref8) {
 };
 
 var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
-var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$9;
+var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$9;
 var Title$1 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  display: block;\n  color: var(--grey-12);\n  font-size: 14px;\n  font-weight: 500;\n  user-select: none;\n  pointer-events: none;\n"])));
 var FakeCheckbox = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 5px;\n  border-width: 2px;\n  border-style: solid;\n"])));
 var FakeCheckboxInner = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  box-sizing: border-box;\n"])));
-var CheckMarkWrapper = styled__default.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    display: block;\n    [stroke]{\n      stroke: transparent;\n    }\n    [fill] {\n      fill: var(--inverse);\n    }\n  }\n"])));
-var FakeRadioButton = styled__default.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  user-select: none;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-width: 2px;\n  border-style: solid;\n"])));
+var CheckMarkWrapper = styled__default.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    display: block;\n    [stroke]{\n      stroke: transparent;\n    }\n    [fill] {\n      fill: var(--inverse);\n    }\n  }\n"])));
+var FakeRadioButton = styled__default.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  user-select: none;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-width: 2px;\n  border-style: solid;\n"])));
 var FakeInnerRadio = styled__default.div(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  user-select: none;\n"])));
 var Container$q = styled__default.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  gap: 12px;\n\n  ", ";\n"])), function (_ref) {
   var selected = _ref.selected,
@@ -6054,14 +6123,14 @@ var FilterOption = function FilterOption(_ref2) {
 };
 
 var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
-var _templateObject$K, _templateObject2$D, _templateObject3$z, _templateObject4$u, _templateObject5$r, _templateObject6$n, _templateObject7$m, _templateObject8$j;
+var _templateObject$K, _templateObject2$D, _templateObject3$z, _templateObject4$v, _templateObject5$s, _templateObject6$n, _templateObject7$m, _templateObject8$j;
 var IconContainer$1 = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  padding: 0 2px;\n"])));
 var Container$r = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", " {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  \n"])), function (_ref) {
   var hasBorder = _ref.hasBorder,
     disabled = _ref.disabled,
     noBackground = _ref.noBackground,
     width = _ref.width;
-  return styled.css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  \n    transition: all var(--speed-normal) var(--easing-primary-in);\n    gap: 6px;\n    height: var(--input-compact-height);\n    padding: 0;\n    align-items: center;\n    display: flex;\n    border-radius: 3px;\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    background-color: ", ";\n    \n    &:focus-within {\n      background-color: ", ";\n      border: ", ";\n      box-shadow: 0px 4px 9px 0px ", ";\n    }\n\n  "])), hasBorder && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      padding: 0 8px;\n      border: 1px solid var(--filter-button-stroke-color);\n      box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n      &:hover {\n        border: var(--primary-7) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n      }\n      ", "{\n        padding: 0;\n      }\n    "])), IconContainer$1), disabled && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      opacity: 50%;\n      cursor: not-allowed;\n      "]))), width && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
+  return styled.css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  \n    transition: all var(--speed-normal) var(--easing-primary-in);\n    gap: 6px;\n    height: var(--input-compact-height);\n    padding: 0;\n    align-items: center;\n    display: flex;\n    border-radius: 3px;\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    background-color: ", ";\n    \n    &:focus-within {\n      background-color: ", ";\n      border: ", ";\n      box-shadow: 0px 4px 9px 0px ", ";\n    }\n\n  "])), hasBorder && styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n      padding: 0 8px;\n      border: 1px solid var(--filter-button-stroke-color);\n      box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n      &:hover {\n        border: var(--primary-7) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n      }\n      ", "{\n        padding: 0;\n      }\n    "])), IconContainer$1), disabled && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n      opacity: 50%;\n      cursor: not-allowed;\n      "]))), width && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
 }, IconWrapper);
 var CrossButton = styled__default.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  ", ";\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  width: 26px;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), resetButtonStyles, IconWrapper);
 var StyledInput$2 = styled__default.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--grey-12);\n  \n  &::placeholder {\n    ", ";\n    color: var(--grey-11);\n    font-style: italic;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  font-size: 12px;\n  border: none;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  border-radius: 3px;\n  outline: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
@@ -6122,7 +6191,7 @@ var isFilterItem = function isFilterItem(item) {
 };
 
 var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "children", "onToggleOpenCallback", "onCloseCallback"];
-var _templateObject$L, _templateObject2$E, _templateObject3$A, _templateObject4$v;
+var _templateObject$L, _templateObject2$E, _templateObject3$A, _templateObject4$w;
 var Container$s = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var ButtonWrapper = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
 var ContentBox = styled__default.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  z-index: 100;\n  min-width: ", "px;\n  position: absolute;\n\n  ", ";\n"])), function (_ref) {
@@ -6131,7 +6200,7 @@ var ContentBox = styled__default.div(_templateObject3$A || (_templateObject3$A =
 }, function (_ref2) {
   var openState = _ref2.openState,
     disabled = _ref2.disabled;
-  return openState && styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n    display: ", ";\n    display: ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n  "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && "\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    ", openState.position === 'bottom-left' && "\n      bottom: 0;\n      right: 0;\n      transform: translateY(calc(100% + 5px ));\n    ", openState.position === 'top-left' && "\n      top: 0;\n      right: 0;\n      transform: translateY(calc( -100% - 5px ));\n    ", openState.position === 'top-right' && "\n      top: 0;\n      left: 0;\n      transform: translateY(calc( -100% - 5px ));\n    ");
+  return openState && styled.css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n    display: ", ";\n    display: ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n  "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && "\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    ", openState.position === 'bottom-left' && "\n      bottom: 0;\n      right: 0;\n      transform: translateY(calc(100% + 5px ));\n    ", openState.position === 'top-left' && "\n      top: 0;\n      right: 0;\n      transform: translateY(calc( -100% - 5px ));\n    ", openState.position === 'top-right' && "\n      top: 0;\n      left: 0;\n      transform: translateY(calc( -100% - 5px ));\n    ");
 });
 var getDropPosition = function getDropPosition(buttonRect, minWidth, minHeight) {
   var position = 'bottom-right';
@@ -6240,15 +6309,15 @@ var LoadingBox = function LoadingBox(_ref) {
 };
 
 var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "design", "onSelect"];
-var _templateObject$N, _templateObject2$G, _templateObject3$B, _templateObject4$w, _templateObject5$s, _templateObject6$o, _templateObject7$n, _templateObject8$k;
+var _templateObject$N, _templateObject2$G, _templateObject3$B, _templateObject4$x, _templateObject5$t, _templateObject6$o, _templateObject7$n, _templateObject8$k;
 var Container$u = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
 var StyledFilterOption = styled__default(FilterOption)(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  letter-spacing: 0.2px;\n"])));
 var OptionList = styled__default.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  min-height: 40px;\n  position: relative;\n  overflow-y: auto;\n  padding: 8px 0;\n\n  ", " {\n    height: 40px;\n    padding-left: 14px;\n  }\n"])), function (_ref) {
   var moreItem = _ref.moreItem;
   return moreItem ? '228px' : '196px';
 }, StyledFilterOption);
-var ResultsContainer = styled__default.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n  min-width: 216px;\n"])));
-var ResultCounter = styled__default.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\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  height: 32px;\n  padding: 0 12px;\n  border-top: 1px solid var(--grey-5);\n  border-bottom: 1px solid var(--grey-5);\n"])));
+var ResultsContainer = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  min-width: 216px;\n"])));
+var ResultCounter = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\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  height: 32px;\n  padding: 0 12px;\n  border-top: 1px solid var(--grey-5);\n  border-bottom: 1px solid var(--grey-5);\n"])));
 var SearchWrapper = styled__default.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n"])));
 var EmptyResultText = styled__default.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 24px;\n  color: var(--grey-11);\n  font-weight: 700;\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n  height: inherit;\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n"])));
 var Gradient = styled__default.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0px;\n  height: 15px;\n  background-image: linear-gradient(to bottom, transparent, var(--grey-3));\n  width: 99%;\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n"])));
@@ -6457,12 +6526,12 @@ var FilterDropdown = function FilterDropdown(_ref2) {
 };
 
 var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "design", "onSelect"];
-var _templateObject$O, _templateObject2$H, _templateObject3$C, _templateObject4$x, _templateObject5$t, _templateObject6$p, _templateObject7$o;
+var _templateObject$O, _templateObject2$H, _templateObject3$C, _templateObject4$y, _templateObject5$u, _templateObject6$p, _templateObject7$o;
 var Container$v = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
 var StyledFilterOption$1 = styled__default(FilterOption)(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  letter-spacing: 0.2px;\n"])));
 var OptionList$1 = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  padding: 8px 0;\n  ", " {\n    height: 40px;\n    padding: 16px;\n  }\n"])), StyledFilterOption$1);
-var OrderGroup = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  display: flex;\n  border-top: var(--grey-6) 1px solid;\n  margin-top: 5px;\n\n  button:first-child {\n    border-right: var(--grey-6) 1px solid;\n  }\n"])));
-var OrderButton = styled__default.button(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 100%;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-data);\n  color: var(--grey-12);\n  font-size: 14px;\n  height: 40px;\n  padding: 0 16px;\n  gap: 12px;\n\n  ", "\n"])), resetButtonStyles, function (_ref) {
+var OrderGroup = styled__default.div(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  display: flex;\n  border-top: var(--grey-6) 1px solid;\n  margin-top: 5px;\n\n  button:first-child {\n    border-right: var(--grey-6) 1px solid;\n  }\n"])));
+var OrderButton = styled__default.button(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 100%;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-data);\n  color: var(--grey-12);\n  font-size: 14px;\n  height: 40px;\n  padding: 0 16px;\n  gap: 12px;\n\n  ", "\n"])), resetButtonStyles, function (_ref) {
   var isSelected = _ref.isSelected;
   return styled.css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n\n    ", " {\n      display: flex;\n      align-items: center;\n      [stroke]{\n        stroke: var(--grey-11);\n      }\n    }\n\n    &:hover {\n      ", " {\n        [stroke]{\n          stroke: var(--primary-9);\n        }\n      }\n    }\n\n    ", "\n\n  "])), IconWrapper, IconWrapper, isSelected && styled.css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n      ", " {\n        [stroke]{\n          stroke: var(--primary-9);\n        }\n      }\n    "])), IconWrapper));
 });
@@ -6541,14 +6610,14 @@ var SortDropdown = function SortDropdown(_ref2) {
   }))))));
 };
 
-var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$a, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
+var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$z, _templateObject5$v, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$a, _templateObject11$6, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
 var Container$w = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
 var ContextActionBaseCSS = styled.css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  background: none;\n  display: flex;\n  justify-content:left;\n  align-items:center;\n  flex-wrap: wrap;\n  cursor: pointer;\n  outline: none;\n  text-decoration: none;\n  padding: 0;\n"])));
 var ContextIcon = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 30px;\n  height: 30px;\n  border-radius: 3px;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  svg {\n    display: block;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n    background-color: var(--grey-2);\n    transition: background-color ", " ", ";\n  "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
+  return styled.css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n    background-color: var(--grey-2);\n    transition: background-color ", " ", ";\n  "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
 });
-var ContextActionButton = styled__default.button(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "{\n    cursor: pointer;\n  }\n  &:hover {\n    div > svg > g {\n      stroke: var(--white-1);\n    }\n  }\n  &:hover ", "{\n    background-color: var(--primary-9);\n    }\n  }\n  ", "\n  ", "\n"])), ContextActionBaseCSS, ContextIcon, ContextIcon, function (_ref2) {
+var ContextActionButton = styled__default.button(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "{\n    cursor: pointer;\n  }\n  &:hover {\n    div > svg > g {\n      stroke: var(--white-1);\n    }\n  }\n  &:hover ", "{\n    background-color: var(--primary-9);\n    }\n  }\n  ", "\n  ", "\n"])), ContextActionBaseCSS, ContextIcon, ContextIcon, function (_ref2) {
   var isActive = _ref2.isActive;
   return isActive && styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    ", " {\n      background-color: var(--primary-9);\n      [stroke]{\n        stroke: var(--white-1);\n      }\n    }\n    &:hover ", "{\n      cursor: pointer;\n    }\n  "])), ContextIcon, ContextIcon);
 }, function (_ref3) {
@@ -6561,10 +6630,10 @@ var ContentBox$1 = styled__default.div(_templateObject8$l || (_templateObject8$l
 }, function (_ref5) {
   var openState = _ref5.openState,
     disabled = _ref5.disabled;
-  return openState && styled.css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n    display: ", ";\n    display: ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      right: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'top-left' && styled.css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      right: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))), openState.position === 'top-right' && styled.css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      left: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))));
+  return openState && styled.css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n    display: ", ";\n    display: ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      right: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'top-left' && styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      right: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))), openState.position === 'top-right' && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      left: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))));
 });
-var ButtonWrapper$1 = styled__default.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
-var GroupStyles = styled.css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: auto;\n  align-items: center;\n  gap: 16px;\n"])));
+var ButtonWrapper$1 = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
+var GroupStyles = styled.css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: auto;\n  align-items: center;\n  gap: 16px;\n"])));
 var LayoutGroup = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding: 4px 8px 4px 10px;\n"])), GroupStyles);
 var PaginationGroup = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  border-top: var(--grey-6) 1px solid;\n  padding: 4px 8px 4px 10px;\n"])), GroupStyles);
 var IconWrapper$3 = styled__default.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
@@ -6712,7 +6781,7 @@ var FilterLayout = function FilterLayout(_ref6) {
   }))))))));
 };
 
-var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
+var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "contentDays", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
 var _templateObject$Q;
 var MIN_WIDTH = 470;
 var MIN_HEIGHT = 360;
@@ -6731,6 +6800,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
     timeZoneValueTitle = _ref.timeZoneValueTitle,
     lang = _ref.lang,
     availableRange = _ref.availableRange,
+    contentDays = _ref.contentDays,
     _ref$onCloseCallback = _ref.onCloseCallback,
     onCloseCallback = _ref$onCloseCallback === void 0 ? function () {} : _ref$onCloseCallback,
     _ref$onUpdateCallback = _ref.onUpdateCallback,
@@ -6795,7 +6865,8 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
     timeZoneTitle: timeZoneTitle,
     timeZoneValueTitle: timeZoneValueTitle,
     lang: lang,
-    availableRange: availableRange
+    availableRange: availableRange,
+    contentDays: contentDays
   }, {
     updateCallback: handleUpdateCallback,
     hasEmptyValue: true,
@@ -6804,14 +6875,14 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
 };
 
 var _excluded$v = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
-var _templateObject$R, _templateObject2$J, _templateObject3$E, _templateObject4$z, _templateObject5$v, _templateObject6$r, _templateObject7$q, _templateObject8$m;
+var _templateObject$R, _templateObject2$J, _templateObject3$E, _templateObject4$A, _templateObject5$w, _templateObject6$r, _templateObject7$q, _templateObject8$m;
 var fadeInAnimation$1 = styled.keyframes(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 50%;\n    opacity: .5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
 var SearchInputWrapper = styled__default.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  flex: 1 1 200px;\n  max-width: 320px;\n"])));
 var CloseSearchInputWrapper = styled__default.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme && styled.css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n    animation: ", " ", " ", ";\n  "])), fadeInAnimation$1, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
+  return theme && styled.css(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n    animation: ", " ", " ", ";\n  "])), fadeInAnimation$1, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
 });
-var StyledFilterButton = styled__default(FilterButton)(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose([""])));
+var StyledFilterButton = styled__default(FilterButton)(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose([""])));
 var StyledDropdown = styled__default(FilterDropdown)(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose([""])));
 var StyledDropdownDatePicker = styled__default(DropdownDatePicker)(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose([""])));
 var Container$y = styled__default.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 6px;\n"])));
@@ -6916,15 +6987,15 @@ var FilterInputs = function FilterInputs(_ref2) {
 };
 
 var _excluded$w = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
-var _templateObject$S, _templateObject2$K, _templateObject3$F, _templateObject4$A, _templateObject5$w, _templateObject6$s, _templateObject7$r;
+var _templateObject$S, _templateObject2$K, _templateObject3$F, _templateObject4$B, _templateObject5$x, _templateObject6$s, _templateObject7$r;
 var Container$z = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  min-height: 22px;\n"])));
 var ResultsTextWrapper = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  color: var(--grey-9);\n"])));
 var FilterLabel = styled__default.div(_templateObject3$F || (_templateObject3$F = _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  font-family: var(--font-data);\n\n  ", " {\n    display: flex;\n    align-items: center;\n  }\n  border-right: 1px solid var(--grey-8);\n"])), IconWrapper);
-var FilterLabelText = styled__default.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 300px;\n"])), function (_ref) {
+var FilterLabelText = styled__default.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 300px;\n"])), function (_ref) {
   var hasIcon = _ref.hasIcon;
   return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
 });
-var ClearTextButton = styled__default.button(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: var(--font-data);\n  color: var(--grey-10);\n  margin-left: 11px;\n  font-size: 12px;\n"])), resetButtonStyles);
+var ClearTextButton = styled__default.button(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: var(--font-data);\n  color: var(--grey-10);\n  margin-left: 11px;\n  font-size: 12px;\n"])), resetButtonStyles);
 var RemoveButton = styled__default.button(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), resetButtonStyles);
 var FilterLabelsGroup = styled__default.div(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-left: 10px;\n"])));
 var validWithMidnight = function validWithMidnight(endDate, resultsDateFormat) {
@@ -7448,7 +7519,7 @@ var StatusIcon = function StatusIcon(_ref3) {
   }));
 };
 
-var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$b, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
+var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$b, _templateObject11$7, _templateObject12$7, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$3, _templateObject17$3;
 var HandleTouchReactionKeyframes = styled.keyframes(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n 0% {\n    transform: scale(1);\n }\n\n 75% {\n    transform: scale(3);\n }\n\n 100% {\n   transform: scale(1.75);\n }\n"])));
 var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n 0% {\n    transform: scale(1);\n }\n\n 75% {\n    transform: scale(0);\n }\n\n 100% {\n   transform: scale(0.5);\n }\n"])));
 var HandleBase = styled__default.svg(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  overflow: visible;\n  cursor: pointer;\n  fill: ", ";\n  appearance: none;\n"])), function (_ref) {
@@ -7456,14 +7527,14 @@ var HandleBase = styled__default.svg(_templateObject3$I || (_templateObject3$I =
     styling = _ref.styling;
   return theme.custom.lines[styling].handleBase.fill;
 });
-var HandleRingLayer = styled__default.circle(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n  mask: url(#", ");\n"])), function (_ref2) {
+var HandleRingLayer = styled__default.circle(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n  mask: url(#", ");\n"])), function (_ref2) {
   var theme = _ref2.theme,
     styling = _ref2.styling;
   return theme.custom.lines[styling].handleRingLayer.stroke;
 }, function (props) {
   return props.maskID;
 });
-var HandleReactiveGroup = styled__default.g(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  opacity: 0.65;\n  cursor: pointer;\n  transform: scale(1);\n\n  ", "\n\n  ", "\n\n"])), function (props) {
+var HandleReactiveGroup = styled__default.g(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  opacity: 0.65;\n  cursor: pointer;\n  transform: scale(1);\n\n  ", "\n\n  ", "\n\n"])), function (props) {
   return props.touchDragging && styled.css(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n    animation: ", " 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n  "])), HandleTouchReactionKeyframes);
 }, function (props) {
   return props.mouseDragging && styled.css(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n    animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n  "])), HandleMouseReactionKeyframes);
@@ -7486,15 +7557,15 @@ var HandleContrastLayer = styled__default.circle(_templateObject10$b || (_templa
 var HandleShadowLayer = styled__default.circle(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n    mix-blend-mode: multiply;\n    fill: url(#", ");\n"])), function (props) {
   return props.fillID;
 });
-var GrabHandleIndexGroup = styled__default.g(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
-  return props.showIndex && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
+var GrabHandleIndexGroup = styled__default.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
+  return props.showIndex && styled.css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
 });
-var StopStart = styled__default.stop(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref6) {
+var StopStart = styled__default.stop(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref6) {
   var theme = _ref6.theme,
     styling = _ref6.styling;
   return theme.custom.lines[styling].stopStart.stopColor;
 });
-var StopEnd = styled__default.stop(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref7) {
+var StopEnd = styled__default.stop(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme,
     styling = _ref7.styling;
   return theme.custom.lines[styling].stopEnd.stopColor;
@@ -7681,7 +7752,7 @@ var HandleUnit = function HandleUnit(props) {
   }, index + pointIndexOffset))));
 };
 
-var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$c, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$5;
+var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$c, _templateObject11$8, _templateObject12$8, _templateObject13$7, _templateObject14$6;
 var ContrastLine = styled__default.line(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  stroke: ", ";\n  mix-blend-mode: multiply;\n  stroke-width: ", "px;\n  stroke-opacity: ", ";\n  cursor: pointer;\n"])), function (_ref) {
   var theme = _ref.theme,
     styling = _ref.styling;
@@ -7707,9 +7778,9 @@ var GrabHandle = styled__default.circle(_templateObject3$J || (_templateObject3$
     styling = _ref6.styling;
   return theme.custom.lines[styling].grabHandle.stroke;
 }, function (props) {
-  return props.hide && styled.css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    opacity: 0;\n  "])));
+  return props.hide && styled.css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    opacity: 0;\n  "])));
 });
-var GrabHandleIndexGroup$1 = styled__default.g(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
+var GrabHandleIndexGroup$1 = styled__default.g(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
   return props.showIndex && styled.css(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
 });
 var GrabHandleIndexText$1 = styled__default.text(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  text-align: center;\n  fill: ", ";\n  font-weight: bold;\n  transition: opacity 250ms ease;\n  pointer-events: none;\n"])), function (_ref7) {
@@ -7731,10 +7802,10 @@ var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$c || (_te
   return theme.custom.lines[styling].grabHandleContrast.stroke;
 });
 var GrabHandleGroup = styled__default.g(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
-  return props.showIndex && styled.css(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
+  return props.showIndex && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
 });
-var DMCircle = styled__default.circle(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n  cursor: pointer;\n"])));
-var IconFormat = styled__default(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
+var DMCircle = styled__default.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n  cursor: pointer;\n"])));
+var IconFormat = styled__default(Icon)(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
 var LineUnit = function LineUnit(props) {
   var x1 = props.x1,
     y1 = props.y1,
@@ -7958,7 +8029,7 @@ var LineUnit = function LineUnit(props) {
 
 var LineSetContext = React.createContext({});
 
-var _templateObject$X, _templateObject2$P, _templateObject3$K, _templateObject4$D;
+var _templateObject$X, _templateObject2$P, _templateObject3$K, _templateObject4$E;
 var FilledPolygon = styled__default.polygon(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  fill: ", ";\n  opacity: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return color;
@@ -7977,7 +8048,7 @@ var AreaLabelText = styled__default.text(_templateObject3$K || (_templateObject3
   return theme.custom.lines[styling].label.fill;
 }, function (_ref5) {
   var showAreaLabelShadow = _ref5.showAreaLabelShadow;
-  return showAreaLabelShadow && styled.css(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n    text-shadow:\n      -1px -1px 0 #000,\n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n      1px 1px 0 #000;\n  "])));
+  return showAreaLabelShadow && styled.css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n    text-shadow:\n      -1px -1px 0 #000,\n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n      1px 1px 0 #000;\n  "])));
 });
 var AreaLabel = function AreaLabel(_ref6) {
   var _lineSetData$areaName;
@@ -8221,13 +8292,13 @@ var LineSet = function LineSet(_ref8) {
   }));
 };
 
-var _templateObject$Y, _templateObject2$Q, _templateObject3$L, _templateObject4$E, _templateObject5$z;
+var _templateObject$Y, _templateObject2$Q, _templateObject3$L, _templateObject4$F, _templateObject5$A;
 var Container$C = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n\n"])));
 var LoadingOverlay$1 = styled__default.div(_templateObject2$Q || (_templateObject2$Q = _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 Frame = styled__default.svg(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
-  return props.transculent && styled.css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
+  return props.transculent && styled.css(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
-var Image$1 = styled__default.img(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  object-fit: contain;\n  width:  100%;\n  height: 100%;\n"])));
+var Image$1 = styled__default.img(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  object-fit: contain;\n  width:  100%;\n  height: 100%;\n"])));
 var LineUI = function LineUI(_ref) {
   var src = _ref.src,
     _ref$onSizeChange = _ref.onSizeChange,
@@ -8412,12 +8483,12 @@ var LineUI = function LineUI(_ref) {
 };
 
 var _excluded$z = ["loop", "autoPlay", "controls", "muted"];
-var _templateObject$Z, _templateObject2$R, _templateObject3$M, _templateObject4$F, _templateObject5$A;
+var _templateObject$Z, _templateObject2$R, _templateObject3$M, _templateObject4$G, _templateObject5$B;
 var Container$D = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n"])));
 var Video$1 = styled__default.video(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  width:  100%;\n  height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
 var LoadingOverlay$2 = styled__default.div(_templateObject3$M || (_templateObject3$M = _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 Frame$1 = styled__default.svg(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
-  return props.transcalent && styled.css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
+var Frame$1 = styled__default.svg(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
+  return props.transcalent && styled.css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
 var LineUIVideo = function LineUIVideo(_ref) {
   var src = _ref.src,
@@ -8896,12 +8967,12 @@ function getPeerId(id) {
   return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
 }
 
-var _templateObject$$, _templateObject2$S, _templateObject3$N, _templateObject4$G, _templateObject5$B;
+var _templateObject$$, _templateObject2$S, _templateObject3$N, _templateObject4$H, _templateObject5$C;
 var Container$E = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n"])));
 var Video$3 = styled__default(WebRTCPlayer)(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  width:  100%;\n  height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
 var LoadingOverlay$3 = styled__default.div(_templateObject3$N || (_templateObject3$N = _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 Frame$2 = styled__default.svg(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
-  return props.transcalent && styled.css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
+var Frame$2 = styled__default.svg(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  touch-action: none;\n  user-select: none;\n  margin: 0;\n\n  overflow: visible;\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  transition: background 250ms ease;\n  background: hsla(0deg, 0%, 0%, 0%);\n\n  ", "\n\n"])), function (props) {
+  return props.transcalent && styled.css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n    background: hsla(0deg, 0%, 0%, 35%);\n  "])));
 });
 var LineUI$1 = function LineUI(_ref) {
   var ws = _ref.ws,
@@ -9205,7 +9276,7 @@ var LineReducer = (function (state, action) {
   }
 });
 
-var _templateObject$10, _templateObject2$T, _templateObject3$O, _templateObject4$H, _templateObject5$C, _templateObject6$v, _templateObject7$u;
+var _templateObject$10, _templateObject2$T, _templateObject3$O, _templateObject4$I, _templateObject5$D, _templateObject6$v, _templateObject7$u;
 var ICON_SIZE = 24;
 var GAP_LEFT = 20;
 var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
@@ -9215,8 +9286,8 @@ var TitlesWrapper = styled__default.div(_templateObject2$T || (_templateObject2$
   return areaTitleBottom ? "column-reverse" : "column";
 });
 var IconContainer$2 = styled__default.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  justify-content: left;\n\n  @media ", " {\n    margin-left: ", "px;\n    justify-content: center;\n  }\n\n  svg {\n    display: block;\n  }\n"])), deviceMediaQuery.large, ICON_MARGIN_LEFT);
-var Title$3 = styled__default.h1(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 26px;\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--grey-12);\n  margin: 0;\n"])));
-var AreaTitleCss = styled.css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 18px;\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--grey-11);\n"])));
+var Title$3 = styled__default.h1(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 26px;\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--grey-12);\n  margin: 0;\n"])));
+var AreaTitleCss = styled.css(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 18px;\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--grey-11);\n"])));
 var AreaTitle = styled__default.div(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  ", "\n"])), AreaTitleCss);
 var AreaLinkTitle = styled__default(reactRouterDom.Link)(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  ", "\n  &:hover {\n    text-decoration: underline;\n  }\n"])), AreaTitleCss);
 var PageTitle = function PageTitle(_ref2) {
@@ -9253,7 +9324,7 @@ var IntroductionText = function IntroductionText(_ref) {
 };
 
 var _excluded$C = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
-var _templateObject$12, _templateObject2$U, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$w, _templateObject7$v;
+var _templateObject$12, _templateObject2$U, _templateObject3$P, _templateObject4$J, _templateObject5$E, _templateObject6$w, _templateObject7$v;
 var TextContainer$2 = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
 var StyledLink = styled__default(reactRouterDom.Link)(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n"])));
 var TagWrapper = styled__default.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  font-size: ", "px;\n  font-weight: 500;\n  color: var(--grey-11);\n  padding: 4px 10px;\n\n  ", ";\n\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: 8px;\n\n  ", ";\n\n  ", ";\n\n  ", " {\n    [stroke]{\n      stroke: var(--dimmed);\n    }\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ", ";\n"])), function (_ref) {
@@ -9261,10 +9332,10 @@ var TagWrapper = styled__default.div(_templateObject3$P || (_templateObject3$P =
   return size;
 }, function (_ref2) {
   var noBorder = _ref2.noBorder;
-  return !noBorder && styled.css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n      border: solid 1px var(--grey-8);\n      border-radius: 3px;\n    "])));
+  return !noBorder && styled.css(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n      border: solid 1px var(--grey-8);\n      border-radius: 3px;\n    "])));
 }, function (_ref3) {
   var tagSize = _ref3.tagSize;
-  return tagSize === 'compact' && styled.css(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n    padding: 2px 6px;\n    gap: 4px;\n  "])));
+  return tagSize === 'compact' && styled.css(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n    padding: 2px 6px;\n    gap: 4px;\n  "])));
 }, function (_ref4) {
   var tagSize = _ref4.tagSize;
   return tagSize === 'default' && styled.css(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n    padding: 3px 8px;\n  "])));
@@ -9311,13 +9382,13 @@ var Tag = function Tag(_ref6) {
   }, renderTag()) : renderTag();
 };
 
-var _templateObject$13, _templateObject2$V, _templateObject3$Q, _templateObject4$J, _templateObject5$E, _templateObject6$x;
+var _templateObject$13, _templateObject2$V, _templateObject3$Q, _templateObject4$K, _templateObject5$F, _templateObject6$x;
 var Container$H = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 32px;\n"])));
 var LeftPanel = styled__default.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n"])));
 var IntroductionTextWrapper = styled__default.div(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  max-width: 648px;\n"])));
-var RightPanel = styled__default.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    @media ", " {\n      padding-top: 0px;\n    }\n\n"])), function (_ref) {
+var RightPanel = styled__default.div(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    @media ", " {\n      padding-top: 0px;\n    }\n\n"])), function (_ref) {
   var iconLeftPanel = _ref.iconLeftPanel;
-  return iconLeftPanel && styled.css(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n        padding-top: 32px;\n    "])));
+  return iconLeftPanel && styled.css(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n        padding-top: 32px;\n    "])));
 }, deviceMediaQuery.large);
 var TagListWrapper = styled__default.div(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 5px;\n  margin-top: 29px;\n"])));
 var PageHeader = function PageHeader(_ref2) {
@@ -9373,7 +9444,7 @@ var MultilineContent = function MultilineContent(_ref) {
   }));
 };
 
-var _templateObject$15, _templateObject2$W, _templateObject3$R, _templateObject4$K, _templateObject5$F, _templateObject6$y, _templateObject7$w;
+var _templateObject$15, _templateObject2$W, _templateObject3$R, _templateObject4$L, _templateObject5$G, _templateObject6$y, _templateObject7$w;
 var Container$J = styled__default.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: inherit;\n  background: grey;\n  border-radius: 3px;\n  overflow: hidden;\n  width: 55px;\n  height: auto;\n  opacity: 0.65;\n  margin-right: 10px;\n\n  &::after {\n    content: '';\n    display: block;\n    padding-bottom: 75%;\n    ", "\n  }\n\n  ", "\n\n  &:hover {\n      cursor: pointer;\n\n    ", "\n  }\n\n"])), function (_ref) {
   var aspect = _ref.aspect;
   return aspect === '16:9' && styled.css(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n      padding-left: 56.25%;\n    "])));
@@ -9383,9 +9454,9 @@ var Container$J = styled__default.div(_templateObject$15 || (_templateObject$15
 }, function (_ref3) {
   var theme = _ref3.theme,
     hoverZoom = _ref3.hoverZoom;
-  return theme && hoverZoom && styled.css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n      transform: scale(1.5);\n      opacity: 1;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
+  return theme && hoverZoom && styled.css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["\n      transform: scale(1.5);\n      opacity: 1;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
 });
-var ImageWrapper = styled__default.img(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  display: block;\n"])));
+var ImageWrapper = styled__default.img(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 var NoImageWrapper = styled__default.div(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  height: 41px;\n  width: 55px;\n  object-fit: cover;\n  display: block;\n"])));
 var PlayableDrop = styled__default.div(_templateObject7$w || (_templateObject7$w = _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(_ref4) {
@@ -9512,7 +9583,7 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
   });
 };
 
-var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$d, _templateObject11$9;
+var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$d, _templateObject11$9;
 var CopyToClipboard = styled__default.button(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n\n  cursor: pointer;\n  opacity: 0;\n\n  position: absolute;\n  right: 0;\n  top: 14px;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: none;\n  outline: none;\n\n  ", "\n\n  svg {\n    display: block;\n  }\n\n  &:hover {\n    opacity: 1 !important;\n  }\n\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme && styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n    transition: ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
@@ -9523,7 +9594,7 @@ var CellContainer = styled__default.div(_templateObject3$S || (_templateObject3$
   var theme = _ref2.theme,
     cellStyle = _ref2.cellStyle,
     alignment = _ref2.alignment;
-  return cellStyle === 'firstColumn' ? styled.css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle][alignment]);
+  return cellStyle === 'firstColumn' ? styled.css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.table.columnData[cellStyle][alignment]);
 }, function (_ref3) {
   var hasCopyButton = _ref3.hasCopyButton;
   return hasCopyButton && styled.css(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n    padding-right: 20px;\n  "])));
@@ -9658,7 +9729,7 @@ var TypeTableRow = function TypeTableRow(_ref2) {
   }));
 };
 
-var _templateObject$19, _templateObject2$_, _templateObject3$T, _templateObject4$M;
+var _templateObject$19, _templateObject2$_, _templateObject3$T, _templateObject4$N;
 var HeaderTitle = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  border-bottom-right-radius: 3px;\n  border-top-right-radius: 3px;\n  display: inline-flex;\n  justify-content: center;\n  align-content: center;\n  position: relative;\n  padding: 0 2px;\n  user-select: none;\n  z-index: 99;\n\n  ", " {\n    position: absolute;\n    top: 0px;\n    left: -15px;\n    display: none;\n    border-bottom-left-radius: 3px;\n    border-top-left-radius: 3px;\n    padding: 3px 1px;\n\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), IconWrapper, function (_ref) {
   var ascending = _ref.ascending;
   return ascending && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n      transform: rotate(180deg);\n      border-bottom-right-radius: 3px;\n      border-top-right-radius: 3px;\n      border-bottom-left-radius: 0;\n      border-top-left-radius: 0;\n      top: 0;\n    "])));
@@ -9668,7 +9739,7 @@ var HeaderTitle = styled__default.div(_templateObject$19 || (_templateObject$19
 }, function (_ref3) {
   var styles = _ref3.theme.styles,
     sortable = _ref3.sortable;
-  return sortable && styled.css(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["\n\n    ", ";\n\n    &:hover {\n      cursor: pointer;\n      ", ";\n\n      ", " {\n        ", ";\n        display: inline-flex;\n      }\n    }\n  "])), styles.tables.header.sortable["default"], styles.tables.header.sortable.hover, IconWrapper, styles.tables.header.sortable.hover);
+  return sortable && styled.css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["\n\n    ", ";\n\n    &:hover {\n      cursor: pointer;\n      ", ";\n\n      ", " {\n        ", ";\n        display: inline-flex;\n      }\n    }\n  "])), styles.tables.header.sortable["default"], styles.tables.header.sortable.hover, IconWrapper, styles.tables.header.sortable.hover);
 });
 var TableHeaderTitle = function TableHeaderTitle(_ref4) {
   var header = _ref4.header,
@@ -9695,7 +9766,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
   }), header);
 };
 
-var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$e, _templateObject11$a, _templateObject12$8, _templateObject13$7, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
+var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$e, _templateObject11$a, _templateObject12$9, _templateObject13$8, _templateObject14$7, _templateObject15$5, _templateObject16$4, _templateObject17$4;
 var HeaderRow = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  display: table-row;\n  height: 50px;\n"])));
 var HeaderItem = styled__default.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n  display: table-cell;\n  height: inherit;\n  vertical-align:top;\n  line-height: 20px;\n  position: relative;\n  font-family: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (p) {
   return p.theme.fontFamily.ui;
@@ -9706,7 +9777,7 @@ var HeaderItem = styled__default.div(_templateObject2$$ || (_templateObject2$$ =
   var theme = _ref2.theme,
     alignment = _ref2.alignment,
     headerStyle = _ref2.headerStyle;
-  return alignment ? styled.css(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle]['left']);
+  return alignment ? styled.css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table[headerStyle]['left']);
 }, function (p) {
   return p.fixedWidth && styled.css(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n    width: ", "px;\n  "])), p.fixedWidth);
 }, function (_ref3) {
@@ -9723,12 +9794,12 @@ var TitleItems = styled__default.div(_templateObject9$j || (_templateObject9$j =
   return alignment && styled.css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
 });
 var GroupTitle = styled__default.div(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  margin-bottom: 4px;\n"])));
-var Title$4 = styled__default.div(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding-left: 2px;\n  padding-right: 8px;\n  white-space: nowrap;\n"])), function (_ref6) {
+var Title$4 = styled__default.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding-left: 2px;\n  padding-right: 8px;\n  white-space: nowrap;\n"])), function (_ref6) {
   var typography = _ref6.theme.typography;
-  return styled.css(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
+  return styled.css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
 });
-var EmptyTitle = styled__default.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
-var MiddleLine = styled__default.div(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: 1px;\n  flex: 1;\n  ", ";\n"])), function (_ref7) {
+var EmptyTitle = styled__default.div(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
+var MiddleLine = styled__default.div(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: 1px;\n  flex: 1;\n  ", ";\n"])), function (_ref7) {
   var styles = _ref7.theme.styles;
   return styled.css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), styles.tables.header.groupLine);
 }, function (_ref8) {
@@ -9850,15 +9921,15 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
   }));
 };
 
-var _templateObject$1b, _templateObject2$10, _templateObject3$V, _templateObject4$O, _templateObject5$I;
+var _templateObject$1b, _templateObject2$10, _templateObject3$V, _templateObject4$P, _templateObject5$J;
 var Container$L = styled__default.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose([""])));
 var TableContainer = styled__default.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n  display: table;\n  width: 100%;\n  position: relative;\n"])));
 var LoadingText$1 = styled__default.div(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n  color: var(--grey-a11);\n"])));
-var LoadingBox$1 = styled__default.div(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  background-color: ", ";\n  height: calc(100% - 50px);\n  opacity: 85%;\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 LoadingBox$1 = styled__default.div(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  background-color: ", ";\n  height: calc(100% - 50px);\n  opacity: 85%;\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.colors["pureBase"];
 }, LoadingText$1);
-var EmptyTableBox = styled__default.div(_templateObject5$I || (_templateObject5$I = _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 EmptyTableBox = styled__default.div(_templateObject5$J || (_templateObject5$J = _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,
     _checked = _ref2$_checked === void 0 ? false : _ref2$_checked;
@@ -9952,14 +10023,14 @@ var TypeTable = function TypeTable(_ref4) {
 };
 
 var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
-var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$f;
+var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$f;
 var Container$M = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
 });
 var StyledButton$5 = styled__default(Button)(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
-var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n  color: inherit;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
+var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n  color: inherit;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
 var EditContainer = styled__default.div(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n  min-width: 320px;\n  background-color: var(--grey-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$5, StyledLoadingButton);
 var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose([""])));
 var TextContainer$3 = 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) {
@@ -10379,16 +10450,16 @@ var PTZProvider = function PTZProvider(_ref) {
   }, children);
 };
 
-var _templateObject$1d, _templateObject2$12, _templateObject3$X, _templateObject4$Q, _templateObject5$K;
+var _templateObject$1d, _templateObject2$12, _templateObject3$X, _templateObject4$R, _templateObject5$L;
 var Active = styled__default.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
   return active && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
 var Hover = styled__default.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$N = styled__default.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
+var Container$N = styled__default.g(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n"])));
 var Up = function Up() {
   var _useState = React.useState(false),
     hover = _useState[0],
@@ -10458,16 +10529,16 @@ var Up = function Up() {
   })));
 };
 
-var _templateObject$1e, _templateObject2$13, _templateObject3$Y, _templateObject4$R, _templateObject5$L, _templateObject6$C;
+var _templateObject$1e, _templateObject2$13, _templateObject3$Y, _templateObject4$S, _templateObject5$M, _templateObject6$C;
 var Active$1 = styled__default.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
   return active && styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
 var Hover$1 = styled__default.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$O = styled__default.g(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n"])));
+var Container$O = styled__default.g(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n"])));
 var Arrow$2 = styled__default.g(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n\n"])));
 var Down = function Down() {
   var _useState = React.useState(false),
@@ -10539,16 +10610,16 @@ var Down = function Down() {
   })));
 };
 
-var _templateObject$1f, _templateObject2$14, _templateObject3$Z, _templateObject4$S, _templateObject5$M;
+var _templateObject$1f, _templateObject2$14, _templateObject3$Z, _templateObject4$T, _templateObject5$N;
 var Active$2 = styled__default.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
   return active && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
 var Hover$2 = styled__default.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$P = styled__default.g(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n"])));
+var Container$P = styled__default.g(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n"])));
 var Left = function Left() {
   var _useState = React.useState(false),
     hover = _useState[0],
@@ -10620,16 +10691,16 @@ var Left = function Left() {
   })));
 };
 
-var _templateObject$1g, _templateObject2$15, _templateObject3$_, _templateObject4$T, _templateObject5$N;
+var _templateObject$1g, _templateObject2$15, _templateObject3$_, _templateObject4$U, _templateObject5$O;
 var Active$3 = styled__default.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
   return active && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
 var Hover$3 = styled__default.g(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$Q = styled__default.g(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n"])));
+var Container$Q = styled__default.g(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n"])));
 var Right = function Right() {
   var _useState = React.useState(false),
     hover = _useState[0],
@@ -11514,16 +11585,16 @@ var ZoomBase = function ZoomBase(_ref) {
   })), children));
 };
 
-var _templateObject$1h, _templateObject2$16, _templateObject3$$, _templateObject4$U, _templateObject5$O;
+var _templateObject$1h, _templateObject2$16, _templateObject3$$, _templateObject4$V, _templateObject5$P;
 var Active$4 = styled__default.g(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
   return active && styled.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
 var Hover$4 = styled__default.g(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$R = styled__default.g(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n"])));
+var Container$R = styled__default.g(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n"])));
 var Up$1 = function Up() {
   var _useState = React.useState(false),
     hover = _useState[0],
@@ -11588,16 +11659,16 @@ var Up$1 = function Up() {
   })));
 };
 
-var _templateObject$1i, _templateObject2$17, _templateObject3$10, _templateObject4$V, _templateObject5$P;
+var _templateObject$1i, _templateObject2$17, _templateObject3$10, _templateObject4$W, _templateObject5$Q;
 var Active$5 = styled__default.g(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n\n"])), function (_ref) {
   var active = _ref.active;
   return active && styled.css(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
 var Hover$5 = styled__default.g(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  ", "\n"])), function (_ref2) {
   var hover = _ref2.hover;
-  return hover && styled.css(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["opacity: 1;"])));
+  return hover && styled.css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["opacity: 1;"])));
 });
-var Container$S = styled__default.g(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n"])));
+var Container$S = styled__default.g(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n"])));
 var Up$2 = function Up() {
   var _useState = React.useState(false),
     hover = _useState[0],
@@ -11669,7 +11740,7 @@ var Controls = function Controls(_ref) {
 };
 
 var _excluded$E = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
-var _templateObject$1k, _templateObject2$18, _templateObject3$11, _templateObject4$W, _templateObject5$Q, _templateObject6$D, _templateObject7$A, _templateObject8$s;
+var _templateObject$1k, _templateObject2$18, _templateObject3$11, _templateObject4$X, _templateObject5$R, _templateObject6$D, _templateObject7$A, _templateObject8$s;
 var Container$U = styled__default.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 170px;\n  border-radius: 3px;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  position: relative;\n\n  ", " {\n    height: 100%;\n    width: 100%;\n    text-align: center;\n    img, video {\n      border-radius: 3px;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      height: 100%;\n      width: 100%;\n      object-fit: cover;\n    }\n"])), MediaBoxWrapper);
 var EmptyWithIcon = styled__default.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  ", "\n;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (_ref) {
   var hasPadding = _ref.hasPadding;
@@ -11679,8 +11750,8 @@ var Notice = styled__default.div(_templateObject3$11 || (_templateObject3$11 = _
   var color = _ref2.color;
   return color && "var(--" + color + ")";
 });
-var NoticeMessage = styled__default.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 10px;\n"])), EllipsisStyles);
-var NoticeTitle = styled__default.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 12px;\n"])), EllipsisStyles);
+var NoticeMessage = styled__default.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 10px;\n"])), EllipsisStyles);
+var NoticeTitle = styled__default.div(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n  ", ";\n  max-width: 245px;\n  font-size: 12px;\n"])), EllipsisStyles);
 var NoticeIcon = styled__default.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n  height: 20px;\n  width: 20px;\n  margin-left: 2px;\n\n  ", " {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n"])), IconWrapper);
 var NoticeTextGroup = styled__default.div(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n"])));
 var StatusLine = styled__default.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 3px;\n  width: 100%;\n"])), function (_ref3) {
@@ -11716,14 +11787,14 @@ var MediaStream = function MediaStream(_ref4) {
   }));
 };
 
-var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$X, _templateObject5$R, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$l;
+var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$l;
 var Container$V = styled__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 60px;\n"])));
 var LeftData = styled__default.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  padding: 0 12px 0 12px;\n  display: flex;\n\n  ", " {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (_ref) {
   var hasRightData = _ref.hasRightData;
   return hasRightData && styled.css(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n    border-right: var(--grey-6) 1px solid;\n    width: 195px;\n  "])));
 }, IconWrapper);
-var RightData = styled__default.div(_templateObject4$X || (_templateObject4$X = _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$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n  justify-content: center;\n"])));
+var RightData = styled__default.div(_templateObject4$Y || (_templateObject4$Y = _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$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 14px;\n  justify-content: center;\n"])));
 var LeftTitle = styled__default.div(_templateObject6$E || (_templateObject6$E = _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;";
@@ -11841,15 +11912,15 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
 };
 
 var _excluded$H = ["design", "size", "position", "text"];
-var _templateObject$1p, _templateObject2$1a, _templateObject3$13, _templateObject4$Y, _templateObject5$S, _templateObject6$F;
+var _templateObject$1p, _templateObject2$1a, _templateObject3$13, _templateObject4$Z, _templateObject5$T, _templateObject6$F;
 var Container$W = styled__default.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
 var Title$6 = styled__default.div(_templateObject2$1a || (_templateObject2$1a = _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$2 = styled__default.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
-var LeftButtons = styled__default.div(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n  button {\n    margin: 0 10px 10px 0;\n  }\n"])));
-var RightButtons = styled__default.div(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
+var LeftButtons = styled__default.div(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n  button {\n    margin: 0 10px 10px 0;\n  }\n"])));
+var RightButtons = styled__default.div(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n"])));
 var SelectedResults = styled__default.div(_templateObject6$F || (_templateObject6$F = _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;
@@ -11891,39 +11962,35 @@ var ActionsBar = function ActionsBar(_ref3) {
   }, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
 };
 
-var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$g;
+var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m;
 var WIDTH_PER_NUMBER = 12;
-var PaginationContainer = styled__default.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding-top: 20px;\n  padding-bottom: 20px;\n  width: 100%;\n  height: fit-content;\n  margin-right: 10px;\n  white-space: nowrap;\n  gap: 0 8px;\n  vertical-align: baseline;\n"])));
-var PageLabel = styled__default.label(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-weight: 500px;\n  font-size: 14px;\n  color: var(--grey-10);\n  text-align: left;\n"])));
-var StaticPageCount = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  font-size: 14px;\n  color: var(--grey-8);\n  height: 100%;\n  text-align: left;\n  padding-top: 1px;\n  padding-right: 1px;\n"])));
-var StyledInput$3 = styled__default.input(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n  ", ";\n  color: ", ";\n  max-width: ", ";\n  font-family: var(--font-data);\n  height: 100%;\n  box-sizing: border-box;\n  outline: none;\n  background: transparent;\n  text-align: right;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 25px;\n  border: none;\n  padding-right: ", "px;\n"])), removeAutoFillStyle, function (_ref) {
-  var textColor = _ref.textColor;
-  return textColor;
-}, function (_ref2) {
-  var maxWidth = _ref2.maxWidth;
+var PaginationContainer = styled__default.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding-top: 20px;\n  padding-bottom: 20px;\n  width: 100%;\n  height: fit-content;\n  margin-right: 10px;\n  white-space: nowrap;\n  gap: 40px;\n  vertical-align: baseline;\n"])));
+var StaticPageCount = styled__default.div(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  font-size: 14px;\n  color: var(--grey-8);\n  height: 100%;\n  text-align: left;\n  padding-top: 1px;\n  padding-right: 1px;\n"])));
+var StyledInput$3 = styled__default.input(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  ", ";\n  color: var(--input-color-default);\n  max-width: ", ";\n  font-family: var(--font-data);\n  height: 100%;\n  box-sizing: border-box;\n  outline: none;\n  background: transparent;\n  text-align: right;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 25px;\n  border: none;\n  padding-right: ", "px;\n"])), removeAutoFillStyle, function (_ref) {
+  var maxWidth = _ref.maxWidth;
   return maxWidth ? maxWidth : '40px';
 }, WIDTH_PER_NUMBER / 2);
-var shakeAnimation = styled.keyframes(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n  0% { transform: translateX(0); }\n  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n  20%, 40%, 60%, 80% { transform: translateX(5px); }\n  100% { transform: translateX(0); }\n"])));
-var InputContainer$2 = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  height: var(--input-height, 40px);\n  animation: ", " 150ms 2 linear;\n  flex-grow: 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0 8px;\n  border-radius: 3px;\n  box-shadow: 0 2px 1px 0 rgba(0, 102, 255, 0.04);\n  ", ";\n"])), function (_ref3) {
-  var shouldShake = _ref3.shouldShake;
+var shakeAnimation = styled.keyframes(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  0% { transform: translateX(0); }\n  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n  20%, 40%, 60%, 80% { transform: translateX(5px); }\n  100% { transform: translateX(0); }\n"])));
+var InputContainer$2 = styled__default.div(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n  height: var(--input-height, 40px);\n  animation: ", " 150ms 2 linear;\n  flex-grow: 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0 8px;\n  border-radius: 3px;\n  box-shadow: 0 2px 1px 0 rgba(0, 102, 255, 0.04);\n  ", ";\n"])), function (_ref2) {
+  var shouldShake = _ref2.shouldShake;
   return shouldShake ? shakeAnimation : 'none';
-}, function (_ref4) {
-  var borderColor = _ref4.borderColor;
-  return borderColor && "border: 1px solid " + borderColor;
+}, function (_ref3) {
+  var borderColorState = _ref3.borderColorState;
+  return borderColorState && "border: 1px solid var(--input-" + borderColorState + "-border-color)";
 });
-var GoButton = styled__default(Button)(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  height: 24px;\n  padding: 0 8px;\n  margin-left: 8px;\n"])));
-var ArrowWrapper = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 0 8px;\n"])));
-var ArrowButton = styled__default.button(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 40px;\n  height: 40px;\n  padding: 12px;\n  border-radius: 3px;\n  box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);\n  border: solid 1px var(--grey-9);\n  background-color: var(grey-2);\n  pointer-events: ", ";\n  opacity: ", ";\n\n  &:focus, &:hover {\n    outline: 2px solid #838383;\n  }\n"])), resetButtonStyles, function (_ref5) {
-  var active = _ref5.active;
+var GoButton = styled__default(Button)(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n  height: 24px;\n  padding: 0 8px;\n  margin-left: 8px;\n"])));
+var ArrowWrapper = styled__default.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 0 8px;\n"])));
+var ArrowButton = styled__default.button(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n  ", ";\n  width: 40px;\n  height: 40px;\n  padding: 12px;\n  border-radius: 3px;\n  box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);\n  border: solid 1px var(--input-default-border-color);\n  background-color: var(grey-2);\n  pointer-events: ", ";\n  opacity: ", ";\n\n  &:focus, &:hover {\n    outline: 2px solid #838383;\n  }\n"])), resetButtonStyles, function (_ref4) {
+  var active = _ref4.active;
   return active ? 'auto' : 'none';
-}, function (_ref6) {
-  var active = _ref6.active;
+}, function (_ref5) {
+  var active = _ref5.active;
   return active ? '1' : '0.5';
 });
-var ItemsSelectWrapper = styled__default.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n  ", " {\n    width: ", ";\n  }\n    margin-right: 35px;\n\n  ", " {\n    margin-bottom: 0;\n  }\n"])), SelectWrapper, function (_ref7) {
-  var width = _ref7.width;
+var ItemsSelectWrapper = styled__default.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n  ", " {\n    width: ", ";\n  }\n"])), SelectWrapper, function (_ref6) {
+  var width = _ref6.width;
   return width ? width : "60px";
-}, StyledLabel);
+});
 var Pagination = function Pagination(props) {
   var _props$pageText = props.pageText,
     pageText = _props$pageText === void 0 ? 'Page:' : _props$pageText,
@@ -11977,8 +12044,8 @@ var Pagination = function Pagination(props) {
     }
     return true;
   }, [totalPages]);
-  var onInputChange = React.useCallback(function (_ref8) {
-    var value = _ref8.target.value;
+  var onInputChange = React.useCallback(function (_ref7) {
+    var value = _ref7.target.value;
     setShouldShake(false);
     if (isNotNumber(value)) {
       return;
@@ -11994,8 +12061,8 @@ var Pagination = function Pagination(props) {
       setShouldShake(true);
     }
   }, [isValidInput, totalPages]);
-  var _onBlur = React.useCallback(function (_ref9) {
-    var value = _ref9.target.value;
+  var _onBlur = React.useCallback(function (_ref8) {
+    var value = _ref8.target.value;
     if (value === '') {
       setPageValue(activePage.toString());
     } else if (isValidInput(value) && parseInt(value) !== activePage) {
@@ -12014,8 +12081,8 @@ var Pagination = function Pagination(props) {
       onClickGo();
     }
   };
-  var _onFocus = function onFocus(_ref10) {
-    var value = _ref10.target.value;
+  var _onFocus = function onFocus(_ref9) {
+    var value = _ref9.target.value;
     if (isValidInput(value)) {
       setFieldState('processing');
     } else {
@@ -12023,17 +12090,6 @@ var Pagination = function Pagination(props) {
       setDisabledGo(true);
     }
   };
-  var getStateColor = React.useCallback(function (state) {
-    switch (state) {
-      case 'processing':
-        return 'var(--primary-7)';
-      case 'invalid':
-        return 'var(--warning-8)';
-      case 'default':
-      default:
-        return 'var(--grey-9)';
-    }
-  }, []);
   var onClickGo = React.useCallback(function () {
     onPageChange(parseInt(pageValue));
     inputRef.current && inputRef.current.blur();
@@ -12068,21 +12124,23 @@ var Pagination = function Pagination(props) {
     label: {
       htmlFor: selectId,
       text: itemsText,
-      isSameRow: true
+      direction: 'row'
     },
     defaultValue: itemsDefaultValue ? itemsDefaultValue : itemsOptions[0].value || 1,
     changeCallback: onItemsSelectChange
-  }, React__default.createElement(React.Fragment, null, itemsOptions.map(function (_ref11, index) {
-    var value = _ref11.value,
-      textValue = _ref11.textValue;
+  }, React__default.createElement(React.Fragment, null, itemsOptions.map(function (_ref10, index) {
+    var value = _ref10.value,
+      textValue = _ref10.textValue;
     return React__default.createElement("option", {
       key: index,
       value: value
     }, textValue);
-  })))), React__default.createElement(PageLabel, {
-    htmlFor: 'goButton'
-  }, pageText), React__default.createElement(InputContainer$2, {
-    borderColor: getStateColor(fieldState),
+  })))), React__default.createElement(Label, {
+    labelText: pageText,
+    htmlFor: 'goButton',
+    direction: 'row'
+  }, React__default.createElement(InputContainer$2, {
+    borderColorState: fieldState,
     shouldShake: shouldShake
   }, React__default.createElement(StyledInput$3, {
     ref: inputRef,
@@ -12090,7 +12148,6 @@ var Pagination = function Pagination(props) {
     onChange: function onChange(e) {
       return onInputChange(e);
     },
-    textColor: getStateColor(fieldState),
     onFocus: function onFocus(e) {
       return _onFocus(e);
     },
@@ -12116,7 +12173,7 @@ var Pagination = function Pagination(props) {
     active: fieldState === 'default' && activePage > 1
   }, React__default.createElement(Icon, {
     icon: 'Left',
-    color: 'dimmed',
+    color: 'input-lead-icon',
     size: 8
   })), React__default.createElement(ArrowButton, {
     onClick: function onClick() {
@@ -12126,12 +12183,12 @@ var Pagination = function Pagination(props) {
     active: fieldState === 'default' && activePage < totalPages
   }, React__default.createElement(Icon, {
     icon: 'Right',
-    color: 'dimmed',
+    color: 'input-lead-icon',
     size: 8
-  }))));
+  })))));
 };
 
-var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$_, _templateObject5$U;
+var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$$, _templateObject5$V;
 var Container$X = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose([""])));
 var Title$7 = styled__default.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
   var typography = _ref.theme.typography;
@@ -12141,8 +12198,8 @@ var MessageBox$1 = styled__default.div(_templateObject3$15 || (_templateObject3$
   var typography = _ref2.theme.typography;
   return typography.modal.basicContent;
 });
-var StyledButton$6 = styled__default(Button)(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n"])));
-var ButtonsGroup$1 = styled__default.div(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
+var StyledButton$6 = styled__default(Button)(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n"])));
+var ButtonsGroup$1 = styled__default.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
 var ConfirmationModal = function ConfirmationModal(_ref3) {
   var _ref3$title = _ref3.title,
     title = _ref3$title === void 0 ? '' : _ref3$title,
@@ -12179,60 +12236,100 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
   }, rightButtonText)));
 };
 
-var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$h, _templateObject11$b, _templateObject12$9, _templateObject13$8;
-var Container$Y = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n  max-width: var(--max-content-width);\n  margin-top: var(--utility-header-padding-top);\n  padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n  height: 48px;\n  width: 100%;\n  display: flex;\n"])));
-var LeftArea = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: var(--columnPadding, 16px);\n  flex: 1 0 0;\n"])));
-var BackLinkIcon = styled__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n  flex: 1;  \n  > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
-var BackLink = styled__default(reactRouterDom.Link)(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  padding: 0;\n  align-items: center;\n  gap: 8px;\n  color: var(--grey-10);\n  text-align: center;\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  border: none;\n  background: none;\n  text-decoration: none;\n  transition: color 0.25s ease;\n  margin-left: ", ";\n\n  ", "{\n    svg * {\n      transition: stroke 0.25s ease;\n    }\n  }\n  \n  &:hover {\n    color: var(--grey-12);\n    ", "{\n      svg * {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n  ", "\n"])), function (props) {
-  return props.$iconInGutter ? '-24px' : '0';
-}, BackLinkIcon, BackLinkIcon, function (_ref) {
-  var $showDivider = _ref.$showDivider;
-  return $showDivider && styled.css(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n    &::after {\n      content: '';\n      display: inline-block;\n      height: 12px;\n      width: 1px;\n      padding-left: 8px;\n      border-right: 1px solid var(--grey-10);\n    }\n  "])));
-});
-var ExtraActionIcon = styled__default.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n"])));
-var ExtraAction = styled__default.button(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  padding: 0;\n  align-items: center;\n  gap: 8px;\n  color: var(--grey-10);\n  text-align: center;\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  border: none;\n  background: none;\n  text-decoration: none;\n  transition: color 0.25s ease;\n  cursor: pointer;\n\n  ", "{\n    svg * {\n      transition: stroke 0.25s ease;\n    }\n  }\n  \n  &:hover {\n    color: var(--grey-12);\n    ", "{\n      svg * {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n"])), ExtraActionIcon, ExtraActionIcon);
-var Breadcrumbs = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n"])));
-var Breadcrumb = styled__default.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n"])));
-var BreadcrumbIcon = styled__default.div(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n  flex: 0;\n  display: flex;\n  align-items: center;\n\n  > div {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
-var HomeIcon = styled__default(BreadcrumbIcon)(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n  padding-bottom: 1px;\n  svg path {\n    transition: stroke var(--speed-normal) var(--easing-primary-out);\n  }\n"])));
-var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  flex: 1;\n  color: var(--grey-10);\n  font-family: var(--font-ui);\n  text-decoration: none;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 100% */\n  transition: color var(--speed-normal) var(--easing-primary-out);\n\n  &:hover {\n    color: var(--grey-12);\n    ", " svg {\n      path {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n"])), HomeIcon);
-var RightArea = styled__default.div(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  align-items: center;\n  display: flex;\n  justify-content: right;\n"])));
-var UtilityHeader = function UtilityHeader(_ref2) {
-  var _ref2$showBreadcrumbs = _ref2.showBreadcrumbs,
-    showBreadcrumbs = _ref2$showBreadcrumbs === void 0 ? true : _ref2$showBreadcrumbs,
-    _ref2$breadcrumbs = _ref2.breadcrumbs,
-    breadcrumbs = _ref2$breadcrumbs === void 0 ? [] : _ref2$breadcrumbs,
-    _ref2$showHomeIcon = _ref2.showHomeIcon,
-    showHomeIcon = _ref2$showHomeIcon === void 0 ? true : _ref2$showHomeIcon,
-    backLink = _ref2.backLink,
-    _ref2$$iconInGutter = _ref2.$iconInGutter,
-    $iconInGutter = _ref2$$iconInGutter === void 0 ? true : _ref2$$iconInGutter,
-    _ref2$showShareLink = _ref2.showShareLink,
-    showShareLink = _ref2$showShareLink === void 0 ? false : _ref2$showShareLink,
-    shareLink = _ref2.shareLink;
-  var _useState = React.useState("Share"),
+var _templateObject$1s, _templateObject2$1d;
+var ExtraActionIcon = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n"])));
+var ExtraAction = styled__default.button(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  padding: 0;\n  align-items: center;\n  gap: 8px;\n  color: var(--grey-10);\n  text-align: center;\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  border: none;\n  background: none;\n  text-decoration: none;\n  transition: color 0.25s ease;\n  cursor: pointer;\n\n  ", "{\n    svg * {\n      transition: stroke 0.25s ease;\n    }\n  }\n  \n  &:hover {\n    color: var(--grey-12);\n    ", "{\n      svg * {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n"])), ExtraActionIcon, ExtraActionIcon);
+var UtilityHeaderShare = function UtilityHeaderShare(_ref) {
+  var show = _ref.show,
+    link = _ref.link,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Share' : _ref$label,
+    _ref$copiedLabel = _ref.copiedLabel,
+    copiedLabel = _ref$copiedLabel === void 0 ? 'Copied' : _ref$copiedLabel;
+  var _useState = React.useState(label),
     copyActionText = _useState[0],
     setCopyActionText = _useState[1];
   var _useCopyToClipboard = useCopyToClipboard(),
     copyToClipboard = _useCopyToClipboard.copyToClipboard;
-  var hasBreadcrumbs = showBreadcrumbs && breadcrumbs.length > 0;
   var clickHandlerShareLink = React.useCallback(function () {
-    copyToClipboard(shareLink ? shareLink : window.location.href);
-    setCopyActionText("Copied");
+    copyToClipboard(link ? link : window.location.href);
+    setCopyActionText(copiedLabel);
     setTimeout(function () {
-      return setCopyActionText("Share");
+      return setCopyActionText(copyActionText);
     }, 2000);
-  }, [shareLink, copyToClipboard]);
-  return React__default.createElement(Container$Y, null, React__default.createElement(LeftArea, null, backLink ? React__default.createElement(BackLink, Object.assign({
-    to: backLink,
-    "$showDivider": hasBreadcrumbs
+  }, [link, copiedLabel, copyActionText, copyToClipboard]);
+  React.useEffect(function () {
+    setCopyActionText(label);
+  }, [label]);
+  if (!show) {
+    return null;
+  }
+  return React__default.createElement(ExtraAction, {
+    onClick: clickHandlerShareLink
+  }, React__default.createElement(ExtraActionIcon, null, React__default.createElement(Icon, {
+    icon: "Link",
+    size: 16,
+    color: "grey-10"
+  })), copyActionText);
+};
+
+var _templateObject$1t, _templateObject2$1e, _templateObject3$16;
+var BackLinkIcon = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n  flex: 1;\n  > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+var BackLink = styled__default(reactRouterDom.Link)(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  padding: 0;\n  align-items: center;\n  gap: 8px;\n  color: var(--grey-10);\n  text-align: center;\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  border: none;\n  background: none;\n  text-decoration: none;\n  transition: color 0.25s ease;\n  margin-left: ", ";\n\n  ", "{\n    svg * {\n      transition: stroke 0.25s ease;\n    }\n  }\n\n  &:hover {\n    color: var(--grey-12);\n    ", "{\n      svg * {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n  ", "\n"])), function (props) {
+  return props.$iconInGutter ? '-24px' : '0';
+}, BackLinkIcon, BackLinkIcon, function (_ref) {
+  var $showDivider = _ref.$showDivider;
+  return $showDivider && styled.css(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n    &::after {\n      content: '';\n      display: inline-block;\n      height: 12px;\n      width: 1px;\n      padding-left: 8px;\n      border-right: 1px solid var(--grey-10);\n    }\n  "])));
+});
+var UtilityHeaderBack = function UtilityHeaderBack(_ref2) {
+  var _ref2$show = _ref2.show,
+    show = _ref2$show === void 0 ? true : _ref2$show,
+    link = _ref2.link,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Back' : _ref2$label,
+    $showDivider = _ref2.$showDivider,
+    $iconInGutter = _ref2.$iconInGutter;
+  if (!show) {
+    return null;
+  }
+  return React__default.createElement(BackLink, Object.assign({
+    to: link
   }, {
+    $showDivider: $showDivider,
     $iconInGutter: $iconInGutter
   }), React__default.createElement(BackLinkIcon, null, React__default.createElement(Icon, {
     icon: "Back",
     size: 16,
     color: "grey-10"
-  })), "Back") : null, hasBreadcrumbs ? React__default.createElement(Breadcrumbs, null, breadcrumbs.map(function (breadcrumb, index) {
+  })), label);
+};
+
+var _templateObject$1u, _templateObject2$1f, _templateObject3$17, _templateObject4$10, _templateObject5$W, _templateObject6$H, _templateObject7$D, _templateObject8$v;
+var Container$Y = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n  max-width: var(--max-content-width);\n  margin-top: var(--utility-header-padding-top);\n  padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n  height: 48px;\n  width: 100%;\n  display: flex;\n"])));
+var LeftArea = styled__default.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: var(--columnPadding, 16px);\n  flex: 1 0 0;\n"])));
+var Breadcrumbs = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n"])));
+var Breadcrumb = styled__default.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n"])));
+var BreadcrumbIcon = styled__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  flex: 0;\n  display: flex;\n  align-items: center;\n\n  > div {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+var HomeIcon = styled__default(BreadcrumbIcon)(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n  padding-bottom: 1px;\n  svg path {\n    transition: stroke var(--speed-normal) var(--easing-primary-out);\n  }\n"])));
+var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  flex: 1;\n  color: var(--grey-10);\n  font-family: var(--font-ui);\n  text-decoration: none;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 100% */\n  transition: color var(--speed-normal) var(--easing-primary-out);\n\n  &:hover {\n    color: var(--grey-12);\n    ", " svg {\n      path {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n"])), HomeIcon);
+var RightArea = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  align-items: center;\n  display: flex;\n  justify-content: right;\n"])));
+var UtilityHeader = function UtilityHeader(_ref) {
+  var _ref$showBreadcrumbs = _ref.showBreadcrumbs,
+    showBreadcrumbs = _ref$showBreadcrumbs === void 0 ? true : _ref$showBreadcrumbs,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$showHomeIcon = _ref.showHomeIcon,
+    showHomeIcon = _ref$showHomeIcon === void 0 ? true : _ref$showHomeIcon,
+    back = _ref.back,
+    share = _ref.share,
+    _ref$$iconInGutter = _ref.$iconInGutter,
+    $iconInGutter = _ref$$iconInGutter === void 0 ? true : _ref$$iconInGutter;
+  var hasBreadcrumbs = showBreadcrumbs && breadcrumbs.length > 0;
+  return React__default.createElement(Container$Y, null, React__default.createElement(LeftArea, null, back && React__default.createElement(UtilityHeaderBack, Object.assign({
+    "$showDivider": hasBreadcrumbs
+  }, {
+    $iconInGutter: $iconInGutter
+  }, back)), hasBreadcrumbs ? React__default.createElement(Breadcrumbs, null, breadcrumbs.map(function (breadcrumb, index) {
     var text = breadcrumb.text,
       href = breadcrumb.href;
     var isFirst = index === 0;
@@ -12250,13 +12347,7 @@ var UtilityHeader = function UtilityHeader(_ref2) {
       size: 6,
       color: 'grey-8'
     })) : null));
-  })) : null), React__default.createElement(RightArea, null, showShareLink ? React__default.createElement(ExtraAction, {
-    onClick: clickHandlerShareLink
-  }, React__default.createElement(ExtraActionIcon, null, React__default.createElement(Icon, {
-    icon: "Link",
-    size: 16,
-    color: "grey-10"
-  })), copyActionText) : null));
+  })) : null), React__default.createElement(RightArea, null, React__default.createElement(UtilityHeaderShare, Object.assign({}, share))));
 };
 
 var TabContext = React__default.createContext({
@@ -12276,12 +12367,12 @@ var Tabs = function Tabs(_ref) {
   }, children);
 };
 
-var _templateObject$1t, _templateObject2$1e, _templateObject3$17, _templateObject4$10, _templateObject5$W;
-var Container$Z = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  min-height: 100%;\n  display: flex;\n"])));
-var HeaderArea = styled__default.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: var(--max-content-width);\n  padding: \n    24px\n    var(--content-layout-padding-right)\n    32px\n    var(--content-layout-padding-left);\n  \n"])));
-var TabArea = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  border-bottom: 1px solid var(--grey-4);\n"])));
-var TabAreaInner = styled__default.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n  max-width: var(--max-content-width);\n  flex: 1;\n  width: 100%;\n  padding: \n    0\n    var(--content-layout-padding-right)\n    0\n    var(--content-layout-padding-left);\n"])));
-var Content = styled__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: var(--max-content-width);\n  padding: \n    var(--content-layout-padding-top)\n    var(--content-layout-padding-right)\n    var(--content-layout-padding-bottom)\n    var(--content-layout-padding-left);\n\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n"])));
+var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$11, _templateObject5$X;
+var Container$Z = styled__default.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  min-height: 100%;\n  display: flex;\n"])));
+var HeaderArea = styled__default.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: var(--max-content-width);\n  padding: \n    24px\n    var(--content-layout-padding-right)\n    32px\n    var(--content-layout-padding-left);\n  \n"])));
+var TabArea = styled__default.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  border-bottom: 1px solid var(--grey-4);\n"])));
+var TabAreaInner = styled__default.div(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n  max-width: var(--max-content-width);\n  flex: 1;\n  width: 100%;\n  padding: \n    0\n    var(--content-layout-padding-right)\n    0\n    var(--content-layout-padding-left);\n"])));
+var Content = styled__default.div(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: var(--max-content-width);\n  padding: \n    var(--content-layout-padding-top)\n    var(--content-layout-padding-right)\n    var(--content-layout-padding-bottom)\n    var(--content-layout-padding-left);\n\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n"])));
 var ContentLayout = function ContentLayout(_ref) {
   var _ref$layout = _ref.layout,
     layout = _ref$layout === void 0 ? 'default' : _ref$layout,
@@ -12297,12 +12388,12 @@ var ContentLayout = function ContentLayout(_ref) {
   }, UtilityHeaderOptions ? React__default.createElement(UtilityHeader, Object.assign({}, UtilityHeaderOptions)) : null, PageHeaderArea ? React__default.createElement(HeaderArea, null, PageHeaderArea) : null, TabsElementArea ? React__default.createElement(Tabs, null, React__default.createElement(TabArea, null, React__default.createElement(TabAreaInner, null, TabsElementArea)), React__default.createElement(Content, null, children)) : React__default.createElement(Content, null, children));
 };
 
-var _templateObject$1u, _templateObject2$1f;
-var FullWidthContainer = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n"])), function (_ref) {
+var _templateObject$1w, _templateObject2$1h;
+var FullWidthContainer = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n"])), function (_ref) {
   var $contentHeight = _ref.$contentHeight;
   return $contentHeight + 'px';
 });
-var FullWidthInner = styled__default.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  input {width: 100%;}\n"])));
+var FullWidthInner = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  input {width: 100%;}\n"])));
 var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
   var children = _ref2.children;
   var innerElement = React.useRef(null);
@@ -12321,15 +12412,15 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
   }, children));
 };
 
-var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$11, _templateObject5$X, _templateObject6$I, _templateObject7$E, _templateObject8$w;
-var Inner$1 = styled__default.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 0 0 200px;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"])));
-var Line = styled__default.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n  background: var(--grey-10);\n  flex: 1;\n"])));
-var IconContainer$3 = styled__default.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 20px;\n  svg {\n    path {\n      stroke: var(--grey-11);\n    }\n  }\n"])));
-var IconDefault = styled__default.svg(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n  transform: ", ";\n"])), function (_ref) {
+var _templateObject$1x, _templateObject2$1i, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$I, _templateObject7$E, _templateObject8$w;
+var Inner$1 = styled__default.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 0 0 200px;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"])));
+var Line = styled__default.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n  background: var(--grey-10);\n  flex: 1;\n"])));
+var IconContainer$3 = styled__default.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 20px;\n  svg {\n    path {\n      stroke: var(--grey-11);\n    }\n  }\n"])));
+var IconDefault = styled__default.svg(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n  transform: ", ";\n"])), function (_ref) {
   var $layout = _ref.$layout;
   return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
 });
-var IconArrow = styled__default.svg(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n  transform: rotate(0deg);\n  ", ";\n"])), function (_ref2) {
+var IconArrow = styled__default.svg(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n  transform: rotate(0deg);\n  ", ";\n"])), function (_ref2) {
   var $direction = _ref2.$direction;
   switch ($direction) {
     case 'up':
@@ -12389,14 +12480,14 @@ var ResizeLine = function ResizeLine(_ref4) {
   }))), React__default.createElement(Line, null)));
 };
 
-var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$i, _templateObject11$c, _templateObject12$a, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
-var DebugData = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 10;\n  bottom: 20px;\n  left: 20px;\n  background: #ededed99;\n  border: grey 1px solid;\n  padding: 20px;\n  line-height: 20px;\n  font-size: 12px;\n  div {\n    display: block;\n  }\n  span {\n    display: inline-block;\n    width: 130px;\n    font-weight: 600;\n  }\n"])));
-var MainArea = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex: 1;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$n, _templateObject10$g, _templateObject11$b, _templateObject12$a, _templateObject13$9, _templateObject14$8, _templateObject15$6, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
+var DebugData = styled__default.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 10;\n  bottom: 20px;\n  left: 20px;\n  background: #ededed99;\n  border: grey 1px solid;\n  padding: 20px;\n  line-height: 20px;\n  font-size: 12px;\n  div {\n    display: block;\n  }\n  span {\n    display: inline-block;\n    width: 130px;\n    font-weight: 600;\n  }\n"])));
+var MainArea = styled__default.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex: 1;\n\n  ", "\n"])), function (_ref) {
   var $layout = _ref.$layout,
     $minDimension = _ref.$minDimension;
-  return $layout === 'vertical' ? styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
+  return $layout === 'vertical' ? styled.css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
 });
-var SideAreaInner = styled__default.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  height: 100%;\n  transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
+var SideAreaInner = styled__default.div(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  height: 100%;\n  transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
 var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex: 0 0 ", "px;\n  display: ", ";\n  transition: \n    min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n    min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n  \n  ", "\n\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), function (_ref2) {
   var $defaultSize = _ref2.$defaultSize;
   return $defaultSize;
@@ -12412,15 +12503,15 @@ var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _
   var $layout = _ref5.$layout,
     $collapseState = _ref5.$collapseState,
     $minDimension = _ref5.$minDimension;
-  return $collapseState === 'collapsing' ? styled.css(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n      transition: none;\n      ", ";\n      ", "{\n        flex: 0 0 ", "px;\n        min-width: ", "px;\n        opacity: 0.5;\n      }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
+  return $collapseState === 'collapsing' ? styled.css(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n      transition: none;\n      ", ";\n      ", "{\n        flex: 0 0 ", "px;\n        min-width: ", "px;\n        opacity: 0.5;\n      }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
 }, function (_ref6) {
   var $collapseState = _ref6.$collapseState;
-  return $collapseState === 'collapsed' ? styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n      ", "{\n        display: none;\n      }\n    "])), SideAreaInner) : null;
+  return $collapseState === 'collapsed' ? styled.css(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n      ", "{\n        display: none;\n      }\n    "])), SideAreaInner) : null;
 }, function (_ref7) {
   var $layout = _ref7.$layout,
     $collapseState = _ref7.$collapseState,
     $minDimension = _ref7.$minDimension;
-  return $collapseState === 'peeking' ? styled.css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", "{\n        min-width: ", "px;\n        opacity: 0.5;\n      }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
+  return $collapseState === 'peeking' ? styled.css(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", "{\n        min-width: ", "px;\n        opacity: 0.5;\n      }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
 }, function (_ref8) {
   var $layout = _ref8.$layout,
     $collapseState = _ref8.$collapseState,
@@ -12432,7 +12523,7 @@ var DragContainer = styled__default.div(_templateObject13$9 || (_templateObject1
   return $size;
 }, function (_ref10) {
   var $fauxHover = _ref10.$fauxHover;
-  return $fauxHover === 'false' ? styled.css(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n    > div {\n      opacity: 0.6;\n    }\n  "]))) : styled.css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n    > div {\n      opacity: 1;\n    }\n  "])));
+  return $fauxHover === 'false' ? styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n    > div {\n      opacity: 0.6;\n    }\n  "]))) : styled.css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n    > div {\n      opacity: 1;\n    }\n  "])));
 });
 var Container$$ = styled__default.section(_templateObject16$5 || (_templateObject16$5 = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  display: flex;\n  flex:1;\n  flex-direction: row;\n  overflow: hidden;\n\n  transition: opacity 0.25s cubic-bezier(0.45, 0, 0.55, 1);\n  opacity: 0;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref11) {
   var $initialised = _ref11.$initialised;
@@ -12727,16 +12818,16 @@ var clampInt = function clampInt(value, lower, upper) {
   return clampedInt;
 };
 
-var _templateObject$1x, _templateObject2$1i, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$K, _templateObject7$G;
+var _templateObject$1z, _templateObject2$1k, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$K, _templateObject7$G;
 var MOBILE_CLOSE_HEIGHT = 50;
 var MOBILE_NAVBAR_HEIGHT = 68;
-var Layout = styled__default.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var MobileLayout = styled__default.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose([""])));
-var Content$1 = styled__default.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  flex: 1;\n  overflow: auto;\n\n  & > div {\n    max-width: 1400px;\n  }\n\n  ", "\n"])), function (_ref) {
+var Layout = styled__default.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var MobileLayout = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose([""])));
+var Content$1 = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  flex: 1;\n  overflow: auto;\n\n  & > div {\n    max-width: 1400px;\n  }\n\n  ", "\n"])), function (_ref) {
   var maxWidth = _ref.maxWidth;
-  return maxWidth && styled.css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n      & > div {\n        max-width: ", ";\n      }\n    "])), maxWidth);
+  return maxWidth && styled.css(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n      & > div {\n        max-width: ", ";\n      }\n    "])), maxWidth);
 });
-var MainContainer = styled__default.div(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"])));
+var MainContainer = styled__default.div(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n"])));
 var ContentArea = styled__default.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n\n  ", "\n"])), function (_ref2) {
   var legacyLayout = _ref2.legacyLayout,
     paddingOverride = _ref2.paddingOverride,
@@ -12744,33 +12835,33 @@ var ContentArea = styled__default.div(_templateObject6$K || (_templateObject6$K
   return legacyLayout && styled.css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n    padding: ", ";\n\n    @media ", " {\n      padding: ", ";\n    }\n\n    @media ", " {\n      max-width: ", ";\n      padding: ", ";\n    }\n  "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
 });
 
-var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$a, _templateObject14$8, _templateObject15$6;
-var ContextTitle = styled__default.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref) {
+var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$o, _templateObject10$h, _templateObject11$c, _templateObject12$b, _templateObject13$a, _templateObject14$9, _templateObject15$7;
+var ContextTitle = styled__default.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref) {
   var compact = _ref.compact;
-  return compact && styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
+  return compact && styled.css(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
 });
-var ContextIcon$1 = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n  background-color: var(--global-menu-icon-background-default);\n  transition: background-color var(--speed-fast) var(--easing-primary-out);\n    \n  flex: 0 0 40px;\n  width: 40px;\n  height: 40px;\n  margin: 0 20px;\n\n  border-radius: 7px;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  svg {\n    display: block;\n  }\n"])));
-var ContextIndicator = styled__default.div(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n  width: 12px;\n  height: 12px;\n  flex: 0 0 14px;\n  margin: 0 20px 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  \n  opacity: 0;\n  transition: opacity 0 var(--easing-primary-out);\n\n  svg {\n    display: block;\n    height: 12px;\n    width: 12px;\n  }\n"])));
-var ContextActionBaseCSS$1 = styled.css(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  background: none;\n  display: flex;\n  justify-content:left;\n  align-items:center;\n  flex-wrap: wrap;\n  cursor: pointer;\n  width: 100%;\n  outline: none;\n  padding: 0;\n  text-decoration: none;\n  font-family: var(--font-ui);\n  font-weight: 500;\n  font-size: 16px;\n  color: var(--grey-11);\n\n  &:hover{\n    color: var(--grey-12);\n  }\n"])));
+var ContextIcon$1 = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n  background-color: var(--global-menu-icon-background-default);\n  transition: background-color var(--speed-fast) var(--easing-primary-out);\n    \n  flex: 0 0 40px;\n  width: 40px;\n  height: 40px;\n  margin: 0 20px;\n\n  border-radius: 7px;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n\n  svg {\n    display: block;\n  }\n"])));
+var ContextIndicator = styled__default.div(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n  width: 12px;\n  height: 12px;\n  flex: 0 0 14px;\n  margin: 0 20px 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  \n  opacity: 0;\n  transition: opacity 0 var(--easing-primary-out);\n\n  svg {\n    display: block;\n    height: 12px;\n    width: 12px;\n  }\n"])));
+var ContextActionBaseCSS$1 = styled.css(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  background: none;\n  display: flex;\n  justify-content:left;\n  align-items:center;\n  flex-wrap: wrap;\n  cursor: pointer;\n  width: 100%;\n  outline: none;\n  padding: 0;\n  text-decoration: none;\n  font-family: var(--font-ui);\n  font-weight: 500;\n  font-size: 16px;\n  color: var(--grey-11);\n\n  &:hover{\n    color: var(--grey-12);\n  }\n"])));
 var StyledAnchor = styled__default.a(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  text-decoration: none;\n"])));
 var ExternalIconWrapper = styled__default.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
 var ContextWrapper = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n"])), ContextActionBaseCSS$1, function (_ref2) {
   var $menuOpen = _ref2.$menuOpen;
-  return $menuOpen && styled.css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n  ", "{\n    opacity: 1;\n  }\n"])), ContextTitle);
+  return $menuOpen && styled.css(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n  ", "{\n    opacity: 1;\n  }\n"])), ContextTitle);
 }, ContextIcon$1, IconWrapper);
-var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
+var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
   var $menuOpen = _ref3.$menuOpen;
-  return $menuOpen && styled.css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
+  return $menuOpen && styled.css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
 }, ContextIcon$1, IconWrapper, function (_ref4) {
   var $isActive = _ref4.$isActive;
   return $isActive && styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n    color: var(--grey-12);\n\n    ", ",\n    &:hover ", "{\n      background-color: var(--global-menu-icon-background-active);\n    }\n  "])), ContextIcon$1, ContextIcon$1);
 });
 var ContextActionButton$1 = styled__default.button(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
   var menuOpen = _ref5.menuOpen;
-  return menuOpen && styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n\n    ", "{\n      opacity: 1;\n      transition: opacity var(--speed-normal) var(--easing-primary-in-out) var(--speed-fast);\n    }\n  "])), ContextTitle, ContextIndicator);
+  return menuOpen && styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n\n    ", "{\n      opacity: 1;\n      transition: opacity var(--speed-normal) var(--easing-primary-in-out) var(--speed-fast);\n    }\n  "])), ContextTitle, ContextIndicator);
 }, ContextIcon$1, IconWrapper, function (_ref6) {
   var isActive = _ref6.isActive;
-  return isActive && styled.css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      background-color: var(--global-menu-icon-background-active);\n    }\n  "])), ContextIcon$1, ContextIcon$1);
+  return isActive && styled.css(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n    ", ",\n    &:hover ", "{\n      background-color: var(--global-menu-icon-background-active);\n    }\n  "])), ContextIcon$1, ContextIcon$1);
 });
 var ContextItem = function ContextItem(_ref7) {
   var _ref7$hasSubmenu = _ref7.hasSubmenu,
@@ -12943,19 +13034,19 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
   };
 };
 
-var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$b;
-var Submenu = styled__default.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
-var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
-var SubmenuContainerInner = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n"])));
-var SubmenuItemTitle = styled__default.span(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-family: var(--font-ui);\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.35px;\n  color: var(--grey-11);\n"])));
-var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
+var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$p, _templateObject10$i, _templateObject11$d, _templateObject12$c, _templateObject13$b;
+var Submenu = styled__default.ul(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
+var SubmenuHeader = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
+var SubmenuContainerInner = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n"])));
+var SubmenuItemTitle = styled__default.span(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-family: var(--font-ui);\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.35px;\n  color: var(--grey-11);\n"])));
+var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
 var ExternalIconWrapper$1 = styled__default.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
 var SubmenuItemAnchor = styled__default.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
 var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 30px;\n  padding-left: 40px;\n  position: relative;\n\n  &::after {\n    display: block;\n    content: '';\n    height: 1px;\n    width: 14px;\n    position: absolute;\n    left: 0;\n    top: 10px;\n    background: var(--dividing-line);\n  }\n\n  ", ", ", "{\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 400;\n    text-decoration: none;\n    color: var(--grey-11);\n\n    ", ";\n\n  }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
   var isActive = _ref.isActive;
-  return styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && styled.css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
+  return styled.css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
 });
-var SubmenuContainer = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  transition:\n    grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n    opacity var(--speed-fast) var(--easing-primary-in-out);\n\n  &::after {\n    display: block;\n    content: '';\n    width: 1px;\n    position: absolute;\n    left: 40px;\n    top: 0;\n    bottom: 35px;\n    background: var(--dividing-line);\n  }\n\n"])));
+var SubmenuContainer = styled__default.div(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  transition:\n    grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n    opacity var(--speed-fast) var(--easing-primary-in-out);\n\n  &::after {\n    display: block;\n    content: '';\n    width: 1px;\n    position: absolute;\n    left: 40px;\n    top: 0;\n    bottom: 35px;\n    background: var(--dividing-line);\n  }\n\n"])));
 var ContextContainer = styled__default.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n  width: inherit;\n\n  ", "{\n    display: grid;\n    grid-template-rows: 0fr;\n  };\n\n  ", ";\n"])), function (_ref2) {
   var mobileMenu = _ref2.mobileMenu;
   return mobileMenu ? '30px' : '70px';
@@ -13052,25 +13143,25 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
   return output;
 };
 
-var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$c, _templateObject14$9;
-var Logo = styled__default(reactRouterDom.Link)(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  margin: 0 20px 55px 15px;\n  display: flex;\n\n  object {\n    pointer-events: none;\n  }\n"])));
-var LogoMark = styled__default.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  flex: 0 0 50px;\n  margin-right: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n"])));
-var LogoType = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  flex: 1;\n  height: 50px;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n"])));
-var SVGObject = styled__default.object(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose([""])));
-var SVGObjectText = styled__default.object(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n  max-width: 180px;\n"])));
+var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$q, _templateObject10$j, _templateObject11$e, _templateObject12$d, _templateObject13$c, _templateObject14$a;
+var Logo = styled__default(reactRouterDom.Link)(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  margin: 0 20px 55px 15px;\n  display: flex;\n\n  object {\n    pointer-events: none;\n  }\n"])));
+var LogoMark = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  flex: 0 0 50px;\n  margin-right: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n"])));
+var LogoType = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  flex: 1;\n  height: 50px;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n"])));
+var SVGObject = styled__default.object(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose([""])));
+var SVGObjectText = styled__default.object(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n  max-width: 180px;\n"])));
 var NavigationContainer = styled__default.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose([""])));
 var MenuFooter = styled__default.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n  background: var(--global-element-background);\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: flex-end;\n"])));
 var FooterItemContainer = styled__default.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n  min-height: 70px;\n"])));
-var PushContainer = styled__default.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 100%;\n  ", ";\n"])), function (_ref) {
+var PushContainer = styled__default.div(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 100%;\n  ", ";\n"])), function (_ref) {
   var isPinned = _ref.isPinned;
-  return styled.css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n    width: ", ";\n  "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
+  return styled.css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n    width: ", ";\n  "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
 });
-var Container$10 = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0;\n  ", "\n\n  box-sizing: border-box;\n  height: 100%;\n  padding: 20px 0 0 0;\n  overflow: hidden;\n"])), function (_ref2) {
+var Container$10 = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0;\n  ", "\n\n  box-sizing: border-box;\n  height: 100%;\n  padding: 20px 0 0 0;\n  overflow: hidden;\n"])), function (_ref2) {
   var open = _ref2.open,
     desktopSize = _ref2.desktopSize;
   return styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n    background-color: var(--global-element-background);\n    box-shadow: 0px 0px 7px 0px var(--primary-a2);\n    width: ", ";\n    border-right: 1px solid var(--dividing-line);\n\n    ", ";\n\n    ", "{\n      transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n      opacity: ", ";\n    }\n  "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n      transition: width var(--speed-normal) var(--easing-primary-in);\n    "]))), LogoType, open ? 1 : 0);
 });
-var ContainerInner = styled__default.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n  width: var(--global-menu-width-open);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var ContainerInner = styled__default.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n  width: var(--global-menu-width-open);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var MainMenu = function MainMenu(_ref3) {
   var content = _ref3.content,
     _ref3$home = _ref3.home,
@@ -13168,17 +13259,17 @@ var MainMenu = function MainMenu(_ref3) {
   })) : null))), document.body));
 };
 
-var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$m;
-var MetaConatiner = styled__default.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n  margin: 10px 10px;\n  border: 1px solid var(--grey-3);\n  background-color: var(--grey-a2);\n  border-radius: 5px;\n  &:active {\n    box-shadow: 4px 4px var(--grey-a2);\n  }\n"])));
-var LabelTitle = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n  max-width: 130px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  opacity: 0.76;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-11);\n  font-family: var(--font-ui);\n  margin-top: 2px;\n"])));
-var LabelContent = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n  font-size: 10px;\n  padding-left: 10px;\n  max-width: 200px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 4px 0 5px 0;\n  white-space: nowrap;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-8);\n"])));
-var LabelNotes = styled__default.div(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  max-width: 200px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 0 8px 0;\n  max-height: 23px;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-8);\n  font-family: var(--font-data);\n"])));
-var TitleContainer = styled__default.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap:6px;\n  flex-direction: row;\n  align-items: center;\n  margin-left: 10px;\n  margin: 3px 0 5px 10px;\n"])));
+var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$r, _templateObject10$k;
+var MetaConatiner = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n  margin: 10px 10px;\n  border: 1px solid var(--grey-3);\n  background-color: var(--grey-a2);\n  border-radius: 5px;\n  &:active {\n    box-shadow: 4px 4px var(--grey-a2);\n  }\n"])));
+var LabelTitle = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n  max-width: 130px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  opacity: 0.76;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-11);\n  font-family: var(--font-ui);\n  margin-top: 2px;\n"])));
+var LabelContent = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n  font-size: 10px;\n  padding-left: 10px;\n  max-width: 200px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 4px 0 5px 0;\n  white-space: nowrap;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-8);\n"])));
+var LabelNotes = styled__default.div(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  max-width: 200px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 0 8px 0;\n  max-height: 23px;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-8);\n  font-family: var(--font-data);\n"])));
+var TitleContainer = styled__default.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap:6px;\n  flex-direction: row;\n  align-items: center;\n  margin-left: 10px;\n  margin: 3px 0 5px 10px;\n"])));
 var Container$11 = styled__default.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
 var TitleBox = styled__default.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var IconBox = styled__default.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n  padding: 1px 5px 0 0;\n  opacity: 0;\n  ", ":hover & {\n    opacity: 1;\n    cursor: pointer;\n  }\n"])), Container$11);
-var CopyTextBox = styled__default.pre(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n  padding: 5px;\n  font-size: 10px;\n  line-height: 1.2;\n  box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n  border: 1px solid var(--grey-8);\n  background-color: var(--grey-2);\n  border-radius: 5px;\n  opacity: 0.76;\n  font-weight: 500;\n  color: var(--grey-11);\n  position: absolute;\n  max-width: 170px;\n  white-space: pre-wrap;\n  font-family: var(--font-data);\n  right:10px;\n  margin-top: -23px;\n"])));
-var CopyBox = styled__default.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n"])));
+var CopyTextBox = styled__default.pre(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n  padding: 5px;\n  font-size: 10px;\n  line-height: 1.2;\n  box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n  border: 1px solid var(--grey-8);\n  background-color: var(--grey-2);\n  border-radius: 5px;\n  opacity: 0.76;\n  font-weight: 500;\n  color: var(--grey-11);\n  position: absolute;\n  max-width: 170px;\n  white-space: pre-wrap;\n  font-family: var(--font-data);\n  right:10px;\n  margin-top: -23px;\n"])));
+var CopyBox = styled__default.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n"])));
 var UserDrawerMeta = function UserDrawerMeta(_ref) {
   var item = _ref.item,
     onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
@@ -13241,11 +13332,11 @@ var UserDrawerMeta = function UserDrawerMeta(_ref) {
   }, notes) : null)));
 };
 
-var _templateObject$1C, _templateObject2$1n, _templateObject3$1f, _templateObject4$18;
-var Container$12 = styled__default.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n  padding: 16px 10px 14px 23px;\n  display: flex;\n  flex-direction: row;\n  border-top: 1px solid var(--dividing-line);\n  align-items: center;\n  cursor: pointer;\n  svg {\n    margin-top: 7px;\n  }\n"])));
-var ColumnContainer = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  padding-left: 14px;\n  align-items: flex-start;\n"])));
-var Title$8 = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n  opacity: 0.76;\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.34px;\n  color: var(--grey-11);\n"])));
-var SubTitle$1 = styled__default.div(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-11);\n  padding-top: 2px;\n  opacity: 0.5;\n"])));
+var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObject4$19;
+var Container$12 = styled__default.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n  padding: 16px 10px 14px 23px;\n  display: flex;\n  flex-direction: row;\n  border-top: 1px solid var(--dividing-line);\n  align-items: center;\n  cursor: pointer;\n  svg {\n    margin-top: 7px;\n  }\n"])));
+var ColumnContainer = styled__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  padding-left: 14px;\n  align-items: flex-start;\n"])));
+var Title$8 = styled__default.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n  opacity: 0.76;\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.34px;\n  color: var(--grey-11);\n"])));
+var SubTitle$1 = styled__default.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-11);\n  padding-top: 2px;\n  opacity: 0.5;\n"])));
 var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
   var _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
@@ -13262,26 +13353,26 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
   }), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
 };
 
-var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$n, _templateObject11$g, _templateObject12$e, _templateObject13$d, _templateObject14$a;
-var DrawerTop = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
-var DrawerBottom = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: fixed;\n  bottom: 50px;\n  @media ", " {\n    position: static;\n    bottom: 0;\n  }\n"])), deviceMediaQuery.medium);
-var DrawerHeader = styled__default.h2(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.35px;\n  color: var(--grey-11);\n  padding: 0;\n  margin: 0 0 5px;\n"])));
-var CurrentUser = styled__default.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 15px;\n  border-bottom: var(--dividing-line) 1px solid;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
-var UserOptions = styled__default.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  border-bottom: var(--dividing-line) 1px solid;\n"])));
+var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$s, _templateObject10$l, _templateObject11$f, _templateObject12$e, _templateObject13$d, _templateObject14$b;
+var DrawerTop = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose([""])));
+var DrawerBottom = styled__default.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: fixed;\n  bottom: 50px;\n  @media ", " {\n    position: static;\n    bottom: 0;\n  }\n"])), deviceMediaQuery.medium);
+var DrawerHeader = styled__default.h2(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.35px;\n  color: var(--grey-11);\n  padding: 0;\n  margin: 0 0 5px;\n"])));
+var CurrentUser = styled__default.div(_templateObject4$1a || (_templateObject4$1a = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 15px;\n  border-bottom: var(--dividing-line) 1px solid;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
+var UserOptions = styled__default.div(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n  padding: 20px 20px 10px 20px;\n  border-bottom: var(--dividing-line) 1px solid;\n"])));
 var Logout = styled__default.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n    padding: 0 20px;\n"])));
 var LinkMenu = styled__default.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 12px 0 0 0;\n  list-style: none;\n"])));
 var LinkMenuItem = styled__default.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n"])));
-var IconWrapperFooter = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\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  padding-right: 20px;\n"])));
-var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--grey-10);\n  text-decoration: none;\n\n  &:hover {\n    color: var(--primary-9);\n  }\n\n  ", ";\n"])), resetButtonStyles, function (_ref) {
+var IconWrapperFooter = styled__default.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\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  padding-right: 20px;\n"])));
+var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--grey-10);\n  text-decoration: none;\n\n  &:hover {\n    color: var(--primary-9);\n  }\n\n  ", ";\n"])), resetButtonStyles, function (_ref) {
   var isActive = _ref.isActive;
-  return isActive && styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      color: var(--primary-9);\n    }\n  "])));
+  return isActive && styled.css(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      color: var(--primary-9);\n    }\n  "])));
 });
 var FooterMeta = styled__default.div(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  border-top: var(--dividing-line) 1px solid;\n  margin-top: auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-size: 10px;\n  font-weight: 400;\n  color: var(--grey-a11);\n  padding: 10px;\n  padding-left:  ", ";\n"])), function (_ref2) {
   var icon = _ref2.icon;
   return icon !== '' ? '31px;' : '21px;';
 });
 var NavigationContainer$1 = styled__default.div(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n  max-height: 300px;\n  overflow: scroll;\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-bottom: var(--dividing-line) 1px solid;\n"])));
-var FooterText = styled__default.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 136px;\n  max-width: ", ";\n  color: var(--grey-11);\n  opacity: 0.5;\n"])), function (_ref3) {
+var FooterText = styled__default.div(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 136px;\n  max-width: ", ";\n  color: var(--grey-11);\n  opacity: 0.5;\n"])), function (_ref3) {
   var icon = _ref3.icon;
   return icon !== '' ? '136px;' : '164px;';
 });
@@ -13396,16 +13487,16 @@ var UserMenu = function UserMenu(_ref4) {
   }, title)) : null));
 };
 
-var _templateObject$1E, _templateObject2$1p, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$Q, _templateObject7$M, _templateObject8$D;
-var Container$13 = styled__default.div(_templateObject$1E || (_templateObject$1E = _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$1p || (_templateObject2$1p = _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$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n  background-color: var(--grey-5);\n  width: 100%;\n  height: 100%;\n"])));
-var Image$2 = styled__default.div(_templateObject4$1a || (_templateObject4$1a = _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 _templateObject$1G, _templateObject2$1r, _templateObject3$1i, _templateObject4$1b, _templateObject5$14, _templateObject6$Q, _templateObject7$M, _templateObject8$D;
+var Container$13 = styled__default.div(_templateObject$1G || (_templateObject$1G = _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$1r || (_templateObject2$1r = _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$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n  background-color: var(--grey-5);\n  width: 100%;\n  height: 100%;\n"])));
+var Image$2 = styled__default.div(_templateObject4$1b || (_templateObject4$1b = _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$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
+var InfoContainer = styled__default.div(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
 var Title$9 = styled__default.div(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--grey-11);\n"])));
 var Message = styled__default.div(_templateObject7$M || (_templateObject7$M = _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$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--grey-12);\n  margin-top: 15px;\n"])));
@@ -13419,10 +13510,10 @@ var NotificationItem = function NotificationItem(_ref) {
   }) : React__default.createElement(EmptyImg, null)), React__default.createElement(InfoContainer, null, React__default.createElement(Title$9, null, title), React__default.createElement(Message, null, message), React__default.createElement(TimeMsg, null, time)));
 };
 
-var _templateObject$1F, _templateObject2$1q, _templateObject3$1i;
-var Container$14 = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var StatusContainer = styled__default.h2(_templateObject2$1q || (_templateObject2$1q = _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: var(--dividing-line) 1px solid;\n    margin: 0;\n"])));
-var NotificationWrapper = styled__default.div(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--dividing-line) 1px solid;\n"])));
+var _templateObject$1H, _templateObject2$1s, _templateObject3$1j;
+var Container$14 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var StatusContainer = styled__default.h2(_templateObject2$1s || (_templateObject2$1s = _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: var(--dividing-line) 1px solid;\n    margin: 0;\n"])));
+var NotificationWrapper = styled__default.div(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--dividing-line) 1px solid;\n"])));
 var renderNotifications = function renderNotifications(items, type) {
   return items.map(function (item, index) {
     return React__default.createElement(NotificationWrapper, {
@@ -13445,20 +13536,20 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
   return React__default.createElement(Container$14, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
 };
 
-var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$e;
-var CoreStyle = styled.css(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 32px;\n  padding: 8px;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 8px;\n  border-radius: 3px;\n\n  font-family: Lato;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 85.714% */\n  white-space: nowrap;\n\n  transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
-var ContainerStatic = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), CoreStyle, function (_ref) {
+var _templateObject$1I, _templateObject2$1t, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$t, _templateObject10$m, _templateObject11$g, _templateObject12$f, _templateObject13$e;
+var CoreStyle = styled.css(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 32px;\n  padding: 8px;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 8px;\n  border-radius: 3px;\n\n  font-family: Lato;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 85.714% */\n  white-space: nowrap;\n\n  transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
+var ContainerStatic = styled__default.div(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), CoreStyle, function (_ref) {
   var themeColor = _ref.themeColor;
-  return themeColor ? styled.css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--", "-9);\n    color: var(--", "-11);\n  "])), themeColor, themeColor) : styled.css(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--info-9);\n    color: var(--info-11);\n  "])));
+  return themeColor ? styled.css(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--", "-9);\n    color: var(--", "-11);\n  "])), themeColor, themeColor) : styled.css(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--info-9);\n    color: var(--info-11);\n  "])));
 });
-var DefaultText = styled__default.span(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
+var DefaultText = styled__default.span(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
 var LinkText = styled__default.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
 var ContainerLinked = styled__default.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n  a {\n    ", ";\n\n    text-decoration: none;\n\n    ", ";\n\n    &:hover {\n      ", ";\n    }\n  }\n"])), CoreStyle, function (_ref2) {
   var themeColor = _ref2.themeColor;
-  return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n      background-color: transparent;\n      border: 2px solid var(--", "-9);\n      color: var(--", "-11);\n    "])), themeColor, themeColor) : styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n      background-color: transparent;\n      border: 2px solid var(--info-9);\n      color: var(--info-11);\n    "])));
+  return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n      background-color: transparent;\n      border: 2px solid var(--", "-9);\n      color: var(--", "-11);\n    "])), themeColor, themeColor) : styled.css(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n      background-color: transparent;\n      border: 2px solid var(--info-9);\n      color: var(--info-11);\n    "])));
 }, function (_ref3) {
   var themeColor = _ref3.themeColor;
-  return themeColor ? styled.css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n        background-color: var(--", "-9);\n        border: 2px solid var(--", "-9);\n        color: var(--white-12);\n      "])), themeColor, themeColor) : styled.css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n        background-color: var(--info-9);\n        border: 2px solid var(--info-9);\n        color: var(--white-12);\n      "])));
+  return themeColor ? styled.css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n        background-color: var(--", "-9);\n        border: 2px solid var(--", "-9);\n        color: var(--white-12);\n      "])), themeColor, themeColor) : styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n        background-color: var(--info-9);\n        border: 2px solid var(--info-9);\n        color: var(--white-12);\n      "])));
 });
 var Container$15 = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
   var ready = _ref4.ready,
@@ -13530,22 +13621,22 @@ var TopBarBadge = function TopBarBadge(_ref5) {
   }), badgeComponent);
 };
 
-var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$f;
-var Container$16 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n  z-index: 9;\n  position: sticky;\n  top: 0;\n  height: 56px;\n  padding: 0 16px 0 24px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-self: flex-start;\n  border-bottom: 1px solid var(--dividing-line);\n  background: var(--grey-2);\n  box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
-var RightArea$1 = styled__default.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  height: 100%;\n"])));
-var SearchBar = styled__default.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"])));
-var IconWrapper$4 = styled__default.div(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n  flex: 0;\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"])));
-var SearchInput = styled__default.input(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: var(--font-data);\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n  background: transparent;  \n  color: var(--grey-10);\n  font-size: 14px;\n\n  &::placeholder {\n    font-family: var(--font-data);\n    font-weight: 400;\n    font-style: italic;\n    font-size: 14px;\n    color: var(--grey-8);\n  }\n"])), removeAutoFillStyle);
+var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$u, _templateObject10$n, _templateObject11$h, _templateObject12$g, _templateObject13$f;
+var Container$16 = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n  z-index: 9;\n  position: sticky;\n  top: 0;\n  height: 56px;\n  padding: 0 16px 0 24px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-self: flex-start;\n  border-bottom: 1px solid var(--dividing-line);\n  background: var(--grey-2);\n  box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
+var RightArea$1 = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  height: 100%;\n"])));
+var SearchBar = styled__default.div(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"])));
+var IconWrapper$4 = styled__default.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n  flex: 0;\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"])));
+var SearchInput = styled__default.input(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: var(--font-data);\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n  background: transparent;  \n  color: var(--grey-10);\n  font-size: 14px;\n\n  &::placeholder {\n    font-family: var(--font-data);\n    font-weight: 400;\n    font-style: italic;\n    font-size: 14px;\n    color: var(--grey-8);\n  }\n"])), removeAutoFillStyle);
 var ButtonArea = styled__default.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  display: flex;\n  gap: 0;\n"])));
 var buttonClickAnimation = styled.keyframes(_templateObject7$O || (_templateObject7$O = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity:0.9;\n    transform: scale(0.85);\n  }\n  100% {\n    opacity:1;\n    transform: scale(1);\n  }\n"])));
 var DrawerToggle = styled__default.button.attrs({
   type: 'button'
 })(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex: 0 56px;\n  width: 56px;\n  height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  background: none;\n  outline: none;\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    height: 5px;\n    background-color: transparent;\n    border-radius: 2px 2px 0 0;\n  }\n  \n  transition: background-color var(--speed-normal) var(--easing-primary-out);\n  \n  svg {\n    transition: transform var(--speed-normal) var(--easing-primary-out);\n  }\n\n  &:hover {\n    opacity: 0.9;\n    &::after {\n      background-color: var(--primary-6);\n    }\n  }\n \n  ", "\n"])), function (_ref) {
   var isActive = _ref.isActive;
-  return isActive && styled.css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: var(--primary-9);\n      &::after {\n        background-color: var(--primary-9);\n      }\n      svg {\n        transform: scale(1);\n        animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n      }\n\n    }\n  "])), buttonClickAnimation);
+  return isActive && styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: var(--primary-9);\n      &::after {\n        background-color: var(--primary-9);\n      }\n      svg {\n        transform: scale(1);\n        animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n      }\n\n    }\n  "])), buttonClickAnimation);
 });
-var DrawerPortalWrapper = styled__default.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose([""])));
-var Drawer = styled__default.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n\n  position: fixed;\n  right: -10px;\n  top: 56px;\n  bottom: 0;\n  background: var(--global-element-background);\n  border-left: var(--dividing-line) 1px solid;\n  \n  width: ", ";\n  opacity: 0;\n  visibility: hidden;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  transition:\n    opacity var(--speed-normal) var(--easing-primary-in-out),\n    right var(--speed-normal) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref2) {
+var DrawerPortalWrapper = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
+var Drawer = styled__default.div(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n\n  position: fixed;\n  right: -10px;\n  top: 56px;\n  bottom: 0;\n  background: var(--global-element-background);\n  border-left: var(--dividing-line) 1px solid;\n  \n  width: ", ";\n  opacity: 0;\n  visibility: hidden;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  transition:\n    opacity var(--speed-normal) var(--easing-primary-in-out),\n    right var(--speed-normal) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref2) {
   var baseWidth = _ref2.baseWidth;
   return baseWidth ? baseWidth : "200px";
 }, function (_ref3) {
@@ -13682,8 +13773,8 @@ var TopBar = function TopBar(_ref4) {
   }, customDrawer.customComponent)), document.body));
 };
 
-var _templateObject$1I;
-var TabListWrapper = styled__default.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n"])));
+var _templateObject$1K;
+var TabListWrapper = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n"])));
 var TabList = function TabList(_ref) {
   var children = _ref.children,
     defaultTabId = _ref.defaultTabId;
@@ -13696,11 +13787,11 @@ var TabList = function TabList(_ref) {
 };
 
 var _excluded$I = ["children", "tabFor", "onClick"];
-var _templateObject$1J, _templateObject2$1t, _templateObject3$1l;
-var TabComponent = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n  margin-right: 39px;\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n"])));
-var TabLabel = styled__default.label(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  ", "\n  font-size: 15px;\n  font-weight: ", ";\n  letter-spacing: 0.09px;\n  color: ", ";\n  cursor: pointer;\n  border-bottom: ", ";\n  padding-top: 6px;\n  padding-bottom: 14px;\n  flex-shrink: 0;\n  user-select: none;\n"])), function (_ref) {
+var _templateObject$1L, _templateObject2$1v, _templateObject3$1m;
+var TabComponent = styled__default.div(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n  margin-right: 39px;\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n"])));
+var TabLabel = styled__default.label(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  ", "\n  font-size: 15px;\n  font-weight: ", ";\n  letter-spacing: 0.09px;\n  color: ", ";\n  cursor: pointer;\n  border-bottom: ", ";\n  padding-top: 6px;\n  padding-bottom: 14px;\n  flex-shrink: 0;\n  user-select: none;\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
+  return styled.css(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
 }, function (_ref2) {
   var active = _ref2.active;
   return active ? '600' : '500';
@@ -13731,8 +13822,8 @@ var Tab = function Tab(_ref5) {
 };
 
 var _excluded$J = ["children", "tabId"];
-var _templateObject$1K;
-var Container$17 = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n"])));
+var _templateObject$1M;
+var Container$17 = styled__default.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n"])));
 var TabContent = function TabContent(_ref) {
   var children = _ref.children,
     tabId = _ref.tabId,
@@ -13743,15 +13834,15 @@ var TabContent = function TabContent(_ref) {
 };
 
 var _excluded$K = ["tabFor", "icon", "closeId", "counter", "status"];
-var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1d;
-var Container$18 = styled__default.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n  ", "\n  flex-basis: auto;\n  flex-grow: 1;\n"])), resetButtonStyles);
-var LinkTab = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n\n  ", ";\n\n  ", "\n"])), function (_ref) {
+var _templateObject$1N, _templateObject2$1w, _templateObject3$1n, _templateObject4$1e;
+var Container$18 = styled__default.button(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose(["\n  ", "\n  flex-basis: auto;\n  flex-grow: 1;\n"])), resetButtonStyles);
+var LinkTab = styled__default.div(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n\n  ", ";\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n    transition: border ", " ", ";\n    border-bottom: 5px solid ", ";\n\n    ", " {\n      [stroke]{\n        stroke: var(--dimmed);\n      }\n    }\n\n    &:hover {\n      border-bottom-color: ", ";\n      ", " {\n        [stroke]{\n          stroke: ", ";\n        }\n      }\n    }\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
+  return styled.css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n    transition: border ", " ", ";\n    border-bottom: 5px solid ", ";\n\n    ", " {\n      [stroke]{\n        stroke: var(--dimmed);\n      }\n    }\n\n    &:hover {\n      border-bottom-color: ", ";\n      ", " {\n        [stroke]{\n          stroke: ", ";\n        }\n      }\n    }\n  "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
 }, function (_ref2) {
   var isActive = _ref2.isActive,
     theme = _ref2.theme;
-  return isActive && styled.css(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: ", ";\n      ", " {\n        [stroke]{\n          stroke: ", ";\n        }\n      }\n    }\n  "])), theme.colors.menu.active, IconWrapper, theme.colors.menu.active);
+  return isActive && styled.css(_templateObject4$1e || (_templateObject4$1e = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: ", ";\n      ", " {\n        [stroke]{\n          stroke: ", ";\n        }\n      }\n    }\n  "])), theme.colors.menu.active, IconWrapper, theme.colors.menu.active);
 });
 var MobileTab = function MobileTab(_ref3) {
   var tabFor = _ref3.tabFor,
@@ -13781,19 +13872,19 @@ var MobileTab = function MobileTab(_ref3) {
 };
 
 var _excluded$L = ["icon", "title", "subtitle", "tabFor"];
-var _templateObject$1M, _templateObject2$1v, _templateObject3$1n, _templateObject4$1e, _templateObject5$16, _templateObject6$T;
-var Container$19 = styled__default.div(_templateObject$1M || (_templateObject$1M = _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 _templateObject$1O, _templateObject2$1x, _templateObject3$1o, _templateObject4$1f, _templateObject5$17, _templateObject6$T;
+var Container$19 = styled__default.div(_templateObject$1O || (_templateObject$1O = _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$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid var(--primary-11);\n    "]))) : styled.css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
+  return active ? styled.css(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid var(--primary-11);\n    "]))) : styled.css(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n    border-bottom: 3px solid transparent;\n  "])));
 }, IconWrapper);
-var Title$a = styled__default.div(_templateObject4$1e || (_templateObject4$1e = _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 Title$a = styled__default.div(_templateObject4$1f || (_templateObject4$1f = _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 ? 'var(--primary-11)' : 'var(--grey-11)';
 });
-var SubTitle$2 = styled__default.div(_templateObject5$16 || (_templateObject5$16 = _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 SubTitle$2 = styled__default.div(_templateObject5$17 || (_templateObject5$17 = _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;
 });
@@ -13828,9 +13919,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
   }), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
 };
 
-var _templateObject$1N, _templateObject2$1w;
-var Container$1a = styled__default.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
-var TabListWrapper$1 = styled__default.div(_templateObject2$1w || (_templateObject2$1w = _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 _templateObject$1P, _templateObject2$1y;
+var Container$1a = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose([""])));
+var TabListWrapper$1 = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _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';
 });
@@ -13866,10 +13957,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
 };
 
 var _excluded$M = ["closeId", "closeText"];
-var _templateObject$1O, _templateObject2$1x, _templateObject3$1o;
-var StyledButton$7 = styled__default.button(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n  ", "\n  \n  font-family: var(--font-ui);\n  background-color: var(--global-element-background);\n  border-top: 1px solid var(--dividing-line);\n  font-weight: 400;\n  color: var(--grey-10);\n  \n  height: ", "px;\n  position: fixed;\n  bottom: 0;\n  font-size: 14px;\n  outline: none;\n\n  width: 100%;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
-var IconContainer$4 = styled__default.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  margin: 0 20px;\n\n  svg {\n    display:block;\n  }\n"])));
-var TextWrapper$1 = styled__default.div(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n"])));
+var _templateObject$1Q, _templateObject2$1z, _templateObject3$1p;
+var StyledButton$7 = styled__default.button(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose(["\n  ", "\n  \n  font-family: var(--font-ui);\n  background-color: var(--global-element-background);\n  border-top: 1px solid var(--dividing-line);\n  font-weight: 400;\n  color: var(--grey-10);\n  \n  height: ", "px;\n  position: fixed;\n  bottom: 0;\n  font-size: 14px;\n  outline: none;\n\n  width: 100%;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
+var IconContainer$4 = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  margin: 0 20px;\n\n  svg {\n    display:block;\n  }\n"])));
+var TextWrapper$1 = styled__default.div(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n"])));
 var CloseButton$1 = function CloseButton(_ref) {
   var closeId = _ref.closeId,
     _ref$closeText = _ref.closeText,
@@ -13888,9 +13979,9 @@ var CloseButton$1 = function CloseButton(_ref) {
   })), React__default.createElement(TextWrapper$1, null, closeText));
 };
 
-var _templateObject$1P, _templateObject2$1y;
-var Container$1b = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-height: calc(100vh - ", "px);\n  width: 100%;\n  overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
-var ContentWrapper = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
+var _templateObject$1R, _templateObject2$1A;
+var Container$1b = styled__default.div(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-height: calc(100vh - ", "px);\n  width: 100%;\n  overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
+var ContentWrapper = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
 var MobileNavbarContent = function MobileNavbarContent(_ref) {
   var closeId = _ref.closeId,
     children = _ref.children;
@@ -13899,9 +13990,9 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
   return selected === closeId ? null : React__default.createElement(Container$1b, null, React__default.createElement(ContentWrapper, null, children));
 };
 
-var _templateObject$1Q, _templateObject2$1z;
-var Container$1c = styled__default.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose([""])));
-var ItemWrapper = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n  padding: 14px 0;\n  border-bottom: 1px solid var(--dividing-line);\n"])));
+var _templateObject$1S, _templateObject2$1B;
+var Container$1c = styled__default.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose([""])));
+var ItemWrapper = styled__default.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n  padding: 14px 0;\n  border-bottom: 1px solid var(--dividing-line);\n"])));
 var MobileMenu = function MobileMenu(_ref) {
   var content = _ref.content,
     supportUrl = _ref.supportUrl,
@@ -13950,10 +14041,10 @@ var MobileMenu = function MobileMenu(_ref) {
   })));
 };
 
-var _templateObject$1R, _templateObject2$1A, _templateObject3$1p;
-var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  flex-basis: 0;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  object {\n    pointer-events: none;\n    height: 25px;\n  }\n"])), resetButtonStyles);
-var LogoMark$1 = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n  margin-right: 15px;\n"])));
-var SVGObject$1 = styled__default.object(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose([""])));
+var _templateObject$1T, _templateObject2$1C, _templateObject3$1q;
+var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  flex-basis: 0;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  object {\n    pointer-events: none;\n    height: 25px;\n  }\n"])), resetButtonStyles);
+var LogoMark$1 = styled__default.div(_templateObject2$1C || (_templateObject2$1C = _taggedTemplateLiteralLoose(["\n  margin-right: 15px;\n"])));
+var SVGObject$1 = styled__default.object(_templateObject3$1q || (_templateObject3$1q = _taggedTemplateLiteralLoose([""])));
 var MobileLogoLink = function MobileLogoLink(_ref) {
   var _ref$home = _ref.home,
     home = _ref$home === void 0 ? "/" : _ref$home,
@@ -13973,8 +14064,8 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
 };
 
 var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
-var _templateObject$1S;
-var Container$1d = styled__default.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose(["\n  background: var(--global-element-background);\n  \n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$1U;
+var Container$1d = styled__default.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n  background: var(--global-element-background);\n  \n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n"])));
 var MobileUserMenu = function MobileUserMenu(_ref) {
   var closeId = _ref.closeId,
     hasLanguage = _ref.hasLanguage,
@@ -14008,14 +14099,14 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
 };
 
 var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
-var _templateObject$1T, _templateObject2$1B;
+var _templateObject$1V, _templateObject2$1D;
 var CLOSE_ID = 'closeMenu';
 var NOTI_TAB = 'notifications';
 var USER_TAB = 'user';
 var MENU_TAB = 'menu';
 var CUSTOM_TAB = 'custom';
-var Container$1e = styled__default.nav(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n  background-color: var(--global-element-background);\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 99;\n"])));
-var HeaderContainer = styled__default.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: ", "px;\n  border-bottom: var(--dividing-line) 1px solid;\n\n  ", " {\n    flex-basis: 0;\n    flex-grow: 3;\n  }\n"])), MOBILE_NAVBAR_HEIGHT, TabListWrapper);
+var Container$1e = styled__default.nav(_templateObject$1V || (_templateObject$1V = _taggedTemplateLiteralLoose(["\n  background-color: var(--global-element-background);\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 99;\n"])));
+var HeaderContainer = styled__default.div(_templateObject2$1D || (_templateObject2$1D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  height: ", "px;\n  border-bottom: var(--dividing-line) 1px solid;\n\n  ", " {\n    flex-basis: 0;\n    flex-grow: 3;\n  }\n"])), MOBILE_NAVBAR_HEIGHT, TabListWrapper);
 var MobileNavbar = function MobileNavbar(_ref) {
   var content = _ref.content,
     home = _ref.home,
@@ -14136,16 +14227,16 @@ var GlobalUI = function GlobalUI(_ref) {
 };
 
 var _excluded$Q = ["children"];
-var _templateObject$1U, _templateObject2$1C, _templateObject3$1q, _templateObject4$1f, _templateObject5$17, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
-var Container$1f = styled__default.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n  width: 286px;\n  border-right: 1px solid var(--grey-a7);\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n"])));
-var LogoContainer = styled__default.div(_templateObject2$1C || (_templateObject2$1C = _taggedTemplateLiteralLoose(["\n  height: 84px;\n  color: var(--grey-11);\n  border-bottom: 1px solid var(--grey-a7);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-top: 18px;\n  padding-bottom: 15px;\n"])));
-var LogoTopText = styled__default.div(_templateObject3$1q || (_templateObject3$1q = _taggedTemplateLiteralLoose(["\n  height: 31px;\n  font-family: Monorale;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.72;\n  letter-spacing: 4.5px;\n  text-align: center;\n"])));
-var LogoBottomText = styled__default.div(_templateObject4$1f || (_templateObject4$1f = _taggedTemplateLiteralLoose(["\n  height: 19px;\n  font-family: Monorale;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: normal;\n  letter-spacing: 14.11px;\n  text-align: center;\n"])));
-var SidebarBox = styled__default.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  border-bottom: 1px solid var(--grey-a7);\n  padding: 22px 20px 21px 20px;\n"])));
+var _templateObject$1W, _templateObject2$1E, _templateObject3$1r, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$v;
+var Container$1f = styled__default.div(_templateObject$1W || (_templateObject$1W = _taggedTemplateLiteralLoose(["\n  width: 286px;\n  border-right: 1px solid var(--grey-a7);\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n"])));
+var LogoContainer = styled__default.div(_templateObject2$1E || (_templateObject2$1E = _taggedTemplateLiteralLoose(["\n  height: 84px;\n  color: var(--grey-11);\n  border-bottom: 1px solid var(--grey-a7);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-top: 18px;\n  padding-bottom: 15px;\n"])));
+var LogoTopText = styled__default.div(_templateObject3$1r || (_templateObject3$1r = _taggedTemplateLiteralLoose(["\n  height: 31px;\n  font-family: Monorale;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.72;\n  letter-spacing: 4.5px;\n  text-align: center;\n"])));
+var LogoBottomText = styled__default.div(_templateObject4$1g || (_templateObject4$1g = _taggedTemplateLiteralLoose(["\n  height: 19px;\n  font-family: Monorale;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: normal;\n  letter-spacing: 14.11px;\n  text-align: center;\n"])));
+var SidebarBox = styled__default.div(_templateObject5$18 || (_templateObject5$18 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  border-bottom: 1px solid var(--grey-a7);\n  padding: 22px 20px 21px 20px;\n"])));
 var SidebarHeading = styled__default.div(_templateObject6$U || (_templateObject6$U = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: var(--grey-10);\n  margin-bottom: 18px;\n"])));
 var SidebarLinkHeading = styled__default.div(_templateObject7$P || (_templateObject7$P = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: var(--grey-10);\n"])));
 var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$G || (_templateObject8$G = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.35px;\n  color: var(--grey-10);\n"])));
-var SLink = styled__default(reactRouterDom.Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 30px;\n  top: 15px;\n  /* width: 80px; */\n  /* height: 30px; */\n  font-size: 14px;\n  font-weight: 600;\n  text-align: center;\n  color: var(--grey-9);\n  border-radius: 3px;\n  background-color: var(--primary-2);\n  text-decoration: none;\n  padding: 7px 20px;\n"])));
+var SLink = styled__default(reactRouterDom.Link)(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 30px;\n  top: 15px;\n  /* width: 80px; */\n  /* height: 30px; */\n  font-size: 14px;\n  font-weight: 600;\n  text-align: center;\n  color: var(--grey-9);\n  border-radius: 3px;\n  background-color: var(--primary-2);\n  text-decoration: none;\n  padding: 7px 20px;\n"])));
 var SidebarLink = function SidebarLink(_ref) {
   var title = _ref.title,
     to = _ref.to;