scorer-ui-kit 2.6.0 → 2.6.2

package/dist/index.js

@@ -1563,7 +1563,7 @@ 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-selection-control-default: var(--grey-8);\n    --input-selection-control-default-disabled: var(--grey-6);\n    --input-selection-control-selected: var(--primary-9);\n    --input-selection-control-selected-disabled: var(--primary-8);\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  }\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\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\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    /* 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 _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-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);
@@ -2703,35 +2703,32 @@ var CheckboxState;
   CheckboxState["Indeterminate"] = "indeterminate";
 })(CheckboxState || (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  ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme && styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n    transition: border-color ", " ", ";\n  "])), theme.animation.speed.faster, theme.animation.easing.primary.easeInOut);
-});
-var CheckboxInner = styled__default.div(_templateObject4$c || (_templateObject4$c = _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(_templateObject5$a || (_templateObject5$a = _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 (_ref2) {
-  var color = _ref2.color;
+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 color = _ref.color;
   return "var(--" + color + ")";
 });
-var Container$8 = styled__default.label(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  user-select: none;\n\n  ", "\n\n  ", "\n\n  ", "\n\n"])), function (_ref3) {
+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 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));
+}, function (_ref3) {
   var visualState = _ref3.visualState,
     disabled = _ref3.disabled;
-  return visualState === CheckboxState.Off && styled.css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n    ", "{\n      border-color: var(--grey-9);\n      border: var(--grey-9) 2px solid;\n    }\n\n    ", ";\n\n    ", "\n  "])), CheckboxOuter, !disabled && styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n      &:hover ", " {\n        border-color: var(--primary-9);\n        border: var(--primary-9) 2px solid;\n      }"])), CheckboxOuter), disabled && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n      ", "{\n        background-color: var(--grey-1);\n        border-color: var(--grey-6);\n        border: var(--grey-6) 2px solid;\n        cursor: not-allowed;\n      }\n    "])), CheckboxOuter));
+  return visualState === CheckboxState.On && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n    /* Checked */  \n    ", "{\n      background-color: var(--input-toggle-checked-background-color);\n      border-color: var(--input-toggle-checked-border-color);\n    }\n    /* Checked - Hover */\n    ", ";\n\n    /* Checked - Disabled */    \n    ", "\n  "])), CheckboxOuter, !disabled && styled.css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n      &:hover ", "{\n        background-color: var(--input-toggle-checked-hover-background-color);\n        border-color: var(--input-toggle-checked-hover-border-color);\n      }"])), CheckboxOuter), disabled && styled.css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n      ", "{\n        background-color: var(--input-toggle-checked-disabled-background-color);\n        border-color: var(--input-toggle-checked-disabled-border-color);\n        cursor: not-allowed;\n      }\n      ", "{\n        opacity: 0.65;\n      }\n    "])), CheckboxOuter, IconWrapper$2));
 }, function (_ref4) {
   var visualState = _ref4.visualState,
     disabled = _ref4.disabled;
-  return visualState === CheckboxState.On && styled.css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n    ", "{\n      box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n      background-color: var(--primary-9);\n      border: none;\n    }\n    ", ";\n\n    ", "\n  "])), CheckboxOuter, !disabled && styled.css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n      &:hover ", "{\n        box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n        background-color: var(--primary-9);\n        border: none;\n      }"])), CheckboxOuter), disabled && styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n      ", "{\n        box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n        background-color: var(--grey-6);\n        cursor: not-allowed;\n      }\n      ", "{\n        opacity: 0.65;\n      }\n    "])), CheckboxOuter, IconWrapper$2));
-}, function (_ref5) {
-  var visualState = _ref5.visualState,
-    disabled = _ref5.disabled;
-  return visualState === CheckboxState.Indeterminate && styled.css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n    ", "{\n      box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n      background-color: var(--primary-6);\n    }\n    ", ";\n\n  "])), CheckboxOuter, !disabled && styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover ", "{\n        box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n        background-color: var(--primary-6);\n      }\n    "])), CheckboxOuter));
-});
-var Checkbox = function Checkbox(_ref6) {
-  var _ref6$indeterminate = _ref6.indeterminate,
-    indeterminate = _ref6$indeterminate === void 0 ? false : _ref6$indeterminate,
-    disabled = _ref6.disabled,
-    _ref6$checked = _ref6.checked,
-    checked = _ref6$checked === void 0 ? false : _ref6$checked,
-    onChangeCallback = _ref6.onChangeCallback;
+  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));
+});
+var Checkbox = function Checkbox(_ref5) {
+  var _ref5$indeterminate = _ref5.indeterminate,
+    indeterminate = _ref5$indeterminate === void 0 ? false : _ref5$indeterminate,
+    disabled = _ref5.disabled,
+    _ref5$checked = _ref5.checked,
+    checked = _ref5$checked === void 0 ? false : _ref5$checked,
+    onChangeCallback = _ref5.onChangeCallback;
   var _useState = React.useState(checked),
     isChecked = _useState[0],
     setIsChecked = _useState[1];
@@ -2760,9 +2757,9 @@ var Checkbox = function Checkbox(_ref6) {
     disabled: disabled,
     visualState: visualState
   }), React__default.createElement(CheckboxOuter, null, React__default.createElement(CheckboxInner, null, visualState === CheckboxState.On ? React__default.createElement(IconWrapper$2, {
-    color: 'inverse'
+    color: 'input-toggle-icon-color'
   }, React__default.createElement(CheckMark, {
-    color: 'inverse',
+    color: 'input-toggle-icon-color',
     stroke: 'inverse',
     size: 12,
     weight: iconWeight
@@ -2778,10 +2775,9 @@ var Checkbox = function Checkbox(_ref6) {
 var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$d, _templateObject5$b, _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 styles = _ref.theme.styles,
-    isChecked = _ref.isChecked,
+  var isChecked = _ref.isChecked,
     disabled = _ref.disabled;
-  return styles && styled.css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n    border-color: var(--input-selection-control-default);\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-selection-control-selected);\n      }\n    "]))), isChecked && !disabled && styled.css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n      border-color: var(--input-selection-control-selected);\n      ", " {\n        background-color: var(--input-selection-control-selected);\n      }\n    "])), InnerRadio), isChecked && !disabled && styled.css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-color: var(--input-selection-control-selected);\n        ", " {\n          background-color: var(--input-selection-control-selected);\n        }\n      }\n    "])), InnerRadio), isChecked && disabled && styled.css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n      border-color: var(--input-selection-control-selected-disabled);\n      ", " {\n        background-color: var(--input-selection-control-selected-disabled);\n      }\n    "])), InnerRadio), !isChecked && disabled && styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n      border-color: var(--grey-6);\n    "]))));
+  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));
 });
 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"])));
