scorer-ui-kit 2.5.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/Form/atoms/Input.d.ts +1 -0
  2. package/dist/Form/atoms/Label.d.ts +1 -0
  3. package/dist/Form/atoms/TextArea.d.ts +1 -0
  4. package/dist/Form/molecules/PasswordField.d.ts +1 -0
  5. package/dist/Form/molecules/TextAreaField.d.ts +1 -0
  6. package/dist/Form/molecules/TextField.d.ts +1 -0
  7. package/dist/index.js +369 -392
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.modern.js +369 -392
  10. package/dist/index.modern.js.map +1 -1
  11. package/package.json +2 -6
package/dist/index.modern.js CHANGED
@@ -1560,10 +1560,10 @@ var _templateObject$1;
1560
1560
  var animationVariables = 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"])));
1561
1561
 
1562
1562
  var _templateObject$2;
1563
- var colorVariables = 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-border-default: var(--grey-6);\n --input-border-default-focused: var(--grey-8);\n --input-border-disabled: var(--grey-6);\n --input-border-required: var(--primary-6);\n --input-border-valid: var(--success-9);\n --input-border-invalid: var(--warning-9);\n --input-border-processing: var(--primary-10);\n\n --input-background-default: var(--grey-1);\n --input-background-disabled: var(--grey-3);\n --input-background-required: var(--primary-1);\n --input-background-valid: var(--success-1);\n --input-background-invalid: var(--warning-1);\n --input-background-processing: var(--primary-2);\n\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-focused-shadow-color: var(--black-a5);\n \n --input-selection-control-default: var(--grey-8);\n --input-selection-control-default-disabled: var(--grey-6);\n --input-selection-control-selected: var(--primary-9);\n --input-selection-control-selected-disabled: var(--primary-8);\n\n }\n\n /* Filters */\n .light-theme, .dark-theme {\n --filter-button-text-color: var(--grey-11);\n --filter-button-icon-color: var(--grey-10);\n --filter-button-background-color: var(--grey-2);\n --filter-button-stroke-color: var(--grey-a5);\n --filter-button-shadow-color: var(--primary-a3);\n }\n\n .dark-theme {\n --filter-button-shadow-color: var(--black-a8);\n }\n\n /* Buttons */\n .light-theme, .dark-theme {\n --button-background-color: var(--primary-9);\n --button-border-color: var(--primary-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-primary-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--primary-a3);\n --button-loading-area-background-color: var(--primary-a7);\n --button-loading-area-divider-color: var(--primary-a8);\n\n --button-hover-background-color: var(--primary-8);\n --button-hover-border-color: var(--primary-a6);\n --button-hover-inner-shadow-color: transparent;\n --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n --button-hover-text-color: var(--white-1);\n --button-hover-divider-color: var(--primary-a3);\n --button-hover-icon-area-background-color: var(--primary-a3);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n --button-active-divider-color: var(--primary-a3);\n --button-active-icon-area-background-color: var(--primary-a3);\n\n --button-gradient-start: var(--primary-gradient-start);\n --button-gradient-end: var(--primary-gradient-end);\n\n .button-design-secondary {\n --button-background-color: var(--grey-9);\n --button-border-color: var(--grey-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-secondary-default);\n --button-text-color: var(--grey-12);\n --button-divider-color: var(--grey-a3);\n \n --button-loading-area-background-color: var(--grey-a4);\n --button-loading-area-divider-color: var(--grey-a3);\n\n --button-hover-background-color: var(--grey-8);\n --button-hover-border-color: var(--grey-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--secondary-gradient-start);\n --button-gradient-end: var(--secondary-gradient-end);\n }\n\n .button-design-danger, .button-design-warning {\n --button-background-color: var(--warning-9);\n --button-border-color: var(--warning-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-warning-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--warning-9);\n\n --button-loading-area-background-color: var(--warning-a7);\n --button-loading-area-divider-color: var(--warning-a9);\n\n --button-hover-background-color: var(--warning-8);\n --button-hover-border-color: var(--warning-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--warning-gradient-start);\n --button-gradient-end: var(--warning-gradient-end);\n }\n\n }\n\n"])));
1563
+ var colorVariables = css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n .light-theme {\n --shadow-primary-default: var(--grey-a4);\n --shadow-primary-elevate: var(--primary-a5);\n\n --shadow-secondary-default: var(--grey-3);\n --shadow-secondary-elevate: var(--grey-a4);\n\n --shadow-warning-default: var(--grey-a4);\n --shadow-warning-elevate: var(--warning-a5);\n }\n\n .dark-theme {\n --shadow-primary-default: var(--primary-a2);\n --shadow-primary-elevate: var(--primary-a2);\n\n --shadow-secondary-default: var(--black-a8);\n --shadow-secondary-elevate: var(--primary-a4);\n\n --shadow-warning-default: var(--grey-a3);\n --shadow-warning-elevate: var(--warning-a7);\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n\n /* Global */\n --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n\n --primary-gradient-start: var(--primary-9);\n --primary-gradient-end: var(--primary-10);\n --primary-gradient: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));\n\n --secondary-gradient-start: var(--grey-5);\n --secondary-gradient-end: var(--grey-6);\n --secondary-gradient: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));\n\n --warning-gradient-start: var(--warning-9);\n --warning-gradient-end: var(--warning-10);\n --warning-gradient: linear-gradient(135deg, var(--warning-gradient-start), var(--warning-gradient-end));\n \n --dividing-line: var(--grey-4);\n --global-element-background: var(--grey-2);\n --global-menu-icon-background-default: transparent;\n --global-menu-icon-background-hover: var(--primary-8);\n --global-menu-icon-background-active: var(--primary-9);\n\n /* Inputs */\n --input-color-default: var(--grey-12);\n --input-color-disabled: var(--grey-10);\n --input-color-placeholder: var(--grey-10);\n --input-color-unit: var(--grey-10);\n \n --input-selection-control-default: var(--grey-8);\n --input-selection-control-default-disabled: var(--grey-6);\n --input-selection-control-selected: var(--primary-9);\n --input-selection-control-selected-disabled: var(--primary-8);\n \n --input-default-background-color: var(--grey-1);\n --input-default-border-color: var(--grey-6);\n --input-default-shadow-color: transparent;\n\n --input-default-focused-background-color: var(--grey-1);\n --input-default-focused-border-color: var(--grey-6);\n --input-default-focused-shadow-color: var(--grey-3);\n\n --input-disabled-background-color: var(--grey-3);\n --input-disabled-border-color: var(--grey-6);\n --input-disabled-shadow-color: transparent;\n\n --input-required-background-color: var(--grey-1);\n --input-required-border-color: var(--primary-6);\n --input-required-shadow-color: transparent;\n\n --input-required-focused-background-color: var(--grey-1);\n --input-required-focused-border-color: var(--primary-6);\n --input-required-focused-shadow-color: var(--grey-3);\n\n --input-valid-background-color: var(--grey-1);\n --input-valid-border-color: var(--success-9);\n --input-valid-shadow-color: transparent;\n\n --input-valid-focused-background-color: var(--grey-1);\n --input-valid-focused-border-color: var(--success-9);\n --input-valid-focused-shadow-color: var(--grey-3);\n\n --input-invalid-background-color: var(--grey-1);\n --input-invalid-border-color: var(--warning-9);\n --input-invalid-shadow-color: transparent;\n\n --input-invalid-focused-background-color: var(--grey-1);\n --input-invalid-focused-border-color: var(--warning-9);\n --input-invalid-focused-shadow-color: var(--grey-3);\n\n --input-processing-background-color: var(--grey-3)2;\n --input-processing-border-color: var(--primary-10);\n --input-processing-shadow-color: transparent;\n\n --input-processing-focused-background-color: var(--grey-2);\n --input-processing-focused-border-color: var(--primary-10);\n --input-processing-focused-shadow-color: var(--grey-3);\n\n }\n\n /* Filters */\n .light-theme, .dark-theme {\n --filter-button-text-color: var(--grey-11);\n --filter-button-icon-color: var(--grey-10);\n --filter-button-background-color: var(--grey-2);\n --filter-button-stroke-color: var(--grey-a5);\n --filter-button-shadow-color: var(--primary-a3);\n }\n\n .dark-theme {\n --filter-button-shadow-color: var(--black-a8);\n }\n\n /* Buttons */\n .light-theme, .dark-theme {\n --button-background-color: var(--primary-9);\n --button-border-color: var(--primary-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-primary-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--primary-a3);\n --button-loading-area-background-color: var(--primary-a7);\n --button-loading-area-divider-color: var(--primary-a8);\n\n --button-hover-background-color: var(--primary-8);\n --button-hover-border-color: var(--primary-a6);\n --button-hover-inner-shadow-color: transparent;\n --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n --button-hover-text-color: var(--white-1);\n --button-hover-divider-color: var(--primary-a3);\n --button-hover-icon-area-background-color: var(--primary-a3);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n --button-active-divider-color: var(--primary-a3);\n --button-active-icon-area-background-color: var(--primary-a3);\n\n --button-gradient-start: var(--primary-gradient-start);\n --button-gradient-end: var(--primary-gradient-end);\n\n .button-design-secondary {\n --button-background-color: var(--grey-9);\n --button-border-color: var(--grey-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-secondary-default);\n --button-text-color: var(--grey-12);\n --button-divider-color: var(--grey-a3);\n \n --button-loading-area-background-color: var(--grey-a4);\n --button-loading-area-divider-color: var(--grey-a3);\n\n --button-hover-background-color: var(--grey-8);\n --button-hover-border-color: var(--grey-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--secondary-gradient-start);\n --button-gradient-end: var(--secondary-gradient-end);\n }\n\n .button-design-danger, .button-design-warning {\n --button-background-color: var(--warning-9);\n --button-border-color: var(--warning-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-warning-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--warning-9);\n\n --button-loading-area-background-color: var(--warning-a7);\n --button-loading-area-divider-color: var(--warning-a9);\n\n --button-hover-background-color: var(--warning-8);\n --button-hover-border-color: var(--warning-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--warning-gradient-start);\n --button-gradient-end: var(--warning-gradient-end);\n }\n\n }\n\n"])));
1564
1564
 
1565
1565
  var _templateObject$3;
1566
- var ThemeVariables = 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\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 }\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);
1566
+ var ThemeVariables = 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);
1567
1567
 
1568
1568
  var _templateObject$4;
1569
1569
  var BaseStyles = 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"])));
@@ -2252,71 +2252,42 @@ var ActionButtons = function ActionButtons(_ref4) {
2252
2252
  }));
2253
2253
  };
2254
2254
 
2255
- var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
2256
- var _templateObject$h, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2255
+ var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "showFeedback", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
2256
+ var _templateObject$h, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
2257
2257
  var ActionContainer = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
2258
2258
  var InputActionButton = styled.button.attrs({
2259
2259
  type: "button"
2260
2260
  })(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n width: 40px;\n height: 40px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n"])));
2261
- var FeedbackContainer = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n\n background-color: transparent;\n ", ";\n\n border-left: none;\n border-radius: 0 3px 3px 0;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])), function (_ref) {
2262
- var theme = _ref.theme;
2263
- return css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2264
- });
2265
- var FeedbackMessage = styled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n\n ", ";\n"])), function (_ref2) {
2266
- var theme = _ref2.theme;
2267
- return theme.typography.form.feedback.message;
2268
- });
2269
- var FeedbackIcon = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n"])), IconWrapper, function (_ref3) {
2270
- var theme = _ref3.theme;
2271
- return theme.colors.pureBase;
2261
+ var FeedbackContainer = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n\n background-color: transparent;\n border: 1px solid transparent;\n\n border-left: none;\n border-radius: 0 3px 3px 0;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])));
2262
+ var FeedbackMessage = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n\n font-weight: 500;\n color: var(--white-1);\n"])));
2263
+ var FeedbackIcon = styled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n"])), IconWrapper);
2264
+ var StyledInput = styled.input(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n font-family: var(--font-data);\n\n height: var(--input-height);\n width: 100%;\n border-radius: 3px;\n\n padding: 0 15px 0 15px;\n box-sizing: border-box;\n outline: none;\n\n color: var(--input-color-default);\n font-size: 14px;\n\n transition: \n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n &::placeholder {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n\n"])), removeAutoFillStyle, function (_ref) {
2265
+ var fieldState = _ref.fieldState;
2266
+ return css(_templateObject7$4 || (_templateObject7$4 = _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);
2272
2267
  });
2273
- var StyledInput = styled.input(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n padding: 0 15px 0 15px;\n box-sizing: border-box;\n outline: none;\n\n ", ";\n"])), removeAutoFillStyle, function (_ref4) {
2274
- var theme = _ref4.theme,
2275
- fieldState = _ref4.fieldState;
2276
- return css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n font-family: ", ";\n border: 1px solid ", ";\n "])), theme.dimensions.form.input.height, theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
2277
- }, function (_ref5) {
2278
- var typography = _ref5.theme.typography;
2279
- return css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n "])), typography.form.input.value.normal, typography.form.input.placeholder.normal);
2268
+ var InputContainer = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n\n flex: 1;\n position: relative;\n\n ", "\n\n"])), function (_ref2) {
2269
+ var hasAction = _ref2.hasAction;
2270
+ return hasAction && css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 60px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput);
2280
2271
  });
2281
- var InputContainer = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n\n flex: 1;\n position: relative;\n\n ", "\n\n"])), function (_ref6) {
2282
- var hasAction = _ref6.hasAction;
2283
- return hasAction && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 60px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput);
2272
+ var Container$5 = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (_ref3) {
2273
+ var fieldState = _ref3.fieldState,
2274
+ showFeedback = _ref3.showFeedback;
2275
+ return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n \n display: flex;\n position: relative;\n flex-direction: row;\n\n ", "{\n\n &:disabled {\n cursor: not-allowed;\n }\n \n ", ";\n\n }\n\n ", " {\n ", ";\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
2284
2276
  });
2285
- var Container$5 = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n\n ", "{\n ", ";\n\n &:focus {}\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n }\n"])), StyledInput, function (_ref7) {
2286
- var theme = _ref7.theme,
2287
- fieldState = _ref7.fieldState;
2288
- return theme.styles.form.input[fieldState].normal;
2289
- }, function (_ref8) {
2290
- var fieldState = _ref8.fieldState;
2291
- return ['default', 'disabled'].indexOf(fieldState) === -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2292
- }, FeedbackContainer, function (_ref9) {
2293
- var theme = _ref9.theme,
2294
- fieldState = _ref9.fieldState;
2295
- return theme.styles.form.input[fieldState].normal.borderColor;
2296
- }, function (_ref10) {
2297
- var theme = _ref10.theme,
2298
- fieldState = _ref10.fieldState;
2299
- return theme.styles.form.input[fieldState].normal.borderColor;
2300
- }, function (_ref11) {
2301
- var fieldState = _ref11.fieldState;
2302
- return ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2303
- }, StyledInput, function (_ref12) {
2304
- var theme = _ref12.theme,
2305
- fieldState = _ref12.fieldState;
2306
- return theme.styles.form.input[fieldState].focused;
2307
- });
2308
- var Input = function Input(_ref13) {
2309
- var _ref13$type = _ref13.type,
2310
- type = _ref13$type === void 0 ? 'text' : _ref13$type,
2311
- _ref13$placeholder = _ref13.placeholder,
2312
- placeholder = _ref13$placeholder === void 0 ? '' : _ref13$placeholder,
2313
- defaultValue = _ref13.defaultValue,
2314
- _ref13$fieldState = _ref13.fieldState,
2315
- fieldState = _ref13$fieldState === void 0 ? 'default' : _ref13$fieldState,
2316
- feedbackMessage = _ref13.feedbackMessage,
2317
- actionCallback = _ref13.actionCallback,
2318
- actionIcon = _ref13.actionIcon,
2319
- props = _objectWithoutPropertiesLoose(_ref13, _excluded$4);
2277
+ var Input = function Input(_ref4) {
2278
+ var _ref4$type = _ref4.type,
2279
+ type = _ref4$type === void 0 ? 'text' : _ref4$type,
2280
+ _ref4$placeholder = _ref4.placeholder,
2281
+ placeholder = _ref4$placeholder === void 0 ? '' : _ref4$placeholder,
2282
+ defaultValue = _ref4.defaultValue,
2283
+ _ref4$fieldState = _ref4.fieldState,
2284
+ fieldState = _ref4$fieldState === void 0 ? 'default' : _ref4$fieldState,
2285
+ _ref4$showFeedback = _ref4.showFeedback,
2286
+ showFeedback = _ref4$showFeedback === void 0 ? false : _ref4$showFeedback,
2287
+ feedbackMessage = _ref4.feedbackMessage,
2288
+ actionCallback = _ref4.actionCallback,
2289
+ actionIcon = _ref4.actionIcon,
2290
+ props = _objectWithoutPropertiesLoose(_ref4, _excluded$4);
2320
2291
  var isActionButton = actionCallback !== undefined;
2321
2292
  var feedbackIcon = function feedbackIcon(fieldState) {
2322
2293
  switch (fieldState) {
@@ -2327,17 +2298,17 @@ var Input = function Input(_ref13) {
2327
2298
  case 'required':
2328
2299
  return React__default.createElement(Icon, {
2329
2300
  icon: 'Required',
2330
- size: 20
2301
+ size: 16
2331
2302
  });
2332
2303
  case 'valid':
2333
2304
  return React__default.createElement(Icon, {
2334
2305
  icon: 'Success',
2335
- size: 20
2306
+ size: 16
2336
2307
  });
2337
2308
  case 'invalid':
2338
2309
  return React__default.createElement(Icon, {
2339
2310
  icon: 'Invalid',
2340
- size: 20
2311
+ size: 16
2341
2312
  });
2342
2313
  case 'processing':
2343
2314
  return React__default.createElement(Spinner, {
@@ -2346,9 +2317,11 @@ var Input = function Input(_ref13) {
2346
2317
  });
2347
2318
  }
2348
2319
  };
2349
- return React__default.createElement(Container$5, {
2320
+ return React__default.createElement(Container$5, Object.assign({
2350
2321
  fieldState: fieldState || 'default'
2351
- }, React__default.createElement(InputContainer, {
2322
+ }, {
2323
+ showFeedback: showFeedback
2324
+ }), React__default.createElement(InputContainer, {
2352
2325
  hasAction: isActionButton
2353
2326
  }, React__default.createElement(StyledInput, Object.assign({
2354
2327
  fieldState: fieldState || 'default',
@@ -2361,11 +2334,11 @@ var Input = function Input(_ref13) {
2361
2334
  }, React__default.createElement(Icon, {
2362
2335
  icon: actionIcon || 'NoIcon',
2363
2336
  color: 'primary'
2364
- }))) : null), fieldState ? React__default.createElement(FeedbackContainer, null, React__default.createElement(FeedbackIcon, null, feedbackIcon(fieldState)), feedbackMessage ? React__default.createElement(FeedbackMessage, null, feedbackMessage) : null) : null);
2337
+ }))) : null), fieldState && showFeedback ? React__default.createElement(FeedbackContainer, null, React__default.createElement(FeedbackIcon, null, feedbackIcon(fieldState)), feedbackMessage ? React__default.createElement(FeedbackMessage, null, feedbackMessage) : null) : null);
2365
2338
  };
2366
2339
 
2367
- var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
2368
- var _templateObject$i, _templateObject2$c;
2340
+ var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "required", "children"];
2341
+ var _templateObject$i, _templateObject2$c, _templateObject3$b;
2369
2342
  var StyledLabel = styled.label(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-11);\n font-size: 14px;\n font-weight: 500;\n ", ";\n"])), function (_ref) {
2370
2343
  var theme = _ref.theme;
2371
2344
  return theme.fontFamily.ui;
@@ -2373,57 +2346,70 @@ var StyledLabel = styled.label(_templateObject$i || (_templateObject$i = _tagged
2373
2346
  var rightAlign = _ref2.rightAlign;
2374
2347
  return rightAlign ? "\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n justify-content: left;\n " : "\n display: block;\n margin-bottom: 20px;\n ";
2375
2348
  });
