scorer-ui-kit 2.6.6 → 2.6.7

package/dist/index.js

@@ -1563,16 +1563,16 @@ var _templateObject$1;
 var animationVariables = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  :root {\n\n    --easing-primary-in-out: cubic-bezier(0.76, 0, 0.24, 1);\n    --easing-primary-in: cubic-bezier(0.5, 0, 0.75, 0);\n    --easing-primary-out: cubic-bezier(0.25, 1, 0.5, 1);\n    \n    --speed-faster: 0.085s;\n    --speed-fast: 0.175s;\n    --speed-normal: 0.35s;\n    --speed-slow: 0.7s;\n    --speed-slower: 1.4s;\n    --speed-slowest: 2.8s;\n    \n  }\n"])));
 
 var _templateObject$2;
-var colorVariables = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  .light-theme {\n    /* --- Light Mode --- */\n    --primary-1: #fcfdff;\n    --primary-2: #f5f9ff;\n    --primary-3: #eaf3ff;\n    --primary-4: #dbecff;\n    --primary-5: #c9e2ff;\n    --primary-6: #b5d5ff;\n    --primary-7: #9bc3fa;\n    --primary-8: #76aaf4;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #3c6eb3;\n    --primary-12: #0b3162;\n    --primary-a1: #0055ff03;\n    --primary-a2: #0066ff0a;\n    --primary-a3: #006eff15;\n    --primary-a4: #0079ff24;\n    --primary-a5: #0077ff36;\n    --primary-a6: #016fff4a;\n    --primary-a7: #0066f364;\n    --primary-a8: #0061eb89;\n    --primary-a9: #006bff7f;\n    --primary-a10: #0062e98a;\n    --primary-a11: #00429cc3;\n    --primary-a12: #00285bf4;\n\n    --secondary-1: #fafefd;\n    --secondary-2: #f1fcfa;\n    --secondary-3: #e7f9f5;\n    --secondary-4: #d9f3ee;\n    --secondary-5: #c7ebe5;\n    --secondary-6: #afdfd7;\n    --secondary-7: #8dcec3;\n    --secondary-8: #53b9ab;\n    --secondary-9: #12a594;\n    --secondary-10: #0e9888;\n    --secondary-11: #067a6f;\n    --secondary-12: #10302b;\n    --secondary-a1: #05cd9b05;\n    --secondary-a2: #01c8a40e;\n    --secondary-a3: #02c09718;\n    --secondary-a4: #02af8c26;\n    --secondary-a5: #00a48938;\n    --secondary-a6: #00998050;\n    --secondary-a7: #01927a72;\n    --secondary-a8: #009783ac;\n    --secondary-a9: #009e8ced;\n    --secondary-a10: #009281f1;\n    --secondary-a11: #00776bf9;\n    --secondary-a12: #00221def;\n\n    --grey-1: #fcfcfd;\n    --grey-2: #f9f9fb;\n    --grey-3: #f0f0f3;\n    --grey-4: #e8e8ec;\n    --grey-5: #e0e1e6;\n    --grey-6: #d9d9e0e0;\n    --grey-7: #cdced6;\n    --grey-8: #b9bbc6;\n    --grey-9: #8b8d98;\n    --grey-10: #80838d;\n    --grey-11: #717989;\n    --grey-12: #5a6671;\n    --grey-a1: #00005503;\n    --grey-a2: #00005506;\n    --grey-a3: #00003310;\n    --grey-a4: #00002d17;\n    --grey-a5: #0009321f;\n    --grey-a6: #00002f26;\n    --grey-a7: #00062e32;\n    --grey-a8: #00083046;\n    --grey-a9: #00051d74;\n    --grey-a10: #00071b7f;\n    --grey-a11: #020b1d9f;\n    --grey-a12: #020b1de3;\n\n    --green-1: #fbfefc;\n    --green-2: #f2fcf5;\n    --green-3: #e9f9ee;\n    --green-4: #ddf3e4;\n    --green-5: #ccebd7;\n    --green-6: #b4dfc4;\n    --green-7: #92ceac;\n    --green-8: #5bb98c;\n    --green-9: #30a46c;\n    --green-10: #299764;\n    --green-11: #18794e;\n    --green-12: #153226;\n    --green-a1: #05c04304;\n    --green-a2: #00c43b0d;\n    --green-a3: #02ba3c16;\n    --green-a4: #01a63522;\n    --green-a5: #009b3633;\n    --green-a6: #0193364b;\n    --green-a7: #008c3d6d;\n    --green-a8: #00934ca4;\n    --green-a9: #008f4acf;\n    --green-a10: #008346d6;\n    --green-a11: #006b3be7;\n    --green-a12: #002012ea;\n\n    --orange-1: #fefcfb;\n    --orange-2: #fef8f4;\n    --orange-3: #fff1e7;\n    --orange-4: #ffe8d7;\n    --orange-5: #ffdcc3;\n    --orange-6: #ffcca7;\n    --orange-7: #ffb381;\n    --orange-8: #fa934e;\n    --orange-9: #f76808;\n    --orange-10: #ed5f00;\n    --orange-11: #bd4b00;\n    --orange-12: #451e11;\n    --orange-a1: #c0430504;\n    --orange-a2: #e860050b;\n    --orange-a3: #ff6c0318;\n    --orange-a4: #ff6e0028;\n    --orange-a5: #ff6b013c;\n    --orange-a6: #ff6b0158;\n    --orange-a7: #ff66017e;\n    --orange-a8: #f86300b1;\n    --orange-a9: #f76300f7;\n    --orange-a10: #ed5b00fa;\n    --orange-a11: #bc4800fa;\n    --orange-a12: #380e00ee;\n\n    --red-1: #fefcfc;\n    --red-2: #fdf8f8;\n    --red-3: #faedec;\n    --red-4: #fddfdd;\n    --red-5: #f8d2d0;\n    --red-6: #f1c3c1;\n    --red-7: #e6b1ae;\n    --red-8: #da9996;\n    --red-9: #d16565;\n    --red-10: #c45859;\n    --red-11: #b64d4e;\n    --red-12: #592525;\n    --red-a1: #aa000003;\n    --red-a2: #b7000007;\n    --red-a3: #bc0e0013;\n    --red-a4: #f00f0022;\n    --red-a5: #da0b002f;\n    --red-a6: #c609003e;\n    --red-a7: #b10a0051;\n    --red-a8: #a6080069;\n    --red-a9: #b300009a;\n    --red-a10: #a50002a7;\n    --red-a11: #970002b2;\n    --red-a12: #3d0000da;\n\n  }\n\n  .dark-theme {\n    /* --- Dark mode --- */\n    --primary-1: #000;\n    --primary-2: #09121e;\n    --primary-3: #0e2341;\n    --primary-4: #0c2f5d;\n    --primary-5: #153c70;\n    --primary-6: #214a81;\n    --primary-7: #2d5a97;\n    --primary-8: #366bb5;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #81b7ff;\n    --primary-12: #cee3ff;\n    --primary-a1: #0000;\n    --primary-a2: #4d99ff1e;\n    --primary-a3: #378aff41;\n    --primary-a4: #2181ff5d;\n    --primary-a5: #3089ff70;\n    --primary-a6: #4293ff81;\n    --primary-a7: #4c98ff97;\n    --primary-a8: #4c97ffb5;\n    --primary-a9: #80b5ff;\n    --primary-a10: #7bb2fff3;\n    --primary-a11: #81b7ff;\n    --primary-a12: #cee3ff;\n\n    --secondary-1: #091915;\n    --secondary-2: #04201b;\n    --secondary-3: #062923;\n    --secondary-4: #07312b;\n    --secondary-5: #083932;\n    --secondary-6: #09443c;\n    --secondary-7: #0b544a;\n    --secondary-8: #0c6d62;\n    --secondary-9: #12a594;\n    --secondary-10: #10b3a3;\n    --secondary-11: #0ac5b3;\n    --secondary-12: #e1faf4;\n    --secondary-a1: #0000;\n    --secondary-a2: #00fbd508;\n    --secondary-a3: #00fddc12;\n    --secondary-a4: #00fde81b;\n    --secondary-a5: #02fee424;\n    --secondary-a6: #09ffe630;\n    --secondary-a7: #11ffe342;\n    --secondary-a8: #11ffe75d;\n    --secondary-a9: #18ffe49b;\n    --secondary-a10: #13ffe7ab;\n    --secondary-a11: #0affe7bf;\n    --secondary-a12: #e6fff9fa;\n\n    --grey-1: #111113;\n    --grey-2: #18191b;\n    --grey-3: #212225;\n    --grey-4: #272a2d;\n    --grey-5: #2e3135;\n    --grey-6: #363a3f;\n    --grey-7: #43484e;\n    --grey-8: #5a6169;\n    --grey-9: #696e77;\n    --grey-10: #777b84;\n    --grey-11: #9a9fa7;\n    --grey-12: #d5d8dc;\n    --grey-a1: #0000;\n    --grey-a2: #d8f4f609;\n    --grey-a3: #ddeaf814;\n    --grey-a4: #d3edf81d;\n    --grey-a5: #d9edfe25;\n    --grey-a6: #d6ebfd30;\n    --grey-a7: #d9edff40;\n    --grey-a8: #d9edff5d;\n    --grey-a9: #dfebfd6d;\n    --grey-a10: #e5edfd7b;\n    --grey-a11: #f1f7feb5;\n    --grey-a12: #fcfdffef;\n\n    --green-1: #0d1912;\n    --green-2: #0c1f17;\n    --green-3: #0f291e;\n    --green-4: #113123;\n    --green-5: #133929;\n    --green-6: #164430;\n    --green-7: #1b543a;\n    --green-8: #236e4a;\n    --green-9: #30a46c;\n    --green-10: #3cb179;\n    --green-11: #4cc38a;\n    --green-12: #e5fbeb;\n    --green-a1: #0000;\n    --green-a2: #00f7ca07;\n    --green-a3: #2afebe12;\n    --green-a4: #33feb31b;\n    --green-a5: #38feb524;\n    --green-a6: #3dffb130;\n    --green-a7: #43ffad42;\n    --green-a8: #49ffaa5e;\n    --green-a9: #47ffa69a;\n    --green-a10: #54ffafa9;\n    --green-a11: #62ffb3bd;\n    --green-a12: #eafff0fa;\n\n    --orange-1: #1f1206;\n    --orange-2: #2b1400;\n    --orange-3: #391a03;\n    --orange-4: #441f04;\n    --orange-5: #4f2305;\n    --orange-6: #5f2a06;\n    --orange-7: #763205;\n    --orange-8: #943e00;\n    --orange-9: #f76808;\n    --orange-10: #ff802b;\n    --orange-11: #ff8b3e;\n    --orange-12: #feeadd;\n    --orange-a1: #0000;\n    --orange-a2: #fd37000e;\n    --orange-a3: #fd54001e;\n    --orange-a4: #fe61002a;\n    --orange-a5: #fe620137;\n    --orange-a6: #ff650649;\n    --orange-a7: #ff640363;\n    --orange-a8: #fe660085;\n    --orange-a9: #ff6b08f6;\n    --orange-a10: #ff842cfa;\n    --orange-a11: #ff8c3ffa;\n    --orange-a12: #ffeee1fa;\n\n    --red-1: #150f0f;\n    --red-2: #1e1413;\n    --red-3: #361717;\n    --red-4: #49191a;\n    --red-5: #582122;\n    --red-6: #692e2e;\n    --red-7: #813e3e;\n    --red-8: #a75252;\n    --red-9: #d16565;\n    --red-10: #c35959;\n    --red-11: #ff9795;\n    --red-12: #f9d5d3;\n    --red-a1: #de000005;\n    --red-a2: #fe48360e;\n    --red-a3: #fd383828;\n    --red-a4: #ff33383c;\n    --red-a5: #fd464a4d;\n    --red-a6: #fd5f5f5f;\n    --red-a7: #ff717178;\n    --red-a8: #ff7878a1;\n    --red-a9: #ff7979ce;\n    --red-a10: #ff7272bf;\n    --red-a11: #ff9795ef;\n    --red-a12: #ffdad8f9;\n\n  }\n\n  .light-theme, .dark-theme {\n\n    /* --- Constant Colors --- */\n    // The should not change between light and dark.\n    --white: #FFFFFF;\n    --white-1: var(--white);\n    --white-2: var(--white);\n    --white-3: var(--white);\n    --white-4: var(--white);\n    --white-5: var(--white);\n    --white-6: var(--white);\n    --white-7: var(--white);\n    --white-8: var(--white);\n    --white-9: var(--white);\n    --white-10: var(--white);\n    --white-11: var(--white);\n    --white-12: var(--white);\n\n    --white-a1: #fff0;\n    --white-a2: #ffffff03;\n    --white-a3: #ffffff09;\n    --white-a4: #ffffff0e;\n    --white-a5: #ffffff16;\n    --white-a6: #ffffff20;\n    --white-a7: #ffffff2d;\n    --white-a8: #ffffff3f;\n    --white-a9: #ffffff62;\n    --white-a10: #ffffff72;\n    --white-a11: #ffffff97;\n    --white-a12: #ffffffeb;\n\n    --black: #000;\n    --black-1: var(--black);\n    --black-2: var(--black);\n    --black-3: var(--black);\n    --black-4: var(--black);\n    --black-5: var(--black);\n    --black-6: var(--black);\n    --black-7: var(--black);\n    --black-8: var(--black);\n    --black-9: var(--black);\n    --black-10: var(--black);\n    --black-11: var(--black);\n    --black-12: var(--black);\n\n    --black-a1: #00000003;\n    --black-a2: #00000007;\n    --black-a3: #0000000c;\n    --black-a4: #00000012;\n    --black-a5: #00000017;\n    --black-a6: #0000001d;\n    --black-a7: #00000024;\n    --black-a8: #00000038;\n    --black-a9: #00000070;\n    --black-a10: #0000007a;\n    --black-a11: #00000090;\n    --black-a12: #000000e8;\n\n  }\n\n\n  /** --- Color Aliases --- */\n  // Used for state based variable names that can be detached later from base colors if needed.\n  .light-theme, .dark-theme {\n\n    --info-1: var(--secondary-1);\n    --info-2: var(--secondary-2);\n    --info-3: var(--secondary-3);\n    --info-4: var(--secondary-4);\n    --info-5: var(--secondary-5);\n    --info-6: var(--secondary-6);\n    --info-7: var(--secondary-7);\n    --info-8: var(--secondary-8);\n    --info-9: var(--secondary-9);\n    --info-10: var(--secondary-10);\n    --info-11: var(--secondary-11);\n    --info-12: var(--secondary-12);\n    --info-a1: var(--secondary-a1);\n    --info-a2: var(--secondary-a2);\n    --info-a3: var(--secondary-a3);\n    --info-a4: var(--secondary-a4);\n    --info-a5: var(--secondary-a5);\n    --info-a6: var(--secondary-a6);\n    --info-a7: var(--secondary-a7);\n    --info-a8: var(--secondary-a8);\n    --info-a9: var(--secondary-a9);\n    --info-a10: var(--secondary-a10);\n    --info-a11: var(--secondary-a11);\n    --info-a12: var(--secondary-a12);\n\n    --success-1: var(--green-1);\n    --success-2: var(--green-2);\n    --success-3: var(--green-3);\n    --success-4: var(--green-4);\n    --success-5: var(--green-5);\n    --success-6: var(--green-6);\n    --success-7: var(--green-7);\n    --success-8: var(--green-8);\n    --success-9: var(--green-9);\n    --success-10: var(--green-10);\n    --success-11: var(--green-11);\n    --success-12: var(--green-12);\n    --success-a1: var(--green-a1);\n    --success-a2: var(--green-a2);\n    --success-a3: var(--green-a3);\n    --success-a4: var(--green-a4);\n    --success-a5: var(--green-a5);\n    --success-a6: var(--green-a6);\n    --success-a7: var(--green-a7);\n    --success-a8: var(--green-a8);\n    --success-a9: var(--green-a9);\n    --success-a10: var(--green-a10);\n    --success-a11: var(--green-a11);\n    --success-a12: var(--green-a12);\n\n    --caution-1: var(--orange-1);\n    --caution-2: var(--orange-2);\n    --caution-3: var(--orange-3);\n    --caution-4: var(--orange-4);\n    --caution-5: var(--orange-5);\n    --caution-6: var(--orange-6);\n    --caution-7: var(--orange-7);\n    --caution-8: var(--orange-8);\n    --caution-9: var(--orange-9);\n    --caution-10: var(--orange-10);\n    --caution-11: var(--orange-11);\n    --caution-12: var(--orange-12);\n    --caution-a1: var(--orange-a1);\n    --caution-a2: var(--orange-a2);\n    --caution-a3: var(--orange-a3);\n    --caution-a4: var(--orange-a4);\n    --caution-a5: var(--orange-a5);\n    --caution-a6: var(--orange-a6);\n    --caution-a7: var(--orange-a7);\n    --caution-a8: var(--orange-a8);\n    --caution-a9: var(--orange-a9);\n    --caution-a10: var(--orange-a10);\n    --caution-a11: var(--orange-a11);\n    --caution-a12: var(--orange-a12);\n\n    --warning-1: var(--red-1);\n    --warning-2: var(--red-2);\n    --warning-3: var(--red-3);\n    --warning-4: var(--red-4);\n    --warning-5: var(--red-5);\n    --warning-6: var(--red-6);\n    --warning-7: var(--red-7);\n    --warning-8: var(--red-8);\n    --warning-9: var(--red-9);\n    --warning-10: var(--red-10);\n    --warning-11: var(--red-11);\n    --warning-12: var(--red-12);\n    --warning-a1: var(--red-a1);\n    --warning-a2: var(--red-a2);\n    --warning-a3: var(--red-a3);\n    --warning-a4: var(--red-a4);\n    --warning-a5: var(--red-a5);\n    --warning-a6: var(--red-a6);\n    --warning-a7: var(--red-a7);\n    --warning-a8: var(--red-a8);\n    --warning-a9: var(--red-a9);\n    --warning-a10: var(--red-a10);\n    --warning-a11: var(--red-a11);\n    --warning-a12: var(--red-a12);\n\n  }\n\n  .light-theme {\n    --shadow-primary-default: var(--grey-a4);\n    --shadow-primary-elevate: var(--primary-a5);\n\n    --shadow-secondary-default: var(--grey-3);\n    --shadow-secondary-elevate: var(--grey-a4);\n\n    --shadow-warning-default: var(--grey-a4);\n    --shadow-warning-elevate: var(--warning-a5);\n  }\n\n  .dark-theme {\n    --shadow-primary-default: var(--primary-a2);\n    --shadow-primary-elevate: var(--primary-a2);\n\n    --shadow-secondary-default: var(--black-a8);\n    --shadow-secondary-elevate: var(--primary-a4);\n\n    --shadow-warning-default: var(--grey-a3);\n    --shadow-warning-elevate: var(--warning-a7);\n  }\n\n  /* --- Component Aliases --- */\n  // For specific component uses within the UI Kit.\n  .light-theme, .dark-theme {\n    /* feedback */\n    --error: var(--warning-8);\n    --info: var(--primary-7);\n    --neutral: var(--grey-9);\n    --success: var(--success-8);\n    --warning: var(--caution-8);\n\n    /* tooltip */\n    --tooltip-warning: var(--warning-a9);\n    --tooltip-warning-arrow: var(--warning-9);\n    --tooltip-warning-border: var(--warning-a7);\n\n    --tooltip-success: var(--success-9);\n    --tooltip-success-arrow: var(--success-8);\n    --tooltip-success-border: var(--success-a7);\n\n    --tooltip-info: var(--primary-8);\n    --tooltip-info-arrow: var(--primary-8);\n    --tooltip-info-border: var(--primary-a8);\n\n    --tooltip-neutral: var(--grey-8);\n    --tooltip-neutral-arrow: var(--grey-7);\n    --tooltip-neutral-border: var(--grey-7);\n\n      /* icons */\n    --inverse: var(--white-1);\n    --mono: var(--grey-12);\n    --dimmed: var(--grey-11);\n    --subtle: var(--grey-10);\n    --primary: var(--primary-9);\n    --danger: var(--warning-9);\n\n\n    --spinner-danger: var(--warning-8);\n    --spinner-secondary: var(--grey-8);\n    --spinner-primary: var(--primary-6);\n    --spinner-simple: var(--grey-a8);\n\n    /* Global */\n    --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n    --main-background-color: var(--grey-3);\n\n    --primary-gradient-start: var(--primary-9);\n    --primary-gradient-end: var(--primary-10);\n    --primary-gradient: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));\n\n    --secondary-gradient-start: var(--grey-5);\n    --secondary-gradient-end: var(--grey-6);\n    --secondary-gradient: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));\n\n    --warning-gradient-start: var(--warning-9);\n    --warning-gradient-end: var(--warning-10);\n    --warning-gradient: linear-gradient(135deg, var(--warning-gradient-start), var(--warning-gradient-end));\n    \n    --dividing-line: var(--grey-4);\n    --global-element-background: var(--grey-2);\n    --global-menu-icon-background-default: transparent;\n    --global-menu-icon-background-hover: var(--primary-8);\n    --global-menu-icon-background-active: var(--primary-9);\n\n    /* Inputs */\n    --input-color-default: var(--grey-12);\n    --input-color-disabled: var(--grey-10);\n    --input-color-placeholder: var(--grey-10);\n    --input-color-unit: var(--grey-10);\n        \n    --input-default-background-color: var(--grey-1);\n    --input-default-border-color: var(--grey-6);\n    --input-default-shadow-color: transparent;\n\n    --input-default-focused-background-color: var(--grey-1);\n    --input-default-focused-border-color: var(--grey-6);\n    --input-default-focused-shadow-color: var(--grey-3);\n\n    --input-disabled-background-color: var(--grey-3);\n    --input-disabled-border-color: var(--grey-6);\n    --input-disabled-shadow-color: transparent;\n\n    --input-required-background-color: var(--grey-1);\n    --input-required-border-color: var(--primary-6);\n    --input-required-shadow-color: transparent;\n\n    --input-required-focused-background-color: var(--grey-1);\n    --input-required-focused-border-color: var(--primary-6);\n    --input-required-focused-shadow-color: var(--grey-3);\n\n    --input-valid-background-color: var(--grey-1);\n    --input-valid-border-color: var(--success-9);\n    --input-valid-shadow-color: transparent;\n\n    --input-valid-focused-background-color: var(--grey-1);\n    --input-valid-focused-border-color: var(--success-9);\n    --input-valid-focused-shadow-color: var(--grey-3);\n\n    --input-invalid-background-color: var(--grey-1);\n    --input-invalid-border-color: var(--warning-9);\n    --input-invalid-shadow-color: transparent;\n\n    --input-invalid-focused-background-color: var(--grey-1);\n    --input-invalid-focused-border-color: var(--warning-9);\n    --input-invalid-focused-shadow-color: var(--grey-3);\n\n    --input-processing-background-color: var(--grey-3)2;\n    --input-processing-border-color: var(--primary-10);\n    --input-processing-shadow-color: transparent;\n\n    --input-processing-focused-background-color: var(--grey-2);\n    --input-processing-focused-border-color: var(--primary-10);\n    --input-processing-focused-shadow-color: var(--grey-3);\n\n    /* Checkboxes and Radio Buttons */\n    --input-toggle-icon-color: var(--white-12);\n    \n    --input-toggle-unchecked-border-color: var(--grey-8);\n    --input-toggle-unchecked-background-color: transparent;\n    \n    --input-toggle-checked-border-color: var(--primary-9);\n    --input-toggle-checked-background-color: var(--primary-9);\n    \n    \n    --input-toggle-unchecked-hover-border-color: var(--primary-9);\n    --input-toggle-unchecked-hover-background-color: transparent;\n    \n    --input-toggle-checked-hover-border-color: var(--primary-7);\n    --input-toggle-checked-hover-background-color: var(--primary-7);\n    \n    \n    --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n    --input-toggle-unchecked-disabled-background-color: transparent;\n\n    --input-toggle-checked-disabled-border-color: var(--grey-7);\n    --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n    \n    --input-toggle-intermediate-border-color: var(--primary-11);\n    --input-toggle-intermediate-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-hover-border-color: var(--primary-11);\n    --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n    --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n    /* Labels */\n    --input-label: var(--grey-11);\n    --input-label-hover: var(--primary-8);\n    --input-label-active: var(--grey-12);\n\n  }\n\n  /* Filters */\n  .light-theme, .dark-theme {\n    --filter-button-text-color: var(--grey-11);\n    --filter-button-icon-color: var(--grey-10);\n    --filter-button-background-color: var(--grey-2);\n    --filter-button-stroke-color: var(--grey-a5);\n    --filter-button-shadow-color: var(--primary-a3);\n\n    --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n    --filter-dropdown-background-color-fallback: var(--grey-3);\n    --filter-dropdown-accent: var(--primary-a9); \n\n  }\n\n  .dark-theme {\n    --filter-button-shadow-color: var(--black-a8);\n  }\n\n  /* Buttons */\n  .light-theme, .dark-theme {\n    --button-background-color: var(--primary-9);\n    --button-border-color: var(--primary-9);\n    --button-inner-shadow-color: transparent;\n    --button-drop-shadow-color: var(--shadow-primary-default);\n    --button-text-color: var(--white-1);\n    --button-divider-color: var(--primary-a3);\n    --button-loading-area-background-color: var(--primary-a7);\n    --button-loading-area-divider-color: var(--primary-a8);\n\n    --button-hover-background-color: var(--primary-8);\n    --button-hover-border-color: var(--primary-a6);\n    --button-hover-inner-shadow-color: transparent;\n    --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n    --button-hover-text-color: var(--white-1);\n    --button-hover-divider-color: var(--primary-a3);\n    --button-hover-icon-area-background-color: var(--primary-a3);\n\n    --button-active-background-color: var(--button-hover-background-color);\n    --button-active-border-color: var(--button-hover-border-color);\n    --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n    --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n    --button-active-text-color: var(--white-1);\n    --button-active-divider-color: var(--primary-a3);\n    --button-active-icon-area-background-color: var(--primary-a3);\n\n    --button-gradient-start: var(--primary-gradient-start);\n    --button-gradient-end: var(--primary-gradient-end);\n\n    .button-design-secondary {\n      --button-background-color: var(--grey-9);\n      --button-border-color: var(--grey-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-secondary-default);\n      --button-text-color: var(--grey-12);\n      --button-divider-color: var(--grey-a3);\n      \n      --button-loading-area-background-color: var(--grey-a4);\n      --button-loading-area-divider-color: var(--grey-a3);\n\n      --button-hover-background-color: var(--grey-8);\n      --button-hover-border-color: var(--grey-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--secondary-gradient-start);\n      --button-gradient-end: var(--secondary-gradient-end);\n    }\n\n    .button-design-danger, .button-design-warning {\n      --button-background-color: var(--warning-9);\n      --button-border-color: var(--warning-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-warning-default);\n      --button-text-color: var(--white-1);\n      --button-divider-color: var(--warning-9);\n\n      --button-loading-area-background-color: var(--warning-a7);\n      --button-loading-area-divider-color: var(--warning-a9);\n\n      --button-hover-background-color: var(--warning-8);\n      --button-hover-border-color: var(--warning-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--warning-gradient-start);\n      --button-gradient-end: var(--warning-gradient-end);\n    }\n\n  }\n\n"])));
+var colorVariables = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  .light-theme {\n    /* --- Light Mode --- */\n    --primary-1: #fcfdff;\n    --primary-2: #f5f9ff;\n    --primary-3: #eaf3ff;\n    --primary-4: #dbecff;\n    --primary-5: #c9e2ff;\n    --primary-6: #b5d5ff;\n    --primary-7: #9bc3fa;\n    --primary-8: #76aaf4;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #3c6eb3;\n    --primary-12: #0b3162;\n    --primary-a1: #0055ff03;\n    --primary-a2: #0066ff0a;\n    --primary-a3: #006eff15;\n    --primary-a4: #0079ff24;\n    --primary-a5: #0077ff36;\n    --primary-a6: #016fff4a;\n    --primary-a7: #0066f364;\n    --primary-a8: #0061eb89;\n    --primary-a9: #006bff7f;\n    --primary-a10: #0062e98a;\n    --primary-a11: #00429cc3;\n    --primary-a12: #00285bf4;\n\n    --secondary-1: #fafefd;\n    --secondary-2: #f1fcfa;\n    --secondary-3: #e7f9f5;\n    --secondary-4: #d9f3ee;\n    --secondary-5: #c7ebe5;\n    --secondary-6: #afdfd7;\n    --secondary-7: #8dcec3;\n    --secondary-8: #53b9ab;\n    --secondary-9: #12a594;\n    --secondary-10: #0e9888;\n    --secondary-11: #067a6f;\n    --secondary-12: #10302b;\n    --secondary-a1: #05cd9b05;\n    --secondary-a2: #01c8a40e;\n    --secondary-a3: #02c09718;\n    --secondary-a4: #02af8c26;\n    --secondary-a5: #00a48938;\n    --secondary-a6: #00998050;\n    --secondary-a7: #01927a72;\n    --secondary-a8: #009783ac;\n    --secondary-a9: #009e8ced;\n    --secondary-a10: #009281f1;\n    --secondary-a11: #00776bf9;\n    --secondary-a12: #00221def;\n\n    --grey-1: #fcfcfd;\n    --grey-2: #f9f9fb;\n    --grey-3: #f0f0f3;\n    --grey-4: #e8e8ec;\n    --grey-5: #e0e1e6;\n    --grey-6: #d9d9e0e0;\n    --grey-7: #cdced6;\n    --grey-8: #b9bbc6;\n    --grey-9: #8b8d98;\n    --grey-10: #80838d;\n    --grey-11: #717989;\n    --grey-12: #5a6671;\n    --grey-a1: #00005503;\n    --grey-a2: #00005506;\n    --grey-a3: #00003310;\n    --grey-a4: #00002d17;\n    --grey-a5: #0009321f;\n    --grey-a6: #00002f26;\n    --grey-a7: #00062e32;\n    --grey-a8: #00083046;\n    --grey-a9: #00051d74;\n    --grey-a10: #00071b7f;\n    --grey-a11: #020b1d9f;\n    --grey-a12: #020b1de3;\n\n    --green-1: #fbfefc;\n    --green-2: #f2fcf5;\n    --green-3: #e9f9ee;\n    --green-4: #ddf3e4;\n    --green-5: #ccebd7;\n    --green-6: #b4dfc4;\n    --green-7: #92ceac;\n    --green-8: #5bb98c;\n    --green-9: #30a46c;\n    --green-10: #299764;\n    --green-11: #18794e;\n    --green-12: #153226;\n    --green-a1: #05c04304;\n    --green-a2: #00c43b0d;\n    --green-a3: #02ba3c16;\n    --green-a4: #01a63522;\n    --green-a5: #009b3633;\n    --green-a6: #0193364b;\n    --green-a7: #008c3d6d;\n    --green-a8: #00934ca4;\n    --green-a9: #008f4acf;\n    --green-a10: #008346d6;\n    --green-a11: #006b3be7;\n    --green-a12: #002012ea;\n\n    --orange-1: #fefcfb;\n    --orange-2: #fef8f4;\n    --orange-3: #fff1e7;\n    --orange-4: #ffe8d7;\n    --orange-5: #ffdcc3;\n    --orange-6: #ffcca7;\n    --orange-7: #ffb381;\n    --orange-8: #fa934e;\n    --orange-9: #f76808;\n    --orange-10: #ed5f00;\n    --orange-11: #bd4b00;\n    --orange-12: #451e11;\n    --orange-a1: #c0430504;\n    --orange-a2: #e860050b;\n    --orange-a3: #ff6c0318;\n    --orange-a4: #ff6e0028;\n    --orange-a5: #ff6b013c;\n    --orange-a6: #ff6b0158;\n    --orange-a7: #ff66017e;\n    --orange-a8: #f86300b1;\n    --orange-a9: #f76300f7;\n    --orange-a10: #ed5b00fa;\n    --orange-a11: #bc4800fa;\n    --orange-a12: #380e00ee;\n\n    --red-1: #fefcfc;\n    --red-2: #fdf8f8;\n    --red-3: #faedec;\n    --red-4: #fddfdd;\n    --red-5: #f8d2d0;\n    --red-6: #f1c3c1;\n    --red-7: #e6b1ae;\n    --red-8: #da9996;\n    --red-9: #d16565;\n    --red-10: #c45859;\n    --red-11: #b64d4e;\n    --red-12: #592525;\n    --red-a1: #aa000003;\n    --red-a2: #b7000007;\n    --red-a3: #bc0e0013;\n    --red-a4: #f00f0022;\n    --red-a5: #da0b002f;\n    --red-a6: #c609003e;\n    --red-a7: #b10a0051;\n    --red-a8: #a6080069;\n    --red-a9: #b300009a;\n    --red-a10: #a50002a7;\n    --red-a11: #970002b2;\n    --red-a12: #3d0000da;\n\n  }\n\n  .dark-theme {\n    /* --- Dark mode --- */\n    --primary-1: #000;\n    --primary-2: #09121e;\n    --primary-3: #0e2341;\n    --primary-4: #0c2f5d;\n    --primary-5: #153c70;\n    --primary-6: #214a81;\n    --primary-7: #2d5a97;\n    --primary-8: #366bb5;\n    --primary-9: #80b5ff;\n    --primary-10: #75aaf3;\n    --primary-11: #81b7ff;\n    --primary-12: #cee3ff;\n    --primary-a1: #0000;\n    --primary-a2: #4d99ff1e;\n    --primary-a3: #378aff41;\n    --primary-a4: #2181ff5d;\n    --primary-a5: #3089ff70;\n    --primary-a6: #4293ff81;\n    --primary-a7: #4c98ff97;\n    --primary-a8: #4c97ffb5;\n    --primary-a9: #80b5ff;\n    --primary-a10: #7bb2fff3;\n    --primary-a11: #81b7ff;\n    --primary-a12: #cee3ff;\n\n    --secondary-1: #091915;\n    --secondary-2: #04201b;\n    --secondary-3: #062923;\n    --secondary-4: #07312b;\n    --secondary-5: #083932;\n    --secondary-6: #09443c;\n    --secondary-7: #0b544a;\n    --secondary-8: #0c6d62;\n    --secondary-9: #12a594;\n    --secondary-10: #10b3a3;\n    --secondary-11: #0ac5b3;\n    --secondary-12: #e1faf4;\n    --secondary-a1: #0000;\n    --secondary-a2: #00fbd508;\n    --secondary-a3: #00fddc12;\n    --secondary-a4: #00fde81b;\n    --secondary-a5: #02fee424;\n    --secondary-a6: #09ffe630;\n    --secondary-a7: #11ffe342;\n    --secondary-a8: #11ffe75d;\n    --secondary-a9: #18ffe49b;\n    --secondary-a10: #13ffe7ab;\n    --secondary-a11: #0affe7bf;\n    --secondary-a12: #e6fff9fa;\n\n    --grey-1: #111113;\n    --grey-2: #18191b;\n    --grey-3: #212225;\n    --grey-4: #272a2d;\n    --grey-5: #2e3135;\n    --grey-6: #363a3f;\n    --grey-7: #43484e;\n    --grey-8: #5a6169;\n    --grey-9: #696e77;\n    --grey-10: #777b84;\n    --grey-11: #9a9fa7;\n    --grey-12: #d5d8dc;\n    --grey-a1: #0000;\n    --grey-a2: #d8f4f609;\n    --grey-a3: #ddeaf814;\n    --grey-a4: #d3edf81d;\n    --grey-a5: #d9edfe25;\n    --grey-a6: #d6ebfd30;\n    --grey-a7: #d9edff40;\n    --grey-a8: #d9edff5d;\n    --grey-a9: #dfebfd6d;\n    --grey-a10: #e5edfd7b;\n    --grey-a11: #f1f7feb5;\n    --grey-a12: #fcfdffef;\n\n    --green-1: #0d1912;\n    --green-2: #0c1f17;\n    --green-3: #0f291e;\n    --green-4: #113123;\n    --green-5: #133929;\n    --green-6: #164430;\n    --green-7: #1b543a;\n    --green-8: #236e4a;\n    --green-9: #30a46c;\n    --green-10: #3cb179;\n    --green-11: #4cc38a;\n    --green-12: #e5fbeb;\n    --green-a1: #0000;\n    --green-a2: #00f7ca07;\n    --green-a3: #2afebe12;\n    --green-a4: #33feb31b;\n    --green-a5: #38feb524;\n    --green-a6: #3dffb130;\n    --green-a7: #43ffad42;\n    --green-a8: #49ffaa5e;\n    --green-a9: #47ffa69a;\n    --green-a10: #54ffafa9;\n    --green-a11: #62ffb3bd;\n    --green-a12: #eafff0fa;\n\n    --orange-1: #1f1206;\n    --orange-2: #2b1400;\n    --orange-3: #391a03;\n    --orange-4: #441f04;\n    --orange-5: #4f2305;\n    --orange-6: #5f2a06;\n    --orange-7: #763205;\n    --orange-8: #943e00;\n    --orange-9: #f76808;\n    --orange-10: #ff802b;\n    --orange-11: #ff8b3e;\n    --orange-12: #feeadd;\n    --orange-a1: #0000;\n    --orange-a2: #fd37000e;\n    --orange-a3: #fd54001e;\n    --orange-a4: #fe61002a;\n    --orange-a5: #fe620137;\n    --orange-a6: #ff650649;\n    --orange-a7: #ff640363;\n    --orange-a8: #fe660085;\n    --orange-a9: #ff6b08f6;\n    --orange-a10: #ff842cfa;\n    --orange-a11: #ff8c3ffa;\n    --orange-a12: #ffeee1fa;\n\n    --red-1: #150f0f;\n    --red-2: #1e1413;\n    --red-3: #361717;\n    --red-4: #49191a;\n    --red-5: #582122;\n    --red-6: #692e2e;\n    --red-7: #813e3e;\n    --red-8: #a75252;\n    --red-9: #d16565;\n    --red-10: #c35959;\n    --red-11: #ff9795;\n    --red-12: #f9d5d3;\n    --red-a1: #de000005;\n    --red-a2: #fe48360e;\n    --red-a3: #fd383828;\n    --red-a4: #ff33383c;\n    --red-a5: #fd464a4d;\n    --red-a6: #fd5f5f5f;\n    --red-a7: #ff717178;\n    --red-a8: #ff7878a1;\n    --red-a9: #ff7979ce;\n    --red-a10: #ff7272bf;\n    --red-a11: #ff9795ef;\n    --red-a12: #ffdad8f9;\n\n  }\n\n  .light-theme, .dark-theme {\n\n    /* --- Constant Colors --- */\n    // The should not change between light and dark.\n    --white: #FFFFFF;\n    --white-1: var(--white);\n    --white-2: var(--white);\n    --white-3: var(--white);\n    --white-4: var(--white);\n    --white-5: var(--white);\n    --white-6: var(--white);\n    --white-7: var(--white);\n    --white-8: var(--white);\n    --white-9: var(--white);\n    --white-10: var(--white);\n    --white-11: var(--white);\n    --white-12: var(--white);\n\n    --white-a1: #fff0;\n    --white-a2: #ffffff03;\n    --white-a3: #ffffff09;\n    --white-a4: #ffffff0e;\n    --white-a5: #ffffff16;\n    --white-a6: #ffffff20;\n    --white-a7: #ffffff2d;\n    --white-a8: #ffffff3f;\n    --white-a9: #ffffff62;\n    --white-a10: #ffffff72;\n    --white-a11: #ffffff97;\n    --white-a12: #ffffffeb;\n\n    --black: #000;\n    --black-1: var(--black);\n    --black-2: var(--black);\n    --black-3: var(--black);\n    --black-4: var(--black);\n    --black-5: var(--black);\n    --black-6: var(--black);\n    --black-7: var(--black);\n    --black-8: var(--black);\n    --black-9: var(--black);\n    --black-10: var(--black);\n    --black-11: var(--black);\n    --black-12: var(--black);\n\n    --black-a1: #00000003;\n    --black-a2: #00000007;\n    --black-a3: #0000000c;\n    --black-a4: #00000012;\n    --black-a5: #00000017;\n    --black-a6: #0000001d;\n    --black-a7: #00000024;\n    --black-a8: #00000038;\n    --black-a9: #00000070;\n    --black-a10: #0000007a;\n    --black-a11: #00000090;\n    --black-a12: #000000e8;\n\n  }\n\n\n  /** --- Color Aliases --- */\n  // Used for state based variable names that can be detached later from base colors if needed.\n  .light-theme, .dark-theme {\n\n    --info-1: var(--secondary-1);\n    --info-2: var(--secondary-2);\n    --info-3: var(--secondary-3);\n    --info-4: var(--secondary-4);\n    --info-5: var(--secondary-5);\n    --info-6: var(--secondary-6);\n    --info-7: var(--secondary-7);\n    --info-8: var(--secondary-8);\n    --info-9: var(--secondary-9);\n    --info-10: var(--secondary-10);\n    --info-11: var(--secondary-11);\n    --info-12: var(--secondary-12);\n    --info-a1: var(--secondary-a1);\n    --info-a2: var(--secondary-a2);\n    --info-a3: var(--secondary-a3);\n    --info-a4: var(--secondary-a4);\n    --info-a5: var(--secondary-a5);\n    --info-a6: var(--secondary-a6);\n    --info-a7: var(--secondary-a7);\n    --info-a8: var(--secondary-a8);\n    --info-a9: var(--secondary-a9);\n    --info-a10: var(--secondary-a10);\n    --info-a11: var(--secondary-a11);\n    --info-a12: var(--secondary-a12);\n\n    --success-1: var(--green-1);\n    --success-2: var(--green-2);\n    --success-3: var(--green-3);\n    --success-4: var(--green-4);\n    --success-5: var(--green-5);\n    --success-6: var(--green-6);\n    --success-7: var(--green-7);\n    --success-8: var(--green-8);\n    --success-9: var(--green-9);\n    --success-10: var(--green-10);\n    --success-11: var(--green-11);\n    --success-12: var(--green-12);\n    --success-a1: var(--green-a1);\n    --success-a2: var(--green-a2);\n    --success-a3: var(--green-a3);\n    --success-a4: var(--green-a4);\n    --success-a5: var(--green-a5);\n    --success-a6: var(--green-a6);\n    --success-a7: var(--green-a7);\n    --success-a8: var(--green-a8);\n    --success-a9: var(--green-a9);\n    --success-a10: var(--green-a10);\n    --success-a11: var(--green-a11);\n    --success-a12: var(--green-a12);\n\n    --caution-1: var(--orange-1);\n    --caution-2: var(--orange-2);\n    --caution-3: var(--orange-3);\n    --caution-4: var(--orange-4);\n    --caution-5: var(--orange-5);\n    --caution-6: var(--orange-6);\n    --caution-7: var(--orange-7);\n    --caution-8: var(--orange-8);\n    --caution-9: var(--orange-9);\n    --caution-10: var(--orange-10);\n    --caution-11: var(--orange-11);\n    --caution-12: var(--orange-12);\n    --caution-a1: var(--orange-a1);\n    --caution-a2: var(--orange-a2);\n    --caution-a3: var(--orange-a3);\n    --caution-a4: var(--orange-a4);\n    --caution-a5: var(--orange-a5);\n    --caution-a6: var(--orange-a6);\n    --caution-a7: var(--orange-a7);\n    --caution-a8: var(--orange-a8);\n    --caution-a9: var(--orange-a9);\n    --caution-a10: var(--orange-a10);\n    --caution-a11: var(--orange-a11);\n    --caution-a12: var(--orange-a12);\n\n    --warning-1: var(--red-1);\n    --warning-2: var(--red-2);\n    --warning-3: var(--red-3);\n    --warning-4: var(--red-4);\n    --warning-5: var(--red-5);\n    --warning-6: var(--red-6);\n    --warning-7: var(--red-7);\n    --warning-8: var(--red-8);\n    --warning-9: var(--red-9);\n    --warning-10: var(--red-10);\n    --warning-11: var(--red-11);\n    --warning-12: var(--red-12);\n    --warning-a1: var(--red-a1);\n    --warning-a2: var(--red-a2);\n    --warning-a3: var(--red-a3);\n    --warning-a4: var(--red-a4);\n    --warning-a5: var(--red-a5);\n    --warning-a6: var(--red-a6);\n    --warning-a7: var(--red-a7);\n    --warning-a8: var(--red-a8);\n    --warning-a9: var(--red-a9);\n    --warning-a10: var(--red-a10);\n    --warning-a11: var(--red-a11);\n    --warning-a12: var(--red-a12);\n\n  }\n\n  .light-theme {\n    --shadow-primary-default: var(--grey-a4);\n    --shadow-primary-elevate: var(--primary-a5);\n\n    --shadow-secondary-default: var(--grey-3);\n    --shadow-secondary-elevate: var(--grey-a4);\n\n    --shadow-warning-default: var(--grey-a4);\n    --shadow-warning-elevate: var(--warning-a5);\n  }\n\n  .dark-theme {\n    --shadow-primary-default: var(--primary-a2);\n    --shadow-primary-elevate: var(--primary-a2);\n\n    --shadow-secondary-default: var(--black-a8);\n    --shadow-secondary-elevate: var(--primary-a4);\n\n    --shadow-warning-default: var(--grey-a3);\n    --shadow-warning-elevate: var(--warning-a7);\n  }\n\n  /* --- Component Aliases --- */\n  // For specific component uses within the UI Kit.\n  .light-theme, .dark-theme {\n    /* feedback */\n    --error: var(--warning-8);\n    --info: var(--primary-7);\n    --neutral: var(--grey-9);\n    --success: var(--success-8);\n    --warning: var(--caution-8);\n\n    /* tooltip */\n    --tooltip-warning: var(--warning-a9);\n    --tooltip-warning-arrow: var(--warning-9);\n    --tooltip-warning-border: var(--warning-a7);\n\n    --tooltip-success: var(--success-9);\n    --tooltip-success-arrow: var(--success-8);\n    --tooltip-success-border: var(--success-a7);\n\n    --tooltip-info: var(--primary-8);\n    --tooltip-info-arrow: var(--primary-8);\n    --tooltip-info-border: var(--primary-a8);\n\n    --tooltip-neutral: var(--grey-8);\n    --tooltip-neutral-arrow: var(--grey-7);\n    --tooltip-neutral-border: var(--grey-7);\n\n      /* icons */\n    --inverse: var(--white-1);\n    --mono: var(--grey-12);\n    --dimmed: var(--grey-11);\n    --subtle: var(--grey-10);\n    --primary: var(--primary-9);\n    --danger: var(--warning-9);\n\n\n    --spinner-danger: var(--warning-8);\n    --spinner-secondary: var(--grey-8);\n    --spinner-primary: var(--primary-6);\n    --spinner-simple: var(--grey-a8);\n\n    /* Global */\n    --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n    --main-background-color: var(--grey-3);\n\n    --primary-gradient-start: var(--primary-9);\n    --primary-gradient-end: var(--primary-10);\n    --primary-gradient: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));\n\n    --secondary-gradient-start: var(--grey-5);\n    --secondary-gradient-end: var(--grey-6);\n    --secondary-gradient: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));\n\n    --warning-gradient-start: var(--warning-9);\n    --warning-gradient-end: var(--warning-10);\n    --warning-gradient: linear-gradient(135deg, var(--warning-gradient-start), var(--warning-gradient-end));\n    \n    --dividing-line: var(--grey-4);\n    --global-element-background: var(--grey-2);\n    --global-menu-icon-background-default: transparent;\n    --global-menu-icon-background-hover: var(--primary-8);\n    --global-menu-icon-background-active: var(--primary-9);\n\n    /* Inputs */\n    --input-color-default: var(--grey-12);\n    --input-color-disabled: var(--grey-10);\n    --input-color-placeholder: var(--grey-10);\n    --input-color-unit: var(--grey-10);\n        \n    --input-default-background-color: var(--grey-1);\n    --input-default-border-color: var(--grey-6);\n    --input-default-shadow-color: transparent;\n\n    --input-default-focused-background-color: var(--grey-1);\n    --input-default-focused-border-color: var(--grey-6);\n    --input-default-focused-shadow-color: var(--grey-3);\n\n    --input-disabled-background-color: var(--grey-3);\n    --input-disabled-border-color: var(--grey-6);\n    --input-disabled-shadow-color: transparent;\n\n    --input-required-background-color: var(--grey-1);\n    --input-required-border-color: var(--primary-6);\n    --input-required-shadow-color: transparent;\n\n    --input-required-focused-background-color: var(--grey-1);\n    --input-required-focused-border-color: var(--primary-6);\n    --input-required-focused-shadow-color: var(--grey-3);\n\n    --input-valid-background-color: var(--grey-1);\n    --input-valid-border-color: var(--success-9);\n    --input-valid-shadow-color: transparent;\n\n    --input-valid-focused-background-color: var(--grey-1);\n    --input-valid-focused-border-color: var(--success-9);\n    --input-valid-focused-shadow-color: var(--grey-3);\n\n    --input-invalid-background-color: var(--grey-1);\n    --input-invalid-border-color: var(--warning-9);\n    --input-invalid-shadow-color: transparent;\n\n    --input-invalid-focused-background-color: var(--grey-1);\n    --input-invalid-focused-border-color: var(--warning-9);\n    --input-invalid-focused-shadow-color: var(--grey-3);\n\n    --input-processing-background-color: var(--grey-3)2;\n    --input-processing-border-color: var(--primary-10);\n    --input-processing-shadow-color: transparent;\n\n    --input-processing-focused-background-color: var(--grey-2);\n    --input-processing-focused-border-color: var(--primary-10);\n    --input-processing-focused-shadow-color: var(--grey-3);\n\n    /* Input Icons */\n    --input-lead-icon: var(--grey-12);\n    --input-disabled-lead-icon: var(--grey-10);\n\n    /* Checkboxes and Radio Buttons */\n    --input-toggle-icon-color: var(--white-12);\n    \n    --input-toggle-unchecked-border-color: var(--grey-8);\n    --input-toggle-unchecked-background-color: transparent;\n    \n    --input-toggle-checked-border-color: var(--primary-9);\n    --input-toggle-checked-background-color: var(--primary-9);\n    \n    \n    --input-toggle-unchecked-hover-border-color: var(--primary-9);\n    --input-toggle-unchecked-hover-background-color: transparent;\n    \n    --input-toggle-checked-hover-border-color: var(--primary-7);\n    --input-toggle-checked-hover-background-color: var(--primary-7);\n    \n    \n    --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n    --input-toggle-unchecked-disabled-background-color: transparent;\n\n    --input-toggle-checked-disabled-border-color: var(--grey-7);\n    --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n    \n    --input-toggle-intermediate-border-color: var(--primary-11);\n    --input-toggle-intermediate-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-hover-border-color: var(--primary-11);\n    --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n    --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n    --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n    /* Labels */\n    --input-label: var(--grey-11);\n    --input-label-hover: var(--primary-8);\n    --input-label-active: var(--grey-12);\n\n  }\n\n  /* Filters */\n  .light-theme, .dark-theme {\n    --filter-button-text-color: var(--grey-11);\n    --filter-button-icon-color: var(--grey-10);\n    --filter-button-background-color: var(--grey-2);\n    --filter-button-stroke-color: var(--grey-a5);\n    --filter-button-shadow-color: var(--primary-a3);\n\n    --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n    --filter-dropdown-background-color-fallback: var(--grey-3);\n    --filter-dropdown-accent: var(--primary-a9); \n\n  }\n\n  .dark-theme {\n    --filter-button-shadow-color: var(--black-a8);\n  }\n\n  /* Buttons */\n  .light-theme, .dark-theme {\n    --button-background-color: var(--primary-9);\n    --button-border-color: var(--primary-9);\n    --button-inner-shadow-color: transparent;\n    --button-drop-shadow-color: var(--shadow-primary-default);\n    --button-text-color: var(--white-1);\n    --button-divider-color: var(--primary-a3);\n    --button-loading-area-background-color: var(--primary-a7);\n    --button-loading-area-divider-color: var(--primary-a8);\n\n    --button-hover-background-color: var(--primary-8);\n    --button-hover-border-color: var(--primary-a6);\n    --button-hover-inner-shadow-color: transparent;\n    --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n    --button-hover-text-color: var(--white-1);\n    --button-hover-divider-color: var(--primary-a3);\n    --button-hover-icon-area-background-color: var(--primary-a3);\n\n    --button-active-background-color: var(--button-hover-background-color);\n    --button-active-border-color: var(--button-hover-border-color);\n    --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n    --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n    --button-active-text-color: var(--white-1);\n    --button-active-divider-color: var(--primary-a3);\n    --button-active-icon-area-background-color: var(--primary-a3);\n\n    --button-gradient-start: var(--primary-gradient-start);\n    --button-gradient-end: var(--primary-gradient-end);\n\n    .button-design-secondary {\n      --button-background-color: var(--grey-9);\n      --button-border-color: var(--grey-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-secondary-default);\n      --button-text-color: var(--grey-12);\n      --button-divider-color: var(--grey-a3);\n      \n      --button-loading-area-background-color: var(--grey-a4);\n      --button-loading-area-divider-color: var(--grey-a3);\n\n      --button-hover-background-color: var(--grey-8);\n      --button-hover-border-color: var(--grey-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--secondary-gradient-start);\n      --button-gradient-end: var(--secondary-gradient-end);\n    }\n\n    .button-design-danger, .button-design-warning {\n      --button-background-color: var(--warning-9);\n      --button-border-color: var(--warning-9);\n      --button-inner-shadow-color: transparent;\n      --button-drop-shadow-color: var(--shadow-warning-default);\n      --button-text-color: var(--white-1);\n      --button-divider-color: var(--warning-9);\n\n      --button-loading-area-background-color: var(--warning-a7);\n      --button-loading-area-divider-color: var(--warning-a9);\n\n      --button-hover-background-color: var(--warning-8);\n      --button-hover-border-color: var(--warning-a6);\n      --button-hover-inner-shadow-color: var(--white-a8);\n      --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n      --button-hover-text-color: var(--white-1);\n\n      --button-active-background-color: var(--button-hover-background-color);\n      --button-active-border-color: var(--button-hover-border-color);\n      --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n      --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n      --button-active-text-color: var(--white-1);\n      \n      --button-gradient-start: var(--warning-gradient-start);\n      --button-gradient-end: var(--warning-gradient-end);\n    }\n\n  }\n\n"])));
 
 var _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);
+var ThemeVariables = styled.createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n  ", ";\n  ", ";\n  ", ";\n\n  :root {\n\n    --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n    --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n    --common-height: 32px;\n\n    --font-size: 14px;\n\n    --global-menu-width-closed: 80px;\n    --global-menu-width-open: 280px;\n\n    --input-height: 40px;\n    --input-compact-height: 32px;\n    --input-required-dot-display: inline-block;\n\n    --button-font-size: 14px;\n    --button-height: 32px;\n    --button-h-padding: 8px;\n    --button-lift-default-x: 0px;\n    --button-lift-default-y: 2px;\n    --button-lift-default-blur: 4px;\n    --button-lift-default-spread: 2px;\n\n    --button-icon-size: 14px;\n    --button-icon-h-padding: 8px;\n\n    --input-box-shadow-x: 0;\n    --input-box-shadow-y: 0;\n    --input-box-shadow-blur: 0;\n    --input-box-shadow-spread: 0;\n\n    --input-focused-box-shadow-x: 0;\n    --input-focused-box-shadow-y: 3px;\n    --input-focused-box-shadow-blur: 3px;\n    --input-focused-box-shadow-spread: 0;\n\n  }\n\n  .button-size-xsmall {\n    --button-font-size: 12px;\n    --button-height: 20px;\n    --button-h-padding: 4px;\n    --button-icon-size: 10px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .button-size-small {\n    --button-font-size: 12px;\n    --button-height: 24px;\n    --button-h-padding: 4px;\n    --button-icon-size: 12px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .button-size-large {\n    --button-font-size: 16px;\n    --button-height: 40px;\n    --button-h-padding: 8px;\n    --button-icon-size: 16px;\n    --button-icon-h-padding: 8px;\n  }\n\n  \n\n  .split-button-primary {\n    --border-color: var(--primary-9);\n    --border-active-color: var(--primary-11);\n    --toggle-icon-border: var(--primary-9);\n    --gradient-1: #72C3EE;\n    --gradient-2: #5CACEE;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--primary-a3);\n    --button-active-bg: var(--primary-10);\n    --toggle-icon-hover-bg: var(--white-a7);\n    --toggle-icon-active-bg:  var(--black-a6);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-secondary {\n    --border-color: var(--grey-7);\n    --border-active-color: var(--grey-7);\n    --toggle-icon-border: var(--grey-6);\n    --gradient-1: #2E3135;\n    --gradient-2: #363A3F;\n    --button-lift-default-color: rgba(221, 234, 248, 0.08);\n    --text-color: var(--grey-12);\n    --text-disabled-color: var(--grey-a11);\n    --button-hover-bg: var(--grey-a6);\n    --button-active-bg: var(--grey-a3);\n    --toggle-icon-hover-bg: var(--grey-a6);\n    --toggle-icon-active-bg:  var(--grey-a3);\n    --toggle-icon: var(--grey-12);\n    --toggle-icon-active: var(--grey-a11);\n    --toggle-icon-disabled: var(--grey-10);\n  }\n\n  .split-button-danger {\n    --border-color: var(--warning-10);\n    --border-active-color: var(--warning-10);\n    --toggle-icon-border: var(--warning-9);\n    --gradient-1: #D16565;\n    --gradient-2: #E76F6F;\n    --button-lift-default-color: rgba(255, 113, 113, 0.47);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--warning-a7);\n    --button-active-bg: var(--warning-8);\n    --toggle-icon-hover-bg: var(--warning-a7);\n    --toggle-icon-active-bg:  var(--warning-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-custom {\n    --border-color: var(--info-10);\n    --border-active-color: var(--info-10);\n    --toggle-icon-border: var(--info-9);\n    --gradient-1: var(--info-10);\n    --gradient-2: var(--info-9);\n    --button-lift-default-color:  var(--info-a3);\n    --text-color:  var(--white-a12);\n    --text-disabled-color: var(--white-a11);\n    --button-hover-bg: var(--info-a7);\n    --button-active-bg: var(--info-8);\n    --toggle-icon-hover-bg: var(--info-a7);\n    --toggle-icon-active-bg:  var(--info-a5);\n    --toggle-icon: var(--white-a12);\n    --toggle-icon-active: var(--white-a11);\n    --toggle-icon-disabled: var(--white-a10);\n  }\n\n  .split-button-size-small {\n    --button-font-size: 12px;\n    --button-height: 24px;\n    --button-h-padding: 4px;\n    --button-icon-size: 12px;\n    --button-icon-h-padding: 8px;\n  }\n\n  .split-button-size-large {\n    --button-font-size: 16px;\n    --button-height: 40px;\n    --button-h-padding: 8px;\n    --button-icon-size: 16px;\n    --button-icon-h-padding: 8px;\n  }\n\n"])), layoutVariables, animationVariables, colorVariables);
 
 var _templateObject$4;
 var BaseStyles = styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n  * , body{\n    box-sizing: border-box;\n    text-rendering: geometricPrecision; \n  }\n  body, html , #root {\n    min-width: 100%;\n    min-height: 100vh;\n    margin: 0;\n  }\n\n  body {\n    font-family: var(--font-ui);\n    color: var(--grey-11);\n    background: var(--main-background-gradient);\n    background-attachment: fixed;\n  }\n  \n"])));
 
 var _templateObject$5, _templateObject2, _templateObject3;
-var wrapperCss = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n\n    line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n      vector-effect: non-scaling-stroke;\n    }\n  }\n"])));
+var wrapperCss = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  \n  line-height: 0;\n\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n\n    line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n      vector-effect: non-scaling-stroke;\n      transition: stroke var(--speed-normal) var(--easing-primary-out);\n    }\n  }\n"])));
 var IconWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), wrapperCss);
 var IconWrapperForSVG = styled__default.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), wrapperCss);
 var Icon = function Icon(_ref) {
@@ -2376,8 +2376,8 @@ var Label = function Label(_ref5) {
 
 var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
 var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$5, _templateObject7$5;
-var StyledInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-data);\n  line-height: var(--common-height);\n\n  font-size: 14px;\n  flex: 1;\n  color: var(--input-color-default);\n  width: 100%;\n  border: none;\n  background-color: transparent;\n  box-sizing: border-box;\n  outline: none;\n    \n  &::placeholder {\n    color: var(--input-color-placeholder);\n    font-style: italic;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    color: var(--input-color-disabled);\n  }\n"])), removeAutoFillStyle);
-var InputContainer$1 = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: var(--common-height);\n  padding: 0 8px;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  border-radius: 3px;\n  \n  ", ";\n\n  ", "\n\n"])), function (_ref) {
+var StyledInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-data);\n  line-height: var(--input-compact-height);\n\n  font-size: 14px;\n  flex: 1;\n  color: var(--input-color-default);\n  width: 100%;\n  border: none;\n  background-color: transparent;\n  box-sizing: border-box;\n  outline: none;\n    \n  &::placeholder {\n    color: var(--input-color-placeholder);\n    font-style: italic;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    color: var(--input-color-disabled);\n  }\n"])), removeAutoFillStyle);
+var InputContainer$1 = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: var(--input-compact-height);\n  padding: 0 8px;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  border-radius: 3px;\n  \n  ", ";\n\n  ", "\n\n"])), function (_ref) {
   var fieldState = _ref.fieldState;
   return styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    transition: \n      border var(--speed-normal) var(--easing-primary-out),\n      background-color var(--speed-normal) var(--easing-primary-out);\n  "])), fieldState, fieldState);
 }, function (_ref2) {
@@ -2879,55 +2879,41 @@ var TextArea = function TextArea(_ref3) {
   }, props), children), showFeedback && fieldState && React__default.createElement(FeedbackContainer$1, null, React__default.createElement(FeedbackIcon$1, null, feedbackIcon(fieldState)), React__default.createElement(FeedbackMessage$1, null, feedbackMessage)));
 };
 