@@ -5888,7 +5884,7 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
 
 var _excluded$n = ["children"];
 var _templateObject$H, _templateObject2$A;
-var Container$p = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);\n  background-color: var(--grey-a2);\n  backdrop-filter: blur(20px);\n  border: var(--grey-6) 1px solid;\n  border-radius: 3px;\n  position: relative;\n  display: inline-flex;\n  overflow: visible;\n  padding-top: 5px;\n\n  &::before {\n    content: '';\n    background-color: var(--primary-a9);\n    border-radius: 3px 3px 0 0;\n    box-shadow: 0px 5px 25px 0px var(--primary-a5);\n\n    display: block;\n    height: 5px;\n    position: absolute;\n    left: -1px;\n    top: -1px;\n    right: -1px;\n    z-index: 1;\n  }\n\n"])));
+var Container$p = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);\n  background-color: var(--filter-dropdown-background-color-fallback);\n  @supports( background-color: var(--filter-dropdown-background-color) ){\n    background-color: var(--filter-dropdown-background-color);\n  };\n\n  backdrop-filter: blur(20px);\n  border: var(--grey-6) 1px solid;\n  border-radius: 3px;\n  position: relative;\n  display: inline-flex;\n  overflow: visible;\n  padding-top: 5px;\n\n  &::before {\n    content: '';\n    background-color: var(--filter-dropdown-accent);\n    border-radius: 3px 3px 0 0;\n    box-shadow: 0px 5px 25px 0px var(--primary-a5);\n\n    display: block;\n    height: 5px;\n    position: absolute;\n    left: -1px;\n    top: -1px;\n    right: -1px;\n    z-index: 1;\n  }\n\n"])));
 var Inner = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n"])));
 var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
   var children = _ref.children,
@@ -5897,40 +5893,43 @@ 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;
+var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$9;
 var FlipWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  ", ";\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([""])));