2376
- var LabelText = styled.span(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n display: block;\n ", "\n"])), function (_ref3) {
2349
+ var LabelText = styled.span(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 8px;\n align-items: center;\n\n\n ", "\n\n ", "\n"])), function (_ref3) {
2377
2350
  var rightAlign = _ref3.rightAlign;
2378
2351
  return rightAlign ? "\n margin-left: 12px;\n " : "\n margin-bottom: 10px;\n ";
2379
- });
2380
- var Label = function Label(_ref4) {
2381
- var htmlFor = _ref4.htmlFor,
2382
- labelText = _ref4.labelText,
2383
- _ref4$rightAlign = _ref4.rightAlign,
2384
- rightAlign = _ref4$rightAlign === void 0 ? false : _ref4$rightAlign,
2385
- children = _ref4.children,
2386
- props = _objectWithoutPropertiesLoose(_ref4, _excluded$5);
2352
+ }, function (_ref4) {
2353
+ var required = _ref4.required;
2354
+ return required && css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: var(--input-required-dot-display);\n height: 8px;\n width: 8px;\n background-color: var(--primary-9);\n border-radius: 4px;\n }\n "])));
2355
+ });
2356
+ var Label = function Label(_ref5) {
2357
+ var htmlFor = _ref5.htmlFor,
2358
+ labelText = _ref5.labelText,
2359
+ _ref5$rightAlign = _ref5.rightAlign,
2360
+ rightAlign = _ref5$rightAlign === void 0 ? false : _ref5$rightAlign,
2361
+ _ref5$required = _ref5.required,
2362
+ required = _ref5$required === void 0 ? false : _ref5$required,
2363
+ children = _ref5.children,
2364
+ props = _objectWithoutPropertiesLoose(_ref5, _excluded$5);
2387
2365
  return React__default.createElement(StyledLabel, Object.assign({}, {
2388
2366
  htmlFor: htmlFor,
2389
2367
  rightAlign: rightAlign
2390
2368
  }, props), React__default.createElement(LabelText, Object.assign({}, {
2391
- rightAlign: rightAlign
2369
+ rightAlign: rightAlign,
2370
+ required: required
2392
2371
  }), labelText), children);
2393
2372
  };
2394
2373
 
2395
- var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "className"];
2396
- var _templateObject$j, _templateObject2$d, _templateObject3$b, _templateObject4$a, _templateObject5$8, _templateObject6$5;
2374
+ var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
2375
+ var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$5, _templateObject7$5;
2397
2376
  var StyledInput$1 = styled.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);
2398
2377
  var InputContainer$1 = styled.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) {
2399
2378
  var fieldState = _ref.fieldState;
2400
- return css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-border-", ");\n background: var(--input-background-", ");\n transition: \n border var(--speed-normal) var(--easing-primary-out),\n background-color var(--speed-normal) var(--easing-primary-out);\n "])), fieldState, fieldState);
2379
+ return 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);
2401
2380
  }, function (_ref2) {
2402
2381
  var hasAction = _ref2.hasAction;
2403
2382
  return hasAction && css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 200px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput$1);
2404
2383
  });
2405
- var UnitKey = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n flex: 0 1;\n font-size: 12px;\n font-family: var(--font-ui);\n line-height: var(--common-height);\n color: var(--input-color-unit);\n"])));
2406
- var Container$6 = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n\n &:focus-within ", " {\n transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n box-shadow: 0 3px 3px var(--input-focused-shadow-color);\n }\n"])), InputContainer$1);
2407
- var SmallInput = function SmallInput(_ref3) {
2408
- var unit = _ref3.unit,
2409
- label = _ref3.label,
2410
- name = _ref3.name,
2411
- _ref3$type = _ref3.type,
2412
- type = _ref3$type === void 0 ? 'text' : _ref3$type,
2413
- _ref3$placeholder = _ref3.placeholder,
2414
- placeholder = _ref3$placeholder === void 0 ? '' : _ref3$placeholder,
2415
- defaultValue = _ref3.defaultValue,
2416
- _ref3$fieldState = _ref3.fieldState,
2417
- fieldState = _ref3$fieldState === void 0 ? 'default' : _ref3$fieldState,
2418
- className = _ref3.className,
2419
- props = _objectWithoutPropertiesLoose(_ref3, _excluded$6);
2384
+ var UnitKey = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n flex: 0 1;\n font-size: 12px;\n font-family: var(--font-ui);\n color: var(--input-color-unit);\n margin-top: 1px;\n"])));
2385
+ var Container$6 = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n \n ", ";\n"])), function (_ref3) {
2386
+ var fieldState = _ref3.fieldState;
2387
+ return fieldState && css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n &:focus-within ", " {\n transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n box-shadow: 0 3px 3px var(--input-", "-focused-shadow-color, var(--input-", "-shadow-color));\n }\n "])), InputContainer$1, fieldState, fieldState);
2388
+ });
2389
+ var SmallInput = function SmallInput(_ref4) {
2390
+ var unit = _ref4.unit,
2391
+ label = _ref4.label,
2392
+ name = _ref4.name,
2393
+ _ref4$type = _ref4.type,
2394
+ type = _ref4$type === void 0 ? 'text' : _ref4$type,
2395
+ _ref4$placeholder = _ref4.placeholder,
2396
+ placeholder = _ref4$placeholder === void 0 ? '' : _ref4$placeholder,
2397
+ defaultValue = _ref4.defaultValue,
2398
+ _ref4$fieldState = _ref4.fieldState,
2399
+ fieldState = _ref4$fieldState === void 0 ? 'default' : _ref4$fieldState,
2400
+ _ref4$required = _ref4.required,
2401
+ required = _ref4$required === void 0 ? false : _ref4$required,
2402
+ className = _ref4.className,
2403
+ props = _objectWithoutPropertiesLoose(_ref4, _excluded$6);
2420
2404
  return React__default.createElement(Container$6, {
2421
2405
  className: className,
2422
2406
  fieldState: fieldState || 'default'
2423
- }, React__default.createElement(Label, {
2407
+ }, React__default.createElement(Label, Object.assign({
2424
2408
  labelText: label,
2425
2409
  htmlFor: name || ''
2426
- }, React__default.createElement(InputContainer$1, {
2410
+ }, {
2411
+ required: required
2412
+ }), React__default.createElement(InputContainer$1, {
2427
2413
  fieldState: fieldState || 'default'
2428
2414
  }, React__default.createElement(StyledInput$1, Object.assign({
2429
2415
  fieldState: fieldState || 'default',
@@ -2433,7 +2419,7 @@ var SmallInput = function SmallInput(_ref3) {
2433
2419
  }, props)), unit ? React__default.createElement(UnitKey, null, unit) : null)));
2434
2420
  };
2435
2421
 
2436
- var _templateObject$k, _templateObject2$e, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$3, _templateObject10$2, _templateObject11$1;
2422
+ var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject10$2, _templateObject11$1;
2437
2423
  var SwitchPosition;
2438
2424
  (function (SwitchPosition) {
2439
2425
  SwitchPosition[SwitchPosition["Off"] = 0] = "Off";
@@ -2462,7 +2448,7 @@ var getPositionKey = function getPositionKey(switchPos) {
2462
2448
  return 'off';
2463
2449
  }
2464
2450
  };
2465
- var SwitchInner = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n box-sizing: border-box;\n"])));
2451
+ var SwitchInner = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n box-sizing: border-box;\n"])));
2466
2452
  var LabelText$1 = styled.span(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n\n flex: 1;\n margin-left: 10px;\n display: block;\n\n line-height: ", ";\n\n ", ";\n"])), function (_ref) {
2467
2453
  var theme = _ref.theme;
2468
2454
  return theme.fontFamily.ui;
@@ -2473,7 +2459,7 @@ var LabelText$1 = styled.span(_templateObject4$b || (_templateObject4$b = _tagge
2473
2459
  });
2474
2460
  var IconWrapper$1 = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n }\n"])));
2475
2461
  var SpinnerWrapper = styled.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n margin-top: 1px;\n"])));
2476
- var Container$7 = styled.label(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n ", "{\n ", "\n\n ", "\n\n ", "\n }\n\n ", "{\n ", "\n }\n\n &:hover {\n ", "{\n left: ", ";\n }\n }\n"])), SwitchInner, function (_ref2) {
2462
+ var Container$7 = styled.label(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n ", "{\n ", "\n\n ", "\n\n ", "\n }\n\n ", "{\n ", "\n }\n\n &:hover {\n ", "{\n left: ", ";\n }\n }\n"])), SwitchInner, function (_ref2) {
2477
2463
  var theme = _ref2.theme,
2478
2464
  position = _ref2.position,
2479
2465
  themeState = _ref2.themeState,
@@ -2706,7 +2692,7 @@ function SvgNoImage() {
2706
2692
  }));
2707
2693
  }
2708
2694
 
2709
- var _templateObject$l, _templateObject2$f, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1;
2695
+ var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14;
2710
2696
  var CheckboxState;
2711
2697
  (function (CheckboxState) {
2712
2698
  CheckboxState["Off"] = "off";
@@ -2716,7 +2702,7 @@ var CheckboxState;
2716
2702
  var RealInput$1 = styled.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
2717
2703
  var CheckboxOuter = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n\n ", ";\n"])), function (_ref) {
2718
2704
  var theme = _ref.theme;
2719
- return theme && css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n transition: border-color ", " ", ";\n "])), theme.animation.speed.faster, theme.animation.easing.primary.easeInOut);
2705
+ return theme && css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n transition: border-color ", " ", ";\n "])), theme.animation.speed.faster, theme.animation.easing.primary.easeInOut);
2720
2706
  });
2721
2707
  var CheckboxInner = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
2722
2708
  var IconWrapper$2 = styled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: ", ";\n }\n }\n"])), function (_ref2) {
@@ -2726,7 +2712,7 @@ var IconWrapper$2 = styled.div(_templateObject5$a || (_templateObject5$a = _tagg
2726
2712
  var Container$8 = styled.label(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n user-select: none;\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref3) {
2727
2713
  var visualState = _ref3.visualState,
2728
2714
  disabled = _ref3.disabled;
2729
- return visualState === CheckboxState.Off && css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n ", "{\n border-color: var(--grey-9);\n border: var(--grey-9) 2px solid;\n }\n\n ", ";\n\n ", "\n "])), CheckboxOuter, !disabled && css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-9);\n border: var(--primary-9) 2px solid;\n }"])), CheckboxOuter), disabled && css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 2px solid;\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
2715
+ return visualState === CheckboxState.Off && css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n ", "{\n border-color: var(--grey-9);\n border: var(--grey-9) 2px solid;\n }\n\n ", ";\n\n ", "\n "])), CheckboxOuter, !disabled && css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-9);\n border: var(--primary-9) 2px solid;\n }"])), CheckboxOuter), disabled && css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 2px solid;\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
2730
2716
  }, function (_ref4) {
2731
2717
  var visualState = _ref4.visualState,
2732
2718
  disabled = _ref4.disabled;
@@ -2734,7 +2720,7 @@ var Container$8 = styled.label(_templateObject6$7 || (_templateObject6$7 = _tagg
2734
2720
  }, function (_ref5) {
2735
2721
  var visualState = _ref5.visualState,
2736
2722
  disabled = _ref5.disabled;
2737
- return visualState === CheckboxState.Indeterminate && css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-6);\n }\n ", ";\n\n "])), CheckboxOuter, !disabled && css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-6);\n }\n "])), CheckboxOuter));
2723
+ return visualState === CheckboxState.Indeterminate && css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-6);\n }\n ", ";\n\n "])), CheckboxOuter, !disabled && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n box-shadow: inset 0px 1px 5px 0px var(--grey-a1);\n background-color: var(--primary-6);\n }\n "])), CheckboxOuter));
2738
2724
  });
2739
2725
  var Checkbox = function Checkbox(_ref6) {
2740
2726
  var _ref6$indeterminate = _ref6.indeterminate,
@@ -2786,13 +2772,13 @@ var Checkbox = function Checkbox(_ref6) {
2786
2772
  })), " ");
2787
2773
  };
2788
2774
 
2789
- var _templateObject$m, _templateObject2$g, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$8, _templateObject7$7, _templateObject8$6, _templateObject9$5, _templateObject10$4;
2775
+ var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$5, _templateObject10$4;
2790
2776
  var InnerRadio = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
2791
2777
  var OuterRadio = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n user-select: none;\n\n ", ";\n"])), function (_ref) {
2792
2778
  var styles = _ref.theme.styles,
2793
2779
  isChecked = _ref.isChecked,
2794
2780
  disabled = _ref.disabled;
2795
- return styles && css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n border-color: var(--input-selection-control-default);\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), !disabled && css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--input-selection-control-selected);\n }\n "]))), isChecked && !disabled && css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n border-color: var(--input-selection-control-selected);\n ", " {\n background-color: var(--input-selection-control-selected);\n }\n "])), InnerRadio), isChecked && !disabled && css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: var(--input-selection-control-selected);\n ", " {\n background-color: var(--input-selection-control-selected);\n }\n }\n "])), InnerRadio), isChecked && disabled && css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-selection-control-selected-disabled);\n ", " {\n background-color: var(--input-selection-control-selected-disabled);\n }\n "])), InnerRadio), !isChecked && disabled && css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--grey-6);\n "]))));
2781
+ return styles && css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n border-color: var(--input-selection-control-default);\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), !disabled && css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--input-selection-control-selected);\n }\n "]))), isChecked && !disabled && css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n border-color: var(--input-selection-control-selected);\n ", " {\n background-color: var(--input-selection-control-selected);\n }\n "])), InnerRadio), isChecked && !disabled && css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: var(--input-selection-control-selected);\n ", " {\n background-color: var(--input-selection-control-selected);\n }\n }\n "])), InnerRadio), isChecked && disabled && css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-selection-control-selected-disabled);\n ", " {\n background-color: var(--input-selection-control-selected-disabled);\n }\n "])), InnerRadio), !isChecked && disabled && css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--grey-6);\n "]))));
2796
2782
  });
2797
2783
  var HiddenInput = styled.input(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n padding:0;\n opacity: 0;\n"])));
2798
2784
  var Container$9 = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n"])));
@@ -2828,61 +2814,30 @@ var RadioButton = function RadioButton(_ref2) {
2828
2814
  }), React__default.createElement(InnerRadio, null)));
2829
2815
  };
2830
2816
 
2831
- var _excluded$7 = ["placeholder", "fieldState", "feedbackMessage", "children"];
2832
- var _templateObject$n, _templateObject2$h, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$9, _templateObject7$8, _templateObject8$7, _templateObject9$6, _templateObject10$5;
2817
+ var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
2818
+ var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$6;
2833
2819
  var FeedbackIcon$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n padding-top: 2px;\n"])));
2834
- var StyledTextArea = styled.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n ", ";\n"])), function (_ref) {
2835
- var theme = _ref.theme,
2836
- fieldState = _ref.fieldState;
2837
- return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border: 1px solid ", ";\n"])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
2838
- }, function (_ref2) {
2839
- var typography = _ref2.theme.typography;
2840
- return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n"])), typography.form.input.value.normal, typography.form.input.placeholder.normal);
2820
+ var StyledTextArea = styled.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n\n color: var(--input-color-default);\n font-size: 14px;\n \n transition: \n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n &::placeholder {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n\n"])), function (_ref) {
2821
+ var fieldState = _ref.fieldState;
2822
+ return css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread) var(--input-", "-shadow-color, transparent);\n "])), fieldState, fieldState, fieldState);
2841
2823
  });
2842
- var FeedbackContainer$1 = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n padding: 8px 0;\n background-color: transparent;\n ", ";\n\n border-left: none;\n border-radius: 0 0 3px 3px;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])), function (_ref3) {
2843
- var theme = _ref3.theme;
2844
- return css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
2824
+ var FeedbackContainer$1 = styled.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n padding: 8px 0;\n background-color: transparent;\n border: 1px solid transparent;\n\n border-left: none;\n border-radius: 0 0 3px 3px;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])));
2825
+ var FeedbackMessage$1 = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n font-weight: 500;\n color: var(--white-1);\n"])));
2826
+ var Container$a = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
2827
+ var fieldState = _ref2.fieldState,
2828
+ showFeedback = _ref2.showFeedback;
2829
+ return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose([" \n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n \n &:disabled {\n cursor: not-allowed;\n }\n \n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n display:none;\n "]))), FeedbackContainer$1, fieldState, fieldState);
2845
2830
  });
2846
- var FeedbackMessage$1 = styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n ", ";\n"])), function (_ref4) {
2847
- var theme = _ref4.theme;
2848
- return theme.typography.form.feedback.message;
2849
- });
2850
- var Container$a = styled.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n ", "{\n ", ";\n\n &:focus {\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n\n ", ";\n\n ", ";\n }\n\n"])), StyledTextArea, function (_ref5) {
2851
- var theme = _ref5.theme,
2852
- fieldState = _ref5.fieldState;
2853
- return theme.styles.form.input[fieldState].normal;
2854
- }, function (_ref6) {
2855
- var fieldState = _ref6.fieldState;
2856
- return ['default', 'disabled'].indexOf(fieldState) === -1 && css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
2857
- }, FeedbackContainer$1, function (_ref7) {
2858
- var theme = _ref7.theme,
2859
- fieldState = _ref7.fieldState;
2860
- return theme.styles.form.input[fieldState].normal.borderColor;
2861
- }, function (_ref8) {
2862
- var theme = _ref8.theme,
2863
- fieldState = _ref8.fieldState;
2864
- return theme.styles.form.input[fieldState].normal.borderColor;
2865
- }, function (_ref9) {
2866
- var fieldState = _ref9.fieldState;
2867
- return ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n display:none;\n "])));
2868
- }, FeedbackContainer$1, function (_ref10) {
2869
- var fieldState = _ref10.fieldState;
2870
- return fieldState === 'required' ? "\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n " : null;
2871
- }, function (_ref11) {
2872
- var fieldState = _ref11.fieldState;
2873
- return fieldState === 'valid' ? "\n box-shadow: 0px 3px 5px 0px var(--success-a3);\n " : null;
2874
- }, function (_ref12) {
2875
- var fieldState = _ref12.fieldState;
2876
- return fieldState === 'invalid' ? "\n box-shadow: 0px 3px 7px 0px var(--warning-a3);\n " : null;
2877
- });
2878
- var TextArea = function TextArea(_ref13) {
2879
- var _ref13$placeholder = _ref13.placeholder,
2880
- placeholder = _ref13$placeholder === void 0 ? '' : _ref13$placeholder,
2881
- _ref13$fieldState = _ref13.fieldState,
2882
- fieldState = _ref13$fieldState === void 0 ? 'default' : _ref13$fieldState,
2883
- feedbackMessage = _ref13.feedbackMessage,
2884
- children = _ref13.children,
2885
- props = _objectWithoutPropertiesLoose(_ref13, _excluded$7);
2831
+ var TextArea = function TextArea(_ref3) {
2832
+ var _ref3$placeholder = _ref3.placeholder,
2833
+ placeholder = _ref3$placeholder === void 0 ? '' : _ref3$placeholder,
2834
+ _ref3$fieldState = _ref3.fieldState,
2835
+ fieldState = _ref3$fieldState === void 0 ? 'default' : _ref3$fieldState,
2836
+ _ref3$showFeedback = _ref3.showFeedback,
2837
+ showFeedback = _ref3$showFeedback === void 0 ? false : _ref3$showFeedback,
2838
+ feedbackMessage = _ref3.feedbackMessage,
2839
+ children = _ref3.children,
2840
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
2886
2841
  var feedbackIcon = function feedbackIcon(fieldState) {
2887
2842
  switch (fieldState) {
2888
2843
  case 'default':
@@ -2914,21 +2869,23 @@ var TextArea = function TextArea(_ref13) {
2914
2869
  });
2915
2870
  }
2916
2871
  };
2917
- return React__default.createElement(Container$a, {
2872
+ return React__default.createElement(Container$a, Object.assign({
2918
2873
  fieldState: fieldState || 'default'
2919
- }, React__default.createElement(StyledTextArea, Object.assign({
2874
+ }, {
2875
+ showFeedback: showFeedback
2876
+ }), React__default.createElement(StyledTextArea, Object.assign({
2920
2877
  fieldState: fieldState || 'default',
2921
2878
  placeholder: placeholder,
2922
2879
  disabled: fieldState === 'disabled' || fieldState === 'processing'
2923
- }, props), children), fieldState && React__default.createElement(FeedbackContainer$1, null, React__default.createElement(FeedbackIcon$1, null, feedbackIcon(fieldState)), React__default.createElement(FeedbackMessage$1, null, feedbackMessage)));
2880
+ }, 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)));
2924
2881
  };