-var _excluded$8 = ["placeholder", "label", "isCompact", "defaultValue", "changeCallback", "children"];
-var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$7, _templateObject10$5, _templateObject11$3, _templateObject12$2, _templateObject13$2;
-var SelectWrapper = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  width: 100%;\n\n  ", " {\n    position: absolute;\n    top: calc(50% - 7px);\n    right: 10px;\n    pointer-events: none;\n  }\n"])), IconWrapper);
-var StyledSelect = styled__default.select(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 3px;\n  height: 40px;\n  padding: 0 25px 0 15px;\n  appearance: none;\n  line-height: 1.56;\n  width: 100%;\n  cursor: pointer;\n  ", "\n\n  &:disabled {\n    ", "\n    cursor: not-allowed;\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n"])), function (_ref) {
-  var styles = _ref.theme.styles;
-  return styled.css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), styles.form.input["default"].normal);
-}, function (_ref2) {
-  var styles = _ref2.theme.styles;
-  return styled.css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), styles.form.input.disabled.normal);
+var _excluded$8 = ["fieldState", "placeholder", "label", "icon", "isCompact", "defaultValue", "changeCallback", "children"];
+var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$7;
+var SelectWrapper = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  width: 100%;\n"])));
+var OpenIcon = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  right: ", ";\n  pointer-events: none;\n"])), function (_ref) {
+  var isCompact = _ref.isCompact;
+  return isCompact ? '14px' : '16px';
+});
+var SubjectIcon = styled__default.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", ";\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n"])), function (_ref2) {
+  var isCompact = _ref2.isCompact;
+  return isCompact ? '10px' : '12px';
 });