-var StyledButton$4 = styled__default.button(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  ", ";\n  border-radius: 3px;\n  height: var(--common-height);\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    padding: 0 9px;\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      [stroke]{\n        stroke: var(--grey-12);\n      }\n    };\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 50%;\n  }\n\n  ", ";\n\n"])), resetButtonStyles, function (_ref2) {
+var StyledButton$4 = styled__default.button(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  ", ";\n  border-radius: 3px;\n  height: var(--common-height);\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    padding: 0 9px;\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 (_ref2) {
   var design = _ref2.design;
   return design === 'basic' ? "\n        background-color: transparent;\n        border: 1px solid transparent;\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      ";
 }, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, fadeInAnimation, animation.speed.slower, animation.easing.primary.out, IconWrapper, animation.speed.fast, animation.easing.primary.out, function (_ref3) {
   var design = _ref3.design;
   return design === 'basic' ? '' : styled.css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      box-shadow: 0px 4px 9px 0px var(--primary-a2);\n      border-color: var(--primary-7);\n    "])));
-}, IconWrapper, FlipArrowContainer, IconWrapper, function (_ref4) {
-  var isOpen = _ref4.isOpen,
-    hasFlipArrow = _ref4.hasFlipArrow;
-  return isOpen && hasFlipArrow && styled.css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-9);\n    border: solid 1px var(--primary-9);\n    color: var(--white-1);\n\n    &, &:hover:enabled, &:active:enabled {\n      color: var(--white-1);\n      ", " {\n        [stroke]{\n          stroke: var(--white-1);\n        }\n      }\n    }\n    \n    ", " ", " {\n      [stroke]{\n        stroke: var(--white-1);\n      }\n    };\n  "])), IconWrapper, FlipArrowContainer, IconWrapper);
-});
-var InnerContainer$3 = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n"])));
-var ButtonText = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  padding-right: ", ";\n"])), function (_ref5) {
-  var hasFlipArrow = _ref5.hasFlipArrow;
+}, IconWrapper, function (_ref4) {
+  var isOpen = _ref4.isOpen;
+  return !isOpen && styled.css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      ", " ", " {\n        [stroke]{\n          stroke: var(--grey-12);\n        }\n      };\n    "])), FlipArrowContainer, IconWrapper);
+}, function (_ref5) {
+  var isOpen = _ref5.isOpen,
+    hasFlipArrow = _ref5.hasFlipArrow;
+  return isOpen && hasFlipArrow && styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-9);\n    border: solid 1px var(--primary-9);\n    color: var(--white-1);\n\n    &, &:hover:enabled, &:active:enabled {\n      color: var(--white-1);\n      ", " {\n        [stroke]{\n          stroke: var(--white-1);\n        }\n      }\n    }\n    \n    ", " ", " {\n      [stroke]{\n        stroke: var(--white-1);\n      }\n    };\n  "])), IconWrapper, FlipArrowContainer, IconWrapper);
+});
+var InnerContainer$3 = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n"])));
+var ButtonText = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n  padding-right: ", ";\n"])), function (_ref6) {
+  var hasFlipArrow = _ref6.hasFlipArrow;
   return hasFlipArrow ? '3px' : '20px';
 });