2925
2882
 
2926
2883
  var _excluded$8 = ["placeholder", "label", "isCompact", "defaultValue", "changeCallback", "children"];
2927
- var _templateObject$o, _templateObject2$i, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$a, _templateObject7$9, _templateObject8$8, _templateObject9$7, _templateObject10$6, _templateObject11$3, _templateObject12$2, _templateObject13$2;
2884
+ 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;
2928
2885
  var SelectWrapper = styled.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);
2929
2886
  var StyledSelect = styled.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) {
2930
2887
  var styles = _ref.theme.styles;
2931
- return css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
2888
+ return css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
2932
2889
  }, function (_ref2) {
2933
2890
  var styles = _ref2.theme.styles;
2934
2891
  return css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input.disabled.normal);
@@ -2938,7 +2895,7 @@ var Container$b = styled.div(_templateObject5$d || (_templateObject5$d = _tagged
2938
2895
  return isCompact && css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n ", " {\n span {\n margin-bottom: 6px;\n }\n }\n "])), StyledLabel);
2939
2896
  }, function (_ref4) {
2940
2897
  var isLabelSameRow = _ref4.isLabelSameRow;
2941
- return isLabelSameRow && css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n ", " {\n display: flex;\n align-items: center;\n span {\n margin: 0 10px 0 0;\n }\n }\n"])), StyledLabel);
2898
+ return isLabelSameRow && 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);
2942
2899
  }, StyledSelect, function (_ref5) {
2943
2900
  var theme = _ref5.theme;
2944
2901
  return 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);
@@ -2949,7 +2906,7 @@ var Container$b = styled.div(_templateObject5$d || (_templateObject5$d = _tagged
2949
2906
  }, function (_ref7) {
2950
2907
  var theme = _ref7.theme,
2951
2908
  activePlaceholder = _ref7.activePlaceholder;
2952
- return activePlaceholder && css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.form.input.placeholder.normal);
2909
+ return activePlaceholder && css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.form.input.placeholder.normal);
2953
2910
  }, function (_ref8) {
2954
2911
  var theme = _ref8.theme,
2955
2912
  isCompact = _ref8.isCompact,
@@ -3068,7 +3025,7 @@ var isNotNumber = function isNotNumber(value) {
3068
3025
  };
3069
3026
 
3070
3027
  var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
3071
- var _templateObject$p, _templateObject2$j, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$a, _templateObject8$9, _templateObject9$8, _templateObject10$7, _templateObject11$4, _templateObject12$3;
3028
+ 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;
3072
3029
  var ThumbDiameter = 16;
3073
3030
  var SliderWrapper = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
3074
3031
  var theme = _ref.theme;
@@ -3077,7 +3034,7 @@ var SliderWrapper = styled.div(_templateObject$p || (_templateObject$p = _tagged
3077
3034
  var disabled = _ref2.disabled;
3078
3035
  return disabled && css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n opacity: .5;\n "])));
3079
3036
  });
3080
- var HiddenInput$1 = styled.input(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin: 0;\n padding:0;\n opacity: .001;\n z-index: 99;\n cursor: ", ";\n"])), function (_ref3) {
3037
+ var HiddenInput$1 = styled.input(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin: 0;\n padding:0;\n opacity: .001;\n z-index: 99;\n cursor: ", ";\n"])), function (_ref3) {
3081
3038
  var disabled = _ref3.disabled;
3082
3039
  return disabled ? "not-allowed" : "pointer";
3083
3040
  });
@@ -3091,7 +3048,7 @@ var MarkLabel = styled.span(_templateObject6$b || (_templateObject6$b = _taggedT
3091
3048
  return "calc(" + leftValue + "% + 7px)";
3092
3049
  }, function (_ref6) {
3093
3050
  var alignment = _ref6.alignment;
3094
- return alignment === 'center' && css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["transform: translateX(-50%);;"])));
3051
+ return alignment === 'center' && css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["transform: translateX(-50%);;"])));
3095
3052
  }, function (_ref7) {
3096
3053
  var alignment = _ref7.alignment;
3097
3054
  return alignment === 'right' && css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
@@ -3099,7 +3056,7 @@ var MarkLabel = styled.span(_templateObject6$b || (_templateObject6$b = _taggedT
3099
3056
  var alignment = _ref8.alignment;
3100
3057
  return alignment === 'left' && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
3101
3058
  });
3102
- var ThumbWrapper = styled.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-right: 16px;\n left: 0;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n"])), ThumbDiameter);
3059
+ var ThumbWrapper = styled.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);
3103
3060
  var Thumb = styled.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) {
3104
3061
  var theme = _ref9.theme,
3105
3062
  bgColor = _ref9.bgColor;
@@ -3284,10 +3241,10 @@ var SliderInput = function SliderInput(_ref12) {
3284
3241
  };
3285
3242
 
3286
3243
  var _excluded$a = ["text", "buttonDesign", "buttonSize", "inputCallback"];
3287
- var _templateObject$q, _templateObject2$k, _templateObject3$i;
3244
+ var _templateObject$q, _templateObject2$k, _templateObject3$j;
3288
3245
  var Container$c = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
3289
3246
  var HiddenInput$2 = styled.input(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
3290
- var StyledButton$2 = styled(Button)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
3247
+ var StyledButton$2 = styled(Button)(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
3291
3248
  var InputFileButton = function InputFileButton(_ref) {
3292
3249
  var text = _ref.text,
3293
3250
  buttonDesign = _ref.buttonDesign,
@@ -3327,10 +3284,10 @@ var InputFileButton = function InputFileButton(_ref) {
3327
3284
  };
3328
3285
 
3329
3286
  var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
3330
- var _templateObject$r, _templateObject2$l, _templateObject3$j, _templateObject4$h, _templateObject5$f;
3287
+ var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$h, _templateObject5$f;
3331
3288
  var Container$d = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
3332
3289
  var Headers = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 30px;\n padding: 0 6px;\n"])));
3333
- var ValueLabel = styled(Label)(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3290
+ var ValueLabel = styled(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
3334
3291
  var theme = _ref.theme;
3335
3292
  return theme.fontFamily.ui;
3336
3293
  });
@@ -3377,13 +3334,13 @@ var DurationSlider = function DurationSlider(_ref3) {
3377
3334
  };
3378
3335
 
3379
3336
  var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle", "showValue", "allMarkCentered"];
3380
- var _templateObject$s, _templateObject2$m, _templateObject3$k;
3337
+ var _templateObject$s, _templateObject2$m, _templateObject3$l;
3381
3338
  var Container$e = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose([""])));
3382
3339
  var Headers$1 = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n ", ";\n"])), function (_ref) {
3383
3340
  var allMarkCentered = _ref.allMarkCentered;
3384
3341
  return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
3385
3342
  });
3386
- var ValueTitle$1 = styled(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref2) {
3343
+ var ValueTitle$1 = styled(Label)(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref2) {
3387
3344
  var theme = _ref2.theme;
3388
3345
  return theme.fontFamily.data;
3389
3346
  });
@@ -3443,12 +3400,13 @@ var PercentageSlider = function PercentageSlider(_ref3) {
3443
3400
  })));
3444
3401
  };
3445
3402
 
3446
- var _excluded$d = ["name", "label", "fieldState", "feedbackMessage"];
3403
+ var _excluded$d = ["name", "label", "fieldState", "feedbackMessage", "required"];
3447
3404
  var PasswordField = function PasswordField(_ref) {
3448
3405
  var name = _ref.name,
3449
3406
  label = _ref.label,
3450
3407
  fieldState = _ref.fieldState,
3451
3408
  feedbackMessage = _ref.feedbackMessage,
3409
+ required = _ref.required,
3452
3410
  props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
3453
3411
  var _useState = useState(false),
3454
3412
  showValue = _useState[0],
@@ -3461,55 +3419,67 @@ var PasswordField = function PasswordField(_ref) {
3461
3419
  setShowValue(newValue);
3462
3420
  setActionIcon(newValue ? 'PasswordShow' : 'PasswordHide');
3463
3421
  };
3464
- return React__default.createElement(Label, {
3422
+ return React__default.createElement(Label, Object.assign({
3465
3423
  htmlFor: name,
3466
3424
  labelText: label
3467
- }, React__default.createElement(Input, Object.assign({
3425
+ }, {
3426
+ required: required
3427
+ }), React__default.createElement(Input, Object.assign({
3468
3428
  type: showValue ? 'text' : 'password',
3469
3429
  actionCallback: actionCallback,
3470
3430
  actionIcon: actionIcon
3471
3431
  }, _extends({
3472
3432
  name: name,
3473
3433
  fieldState: fieldState,
3474
- feedbackMessage: feedbackMessage
3434
+ feedbackMessage: feedbackMessage,
3435
+ required: required
3475
3436
  }, props))));
3476
3437
  };
3477
3438
 
3478
- var _excluded$e = ["name", "label", "fieldState", "feedbackMessage", "type"];
3439
+ var _excluded$e = ["name", "label", "fieldState", "feedbackMessage", "required", "type"];
3479
3440
  var TextField = function TextField(_ref) {
3480
3441
  var name = _ref.name,
3481
3442
  label = _ref.label,
3482
3443
  _ref$fieldState = _ref.fieldState,
3483
3444
  fieldState = _ref$fieldState === void 0 ? 'default' : _ref$fieldState,
3484
3445
  feedbackMessage = _ref.feedbackMessage,
3446
+ required = _ref.required,
3485
3447
  props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
3486
- return React__default.createElement(Label, {
3448
+ return React__default.createElement(Label, Object.assign({
3487
3449
  htmlFor: name,
3488
3450
  labelText: label
3489
- }, React__default.createElement(Input, Object.assign({
3451
+ }, {
3452
+ required: required
3453
+ }), React__default.createElement(Input, Object.assign({
3490
3454
  type: 'text'
3491
3455
  }, _extends({
3492
3456
  fieldState: fieldState,
3493
3457
  feedbackMessage: feedbackMessage,
3458
+ required: required,
3494
3459
  name: name
3495
3460
  }, props))));
3496
3461
  };
3497
3462
 
3498
- var _excluded$f = ["name", "label", "fieldState", "feedbackMessage", "children"];
3463
+ var _excluded$f = ["name", "label", "fieldState", "feedbackMessage", "required", "children"];
3499
3464
  var TextAreaField = function TextAreaField(_ref) {
3500
3465
  var name = _ref.name,
3501
3466
  label = _ref.label,
3502
3467
  _ref$fieldState = _ref.fieldState,
3503
3468
  fieldState = _ref$fieldState === void 0 ? 'default' : _ref$fieldState,
3504
3469
  feedbackMessage = _ref.feedbackMessage,
3470
+ _ref$required = _ref.required,
3471
+ required = _ref$required === void 0 ? false : _ref$required,
3505
3472
  props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
3506
- return React__default.createElement(Label, {
3473
+ return React__default.createElement(Label, Object.assign({
3507
3474
  htmlFor: name,
3508
3475
  labelText: label
3509
- }, React__default.createElement(TextArea, Object.assign({}, _extends({
3476
+ }, {
3477
+ required: required
3478
+ }), React__default.createElement(TextArea, Object.assign({}, _extends({
3510
3479
  fieldState: fieldState,
3511
3480
  feedbackMessage: feedbackMessage,
3512
- name: name
3481
+ name: name,
3482
+ required: required
3513
3483
  }, props))));
3514
3484
  };
3515
3485
 
@@ -3800,20 +3770,20 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
3800
3770
  return isDifferent;
3801
3771
  };
3802
3772
 
3803
- var _templateObject$u, _templateObject2$o, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$b, _templateObject8$a, _templateObject9$9, _templateObject10$8, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
3773
+ 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;
3804
3774
  var CropLineStyle = css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
3805
3775
  var TopLine = styled.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);
3806
- var RightLine = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
3776
+ var RightLine = styled.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);
3807
3777
  var BottomLine = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n ", "\n cursor: s-resize;\n bottom: -3px;\n height: 5px;\n width: 100%;\n left: 0;\n"])), CropLineStyle);
3808
3778
  var LeftLine = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: w-resize;\n left: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
3809
3779
  var resizeSquaresCss = css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: solid 1px var(--black-a12);\n background-color: var(--white-1);\n"])));
3810
- var PointN = styled.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
3780
+ var PointN = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
3811
3781
  var isResizable = _ref.isResizable;
3812
3782
  return isResizable && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
3813
3783
  });
3814
3784
  var PointNW = styled.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
3815
3785
  var isResizable = _ref2.isResizable;
3816
- return isResizable && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
3786
+ return isResizable && css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
3817
3787
  });
3818
3788
  var PointNE = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref3) {
3819
3789
  var isResizable = _ref3.isResizable;
@@ -3821,7 +3791,7 @@ var PointNE = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTe
3821
3791
  });
3822
3792
  var PointE = styled.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n ", ";\n margin-top: -5px;\n top: 50%;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref4) {
3823
3793
  var isResizable = _ref4.isResizable;
3824
- return isResizable && css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n cursor: e-resize;\n "])));
3794
+ return isResizable && css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n cursor: e-resize;\n "])));
3825
3795
  });
3826
3796
  var PointSE = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n ", ";\n bottom: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref5) {
3827
3797
  var isResizable = _ref5.isResizable;
@@ -3877,13 +3847,13 @@ var CropArea = function CropArea(_ref9) {
3877
3847
  })));
3878
3848
  };
3879
3849
 
3880
- var _templateObject$v, _templateObject2$p, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$c, _templateObject8$b, _templateObject9$a;
3850
+ var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a;
3881
3851
  var Container$g = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
3882
3852
  var theme = _ref.theme;
3883
3853
  return theme.fontFamily.ui;
3884
3854
  });
3885
3855
  var InnerContainer$2 = styled.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: 99;\n"])));
3886
- var ToolHeader = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
3856
+ var ToolHeader = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
3887
3857
  var TextGroup = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 20px;\n font-weight: 500;\n color: var(--mono);\n\n ", " {\n display: flex;\n align-items: center;\n margin-right: 14px;\n }\n"])), IconWrapper);
3888
3858
  var ButtonsGroup = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
3889
3859
  var PreviewArea = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n height: ", ";\n width: ", ";\n border-radius: 5px;\n background-color: var(--grey-3);\n background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);\n"])), function (_ref2) {
@@ -3893,7 +3863,7 @@ var PreviewArea = styled.div(_templateObject6$d || (_templateObject6$d = _tagged
3893
3863
  var canvasWidth = _ref3.canvasWidth;
3894
3864
  return canvasWidth ? canvasWidth + "px" : "485px";
3895
3865
  });
3896
- var HiddenImage = styled.img(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
3866
+ var HiddenImage = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
3897
3867
  var SelectedArea = styled.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n border: dashed 1px var(--black-a12);\n box-shadow: 0 0 0 9999em var(--black-a11);\n ", ";\n cursor: move;\n"])), function (_ref4) {
3898
3868
  var cropLeft = _ref4.cropLeft,
3899
3869
  cropTop = _ref4.cropTop,
@@ -4163,7 +4133,7 @@ var CropTool = function CropTool(_ref5) {
4163
4133
  })))))), document.body);
4164
4134
  };
4165
4135
 
4166
- var _templateObject$w, _templateObject2$q, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$d, _templateObject8$c, _templateObject9$b;
4136
+ var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$b;
4167
4137
  var CROP_HEIGHT_AREA = 500;
4168
4138
  var CROP_WIDTH_AREA = 475;
4169
4139
  var CANVAS_HEIGHT = 490;
@@ -4175,11 +4145,11 @@ var Container$h = styled.div(_templateObject$w || (_templateObject$w = _taggedTe
4175
4145
  var theme = _ref.theme;
4176
4146
  return css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
4177
4147
  });
4178
- var PreviewImageGroup = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
4148
+ var PreviewImageGroup = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
4179
4149
  var PhotoContainerStyle = css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n background-color: var(--grey-5);\n"])));
4180
4150
  var PreviewImage = styled.img(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
4181
4151
  var PlaceholderText = styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
4182
- var NoPhoto = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4152
+ var NoPhoto = styled.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
4183
4153
  var StyledInputFileButton = styled(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
4184
4154
  var ButtonsWrapper = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
4185
4155
  var AvatarUploader = function AvatarUploader(_ref2) {
@@ -4325,10 +4295,10 @@ var AvatarUploader = function AvatarUploader(_ref2) {
4325
4295
  };
4326
4296
 
4327
4297
  var _excluded$h = ["icons", "color", "size", "weight"];
4328
- var _templateObject$x, _templateObject2$r, _templateObject3$o;
4298
+ var _templateObject$x, _templateObject2$r, _templateObject3$p;
4329
4299
  var Container$i = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 27px;\n ", " {\n display: flex;\n align-items: center;\n }\n"])), IconWrapper);
4330
4300
  var PlusIcon = styled(Icon)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose([""])));
4331
- var PlusIconWrapper = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n margin: 0 30px;\n ", "{\n transform: rotate(45deg);\n [stroke]{\n stroke: var(--primary-7);\n }\n }\n"])), IconWrapper);
4301
+ var PlusIconWrapper = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n margin: 0 30px;\n ", "{\n transform: rotate(45deg);\n [stroke]{\n stroke: var(--primary-7);\n }\n }\n"])), IconWrapper);
4332
4302
  var BigIconsSummary = function BigIconsSummary(_ref) {
4333
4303
  var icons = _ref.icons,
4334
4304
  _ref$color = _ref.color,
@@ -4354,13 +4324,13 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
4354
4324
  }));
4355
4325
  };
4356
4326
 
4357
- var _templateObject$y, _templateObject2$s, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$f;
4327
+ var _templateObject$y, _templateObject2$s, _templateObject3$q, _templateObject4$l, _templateObject5$j, _templateObject6$f;
4358
4328
  var Container$j = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
4359
4329
  var theme = _ref.theme;
4360
4330
  return theme.fontFamily.ui;
4361
4331
  });
4362
4332
  var StyledDropArea = styled(DropArea)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
4363
- var InputButtonWrapper = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4333
+ var InputButtonWrapper = styled.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
4364
4334
  var FilesUploadGroup = styled.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px;\n background-color: var(--grey-4);\n position: relative;\n"])), function (_ref2) {
4365
4335
  var hasFiles = _ref2.hasFiles;
4366
4336
  return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
@@ -4486,20 +4456,20 @@ var Form = function Form(_ref2) {
4486
4456
  };
4487
4457
 
4488
4458
  var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
4489
- var _templateObject$A, _templateObject2$u, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$g, _templateObject7$e, _templateObject8$d;
4459
+ var _templateObject$A, _templateObject2$u, _templateObject3$r, _templateObject4$m, _templateObject5$k, _templateObject6$g, _templateObject7$f, _templateObject8$d;
4490
4460
  var StyledButton$3 = styled.button(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n\n color: var(--text-color);\n height: var(--button-height);\n display: flex;\n flex: 1 0 0;\n align-items: center;\n align-self: stretch;\n\n &:hover:enabled {\n background: var(--button-hover-bg);\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:active:enabled {\n background: var(--button-active-bg);\n\n ", ";\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:disabled {\n color: var(--text-disabled-color);\n cursor: not-allowed;\n }\n"])), resetButtonStyles, function (_ref) {
4491
4461
  var noBorderTop = _ref.noBorderTop;
4492
4462
  return noBorderTop ? "border-top: none" : css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
4493
4463
  }, IconWrapper, function (_ref2) {
4494
4464
  var noBorderTop = _ref2.noBorderTop;
4495
- return noBorderTop ? "border-top: none" : css(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
4465
+ return noBorderTop ? "border-top: none" : css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
4496
4466
  }, IconWrapper);
4497
4467
  var OptionText = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: var(--button-font-size);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n"])));
4498
4468
  var TextWrapper = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n padding: 0px var(--button-h-padding);\n justify-content: center;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n"])), function (_ref3) {
4499
4469
  var textMaxWidth = _ref3.textMaxWidth;
4500
4470
  return textMaxWidth && css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["max-width: ", ";"])), textMaxWidth);
4501
4471
  });