-var Container$b = styled__default.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n\n", "\n\n", ";\n\n  ", " {\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    option {\n      font-style: normal;\n      ", ";\n\n      ", ";\n    }\n    font-weight: 400;\n  }\n"])), function (_ref3) {
-  var isCompact = _ref3.isCompact;
-  return isCompact && styled.css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  ", " {\n      span {\n        margin-bottom: 6px;\n      }\n    }\n  "])), StyledLabel);
+var StyledSelect = styled__default.select(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 3px;\n  appearance: none;\n  font-family: var(--font-data);\n  height: var(--input-height);\n  width: 100%;\n  border-radius: 3px;\n  color: var(--input-color-default);\n  font-size: 14px;\n  cursor: pointer;\n\n  transition: \n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  ", ";\n\n\n  ", ";\n\n  &:disabled {\n    opacity: 1;\n    cursor: not-allowed;\n    color: var(--input-disabled-color-default);\n    border: 1px solid var(--input-disabled-border-color);\n    background: var(--input-disabled-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-disabled-shadow-color, transparent);\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n"])), function (_ref3) {
+  var fieldState = _ref3.fieldState;
+  return styled.css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-", "-shadow-color, transparent);\n  "])), fieldState, fieldState, fieldState);
 }, function (_ref4) {
-  var isLabelSameRow = _ref4.isLabelSameRow;
-  return isLabelSameRow && styled.css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  ", " {\n    display: flex;\n    align-items: center;\n    span {\n      margin: 0 10px 0 0;\n    }\n  }\n"])), StyledLabel);
-}, StyledSelect, function (_ref5) {
-  var theme = _ref5.theme;
-  return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n      font-family: ", ";\n      ", ";\n    "])), theme.styles.form.input["default"].normal.borderColor, theme.fontFamily.data, theme.typography.form.input.value.normal);
-}, function (_ref6) {
-  var typography = _ref6.theme.typography,
-    isCompact = _ref6.isCompact;
-  return isCompact && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      height: 30px;\n      padding: 0 25px 0 10px;\n      ", ";\n    "])), typography.form.input.value.compact);
-}, function (_ref7) {
-  var theme = _ref7.theme,
-    activePlaceholder = _ref7.activePlaceholder;
-  return activePlaceholder && styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.form.input.placeholder.normal);
-}, function (_ref8) {
-  var theme = _ref8.theme,
-    isCompact = _ref8.isCompact,
-    activePlaceholder = _ref8.activePlaceholder;
-  return isCompact && activePlaceholder && styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), theme.typography.form.input.placeholder.compact);
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), theme.typography.form.input.value.normal);
-}, function (_ref10) {
-  var typography = _ref10.theme.typography,
-    isCompact = _ref10.isCompact;
-  return isCompact && styled.css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), typography.form.input.value.compact);
-});
-var SelectField = function SelectField(_ref11) {
-  var placeholder = _ref11.placeholder,
-    label = _ref11.label,
-    isCompact = _ref11.isCompact,
-    defaultValue = _ref11.defaultValue,
-    _ref11$changeCallback = _ref11.changeCallback,
-    changeCallback = _ref11$changeCallback === void 0 ? function () {} : _ref11$changeCallback,
-    children = _ref11.children,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded$8);
+  var isCompact = _ref4.isCompact,
+    withIcon = _ref4.withIcon;
+  return isCompact ? styled.css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n    height: var(--input-compact-height);\n    padding: 0 16px 1px ", ";\n\n    ", "{\n      right: 14px;\n    }\n  "])), withIcon ? '30px' : '8px', OpenIcon) : styled.css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n    height: var(--input-height);\n    padding: 0 16px 1px ", ";\n  "])), withIcon ? '36px' : '12px');
+});
+var Container$b = styled__default.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n  span {\n    margin-bottom: 8px;\n  }\n\n  ", ";\n\n"])), function (_ref5) {
+  var activePlaceholder = _ref5.activePlaceholder;
+  return activePlaceholder && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n    ", " {\n      font-family: var(--font-data);\n      color: var(--input-color-placeholder);\n      font-style: italic;\n      font-weight: 400;\n    }\n  "])), StyledSelect);
+});
+var SelectField = function SelectField(_ref6) {
+  var _ref6$fieldState = _ref6.fieldState,
+    fieldState = _ref6$fieldState === void 0 ? 'default' : _ref6$fieldState,
+    placeholder = _ref6.placeholder,
+    label = _ref6.label,
+    icon = _ref6.icon,
+    isCompact = _ref6.isCompact,
+    defaultValue = _ref6.defaultValue,
+    _ref6$changeCallback = _ref6.changeCallback,
+    changeCallback = _ref6$changeCallback === void 0 ? function () {} : _ref6$changeCallback,
+    children = _ref6.children,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$8);
   var _useState = React.useState(!defaultValue ? true : false),
     activePlaceholder = _useState[0],
     setPlaceholderStatus = _useState[1];