-var FilterButton = function FilterButton(_ref6) {
-  var icon = _ref6.icon,
-    _ref6$hasFlipArrow = _ref6.hasFlipArrow,
-    hasFlipArrow = _ref6$hasFlipArrow === void 0 ? false : _ref6$hasFlipArrow,
-    _ref6$isSortAscending = _ref6.isSortAscending,
-    isSortAscending = _ref6$isSortAscending === void 0 ? false : _ref6$isSortAscending,
-    isOpen = _ref6.isOpen,
-    _ref6$design = _ref6.design,
-    design = _ref6$design === void 0 ? 'default' : _ref6$design,
-    children = _ref6.children,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$o);
+var FilterButton = function FilterButton(_ref7) {
+  var icon = _ref7.icon,
+    _ref7$hasFlipArrow = _ref7.hasFlipArrow,
+    hasFlipArrow = _ref7$hasFlipArrow === void 0 ? false : _ref7$hasFlipArrow,
+    _ref7$isSortAscending = _ref7.isSortAscending,
+    isSortAscending = _ref7$isSortAscending === void 0 ? false : _ref7$isSortAscending,
+    isOpen = _ref7.isOpen,
+    _ref7$design = _ref7.design,
+    design = _ref7$design === void 0 ? 'default' : _ref7$design,
+    children = _ref7.children,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded$o);
   return React__default.createElement(StyledButton$4, Object.assign({
     type: 'button'
   }, props, {
@@ -5954,7 +5953,7 @@ var FilterButton = function FilterButton(_ref6) {
 };
 
 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$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$a;
 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"])));
@@ -5964,7 +5963,7 @@ var FakeInnerRadio = styled__default.div(_templateObject6$m || (_templateObject6
 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,
     disabled = _ref.disabled;
-  return styled.css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n    \n  border-color: var(--input-selection-control-default);\n\n    &:hover {\n      cursor: pointer;\n      ", " {\n        color: var(--input-selection-control-selected);\n      }\n\n      ", ", ", " {\n        border-color: var(--input-selection-control-selected);\n      }\n    }\n\n    ", ";\n\n    ", ";\n\n    ", ", ", " {\n      transition: border-color var(--speed-faster) var(--easing-primary-in-out);\n    }\n\n    ", " {\n      transition: background-color var(--speed-faster) var(--easing-primary-in-out);\n    }\n\n    ", "{\n      transition: color var(--speed-faster) var(--easing-primary-in-out);\n    }\n    \n  "])), Title$1, FakeCheckbox, FakeRadioButton, selected && styled.css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      ", ", ", " {\n        border-color: var(--input-selection-control-selected);\n        ", ", ", " {\n          background-color: var(--input-selection-control-selected);\n        }\n      }\n      \n      ", " {\n        color: var(--input-selection-control-selected);\n        font-weight: 600;\n      }\n\n    "])), FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, Title$1), disabled && styled.css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
+  return styled.css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n    \n    ", ", ", " {\n      border-color: var(--input-toggle-unchecked-border-color);\n    }\n\n    &:hover {\n      cursor: pointer;\n      ", " {\n        color: var(--input-label-hover);\n      }\n\n      ", ", ", " {\n        border-color: var(--input-toggle-unchecked-hover-border-color);\n        ", ", ", " {\n          background-color: var(--input-toggle-unchecked-background-color);\n        }\n      }\n    }\n\n    ", ";\n\n    ", ";\n\n    ", ", ", " {\n      transition: border-color var(--speed-faster) var(--easing-primary-out);\n    }\n\n    ", " {\n      transition: background-color var(--speed-faster) var(--easing-primary-out);\n    }\n\n    ", "{\n      transition: color var(--speed-faster) var(--easing-primary-out);\n    }\n    \n  "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && styled.css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      ", " {\n        color: var(--input-label-active);\n        font-weight: 600;\n      }\n\n      ", ", ", " {\n        border-color: var(--input-toggle-checked-border-color);\n        ", ", ", " {\n          background-color: var(--input-toggle-checked-background-color);\n        }\n      }\n      \n      &:hover {\n        cursor: pointer;\n        ", " {\n          color: var(--input-label-hover);\n        }\n\n        ", ", ", " {\n          border-color: var(--input-toggle-checked-hover-border-color);\n          ", ", ", " {\n            background-color: var(--input-toggle-checked-hover-background-color);\n          }\n        }\n      }\n     \n\n    "])), Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner), disabled && styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
 });
 var FilterOption = function FilterOption(_ref2) {
   var title = _ref2.title,
@@ -6478,7 +6477,7 @@ 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$7, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
+var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$b, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _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) {
@@ -6498,7 +6497,7 @@ 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$7 || (_templateObject11$7 = _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    "]))));
+  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$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$7 || (_templateObject11$7 = _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"])));
@@ -7359,7 +7358,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$8, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
+var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$c, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _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) {
@@ -7389,7 +7388,7 @@ var HandleReactiveRing = styled__default.circle(_templateObject9$g || (_template
     styling = _ref4.styling;
   return theme.custom.lines[styling].handleReactiveRing.stroke;
 });
-var HandleContrastLayer = styled__default.circle(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  overflow: visible;\n  mix-blend-mode: multiply;\n  fill: none;\n  stroke: ", ";\n"])), function (_ref5) {
+var HandleContrastLayer = styled__default.circle(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  overflow: visible;\n  mix-blend-mode: multiply;\n  fill: none;\n  stroke: ", ";\n"])), function (_ref5) {
   var theme = _ref5.theme,
     styling = _ref5.styling;
   return theme.custom.lines[styling].handleContrastLayer.stroke;
@@ -7592,7 +7591,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$9, _templateObject12$8, _templateObject13$7, _templateObject14$5;
+var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$d, _templateObject11$9, _templateObject12$8, _templateObject13$7, _templateObject14$5;
 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;
@@ -7636,7 +7635,7 @@ var LabelText$2 = styled__default.text(_templateObject8$o || (_templateObject8$o
   var showLabelShadow = _ref9.showLabelShadow;
   return showLabelShadow && styled.css(_templateObject9$h || (_templateObject9$h = _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 GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref10) {
+var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref10) {
   var theme = _ref10.theme,
     styling = _ref10.styling;
   return theme.custom.lines[styling].grabHandleContrast.stroke;
@@ -9423,7 +9422,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$a;
+var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$e, _templateObject11$a;
 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);
@@ -9447,7 +9446,7 @@ var UnitText = styled__default.span(_templateObject8$p || (_templateObject8$p =
   var theme = _ref5.theme;
   return styled.css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), theme.typography.table.columnData['unit']);
 });
-var StatusBlip = styled__default.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  margin-right: 8px;\n  ", "\n"])), function (_ref6) {
+var StatusBlip = styled__default.div(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  margin-right: 8px;\n  ", "\n"])), function (_ref6) {
   var _ref6$status = _ref6.status,
     status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
     colors = _ref6.theme.colors;
@@ -9521,6 +9520,7 @@ var TypeTableRow = function TypeTableRow(_ref2) {
     hideDivider: true
   }, React__default.createElement(Checkbox, {
     checked: rowData._checked,
+    disabled: rowData.checkboxDisabled,
     onChangeCallback: wrappedSelectCallback
   })) : null, hasStatus ? React__default.createElement(TypeTableCell, {
     hideDivider: true
@@ -9605,7 +9605,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$b, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
+var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$f, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _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;
@@ -9630,7 +9630,7 @@ var HeaderItem = styled__default.div(_templateObject2$$ || (_templateObject2$$ =
 });
 var TitleItems = styled__default.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", ";\n"])), function (_ref5) {
   var alignment = _ref5.alignment;
-  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);
+  return alignment && styled.css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
 });
 var GroupTitle = styled__default.div(_templateObject11$b || (_templateObject11$b = _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$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding-left: 2px;\n  padding-right: 8px;\n  white-space: nowrap;\n"])), function (_ref6) {
@@ -9671,8 +9671,7 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
     hasThumbnail = _ref9.hasThumbnail,
     hasTypeIcon = _ref9.hasTypeIcon,
     allChecked = _ref9.allChecked,
-    isEmptyTable = _ref9.isEmptyTable,
-    isLoading = _ref9.isLoading,
+    disableAllChecked = _ref9.disableAllChecked,
     hasHeaderGroups = _ref9.hasHeaderGroups,
     columnConfig = _ref9.columnConfig,
     defaultAscending = _ref9.defaultAscending,
@@ -9719,7 +9718,7 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
     fixedWidth: 30
   }, React__default.createElement(Checkbox, {
     checked: allChecked,
-    disabled: isEmptyTable || isLoading,
+    disabled: disableAllChecked,
     onChangeCallback: toggleAllCallbackWrapper
   })) : null, hasStatus ? React__default.createElement(HeaderItem, {
     headerStyle: 'header',
@@ -9775,47 +9774,60 @@ var isChecked = function isChecked(_ref2) {
     _checked = _ref2$_checked === void 0 ? false : _ref2$_checked;
   return _checked === true;
 };
-var TypeTable = function TypeTable(_ref3) {
-  var columnConfig = _ref3.columnConfig,
-    selectable = _ref3.selectable,
-    _ref3$rows = _ref3.rows,
-    rows = _ref3$rows === void 0 ? [] : _ref3$rows,
-    closeText = _ref3.closeText,
-    _ref3$hasStatus = _ref3.hasStatus,
-    hasStatus = _ref3$hasStatus === void 0 ? false : _ref3$hasStatus,
-    _ref3$hasThumbnail = _ref3.hasThumbnail,
-    hasThumbnail = _ref3$hasThumbnail === void 0 ? false : _ref3$hasThumbnail,
-    _ref3$hasTypeIcon = _ref3.hasTypeIcon,
-    hasTypeIcon = _ref3$hasTypeIcon === void 0 ? false : _ref3$hasTypeIcon,
-    _ref3$defaultAscendin = _ref3.defaultAscending,
-    defaultAscending = _ref3$defaultAscendin === void 0 ? false : _ref3$defaultAscendin,
-    _ref3$isLoading = _ref3.isLoading,
-    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
-    _ref3$loadingText = _ref3.loadingText,
-    loadingText = _ref3$loadingText === void 0 ? 'Loading Data...' : _ref3$loadingText,
-    _ref3$emptyTableTitle = _ref3.emptyTableTitle,
-    emptyTableTitle = _ref3$emptyTableTitle === void 0 ? '' : _ref3$emptyTableTitle,
-    _ref3$emptyTableText = _ref3.emptyTableText,
-    emptyTableText = _ref3$emptyTableText === void 0 ? '' : _ref3$emptyTableText,
-    _ref3$hasHeaderGroups = _ref3.hasHeaderGroups,
-    hasHeaderGroups = _ref3$hasHeaderGroups === void 0 ? false : _ref3$hasHeaderGroups,
-    _ref3$sortCallback = _ref3.sortCallback,
-    sortCallback = _ref3$sortCallback === void 0 ? function () {} : _ref3$sortCallback,
-    _ref3$selectCallback = _ref3.selectCallback,
-    selectCallback = _ref3$selectCallback === void 0 ? function () {} : _ref3$selectCallback,
-    _ref3$toggleAllCallba = _ref3.toggleAllCallback,
-    toggleAllCallback = _ref3$toggleAllCallba === void 0 ? function () {} : _ref3$toggleAllCallba;
+var isCheckBoxDisabled = function isCheckBoxDisabled(_ref3) {
+  var _ref3$checkboxDisable = _ref3.checkboxDisabled,
+    checkboxDisabled = _ref3$checkboxDisable === void 0 ? false : _ref3$checkboxDisable;
+  return checkboxDisabled === true;
+};
+var TypeTable = function TypeTable(_ref4) {
+  var columnConfig = _ref4.columnConfig,
+    selectable = _ref4.selectable,
+    _ref4$rows = _ref4.rows,
+    rows = _ref4$rows === void 0 ? [] : _ref4$rows,
+    closeText = _ref4.closeText,
+    _ref4$hasStatus = _ref4.hasStatus,
+    hasStatus = _ref4$hasStatus === void 0 ? false : _ref4$hasStatus,
+    _ref4$hasThumbnail = _ref4.hasThumbnail,
+    hasThumbnail = _ref4$hasThumbnail === void 0 ? false : _ref4$hasThumbnail,
+    _ref4$hasTypeIcon = _ref4.hasTypeIcon,
+    hasTypeIcon = _ref4$hasTypeIcon === void 0 ? false : _ref4$hasTypeIcon,
+    _ref4$defaultAscendin = _ref4.defaultAscending,
+    defaultAscending = _ref4$defaultAscendin === void 0 ? false : _ref4$defaultAscendin,
+    _ref4$isLoading = _ref4.isLoading,
+    isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+    _ref4$loadingText = _ref4.loadingText,
+    loadingText = _ref4$loadingText === void 0 ? 'Loading Data...' : _ref4$loadingText,
+    _ref4$emptyTableTitle = _ref4.emptyTableTitle,
+    emptyTableTitle = _ref4$emptyTableTitle === void 0 ? '' : _ref4$emptyTableTitle,
+    _ref4$emptyTableText = _ref4.emptyTableText,
+    emptyTableText = _ref4$emptyTableText === void 0 ? '' : _ref4$emptyTableText,
+    _ref4$hasHeaderGroups = _ref4.hasHeaderGroups,
+    hasHeaderGroups = _ref4$hasHeaderGroups === void 0 ? false : _ref4$hasHeaderGroups,
+    _ref4$sortCallback = _ref4.sortCallback,
+    sortCallback = _ref4$sortCallback === void 0 ? function () {} : _ref4$sortCallback,
+    _ref4$selectCallback = _ref4.selectCallback,
+    selectCallback = _ref4$selectCallback === void 0 ? function () {} : _ref4$selectCallback,
+    _ref4$toggleAllCallba = _ref4.toggleAllCallback,
+    toggleAllCallback = _ref4$toggleAllCallba === void 0 ? function () {} : _ref4$toggleAllCallba;
   var _useState = React.useState(false),
     allChecked = _useState[0],
     setAllChecked = _useState[1];
+  var _useState2 = React.useState(false),
+    disableAllChecked = _useState2[0],
+    setDisableAllChecked = _useState2[1];
   var isEmptyTable = rows.length === 1 && rows[0].columns.length === 0 && !isLoading;
   React.useEffect(function () {
     var areAllChecked = false;
+    var disableCheckAll = false;
     if (rows.every(isChecked) && rows.length > 0 && !isEmptyTable) {
       areAllChecked = true;
     }
+    if (rows.some(isCheckBoxDisabled) || isEmptyTable || isLoading) {
+      disableCheckAll = true;
+    }
     setAllChecked(areAllChecked);
-  }, [isEmptyTable, rows]);
+    setDisableAllChecked(disableCheckAll);
+  }, [isEmptyTable, isLoading, rows]);
   return React__default.createElement(Container$L, null, React__default.createElement(TableContainer, null, React__default.createElement(TypeTableHeader, Object.assign({}, {
     selectable: selectable,
     hasStatus: hasStatus,
@@ -9823,8 +9835,7 @@ var TypeTable = function TypeTable(_ref3) {
     hasTypeIcon: hasTypeIcon,
     defaultAscending: defaultAscending,
     allChecked: allChecked,
-    isEmptyTable: isEmptyTable,
-    isLoading: isLoading,
+    disableAllChecked: disableAllChecked,
     hasHeaderGroups: hasHeaderGroups,
     columnConfig: columnConfig,
     toggleAllCallback: toggleAllCallback,
@@ -9851,7 +9862,7 @@ var TypeTable = function TypeTable(_ref3) {
 };
 
 var _excluded$C = ["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$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$g;
 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);
@@ -9866,7 +9877,7 @@ var TextContainer$3 = styled__default.div(_templateObject8$r || (_templateObject
   return alignment === 'center' && styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n    justify-content: center;\n  "])));
 }, function (_ref3) {
   var alignment = _ref3.alignment;
-  return alignment === 'right' && styled.css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
+  return alignment === 'right' && styled.css(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
 }, StyledIconButton$1, StyledIconButton$1);
 var EditCell = function EditCell(_ref4) {
   var _ref4$type = _ref4.type,
@@ -11790,7 +11801,7 @@ 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$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$h;
 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"])));
@@ -11819,7 +11830,7 @@ var ArrowButton = styled__default.button(_templateObject9$m || (_templateObject9
   var active = _ref6.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 ItemsSelectWrapper = styled__default.div(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n  ", " {\n    width: ", ";\n  }\n    margin-right: 35px;\n\n  ", " {\n    margin-bottom: 0;\n  }\n"])), SelectWrapper, function (_ref7) {
   var width = _ref7.width;
   return width ? width : "60px";
 }, StyledLabel);
@@ -12078,7 +12089,7 @@ 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$c, _templateObject12$a;
+var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$i, _templateObject11$c, _templateObject12$a;
 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"])));
@@ -12092,7 +12103,7 @@ var ExtraActionIcon = styled__default.div(_templateObject6$H || (_templateObject
 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 BreadcrumbIcon = styled__default.div(_templateObject10$i || (_templateObject10$i = _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 BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\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 0.25s ease;\n  &:hover {\n    color: var(--grey-12);\n  }\n"])));
 var RightArea = styled__default.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  align-items: center;\n  display: flex;\n  justify-content: right;\n"])));
 var UtilityHeader = function UtilityHeader(_ref2) {
@@ -12280,7 +12291,7 @@ 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$d, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
+var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$j, _templateObject11$d, _templateObject12$b, _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 $layout = _ref.$layout,
@@ -12306,7 +12317,7 @@ var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _
   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;
 }, 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$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n      ", "{\n        display: none;\n      }\n    "])), SideAreaInner) : null;
 }, function (_ref7) {
   var $layout = _ref7.$layout,
     $collapseState = _ref7.$collapseState,
@@ -12635,7 +12646,7 @@ 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$e, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$6;
+var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$k, _templateObject11$e, _templateObject12$c, _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 compact = _ref.compact;
   return compact && styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
@@ -12649,7 +12660,7 @@ var ContextWrapper = styled__default.div(_templateObject8$y || (_templateObject8
   var $menuOpen = _ref2.$menuOpen;
   return $menuOpen && styled.css(_templateObject9$p || (_templateObject9$p = _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$k || (_templateObject10$k = _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$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
 }, ContextIcon$1, IconWrapper, function (_ref4) {
@@ -12834,39 +12845,35 @@ 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$f, _templateObject12$d, _templateObject13$b;
+var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b, _templateObject14$9;
 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 SubmenuItemTitle = styled__default.span(_templateObject3$1c || (_templateObject3$1c = _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)(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
-var ExternalIconWrapper$1 = styled__default.div(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
-var SubmenuItemAnchor = styled__default.a(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
-var SubmenuItem = styled__default.li(_templateObject7$I || (_templateObject7$I = _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 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 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(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
-});
-var SubmenuContainer = styled__default.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  transition:\n    max-height var(--speed-normal) var(--easing-primary-in),\n    opacity var(--speed-fast) var(--easing-primary-in);\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(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n  width: inherit;\n\n  ", "{\n    max-height: 0;\n    opacity: 0;\n  }\n  ", ";\n\n  ", ";\n\n"])), function (_ref2) {
-  var minHeight = _ref2.minHeight;
-  return minHeight ? minHeight + "px" : "70px";
-}, SubmenuContainer, function (_ref3) {
-  var open = _ref3.open,
-    maxHeight = _ref3.maxHeight;
-  return open && styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n    ", "{\n      transition:\n        max-height var(--speed-normal) var(--easing-primary-in),\n        opacity var(--speed-fast) var(--easing-primary-in);\n      max-height: ", "px !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer, maxHeight);
-}, function (_ref4) {
-  var loading = _ref4.loading;
-  return loading === 'true' && styled.css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n    ", "{\n      max-height: none !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer);
-});
-var NavigationItem = function NavigationItem(_ref5) {
-  var item = _ref5.item,
-    menuOpen = _ref5.menuOpen,
-    submenuOpen = _ref5.submenuOpen,
-    contextKey = _ref5.contextKey,
-    loading = _ref5.loading,
-    topLevelPath = _ref5.topLevelPath,
-    minHeight = _ref5.minHeight,
-    onClickCallback = _ref5.onClickCallback,
-    readyCallback = _ref5.readyCallback;
+  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$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
+});
+var SubmenuContainer = styled__default.div(_templateObject11$f || (_templateObject11$f = _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$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  width: inherit;\n\n  ", "{\n    display: grid;\n    grid-template-rows: 0fr;\n  };\n\n  ", ";\n\n  ", ";\n\n"])), SubmenuContainer, function (_ref2) {
+  var open = _ref2.open;
+  return open && styled.css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n    ", "{\n      grid-template-rows: 1fr;\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      opacity: 1;\n    }\n  "])), SubmenuContainer);
+}, function (_ref3) {
+  var loading = _ref3.loading;
+  return loading === 'true' && styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n    ", "{\n      max-height: none !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer);
+});
+var NavigationItem = function NavigationItem(_ref4) {
+  var item = _ref4.item,
+    menuOpen = _ref4.menuOpen,
+    submenuOpen = _ref4.submenuOpen,
+    contextKey = _ref4.contextKey,
+    loading = _ref4.loading,
+    topLevelPath = _ref4.topLevelPath,
+    onClickCallback = _ref4.onClickCallback,
+    readyCallback = _ref4.readyCallback;
   var icon = item.icon,
     title = item.title,
     href = item.href,
@@ -12874,24 +12881,16 @@ var NavigationItem = function NavigationItem(_ref5) {
     isExternalLink = item.isExternalLink;
   var isActive = topLevelPath === href;
   var refSubmenu = React.useRef(null);
-  var _useState = React.useState(0),
-    submenuHeight = _useState[0],
-    setSubmenuHeight = _useState[1];
   var submenus = generateSubmenus(submenu, onClickCallback) || [];
   var hasSubmenu = submenus.length > 0;
   React.useEffect(function () {
-    if (refSubmenu && refSubmenu.current && refSubmenu.current.clientHeight !== 0) {
-      setSubmenuHeight(refSubmenu.current.clientHeight);
-    }
     if (readyCallback) {
       readyCallback(contextKey);
     }
-  }, [refSubmenu, setSubmenuHeight, readyCallback, contextKey]);
+  }, [refSubmenu, readyCallback, contextKey]);
   return React__default.createElement(ContextContainer, {
     open: submenuOpen,
-    loading: loading ? 'true' : 'false',
-    maxHeight: submenuHeight,
-    minHeight: minHeight
+    loading: loading ? 'true' : 'false'
   }, React__default.createElement(ContextItem, Object.assign({}, {
     title: title,
     href: href,
@@ -12905,7 +12904,7 @@ var NavigationItem = function NavigationItem(_ref5) {
     contextKey: contextKey
   })), hasSubmenu ? React__default.createElement(SubmenuContainer, {
     ref: refSubmenu
-  }, submenus) : null);
+  }, React__default.createElement(SubmenuContainerInner, null, submenus)) : null);
 };
 var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
   if (!submenu) {
@@ -12959,7 +12958,7 @@ 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$g, _templateObject12$e, _templateObject13$c, _templateObject14$9;
+var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$a;
 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"])));
@@ -12970,14 +12969,14 @@ var MenuFooter = styled__default.div(_templateObject7$J || (_templateObject7$J =
 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 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$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n    width: ", ";\n  "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
 });
 var Container$10 = styled__default.div(_templateObject11$g || (_templateObject11$g = _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$e || (_templateObject12$e = _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,
@@ -13087,7 +13086,7 @@ 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 _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$n;
 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"])));
@@ -13097,7 +13096,7 @@ var Container$11 = styled__default.div(_templateObject6$O || (_templateObject6$O
 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 CopyBox = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n"])));
 var UserDrawerMeta = function UserDrawerMeta(_ref) {
   var item = _ref.item,
     onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
@@ -13181,7 +13180,7 @@ 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$h, _templateObject12$f, _templateObject13$d, _templateObject14$a;
+var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$b;
 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"])));
@@ -13191,7 +13190,7 @@ var Logout = styled__default.div(_templateObject6$P || (_templateObject6$P = _ta
 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 LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$o || (_templateObject10$o = _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$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      color: var(--primary-9);\n    }\n  "])));
 });
@@ -13200,7 +13199,7 @@ var FooterMeta = styled__default.div(_templateObject12$f || (_templateObject12$f
   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;';
 });
@@ -13364,7 +13363,7 @@ 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$i, _templateObject12$g;
+var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g;
 var Container$15 = styled__default.div(_templateObject$1G || (_templateObject$1G = _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 SearchBar = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _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(_templateObject3$1j || (_templateObject3$1j = _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"])));
@@ -13378,7 +13377,7 @@ var DrawerToggle = styled__default.button.attrs({
   return isActive && styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-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(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose([""])));
-var Drawer = styled__default.div(_templateObject10$o || (_templateObject10$o = _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 Drawer = styled__default.div(_templateObject10$p || (_templateObject10$p = _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) {