4502
- var LeftIconWrapper = styled.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: var(--button-height);\n display: flex;\n padding: 3px var(--button-icon-h-padding);\n align-items: center;\n align-self: stretch;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--button-icon-size);\n width: var(--button-icon-size);\n g, path {\n stroke: var(--white-a10);\n }\n }\n }\n"])), function (_ref4) {
4472
+ var LeftIconWrapper = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: var(--button-height);\n display: flex;\n padding: 3px var(--button-icon-h-padding);\n align-items: center;\n align-self: stretch;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--button-icon-size);\n width: var(--button-icon-size);\n g, path {\n stroke: var(--white-a10);\n }\n }\n }\n"])), function (_ref4) {
4503
4473
  var isAscendingIcon = _ref4.isAscendingIcon;
4504
4474
  return isAscendingIcon && css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
4505
4475
  }, IconWrapper);
@@ -4685,7 +4655,7 @@ function useClickOutside(elRef, elCallback) {
4685
4655
  }, [elCallback, elRef]);
4686
4656
  }
4687
4657
 
4688
- var _templateObject$B, _templateObject2$v, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$h, _templateObject7$f;
4658
+ var _templateObject$B, _templateObject2$v, _templateObject3$s, _templateObject4$n, _templateObject5$l, _templateObject6$h, _templateObject7$g;
4689
4659
  var Container$k = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n z-index: 999;\n ", "\n\n font-family: ", ";\n ", ";\n"])), function (_ref) {
4690
4660
  var theme = _ref.theme;
4691
4661
  return theme && css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose([""])));
@@ -4696,7 +4666,7 @@ var Container$k = styled.div(_templateObject$B || (_templateObject$B = _taggedTe
4696
4666
  var theme = _ref3.theme;
4697
4667
  return theme.styles.modal.overlay;
4698
4668
  });
4699
- var CloseIcon = styled(Icon)(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose([""])));
4669
+ var CloseIcon = styled(Icon)(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose([""])));
4700
4670
  var CloseButton = styled.button(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0;\n top: -30px;\n color: var(--mono);\n font-size: 14px;\n font-weight: 500;\n\n ", " {\n display: flex;\n margin-left: 12px;\n }\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, IconWrapper, function (_ref4) {
4701
4671
  var _ref4$selected = _ref4.selected,
4702
4672
  selected = _ref4$selected === void 0 ? false : _ref4$selected;
@@ -4705,7 +4675,7 @@ var CloseButton = styled.button(_templateObject4$n || (_templateObject4$n = _tag
4705
4675
  var theme = _ref5.theme;
4706
4676
  return theme && css(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
4707
4677
  });
4708
- var LightBox = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n position: relative;\n margin: 27px 0 0;\n z-index: 9999;\n width: ", ";\n padding: ", ";\n border-radius: 5px;\n ", ";\n"])), function (_ref6) {
4678
+ var LightBox = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n position: relative;\n margin: 27px 0 0;\n z-index: 9999;\n width: ", ";\n padding: ", ";\n border-radius: 5px;\n ", ";\n"])), function (_ref6) {
4709
4679
  var width = _ref6.width;
4710
4680
  return width ? width : "580px";
4711
4681
  }, function (_ref7) {
@@ -5045,7 +5015,7 @@ function SvgNoImageBig(props) {
5045
5015
  }
5046
5016
 
5047
5017
  var _excluded$k = ["loop", "autoPlay", "controls", "muted"];
5048
- var _templateObject$C, _templateObject2$w, _templateObject3$s, _templateObject4$o, _templateObject5$m, _templateObject6$i, _templateObject7$g, _templateObject8$e;
5018
+ var _templateObject$C, _templateObject2$w, _templateObject3$t, _templateObject4$o, _templateObject5$m, _templateObject6$i, _templateObject7$h, _templateObject8$e;
5049
5019
  var MediaBoxWrapper = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
5050
5020
  var minHeight = _ref.minHeight;
5051
5021
  return minHeight && "min-height: " + minHeight;
@@ -5055,7 +5025,7 @@ var MediaBoxWrapper = styled.div(_templateObject$C || (_templateObject$C = _tagg
5055
5025
  });
5056
5026
  var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: var(--grey-11);\n";
5057
5027
  var LoadingOverlay = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
5058
- var Video = styled.video(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
5028
+ var Video = styled.video(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
5059
5029
  var theme = _ref3.theme,
5060
5030
  isLoaded = _ref3.isLoaded,
5061
5031
  hasModalLimits = _ref3.hasModalLimits;
@@ -5065,7 +5035,7 @@ var StyledImage = styled.img(_templateObject6$i || (_templateObject6$i = _tagged
5065
5035
  var theme = _ref4.theme,
5066
5036
  isLoaded = _ref4.isLoaded,
5067
5037
  hasModalLimits = _ref4.hasModalLimits;
5068
- return css(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5038
+ return 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 && css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
5069
5039
  });
5070
5040
  var MediaBox = function MediaBox(_ref5) {
5071
5041
  var incomingSrc = _ref5.src,
@@ -5321,14 +5291,14 @@ var useThemeToggle = function useThemeToggle() {
5321
5291
  var _excluded$l = ["mainButtonId", "buttonList", "design", "size", "textMaxWidth", "disabled"],
5322
5292
  _excluded2 = ["id", "text", "icon", "disabled"],
5323
5293
  _excluded3 = ["id", "text", "icon", "disabled"];
5324
- var _templateObject$D, _templateObject2$x, _templateObject3$t, _templateObject4$p;
5294
+ var _templateObject$D, _templateObject2$x, _templateObject3$u, _templateObject4$p;
5325
5295
  var TOGGLE_ICON_WIDTH = 30;
5326
5296
  var Container$l = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n height: var(--button-height);\n overflow: visible;\n"])));
5327
5297
  var ButtonsWrapper$1 = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-ui);\n position: relative;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 3px;\n border: 1px solid var(--border);\n background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);\n box-shadow: var(--button-lift-default-x, 0px) var(--button-lift-default-y, 2px) var(--button-lift-default-blur, 4px) var(--button-lift-default-spread, 2px) var(--button-lift-default-color, rgba(221, 234, 248, 0.08));\n"])), function (_ref) {
5328
5298
  var isOpen = _ref.isOpen;
5329
5299
  return isOpen && "z-index: 100";
5330
5300
  });
5331
- var MainButtonWrapper = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n"])));
5301
+ var MainButtonWrapper = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n"])));
5332
5302
  var ToggleIcon = styled.button(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n height: var(--button-height);\n padding: 3px var(--button-icon-h-padding);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n border-left: 1px solid var(--toggle-icon-border);\n cursor: pointer;\n\n ", " {\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n path, g {\n stroke: var(--toggle-icon);\n }\n }\n }\n\n &:hover:enabled {\n background: var(--toggle-icon-hover-bg);\n }\n\n &:active:enabled {\n background: var(--toggle-icon-active-bg);\n ", " {\n svg path, svg g {\n stroke: var(--toggle-icon-active);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n\n ", " {\n svg path {\n stroke: var(--toggle-icon-disabled);\n }\n }\n }\n\n"])), resetButtonStyles, IconWrapper, IconWrapper, IconWrapper);
5333
5303
  var validateMaxWidth = function validateMaxWidth(btnTextMaxWidth, textMaxWidth) {
5334
5304
  if (textMaxWidth) return textMaxWidth;
@@ -5441,12 +5411,12 @@ var ButtonsStack = function ButtonsStack(_ref) {
5441
5411
  }));
5442
5412
  };
5443
5413
 
5444
- var _templateObject$F, _templateObject2$y, _templateObject3$u, _templateObject4$q, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f;
5414
+ var _templateObject$F, _templateObject2$y, _templateObject3$v, _templateObject4$q, _templateObject5$n, _templateObject6$j, _templateObject7$i, _templateObject8$f;
5445
5415
  var Container$n = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (_ref) {
5446
5416
  var hide = _ref.hide;
5447
5417
  return hide && css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
5448
5418
  });
5449
- var Label$1 = styled.label(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 12px;\n font-weight: 500;\n text-decoration: none;\n color: var(--primary-10);\n padding: 12px;\n border-bottom: var(--grey-6) 1px solid;\n"])));
5419
+ var Label$1 = styled.label(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 12px;\n font-weight: 500;\n text-decoration: none;\n color: var(--primary-10);\n padding: 12px;\n border-bottom: var(--grey-6) 1px solid;\n"])));
5450
5420
  var Item = styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n padding: 12px;\n display: flex;\n justify-content: left;\n"])));
5451
5421
  var IconWrap = styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n flex: 0 0 32px;\n align-items: center;\n display: flex;\n padding-top: 1px;\n"])));
5452
5422
  var Input$1 = styled.input(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n text-align: left;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.2px;\n text-decoration: none;\n color: var(--grey-12);\n background-color: transparent;\n\n width: 100%;\n border: ", ";\n outline: none;\n flex: 1;\n justify-content: space-between;\n border-radius: 3px;\n\n &:focus, &:hover {\n\n border-color: ", ";\n }\n"])), function (_ref2) {
@@ -5462,7 +5432,7 @@ var Input$1 = styled.input(_templateObject6$j || (_templateObject6$j = _taggedTe
5462
5432
  return isTimeRangeValid ? 'transparent' : 'var(--warning-a9)';
5463
5433
  } : 'transparent';
5464
5434
  });
5465
- var TimeColon = styled.div(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n text-align: center;\n"])));
5435
+ var TimeColon = styled.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n text-align: center;\n"])));
5466
5436
  var InputWrap = styled.div(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n box-sizing: border-box;\n border-radius: 3px;\n\n &:focus-within {\n background: var(--primary-9);\n box-shadow: 0px 0px 0px 5px var(--primary-9); \n ", "{\n color: var(--white-1);\n border-color: transparent;\n }\n\n ", "{\n color: var(--white-1);\n text-align: center;\n }\n }\n"])), Input$1, TimeColon);
5467
5437
  var DateTimeBlock = function DateTimeBlock(_ref6) {
5468
5438
  var _ref6$allowAfterMidni = _ref6.allowAfterMidnight,
@@ -5624,7 +5594,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
5624
5594
  })))));
5625
5595
  };
5626
5596
 
5627
- var _templateObject$G, _templateObject2$z, _templateObject3$v, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$c, _templateObject10$9, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24;
5597
+ 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;
5628
5598
  var initializeInterval = function initializeInterval(day) {
5629
5599
  return {
5630
5600
  start: set(day, {
@@ -5638,18 +5608,18 @@ var TODAY = new Date();
5638
5608
  var TODAY_INTERVAL = initializeInterval(startOfDay(new Date()));
5639
5609
  var Container$o = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
5640
5610
  var DateTimeArea = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 170px;\n display: flex;\n flex-direction: column;\n"])));
5641
- var TimeZoneOption = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n border-top: var(--grey-6) 1px solid;\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n"])));
5611
+ var TimeZoneOption = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border-top: var(--grey-6) 1px solid;\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n"])));
5642
5612
  var TimeZoneLabel = styled.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
5643
5613
  var TimeZoneValue = styled.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n text-align: left;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
5644
5614
  var CalendarArea = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
5645
- var CalendarHeader = styled.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
5615
+ var CalendarHeader = styled.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"])));
5646
5616
  var CurrentMonth = styled.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"])));
5647
5617
  var IconWrap$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
5648
- var PaginateMonth = styled.button(_templateObject10$9 || (_templateObject10$9 = _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 {\n color: var(--grey-12);\n\n ", "{\n [stroke]{\n stroke: var(--grey-12);\n }\n }\n }\n"])), IconWrap$1, IconWrap$1);
5618
+ var PaginateMonth = styled.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 {\n color: var(--grey-12);\n\n ", "{\n [stroke]{\n stroke: var(--grey-12);\n }\n }\n }\n"])), IconWrap$1, IconWrap$1);
5649
5619
  var CalBody = styled.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
5650
5620
  var CalRow = styled.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"])));
5651
5621
  var CalHRow = styled(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
5652
- var CalCell = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\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"])));
5622
+ var CalCell = styled.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\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"])));
5653
5623
  var CalHCell = styled(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--grey-a11);\n"])));
5654
5624
  var CalCellB = styled(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"])), function (_ref) {
5655
5625
  var thisMonth = _ref.thisMonth;
@@ -5924,12 +5894,12 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
5924
5894
  };
5925
5895
 
5926
5896
  var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
5927
- var _templateObject$I, _templateObject2$B, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$d;
5897
+ var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d;
5928
5898
  var FlipWrapper = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
5929
5899
  var isSortAscending = _ref.isSortAscending;
5930
5900
  return isSortAscending && css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
5931
5901
  });
5932
- var fadeInAnimation = keyframes(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])));
5902
+ var fadeInAnimation = keyframes(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])));
5933
5903
  var FlipArrowContainer = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose([""])));
5934
5904
  var StyledButton$4 = styled.button(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n ", ";\n border-radius: 3px;\n height: var(--common-height);\n\n ", ";\n\n text-align: left;\n font-size: 12px;\n font-weight: 500;\n text-decoration: none;\n color: var(--filter-button-text-color);\n font-family: var(--font-ui);\n transition:\n opacity ", " ", ",\n background-color ", " ", ",\n box-shadow ", " ", ",\n color ", " ", ",\n border ", " ", ";\n\n animation: ", " ", " ", ";\n\n ", " {\n padding: 0 9px;\n display: flex;\n align-items: center;\n [stroke]{\n transition: stroke ", " ", ";\n }\n }\n\n &:hover:enabled, &:active:enabled {\n color: var(--grey-12);\n \n ", ";\n \n ", " {\n [stroke]{\n stroke: var(--primary-9);\n }\n }\n \n ", " ", " {\n [stroke]{\n stroke: var(--grey-12);\n }\n };\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n }\n\n ", ";\n\n"])), resetButtonStyles, function (_ref2) {
5935
5905
  var design = _ref2.design;
@@ -5940,7 +5910,7 @@ var StyledButton$4 = styled.button(_templateObject5$p || (_templateObject5$p = _
5940
5910
  }, IconWrapper, FlipArrowContainer, IconWrapper, function (_ref4) {
5941
5911
  var isOpen = _ref4.isOpen,
5942
5912
  hasFlipArrow = _ref4.hasFlipArrow;
5943
- return isOpen && hasFlipArrow && css(_templateObject7$j || (_templateObject7$j = _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);
5913
+ return isOpen && hasFlipArrow && css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-9);\n border: solid 1px var(--primary-9);\n color: var(--white-1);\n\n &, &:hover:enabled, &:active:enabled {\n color: var(--white-1);\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n }\n \n ", " ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n };\n "])), IconWrapper, FlipArrowContainer, IconWrapper);
5944
5914
  });
5945
5915
  var InnerContainer$3 = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
5946
5916
  var ButtonText = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref5) {
@@ -5981,17 +5951,17 @@ var FilterButton = function FilterButton(_ref6) {
5981
5951
  };
5982
5952
 
5983
5953
  var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
5984
- var _templateObject$J, _templateObject2$C, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i, _templateObject9$e, _templateObject10$a;
5954
+ var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$9;
5985
5955
  var Title$1 = styled.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"])));
5986
5956
  var FakeCheckbox = styled.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"])));
5987
- var FakeCheckboxInner = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
5957
+ var FakeCheckboxInner = styled.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"])));
5988
5958
  var CheckMarkWrapper = styled.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: var(--inverse);\n }\n }\n"])));
5989
5959
  var FakeRadioButton = styled.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-width: 2px;\n border-style: solid;\n"])));
5990
5960
  var FakeInnerRadio = styled.div(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
5991
- var Container$q = styled.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n gap: 12px;\n\n ", ";\n"])), function (_ref) {
5961
+ var Container$q = styled.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) {
5992
5962
  var selected = _ref.selected,
5993
5963
  disabled = _ref.disabled;
5994
- return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n border-color: var(--input-selection-control-default);\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-selection-control-selected);\n }\n\n ", ", ", " {\n border-color: var(--input-selection-control-selected);\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-in-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-in-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-in-out);\n }\n \n "])), Title$1, FakeCheckbox, FakeRadioButton, selected && css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n border-color: var(--input-selection-control-selected);\n ", ", ", " {\n background-color: var(--input-selection-control-selected);\n }\n }\n \n ", " {\n color: var(--input-selection-control-selected);\n font-weight: 600;\n }\n\n "])), FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, Title$1), disabled && css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
5964
+ return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n border-color: var(--input-selection-control-default);\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-selection-control-selected);\n }\n\n ", ", ", " {\n border-color: var(--input-selection-control-selected);\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-in-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-in-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-in-out);\n }\n \n "])), Title$1, FakeCheckbox, FakeRadioButton, selected && css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n border-color: var(--input-selection-control-selected);\n ", ", ", " {\n background-color: var(--input-selection-control-selected);\n }\n }\n \n ", " {\n color: var(--input-selection-control-selected);\n font-weight: 600;\n }\n\n "])), FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, Title$1), disabled && css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
5995
5965
  });
5996
5966
  var FilterOption = function FilterOption(_ref2) {
5997
5967
  var title = _ref2.title,
@@ -6018,16 +5988,16 @@ var FilterOption = function FilterOption(_ref2) {
6018
5988
  };
6019
5989
 
6020
5990
  var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
6021
- var _templateObject$K, _templateObject2$D, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$j;
5991
+ var _templateObject$K, _templateObject2$D, _templateObject3$z, _templateObject4$u, _templateObject5$r, _templateObject6$n, _templateObject7$m, _templateObject8$j;
6022
5992
  var IconContainer$1 = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n padding: 0 2px;\n"])));
6023
5993
  var Container$r = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n \n"])), function (_ref) {
6024
5994
  var hasBorder = _ref.hasBorder,
6025
5995
  disabled = _ref.disabled,
6026
5996
  noBackground = _ref.noBackground,
6027
5997
  width = _ref.width;
6028
- return css(_templateObject3$y || (_templateObject3$y = _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 && 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 && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && 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)');
5998
+ return 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 && 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 && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && 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)');
6029
5999
  }, IconWrapper);
6030
- var CrossButton = styled.button(_templateObject7$l || (_templateObject7$l = _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);
6000
+ var CrossButton = styled.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);
6031
6001
  var StyledInput$2 = styled.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) {
6032
6002
  var color = _ref2.color;
6033
6003
  return color && "color: var(--" + color + ")";
@@ -6086,10 +6056,10 @@ var isFilterItem = function isFilterItem(item) {
6086
6056
  };
6087
6057
 
6088
6058
  var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "children", "onToggleOpenCallback", "onCloseCallback"];
6089
- var _templateObject$L, _templateObject2$E, _templateObject3$z, _templateObject4$v;
6059
+ var _templateObject$L, _templateObject2$E, _templateObject3$A, _templateObject4$v;
6090
6060
  var Container$s = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6091
6061
  var ButtonWrapper = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
6092
- var ContentBox = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
6062
+ var ContentBox = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
6093
6063
  var minWidth = _ref.minWidth;
6094
6064
  return minWidth;
6095
6065
  }, function (_ref2) {
@@ -6204,17 +6174,17 @@ var LoadingBox = function LoadingBox(_ref) {
6204
6174
  };
6205
6175
 
6206
6176
  var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "design", "onSelect"];
6207
- var _templateObject$N, _templateObject2$G, _templateObject3$A, _templateObject4$w, _templateObject5$s, _templateObject6$o, _templateObject7$m, _templateObject8$k;
6177
+ var _templateObject$N, _templateObject2$G, _templateObject3$B, _templateObject4$w, _templateObject5$s, _templateObject6$o, _templateObject7$n, _templateObject8$k;
6208
6178
  var Container$u = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6209
6179
  var StyledFilterOption = styled(FilterOption)(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6210
- var OptionList = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n max-height: ", ";\n min-height: 40px;\n position: relative;\n overflow-y: auto;\n padding: 8px 0;\n\n ", " {\n height: 40px;\n padding-left: 14px;\n }\n"])), function (_ref) {
6180
+ var OptionList = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n max-height: ", ";\n min-height: 40px;\n position: relative;\n overflow-y: auto;\n padding: 8px 0;\n\n ", " {\n height: 40px;\n padding-left: 14px;\n }\n"])), function (_ref) {
6211
6181
  var moreItem = _ref.moreItem;
6212
6182
  return moreItem ? '228px' : '196px';
6213
6183
  }, StyledFilterOption);
6214
6184
  var ResultsContainer = styled.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n min-width: 216px;\n"])));