@@ -2941,9 +2927,27 @@ var SelectField = function SelectField(_ref11) {
     });
     changeCallback(value);
   }, [changeCallback]);
+  var iconColor = React.useCallback(function () {
+    if (props.disabled || fieldState === 'disabled') {
+      return 'input-disabled-lead-icon';
+    } else {
+      return 'input-lead-icon';
+    }
+  }, [fieldState, props.disabled]);
   var renderSelect = React.useCallback(function (htmlFor) {
-    return React__default.createElement(SelectWrapper, null, React__default.createElement(StyledSelect, Object.assign({
+    return React__default.createElement(SelectWrapper, null, icon && React__default.createElement(SubjectIcon, Object.assign({}, {
+      isCompact: isCompact
+    }), React__default.createElement(Icon, {
+      icon: icon,
+      color: iconColor(),
+      size: isCompact ? 12 : 12,
+      weight: 'regular'
+    })), React__default.createElement(StyledSelect, Object.assign({
+      withIcon: icon ? true : false,
       id: htmlFor
+    }, {
+      fieldState: fieldState,
+      isCompact: isCompact
     }, props, {
       defaultValue: defaultValue ? defaultValue : '',
       onChange: handleOnChange
@@ -2951,12 +2955,15 @@ var SelectField = function SelectField(_ref11) {
       value: '',
       disabled: true,
       hidden: true
-    }, placeholder), children), React__default.createElement(Icon, {
+    }, placeholder), children), React__default.createElement(OpenIcon, Object.assign({}, {
+      isCompact: isCompact
+    }), React__default.createElement(Icon, {
       icon: 'Down',
-      color: 'dimmed',
-      size: 11
-    }));
-  }, [children, defaultValue, handleOnChange, placeholder, props]);
+      color: iconColor(),
+      weight: 'regular',
+      size: isCompact ? 8 : 10
+    })));
+  }, [children, defaultValue, handleOnChange, placeholder, props, fieldState, icon, iconColor, isCompact]);
   return React__default.createElement(Container$b, Object.assign({}, {
     isCompact: isCompact,
     activePlaceholder: activePlaceholder
@@ -3024,7 +3031,7 @@ var isNotNumber = function isNotNumber(value) {
 };
 
 var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
-var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$6, _templateObject11$4, _templateObject12$3;
+var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$3, _templateObject12$2;
 var ThumbDiameter = 16;
 var SliderWrapper = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  position: relative;\n  height: 30px;\n  margin-top: 20px;\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -3055,8 +3062,8 @@ var MarkLabel = styled__default.span(_templateObject6$b || (_templateObject6$b =
   var alignment = _ref8.alignment;
   return alignment === 'left' && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
 });
-var ThumbWrapper = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-right: 16px;\n  left: 0;\n  top: 10px;\n  width: calc(100% - ", "px);\n  height: 2px;\n"])), ThumbDiameter);
-var Thumb = styled__default.span(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 8px;\n  background-color: ", ";\n  position: absolute;\n  top: -7.5px;\n  left: ", ";\n"])), ThumbDiameter, ThumbDiameter, function (_ref9) {
+var ThumbWrapper = styled__default.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-right: 16px;\n  left: 0;\n  top: 10px;\n  width: calc(100% - ", "px);\n  height: 2px;\n"])), ThumbDiameter);
+var Thumb = styled__default.span(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 8px;\n  background-color: ", ";\n  position: absolute;\n  top: -7.5px;\n  left: ", ";\n"])), ThumbDiameter, ThumbDiameter, function (_ref9) {
   var theme = _ref9.theme,
     bgColor = _ref9.bgColor;
   return theme.colors.feedback[bgColor];
@@ -3064,7 +3071,7 @@ var Thumb = styled__default.span(_templateObject11$4 || (_templateObject11$4 = _
   var leftValue = _ref10.leftValue;
   return leftValue + "%";
 });
-var GhostThumb = styled__default(Thumb)(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  opacity: .5;\n"])));
+var GhostThumb = styled__default(Thumb)(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  opacity: .5;\n"])));
 var thumbLeftPosition = function thumbLeftPosition(value, min, max) {
   return valueToPercent(value, min, max);
 };
@@ -3769,7 +3776,7 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
   return isDifferent;
 };
 
-var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 var CropLineStyle = styled.css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  opacity: 0.1;\n"])));
 var TopLine = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: n-resize;\n  width: 100%;\n  height: 5px;\n  left: 0;\n  top: -3px;\n"])), CropLineStyle);
 var RightLine = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: e-resize;\n  right: -3px;\n  top: 0;\n  width: 5px;\n  height: 100%;\n"])), CropLineStyle);
@@ -3782,13 +3789,13 @@ var PointN = styled__default.div(_templateObject7$c || (_templateObject7$c = _ta
 });
 var PointNW = styled__default.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  left: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref2) {
   var isResizable = _ref2.isResizable;
-  return isResizable && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n    cursor: nw-resize;\n  "])));
+  return isResizable && styled.css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n    cursor: nw-resize;\n  "])));
 });
-var PointNE = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref3) {
+var PointNE = styled__default.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref3) {
   var isResizable = _ref3.isResizable;
-  return isResizable && styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n    cursor: ne-resize;\n  "])));
+  return isResizable && styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n    cursor: ne-resize;\n  "])));
 });
-var PointE = styled__default.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n    margin-top: -5px;\n    top: 50%;\n    right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref4) {
+var PointE = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n    margin-top: -5px;\n    top: 50%;\n    right: -5px;\n  ", ";\n"])), resizeSquaresCss, function (_ref4) {
   var isResizable = _ref4.isResizable;
   return isResizable && styled.css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n    cursor: e-resize;\n  "])));
 });
