scorer-ui-kit 2.6.0 → 2.6.2
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.
- package/dist/Tables/index.d.ts +1 -0
- package/dist/Tables/molecules/TypeTableHeader.d.ts +1 -2
- package/dist/index.js +158 -159
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +158 -159
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -1560,7 +1560,7 @@ 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-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"])));
|
|
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-default-background-color: var(--grey-1);\n --input-default-border-color: var(--grey-6);\n --input-default-shadow-color: transparent;\n\n --input-default-focused-background-color: var(--grey-1);\n --input-default-focused-border-color: var(--grey-6);\n --input-default-focused-shadow-color: var(--grey-3);\n\n --input-disabled-background-color: var(--grey-3);\n --input-disabled-border-color: var(--grey-6);\n --input-disabled-shadow-color: transparent;\n\n --input-required-background-color: var(--grey-1);\n --input-required-border-color: var(--primary-6);\n --input-required-shadow-color: transparent;\n\n --input-required-focused-background-color: var(--grey-1);\n --input-required-focused-border-color: var(--primary-6);\n --input-required-focused-shadow-color: var(--grey-3);\n\n --input-valid-background-color: var(--grey-1);\n --input-valid-border-color: var(--success-9);\n --input-valid-shadow-color: transparent;\n\n --input-valid-focused-background-color: var(--grey-1);\n --input-valid-focused-border-color: var(--success-9);\n --input-valid-focused-shadow-color: var(--grey-3);\n\n --input-invalid-background-color: var(--grey-1);\n --input-invalid-border-color: var(--warning-9);\n --input-invalid-shadow-color: transparent;\n\n --input-invalid-focused-background-color: var(--grey-1);\n --input-invalid-focused-border-color: var(--warning-9);\n --input-invalid-focused-shadow-color: var(--grey-3);\n\n --input-processing-background-color: var(--grey-3)2;\n --input-processing-border-color: var(--primary-10);\n --input-processing-shadow-color: transparent;\n\n --input-processing-focused-background-color: var(--grey-2);\n --input-processing-focused-border-color: var(--primary-10);\n --input-processing-focused-shadow-color: var(--grey-3);\n\n /* Checkboxes and Radio Buttons */\n --input-toggle-icon-color: var(--white-12);\n \n --input-toggle-unchecked-border-color: var(--grey-8);\n --input-toggle-unchecked-background-color: transparent;\n \n --input-toggle-checked-border-color: var(--primary-9);\n --input-toggle-checked-background-color: var(--primary-9);\n \n \n --input-toggle-unchecked-hover-border-color: var(--primary-9);\n --input-toggle-unchecked-hover-background-color: transparent;\n \n --input-toggle-checked-hover-border-color: var(--primary-7);\n --input-toggle-checked-hover-background-color: var(--primary-7);\n \n \n --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n --input-toggle-unchecked-disabled-background-color: transparent;\n\n --input-toggle-checked-disabled-border-color: var(--grey-7);\n --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n \n --input-toggle-intermediate-border-color: var(--primary-11);\n --input-toggle-intermediate-background-color: var(--primary-11);\n\n --input-toggle-intermediate-hover-border-color: var(--primary-11);\n --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n /* Labels */\n --input-label: var(--grey-11);\n --input-label-hover: var(--primary-8);\n --input-label-active: var(--grey-12);\n\n }\n\n /* Filters */\n .light-theme, .dark-theme {\n --filter-button-text-color: var(--grey-11);\n --filter-button-icon-color: var(--grey-10);\n --filter-button-background-color: var(--grey-2);\n --filter-button-stroke-color: var(--grey-a5);\n --filter-button-shadow-color: var(--primary-a3);\n\n --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n --filter-dropdown-background-color-fallback: var(--grey-3);\n --filter-dropdown-accent: var(--primary-a9); \n\n }\n\n .dark-theme {\n --filter-button-shadow-color: var(--black-a8);\n }\n\n /* Buttons */\n .light-theme, .dark-theme {\n --button-background-color: var(--primary-9);\n --button-border-color: var(--primary-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-primary-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--primary-a3);\n --button-loading-area-background-color: var(--primary-a7);\n --button-loading-area-divider-color: var(--primary-a8);\n\n --button-hover-background-color: var(--primary-8);\n --button-hover-border-color: var(--primary-a6);\n --button-hover-inner-shadow-color: transparent;\n --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n --button-hover-text-color: var(--white-1);\n --button-hover-divider-color: var(--primary-a3);\n --button-hover-icon-area-background-color: var(--primary-a3);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n --button-active-divider-color: var(--primary-a3);\n --button-active-icon-area-background-color: var(--primary-a3);\n\n --button-gradient-start: var(--primary-gradient-start);\n --button-gradient-end: var(--primary-gradient-end);\n\n .button-design-secondary {\n --button-background-color: var(--grey-9);\n --button-border-color: var(--grey-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-secondary-default);\n --button-text-color: var(--grey-12);\n --button-divider-color: var(--grey-a3);\n \n --button-loading-area-background-color: var(--grey-a4);\n --button-loading-area-divider-color: var(--grey-a3);\n\n --button-hover-background-color: var(--grey-8);\n --button-hover-border-color: var(--grey-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--secondary-gradient-start);\n --button-gradient-end: var(--secondary-gradient-end);\n }\n\n .button-design-danger, .button-design-warning {\n --button-background-color: var(--warning-9);\n --button-border-color: var(--warning-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-warning-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--warning-9);\n\n --button-loading-area-background-color: var(--warning-a7);\n --button-loading-area-divider-color: var(--warning-a9);\n\n --button-hover-background-color: var(--warning-8);\n --button-hover-border-color: var(--warning-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--warning-gradient-start);\n --button-gradient-end: var(--warning-gradient-end);\n }\n\n }\n\n"])));
|
|
1564
1564
|
|
|
1565
1565
|
var _templateObject$3;
|
|
1566
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);
|
|
@@ -2700,35 +2700,32 @@ var CheckboxState;
|
|
|
2700
2700
|
CheckboxState["Indeterminate"] = "indeterminate";
|
|
2701
2701
|
})(CheckboxState || (CheckboxState = {}));
|
|
2702
2702
|
var RealInput$1 = styled.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
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
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
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"])));
|
|
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) {
|
|
2709
|
-
var color = _ref2.color;
|
|
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 transition: \n background-color var(--speed-faster) var(--easing-primary-out),\n border-color var(--speed-faster) var(--easing-primary-out);\n"])));
|
|
2704
|
+
var CheckboxInner = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
|
|
2705
|
+
var IconWrapper$2 = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: ", ";\n }\n }\n"])), function (_ref) {
|
|
2706
|
+
var color = _ref.color;
|
|
2710
2707
|
return "var(--" + color + ")";
|
|
2711
2708
|
});
|
|
2712
|
-
var Container$8 = styled.label(
|
|
2709
|
+
var Container$8 = styled.label(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n display: inline-block;\n user-select: none;\n ", "{\n border: var(--input-toggle-unchecked-border-color) 2px solid;\n }\n \n ", "\n\n ", "\n\n ", "\n\n"])), CheckboxOuter, function (_ref2) {
|
|
2710
|
+
var visualState = _ref2.visualState,
|
|
2711
|
+
disabled = _ref2.disabled;
|
|
2712
|
+
return visualState === CheckboxState.Off && css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n /* Unchecked */\n ", "{\n background-color: var(--input-toggle-unchecked-background-color);\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n /* Unchecked - Hover */\n ", ";\n\n /* Unchecked - Disabled */\n ", "\n "])), CheckboxOuter, !disabled && css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n background-color: var(--input-toggle-unchecked-hover-background-color);\n border-color: var(--input-toggle-unchecked-hover-border-color);\n }"])), CheckboxOuter), disabled && css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--input-toggle-unchecked-disabled-background-color);\n border-color: var(--input-toggle-unchecked-disabled-border-color);\n border: var(--grey-6) 2px solid;\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
|
|
2713
|
+
}, function (_ref3) {
|
|
2713
2714
|
var visualState = _ref3.visualState,
|
|
2714
2715
|
disabled = _ref3.disabled;
|
|
2715
|
-
return visualState === CheckboxState.
|
|
2716
|
+
return visualState === CheckboxState.On && css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n /* Checked */ \n ", "{\n background-color: var(--input-toggle-checked-background-color);\n border-color: var(--input-toggle-checked-border-color);\n }\n /* Checked - Hover */\n ", ";\n\n /* Checked - Disabled */ \n ", "\n "])), CheckboxOuter, !disabled && css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n background-color: var(--input-toggle-checked-hover-background-color);\n border-color: var(--input-toggle-checked-hover-border-color);\n }"])), CheckboxOuter), disabled && css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--input-toggle-checked-disabled-background-color);\n border-color: var(--input-toggle-checked-disabled-border-color);\n cursor: not-allowed;\n }\n ", "{\n opacity: 0.65;\n }\n "])), CheckboxOuter, IconWrapper$2));
|
|
2716
2717
|
}, function (_ref4) {
|
|
2717
2718
|
var visualState = _ref4.visualState,
|
|
2718
2719
|
disabled = _ref4.disabled;
|
|
2719
|
-
return visualState === CheckboxState.
|
|
2720
|
-
}
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
disabled = _ref6.disabled,
|
|
2729
|
-
_ref6$checked = _ref6.checked,
|
|
2730
|
-
checked = _ref6$checked === void 0 ? false : _ref6$checked,
|
|
2731
|
-
onChangeCallback = _ref6.onChangeCallback;
|
|
2720
|
+
return visualState === CheckboxState.Indeterminate && css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--input-toggle-intermediate-background-color);\n border-color: var(--input-toggle-intermediate-border-color);\n }\n ", ";\n ", "\n\n "])), CheckboxOuter, !disabled && css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n background-color: var(--input-toggle-intermediate-hover-background-color);\n border-color: var(--input-toggle-intermediate-hover-border-color);\n }\n "])), CheckboxOuter), disabled && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--input-toggle-intermediate-disabled-background-color);\n border-color: var(--input-toggle-intermediate-disabled-border-color);\n cursor: not-allowed;\n }\n ", "{\n opacity: 0.65;\n }\n "])), CheckboxOuter, IconWrapper$2));
|
|
2721
|
+
});
|
|
2722
|
+
var Checkbox = function Checkbox(_ref5) {
|
|
2723
|
+
var _ref5$indeterminate = _ref5.indeterminate,
|
|
2724
|
+
indeterminate = _ref5$indeterminate === void 0 ? false : _ref5$indeterminate,
|
|
2725
|
+
disabled = _ref5.disabled,
|
|
2726
|
+
_ref5$checked = _ref5.checked,
|
|
2727
|
+
checked = _ref5$checked === void 0 ? false : _ref5$checked,
|
|
2728
|
+
onChangeCallback = _ref5.onChangeCallback;
|
|
2732
2729
|
var _useState = useState(checked),
|
|
2733
2730
|
isChecked = _useState[0],
|
|
2734
2731
|
setIsChecked = _useState[1];
|
|
@@ -2757,9 +2754,9 @@ var Checkbox = function Checkbox(_ref6) {
|
|
|
2757
2754
|
disabled: disabled,
|
|
2758
2755
|
visualState: visualState
|
|
2759
2756
|
}), React__default.createElement(CheckboxOuter, null, React__default.createElement(CheckboxInner, null, visualState === CheckboxState.On ? React__default.createElement(IconWrapper$2, {
|
|
2760
|
-
color: '
|
|
2757
|
+
color: 'input-toggle-icon-color'
|
|
2761
2758
|
}, React__default.createElement(CheckMark, {
|
|
2762
|
-
color: '
|
|
2759
|
+
color: 'input-toggle-icon-color',
|
|
2763
2760
|
stroke: 'inverse',
|
|
2764
2761
|
size: 12,
|
|
2765
2762
|
weight: iconWeight
|
|
@@ -2775,10 +2772,9 @@ var Checkbox = function Checkbox(_ref6) {
|
|
|
2775
2772
|
var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$5, _templateObject10$4;
|
|
2776
2773
|
var InnerRadio = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
2777
2774
|
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) {
|
|
2778
|
-
var
|
|
2779
|
-
isChecked = _ref.isChecked,
|
|
2775
|
+
var isChecked = _ref.isChecked,
|
|
2780
2776
|
disabled = _ref.disabled;
|
|
2781
|
-
return
|
|
2777
|
+
return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n border-color: var(--input-toggle-unchecked-border-color);\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), !disabled && css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--input-toggle-unchecked-hover-border-color);\n }\n "]))), isChecked && !disabled && css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n border-color: var(--input-toggle-checked-border-color);\n ", " {\n background-color: var(--input-toggle-checked-background-color);\n }\n "])), InnerRadio), isChecked && !disabled && css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: var(--input-toggle-checked-hover-border-color);\n ", " {\n background-color: var(--input-toggle-checked-hover-background-color);\n }\n }\n "])), InnerRadio), isChecked && disabled && css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-checked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-checked-disabled-background-color);\n }\n "])), InnerRadio), !isChecked && disabled && css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-unchecked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-unchecked-disabled-background-color);\n }\n "])), InnerRadio));
|
|
2782
2778
|
});
|
|
2783
2779
|
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"])));
|
|
2784
2780
|
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"])));
|
|
@@ -5885,7 +5881,7 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
|
|
|
5885
5881
|
|
|
5886
5882
|
var _excluded$n = ["children"];
|
|
5887
5883
|
var _templateObject$H, _templateObject2$A;
|
|
5888
|
-
var Container$p = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);\n background-color: var(--
|
|
5884
|
+
var Container$p = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);\n background-color: var(--filter-dropdown-background-color-fallback);\n @supports( background-color: var(--filter-dropdown-background-color) ){\n background-color: var(--filter-dropdown-background-color);\n };\n\n backdrop-filter: blur(20px);\n border: var(--grey-6) 1px solid;\n border-radius: 3px;\n position: relative;\n display: inline-flex;\n overflow: visible;\n padding-top: 5px;\n\n &::before {\n content: '';\n background-color: var(--filter-dropdown-accent);\n border-radius: 3px 3px 0 0;\n box-shadow: 0px 5px 25px 0px var(--primary-a5);\n\n display: block;\n height: 5px;\n position: absolute;\n left: -1px;\n top: -1px;\n right: -1px;\n z-index: 1;\n }\n\n"])));
|
|
5889
5885
|
var Inner = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n"])));
|
|
5890
5886
|
var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
5891
5887
|
var children = _ref.children,
|
|
@@ -5894,40 +5890,43 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
|
5894
5890
|
};
|
|
5895
5891
|
|
|
5896
5892
|
var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
|
|
5897
|
-
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d;
|
|
5893
|
+
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$9;
|
|
5898
5894
|
var FlipWrapper = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
5899
5895
|
var isSortAscending = _ref.isSortAscending;
|
|
5900
5896
|
return isSortAscending && css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
5901
5897
|
});
|
|
5902
5898
|
var fadeInAnimation = keyframes(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])));
|
|
5903
5899
|
var FlipArrowContainer = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose([""])));
|
|
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 ", "
|
|
5900
|
+
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 \n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n }\n\n ", ";\n\n"])), resetButtonStyles, function (_ref2) {
|
|
5905
5901
|
var design = _ref2.design;
|
|
5906
5902
|
return design === 'basic' ? "\n background-color: transparent;\n border: 1px solid transparent;\n " : "\n background-color: var(--filter-button-background-color);\n border: var(--filter-button-stroke-color) 1px solid;\n box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n ";
|
|
5907
5903
|
}, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, fadeInAnimation, animation.speed.slower, animation.easing.primary.out, IconWrapper, animation.speed.fast, animation.easing.primary.out, function (_ref3) {
|
|
5908
5904
|
var design = _ref3.design;
|
|
5909
5905
|
return design === 'basic' ? '' : css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 4px 9px 0px var(--primary-a2);\n border-color: var(--primary-7);\n "])));
|
|
5910
|
-
}, IconWrapper,
|
|
5911
|
-
var isOpen = _ref4.isOpen
|
|
5912
|
-
|
|
5913
|
-
|
|
5914
|
-
|
|
5915
|
-
|
|
5916
|
-
|
|
5917
|
-
|
|
5906
|
+
}, IconWrapper, function (_ref4) {
|
|
5907
|
+
var isOpen = _ref4.isOpen;
|
|
5908
|
+
return !isOpen && css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n ", " ", " {\n [stroke]{\n stroke: var(--grey-12);\n }\n };\n "])), FlipArrowContainer, IconWrapper);
|
|
5909
|
+
}, function (_ref5) {
|
|
5910
|
+
var isOpen = _ref5.isOpen,
|
|
5911
|
+
hasFlipArrow = _ref5.hasFlipArrow;
|
|
5912
|
+
return isOpen && hasFlipArrow && css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-9);\n border: solid 1px var(--primary-9);\n color: var(--white-1);\n\n &, &:hover:enabled, &:active:enabled {\n color: var(--white-1);\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n }\n \n ", " ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n };\n "])), IconWrapper, FlipArrowContainer, IconWrapper);
|
|
5913
|
+
});
|
|
5914
|
+
var InnerContainer$3 = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
5915
|
+
var ButtonText = styled.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n"])), function (_ref6) {
|
|
5916
|
+
var hasFlipArrow = _ref6.hasFlipArrow;
|
|
5918
5917
|
return hasFlipArrow ? '3px' : '20px';
|
|
5919
5918
|
});
|
|
5920
|
-
var FilterButton = function FilterButton(
|
|
5921
|
-
var icon =
|
|
5922
|
-
|
|
5923
|
-
hasFlipArrow =
|
|
5924
|
-
|
|
5925
|
-
isSortAscending =
|
|
5926
|
-
isOpen =
|
|
5927
|
-
|
|
5928
|
-
design =
|
|
5929
|
-
children =
|
|
5930
|
-
props = _objectWithoutPropertiesLoose(
|
|
5919
|
+
var FilterButton = function FilterButton(_ref7) {
|
|
5920
|
+
var icon = _ref7.icon,
|
|
5921
|
+
_ref7$hasFlipArrow = _ref7.hasFlipArrow,
|
|
5922
|
+
hasFlipArrow = _ref7$hasFlipArrow === void 0 ? false : _ref7$hasFlipArrow,
|
|
5923
|
+
_ref7$isSortAscending = _ref7.isSortAscending,
|
|
5924
|
+
isSortAscending = _ref7$isSortAscending === void 0 ? false : _ref7$isSortAscending,
|
|
5925
|
+
isOpen = _ref7.isOpen,
|
|
5926
|
+
_ref7$design = _ref7.design,
|
|
5927
|
+
design = _ref7$design === void 0 ? 'default' : _ref7$design,
|
|
5928
|
+
children = _ref7.children,
|
|
5929
|
+
props = _objectWithoutPropertiesLoose(_ref7, _excluded$o);
|
|
5931
5930
|
return React__default.createElement(StyledButton$4, Object.assign({
|
|
5932
5931
|
type: 'button'
|
|
5933
5932
|
}, props, {
|
|
@@ -5951,7 +5950,7 @@ var FilterButton = function FilterButton(_ref6) {
|
|
|
5951
5950
|
};
|
|
5952
5951
|
|
|
5953
5952
|
var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
|
|
5954
|
-
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$
|
|
5953
|
+
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$a;
|
|
5955
5954
|
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"])));
|
|
5956
5955
|
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"])));
|
|
5957
5956
|
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"])));
|
|
@@ -5961,7 +5960,7 @@ var FakeInnerRadio = styled.div(_templateObject6$m || (_templateObject6$m = _tag
|
|
|
5961
5960
|
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) {
|
|
5962
5961
|
var selected = _ref.selected,
|
|
5963
5962
|
disabled = _ref.disabled;
|
|
5964
|
-
return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n
|
|
5963
|
+
return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n ", ", ", " {\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-unchecked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-unchecked-background-color);\n }\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-out);\n }\n \n "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n ", " {\n color: var(--input-label-active);\n font-weight: 600;\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-checked-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-checked-background-color);\n }\n }\n \n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-checked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-checked-hover-background-color);\n }\n }\n }\n \n\n "])), Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner), disabled && css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
|
|
5965
5964
|
});
|
|
5966
5965
|
var FilterOption = function FilterOption(_ref2) {
|
|
5967
5966
|
var title = _ref2.title,
|
|
@@ -6475,7 +6474,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6475
6474
|
}))))));
|
|
6476
6475
|
};
|
|
6477
6476
|
|
|
6478
|
-
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$
|
|
6477
|
+
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$b, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
|
|
6479
6478
|
var Container$w = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6480
6479
|
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"])));
|
|
6481
6480
|
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) {
|
|
@@ -6495,7 +6494,7 @@ var ContentBox$1 = styled.div(_templateObject8$l || (_templateObject8$l = _tagge
|
|
|
6495
6494
|
}, function (_ref5) {
|
|
6496
6495
|
var openState = _ref5.openState,
|
|
6497
6496
|
disabled = _ref5.disabled;
|
|
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$
|
|
6497
|
+
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 "]))));
|
|
6499
6498
|
});
|
|
6500
6499
|
var ButtonWrapper$1 = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
6501
6500
|
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"])));
|
|
@@ -7356,7 +7355,7 @@ var StatusIcon = function StatusIcon(_ref3) {
|
|
|
7356
7355
|
}));
|
|
7357
7356
|
};
|
|
7358
7357
|
|
|
7359
|
-
var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$
|
|
7358
|
+
var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$c, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
|
|
7360
7359
|
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"])));
|
|
7361
7360
|
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"])));
|
|
7362
7361
|
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) {
|
|
@@ -7386,7 +7385,7 @@ var HandleReactiveRing = styled.circle(_templateObject9$g || (_templateObject9$g
|
|
|
7386
7385
|
styling = _ref4.styling;
|
|
7387
7386
|
return theme.custom.lines[styling].handleReactiveRing.stroke;
|
|
7388
7387
|
});
|
|
7389
|
-
var HandleContrastLayer = styled.circle(_templateObject10$
|
|
7388
|
+
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) {
|
|
7390
7389
|
var theme = _ref5.theme,
|
|
7391
7390
|
styling = _ref5.styling;
|
|
7392
7391
|
return theme.custom.lines[styling].handleContrastLayer.stroke;
|
|
@@ -7589,7 +7588,7 @@ var HandleUnit = function HandleUnit(props) {
|
|
|
7589
7588
|
}, index + pointIndexOffset))));
|
|
7590
7589
|
};
|
|
7591
7590
|
|
|
7592
|
-
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$
|
|
7591
|
+
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$d, _templateObject11$9, _templateObject12$8, _templateObject13$7, _templateObject14$5;
|
|
7593
7592
|
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) {
|
|
7594
7593
|
var theme = _ref.theme,
|
|
7595
7594
|
styling = _ref.styling;
|
|
@@ -7633,7 +7632,7 @@ var LabelText$2 = styled.text(_templateObject8$o || (_templateObject8$o = _tagge
|
|
|
7633
7632
|
var showLabelShadow = _ref9.showLabelShadow;
|
|
7634
7633
|
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 "])));
|
|
7635
7634
|
});
|
|
7636
|
-
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$
|
|
7635
|
+
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
|
|
7637
7636
|
var theme = _ref10.theme,
|
|
7638
7637
|
styling = _ref10.styling;
|
|
7639
7638
|
return theme.custom.lines[styling].grabHandleContrast.stroke;
|
|
@@ -9420,7 +9419,7 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
|
9420
9419
|
});
|
|
9421
9420
|
};
|
|
9422
9421
|
|
|
9423
|
-
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$
|
|
9422
|
+
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$e, _templateObject11$a;
|
|
9424
9423
|
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) {
|
|
9425
9424
|
var theme = _ref.theme;
|
|
9426
9425
|
return theme && css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
@@ -9444,7 +9443,7 @@ var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTe
|
|
|
9444
9443
|
var theme = _ref5.theme;
|
|
9445
9444
|
return css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
9446
9445
|
});
|
|
9447
|
-
var StatusBlip = styled.div(_templateObject10$
|
|
9446
|
+
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) {
|
|
9448
9447
|
var _ref6$status = _ref6.status,
|
|
9449
9448
|
status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
|
|
9450
9449
|
colors = _ref6.theme.colors;
|
|
@@ -9518,6 +9517,7 @@ var TypeTableRow = function TypeTableRow(_ref2) {
|
|
|
9518
9517
|
hideDivider: true
|
|
9519
9518
|
}, React__default.createElement(Checkbox, {
|
|
9520
9519
|
checked: rowData._checked,
|
|
9520
|
+
disabled: rowData.checkboxDisabled,
|
|
9521
9521
|
onChangeCallback: wrappedSelectCallback
|
|
9522
9522
|
})) : null, hasStatus ? React__default.createElement(TypeTableCell, {
|
|
9523
9523
|
hideDivider: true
|
|
@@ -9602,7 +9602,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
9602
9602
|
}), header);
|
|
9603
9603
|
};
|
|
9604
9604
|
|
|
9605
|
-
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$
|
|
9605
|
+
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$f, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
|
|
9606
9606
|
var HeaderRow = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
9607
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) {
|
|
9608
9608
|
return p.theme.fontFamily.ui;
|
|
@@ -9627,7 +9627,7 @@ var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedT
|
|
|
9627
9627
|
});
|
|
9628
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) {
|
|
9629
9629
|
var alignment = _ref5.alignment;
|
|
9630
|
-
return alignment && css(_templateObject10$
|
|
9630
|
+
return alignment && css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
|
|
9631
9631
|
});
|
|
9632
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"])));
|
|
9633
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) {
|
|
@@ -9668,8 +9668,7 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
|
|
|
9668
9668
|
hasThumbnail = _ref9.hasThumbnail,
|
|
9669
9669
|
hasTypeIcon = _ref9.hasTypeIcon,
|
|
9670
9670
|
allChecked = _ref9.allChecked,
|
|
9671
|
-
|
|
9672
|
-
isLoading = _ref9.isLoading,
|
|
9671
|
+
disableAllChecked = _ref9.disableAllChecked,
|
|
9673
9672
|
hasHeaderGroups = _ref9.hasHeaderGroups,
|
|
9674
9673
|
columnConfig = _ref9.columnConfig,
|
|
9675
9674
|
defaultAscending = _ref9.defaultAscending,
|
|
@@ -9716,7 +9715,7 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
|
|
|
9716
9715
|
fixedWidth: 30
|
|
9717
9716
|
}, React__default.createElement(Checkbox, {
|
|
9718
9717
|
checked: allChecked,
|
|
9719
|
-
disabled:
|
|
9718
|
+
disabled: disableAllChecked,
|
|
9720
9719
|
onChangeCallback: toggleAllCallbackWrapper
|
|
9721
9720
|
})) : null, hasStatus ? React__default.createElement(HeaderItem, {
|
|
9722
9721
|
headerStyle: 'header',
|
|
@@ -9772,47 +9771,60 @@ var isChecked = function isChecked(_ref2) {
|
|
|
9772
9771
|
_checked = _ref2$_checked === void 0 ? false : _ref2$_checked;
|
|
9773
9772
|
return _checked === true;
|
|
9774
9773
|
};
|
|
9775
|
-
var
|
|
9776
|
-
var
|
|
9777
|
-
|
|
9778
|
-
|
|
9779
|
-
|
|
9780
|
-
|
|
9781
|
-
|
|
9782
|
-
|
|
9783
|
-
|
|
9784
|
-
|
|
9785
|
-
|
|
9786
|
-
|
|
9787
|
-
|
|
9788
|
-
|
|
9789
|
-
|
|
9790
|
-
|
|
9791
|
-
|
|
9792
|
-
|
|
9793
|
-
|
|
9794
|
-
|
|
9795
|
-
|
|
9796
|
-
|
|
9797
|
-
|
|
9798
|
-
|
|
9799
|
-
|
|
9800
|
-
|
|
9801
|
-
|
|
9802
|
-
|
|
9803
|
-
|
|
9804
|
-
|
|
9774
|
+
var isCheckBoxDisabled = function isCheckBoxDisabled(_ref3) {
|
|
9775
|
+
var _ref3$checkboxDisable = _ref3.checkboxDisabled,
|
|
9776
|
+
checkboxDisabled = _ref3$checkboxDisable === void 0 ? false : _ref3$checkboxDisable;
|
|
9777
|
+
return checkboxDisabled === true;
|
|
9778
|
+
};
|
|
9779
|
+
var TypeTable = function TypeTable(_ref4) {
|
|
9780
|
+
var columnConfig = _ref4.columnConfig,
|
|
9781
|
+
selectable = _ref4.selectable,
|
|
9782
|
+
_ref4$rows = _ref4.rows,
|
|
9783
|
+
rows = _ref4$rows === void 0 ? [] : _ref4$rows,
|
|
9784
|
+
closeText = _ref4.closeText,
|
|
9785
|
+
_ref4$hasStatus = _ref4.hasStatus,
|
|
9786
|
+
hasStatus = _ref4$hasStatus === void 0 ? false : _ref4$hasStatus,
|
|
9787
|
+
_ref4$hasThumbnail = _ref4.hasThumbnail,
|
|
9788
|
+
hasThumbnail = _ref4$hasThumbnail === void 0 ? false : _ref4$hasThumbnail,
|
|
9789
|
+
_ref4$hasTypeIcon = _ref4.hasTypeIcon,
|
|
9790
|
+
hasTypeIcon = _ref4$hasTypeIcon === void 0 ? false : _ref4$hasTypeIcon,
|
|
9791
|
+
_ref4$defaultAscendin = _ref4.defaultAscending,
|
|
9792
|
+
defaultAscending = _ref4$defaultAscendin === void 0 ? false : _ref4$defaultAscendin,
|
|
9793
|
+
_ref4$isLoading = _ref4.isLoading,
|
|
9794
|
+
isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
|
|
9795
|
+
_ref4$loadingText = _ref4.loadingText,
|
|
9796
|
+
loadingText = _ref4$loadingText === void 0 ? 'Loading Data...' : _ref4$loadingText,
|
|
9797
|
+
_ref4$emptyTableTitle = _ref4.emptyTableTitle,
|
|
9798
|
+
emptyTableTitle = _ref4$emptyTableTitle === void 0 ? '' : _ref4$emptyTableTitle,
|
|
9799
|
+
_ref4$emptyTableText = _ref4.emptyTableText,
|
|
9800
|
+
emptyTableText = _ref4$emptyTableText === void 0 ? '' : _ref4$emptyTableText,
|
|
9801
|
+
_ref4$hasHeaderGroups = _ref4.hasHeaderGroups,
|
|
9802
|
+
hasHeaderGroups = _ref4$hasHeaderGroups === void 0 ? false : _ref4$hasHeaderGroups,
|
|
9803
|
+
_ref4$sortCallback = _ref4.sortCallback,
|
|
9804
|
+
sortCallback = _ref4$sortCallback === void 0 ? function () {} : _ref4$sortCallback,
|
|
9805
|
+
_ref4$selectCallback = _ref4.selectCallback,
|
|
9806
|
+
selectCallback = _ref4$selectCallback === void 0 ? function () {} : _ref4$selectCallback,
|
|
9807
|
+
_ref4$toggleAllCallba = _ref4.toggleAllCallback,
|
|
9808
|
+
toggleAllCallback = _ref4$toggleAllCallba === void 0 ? function () {} : _ref4$toggleAllCallba;
|
|
9805
9809
|
var _useState = useState(false),
|
|
9806
9810
|
allChecked = _useState[0],
|
|
9807
9811
|
setAllChecked = _useState[1];
|
|
9812
|
+
var _useState2 = useState(false),
|
|
9813
|
+
disableAllChecked = _useState2[0],
|
|
9814
|
+
setDisableAllChecked = _useState2[1];
|
|
9808
9815
|
var isEmptyTable = rows.length === 1 && rows[0].columns.length === 0 && !isLoading;
|
|
9809
9816
|
useEffect(function () {
|
|
9810
9817
|
var areAllChecked = false;
|
|
9818
|
+
var disableCheckAll = false;
|
|
9811
9819
|
if (rows.every(isChecked) && rows.length > 0 && !isEmptyTable) {
|
|
9812
9820
|
areAllChecked = true;
|
|
9813
9821
|
}
|
|
9822
|
+
if (rows.some(isCheckBoxDisabled) || isEmptyTable || isLoading) {
|
|
9823
|
+
disableCheckAll = true;
|
|
9824
|
+
}
|
|
9814
9825
|
setAllChecked(areAllChecked);
|
|
9815
|
-
|
|
9826
|
+
setDisableAllChecked(disableCheckAll);
|
|
9827
|
+
}, [isEmptyTable, isLoading, rows]);
|
|
9816
9828
|
return React__default.createElement(Container$L, null, React__default.createElement(TableContainer, null, React__default.createElement(TypeTableHeader, Object.assign({}, {
|
|
9817
9829
|
selectable: selectable,
|
|
9818
9830
|
hasStatus: hasStatus,
|
|
@@ -9820,8 +9832,7 @@ var TypeTable = function TypeTable(_ref3) {
|
|
|
9820
9832
|
hasTypeIcon: hasTypeIcon,
|
|
9821
9833
|
defaultAscending: defaultAscending,
|
|
9822
9834
|
allChecked: allChecked,
|
|
9823
|
-
|
|
9824
|
-
isLoading: isLoading,
|
|
9835
|
+
disableAllChecked: disableAllChecked,
|
|
9825
9836
|
hasHeaderGroups: hasHeaderGroups,
|
|
9826
9837
|
columnConfig: columnConfig,
|
|
9827
9838
|
toggleAllCallback: toggleAllCallback,
|
|
@@ -9848,7 +9859,7 @@ var TypeTable = function TypeTable(_ref3) {
|
|
|
9848
9859
|
};
|
|
9849
9860
|
|
|
9850
9861
|
var _excluded$C = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
9851
|
-
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$
|
|
9862
|
+
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$g;
|
|
9852
9863
|
var Container$M = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
9853
9864
|
var theme = _ref.theme;
|
|
9854
9865
|
return css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
@@ -9863,7 +9874,7 @@ var TextContainer$3 = styled.div(_templateObject8$r || (_templateObject8$r = _ta
|
|
|
9863
9874
|
return alignment === 'center' && css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
9864
9875
|
}, function (_ref3) {
|
|
9865
9876
|
var alignment = _ref3.alignment;
|
|
9866
|
-
return alignment === 'right' && css(_templateObject10$
|
|
9877
|
+
return alignment === 'right' && css(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
|
|
9867
9878
|
}, StyledIconButton$1, StyledIconButton$1);
|
|
9868
9879
|
var EditCell = function EditCell(_ref4) {
|
|
9869
9880
|
var _ref4$type = _ref4.type,
|
|
@@ -11787,7 +11798,7 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
11787
11798
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
11788
11799
|
};
|
|
11789
11800
|
|
|
11790
|
-
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$
|
|
11801
|
+
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$h;
|
|
11791
11802
|
var WIDTH_PER_NUMBER = 12;
|
|
11792
11803
|
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"])));
|
|
11793
11804
|
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"])));
|
|
@@ -11816,7 +11827,7 @@ var ArrowButton = styled.button(_templateObject9$m || (_templateObject9$m = _tag
|
|
|
11816
11827
|
var active = _ref6.active;
|
|
11817
11828
|
return active ? '1' : '0.5';
|
|
11818
11829
|
});
|
|
11819
|
-
var ItemsSelectWrapper = styled.div(_templateObject10$
|
|
11830
|
+
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) {
|
|
11820
11831
|
var width = _ref7.width;
|
|
11821
11832
|
return width ? width : "60px";
|
|
11822
11833
|
}, StyledLabel);
|
|
@@ -12075,7 +12086,7 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
|
12075
12086
|
}, rightButtonText)));
|
|
12076
12087
|
};
|
|
12077
12088
|
|
|
12078
|
-
var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$
|
|
12089
|
+
var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$i, _templateObject11$c, _templateObject12$a;
|
|
12079
12090
|
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"])));
|
|
12080
12091
|
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"])));
|
|
12081
12092
|
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"])));
|
|
@@ -12089,7 +12100,7 @@ var ExtraActionIcon = styled.div(_templateObject6$H || (_templateObject6$H = _ta
|
|
|
12089
12100
|
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);
|
|
12090
12101
|
var Breadcrumbs = styled.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
12091
12102
|
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"])));
|
|
12092
|
-
var BreadcrumbIcon = styled.div(_templateObject10$
|
|
12103
|
+
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"])));
|
|
12093
12104
|
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"])));
|
|
12094
12105
|
var RightArea = styled.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
|
|
12095
12106
|
var UtilityHeader = function UtilityHeader(_ref2) {
|
|
@@ -12277,7 +12288,7 @@ var ResizeLine = function ResizeLine(_ref4) {
|
|
|
12277
12288
|
}))), React__default.createElement(Line, null)));
|
|
12278
12289
|
};
|
|
12279
12290
|
|
|
12280
|
-
var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$
|
|
12291
|
+
var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
|
|
12281
12292
|
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"])));
|
|
12282
12293
|
var MainArea = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
12283
12294
|
var $layout = _ref.$layout,
|
|
@@ -12303,7 +12314,7 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
|
|
|
12303
12314
|
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;
|
|
12304
12315
|
}, function (_ref6) {
|
|
12305
12316
|
var $collapseState = _ref6.$collapseState;
|
|
12306
|
-
return $collapseState === 'collapsed' ? css(_templateObject10$
|
|
12317
|
+
return $collapseState === 'collapsed' ? css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
12307
12318
|
}, function (_ref7) {
|
|
12308
12319
|
var $layout = _ref7.$layout,
|
|
12309
12320
|
$collapseState = _ref7.$collapseState,
|
|
@@ -12632,7 +12643,7 @@ var ContentArea = styled.div(_templateObject6$K || (_templateObject6$K = _tagged
|
|
|
12632
12643
|
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');
|
|
12633
12644
|
});
|
|
12634
12645
|
|
|
12635
|
-
var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$
|
|
12646
|
+
var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$6;
|
|
12636
12647
|
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) {
|
|
12637
12648
|
var compact = _ref.compact;
|
|
12638
12649
|
return compact && css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
@@ -12646,7 +12657,7 @@ var ContextWrapper = styled.div(_templateObject8$y || (_templateObject8$y = _tag
|
|
|
12646
12657
|
var $menuOpen = _ref2.$menuOpen;
|
|
12647
12658
|
return $menuOpen && css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
12648
12659
|
}, ContextIcon$1, IconWrapper);
|
|
12649
|
-
var ContextActionA = styled(Link)(_templateObject10$
|
|
12660
|
+
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) {
|
|
12650
12661
|
var $menuOpen = _ref3.$menuOpen;
|
|
12651
12662
|
return $menuOpen && css(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
12652
12663
|
}, ContextIcon$1, IconWrapper, function (_ref4) {
|
|
@@ -12831,39 +12842,35 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
12831
12842
|
};
|
|
12832
12843
|
};
|
|
12833
12844
|
|
|
12834
|
-
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$
|
|
12845
|
+
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b, _templateObject14$9;
|
|
12835
12846
|
var Submenu = styled.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
12836
12847
|
var SubmenuHeader = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
12837
|
-
var
|
|
12838
|
-
var
|
|
12839
|
-
var
|
|
12840
|
-
var
|
|
12841
|
-
var
|
|
12848
|
+
var SubmenuContainerInner = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
12849
|
+
var SubmenuItemTitle = styled.span(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n display: block;\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n"])));
|
|
12850
|
+
var SubmenuItemLink = styled(Link)(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
|
|
12851
|
+
var ExternalIconWrapper$1 = styled.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
12852
|
+
var SubmenuItemAnchor = styled.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
12853
|
+
var SubmenuItem = styled.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
|
|
12842
12854
|
var isActive = _ref.isActive;
|
|
12843
|
-
return css(
|
|
12844
|
-
});
|
|
12845
|
-
var SubmenuContainer = styled.div(
|
|
12846
|
-
var ContextContainer = styled.div(
|
|
12847
|
-
var
|
|
12848
|
-
return
|
|
12849
|
-
},
|
|
12850
|
-
var
|
|
12851
|
-
|
|
12852
|
-
|
|
12853
|
-
|
|
12854
|
-
var
|
|
12855
|
-
|
|
12856
|
-
|
|
12857
|
-
|
|
12858
|
-
|
|
12859
|
-
|
|
12860
|
-
|
|
12861
|
-
|
|
12862
|
-
loading = _ref5.loading,
|
|
12863
|
-
topLevelPath = _ref5.topLevelPath,
|
|
12864
|
-
minHeight = _ref5.minHeight,
|
|
12865
|
-
onClickCallback = _ref5.onClickCallback,
|
|
12866
|
-
readyCallback = _ref5.readyCallback;
|
|
12855
|
+
return css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
12856
|
+
});
|
|
12857
|
+
var SubmenuContainer = styled.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
12858
|
+
var ContextContainer = styled.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n\n ", ";\n\n"])), SubmenuContainer, function (_ref2) {
|
|
12859
|
+
var open = _ref2.open;
|
|
12860
|
+
return open && css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", "{\n grid-template-rows: 1fr;\n \n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n \n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
12861
|
+
}, function (_ref3) {
|
|
12862
|
+
var loading = _ref3.loading;
|
|
12863
|
+
return loading === 'true' && css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
12864
|
+
});
|
|
12865
|
+
var NavigationItem = function NavigationItem(_ref4) {
|
|
12866
|
+
var item = _ref4.item,
|
|
12867
|
+
menuOpen = _ref4.menuOpen,
|
|
12868
|
+
submenuOpen = _ref4.submenuOpen,
|
|
12869
|
+
contextKey = _ref4.contextKey,
|
|
12870
|
+
loading = _ref4.loading,
|
|
12871
|
+
topLevelPath = _ref4.topLevelPath,
|
|
12872
|
+
onClickCallback = _ref4.onClickCallback,
|
|
12873
|
+
readyCallback = _ref4.readyCallback;
|
|
12867
12874
|
var icon = item.icon,
|
|
12868
12875
|
title = item.title,
|
|
12869
12876
|
href = item.href,
|
|
@@ -12871,24 +12878,16 @@ var NavigationItem = function NavigationItem(_ref5) {
|
|
|
12871
12878
|
isExternalLink = item.isExternalLink;
|
|
12872
12879
|
var isActive = topLevelPath === href;
|
|
12873
12880
|
var refSubmenu = useRef(null);
|
|
12874
|
-
var _useState = useState(0),
|
|
12875
|
-
submenuHeight = _useState[0],
|
|
12876
|
-
setSubmenuHeight = _useState[1];
|
|
12877
12881
|
var submenus = generateSubmenus(submenu, onClickCallback) || [];
|
|
12878
12882
|
var hasSubmenu = submenus.length > 0;
|
|
12879
12883
|
useEffect(function () {
|
|
12880
|
-
if (refSubmenu && refSubmenu.current && refSubmenu.current.clientHeight !== 0) {
|
|
12881
|
-
setSubmenuHeight(refSubmenu.current.clientHeight);
|
|
12882
|
-
}
|
|
12883
12884
|
if (readyCallback) {
|
|
12884
12885
|
readyCallback(contextKey);
|
|
12885
12886
|
}
|
|
12886
|
-
}, [refSubmenu,
|
|
12887
|
+
}, [refSubmenu, readyCallback, contextKey]);
|
|
12887
12888
|
return React__default.createElement(ContextContainer, {
|
|
12888
12889
|
open: submenuOpen,
|
|
12889
|
-
loading: loading ? 'true' : 'false'
|
|
12890
|
-
maxHeight: submenuHeight,
|
|
12891
|
-
minHeight: minHeight
|
|
12890
|
+
loading: loading ? 'true' : 'false'
|
|
12892
12891
|
}, React__default.createElement(ContextItem, Object.assign({}, {
|
|
12893
12892
|
title: title,
|
|
12894
12893
|
href: href,
|
|
@@ -12902,7 +12901,7 @@ var NavigationItem = function NavigationItem(_ref5) {
|
|
|
12902
12901
|
contextKey: contextKey
|
|
12903
12902
|
})), hasSubmenu ? React__default.createElement(SubmenuContainer, {
|
|
12904
12903
|
ref: refSubmenu
|
|
12905
|
-
}, submenus) : null);
|
|
12904
|
+
}, React__default.createElement(SubmenuContainerInner, null, submenus)) : null);
|
|
12906
12905
|
};
|
|
12907
12906
|
var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
12908
12907
|
if (!submenu) {
|
|
@@ -12956,7 +12955,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
12956
12955
|
return output;
|
|
12957
12956
|
};
|
|
12958
12957
|
|
|
12959
|
-
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$
|
|
12958
|
+
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$a;
|
|
12960
12959
|
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"])));
|
|
12961
12960
|
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"])));
|
|
12962
12961
|
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"])));
|
|
@@ -12967,14 +12966,14 @@ var MenuFooter = styled.div(_templateObject7$J || (_templateObject7$J = _taggedT
|
|
|
12967
12966
|
var FooterItemContainer = styled.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
12968
12967
|
var PushContainer = styled.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
|
|
12969
12968
|
var isPinned = _ref.isPinned;
|
|
12970
|
-
return css(_templateObject10$
|
|
12969
|
+
return css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
|
|
12971
12970
|
});
|
|
12972
12971
|
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) {
|
|
12973
12972
|
var open = _ref2.open,
|
|
12974
12973
|
desktopSize = _ref2.desktopSize;
|
|
12975
12974
|
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);
|
|
12976
12975
|
});
|
|
12977
|
-
var ContainerInner = styled.div(_templateObject14$
|
|
12976
|
+
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"])));
|
|
12978
12977
|
var MainMenu = function MainMenu(_ref3) {
|
|
12979
12978
|
var content = _ref3.content,
|
|
12980
12979
|
_ref3$home = _ref3.home,
|
|
@@ -13084,7 +13083,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13084
13083
|
})) : null))), document.body));
|
|
13085
13084
|
};
|
|
13086
13085
|
|
|
13087
|
-
var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$
|
|
13086
|
+
var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$n;
|
|
13088
13087
|
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"])));
|
|
13089
13088
|
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"])));
|
|
13090
13089
|
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"])));
|
|
@@ -13094,7 +13093,7 @@ var Container$11 = styled.div(_templateObject6$O || (_templateObject6$O = _tagge
|
|
|
13094
13093
|
var TitleBox = styled.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
13095
13094
|
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);
|
|
13096
13095
|
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"])));
|
|
13097
|
-
var CopyBox = styled.div(_templateObject10$
|
|
13096
|
+
var CopyBox = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n"])));
|
|
13098
13097
|
var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
13099
13098
|
var item = _ref.item,
|
|
13100
13099
|
onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
|
|
@@ -13178,7 +13177,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13178
13177
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13179
13178
|
};
|
|
13180
13179
|
|
|
13181
|
-
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$
|
|
13180
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$b;
|
|
13182
13181
|
var DrawerTop = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
|
|
13183
13182
|
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);
|
|
13184
13183
|
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"])));
|
|
@@ -13188,7 +13187,7 @@ var Logout = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTempl
|
|
|
13188
13187
|
var LinkMenu = styled.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
13189
13188
|
var LinkMenuItem = styled.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
13190
13189
|
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"])));
|
|
13191
|
-
var LinkMenuItemA = styled(Link)(_templateObject10$
|
|
13190
|
+
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) {
|
|
13192
13191
|
var isActive = _ref.isActive;
|
|
13193
13192
|
return isActive && css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
|
|
13194
13193
|
});
|
|
@@ -13197,7 +13196,7 @@ var FooterMeta = styled.div(_templateObject12$f || (_templateObject12$f = _tagge
|
|
|
13197
13196
|
return icon !== '' ? '31px;' : '21px;';
|
|
13198
13197
|
});
|
|
13199
13198
|
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"])));
|
|
13200
|
-
var FooterText = styled.div(_templateObject14$
|
|
13199
|
+
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) {
|
|
13201
13200
|
var icon = _ref3.icon;
|
|
13202
13201
|
return icon !== '' ? '136px;' : '164px;';
|
|
13203
13202
|
});
|
|
@@ -13361,7 +13360,7 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13361
13360
|
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')));
|
|
13362
13361
|
};
|
|
13363
13362
|
|
|
13364
|
-
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$
|
|
13363
|
+
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g;
|
|
13365
13364
|
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"])));
|
|
13366
13365
|
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"])));
|
|
13367
13366
|
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"])));
|
|
@@ -13375,7 +13374,7 @@ var DrawerToggle = styled.button.attrs({
|
|
|
13375
13374
|
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);
|
|
13376
13375
|
});
|
|
13377
13376
|
var DrawerPortalWrapper = styled.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose([""])));
|
|
13378
|
-
var Drawer = styled.div(_templateObject10$
|
|
13377
|
+
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) {
|
|
13379
13378
|
var baseWidth = _ref2.baseWidth;
|
|
13380
13379
|
return baseWidth ? baseWidth : "200px";
|
|
13381
13380
|
}, function (_ref3) {
|