6215
6185
  var ResultCounter = styled.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n color: var(--grey-10);\n font-size: 12px;\n font-style: italic;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: left;\n height: 32px;\n padding: 0 12px;\n border-top: 1px solid var(--grey-5);\n border-bottom: 1px solid var(--grey-5);\n"])));
6216
6186
  var SearchWrapper = styled.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: flex;\n align-items: center;\n padding: 0 8px;\n"])));
6217
- var EmptyResultText = styled.div(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n display: block;\n height: 24px;\n color: var(--grey-11);\n font-weight: 700;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n height: inherit;\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
6187
+ var EmptyResultText = styled.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n display: block;\n height: 24px;\n color: var(--grey-11);\n font-weight: 700;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n height: inherit;\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
6218
6188
  var Gradient = styled.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0px;\n height: 15px;\n background-image: linear-gradient(to bottom, transparent, var(--grey-3));\n width: 99%;\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n"])));
6219
6189
  var isValueSelected = function isValueSelected(item, selected) {
6220
6190
  var isItemSelected = false;
@@ -6421,14 +6391,14 @@ var FilterDropdown = function FilterDropdown(_ref2) {
6421
6391
  };
6422
6392
 
6423
6393
  var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "design", "onSelect"];
6424
- var _templateObject$O, _templateObject2$H, _templateObject3$B, _templateObject4$x, _templateObject5$t, _templateObject6$p, _templateObject7$n;
6394
+ var _templateObject$O, _templateObject2$H, _templateObject3$C, _templateObject4$x, _templateObject5$t, _templateObject6$p, _templateObject7$o;
6425
6395
  var Container$v = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6426
6396
  var StyledFilterOption$1 = styled(FilterOption)(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
6427
- var OptionList$1 = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n padding: 8px 0;\n ", " {\n height: 40px;\n padding: 16px;\n }\n"])), StyledFilterOption$1);
6397
+ var OptionList$1 = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n padding: 8px 0;\n ", " {\n height: 40px;\n padding: 16px;\n }\n"])), StyledFilterOption$1);
6428
6398
  var OrderGroup = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n display: flex;\n border-top: var(--grey-6) 1px solid;\n margin-top: 5px;\n\n button:first-child {\n border-right: var(--grey-6) 1px solid;\n }\n"])));
6429
6399
  var OrderButton = styled.button(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n ", ";\n width: 100%;\n display: flex;\n align-items: center;\n font-family: var(--font-data);\n color: var(--grey-12);\n font-size: 14px;\n height: 40px;\n padding: 0 16px;\n gap: 12px;\n\n ", "\n"])), resetButtonStyles, function (_ref) {
6430
6400
  var isSelected = _ref.isSelected;
6431
- return css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n\n ", " {\n display: flex;\n align-items: center;\n [stroke]{\n stroke: var(--grey-11);\n }\n }\n\n &:hover {\n ", " {\n [stroke]{\n stroke: var(--primary-9);\n }\n }\n }\n\n ", "\n\n "])), IconWrapper, IconWrapper, isSelected && css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n ", " {\n [stroke]{\n stroke: var(--primary-9);\n }\n }\n "])), IconWrapper));
6401
+ return css(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n\n ", " {\n display: flex;\n align-items: center;\n [stroke]{\n stroke: var(--grey-11);\n }\n }\n\n &:hover {\n ", " {\n [stroke]{\n stroke: var(--primary-9);\n }\n }\n }\n\n ", "\n\n "])), IconWrapper, IconWrapper, isSelected && css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n ", " {\n [stroke]{\n stroke: var(--primary-9);\n }\n }\n "])), IconWrapper));
6432
6402
  });
6433
6403
  var SortDropdown = function SortDropdown(_ref2) {
6434
6404
  var buttonText = _ref2.buttonText,
@@ -6505,10 +6475,10 @@ var SortDropdown = function SortDropdown(_ref2) {
6505
6475
  }))))));
6506
6476
  };
6507
6477
 
6508
- var _templateObject$P, _templateObject2$I, _templateObject3$C, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$l, _templateObject9$f, _templateObject10$b, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
6478
+ var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$a, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
6509
6479
  var Container$w = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
6510
6480
  var ContextActionBaseCSS = 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"])));
6511
- var ContextIcon = styled.div(_templateObject3$C || (_templateObject3$C = _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) {
6481
+ var ContextIcon = styled.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) {
6512
6482
  var theme = _ref.theme;
6513
6483
  return css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-2);\n transition: background-color ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
6514
6484
  });
@@ -6517,7 +6487,7 @@ var ContextActionButton = styled.button(_templateObject5$u || (_templateObject5$
6517
6487
  return isActive && css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n ", " {\n background-color: var(--primary-9);\n [stroke]{\n stroke: var(--white-1);\n }\n }\n &:hover ", "{\n cursor: pointer;\n }\n "])), ContextIcon, ContextIcon);
6518
6488
  }, function (_ref3) {
6519
6489
  var isInnerContextButton = _ref3.isInnerContextButton;
6520
- return isInnerContextButton && css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n margin-right: 5px;\n "])));
6490
+ return isInnerContextButton && css(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n margin-right: 5px;\n "])));
6521
6491
  });
6522
6492
  var ContentBox$1 = styled.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n ", ";\n"])), function (_ref4) {
6523
6493
  var minWidth = _ref4.minWidth;
@@ -6525,9 +6495,9 @@ var ContentBox$1 = styled.div(_templateObject8$l || (_templateObject8$l = _tagge
6525
6495
  }, function (_ref5) {
6526
6496
  var openState = _ref5.openState,
6527
6497
  disabled = _ref5.disabled;
6528
- return openState && 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' && css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
6498
+ return openState && 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' && css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
6529
6499
  });
6530
- var ButtonWrapper$1 = styled.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
6500
+ var ButtonWrapper$1 = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
6531
6501
  var GroupStyles = 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"])));
6532
6502
  var LayoutGroup = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 4px 8px 4px 10px;\n"])), GroupStyles);
6533
6503
  var PaginationGroup = styled.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n ", ";\n border-top: var(--grey-6) 1px solid;\n padding: 4px 8px 4px 10px;\n"])), GroupStyles);
@@ -6766,16 +6736,16 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
6766
6736
  };
6767
6737
 
6768
6738
  var _excluded$v = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
6769
- var _templateObject$R, _templateObject2$J, _templateObject3$D, _templateObject4$z, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$m;
6739
+ var _templateObject$R, _templateObject2$J, _templateObject3$E, _templateObject4$z, _templateObject5$v, _templateObject6$r, _templateObject7$q, _templateObject8$m;
6770
6740
  var fadeInAnimation$1 = keyframes(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n 0% {\n width: 50%;\n opacity: .5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n width: 100%;\n }\n"])));
6771
6741
  var SearchInputWrapper = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
6772
- var CloseSearchInputWrapper = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
6742
+ var CloseSearchInputWrapper = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
6773
6743
  var theme = _ref.theme;
6774
6744
  return theme && css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation$1, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
6775
6745
  });
6776
6746
  var StyledFilterButton = styled(FilterButton)(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose([""])));
6777
6747
  var StyledDropdown = styled(FilterDropdown)(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose([""])));
6778
- var StyledDropdownDatePicker = styled(DropdownDatePicker)(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose([""])));
6748
+ var StyledDropdownDatePicker = styled(DropdownDatePicker)(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose([""])));
6779
6749
  var Container$y = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 8px 6px;\n"])));
6780
6750
  var renderDropdowns = function renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore) {
6781
6751
  return dropdownFilters.map(function (dropdown) {
@@ -6878,17 +6848,17 @@ var FilterInputs = function FilterInputs(_ref2) {
6878
6848
  };
6879
6849
 
6880
6850
  var _excluded$w = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
6881
- var _templateObject$S, _templateObject2$K, _templateObject3$E, _templateObject4$A, _templateObject5$w, _templateObject6$s, _templateObject7$q;
6851
+ var _templateObject$S, _templateObject2$K, _templateObject3$F, _templateObject4$A, _templateObject5$w, _templateObject6$s, _templateObject7$r;
6882
6852
  var Container$z = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
6883
6853
  var ResultsTextWrapper = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n color: var(--grey-9);\n"])));
6884
- var FilterLabel = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n height: 18px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n padding: 0 11px 0 8px;\n margin-left: 3px;\n color: var(--grey-9);\n font-family: var(--font-data);\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid var(--grey-8);\n"])), IconWrapper);
6854
+ var FilterLabel = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n height: 18px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n padding: 0 11px 0 8px;\n margin-left: 3px;\n color: var(--grey-9);\n font-family: var(--font-data);\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid var(--grey-8);\n"])), IconWrapper);
6885
6855
  var FilterLabelText = styled.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n padding: ", ";\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 300px;\n"])), function (_ref) {
6886
6856
  var hasIcon = _ref.hasIcon;
6887
6857
  return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
6888
6858
  });
6889
6859
  var ClearTextButton = styled.button(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-data);\n color: var(--grey-10);\n margin-left: 11px;\n font-size: 12px;\n"])), resetButtonStyles);
6890
6860
  var RemoveButton = styled.button(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n ", ";\n"])), resetButtonStyles);
6891
- var FilterLabelsGroup = styled.div(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-left: 10px;\n"])));
6861
+ var FilterLabelsGroup = styled.div(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin-left: 10px;\n"])));
6892
6862
  var validWithMidnight = function validWithMidnight(endDate, resultsDateFormat) {
6893
6863
  if (endDate.getHours() === 23 && endDate.getSeconds() > 0) {
6894
6864
  return format(add(startOfDay(endDate), {
@@ -6976,10 +6946,10 @@ var FiltersResults = function FiltersResults(_ref2) {
6976
6946
  };
6977
6947
 
6978
6948
  var _excluded$x = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
6979
- var _templateObject$T, _templateObject2$L, _templateObject3$F;
6949
+ var _templateObject$T, _templateObject2$L, _templateObject3$G;
6980
6950
  var Title$2 = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])));
6981
6951
  var StyledFilterResults = styled(FiltersResults)(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose([""])));
6982
- var Container$A = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
6952
+ var Container$A = styled.div(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
6983
6953
  var getDisableValue = function getDisableValue(filtersValues, singleFilter, filter) {
6984
6954
  var disabled = false;
6985
6955
  if (filter.disabled) {
@@ -7357,14 +7327,14 @@ var FilterBar = function FilterBar(_ref4) {
7357
7327
  })));
7358
7328
  };
7359
7329
 
7360
- var _templateObject$U, _templateObject2$M, _templateObject3$G;
7330
+ var _templateObject$U, _templateObject2$M, _templateObject3$H;
7361
7331
  var Container$B = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
7362
7332
  var StatusCounter = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 14px;;\n top: -12px;\n border-radius: 4px;\n height: 14px;\n min-width: 14px;\n padding: 2px;\n font-size: 10px;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n background-color: ", ";\n"])), function (_ref) {
7363
7333
  var theme = _ref.theme,
7364
7334
  color = _ref.color;
7365
7335
  return color ? theme.colors.status[color] : 'var(--grey-5)';
7366
7336
  });
7367
- var StatusDot = styled.div(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n top: -6px;\n right: -6px;\n transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n background-color: ", ";\n"])), function (_ref2) {
7337
+ var StatusDot = styled.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n top: -6px;\n right: -6px;\n transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n background-color: ", ";\n"])), function (_ref2) {
7368
7338
  var theme = _ref2.theme,
7369
7339
  color = _ref2.color;
7370
7340
  return color ? theme.colors.status[color] : 'var(--grey-5)';
@@ -7386,10 +7356,10 @@ var StatusIcon = function StatusIcon(_ref3) {
7386
7356
  }));
7387
7357
  };
7388
7358
 
7389
- var _templateObject$V, _templateObject2$N, _templateObject3$H, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$n, _templateObject9$g, _templateObject10$c, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$5, _templateObject15$3, _templateObject16$3, _templateObject17$3;
7359
+ var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$b, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
7390
7360
  var HandleTouchReactionKeyframes = 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"])));
7391
7361
  var HandleMouseReactionKeyframes = 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"])));