@@ -5034,7 +5041,7 @@ var StyledImage = styled__default.img(_templateObject6$i || (_templateObject6$i
   var theme = _ref4.theme,
     isLoaded = _ref4.isLoaded,
     hasModalLimits = _ref4.hasModalLimits;
-  return styled.css(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n    opacity: ", ";\n\n    ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
+  return styled.css(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n    transition: opacity ", " ", ";\n    display: ", ";\n    opacity: ", ";\n\n    ", ";\n  "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "block" : "none", isLoaded ? "1" : "0", hasModalLimits && styled.css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n      max-height: calc(100vh - 100px);\n      max-width: calc(100vw - 100px);\n    "]))));
 });
 var MediaBox = function MediaBox(_ref5) {
   var incomingSrc = _ref5.src,
@@ -5593,7 +5600,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
   })))));
 };
 
-var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
 var initializeInterval = function initializeInterval(day) {
   return {
     start: dateFns.set(day, {
@@ -5614,10 +5621,10 @@ var CalendarArea = styled__default.div(_templateObject6$k || (_templateObject6$k
 var CalendarHeader = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 70px;\n  border-bottom: var(--grey-6) 1px solid;\n  text-align: center;\n"])));
 var CurrentMonth = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  flex-direction: column;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  text-align: center;\n  font-size: 20px;\n  font-weight: 400;\n  line-height: 20px;\n  letter-spacing: 0.5px;\n  color: var(--primary-10);\n\n  span {\n    display: block;\n    flex: 0;\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.33px;\n  }\n"])));
 var IconWrap$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  [stroke]{\n    stroke: var(--grey-8);\n  }\n"])));
-var PaginateMonth = styled__default.button(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  flex: 0 0 72px;\n  border: none;\n  background: transparent;\n  outline: none;\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 20px;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--grey-10);\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n\n  transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n  ", "{\n    svg * {\n      transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n    }\n  }\n\n  &:hover:enabled  {\n    color: var(--grey-12);\n\n    ", "{\n      [stroke]{\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n"])), IconWrap$1, IconWrap$1);
-var CalBody = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  padding: 5px 0;\n"])));
-var CalRow = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 40px);\n  height: 40px;\n  box-sizing: border-box;\n\n  padding: 0 10px;\n"])));
-var CalHRow = styled__default(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--grey-6) 1px solid;\n"])));
+var PaginateMonth = styled__default.button(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  flex: 0 0 72px;\n  border: none;\n  background: transparent;\n  outline: none;\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 20px;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--grey-10);\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n\n  transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n  ", "{\n    svg * {\n      transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n    }\n  }\n\n  &:hover:enabled  {\n    color: var(--grey-12);\n\n    ", "{\n      [stroke]{\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n"])), IconWrap$1, IconWrap$1);
+var CalBody = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  padding: 5px 0;\n"])));
+var CalRow = styled__default.div(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 40px);\n  height: 40px;\n  box-sizing: border-box;\n\n  padding: 0 10px;\n"])));
+var CalHRow = styled__default(CalRow)(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--grey-6) 1px solid;\n"])));
 var CalCell = styled__default.button(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n  border-radius: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  text-decoration: none;\n  color: var(--grey-12);\n  font-family: var(--font-data);\n"])), resetButtonStyles);
 var CalHCell = styled__default(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--grey-a11);\n"])));
 var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 400;\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    color: var(--grey-6);\n    cursor: not-allowed;\n\n    ", "\n\n    ", ";\n  }\n\n"])), function (_ref) {
@@ -5945,7 +5952,7 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
 };
 
 var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
-var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$9;
+var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$8;
 var LeftIconWrapper$1 = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding: 0 6px;\n"])), function (_ref) {
   var isSortAscending = _ref.isSortAscending;
   return isSortAscending && styled.css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n      transform: scaleY(-1);\n  "])));
@@ -5973,7 +5980,7 @@ var StyledButton$4 = styled__default.button(_templateObject5$p || (_templateObje
   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  gap: 4px;\n"])));
-var ButtonText = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose([""])));
+var ButtonText = styled__default.div(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose([""])));
 var FilterButton = function FilterButton(_ref8) {
   var icon = _ref8.icon,
     _ref8$hasFlipArrow = _ref8.hasFlipArrow,
@@ -6010,7 +6017,7 @@ var FilterButton = function FilterButton(_ref8) {
 };
 
 var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
-var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$a;
+var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$9;
 var Title$1 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  display: block;\n  color: var(--grey-12);\n  font-size: 14px;\n  font-weight: 500;\n  user-select: none;\n  pointer-events: none;\n"])));
 var FakeCheckbox = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 5px;\n  border-width: 2px;\n  border-style: solid;\n"])));
 var FakeCheckboxInner = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  box-sizing: border-box;\n"])));
@@ -6020,7 +6027,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    ", ", ", " {\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);
+  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$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
 });
 var FilterOption = function FilterOption(_ref2) {
   var title = _ref2.title,
@@ -6054,7 +6061,7 @@ var Container$r = styled__default.div(_templateObject2$D || (_templateObject2$D
     disabled = _ref.disabled,
     noBackground = _ref.noBackground,
     width = _ref.width;
-  return styled.css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  \n    transition: all var(--speed-normal) var(--easing-primary-in);\n    gap: 6px;\n    height: var(--common-height);\n    padding: 0;\n    align-items: center;\n    display: flex;\n    border-radius: 3px;\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    background-color: ", ";\n    \n    &:focus-within {\n      background-color: ", ";\n      border: ", ";\n      box-shadow: 0px 4px 9px 0px ", ";\n    }\n\n  "])), hasBorder && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      padding: 0 8px;\n      border: 1px solid var(--filter-button-stroke-color);\n      box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n      &:hover {\n        border: var(--primary-7) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n      }\n      ", "{\n        padding: 0;\n      }\n    "])), IconContainer$1), disabled && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      opacity: 50%;\n      cursor: not-allowed;\n      "]))), width && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
+  return styled.css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  \n    transition: all var(--speed-normal) var(--easing-primary-in);\n    gap: 6px;\n    height: var(--input-compact-height);\n    padding: 0;\n    align-items: center;\n    display: flex;\n    border-radius: 3px;\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    background-color: ", ";\n    \n    &:focus-within {\n      background-color: ", ";\n      border: ", ";\n      box-shadow: 0px 4px 9px 0px ", ";\n    }\n\n  "])), hasBorder && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      padding: 0 8px;\n      border: 1px solid var(--filter-button-stroke-color);\n      box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n      &:hover {\n        border: var(--primary-7) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n      }\n      ", "{\n        padding: 0;\n      }\n    "])), IconContainer$1), disabled && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      opacity: 50%;\n      cursor: not-allowed;\n      "]))), width && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
 }, IconWrapper);
 var CrossButton = styled__default.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  ", ";\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  width: 26px;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), resetButtonStyles, IconWrapper);
 var StyledInput$2 = styled__default.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--grey-12);\n  \n  &::placeholder {\n    ", ";\n    color: var(--grey-11);\n    font-style: italic;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  font-size: 12px;\n  border: none;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  border-radius: 3px;\n  outline: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
@@ -6534,7 +6541,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$b, _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$a, _templateObject11$6, _templateObject12$5, _templateObject13$4, _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) {
@@ -6554,7 +6561,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$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    "]))));
+  return openState && styled.css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n    display: ", ";\n    display: ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      right: 0;\n      transform: translateY(calc(100% + 5px ));\n    "]))), openState.position === 'top-left' && styled.css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      right: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))), openState.position === 'top-right' && styled.css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n      top: 0;\n      left: 0;\n      transform: translateY(calc( -100% - 5px ));\n    "]))));
 });
 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"])));