7392
- var HandleBase = styled.svg(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
7362
+ var HandleBase = styled.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) {
7393
7363
  var theme = _ref.theme,
7394
7364
  styling = _ref.styling;
7395
7365
  return theme.custom.lines[styling].handleBase.fill;
@@ -7404,7 +7374,7 @@ var HandleRingLayer = styled.circle(_templateObject4$B || (_templateObject4$B =
7404
7374
  var HandleReactiveGroup = styled.g(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n opacity: 0.65;\n cursor: pointer;\n transform: scale(1);\n\n ", "\n\n ", "\n\n"])), function (props) {
7405
7375
  return props.touchDragging && css(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n animation: ", " 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleTouchReactionKeyframes);
7406
7376
  }, function (props) {
7407
- return props.mouseDragging && css(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleMouseReactionKeyframes);
7377
+ return props.mouseDragging && css(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n animation: ", " 0.25s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;\n "])), HandleMouseReactionKeyframes);
7408
7378
  });
7409
7379
  var HandleReactiveFill = styled.circle(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: ", ";\n stroke: none;\n"])), function (_ref3) {
7410
7380
  var theme = _ref3.theme,
@@ -7416,7 +7386,7 @@ var HandleReactiveRing = styled.circle(_templateObject9$g || (_templateObject9$g
7416
7386
  styling = _ref4.styling;
7417
7387
  return theme.custom.lines[styling].handleReactiveRing.stroke;
7418
7388
  });
7419
- var HandleContrastLayer = styled.circle(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
7389
+ var HandleContrastLayer = styled.circle(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
7420
7390
  var theme = _ref5.theme,
7421
7391
  styling = _ref5.styling;
7422
7392
  return theme.custom.lines[styling].handleContrastLayer.stroke;
@@ -7427,7 +7397,7 @@ var HandleShadowLayer = styled.circle(_templateObject11$8 || (_templateObject11$
7427
7397
  var GrabHandleIndexGroup = styled.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
7428
7398
  return props.showIndex && css(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n "])));
7429
7399
  });
7430
- var StopStart = styled.stop(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n stop-color: ", ";\n"])), function (_ref6) {
7400
+ var StopStart = styled.stop(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n stop-color: ", ";\n"])), function (_ref6) {
7431
7401
  var theme = _ref6.theme,
7432
7402
  styling = _ref6.styling;
7433
7403
  return theme.custom.lines[styling].stopStart.stopColor;
@@ -7619,7 +7589,7 @@ var HandleUnit = function HandleUnit(props) {
7619
7589
  }, index + pointIndexOffset))));
7620
7590
  };
7621
7591
 
7622
- var _templateObject$W, _templateObject2$O, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$s, _templateObject8$o, _templateObject9$h, _templateObject10$d, _templateObject11$9, _templateObject12$8, _templateObject13$7, _templateObject14$6;
7592
+ var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$c, _templateObject11$9, _templateObject12$8, _templateObject13$7, _templateObject14$5;
7623
7593
  var ContrastLine = styled.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) {
7624
7594
  var theme = _ref.theme,
7625
7595
  styling = _ref.styling;
@@ -7636,7 +7606,7 @@ var HighlightLine = styled.line(_templateObject2$O || (_templateObject2$O = _tag
7636
7606
  styling = _ref4.styling;
7637
7607
  return theme.custom.lines[styling].highlightLineBorder.stroke;
7638
7608
  });
7639
- var GrabHandle = styled.circle(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n fill: ", ";\n stroke: ", ";\n opacity: 1;\n transition: opacity 250ms ease;\n cursor: grab;\n\n ", ";\n"])), function (_ref5) {
7609
+ var GrabHandle = styled.circle(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n fill: ", ";\n stroke: ", ";\n opacity: 1;\n transition: opacity 250ms ease;\n cursor: grab;\n\n ", ";\n"])), function (_ref5) {
7640
7610
  var theme = _ref5.theme,
7641
7611
  styling = _ref5.styling;
7642
7612
  return theme.custom.lines[styling].grabHandle.fill;
@@ -7650,7 +7620,7 @@ var GrabHandle = styled.circle(_templateObject3$I || (_templateObject3$I = _tagg
7650
7620
  var GrabHandleIndexGroup$1 = styled.g(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
7651
7621
  return props.showIndex && css(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n opacity: 1;\n "])));
7652
7622
  });
7653
- var GrabHandleIndexText$1 = styled.text(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n"])), function (_ref7) {
7623
+ var GrabHandleIndexText$1 = styled.text(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n"])), function (_ref7) {
7654
7624
  var theme = _ref7.theme,
7655
7625
  styling = _ref7.styling;
7656
7626
  return theme.custom.lines[styling].grabHandleText.stroke;
@@ -7663,7 +7633,7 @@ var LabelText$2 = styled.text(_templateObject8$o || (_templateObject8$o = _tagge
7663
7633
  var showLabelShadow = _ref9.showLabelShadow;
7664
7634
  return showLabelShadow && 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 "])));
7665
7635
  });
7666
- var GrabHandleContrast = styled(GrabHandle)(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
7636
+ var GrabHandleContrast = styled(GrabHandle)(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
7667
7637
  var theme = _ref10.theme,
7668
7638
  styling = _ref10.styling;
7669
7639
  return theme.custom.lines[styling].grabHandleContrast.stroke;
@@ -7672,7 +7642,7 @@ var GrabHandleGroup = styled.g(_templateObject11$9 || (_templateObject11$9 = _ta
7672
7642
  return props.showIndex && css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
7673
7643
  });
7674
7644
  var DMCircle = styled.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
7675
- var IconFormat = styled(Icon)(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
7645
+ var IconFormat = styled(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
7676
7646
  var LineUnit = function LineUnit(props) {
7677
7647
  var x1 = props.x1,
7678
7648
  y1 = props.y1,
@@ -7896,7 +7866,7 @@ var LineUnit = function LineUnit(props) {
7896
7866
 
7897
7867
  var LineSetContext = createContext({});
7898
7868
 
7899
- var _templateObject$X, _templateObject2$P, _templateObject3$J, _templateObject4$D;
7869
+ var _templateObject$X, _templateObject2$P, _templateObject3$K, _templateObject4$D;
7900
7870
  var FilledPolygon = styled.polygon(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
7901
7871
  var color = _ref.color;
7902
7872
  return color;
@@ -7909,7 +7879,7 @@ var Point = styled.circle(_templateObject2$P || (_templateObject2$P = _taggedTem
7909
7879
  styling = _ref3.styling;
7910
7880
  return theme.custom.lines[styling].point.fill;
7911
7881
  });
7912
- var AreaLabelText = styled.text(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n ", "\n"])), function (_ref4) {
7882
+ var AreaLabelText = styled.text(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n ", "\n"])), function (_ref4) {
7913
7883
  var theme = _ref4.theme,
7914
7884
  styling = _ref4.styling;
7915
7885
  return theme.custom.lines[styling].label.fill;
@@ -8159,10 +8129,10 @@ var LineSet = function LineSet(_ref8) {
8159
8129
  }));
8160
8130
  };
8161
8131
 
8162
- var _templateObject$Y, _templateObject2$Q, _templateObject3$K, _templateObject4$E, _templateObject5$z;
8132
+ var _templateObject$Y, _templateObject2$Q, _templateObject3$L, _templateObject4$E, _templateObject5$z;
8163
8133
  var Container$C = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n\n"])));
8164
8134
  var LoadingOverlay$1 = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8165
- var Frame = styled.svg(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8135
+ var Frame = styled.svg(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8166
8136
  return props.transculent && css(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
8167
8137
  });
8168
8138
  var Image$1 = styled.img(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n object-fit: contain;\n width: 100%;\n height: 100%;\n"])));
@@ -8350,10 +8320,10 @@ var LineUI = function LineUI(_ref) {
8350
8320
  };
8351
8321
 
8352
8322
  var _excluded$y = ["loop", "autoPlay", "controls", "muted"];
8353
- var _templateObject$Z, _templateObject2$R, _templateObject3$L, _templateObject4$F, _templateObject5$A;
8323
+ var _templateObject$Z, _templateObject2$R, _templateObject3$M, _templateObject4$F, _templateObject5$A;
8354
8324
  var Container$D = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
8355
8325
  var Video$1 = styled.video(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
8356
- var LoadingOverlay$2 = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8326
+ var LoadingOverlay$2 = styled.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8357
8327
  var Frame$1 = styled.svg(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8358
8328
  return props.transcalent && css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
8359
8329
  });
@@ -8834,10 +8804,10 @@ function getPeerId(id) {
8834
8804
  return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
8835
8805
  }
8836
8806
 
8837
- var _templateObject$$, _templateObject2$S, _templateObject3$M, _templateObject4$G, _templateObject5$B;
8807
+ var _templateObject$$, _templateObject2$S, _templateObject3$N, _templateObject4$G, _templateObject5$B;
8838
8808
  var Container$E = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
8839
8809
  var Video$3 = styled(WebRTCPlayer)(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
8840
- var LoadingOverlay$3 = styled.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8810
+ var LoadingOverlay$3 = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
8841
8811
  var Frame$2 = styled.svg(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
8842
8812
  return props.transcalent && css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
8843
8813
  });
@@ -9143,7 +9113,7 @@ var LineReducer = (function (state, action) {
9143
9113
  }
9144
9114
  });
9145
9115
 
9146
- var _templateObject$10, _templateObject2$T, _templateObject3$N, _templateObject4$H, _templateObject5$C, _templateObject6$v, _templateObject7$t;
9116
+ var _templateObject$10, _templateObject2$T, _templateObject3$O, _templateObject4$H, _templateObject5$C, _templateObject6$v, _templateObject7$u;
9147
9117
  var ICON_SIZE = 24;
9148
9118
  var GAP_LEFT = 20;
9149
9119
  var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
@@ -9152,11 +9122,11 @@ var TitlesWrapper = styled.div(_templateObject2$T || (_templateObject2$T = _tagg
9152
9122
  var areaTitleBottom = _ref.areaTitleBottom;
9153
9123
  return areaTitleBottom ? "column-reverse" : "column";
9154
9124
  });
9155
- var IconContainer$2 = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-left: 0px;\n justify-content: left;\n\n @media ", " {\n margin-left: ", "px;\n justify-content: center;\n }\n\n svg {\n display: block;\n }\n"])), deviceMediaQuery.large, ICON_MARGIN_LEFT);
9125
+ var IconContainer$2 = styled.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-left: 0px;\n justify-content: left;\n\n @media ", " {\n margin-left: ", "px;\n justify-content: center;\n }\n\n svg {\n display: block;\n }\n"])), deviceMediaQuery.large, ICON_MARGIN_LEFT);
9156
9126
  var Title$3 = styled.h1(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 26px;\n font-weight: 600;\n text-decoration: none;\n color: var(--grey-12);\n margin: 0;\n"])));
9157
9127
  var AreaTitleCss = css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 18px;\n font-weight: 600;\n text-decoration: none;\n color: var(--grey-11);\n"])));
9158
9128
  var AreaTitle = styled.div(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n ", "\n"])), AreaTitleCss);
9159
- var AreaLinkTitle = styled(Link)(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
9129
+ var AreaLinkTitle = styled(Link)(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
9160
9130
  var PageTitle = function PageTitle(_ref2) {
9161
9131
  var title = _ref2.title,
9162
9132
  icon = _ref2.icon,
@@ -9191,10 +9161,10 @@ var IntroductionText = function IntroductionText(_ref) {
9191
9161
  };
9192
9162
 
9193
9163
  var _excluded$B = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
9194
- var _templateObject$12, _templateObject2$U, _templateObject3$O, _templateObject4$I, _templateObject5$D, _templateObject6$w, _templateObject7$u;
9164
+ var _templateObject$12, _templateObject2$U, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$w, _templateObject7$v;
9195
9165
  var TextContainer$2 = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
9196
9166
  var StyledLink = styled(Link)(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n"])));
9197
- var TagWrapper = styled.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n\n ", ";\n\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 8px;\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
9167
+ var TagWrapper = styled.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n\n ", ";\n\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 8px;\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
9198
9168
  var size = _ref.size;
9199
9169
  return size;
9200
9170
  }, function (_ref2) {
@@ -9209,7 +9179,7 @@ var TagWrapper = styled.div(_templateObject3$O || (_templateObject3$O = _taggedT
9209
9179
  }, IconWrapper, function (_ref5) {
9210
9180
  var hoverColor = _ref5.hoverColor,
9211
9181
  enableHover = _ref5.enableHover;
9212
- return enableHover && css(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--", ");\n color: var(--", ");\n ", " {\n [stroke]{\n stroke: var(--", ");\n }\n }\n }\n "])), hoverColor, hoverColor, IconWrapper, hoverColor);
9182
+ return enableHover && css(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--", ");\n color: var(--", ");\n ", " {\n [stroke]{\n stroke: var(--", ");\n }\n }\n }\n "])), hoverColor, hoverColor, IconWrapper, hoverColor);
9213
9183
  });
9214
9184
  var Tag = function Tag(_ref6) {
9215
9185
  var _ref6$icon = _ref6.icon,
@@ -9249,10 +9219,10 @@ var Tag = function Tag(_ref6) {
9249
9219
  }, renderTag()) : renderTag();
9250
9220
  };
9251
9221
 
9252
- var _templateObject$13, _templateObject2$V, _templateObject3$P, _templateObject4$J, _templateObject5$E, _templateObject6$x;
9222
+ var _templateObject$13, _templateObject2$V, _templateObject3$Q, _templateObject4$J, _templateObject5$E, _templateObject6$x;
9253
9223
  var Container$H = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
9254
9224
  var LeftPanel = styled.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n"])));
9255
- var IntroductionTextWrapper = styled.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n max-width: 648px;\n"])));
9225
+ var IntroductionTextWrapper = styled.div(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n max-width: 648px;\n"])));
9256
9226
  var RightPanel = styled.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
9257
9227
  var iconLeftPanel = _ref.iconLeftPanel;
9258
9228
  return iconLeftPanel && css(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
@@ -9311,13 +9281,13 @@ var MultilineContent = function MultilineContent(_ref) {
9311
9281
  }));
9312
9282
  };
9313
9283
 
9314
- var _templateObject$15, _templateObject2$W, _templateObject3$Q, _templateObject4$K, _templateObject5$F, _templateObject6$y, _templateObject7$v;
9284
+ var _templateObject$15, _templateObject2$W, _templateObject3$R, _templateObject4$K, _templateObject5$F, _templateObject6$y, _templateObject7$w;
9315
9285
  var Container$J = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n background: grey;\n border-radius: 3px;\n overflow: hidden;\n width: 55px;\n height: auto;\n opacity: 0.65;\n margin-right: 10px;\n\n &::after {\n content: '';\n display: block;\n padding-bottom: 75%;\n ", "\n }\n\n ", "\n\n &:hover {\n cursor: pointer;\n\n ", "\n }\n\n"])), function (_ref) {
9316
9286
  var aspect = _ref.aspect;
9317
9287
  return aspect === '16:9' && css(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
9318
9288
  }, function (_ref2) {
9319
9289
  var theme = _ref2.theme;
9320
- return theme && css(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
9290
+ return theme && css(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
9321
9291
  }, function (_ref3) {
9322
9292
  var theme = _ref3.theme,
9323
9293
  hoverZoom = _ref3.hoverZoom;
@@ -9325,7 +9295,7 @@ var Container$J = styled.div(_templateObject$15 || (_templateObject$15 = _tagged
9325
9295
  });
9326
9296
  var ImageWrapper = styled.img(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n"])));
9327
9297
  var NoImageWrapper = styled.div(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 41px;\n width: 55px;\n object-fit: cover;\n display: block;\n"])));
9328
- var PlayableDrop = styled.div(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--black-a1);\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n display: flex;\n svg {\n padding-left: 2px;\n path {\n stroke: var(--white-1);\n }\n }\n };\n"])), IconWrapper);
9298
+ var PlayableDrop = styled.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--black-a1);\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n display: flex;\n svg {\n padding-left: 2px;\n path {\n stroke: var(--white-1);\n }\n }\n };\n"])), IconWrapper);
9329
9299
  var TableRowThumbnail = function TableRowThumbnail(_ref4) {
9330
9300
  var _ref4$hoverZoom = _ref4.hoverZoom,
9331
9301
  hoverZoom = _ref4$hoverZoom === void 0 ? true : _ref4$hoverZoom,
@@ -9450,12 +9420,12 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
9450
9420
  });
9451
9421
  };
9452
9422
 
9453
- var _templateObject$17, _templateObject2$Y, _templateObject3$R, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$w, _templateObject8$p, _templateObject9$i, _templateObject10$e, _templateObject11$a;
9423
+ var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$d, _templateObject11$a;
9454
9424
  var CopyToClipboard = styled.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) {
9455
9425
  var theme = _ref.theme;
9456
9426
  return theme && css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
9457
9427
  });
9458
- var CellContainer = styled.div(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: 50px;\n vertical-align: middle;\n position: relative;\n line-height: 30px;\n font-family: ", ";\n\n &:hover ", "{\n opacity: 0.5;\n }\n\n &, a {\n ", "\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n ", ";\n\n ", "\n"])), function (p) {
9428
+ var CellContainer = styled.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: 50px;\n vertical-align: middle;\n position: relative;\n line-height: 30px;\n font-family: ", ";\n\n &:hover ", "{\n opacity: 0.5;\n }\n\n &, a {\n ", "\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n ", ";\n\n ", "\n"])), function (p) {
9459
9429
  return p.theme.fontFamily.data;
9460
9430
  }, CopyToClipboard, function (_ref2) {
9461
9431
  var theme = _ref2.theme,
@@ -9468,13 +9438,13 @@ var CellContainer = styled.div(_templateObject3$R || (_templateObject3$R = _tagg
9468
9438
  }, function (_ref4) {
9469
9439
  var styles = _ref4.theme.styles,
9470
9440
  hideDivider = _ref4.hideDivider;
9471
- return !hideDivider && css(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0px;\n position: absolute;\n }\n "])), styles.tables.rows.divider);
9441
+ return !hideDivider && css(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0px;\n position: absolute;\n }\n "])), styles.tables.rows.divider);
9472
9442
  });
9473
9443
  var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
9474
9444
  var theme = _ref5.theme;
9475
9445
  return css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
9476
9446
  });
9477
- var StatusBlip = styled.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) {
9447
+ var StatusBlip = styled.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) {
9478
9448
  var _ref6$status = _ref6.status,
9479
9449
  status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
9480
9450
  colors = _ref6.theme.colors;
@@ -9595,13 +9565,13 @@ var TypeTableRow = function TypeTableRow(_ref2) {
9595
9565
  }));
9596
9566
  };
9597
9567
 
9598
- var _templateObject$19, _templateObject2$_, _templateObject3$S, _templateObject4$M;
9568
+ var _templateObject$19, _templateObject2$_, _templateObject3$T, _templateObject4$M;
9599
9569
  var HeaderTitle = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n display: inline-flex;\n justify-content: center;\n align-content: center;\n position: relative;\n padding: 0 2px;\n user-select: none;\n z-index: 99;\n\n ", " {\n position: absolute;\n top: 0px;\n left: -15px;\n display: none;\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n padding: 3px 1px;\n\n ", "\n }\n\n ", "\n\n ", "\n"])), IconWrapper, function (_ref) {
9600
9570
  var ascending = _ref.ascending;
9601
9571
  return ascending && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n transform: rotate(180deg);\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n top: 0;\n "])));
9602
9572
  }, function (_ref2) {
9603
9573
  var isSortActive = _ref2.isSortActive;
9604
- return isSortActive && css(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
9574
+ return isSortActive && css(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
9605
9575
  }, function (_ref3) {
9606
9576
  var styles = _ref3.theme.styles,
9607
9577
  sortable = _ref3.sortable;
@@ -9632,13 +9602,13 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
9632
9602
  }), header);
9633
9603
  };
9634
9604
 
9635
- var _templateObject$1a, _templateObject2$$, _templateObject3$T, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$x, _templateObject8$q, _templateObject9$j, _templateObject10$f, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$7, _templateObject15$4, _templateObject16$4, _templateObject17$4;
9605
+ var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$e, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
9636
9606
  var HeaderRow = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
9637
9607
  var HeaderItem = styled.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) {
9638
9608
  return p.theme.fontFamily.ui;
9639
9609
  }, function (_ref) {
9640
9610
  var hasCopyButton = _ref.hasCopyButton;
9641
- return hasCopyButton && css(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
9611
+ return hasCopyButton && css(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
9642
9612
  }, function (_ref2) {
9643
9613
  var theme = _ref2.theme,
9644
9614
  alignment = _ref2.alignment,
@@ -9648,7 +9618,7 @@ var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedT
9648
9618
  return p.fixedWidth && css(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
9649
9619
  }, function (_ref3) {
9650
9620
  var minWidth = _ref3.minWidth;
9651
- return minWidth && css(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
9621
+ return minWidth && css(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
9652
9622
  }, function (_ref4) {
9653
9623
  var styles = _ref4.theme.styles,
9654
9624
  headerStyle = _ref4.headerStyle,
@@ -9657,14 +9627,14 @@ var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedT
9657
9627
  });
9658
9628
  var TitleItems = styled.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
9659
9629
  var alignment = _ref5.alignment;
9660
- return alignment && css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
9630
+ return alignment && css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
9661
9631
  });
9662
9632
  var GroupTitle = styled.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"])));
9663
9633
  var Title$4 = styled.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
9664
9634
  var typography = _ref6.theme.typography;
9665
9635
  return css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), typography.tables.groupName);
9666
9636
  });
9667
- var EmptyTitle = styled.div(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n height: 20px;\n"])));
9637
+ var EmptyTitle = styled.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n height: 20px;\n"])));
9668
9638
  var MiddleLine = styled.div(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: 1px;\n flex: 1;\n ", ";\n"])), function (_ref7) {
9669
9639
  var styles = _ref7.theme.styles;
9670
9640
  return css(_templateObject16$4 || (_templateObject16$4 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.tables.header.groupLine);
@@ -9788,10 +9758,10 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
9788
9758
  }));
9789
9759
  };
9790
9760
 
9791
- var _templateObject$1b, _templateObject2$10, _templateObject3$U, _templateObject4$O, _templateObject5$I;
9761
+ var _templateObject$1b, _templateObject2$10, _templateObject3$V, _templateObject4$O, _templateObject5$I;
9792
9762
  var Container$L = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose([""])));
9793
9763
  var TableContainer = styled.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
9794
- var LoadingText$1 = styled.div(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
9764
+ var LoadingText$1 = styled.div(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
9795
9765
  var LoadingBox$1 = styled.div(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n background-color: ", ";\n height: calc(100% - 50px);\n opacity: 85%;\n width: 100%;\n min-height: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n\n ", " {\n margin-top: 10px;\n }\n"])), function (_ref) {
9796
9766
  var theme = _ref.theme;
9797
9767
  return theme.colors["pureBase"];
@@ -9878,22 +9848,22 @@ var TypeTable = function TypeTable(_ref3) {
9878
9848
  };
9879
9849
 
9880
9850
  var _excluded$C = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
9881
- var _templateObject$1c, _templateObject2$11, _templateObject3$V, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$y, _templateObject8$r, _templateObject9$k, _templateObject10$g;
9851
+ var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$f;
9882
9852
  var Container$M = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
9883
9853
  var theme = _ref.theme;
9884
9854
  return css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
9885
9855
  });
9886
- var StyledButton$5 = styled(Button)(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9856
+ var StyledButton$5 = styled(Button)(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9887
9857
  var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
9888
9858
  var StyledLink$1 = styled(Link)(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
9889
9859
  var EditContainer = styled.div(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: var(--grey-2);\n z-index: 99;\n position: absolute;\n bottom: -15px;\n left: -11px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n margin:0;\n span {\n margin: 0;\n }\n }\n ", " {\n margin-left: 5px;\n }\n ", " {\n margin-left: 5px;\n }\n"])), StyledLabel, StyledButton$5, StyledLoadingButton);
9890
- var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose([""])));
9860
+ var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose([""])));
9891
9861
  var TextContainer$3 = styled.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
9892
9862
  var alignment = _ref2.alignment;
9893
9863
  return alignment === 'center' && css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
9894
9864
  }, function (_ref3) {
9895
9865
  var alignment = _ref3.alignment;
9896
- return alignment === 'right' && css(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
9866
+ return alignment === 'right' && css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
9897
9867
  }, StyledIconButton$1, StyledIconButton$1);
9898
9868
  var EditCell = function EditCell(_ref4) {
9899
9869
  var _ref4$type = _ref4.type,
@@ -10305,12 +10275,12 @@ var PTZProvider = function PTZProvider(_ref) {
10305
10275
  }, children);
10306
10276
  };
10307
10277
 
10308
- var _templateObject$1d, _templateObject2$12, _templateObject3$W, _templateObject4$Q, _templateObject5$K;
10278
+ var _templateObject$1d, _templateObject2$12, _templateObject3$X, _templateObject4$Q, _templateObject5$K;
10309
10279
  var Active = styled.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10310
10280
  var active = _ref.active;
10311
10281
  return active && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10312
10282
  });
10313
- var Hover = styled.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10283
+ var Hover = styled.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10314
10284
  var hover = _ref2.hover;
10315
10285
  return hover && css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10316
10286
  });
@@ -10384,12 +10354,12 @@ var Up = function Up() {
10384
10354
  })));
10385
10355
  };
10386
10356
 
10387
- var _templateObject$1e, _templateObject2$13, _templateObject3$X, _templateObject4$R, _templateObject5$L, _templateObject6$C;
10357
+ var _templateObject$1e, _templateObject2$13, _templateObject3$Y, _templateObject4$R, _templateObject5$L, _templateObject6$C;
10388
10358
  var Active$1 = styled.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10389
10359
  var active = _ref.active;
10390
10360
  return active && css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10391
10361
  });
10392
- var Hover$1 = styled.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10362
+ var Hover$1 = styled.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10393
10363
  var hover = _ref2.hover;
10394
10364
  return hover && css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10395
10365
  });
@@ -10465,12 +10435,12 @@ var Down = function Down() {
10465
10435
  })));
10466
10436
  };
10467
10437
 
10468
- var _templateObject$1f, _templateObject2$14, _templateObject3$Y, _templateObject4$S, _templateObject5$M;
10438
+ var _templateObject$1f, _templateObject2$14, _templateObject3$Z, _templateObject4$S, _templateObject5$M;
10469
10439
  var Active$2 = styled.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10470
10440
  var active = _ref.active;
10471
10441
  return active && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10472
10442
  });
10473
- var Hover$2 = styled.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10443
+ var Hover$2 = styled.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10474
10444
  var hover = _ref2.hover;
10475
10445
  return hover && css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10476
10446
  });
@@ -10546,12 +10516,12 @@ var Left = function Left() {
10546
10516
  })));
10547
10517
  };
10548
10518
 
10549
- var _templateObject$1g, _templateObject2$15, _templateObject3$Z, _templateObject4$T, _templateObject5$N;
10519
+ var _templateObject$1g, _templateObject2$15, _templateObject3$_, _templateObject4$T, _templateObject5$N;
10550
10520
  var Active$3 = styled.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
10551
10521
  var active = _ref.active;
10552
10522
  return active && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10553
10523
  });
10554
- var Hover$3 = styled.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10524
+ var Hover$3 = styled.g(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
10555
10525
  var hover = _ref2.hover;
10556
10526
  return hover && css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
10557
10527
  });
@@ -11440,12 +11410,12 @@ var ZoomBase = function ZoomBase(_ref) {
11440
11410
  })), children));
11441
11411
  };
11442
11412
 
11443
- var _templateObject$1h, _templateObject2$16, _templateObject3$_, _templateObject4$U, _templateObject5$O;
11413
+ var _templateObject$1h, _templateObject2$16, _templateObject3$$, _templateObject4$U, _templateObject5$O;
11444
11414
  var Active$4 = styled.g(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11445
11415
  var active = _ref.active;
11446
11416
  return active && css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11447
11417
  });
11448
- var Hover$4 = styled.g(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11418
+ var Hover$4 = styled.g(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11449
11419
  var hover = _ref2.hover;
11450
11420
  return hover && css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11451
11421
  });
@@ -11514,12 +11484,12 @@ var Up$1 = function Up() {
11514
11484
  })));
11515
11485
  };
11516
11486
 
11517
- var _templateObject$1i, _templateObject2$17, _templateObject3$$, _templateObject4$V, _templateObject5$P;
11487
+ var _templateObject$1i, _templateObject2$17, _templateObject3$10, _templateObject4$V, _templateObject5$P;
11518
11488
  var Active$5 = styled.g(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
11519
11489
  var active = _ref.active;
11520
11490
  return active && css(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11521
11491
  });
11522
- var Hover$5 = styled.g(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11492
+ var Hover$5 = styled.g(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
11523
11493
  var hover = _ref2.hover;
11524
11494
  return hover && css(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["opacity: 1;"])));
11525
11495
  });
@@ -11595,20 +11565,20 @@ var Controls = function Controls(_ref) {
11595
11565
  };
11596
11566
 
11597
11567
  var _excluded$D = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
11598
- var _templateObject$1k, _templateObject2$18, _templateObject3$10, _templateObject4$W, _templateObject5$Q, _templateObject6$D, _templateObject7$z, _templateObject8$s;
11568
+ var _templateObject$1k, _templateObject2$18, _templateObject3$11, _templateObject4$W, _templateObject5$Q, _templateObject6$D, _templateObject7$A, _templateObject8$s;
11599
11569
  var Container$U = styled.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 170px;\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n position: relative;\n\n ", " {\n height: 100%;\n width: 100%;\n text-align: center;\n img, video {\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n"])), MediaBoxWrapper);
11600
11570
  var EmptyWithIcon = styled.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n ", "\n;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
11601
11571
  var hasPadding = _ref.hasPadding;
11602
11572
  return hasPadding && "\n padding-bottom: 43px\n ";
11603
11573
  }, IconWrapper);
11604
- var Notice = styled.div(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: var(--inverse);\n opacity: 0.85;\n height: 46px;\n width: 300px;\n position: absolute;\n bottom: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n padding: 10px;\n"])), function (_ref2) {
11574
+ var Notice = styled.div(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: var(--inverse);\n opacity: 0.85;\n height: 46px;\n width: 300px;\n position: absolute;\n bottom: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n padding: 10px;\n"])), function (_ref2) {
11605
11575
  var color = _ref2.color;
11606
11576
  return color && "var(--" + color + ")";
11607
11577
  });
11608
11578
  var NoticeMessage = styled.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
11609
11579
  var NoticeTitle = styled.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
11610
11580
  var NoticeIcon = styled.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n height: 20px;\n width: 20px;\n margin-left: 2px;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), IconWrapper);
11611
- var NoticeTextGroup = styled.div(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
11581
+ var NoticeTextGroup = styled.div(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
11612
11582
  var StatusLine = styled.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
11613
11583
  var color = _ref3.color;
11614
11584
  return color && "var(--" + color + ")";
@@ -11642,11 +11612,11 @@ var MediaStream = function MediaStream(_ref4) {
11642
11612
  }));
11643
11613
  };
11644
11614
 
11645
- var _templateObject$1l, _templateObject2$19, _templateObject3$11, _templateObject4$X, _templateObject5$R, _templateObject6$E, _templateObject7$A, _templateObject8$t, _templateObject9$l;
11615
+ var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$X, _templateObject5$R, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$l;
11646
11616
  var Container$V = styled.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
11647
11617
  var LeftData = styled.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
11648
11618
  var hasRightData = _ref.hasRightData;
11649
- return hasRightData && css(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
11619
+ return hasRightData && css(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
11650
11620
  }, IconWrapper);
11651
11621
  var RightData = styled.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11652
11622
  var DeviceDataGroup = styled.div(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
@@ -11657,7 +11627,7 @@ var LeftTitle = styled.div(_templateObject6$E || (_templateObject6$E = _taggedTe
11657
11627
  var hasMarginBottom = _ref3.hasMarginBottom;
11658
11628
  return hasMarginBottom && "margin-bottom: 1px;";
11659
11629
  });
11660
- var LeftSubTitle = styled.div(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), EllipsisStyles, function (_ref4) {
11630
+ var LeftSubTitle = styled.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), EllipsisStyles, function (_ref4) {
11661
11631
  var hasRightData = _ref4.hasRightData;
11662
11632
  return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
11663
11633
  });
@@ -11767,13 +11737,13 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
11767
11737
  };
11768
11738
 
11769
11739
  var _excluded$G = ["design", "size", "position", "text"];
11770
- var _templateObject$1p, _templateObject2$1a, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$F;
11740
+ var _templateObject$1p, _templateObject2$1a, _templateObject3$13, _templateObject4$Y, _templateObject5$S, _templateObject6$F;
11771
11741
  var Container$W = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
11772
11742
  var Title$6 = styled.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
11773
11743
  var theme = _ref.theme;
11774
11744
  return theme.fontFamily.ui;
11775
11745
  });
11776
- var ButtonsWrapper$2 = styled.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11746
+ var ButtonsWrapper$2 = styled.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
11777
11747
  var LeftButtons = styled.div(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
11778
11748
  var RightButtons = styled.div(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
11779
11749
  var SelectedResults = styled.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-top: 29px;\n min-height: 19px;\n color: var(--grey-10);\n font-size: 12px;\n"])), function (_ref2) {
@@ -11817,11 +11787,11 @@ var ActionsBar = function ActionsBar(_ref3) {
11817
11787
  }, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
11818
11788
  };
11819
11789
 
11820
- var _templateObject$1q, _templateObject2$1b, _templateObject3$13, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$B, _templateObject8$u, _templateObject9$m, _templateObject10$h;
11790
+ var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$g;
11821
11791
  var WIDTH_PER_NUMBER = 12;
11822
11792
  var PaginationContainer = styled.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"])));
11823
11793
  var PageLabel = styled.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"])));
11824
- var StaticPageCount = styled.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n font-size: 14px;\n color: var(--grey-8);\n height: 100%;\n text-align: left;\n padding-top: 1px;\n padding-right: 1px;\n"])));
11794
+ var StaticPageCount = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n font-size: 14px;\n color: var(--grey-8);\n height: 100%;\n text-align: left;\n padding-top: 1px;\n padding-right: 1px;\n"])));
11825
11795
  var StyledInput$3 = styled.input(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n ", ";\n color: ", ";\n max-width: ", ";\n font-family: var(--font-data);\n height: 100%;\n box-sizing: border-box;\n outline: none;\n background: transparent;\n text-align: right;\n font-size: 14px;\n font-weight: 500;\n line-height: 25px;\n border: none;\n padding-right: ", "px;\n"])), removeAutoFillStyle, function (_ref) {
11826
11796
  var textColor = _ref.textColor;
11827
11797
  return textColor;
@@ -11837,7 +11807,7 @@ var InputContainer$2 = styled.div(_templateObject6$G || (_templateObject6$G = _t
11837
11807
  var borderColor = _ref4.borderColor;
11838
11808
  return borderColor && "border: 1px solid " + borderColor;
11839
11809
  });
11840
- var GoButton = styled(Button)(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
11810
+ var GoButton = styled(Button)(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
11841
11811
  var ArrowWrapper = styled.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
11842
11812
  var ArrowButton = styled.button(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n ", ";\n width: 40px;\n height: 40px;\n padding: 12px;\n border-radius: 3px;\n box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);\n border: solid 1px var(--grey-9);\n background-color: var(grey-2);\n pointer-events: ", ";\n opacity: ", ";\n\n &:focus, &:hover {\n outline: 2px solid #838383;\n }\n"])), resetButtonStyles, function (_ref5) {
11843
11813
  var active = _ref5.active;
@@ -11846,7 +11816,7 @@ var ArrowButton = styled.button(_templateObject9$m || (_templateObject9$m = _tag
11846
11816
  var active = _ref6.active;
11847
11817
  return active ? '1' : '0.5';
11848
11818
  });
11849
- var ItemsSelectWrapper = styled.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) {
11819
+ var ItemsSelectWrapper = styled.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) {
11850
11820
  var width = _ref7.width;
11851
11821
  return width ? width : "60px";
11852
11822
  }, StyledLabel);
@@ -11854,7 +11824,7 @@ var Pagination = function Pagination(props) {
11854
11824
  var _props$pageText = props.pageText,
11855
11825
  pageText = _props$pageText === void 0 ? 'Page:' : _props$pageText,
11856
11826
  _props$totalPages = props.totalPages,
11857
- totalPages = _props$totalPages === void 0 ? 199 : _props$totalPages,
11827
+ totalPages = _props$totalPages === void 0 ? 1 : _props$totalPages,
11858
11828
  _props$activePage = props.activePage,
11859
11829
  activePage = _props$activePage === void 0 ? 1 : _props$activePage,
11860
11830
  _props$buttonText = props.buttonText,
@@ -11875,7 +11845,7 @@ var Pagination = function Pagination(props) {
11875
11845
  var _useState = useState('default'),
11876
11846
  fieldState = _useState[0],
11877
11847
  setFieldState = _useState[1];
11878
- var _useState2 = useState(activePage.toString()),
11848
+ var _useState2 = useState(activePage ? activePage.toString() : '1'),
11879
11849
  pageValue = _useState2[0],
11880
11850
  setPageValue = _useState2[1];
11881
11851
  var _useState3 = useState(parseInt(pageValue) > totalPages && fieldState !== '' ? false : true),
@@ -11980,6 +11950,13 @@ var Pagination = function Pagination(props) {
11980
11950
  e.preventDefault();
11981
11951
  }
11982
11952
  };
11953
+ useEffect(function () {
11954
+ if (!activePage || !isValidInput(activePage ? activePage.toString() : '')) {
11955
+ console.warn('Pagination: invalid activePage prop value was sent');
11956
+ return;
11957
+ }
11958
+ setPageValue(activePage.toString());
11959
+ }, [activePage, isValidInput]);
11983
11960
  return React__default.createElement(PaginationContainer, null, React__default.createElement(ItemsSelectWrapper, {
11984
11961
  width: selectWidth
11985
11962
  }, React__default.createElement(SelectField, {
@@ -12050,13 +12027,13 @@ var Pagination = function Pagination(props) {
12050
12027
  }))));
12051
12028
  };
12052
12029
 
12053
- var _templateObject$1r, _templateObject2$1c, _templateObject3$14, _templateObject4$_, _templateObject5$U;
12030
+ var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$_, _templateObject5$U;
12054
12031
  var Container$X = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose([""])));
12055
12032
  var Title$7 = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
12056
12033
  var typography = _ref.theme.typography;
12057
12034
  return typography.modal.title;
12058
12035
  });
12059
- var MessageBox$1 = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
12036
+ var MessageBox$1 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
12060
12037
  var typography = _ref2.theme.typography;
12061
12038
  return typography.modal.basicContent;
12062
12039
  });
@@ -12098,10 +12075,10 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
12098
12075
  }, rightButtonText)));
12099
12076
  };
12100
12077
 
12101
- var _templateObject$1s, _templateObject2$1d, _templateObject3$15, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$C, _templateObject8$v, _templateObject9$n, _templateObject10$i, _templateObject11$c, _templateObject12$a;
12078
+ var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$h, _templateObject11$c, _templateObject12$a;
12102
12079
  var Container$Y = styled.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"])));
12103
12080
  var LeftArea = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
12104
- var BackLinkIcon = styled.div(_templateObject3$15 || (_templateObject3$15 = _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"])));
12081
+ var BackLinkIcon = styled.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"])));
12105
12082
  var BackLink = styled(Link)(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n margin-left: ", ";\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n ", "\n"])), function (props) {
12106
12083
  return props.$iconInGutter ? '-24px' : '0';
12107
12084
  }, BackLinkIcon, BackLinkIcon, function (_ref) {
@@ -12109,10 +12086,10 @@ var BackLink = styled(Link)(_templateObject4$$ || (_templateObject4$$ = _taggedT
12109
12086
  return $showDivider && css(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: inline-block;\n height: 12px;\n width: 1px;\n padding-left: 8px;\n border-right: 1px solid var(--grey-10);\n }\n "])));
12110
12087
  });
12111
12088
  var ExtraActionIcon = styled.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
12112
- var ExtraAction = styled.button(_templateObject7$C || (_templateObject7$C = _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);
12089
+ var ExtraAction = styled.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);
12113
12090
  var Breadcrumbs = styled.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
12114
12091
  var Breadcrumb = styled.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"])));
12115
- var BreadcrumbIcon = styled.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"])));
12092
+ var BreadcrumbIcon = styled.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"])));
12116
12093
  var BreadcrumbLink = styled(Link)(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n transition: color 0.25s ease;\n &:hover {\n color: var(--grey-12);\n }\n"])));
12117
12094
  var RightArea = styled.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
12118
12095
  var UtilityHeader = function UtilityHeader(_ref2) {
@@ -12187,10 +12164,10 @@ var Tabs = function Tabs(_ref) {
12187
12164
  }, children);
12188
12165
  };
12189
12166
 
12190
- var _templateObject$1t, _templateObject2$1e, _templateObject3$16, _templateObject4$10, _templateObject5$W;
12167
+ var _templateObject$1t, _templateObject2$1e, _templateObject3$17, _templateObject4$10, _templateObject5$W;
12191
12168
  var Container$Z = styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
12192
12169
  var HeaderArea = styled.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n 24px\n var(--content-layout-padding-right)\n 32px\n var(--content-layout-padding-left);\n \n"])));
12193
- var TabArea = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-4);\n"])));
12170
+ var TabArea = styled.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-4);\n"])));
12194
12171
  var TabAreaInner = styled.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n flex: 1;\n width: 100%;\n padding: \n 0\n var(--content-layout-padding-right)\n 0\n var(--content-layout-padding-left);\n"])));
12195
12172
  var Content = styled.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n var(--content-layout-padding-top)\n var(--content-layout-padding-right)\n var(--content-layout-padding-bottom)\n var(--content-layout-padding-left);\n\n display: flex;\n flex: 1;\n flex-direction: column;\n"])));
12196
12173
  var ContentLayout = function ContentLayout(_ref) {
@@ -12232,10 +12209,10 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
12232
12209
  }, children));
12233
12210
  };
12234
12211
 
12235
- var _templateObject$1v, _templateObject2$1g, _templateObject3$17, _templateObject4$11, _templateObject5$X, _templateObject6$I, _templateObject7$D, _templateObject8$w;
12212
+ var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$11, _templateObject5$X, _templateObject6$I, _templateObject7$E, _templateObject8$w;
12236
12213
  var Inner$1 = styled.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
12237
12214
  var Line = styled.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
12238
- var IconContainer$3 = styled.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
12215
+ var IconContainer$3 = styled.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
12239
12216
  var IconDefault = styled.svg(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
12240
12217
  var $layout = _ref.$layout;
12241
12218
  return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
@@ -12256,7 +12233,7 @@ var IconArrow = styled.svg(_templateObject5$X || (_templateObject5$X = _taggedTe
12256
12233
  });
12257
12234
  var Container$_ = styled.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (_ref3) {
12258
12235
  var $layout = _ref3.$layout;
12259
- return $layout === 'horizontal' ? css(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n width: 16px;\n flex-direction: column;\n ", "{\n flex-direction: column;\n }\n\n ", "{\n width: 1px;\n }\n\n "])), Inner$1, Line) : css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n height: 16px;\n flex-direction: row;\n ", "{\n flex-direction: row;\n }\n ", "{\n height: 1px;\n }\n "])), Inner$1, Line);
12236
+ return $layout === 'horizontal' ? css(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n width: 16px;\n flex-direction: column;\n ", "{\n flex-direction: column;\n }\n\n ", "{\n width: 1px;\n }\n\n "])), Inner$1, Line) : css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n height: 16px;\n flex-direction: row;\n ", "{\n flex-direction: row;\n }\n ", "{\n height: 1px;\n }\n "])), Inner$1, Line);
12260
12237
  });
12261
12238
  var ResizeLine = function ResizeLine(_ref4) {
12262
12239
  var _ref4$state = _ref4.state,
@@ -12300,12 +12277,12 @@ var ResizeLine = function ResizeLine(_ref4) {
12300
12277
  }))), React__default.createElement(Line, null)));
12301
12278
  };
12302
12279
 
12303
- var _templateObject$1w, _templateObject2$1h, _templateObject3$18, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$E, _templateObject8$x, _templateObject9$o, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$9, _templateObject14$8, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
12280
+ var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$i, _templateObject11$d, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
12304
12281
  var DebugData = styled.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"])));
12305
12282
  var MainArea = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
12306
12283
  var $layout = _ref.$layout,
12307
12284
  $minDimension = _ref.$minDimension;
12308
- return $layout === 'vertical' ? css(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
12285
+ return $layout === 'vertical' ? css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
12309
12286
  });
12310
12287
  var SideAreaInner = styled.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n height: 100%;\n transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
12311
12288
  var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 0 0 ", "px;\n display: ", ";\n transition: \n min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n \n ", "\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref2) {
@@ -12318,7 +12295,7 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
12318
12295
  var $layout = _ref4.$layout,
12319
12296
  $maxDimension = _ref4.$maxDimension,
12320
12297
  $minDimension = _ref4.$minDimension;
12321
- return $layout === 'vertical' ? css(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-height: ", "px;\n }\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : '0', $maxDimension ? "max-height: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension) : css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-width: ", "px;\n }\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : '0', $maxDimension ? "max-width: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension);
12298
+ return $layout === 'vertical' ? css(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-height: ", "px;\n }\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : '0', $maxDimension ? "max-height: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension) : css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-width: ", "px;\n }\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : '0', $maxDimension ? "max-width: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension);
12322
12299
  }, function (_ref5) {
12323
12300
  var $layout = _ref5.$layout,
12324
12301
  $collapseState = _ref5.$collapseState,
@@ -12326,7 +12303,7 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
12326
12303
  return $collapseState === 'collapsing' ? 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;
12327
12304
  }, function (_ref6) {
12328
12305
  var $collapseState = _ref6.$collapseState;
12329
- return $collapseState === 'collapsed' ? css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
12306
+ return $collapseState === 'collapsed' ? css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
12330
12307
  }, function (_ref7) {
12331
12308
  var $layout = _ref7.$layout,
12332
12309
  $collapseState = _ref7.$collapseState,
@@ -12343,7 +12320,7 @@ var DragContainer = styled.div(_templateObject13$9 || (_templateObject13$9 = _ta
12343
12320
  return $size;
12344
12321
  }, function (_ref10) {
12345
12322
  var $fauxHover = _ref10.$fauxHover;
12346
- return $fauxHover === 'false' ? css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 0.6;\n }\n "]))) : css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 1;\n }\n "])));
12323
+ return $fauxHover === 'false' ? css(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 0.6;\n }\n "]))) : css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 1;\n }\n "])));
12347
12324
  });
12348
12325
  var Container$$ = styled.section(_templateObject16$5 || (_templateObject16$5 = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n display: flex;\n flex:1;\n flex-direction: row;\n overflow: hidden;\n\n transition: opacity 0.25s cubic-bezier(0.45, 0, 0.55, 1);\n opacity: 0;\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref11) {
12349
12326
  var $initialised = _ref11.$initialised;
@@ -12638,12 +12615,12 @@ var clampInt = function clampInt(value, lower, upper) {
12638
12615
  return clampedInt;
12639
12616
  };
12640
12617
 
12641
- var _templateObject$1x, _templateObject2$1i, _templateObject3$19, _templateObject4$13, _templateObject5$Z, _templateObject6$K, _templateObject7$F;
12618
+ var _templateObject$1x, _templateObject2$1i, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$K, _templateObject7$G;
12642
12619
  var MOBILE_CLOSE_HEIGHT = 50;
12643
12620
  var MOBILE_NAVBAR_HEIGHT = 68;
12644
12621
  var Layout = styled.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
12645
12622
  var MobileLayout = styled.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose([""])));
12646
- var Content$1 = styled.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
12623
+ var Content$1 = styled.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
12647
12624
  var maxWidth = _ref.maxWidth;
12648
12625
  return maxWidth && css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
12649
12626
  });
@@ -12652,24 +12629,24 @@ var ContentArea = styled.div(_templateObject6$K || (_templateObject6$K = _tagged
12652
12629
  var legacyLayout = _ref2.legacyLayout,
12653
12630
  paddingOverride = _ref2.paddingOverride,
12654
12631
  maxWidth = _ref2.maxWidth;
12655
- return legacyLayout && css(_templateObject7$F || (_templateObject7$F = _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');
12632
+ return legacyLayout && 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');
12656
12633
  });
12657
12634
 
12658
- var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$G, _templateObject8$y, _templateObject9$p, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$a, _templateObject14$9, _templateObject15$6;
12635
+ var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$j, _templateObject11$e, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$6;
12659
12636
  var ContextTitle = styled.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) {
12660
12637
  var compact = _ref.compact;
12661
12638
  return compact && css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
12662
12639
  });