@@ -6705,7 +6712,7 @@ var FilterLayout = function FilterLayout(_ref6) {
   }))))))));
 };
 
-var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
+var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
 var _templateObject$Q;
 var MIN_WIDTH = 470;
 var MIN_HEIGHT = 360;
@@ -6723,6 +6730,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
     timeZoneTitle = _ref.timeZoneTitle,
     timeZoneValueTitle = _ref.timeZoneValueTitle,
     lang = _ref.lang,
+    availableRange = _ref.availableRange,
     _ref$onCloseCallback = _ref.onCloseCallback,
     onCloseCallback = _ref$onCloseCallback === void 0 ? function () {} : _ref$onCloseCallback,
     _ref$onUpdateCallback = _ref.onUpdateCallback,
@@ -6786,7 +6794,8 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
     dateTimeTextLower: dateTimeTextLower,
     timeZoneTitle: timeZoneTitle,
     timeZoneValueTitle: timeZoneValueTitle,
-    lang: lang
+    lang: lang,
+    availableRange: availableRange
   }, {
     updateCallback: handleUpdateCallback,
     hasEmptyValue: true,
@@ -7439,7 +7448,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$c, _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$b, _templateObject11$7, _templateObject12$6, _templateObject13$5, _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) {
@@ -7469,16 +7478,16 @@ var HandleReactiveRing = styled__default.circle(_templateObject9$g || (_template
     styling = _ref4.styling;
   return theme.custom.lines[styling].handleReactiveRing.stroke;
 });
-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 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 theme = _ref5.theme,
     styling = _ref5.styling;
   return theme.custom.lines[styling].handleContrastLayer.stroke;
 });