12663
- var ContextIcon$1 = styled.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n background-color: var(--global-menu-icon-background-default);\n transition: background-color var(--speed-fast) var(--easing-primary-out);\n \n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])));
12640
+ var ContextIcon$1 = styled.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n background-color: var(--global-menu-icon-background-default);\n transition: background-color var(--speed-fast) var(--easing-primary-out);\n \n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])));
12664
12641
  var ContextIndicator = styled.div(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n width: 12px;\n height: 12px;\n flex: 0 0 14px;\n margin: 0 20px 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n \n opacity: 0;\n transition: opacity 0 var(--easing-primary-out);\n\n svg {\n display: block;\n height: 12px;\n width: 12px;\n }\n"])));
12665
12642
  var ContextActionBaseCSS$1 = css(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n font-family: var(--font-ui);\n font-weight: 500;\n font-size: 16px;\n color: var(--grey-11);\n\n &:hover{\n color: var(--grey-12);\n }\n"])));
12666
12643
  var StyledAnchor = styled.a(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
12667
- var ExternalIconWrapper = styled.div(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12644
+ var ExternalIconWrapper = styled.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12668
12645
  var ContextWrapper = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref2) {
12669
12646
  var $menuOpen = _ref2.$menuOpen;
12670
12647
  return $menuOpen && css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
12671
12648
  }, ContextIcon$1, IconWrapper);
12672
- var ContextActionA = styled(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) {
12649
+ var ContextActionA = styled(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) {
12673
12650
  var $menuOpen = _ref3.$menuOpen;
12674
12651
  return $menuOpen && css(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
12675
12652
  }, ContextIcon$1, IconWrapper, function (_ref4) {
@@ -12678,7 +12655,7 @@ var ContextActionA = styled(Link)(_templateObject10$k || (_templateObject10$k =
12678
12655
  });
12679
12656
  var ContextActionButton$1 = styled.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) {
12680
12657
  var menuOpen = _ref5.menuOpen;
12681
- return menuOpen && css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n\n ", "{\n opacity: 1;\n transition: opacity var(--speed-normal) var(--easing-primary-in-out) var(--speed-fast);\n }\n "])), ContextTitle, ContextIndicator);
12658
+ return menuOpen && 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);
12682
12659
  }, ContextIcon$1, IconWrapper, function (_ref6) {
12683
12660
  var isActive = _ref6.isActive;
12684
12661
  return isActive && css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
@@ -12854,18 +12831,18 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
12854
12831
  };
12855
12832
  };
12856
12833
 
12857
- var _templateObject$1z, _templateObject2$1k, _templateObject3$1b, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$H, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b;
12834
+ var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$k, _templateObject11$f, _templateObject12$d, _templateObject13$b;
12858
12835
  var Submenu = styled.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
12859
12836
  var SubmenuHeader = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
12860
- var SubmenuItemTitle = styled.span(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n display: block;\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n"])));
12837
+ var SubmenuItemTitle = styled.span(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n display: block;\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n"])));
12861
12838
  var SubmenuItemLink = styled(Link)(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
12862
12839
  var ExternalIconWrapper$1 = styled.div(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12863
12840
  var SubmenuItemAnchor = styled.a(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
12864
- var SubmenuItem = styled.li(_templateObject7$H || (_templateObject7$H = _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) {
12841
+ var SubmenuItem = styled.li(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
12865
12842
  var isActive = _ref.isActive;
12866
12843
  return css(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
12867
12844
  });
12868
- var SubmenuContainer = styled.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n max-height var(--speed-normal) var(--easing-primary-in),\n opacity var(--speed-fast) var(--easing-primary-in);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
12845
+ var SubmenuContainer = styled.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n max-height var(--speed-normal) var(--easing-primary-in),\n opacity var(--speed-fast) var(--easing-primary-in);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
12869
12846
  var ContextContainer = styled.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n max-height: 0;\n opacity: 0;\n }\n ", ";\n\n ", ";\n\n"])), function (_ref2) {
12870
12847
  var minHeight = _ref2.minHeight;
12871
12848
  return minHeight ? minHeight + "px" : "70px";
@@ -12979,25 +12956,25 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
12979
12956
  return output;
12980
12957
  };
12981
12958
 
12982
- var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$I, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$a;
12959
+ var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$l, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$9;
12983
12960
  var Logo = styled(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"])));
12984
12961
  var LogoMark = styled.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"])));
12985
- var LogoType = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
12962
+ var LogoType = styled.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"])));
12986
12963
  var SVGObject = styled.object(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose([""])));
12987
12964
  var SVGObjectText = styled.object(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
12988
12965
  var NavigationContainer = styled.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose([""])));
12989
- var MenuFooter = styled.div(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
12966
+ var MenuFooter = styled.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
12990
12967
  var FooterItemContainer = styled.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
12991
12968
  var PushContainer = styled.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
12992
12969
  var isPinned = _ref.isPinned;
12993
- return css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
12970
+ return css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
12994
12971
  });
12995
12972
  var Container$10 = styled.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) {
12996
12973
  var open = _ref2.open,
12997
12974
  desktopSize = _ref2.desktopSize;
12998
12975
  return 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' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
12999
12976
  });
13000
- var ContainerInner = styled.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
12977
+ var ContainerInner = styled.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
13001
12978
  var MainMenu = function MainMenu(_ref3) {
13002
12979
  var content = _ref3.content,
13003
12980
  _ref3$home = _ref3.home,
@@ -13107,17 +13084,17 @@ var MainMenu = function MainMenu(_ref3) {
13107
13084
  })) : null))), document.body));
13108
13085
  };
13109
13086
 
13110
- var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$J, _templateObject8$B, _templateObject9$s, _templateObject10$n;
13087
+ var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$m;
13111
13088
  var MetaConatiner = styled.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"])));
13112
13089
  var LabelTitle = styled.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"])));
13113
- var LabelContent = styled.div(_templateObject3$1d || (_templateObject3$1d = _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"])));
13090
+ var LabelContent = styled.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"])));
13114
13091
  var LabelNotes = styled.div(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n font-family: var(--font-data);\n"])));
13115
13092
  var TitleContainer = styled.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap:6px;\n flex-direction: row;\n align-items: center;\n margin-left: 10px;\n margin: 3px 0 5px 10px;\n"])));
13116
13093
  var Container$11 = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
13117
- var TitleBox = styled.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
13094
+ var TitleBox = styled.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
13118
13095
  var IconBox = styled.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);
13119
13096
  var CopyTextBox = styled.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"])));
13120
- var CopyBox = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n"])));
13097
+ var CopyBox = styled.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n"])));
13121
13098
  var UserDrawerMeta = function UserDrawerMeta(_ref) {
13122
13099
  var item = _ref.item,
13123
13100
  onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
@@ -13180,10 +13157,10 @@ var UserDrawerMeta = function UserDrawerMeta(_ref) {
13180
13157
  }, notes) : null)));
13181
13158
  };
13182
13159
 
13183
- var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$18;
13160
+ var _templateObject$1C, _templateObject2$1n, _templateObject3$1f, _templateObject4$18;
13184
13161
  var Container$12 = styled.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid var(--dividing-line);\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])));
13185
13162
  var ColumnContainer = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
13186
- var Title$8 = styled.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
13163
+ var Title$8 = styled.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
13187
13164
  var SubTitle$1 = styled.div(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n padding-top: 2px;\n opacity: 0.5;\n"])));
13188
13165
  var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
13189
13166
  var _ref$icon = _ref.icon,
@@ -13201,17 +13178,17 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
13201
13178
  }), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
13202
13179
  };
13203
13180
 
13204
- var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$K, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$b;
13181
+ var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$n, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$a;
13205
13182
  var DrawerTop = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
13206
13183
  var DrawerBottom = styled.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);
13207
- var DrawerHeader = styled.h2(_templateObject3$1f || (_templateObject3$1f = _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"])));
13184
+ var DrawerHeader = styled.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"])));
13208
13185
  var CurrentUser = styled.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n border-bottom: var(--dividing-line) 1px solid;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
13209
13186
  var UserOptions = styled.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13210
13187
  var Logout = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
13211
- var LinkMenu = styled.ul(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
13188
+ var LinkMenu = styled.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
13212
13189
  var LinkMenuItem = styled.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
13213
13190
  var IconWrapperFooter = styled.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"])));
13214
- var LinkMenuItemA = styled(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) {
13191
+ var LinkMenuItemA = styled(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) {
13215
13192
  var isActive = _ref.isActive;
13216
13193
  return isActive && css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
13217
13194
  });
@@ -13220,7 +13197,7 @@ var FooterMeta = styled.div(_templateObject12$f || (_templateObject12$f = _tagge
13220
13197
  return icon !== '' ? '31px;' : '21px;';
13221
13198
  });
13222
13199
  var NavigationContainer$1 = styled.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"])));
13223
- var FooterText = styled.div(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref3) {
13200
+ var FooterText = styled.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) {
13224
13201
  var icon = _ref3.icon;
13225
13202
  return icon !== '' ? '136px;' : '164px;';
13226
13203
  });
@@ -13335,10 +13312,10 @@ var UserMenu = function UserMenu(_ref4) {
13335
13312
  }, title)) : null));
13336
13313
  };
13337
13314
 
13338
- var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObject4$1a, _templateObject5$13, _templateObject6$Q, _templateObject7$L, _templateObject8$D;
13315
+ var _templateObject$1E, _templateObject2$1p, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$Q, _templateObject7$M, _templateObject8$D;
13339
13316
  var Container$13 = styled.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
13340
13317
  var ImgWrapper = styled.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
13341
- var EmptyImg = styled.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
13318
+ var EmptyImg = styled.div(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
13342
13319
  var Image$2 = styled.div(_templateObject4$1a || (_templateObject4$1a = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-image: url(", ");\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n display: ", ";\n"])), function (p) {
13343
13320
  return p.image;
13344
13321
  }, function (p) {
@@ -13346,7 +13323,7 @@ var Image$2 = styled.div(_templateObject4$1a || (_templateObject4$1a = _taggedTe
13346
13323
  });
13347
13324
  var InfoContainer = styled.div(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
13348
13325
  var Title$9 = styled.div(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
13349
- var Message = styled.div(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n color: var(--grey-11);\n margin: 4px 0;\n height: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n vertical-align: middle;\n"])));
13326
+ var Message = styled.div(_templateObject7$M || (_templateObject7$M = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n color: var(--grey-11);\n margin: 4px 0;\n height: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n vertical-align: middle;\n"])));
13350
13327
  var TimeMsg = styled.div(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
13351
13328
  var NotificationItem = function NotificationItem(_ref) {
13352
13329
  var imgUrl = _ref.imgUrl,
@@ -13358,10 +13335,10 @@ var NotificationItem = function NotificationItem(_ref) {
13358
13335
  }) : React__default.createElement(EmptyImg, null)), React__default.createElement(InfoContainer, null, React__default.createElement(Title$9, null, title), React__default.createElement(Message, null, message), React__default.createElement(TimeMsg, null, time)));
13359
13336
  };
13360
13337
 
13361
- var _templateObject$1F, _templateObject2$1q, _templateObject3$1h;
13338
+ var _templateObject$1F, _templateObject2$1q, _templateObject3$1i;
13362
13339
  var Container$14 = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
13363
13340
  var StatusContainer = styled.h2(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n padding: 10px 0 10px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--grey-12);\n border-bottom: var(--dividing-line) 1px solid;\n margin: 0;\n"])));
13364
- var NotificationWrapper = styled.div(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13341
+ var NotificationWrapper = styled.div(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13365
13342
  var renderNotifications = function renderNotifications(items, type) {
13366
13343
  return items.map(function (item, index) {
13367
13344
  return React__default.createElement(NotificationWrapper, {
@@ -13384,21 +13361,21 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
13384
13361
  return React__default.createElement(Container$14, null, unread && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
13385
13362
  };
13386
13363
 
13387
- var _templateObject$1G, _templateObject2$1r, _templateObject3$1i, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$M, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g;
13364
+ var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$o, _templateObject11$i, _templateObject12$g;
13388
13365
  var Container$15 = styled.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
13389
13366
  var SearchBar = styled.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
13390
- var IconWrapper$4 = styled.div(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])));
13367
+ var IconWrapper$4 = styled.div(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])));
13391
13368
  var SearchInput = styled.input(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-data);\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent; \n color: var(--grey-10);\n font-size: 14px;\n\n &::placeholder {\n font-family: var(--font-data);\n font-weight: 400;\n font-style: italic;\n font-size: 14px;\n color: var(--grey-8);\n }\n"])), removeAutoFillStyle);
13392
13369
  var ButtonArea = styled.div(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
13393
13370
  var buttonClickAnimation = keyframes(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose(["\n 0% {\n opacity:0.9;\n transform: scale(0.85);\n }\n 100% {\n opacity:1;\n transform: scale(1);\n }\n"])));
13394
13371
  var DrawerToggle = styled.button.attrs({
13395
13372
  type: 'button'
13396
- })(_templateObject7$M || (_templateObject7$M = _taggedTemplateLiteralLoose(["\n flex: 0 56px;\n width: 56px;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n border-bottom: 5px solid transparent;\n padding-top: 5px;\n background: none;\n outline: none;\n cursor: pointer;\n \n transition: border var(--speed-normal) var(--easing-primary-out);\n \n svg {\n transition: transform var(--speed-normal) var(--easing-primary-out);\n }\n\n &:hover {\n border-bottom-color: var(--primary-6);\n opacity: 0.9;\n }\n \n ", "\n"])), function (_ref) {
13373
+ })(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n flex: 0 56px;\n width: 56px;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n border-bottom: 5px solid transparent;\n padding-top: 5px;\n background: none;\n outline: none;\n cursor: pointer;\n \n transition: border var(--speed-normal) var(--easing-primary-out);\n \n svg {\n transition: transform var(--speed-normal) var(--easing-primary-out);\n }\n\n &:hover {\n border-bottom-color: var(--primary-6);\n opacity: 0.9;\n }\n \n ", "\n"])), function (_ref) {
13397
13374
  var isActive = _ref.isActive;
13398
13375
  return isActive && css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n \n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
13399
13376
  });
13400
13377
  var DrawerPortalWrapper = styled.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose([""])));
13401
- var Drawer = styled.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n \n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
13378
+ var Drawer = styled.div(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n \n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
13402
13379
  var baseWidth = _ref2.baseWidth;
13403
13380
  return baseWidth ? baseWidth : "200px";
13404
13381
  }, function (_ref3) {
@@ -13548,11 +13525,11 @@ var TabList = function TabList(_ref) {
13548
13525
  };
13549
13526
 
13550
13527
  var _excluded$H = ["children", "tabFor", "onClick"];
13551
- var _templateObject$1I, _templateObject2$1s, _templateObject3$1j;
13528
+ var _templateObject$1I, _templateObject2$1s, _templateObject3$1k;
13552
13529
  var TabComponent = styled.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
13553
13530
  var TabLabel = styled.label(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n height: 40px;\n ", "\n font-size: 15px;\n font-weight: ", ";\n letter-spacing: 0.09px;\n color: ", ";\n cursor: pointer;\n border-bottom: ", ";\n padding-top: 6px;\n padding-bottom: 14px;\n flex-shrink: 0;\n user-select: none;\n"])), function (_ref) {
13554
13531
  var theme = _ref.theme;
13555
- return css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13532
+ return css(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13556
13533
  }, function (_ref2) {
13557
13534
  var active = _ref2.active;
13558
13535
  return active ? '600' : '500';
@@ -13595,11 +13572,11 @@ var TabContent = function TabContent(_ref) {
13595
13572
  };
13596
13573
 
13597
13574
  var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
13598
- var _templateObject$1K, _templateObject2$1t, _templateObject3$1k, _templateObject4$1c;
13575
+ var _templateObject$1K, _templateObject2$1t, _templateObject3$1l, _templateObject4$1c;
13599
13576
  var Container$17 = styled.button(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
13600
13577
  var LinkTab = styled.div(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
13601
13578
  var theme = _ref.theme;
13602
- return css(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
13579
+ return css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
13603
13580
  }, function (_ref2) {
13604
13581
  var isActive = _ref2.isActive,
13605
13582
  theme = _ref2.theme;
@@ -13633,10 +13610,10 @@ var MobileTab = function MobileTab(_ref3) {
13633
13610
  };
13634
13611
 
13635
13612
  var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
13636
- var _templateObject$1L, _templateObject2$1u, _templateObject3$1l, _templateObject4$1d, _templateObject5$15, _templateObject6$S;
13613
+ var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1d, _templateObject5$15, _templateObject6$S;
13637
13614
  var Container$18 = styled.div(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
13638
13615
  var active = _ref.active;
13639
- return active ? css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13616
+ return active ? css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13640
13617
  }, IconWrapper);
13641
13618
  var Title$a = styled.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-family: ", ";\n letter-spacing: 0.09px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref2) {
13642
13619
  var theme = _ref2.theme;
@@ -13718,10 +13695,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
13718
13695
  };
13719
13696
 
13720
13697
  var _excluded$L = ["closeId", "closeText"];
13721
- var _templateObject$1N, _templateObject2$1w, _templateObject3$1m;
13698
+ var _templateObject$1N, _templateObject2$1w, _templateObject3$1n;
13722
13699
  var StyledButton$7 = styled.button(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose(["\n ", "\n \n font-family: var(--font-ui);\n background-color: var(--global-element-background);\n border-top: 1px solid var(--dividing-line);\n font-weight: 400;\n color: var(--grey-10);\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
13723
13700
  var IconContainer$4 = styled.div(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
13724
- var TextWrapper$1 = styled.div(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13701
+ var TextWrapper$1 = styled.div(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13725
13702
  var CloseButton$1 = function CloseButton(_ref) {
13726
13703
  var closeId = _ref.closeId,
13727
13704
  _ref$closeText = _ref.closeText,
@@ -13814,10 +13791,10 @@ var MobileMenu = function MobileMenu(_ref) {
13814
13791
  })));
13815
13792
  };
13816
13793
 
13817
- var _templateObject$1Q, _templateObject2$1z, _templateObject3$1n;
13794
+ var _templateObject$1Q, _templateObject2$1z, _templateObject3$1o;
13818
13795
  var Logo$1 = styled(Link)(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
13819
13796
  var LogoMark$1 = styled.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
13820
- var SVGObject$1 = styled.object(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose([""])));
13797
+ var SVGObject$1 = styled.object(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose([""])));
13821
13798
  var MobileLogoLink = function MobileLogoLink(_ref) {
13822
13799
  var _ref$home = _ref.home,
13823
13800
  home = _ref$home === void 0 ? "/" : _ref$home,
@@ -14000,14 +13977,14 @@ var GlobalUI = function GlobalUI(_ref) {
14000
13977
  };
14001
13978
 
14002
13979
  var _excluded$P = ["children"];
14003
- var _templateObject$1T, _templateObject2$1B, _templateObject3$1o, _templateObject4$1e, _templateObject5$16, _templateObject6$T, _templateObject7$N, _templateObject8$F, _templateObject9$v;
13980
+ var _templateObject$1T, _templateObject2$1B, _templateObject3$1p, _templateObject4$1e, _templateObject5$16, _templateObject6$T, _templateObject7$O, _templateObject8$F, _templateObject9$v;
14004
13981
  var Container$1e = styled.div(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
14005
13982
  var LogoContainer = styled.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
14006
- var LogoTopText = styled.div(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
13983
+ var LogoTopText = styled.div(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
14007
13984
  var LogoBottomText = styled.div(_templateObject4$1e || (_templateObject4$1e = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 400;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
14008
13985
  var SidebarBox = styled.div(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
14009
13986
  var SidebarHeading = styled.div(_templateObject6$T || (_templateObject6$T = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
14010
- var SidebarLinkHeading = styled.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
13987
+ var SidebarLinkHeading = styled.div(_templateObject7$O || (_templateObject7$O = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
14011
13988
  var BackLink$1 = styled(Link)(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
14012
13989
  var SLink = styled(Link)(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
14013
13990
  var SidebarLink = function SidebarLink(_ref) {