-var HandleShadowLayer = styled__default.circle(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n    mix-blend-mode: multiply;\n    fill: url(#", ");\n"])), function (props) {
+var HandleShadowLayer = styled__default.circle(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n    mix-blend-mode: multiply;\n    fill: url(#", ");\n"])), function (props) {
   return props.fillID;
 });
-var GrabHandleIndexGroup = styled__default.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
-  return props.showIndex && styled.css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
+var GrabHandleIndexGroup = styled__default.g(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  pointer-events: none;\n  ", ";\n\n"])), function (props) {
+  return props.showIndex && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "])));
 });
 var StopStart = styled__default.stop(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  stop-color: ", ";\n"])), function (_ref6) {
   var theme = _ref6.theme,
@@ -7672,7 +7681,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$d, _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$c, _templateObject11$8, _templateObject12$7, _templateObject13$6, _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;
@@ -7716,15 +7725,15 @@ 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$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref10) {
+var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref10) {
   var theme = _ref10.theme,
     styling = _ref10.styling;
   return theme.custom.lines[styling].grabHandleContrast.stroke;
 });
-var GrabHandleGroup = styled__default.g(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
-  return props.showIndex && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
+var GrabHandleGroup = styled__default.g(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n\n  ", ", ", " {\n    transition: r 250ms ease;\n  }\n\n  ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
+  return props.showIndex && styled.css(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n    ", ", ", " {\n      pointer-events: none;\n      r: ", ";\n    }\n  "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
 });
-var DMCircle = styled__default.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n  cursor: pointer;\n"])));
+var DMCircle = styled__default.circle(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n  fill: hsla(203, 100%, 35%, 0.49);\n  cursor: pointer;\n"])));
 var IconFormat = styled__default(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
 var LineUnit = function LineUnit(props) {
   var x1 = props.x1,
@@ -9503,7 +9512,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$e, _templateObject11$a;
+var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$d, _templateObject11$9;
 var CopyToClipboard = styled__default.button(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n\n  cursor: pointer;\n  opacity: 0;\n\n  position: absolute;\n  right: 0;\n  top: 14px;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: none;\n  outline: none;\n\n  ", "\n\n  svg {\n    display: block;\n  }\n\n  &:hover {\n    opacity: 1 !important;\n  }\n\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme && styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n    transition: ", " ", ";\n  "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
@@ -9527,11 +9536,11 @@ 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$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 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 _ref6$status = _ref6.status,
     status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
     colors = _ref6.theme.colors;
-  return styled.css(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n    background: ", ";\n  "])), colors.status[status]);
+  return styled.css(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n    background: ", ";\n  "])), colors.status[status]);
 });
 var TypeTableCell = function TypeTableCell(_ref7) {
   var _ref7$showUnit = _ref7.showUnit,
@@ -9686,7 +9695,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$f, _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$e, _templateObject11$a, _templateObject12$8, _templateObject13$7, _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;
@@ -9711,12 +9720,12 @@ 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$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
+  return alignment && styled.css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n  "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
 });
-var GroupTitle = styled__default.div(_templateObject11$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) {
+var GroupTitle = styled__default.div(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  margin-bottom: 4px;\n"])));
+var Title$4 = styled__default.div(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding-left: 2px;\n  padding-right: 8px;\n  white-space: nowrap;\n"])), function (_ref6) {
   var typography = _ref6.theme.typography;
-  return styled.css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
+  return styled.css(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), typography.tables.groupName);
 });
 var EmptyTitle = styled__default.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
 var MiddleLine = styled__default.div(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: 1px;\n  flex: 1;\n  ", ";\n"])), function (_ref7) {
@@ -9943,7 +9952,7 @@ var TypeTable = function TypeTable(_ref4) {
 };
 
 var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
-var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$g;
+var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$f;
 var Container$M = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n  "])), theme.fontFamily.ui);
@@ -9958,7 +9967,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$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
+  return alignment === 'right' && styled.css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n    justify-content: flex-end;\n"])));
 }, StyledIconButton$1, StyledIconButton$1);
 var EditCell = function EditCell(_ref4) {
   var _ref4$type = _ref4.type,
@@ -11882,7 +11891,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$h;
+var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$g;
 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"])));
@@ -11911,7 +11920,7 @@ var ArrowButton = styled__default.button(_templateObject9$m || (_templateObject9
   var active = _ref6.active;
   return active ? '1' : '0.5';
 });
-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 ItemsSelectWrapper = styled__default.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n  ", " {\n    width: ", ";\n  }\n    margin-right: 35px;\n\n  ", " {\n    margin-bottom: 0;\n  }\n"])), SelectWrapper, function (_ref7) {
   var width = _ref7.width;
   return width ? width : "60px";
 }, StyledLabel);
@@ -12170,7 +12179,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$i, _templateObject11$c, _templateObject12$a, _templateObject13$9;
+var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$h, _templateObject11$b, _templateObject12$9, _templateObject13$8;
 var Container$Y = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n  max-width: var(--max-content-width);\n  margin-top: var(--utility-header-padding-top);\n  padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n  height: 48px;\n  width: 100%;\n  display: flex;\n"])));
 var LeftArea = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: var(--columnPadding, 16px);\n  flex: 1 0 0;\n"])));
 var BackLinkIcon = styled__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n  flex: 1;  \n  > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
@@ -12184,10 +12193,10 @@ 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$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 HomeIcon = styled__default(BreadcrumbIcon)(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n  padding-bottom: 1px;\n  svg path {\n    transition: stroke var(--speed-normal) var(--easing-primary-out);\n  }\n"])));
-var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  flex: 1;\n  color: var(--grey-10);\n  font-family: var(--font-ui);\n  text-decoration: none;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 100% */\n  transition: color var(--speed-normal) var(--easing-primary-out);\n\n  &:hover {\n    color: var(--grey-12);\n    ", " svg {\n      path {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n"])), HomeIcon);
-var RightArea = styled__default.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  align-items: center;\n  display: flex;\n  justify-content: right;\n"])));
+var BreadcrumbIcon = styled__default.div(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n  flex: 0;\n  display: flex;\n  align-items: center;\n\n  > div {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+var HomeIcon = styled__default(BreadcrumbIcon)(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n  padding-bottom: 1px;\n  svg path {\n    transition: stroke var(--speed-normal) var(--easing-primary-out);\n  }\n"])));
+var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  flex: 1;\n  color: var(--grey-10);\n  font-family: var(--font-ui);\n  text-decoration: none;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 100% */\n  transition: color var(--speed-normal) var(--easing-primary-out);\n\n  &:hover {\n    color: var(--grey-12);\n    ", " svg {\n      path {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n"])), HomeIcon);
+var RightArea = styled__default.div(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  align-items: center;\n  display: flex;\n  justify-content: right;\n"])));
 var UtilityHeader = function UtilityHeader(_ref2) {
   var _ref2$showBreadcrumbs = _ref2.showBreadcrumbs,
     showBreadcrumbs = _ref2$showBreadcrumbs === void 0 ? true : _ref2$showBreadcrumbs,
@@ -12380,7 +12389,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$j, _templateObject11$d, _templateObject12$b, _templateObject13$a, _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$i, _templateObject11$c, _templateObject12$a, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
 var DebugData = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 10;\n  bottom: 20px;\n  left: 20px;\n  background: #ededed99;\n  border: grey 1px solid;\n  padding: 20px;\n  line-height: 20px;\n  font-size: 12px;\n  div {\n    display: block;\n  }\n  span {\n    display: inline-block;\n    width: 130px;\n    font-weight: 600;\n  }\n"])));
 var MainArea = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex: 1;\n\n  ", "\n"])), function (_ref) {
   var $layout = _ref.$layout,
@@ -12406,19 +12415,19 @@ 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$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n      ", "{\n        display: none;\n      }\n    "])), SideAreaInner) : null;
+  return $collapseState === 'collapsed' ? styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n      ", "{\n        display: none;\n      }\n    "])), SideAreaInner) : null;
 }, function (_ref7) {
   var $layout = _ref7.$layout,
     $collapseState = _ref7.$collapseState,
     $minDimension = _ref7.$minDimension;
-  return $collapseState === 'peeking' ? styled.css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", "{\n        min-width: ", "px;\n        opacity: 0.5;\n      }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
+  return $collapseState === 'peeking' ? styled.css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", "{\n        min-width: ", "px;\n        opacity: 0.5;\n      }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
 }, function (_ref8) {
   var $layout = _ref8.$layout,
     $collapseState = _ref8.$collapseState,
     $minDimension = _ref8.$minDimension;
-  return $collapseState === 'opening' ? styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    ", "{\n      min-width: ", "px;\n    }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
+  return $collapseState === 'opening' ? styled.css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    ", "{\n      min-width: ", "px;\n    }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
 });
-var DragContainer = styled__default.div(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n  flex: 0 0 ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: col-resize;\n  \n  > div {\n    transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n  }\n\n  &:hover > div {\n    opacity: 1;\n  }\n\n  ", "\n\n"])), function (_ref9) {
+var DragContainer = styled__default.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: col-resize;\n  \n  > div {\n    transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n  }\n\n  &:hover > div {\n    opacity: 1;\n  }\n\n  ", "\n\n"])), function (_ref9) {
   var $size = _ref9.$size;
   return $size;
 }, function (_ref10) {
@@ -12735,7 +12744,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$k, _templateObject11$e, _templateObject12$c, _templateObject13$b, _templateObject14$8, _templateObject15$6;
+var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$a, _templateObject14$8, _templateObject15$6;
 var ContextTitle = styled__default.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref) {
   var compact = _ref.compact;
   return compact && styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
@@ -12749,14 +12758,14 @@ 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$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 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 $menuOpen = _ref3.$menuOpen;
-  return $menuOpen && styled.css(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
+  return $menuOpen && styled.css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n  "])), ContextTitle);
 }, ContextIcon$1, IconWrapper, function (_ref4) {
   var $isActive = _ref4.$isActive;
-  return $isActive && styled.css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n    color: var(--grey-12);\n\n    ", ",\n    &:hover ", "{\n      background-color: var(--global-menu-icon-background-active);\n    }\n  "])), ContextIcon$1, ContextIcon$1);
+  return $isActive && styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n    color: var(--grey-12);\n\n    ", ",\n    &:hover ", "{\n      background-color: var(--global-menu-icon-background-active);\n    }\n  "])), ContextIcon$1, ContextIcon$1);
 });
-var ContextActionButton$1 = styled__default.button(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
+var ContextActionButton$1 = styled__default.button(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  &:hover ", "{\n    opacity: 1;\n    background-color: var(--global-menu-icon-background-hover);\n\n    ", "{\n      [stroke]{\n        stroke: var(--inverse);\n      }\n    }\n  }\n\n  ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
   var menuOpen = _ref5.menuOpen;
   return menuOpen && styled.css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n    ", "{\n      opacity: 1;\n    }\n\n    ", "{\n      opacity: 1;\n      transition: opacity var(--speed-normal) var(--easing-primary-in-out) var(--speed-fast);\n    }\n  "])), ContextTitle, ContextIndicator);
 }, ContextIcon$1, IconWrapper, function (_ref6) {
@@ -12934,7 +12943,7 @@ 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$l, _templateObject11$f, _templateObject12$d, _templateObject13$c;
+var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$b;
 var Submenu = styled__default.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
 var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
 var SubmenuContainerInner = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n"])));
@@ -12944,15 +12953,15 @@ var ExternalIconWrapper$1 = styled__default.div(_templateObject6$M || (_template
 var SubmenuItemAnchor = styled__default.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
 var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 30px;\n  padding-left: 40px;\n  position: relative;\n\n  &::after {\n    display: block;\n    content: '';\n    height: 1px;\n    width: 14px;\n    position: absolute;\n    left: 0;\n    top: 10px;\n    background: var(--dividing-line);\n  }\n\n  ", ", ", "{\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 400;\n    text-decoration: none;\n    color: var(--grey-11);\n\n    ", ";\n\n  }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
   var isActive = _ref.isActive;
-  return styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && styled.css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
+  return styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && styled.css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
 });
-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: ", ";\n  width: inherit;\n\n  ", "{\n    display: grid;\n    grid-template-rows: 0fr;\n  };\n\n  ", ";\n"])), function (_ref2) {
+var SubmenuContainer = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  transition:\n    grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n    opacity var(--speed-fast) var(--easing-primary-in-out);\n\n  &::after {\n    display: block;\n    content: '';\n    width: 1px;\n    position: absolute;\n    left: 40px;\n    top: 0;\n    bottom: 35px;\n    background: var(--dividing-line);\n  }\n\n"])));
+var ContextContainer = styled__default.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n  width: inherit;\n\n  ", "{\n    display: grid;\n    grid-template-rows: 0fr;\n  };\n\n  ", ";\n"])), function (_ref2) {
   var mobileMenu = _ref2.mobileMenu;
   return mobileMenu ? '30px' : '70px';
 }, SubmenuContainer, function (_ref3) {
   var open = _ref3.open;
-  return open && styled.css(_templateObject13$c || (_templateObject13$c = _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);
+  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);
 });
 var NavigationItem = function NavigationItem(_ref4) {
   var item = _ref4.item,
@@ -13043,7 +13052,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$m, _templateObject11$g, _templateObject12$e, _templateObject13$d, _templateObject14$9;
+var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$c, _templateObject14$9;
 var Logo = styled__default(reactRouterDom.Link)(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  margin: 0 20px 55px 15px;\n  display: flex;\n\n  object {\n    pointer-events: none;\n  }\n"])));
 var LogoMark = styled__default.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n  height: 50px;\n  flex: 0 0 50px;\n  margin-right: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n"])));
 var LogoType = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  flex: 1;\n  height: 50px;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n"])));
@@ -13054,12 +13063,12 @@ 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$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n    width: ", ";\n  "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
+  return styled.css(_templateObject10$l || (_templateObject10$l = _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 Container$10 = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0;\n  ", "\n\n  box-sizing: border-box;\n  height: 100%;\n  padding: 20px 0 0 0;\n  overflow: hidden;\n"])), function (_ref2) {
   var 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$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n      transition: width var(--speed-normal) var(--easing-primary-in);\n    "]))), LogoType, open ? 1 : 0);
+  return styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n    background-color: var(--global-element-background);\n    box-shadow: 0px 0px 7px 0px var(--primary-a2);\n    width: ", ";\n    border-right: 1px solid var(--dividing-line);\n\n    ", ";\n\n    ", "{\n      transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n      opacity: ", ";\n    }\n  "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n      transition: width var(--speed-normal) var(--easing-primary-in);\n    "]))), LogoType, open ? 1 : 0);
 });
 var ContainerInner = styled__default.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n  width: var(--global-menu-width-open);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var MainMenu = function MainMenu(_ref3) {
@@ -13159,7 +13168,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$n;
+var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$m;
 var MetaConatiner = styled__default.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n  margin: 10px 10px;\n  border: 1px solid var(--grey-3);\n  background-color: var(--grey-a2);\n  border-radius: 5px;\n  &:active {\n    box-shadow: 4px 4px var(--grey-a2);\n  }\n"])));
 var LabelTitle = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n  max-width: 130px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  opacity: 0.76;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-11);\n  font-family: var(--font-ui);\n  margin-top: 2px;\n"])));
 var LabelContent = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n  font-size: 10px;\n  padding-left: 10px;\n  max-width: 200px;\n  overflow-wrap: initial;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 4px 0 5px 0;\n  white-space: nowrap;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-8);\n"])));
@@ -13169,7 +13178,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$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n"])));
+var CopyBox = styled__default.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n"])));
 var UserDrawerMeta = function UserDrawerMeta(_ref) {
   var item = _ref.item,
     onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
@@ -13253,7 +13262,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$o, _templateObject11$h, _templateObject12$f, _templateObject13$e, _templateObject14$a;
+var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$n, _templateObject11$g, _templateObject12$e, _templateObject13$d, _templateObject14$a;
 var DrawerTop = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
 var DrawerBottom = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: fixed;\n  bottom: 50px;\n  @media ", " {\n    position: static;\n    bottom: 0;\n  }\n"])), deviceMediaQuery.medium);
 var DrawerHeader = styled__default.h2(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.35px;\n  color: var(--grey-11);\n  padding: 0;\n  margin: 0 0 5px;\n"])));
@@ -13263,15 +13272,15 @@ 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$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 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 isActive = _ref.isActive;
-  return isActive && styled.css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      color: var(--primary-9);\n    }\n  "])));
+  return isActive && styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      color: var(--primary-9);\n    }\n  "])));
 });
-var FooterMeta = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  border-top: var(--dividing-line) 1px solid;\n  margin-top: auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-size: 10px;\n  font-weight: 400;\n  color: var(--grey-a11);\n  padding: 10px;\n  padding-left:  ", ";\n"])), function (_ref2) {
+var FooterMeta = styled__default.div(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  border-top: var(--dividing-line) 1px solid;\n  margin-top: auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-size: 10px;\n  font-weight: 400;\n  color: var(--grey-a11);\n  padding: 10px;\n  padding-left:  ", ";\n"])), function (_ref2) {
   var icon = _ref2.icon;
   return icon !== '' ? '31px;' : '21px;';
 });
-var NavigationContainer$1 = styled__default.div(_templateObject13$e || (_templateObject13$e = _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 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 icon = _ref3.icon;
   return icon !== '' ? '136px;' : '164px;';
@@ -13436,7 +13445,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$p, _templateObject11$i, _templateObject12$g, _templateObject13$f;
+var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$e;
 var CoreStyle = styled.css(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 32px;\n  padding: 8px;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 8px;\n  border-radius: 3px;\n\n  font-family: Lato;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 85.714% */\n  white-space: nowrap;\n\n  transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
 var ContainerStatic = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), CoreStyle, function (_ref) {
   var themeColor = _ref.themeColor;
@@ -13449,12 +13458,12 @@ var ContainerLinked = styled__default.div(_templateObject7$N || (_templateObject
   return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n      background-color: transparent;\n      border: 2px solid var(--", "-9);\n      color: var(--", "-11);\n    "])), themeColor, themeColor) : styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n      background-color: transparent;\n      border: 2px solid var(--info-9);\n      color: var(--info-11);\n    "])));
 }, function (_ref3) {
   var themeColor = _ref3.themeColor;
-  return themeColor ? styled.css(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n        background-color: var(--", "-9);\n        border: 2px solid var(--", "-9);\n        color: var(--white-12);\n      "])), themeColor, themeColor) : styled.css(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n        background-color: var(--info-9);\n        border: 2px solid var(--info-9);\n        color: var(--white-12);\n      "])));
+  return themeColor ? styled.css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n        background-color: var(--", "-9);\n        border: 2px solid var(--", "-9);\n        color: var(--white-12);\n      "])), themeColor, themeColor) : styled.css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n        background-color: var(--info-9);\n        border: 2px solid var(--info-9);\n        color: var(--white-12);\n      "])));
 });
-var Container$15 = styled__default.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
+var Container$15 = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
   var ready = _ref4.ready,
     minWidth = _ref4.minWidth;
-  return styled.css(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n    \n    visibility: ", ";\n    opacity: ", ";\n\n    transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n    ", ", ", "{\n      /* Required to accurately measure container sizes and ensure hover doesn't resize. */\n      ", ";\n    }\n  "])), ready ? 'visible' : 'hidden', ready ? '1' : '0', DefaultText, LinkText, ready && "min-width: " + minWidth + "px;");
+  return styled.css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n    \n    visibility: ", ";\n    opacity: ", ";\n\n    transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n    ", ", ", "{\n      /* Required to accurately measure container sizes and ensure hover doesn't resize. */\n      ", ";\n    }\n  "])), ready ? 'visible' : 'hidden', ready ? '1' : '0', DefaultText, LinkText, ready && "min-width: " + minWidth + "px;");
 });
 var TopBarBadge = function TopBarBadge(_ref5) {
   var text = _ref5.text,
@@ -13521,7 +13530,7 @@ var TopBarBadge = function TopBarBadge(_ref5) {
   }), badgeComponent);
 };
 
-var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$q, _templateObject11$j, _templateObject12$h, _templateObject13$g;
+var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$f;
 var Container$16 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n  z-index: 9;\n  position: sticky;\n  top: 0;\n  height: 56px;\n  padding: 0 16px 0 24px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-self: flex-start;\n  border-bottom: 1px solid var(--dividing-line);\n  background: var(--grey-2);\n  box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
 var RightArea$1 = styled__default.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  height: 100%;\n"])));
 var SearchBar = styled__default.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"])));
@@ -13535,15 +13544,15 @@ var DrawerToggle = styled__default.button.attrs({
   var isActive = _ref.isActive;
   return isActive && styled.css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: var(--primary-9);\n      &::after {\n        background-color: var(--primary-9);\n      }\n      svg {\n        transform: scale(1);\n        animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n      }\n\n    }\n  "])), buttonClickAnimation);
 });
-var DrawerPortalWrapper = styled__default.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
-var Drawer = styled__default.div(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n\n  position: fixed;\n  right: -10px;\n  top: 56px;\n  bottom: 0;\n  background: var(--global-element-background);\n  border-left: var(--dividing-line) 1px solid;\n  \n  width: ", ";\n  opacity: 0;\n  visibility: hidden;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  transition:\n    opacity var(--speed-normal) var(--easing-primary-in-out),\n    right var(--speed-normal) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref2) {
+var DrawerPortalWrapper = styled__default.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose([""])));
+var Drawer = styled__default.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n\n  position: fixed;\n  right: -10px;\n  top: 56px;\n  bottom: 0;\n  background: var(--global-element-background);\n  border-left: var(--dividing-line) 1px solid;\n  \n  width: ", ";\n  opacity: 0;\n  visibility: hidden;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  transition:\n    opacity var(--speed-normal) var(--easing-primary-in-out),\n    right var(--speed-normal) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref2) {
   var baseWidth = _ref2.baseWidth;
   return baseWidth ? baseWidth : "200px";
 }, function (_ref3) {
   var isOpen = _ref3.isOpen;
-  return isOpen && styled.css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));
+  return isOpen && styled.css(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));
 });
-var NotificationsContainer = styled__default.div(_templateObject13$g || (_templateObject13$g = _taggedTemplateLiteralLoose(["\n    overflow-y: scroll;\n    margin-right: -17px;\n"])));
+var NotificationsContainer = styled__default.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n    overflow-y: scroll;\n    margin-right: -17px;\n"])));
 var TopBar = function TopBar(_ref4) {
   var _ref4$hasNotification = _ref4.hasNotifications,
     hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,