scorer-ui-kit 2.6.6 → 2.6.7
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/README.md +3 -0
- package/dist/Form/atoms/SelectField.d.ts +3 -0
- package/dist/index.js +153 -144
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +153 -144
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -1560,16 +1560,16 @@ 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-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"])));
|
|
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 /* Input Icons */\n --input-lead-icon: var(--grey-12);\n --input-disabled-lead-icon: var(--grey-10);\n\n /* Checkboxes and Radio Buttons */\n --input-toggle-icon-color: var(--white-12);\n \n --input-toggle-unchecked-border-color: var(--grey-8);\n --input-toggle-unchecked-background-color: transparent;\n \n --input-toggle-checked-border-color: var(--primary-9);\n --input-toggle-checked-background-color: var(--primary-9);\n \n \n --input-toggle-unchecked-hover-border-color: var(--primary-9);\n --input-toggle-unchecked-hover-background-color: transparent;\n \n --input-toggle-checked-hover-border-color: var(--primary-7);\n --input-toggle-checked-hover-background-color: var(--primary-7);\n \n \n --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n --input-toggle-unchecked-disabled-background-color: transparent;\n\n --input-toggle-checked-disabled-border-color: var(--grey-7);\n --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n \n --input-toggle-intermediate-border-color: var(--primary-11);\n --input-toggle-intermediate-background-color: var(--primary-11);\n\n --input-toggle-intermediate-hover-border-color: var(--primary-11);\n --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n /* Labels */\n --input-label: var(--grey-11);\n --input-label-hover: var(--primary-8);\n --input-label-active: var(--grey-12);\n\n }\n\n /* Filters */\n .light-theme, .dark-theme {\n --filter-button-text-color: var(--grey-11);\n --filter-button-icon-color: var(--grey-10);\n --filter-button-background-color: var(--grey-2);\n --filter-button-stroke-color: var(--grey-a5);\n --filter-button-shadow-color: var(--primary-a3);\n\n --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n --filter-dropdown-background-color-fallback: var(--grey-3);\n --filter-dropdown-accent: var(--primary-a9); \n\n }\n\n .dark-theme {\n --filter-button-shadow-color: var(--black-a8);\n }\n\n /* Buttons */\n .light-theme, .dark-theme {\n --button-background-color: var(--primary-9);\n --button-border-color: var(--primary-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-primary-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--primary-a3);\n --button-loading-area-background-color: var(--primary-a7);\n --button-loading-area-divider-color: var(--primary-a8);\n\n --button-hover-background-color: var(--primary-8);\n --button-hover-border-color: var(--primary-a6);\n --button-hover-inner-shadow-color: transparent;\n --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n --button-hover-text-color: var(--white-1);\n --button-hover-divider-color: var(--primary-a3);\n --button-hover-icon-area-background-color: var(--primary-a3);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n --button-active-divider-color: var(--primary-a3);\n --button-active-icon-area-background-color: var(--primary-a3);\n\n --button-gradient-start: var(--primary-gradient-start);\n --button-gradient-end: var(--primary-gradient-end);\n\n .button-design-secondary {\n --button-background-color: var(--grey-9);\n --button-border-color: var(--grey-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-secondary-default);\n --button-text-color: var(--grey-12);\n --button-divider-color: var(--grey-a3);\n \n --button-loading-area-background-color: var(--grey-a4);\n --button-loading-area-divider-color: var(--grey-a3);\n\n --button-hover-background-color: var(--grey-8);\n --button-hover-border-color: var(--grey-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--secondary-gradient-start);\n --button-gradient-end: var(--secondary-gradient-end);\n }\n\n .button-design-danger, .button-design-warning {\n --button-background-color: var(--warning-9);\n --button-border-color: var(--warning-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-warning-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--warning-9);\n\n --button-loading-area-background-color: var(--warning-a7);\n --button-loading-area-divider-color: var(--warning-a9);\n\n --button-hover-background-color: var(--warning-8);\n --button-hover-border-color: var(--warning-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--warning-gradient-start);\n --button-gradient-end: var(--warning-gradient-end);\n }\n\n }\n\n"])));
|
|
1564
1564
|
|
|
1565
1565
|
var _templateObject$3;
|
|
1566
|
-
var ThemeVariables = createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --input-height: 40px;\n --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);
|
|
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-compact-height: 32px;\n --input-required-dot-display: inline-block;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n\n --input-box-shadow-x: 0;\n --input-box-shadow-y: 0;\n --input-box-shadow-blur: 0;\n --input-box-shadow-spread: 0;\n\n --input-focused-box-shadow-x: 0;\n --input-focused-box-shadow-y: 3px;\n --input-focused-box-shadow-blur: 3px;\n --input-focused-box-shadow-spread: 0;\n\n }\n\n .button-size-xsmall {\n --button-font-size: 12px;\n --button-height: 20px;\n --button-h-padding: 4px;\n --button-icon-size: 10px;\n --button-icon-h-padding: 8px;\n }\n\n .button-size-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .button-size-large {\n --button-font-size: 16px;\n --button-height: 40px;\n --button-h-padding: 8px;\n --button-icon-size: 16px;\n --button-icon-h-padding: 8px;\n }\n\n \n\n .split-button-primary {\n --border-color: var(--primary-9);\n --border-active-color: var(--primary-11);\n --toggle-icon-border: var(--primary-9);\n --gradient-1: #72C3EE;\n --gradient-2: #5CACEE;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--primary-a3);\n --button-active-bg: var(--primary-10);\n --toggle-icon-hover-bg: var(--white-a7);\n --toggle-icon-active-bg: var(--black-a6);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-secondary {\n --border-color: var(--grey-7);\n --border-active-color: var(--grey-7);\n --toggle-icon-border: var(--grey-6);\n --gradient-1: #2E3135;\n --gradient-2: #363A3F;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--grey-12);\n --text-disabled-color: var(--grey-a11);\n --button-hover-bg: var(--grey-a6);\n --button-active-bg: var(--grey-a3);\n --toggle-icon-hover-bg: var(--grey-a6);\n --toggle-icon-active-bg: var(--grey-a3);\n --toggle-icon: var(--grey-12);\n --toggle-icon-active: var(--grey-a11);\n --toggle-icon-disabled: var(--grey-10);\n }\n\n .split-button-danger {\n --border-color: var(--warning-10);\n --border-active-color: var(--warning-10);\n --toggle-icon-border: var(--warning-9);\n --gradient-1: #D16565;\n --gradient-2: #E76F6F;\n --button-lift-default-color: rgba(255, 113, 113, 0.47);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--warning-a7);\n --button-active-bg: var(--warning-8);\n --toggle-icon-hover-bg: var(--warning-a7);\n --toggle-icon-active-bg: var(--warning-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-custom {\n --border-color: var(--info-10);\n --border-active-color: var(--info-10);\n --toggle-icon-border: var(--info-9);\n --gradient-1: var(--info-10);\n --gradient-2: var(--info-9);\n --button-lift-default-color: var(--info-a3);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--info-a7);\n --button-active-bg: var(--info-8);\n --toggle-icon-hover-bg: var(--info-a7);\n --toggle-icon-active-bg: var(--info-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-size-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .split-button-size-large {\n --button-font-size: 16px;\n --button-height: 40px;\n --button-h-padding: 8px;\n --button-icon-size: 16px;\n --button-icon-h-padding: 8px;\n }\n\n"])), layoutVariables, animationVariables, colorVariables);
|
|
1567
1567
|
|
|
1568
1568
|
var _templateObject$4;
|
|
1569
1569
|
var BaseStyles = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n text-rendering: geometricPrecision; \n }\n body, html , #root {\n min-width: 100%;\n min-height: 100vh;\n margin: 0;\n }\n\n body {\n font-family: var(--font-ui);\n color: var(--grey-11);\n background: var(--main-background-gradient);\n background-attachment: fixed;\n }\n \n"])));
|
|
1570
1570
|
|
|
1571
1571
|
var _templateObject$5, _templateObject2, _templateObject3;
|
|
1572
|
-
var wrapperCss = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n }\n }\n"])));
|
|
1572
|
+
var wrapperCss = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n \n line-height: 0;\n\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n }\n"])));
|
|
1573
1573
|
var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1574
1574
|
var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1575
1575
|
var Icon = function Icon(_ref) {
|
|
@@ -2373,8 +2373,8 @@ var Label = function Label(_ref5) {
|
|
|
2373
2373
|
|
|
2374
2374
|
var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
|
|
2375
2375
|
var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$5, _templateObject7$5;
|
|
2376
|
-
var StyledInput$1 = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-data);\n line-height: var(--
|
|
2377
|
-
var InputContainer$1 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n display: flex;\n height: var(--
|
|
2376
|
+
var StyledInput$1 = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-data);\n line-height: var(--input-compact-height);\n\n font-size: 14px;\n flex: 1;\n color: var(--input-color-default);\n width: 100%;\n border: none;\n background-color: transparent;\n box-sizing: border-box;\n outline: none;\n \n &::placeholder {\n color: var(--input-color-placeholder);\n font-style: italic;\n }\n\n &:disabled {\n cursor: not-allowed;\n color: var(--input-color-disabled);\n }\n"])), removeAutoFillStyle);
|
|
2377
|
+
var InputContainer$1 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n display: flex;\n height: var(--input-compact-height);\n padding: 0 8px;\n align-items: center;\n gap: 8px;\n position: relative;\n border-radius: 3px;\n \n ", ";\n\n ", "\n\n"])), function (_ref) {
|
|
2378
2378
|
var fieldState = _ref.fieldState;
|
|
2379
2379
|
return css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n transition: \n border var(--speed-normal) var(--easing-primary-out),\n background-color var(--speed-normal) var(--easing-primary-out);\n "])), fieldState, fieldState);
|
|
2380
2380
|
}, function (_ref2) {
|
|
@@ -2876,55 +2876,41 @@ var TextArea = function TextArea(_ref3) {
|
|
|
2876
2876
|
}, props), children), showFeedback && fieldState && React__default.createElement(FeedbackContainer$1, null, React__default.createElement(FeedbackIcon$1, null, feedbackIcon(fieldState)), React__default.createElement(FeedbackMessage$1, null, feedbackMessage)));
|
|
2877
2877
|
};
|
|
2878
2878
|
|
|
2879
|
-
var _excluded$8 = ["placeholder", "label", "isCompact", "defaultValue", "changeCallback", "children"];
|
|
2880
|
-
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$7
|
|
2881
|
-
var SelectWrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n
|
|
2882
|
-
var
|
|
2883
|
-
var
|
|
2884
|
-
return
|
|
2885
|
-
}
|
|
2886
|
-
|
|
2887
|
-
|
|
2879
|
+
var _excluded$8 = ["fieldState", "placeholder", "label", "icon", "isCompact", "defaultValue", "changeCallback", "children"];
|
|
2880
|
+
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$7;
|
|
2881
|
+
var SelectWrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n"])));
|
|
2882
|
+
var OpenIcon = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n right: ", ";\n pointer-events: none;\n"])), function (_ref) {
|
|
2883
|
+
var isCompact = _ref.isCompact;
|
|
2884
|
+
return isCompact ? '14px' : '16px';
|
|
2885
|
+
});
|
|
2886
|
+
var SubjectIcon = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n"])), function (_ref2) {
|
|
2887
|
+
var isCompact = _ref2.isCompact;
|
|
2888
|
+
return isCompact ? '10px' : '12px';
|
|
2888
2889
|
});
|
|
2889
|
-
var
|
|
2890
|
-
var
|
|
2891
|
-
return
|
|
2890
|
+
var StyledSelect = styled.select(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n outline: none;\n border-radius: 3px;\n appearance: none;\n font-family: var(--font-data);\n height: var(--input-height);\n width: 100%;\n border-radius: 3px;\n color: var(--input-color-default);\n font-size: 14px;\n cursor: pointer;\n\n transition: \n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n ", ";\n\n\n ", ";\n\n &:disabled {\n opacity: 1;\n cursor: not-allowed;\n color: var(--input-disabled-color-default);\n border: 1px solid var(--input-disabled-border-color);\n background: var(--input-disabled-background-color);\n box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread) var(--input-disabled-shadow-color, transparent);\n }\n\n &::-ms-expand {\n display: none;\n }\n"])), function (_ref3) {
|
|
2891
|
+
var fieldState = _ref3.fieldState;
|
|
2892
|
+
return css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread) var(--input-", "-shadow-color, transparent);\n "])), fieldState, fieldState, fieldState);
|
|
2892
2893
|
}, function (_ref4) {
|
|
2893
|
-
var
|
|
2894
|
-
|
|
2895
|
-
},
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
return css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.form.input.value.normal);
|
|
2914
|
-
}, function (_ref10) {
|
|
2915
|
-
var typography = _ref10.theme.typography,
|
|
2916
|
-
isCompact = _ref10.isCompact;
|
|
2917
|
-
return isCompact && css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), typography.form.input.value.compact);
|
|
2918
|
-
});
|
|
2919
|
-
var SelectField = function SelectField(_ref11) {
|
|
2920
|
-
var placeholder = _ref11.placeholder,
|
|
2921
|
-
label = _ref11.label,
|
|
2922
|
-
isCompact = _ref11.isCompact,
|
|
2923
|
-
defaultValue = _ref11.defaultValue,
|
|
2924
|
-
_ref11$changeCallback = _ref11.changeCallback,
|
|
2925
|
-
changeCallback = _ref11$changeCallback === void 0 ? function () {} : _ref11$changeCallback,
|
|
2926
|
-
children = _ref11.children,
|
|
2927
|
-
props = _objectWithoutPropertiesLoose(_ref11, _excluded$8);
|
|
2894
|
+
var isCompact = _ref4.isCompact,
|
|
2895
|
+
withIcon = _ref4.withIcon;
|
|
2896
|
+
return isCompact ? css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n height: var(--input-compact-height);\n padding: 0 16px 1px ", ";\n\n ", "{\n right: 14px;\n }\n "])), withIcon ? '30px' : '8px', OpenIcon) : css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n height: var(--input-height);\n padding: 0 16px 1px ", ";\n "])), withIcon ? '36px' : '12px');
|
|
2897
|
+
});
|
|
2898
|
+
var Container$b = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n span {\n margin-bottom: 8px;\n }\n\n ", ";\n\n"])), function (_ref5) {
|
|
2899
|
+
var activePlaceholder = _ref5.activePlaceholder;
|
|
2900
|
+
return activePlaceholder && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n ", " {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n "])), StyledSelect);
|
|
2901
|
+
});
|
|
2902
|
+
var SelectField = function SelectField(_ref6) {
|
|
2903
|
+
var _ref6$fieldState = _ref6.fieldState,
|
|
2904
|
+
fieldState = _ref6$fieldState === void 0 ? 'default' : _ref6$fieldState,
|
|
2905
|
+
placeholder = _ref6.placeholder,
|
|
2906
|
+
label = _ref6.label,
|
|
2907
|
+
icon = _ref6.icon,
|
|
2908
|
+
isCompact = _ref6.isCompact,
|
|
2909
|
+
defaultValue = _ref6.defaultValue,
|
|
2910
|
+
_ref6$changeCallback = _ref6.changeCallback,
|
|
2911
|
+
changeCallback = _ref6$changeCallback === void 0 ? function () {} : _ref6$changeCallback,
|
|
2912
|
+
children = _ref6.children,
|
|
2913
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded$8);
|
|
2928
2914
|
var _useState = useState(!defaultValue ? true : false),
|
|
2929
2915
|
activePlaceholder = _useState[0],
|
|
2930
2916
|
setPlaceholderStatus = _useState[1];
|
|
@@ -2938,9 +2924,27 @@ var SelectField = function SelectField(_ref11) {
|
|
|
2938
2924
|
});
|
|
2939
2925
|
changeCallback(value);
|
|
2940
2926
|
}, [changeCallback]);
|
|
2927
|
+
var iconColor = useCallback(function () {
|
|
2928
|
+
if (props.disabled || fieldState === 'disabled') {
|
|
2929
|
+
return 'input-disabled-lead-icon';
|
|
2930
|
+
} else {
|
|
2931
|
+
return 'input-lead-icon';
|
|
2932
|
+
}
|
|
2933
|
+
}, [fieldState, props.disabled]);
|
|
2941
2934
|
var renderSelect = useCallback(function (htmlFor) {
|
|
2942
|
-
return React__default.createElement(SelectWrapper, null, React__default.createElement(
|
|
2935
|
+
return React__default.createElement(SelectWrapper, null, icon && React__default.createElement(SubjectIcon, Object.assign({}, {
|
|
2936
|
+
isCompact: isCompact
|
|
2937
|
+
}), React__default.createElement(Icon, {
|
|
2938
|
+
icon: icon,
|
|
2939
|
+
color: iconColor(),
|
|
2940
|
+
size: isCompact ? 12 : 12,
|
|
2941
|
+
weight: 'regular'
|
|
2942
|
+
})), React__default.createElement(StyledSelect, Object.assign({
|
|
2943
|
+
withIcon: icon ? true : false,
|
|
2943
2944
|
id: htmlFor
|
|
2945
|
+
}, {
|
|
2946
|
+
fieldState: fieldState,
|
|
2947
|
+
isCompact: isCompact
|
|
2944
2948
|
}, props, {
|
|
2945
2949
|
defaultValue: defaultValue ? defaultValue : '',
|
|
2946
2950
|
onChange: handleOnChange
|
|
@@ -2948,12 +2952,15 @@ var SelectField = function SelectField(_ref11) {
|
|
|
2948
2952
|
value: '',
|
|
2949
2953
|
disabled: true,
|
|
2950
2954
|
hidden: true
|
|
2951
|
-
}, placeholder), children), React__default.createElement(
|
|
2955
|
+
}, placeholder), children), React__default.createElement(OpenIcon, Object.assign({}, {
|
|
2956
|
+
isCompact: isCompact
|
|
2957
|
+
}), React__default.createElement(Icon, {
|
|
2952
2958
|
icon: 'Down',
|
|
2953
|
-
color:
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2959
|
+
color: iconColor(),
|
|
2960
|
+
weight: 'regular',
|
|
2961
|
+
size: isCompact ? 8 : 10
|
|
2962
|
+
})));
|
|
2963
|
+
}, [children, defaultValue, handleOnChange, placeholder, props, fieldState, icon, iconColor, isCompact]);
|
|
2957
2964
|
return React__default.createElement(Container$b, Object.assign({}, {
|
|
2958
2965
|
isCompact: isCompact,
|
|
2959
2966
|
activePlaceholder: activePlaceholder
|
|
@@ -3021,7 +3028,7 @@ var isNotNumber = function isNotNumber(value) {
|
|
|
3021
3028
|
};
|
|
3022
3029
|
|
|
3023
3030
|
var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
|
|
3024
|
-
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$
|
|
3031
|
+
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$3, _templateObject12$2;
|
|
3025
3032
|
var ThumbDiameter = 16;
|
|
3026
3033
|
var SliderWrapper = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
|
|
3027
3034
|
var theme = _ref.theme;
|
|
@@ -3052,8 +3059,8 @@ var MarkLabel = styled.span(_templateObject6$b || (_templateObject6$b = _taggedT
|
|
|
3052
3059
|
var alignment = _ref8.alignment;
|
|
3053
3060
|
return alignment === 'left' && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
|
|
3054
3061
|
});
|
|
3055
|
-
var ThumbWrapper = styled.div(_templateObject10$
|
|
3056
|
-
var Thumb = styled.span(_templateObject11$
|
|
3062
|
+
var ThumbWrapper = styled.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-right: 16px;\n left: 0;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n"])), ThumbDiameter);
|
|
3063
|
+
var Thumb = styled.span(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n width: ", "px;\n height: ", "px;\n border-radius: 8px;\n background-color: ", ";\n position: absolute;\n top: -7.5px;\n left: ", ";\n"])), ThumbDiameter, ThumbDiameter, function (_ref9) {
|
|
3057
3064
|
var theme = _ref9.theme,
|
|
3058
3065
|
bgColor = _ref9.bgColor;
|
|
3059
3066
|
return theme.colors.feedback[bgColor];
|
|
@@ -3061,7 +3068,7 @@ var Thumb = styled.span(_templateObject11$4 || (_templateObject11$4 = _taggedTem
|
|
|
3061
3068
|
var leftValue = _ref10.leftValue;
|
|
3062
3069
|
return leftValue + "%";
|
|
3063
3070
|
});
|
|
3064
|
-
var GhostThumb = styled(Thumb)(_templateObject12$
|
|
3071
|
+
var GhostThumb = styled(Thumb)(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n opacity: .5;\n"])));
|
|
3065
3072
|
var thumbLeftPosition = function thumbLeftPosition(value, min, max) {
|
|
3066
3073
|
return valueToPercent(value, min, max);
|
|
3067
3074
|
};
|
|
@@ -3766,7 +3773,7 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
|
|
|
3766
3773
|
return isDifferent;
|
|
3767
3774
|
};
|
|
3768
3775
|
|
|
3769
|
-
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$
|
|
3776
|
+
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
3770
3777
|
var CropLineStyle = css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
|
|
3771
3778
|
var TopLine = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
|
|
3772
3779
|
var RightLine = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
@@ -3779,13 +3786,13 @@ var PointN = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTempl
|
|
|
3779
3786
|
});
|
|
3780
3787
|
var PointNW = styled.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
|
|
3781
3788
|
var isResizable = _ref2.isResizable;
|
|
3782
|
-
return isResizable && css(_templateObject10$
|
|
3789
|
+
return isResizable && css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
|
|
3783
3790
|
});
|
|
3784
|
-
var PointNE = styled.div(_templateObject11$
|
|
3791
|
+
var PointNE = styled.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref3) {
|
|
3785
3792
|
var isResizable = _ref3.isResizable;
|
|
3786
|
-
return isResizable && css(_templateObject12$
|
|
3793
|
+
return isResizable && css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n cursor: ne-resize;\n "])));
|
|
3787
3794
|
});
|
|
3788
|
-
var PointE = styled.div(_templateObject13$
|
|
3795
|
+
var PointE = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n ", ";\n margin-top: -5px;\n top: 50%;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref4) {
|
|
3789
3796
|
var isResizable = _ref4.isResizable;
|
|
3790
3797
|
return isResizable && css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n cursor: e-resize;\n "])));
|
|
3791
3798
|
});
|
|
@@ -5031,7 +5038,7 @@ var StyledImage = styled.img(_templateObject6$i || (_templateObject6$i = _tagged
|
|
|
5031
5038
|
var theme = _ref4.theme,
|
|
5032
5039
|
isLoaded = _ref4.isLoaded,
|
|
5033
5040
|
hasModalLimits = _ref4.hasModalLimits;
|
|
5034
|
-
return css(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "1" : "0", hasModalLimits && css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
|
|
5041
|
+
return css(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n display: ", ";\n opacity: ", ";\n\n ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeOut, isLoaded ? "block" : "none", isLoaded ? "1" : "0", hasModalLimits && css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n max-height: calc(100vh - 100px);\n max-width: calc(100vw - 100px);\n "]))));
|
|
5035
5042
|
});
|
|
5036
5043
|
var MediaBox = function MediaBox(_ref5) {
|
|
5037
5044
|
var incomingSrc = _ref5.src,
|
|
@@ -5590,7 +5597,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5590
5597
|
})))));
|
|
5591
5598
|
};
|
|
5592
5599
|
|
|
5593
|
-
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$
|
|
5600
|
+
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
|
|
5594
5601
|
var initializeInterval = function initializeInterval(day) {
|
|
5595
5602
|
return {
|
|
5596
5603
|
start: set(day, {
|
|
@@ -5611,10 +5618,10 @@ var CalendarArea = styled.div(_templateObject6$k || (_templateObject6$k = _tagge
|
|
|
5611
5618
|
var CalendarHeader = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
|
|
5612
5619
|
var CurrentMonth = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n flex: 1;\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 20px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.5px;\n color: var(--primary-10);\n\n span {\n display: block;\n flex: 0;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.33px;\n }\n"])));
|
|
5613
5620
|
var IconWrap$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5614
|
-
var PaginateMonth = styled.button(_templateObject10$
|
|
5615
|
-
var CalBody = styled.div(_templateObject11$
|
|
5616
|
-
var CalRow = styled.div(_templateObject12$
|
|
5617
|
-
var CalHRow = styled(CalRow)(_templateObject13$
|
|
5621
|
+
var PaginateMonth = styled.button(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 72px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n ", "{\n svg * {\n transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n }\n }\n\n &:hover:enabled {\n color: var(--grey-12);\n\n ", "{\n [stroke]{\n stroke: var(--grey-12);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n"])), IconWrap$1, IconWrap$1);
|
|
5622
|
+
var CalBody = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5623
|
+
var CalRow = styled.div(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 40px);\n height: 40px;\n box-sizing: border-box;\n\n padding: 0 10px;\n"])));
|
|
5624
|
+
var CalHRow = styled(CalRow)(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
|
|
5618
5625
|
var CalCell = styled.button(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-12);\n font-family: var(--font-data);\n"])), resetButtonStyles);
|
|
5619
5626
|
var CalHCell = styled(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--grey-a11);\n"])));
|
|
5620
5627
|
var CalCellB = styled(CalCell)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: relative;\n text-align: center;\n font-size: 14px;\n font-weight: 400;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n &:disabled {\n color: var(--grey-6);\n cursor: not-allowed;\n\n ", "\n\n ", ";\n }\n\n"])), function (_ref) {
|
|
@@ -5942,7 +5949,7 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
|
5942
5949
|
};
|
|
5943
5950
|
|
|
5944
5951
|
var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
|
|
5945
|
-
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$
|
|
5952
|
+
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$8;
|
|
5946
5953
|
var LeftIconWrapper$1 = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0 6px;\n"])), function (_ref) {
|
|
5947
5954
|
var isSortAscending = _ref.isSortAscending;
|
|
5948
5955
|
return isSortAscending && css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
@@ -5970,7 +5977,7 @@ var StyledButton$4 = styled.button(_templateObject5$p || (_templateObject5$p = _
|
|
|
5970
5977
|
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);
|
|
5971
5978
|
});
|
|
5972
5979
|
var InnerContainer$3 = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
5973
|
-
var ButtonText = styled.div(_templateObject10$
|
|
5980
|
+
var ButtonText = styled.div(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose([""])));
|
|
5974
5981
|
var FilterButton = function FilterButton(_ref8) {
|
|
5975
5982
|
var icon = _ref8.icon,
|
|
5976
5983
|
_ref8$hasFlipArrow = _ref8.hasFlipArrow,
|
|
@@ -6007,7 +6014,7 @@ var FilterButton = function FilterButton(_ref8) {
|
|
|
6007
6014
|
};
|
|
6008
6015
|
|
|
6009
6016
|
var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
|
|
6010
|
-
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$
|
|
6017
|
+
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$9;
|
|
6011
6018
|
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"])));
|
|
6012
6019
|
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"])));
|
|
6013
6020
|
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"])));
|
|
@@ -6017,7 +6024,7 @@ var FakeInnerRadio = styled.div(_templateObject6$m || (_templateObject6$m = _tag
|
|
|
6017
6024
|
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) {
|
|
6018
6025
|
var selected = _ref.selected,
|
|
6019
6026
|
disabled = _ref.disabled;
|
|
6020
|
-
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$
|
|
6027
|
+
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$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
|
|
6021
6028
|
});
|
|
6022
6029
|
var FilterOption = function FilterOption(_ref2) {
|
|
6023
6030
|
var title = _ref2.title,
|
|
@@ -6051,7 +6058,7 @@ var Container$r = styled.div(_templateObject2$D || (_templateObject2$D = _tagged
|
|
|
6051
6058
|
disabled = _ref.disabled,
|
|
6052
6059
|
noBackground = _ref.noBackground,
|
|
6053
6060
|
width = _ref.width;
|
|
6054
|
-
return css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n \n transition: all var(--speed-normal) var(--easing-primary-in);\n gap: 6px;\n height: var(--
|
|
6061
|
+
return css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n \n transition: all var(--speed-normal) var(--easing-primary-in);\n gap: 6px;\n height: var(--input-compact-height);\n padding: 0;\n align-items: center;\n display: flex;\n border-radius: 3px;\n\n ", ";\n\n ", ";\n\n ", ";\n\n background-color: ", ";\n \n &:focus-within {\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 9px 0px ", ";\n }\n\n "])), hasBorder && css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n padding: 0 8px;\n border: 1px solid var(--filter-button-stroke-color);\n box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n &:hover {\n border: var(--primary-7) 1px solid;\n box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n }\n ", "{\n padding: 0;\n }\n "])), IconContainer$1), disabled && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
|
|
6055
6062
|
}, IconWrapper);
|
|
6056
6063
|
var CrossButton = styled.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n ", ";\n flex-shrink: 0;\n flex-grow: 0;\n flex-basis: auto;\n width: 26px;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), resetButtonStyles, IconWrapper);
|
|
6057
6064
|
var StyledInput$2 = styled.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n color: var(--grey-12);\n \n &::placeholder {\n ", ";\n color: var(--grey-11);\n font-style: italic;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n font-size: 12px;\n border: none;\n height: 100%;\n width: 100%;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 3px;\n outline: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
|
|
@@ -6531,7 +6538,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6531
6538
|
}))))));
|
|
6532
6539
|
};
|
|
6533
6540
|
|
|
6534
|
-
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$
|
|
6541
|
+
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$f, _templateObject10$a, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
|
|
6535
6542
|
var Container$w = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6536
6543
|
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"])));
|
|
6537
6544
|
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) {
|
|
@@ -6551,7 +6558,7 @@ var ContentBox$1 = styled.div(_templateObject8$l || (_templateObject8$l = _tagge
|
|
|
6551
6558
|
}, function (_ref5) {
|
|
6552
6559
|
var openState = _ref5.openState,
|
|
6553
6560
|
disabled = _ref5.disabled;
|
|
6554
|
-
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$
|
|
6561
|
+
return openState && css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
|
|
6555
6562
|
});
|
|
6556
6563
|
var ButtonWrapper$1 = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
6557
6564
|
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"])));
|
|
@@ -6702,7 +6709,7 @@ var FilterLayout = function FilterLayout(_ref6) {
|
|
|
6702
6709
|
}))))))));
|
|
6703
6710
|
};
|
|
6704
6711
|
|
|
6705
|
-
var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
|
|
6712
|
+
var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
|
|
6706
6713
|
var _templateObject$Q;
|
|
6707
6714
|
var MIN_WIDTH = 470;
|
|
6708
6715
|
var MIN_HEIGHT = 360;
|
|
@@ -6720,6 +6727,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
6720
6727
|
timeZoneTitle = _ref.timeZoneTitle,
|
|
6721
6728
|
timeZoneValueTitle = _ref.timeZoneValueTitle,
|
|
6722
6729
|
lang = _ref.lang,
|
|
6730
|
+
availableRange = _ref.availableRange,
|
|
6723
6731
|
_ref$onCloseCallback = _ref.onCloseCallback,
|
|
6724
6732
|
onCloseCallback = _ref$onCloseCallback === void 0 ? function () {} : _ref$onCloseCallback,
|
|
6725
6733
|
_ref$onUpdateCallback = _ref.onUpdateCallback,
|
|
@@ -6783,7 +6791,8 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
6783
6791
|
dateTimeTextLower: dateTimeTextLower,
|
|
6784
6792
|
timeZoneTitle: timeZoneTitle,
|
|
6785
6793
|
timeZoneValueTitle: timeZoneValueTitle,
|
|
6786
|
-
lang: lang
|
|
6794
|
+
lang: lang,
|
|
6795
|
+
availableRange: availableRange
|
|
6787
6796
|
}, {
|
|
6788
6797
|
updateCallback: handleUpdateCallback,
|
|
6789
6798
|
hasEmptyValue: true,
|
|
@@ -7436,7 +7445,7 @@ var StatusIcon = function StatusIcon(_ref3) {
|
|
|
7436
7445
|
}));
|
|
7437
7446
|
};
|
|
7438
7447
|
|
|
7439
|
-
var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$
|
|
7448
|
+
var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$B, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$g, _templateObject10$b, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
|
|
7440
7449
|
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"])));
|
|
7441
7450
|
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"])));
|
|
7442
7451
|
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) {
|
|
@@ -7466,16 +7475,16 @@ var HandleReactiveRing = styled.circle(_templateObject9$g || (_templateObject9$g
|
|
|
7466
7475
|
styling = _ref4.styling;
|
|
7467
7476
|
return theme.custom.lines[styling].handleReactiveRing.stroke;
|
|
7468
7477
|
});
|
|
7469
|
-
var HandleContrastLayer = styled.circle(_templateObject10$
|
|
7478
|
+
var HandleContrastLayer = styled.circle(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
|
|
7470
7479
|
var theme = _ref5.theme,
|
|
7471
7480
|
styling = _ref5.styling;
|
|
7472
7481
|
return theme.custom.lines[styling].handleContrastLayer.stroke;
|
|
7473
7482
|
});
|
|
7474
|
-
var HandleShadowLayer = styled.circle(_templateObject11$
|
|
7483
|
+
var HandleShadowLayer = styled.circle(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: url(#", ");\n"])), function (props) {
|
|
7475
7484
|
return props.fillID;
|
|
7476
7485
|
});
|
|
7477
|
-
var GrabHandleIndexGroup = styled.g(_templateObject12$
|
|
7478
|
-
return props.showIndex && css(_templateObject13$
|
|
7486
|
+
var GrabHandleIndexGroup = styled.g(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
|
|
7487
|
+
return props.showIndex && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n "])));
|
|
7479
7488
|
});
|
|
7480
7489
|
var StopStart = styled.stop(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n stop-color: ", ";\n"])), function (_ref6) {
|
|
7481
7490
|
var theme = _ref6.theme,
|
|
@@ -7669,7 +7678,7 @@ var HandleUnit = function HandleUnit(props) {
|
|
|
7669
7678
|
}, index + pointIndexOffset))));
|
|
7670
7679
|
};
|
|
7671
7680
|
|
|
7672
|
-
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$
|
|
7681
|
+
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$h, _templateObject10$c, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$5;
|
|
7673
7682
|
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) {
|
|
7674
7683
|
var theme = _ref.theme,
|
|
7675
7684
|
styling = _ref.styling;
|
|
@@ -7713,15 +7722,15 @@ var LabelText$2 = styled.text(_templateObject8$o || (_templateObject8$o = _tagge
|
|
|
7713
7722
|
var showLabelShadow = _ref9.showLabelShadow;
|
|
7714
7723
|
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 "])));
|
|
7715
7724
|
});
|
|
7716
|
-
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$
|
|
7725
|
+
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
|
|
7717
7726
|
var theme = _ref10.theme,
|
|
7718
7727
|
styling = _ref10.styling;
|
|
7719
7728
|
return theme.custom.lines[styling].grabHandleContrast.stroke;
|
|
7720
7729
|
});
|
|
7721
|
-
var GrabHandleGroup = styled.g(_templateObject11$
|
|
7722
|
-
return props.showIndex && css(_templateObject12$
|
|
7730
|
+
var GrabHandleGroup = styled.g(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
|
|
7731
|
+
return props.showIndex && css(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
|
|
7723
7732
|
});
|
|
7724
|
-
var DMCircle = styled.circle(_templateObject13$
|
|
7733
|
+
var DMCircle = styled.circle(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
|
|
7725
7734
|
var IconFormat = styled(Icon)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
|
|
7726
7735
|
var LineUnit = function LineUnit(props) {
|
|
7727
7736
|
var x1 = props.x1,
|
|
@@ -9500,7 +9509,7 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
|
9500
9509
|
});
|
|
9501
9510
|
};
|
|
9502
9511
|
|
|
9503
|
-
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$
|
|
9512
|
+
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$i, _templateObject10$d, _templateObject11$9;
|
|
9504
9513
|
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) {
|
|
9505
9514
|
var theme = _ref.theme;
|
|
9506
9515
|
return theme && css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
@@ -9524,11 +9533,11 @@ var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTe
|
|
|
9524
9533
|
var theme = _ref5.theme;
|
|
9525
9534
|
return css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
9526
9535
|
});
|
|
9527
|
-
var StatusBlip = styled.div(_templateObject10$
|
|
9536
|
+
var StatusBlip = styled.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
|
|
9528
9537
|
var _ref6$status = _ref6.status,
|
|
9529
9538
|
status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
|
|
9530
9539
|
colors = _ref6.theme.colors;
|
|
9531
|
-
return css(_templateObject11$
|
|
9540
|
+
return css(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n background: ", ";\n "])), colors.status[status]);
|
|
9532
9541
|
});
|
|
9533
9542
|
var TypeTableCell = function TypeTableCell(_ref7) {
|
|
9534
9543
|
var _ref7$showUnit = _ref7.showUnit,
|
|
@@ -9683,7 +9692,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
9683
9692
|
}), header);
|
|
9684
9693
|
};
|
|
9685
9694
|
|
|
9686
|
-
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$
|
|
9695
|
+
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N, _templateObject5$H, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$j, _templateObject10$e, _templateObject11$a, _templateObject12$8, _templateObject13$7, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
|
|
9687
9696
|
var HeaderRow = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
9688
9697
|
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) {
|
|
9689
9698
|
return p.theme.fontFamily.ui;
|
|
@@ -9708,12 +9717,12 @@ var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedT
|
|
|
9708
9717
|
});
|
|
9709
9718
|
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) {
|
|
9710
9719
|
var alignment = _ref5.alignment;
|
|
9711
|
-
return alignment && css(_templateObject10$
|
|
9720
|
+
return alignment && css(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
|
|
9712
9721
|
});
|
|
9713
|
-
var GroupTitle = styled.div(_templateObject11$
|
|
9714
|
-
var Title$4 = styled.div(_templateObject12$
|
|
9722
|
+
var GroupTitle = styled.div(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n margin-bottom: 4px;\n"])));
|
|
9723
|
+
var Title$4 = styled.div(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
|
|
9715
9724
|
var typography = _ref6.theme.typography;
|
|
9716
|
-
return css(_templateObject13$
|
|
9725
|
+
return css(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), typography.tables.groupName);
|
|
9717
9726
|
});
|
|
9718
9727
|
var EmptyTitle = styled.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n height: 20px;\n"])));
|
|
9719
9728
|
var MiddleLine = styled.div(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: 1px;\n flex: 1;\n ", ";\n"])), function (_ref7) {
|
|
@@ -9940,7 +9949,7 @@ var TypeTable = function TypeTable(_ref4) {
|
|
|
9940
9949
|
};
|
|
9941
9950
|
|
|
9942
9951
|
var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
9943
|
-
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$
|
|
9952
|
+
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$f;
|
|
9944
9953
|
var Container$M = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
9945
9954
|
var theme = _ref.theme;
|
|
9946
9955
|
return css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
@@ -9955,7 +9964,7 @@ var TextContainer$3 = styled.div(_templateObject8$r || (_templateObject8$r = _ta
|
|
|
9955
9964
|
return alignment === 'center' && css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
9956
9965
|
}, function (_ref3) {
|
|
9957
9966
|
var alignment = _ref3.alignment;
|
|
9958
|
-
return alignment === 'right' && css(_templateObject10$
|
|
9967
|
+
return alignment === 'right' && css(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
|
|
9959
9968
|
}, StyledIconButton$1, StyledIconButton$1);
|
|
9960
9969
|
var EditCell = function EditCell(_ref4) {
|
|
9961
9970
|
var _ref4$type = _ref4.type,
|
|
@@ -11879,7 +11888,7 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
11879
11888
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
11880
11889
|
};
|
|
11881
11890
|
|
|
11882
|
-
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$
|
|
11891
|
+
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$m, _templateObject10$g;
|
|
11883
11892
|
var WIDTH_PER_NUMBER = 12;
|
|
11884
11893
|
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"])));
|
|
11885
11894
|
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"])));
|
|
@@ -11908,7 +11917,7 @@ var ArrowButton = styled.button(_templateObject9$m || (_templateObject9$m = _tag
|
|
|
11908
11917
|
var active = _ref6.active;
|
|
11909
11918
|
return active ? '1' : '0.5';
|
|
11910
11919
|
});
|
|
11911
|
-
var ItemsSelectWrapper = styled.div(_templateObject10$
|
|
11920
|
+
var ItemsSelectWrapper = styled.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n ", " {\n width: ", ";\n }\n margin-right: 35px;\n\n ", " {\n margin-bottom: 0;\n }\n"])), SelectWrapper, function (_ref7) {
|
|
11912
11921
|
var width = _ref7.width;
|
|
11913
11922
|
return width ? width : "60px";
|
|
11914
11923
|
}, StyledLabel);
|
|
@@ -12167,7 +12176,7 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
|
12167
12176
|
}, rightButtonText)));
|
|
12168
12177
|
};
|
|
12169
12178
|
|
|
12170
|
-
var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$
|
|
12179
|
+
var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$h, _templateObject11$b, _templateObject12$9, _templateObject13$8;
|
|
12171
12180
|
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"])));
|
|
12172
12181
|
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"])));
|
|
12173
12182
|
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"])));
|
|
@@ -12181,10 +12190,10 @@ var ExtraActionIcon = styled.div(_templateObject6$H || (_templateObject6$H = _ta
|
|
|
12181
12190
|
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);
|
|
12182
12191
|
var Breadcrumbs = styled.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
12183
12192
|
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"])));
|
|
12184
|
-
var BreadcrumbIcon = styled.div(_templateObject10$
|
|
12185
|
-
var HomeIcon = styled(BreadcrumbIcon)(_templateObject11$
|
|
12186
|
-
var BreadcrumbLink = styled(Link)(_templateObject12$
|
|
12187
|
-
var RightArea = styled.div(_templateObject13$
|
|
12193
|
+
var BreadcrumbIcon = styled.div(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
12194
|
+
var HomeIcon = styled(BreadcrumbIcon)(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n padding-bottom: 1px;\n svg path {\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n"])));
|
|
12195
|
+
var BreadcrumbLink = styled(Link)(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n transition: color var(--speed-normal) var(--easing-primary-out);\n\n &:hover {\n color: var(--grey-12);\n ", " svg {\n path {\n stroke: var(--grey-12);\n }\n }\n }\n"])), HomeIcon);
|
|
12196
|
+
var RightArea = styled.div(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
|
|
12188
12197
|
var UtilityHeader = function UtilityHeader(_ref2) {
|
|
12189
12198
|
var _ref2$showBreadcrumbs = _ref2.showBreadcrumbs,
|
|
12190
12199
|
showBreadcrumbs = _ref2$showBreadcrumbs === void 0 ? true : _ref2$showBreadcrumbs,
|
|
@@ -12377,7 +12386,7 @@ var ResizeLine = function ResizeLine(_ref4) {
|
|
|
12377
12386
|
}))), React__default.createElement(Line, null)));
|
|
12378
12387
|
};
|
|
12379
12388
|
|
|
12380
|
-
var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$
|
|
12389
|
+
var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$i, _templateObject11$c, _templateObject12$a, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
|
|
12381
12390
|
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"])));
|
|
12382
12391
|
var MainArea = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
12383
12392
|
var $layout = _ref.$layout,
|
|
@@ -12403,19 +12412,19 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
|
|
|
12403
12412
|
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;
|
|
12404
12413
|
}, function (_ref6) {
|
|
12405
12414
|
var $collapseState = _ref6.$collapseState;
|
|
12406
|
-
return $collapseState === 'collapsed' ? css(_templateObject10$
|
|
12415
|
+
return $collapseState === 'collapsed' ? css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
12407
12416
|
}, function (_ref7) {
|
|
12408
12417
|
var $layout = _ref7.$layout,
|
|
12409
12418
|
$collapseState = _ref7.$collapseState,
|
|
12410
12419
|
$minDimension = _ref7.$minDimension;
|
|
12411
|
-
return $collapseState === 'peeking' ? css(_templateObject11$
|
|
12420
|
+
return $collapseState === 'peeking' ? css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
12412
12421
|
}, function (_ref8) {
|
|
12413
12422
|
var $layout = _ref8.$layout,
|
|
12414
12423
|
$collapseState = _ref8.$collapseState,
|
|
12415
12424
|
$minDimension = _ref8.$minDimension;
|
|
12416
|
-
return $collapseState === 'opening' ? css(_templateObject12$
|
|
12425
|
+
return $collapseState === 'opening' ? css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", "{\n min-width: ", "px;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
12417
12426
|
});
|
|
12418
|
-
var DragContainer = styled.div(_templateObject13$
|
|
12427
|
+
var DragContainer = styled.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n flex: 0 0 ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: col-resize;\n \n > div {\n transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n }\n\n &:hover > div {\n opacity: 1;\n }\n\n ", "\n\n"])), function (_ref9) {
|
|
12419
12428
|
var $size = _ref9.$size;
|
|
12420
12429
|
return $size;
|
|
12421
12430
|
}, function (_ref10) {
|
|
@@ -12732,7 +12741,7 @@ var ContentArea = styled.div(_templateObject6$K || (_templateObject6$K = _tagged
|
|
|
12732
12741
|
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');
|
|
12733
12742
|
});
|
|
12734
12743
|
|
|
12735
|
-
var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$
|
|
12744
|
+
var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$a, _templateObject14$8, _templateObject15$6;
|
|
12736
12745
|
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) {
|
|
12737
12746
|
var compact = _ref.compact;
|
|
12738
12747
|
return compact && css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
@@ -12746,14 +12755,14 @@ var ContextWrapper = styled.div(_templateObject8$y || (_templateObject8$y = _tag
|
|
|
12746
12755
|
var $menuOpen = _ref2.$menuOpen;
|
|
12747
12756
|
return $menuOpen && css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
12748
12757
|
}, ContextIcon$1, IconWrapper);
|
|
12749
|
-
var ContextActionA = styled(Link)(_templateObject10$
|
|
12758
|
+
var ContextActionA = styled(Link)(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
|
|
12750
12759
|
var $menuOpen = _ref3.$menuOpen;
|
|
12751
|
-
return $menuOpen && css(_templateObject11$
|
|
12760
|
+
return $menuOpen && css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
12752
12761
|
}, ContextIcon$1, IconWrapper, function (_ref4) {
|
|
12753
12762
|
var $isActive = _ref4.$isActive;
|
|
12754
|
-
return $isActive && css(_templateObject12$
|
|
12763
|
+
return $isActive && css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n color: var(--grey-12);\n\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
|
|
12755
12764
|
});
|
|
12756
|
-
var ContextActionButton$1 = styled.button(_templateObject13$
|
|
12765
|
+
var ContextActionButton$1 = styled.button(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
|
|
12757
12766
|
var menuOpen = _ref5.menuOpen;
|
|
12758
12767
|
return menuOpen && css(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n\n ", "{\n opacity: 1;\n transition: opacity var(--speed-normal) var(--easing-primary-in-out) var(--speed-fast);\n }\n "])), ContextTitle, ContextIndicator);
|
|
12759
12768
|
}, ContextIcon$1, IconWrapper, function (_ref6) {
|
|
@@ -12931,7 +12940,7 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
12931
12940
|
};
|
|
12932
12941
|
};
|
|
12933
12942
|
|
|
12934
|
-
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$
|
|
12943
|
+
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$b;
|
|
12935
12944
|
var Submenu = styled.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
12936
12945
|
var SubmenuHeader = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
12937
12946
|
var SubmenuContainerInner = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
@@ -12941,15 +12950,15 @@ var ExternalIconWrapper$1 = styled.div(_templateObject6$M || (_templateObject6$M
|
|
|
12941
12950
|
var SubmenuItemAnchor = styled.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
12942
12951
|
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) {
|
|
12943
12952
|
var isActive = _ref.isActive;
|
|
12944
|
-
return css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$
|
|
12953
|
+
return css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
12945
12954
|
});
|
|
12946
|
-
var SubmenuContainer = styled.div(_templateObject11$
|
|
12947
|
-
var ContextContainer = styled.div(_templateObject12$
|
|
12955
|
+
var SubmenuContainer = styled.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
12956
|
+
var ContextContainer = styled.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
|
|
12948
12957
|
var mobileMenu = _ref2.mobileMenu;
|
|
12949
12958
|
return mobileMenu ? '30px' : '70px';
|
|
12950
12959
|
}, SubmenuContainer, function (_ref3) {
|
|
12951
12960
|
var open = _ref3.open;
|
|
12952
|
-
return open && css(_templateObject13$
|
|
12961
|
+
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);
|
|
12953
12962
|
});
|
|
12954
12963
|
var NavigationItem = function NavigationItem(_ref4) {
|
|
12955
12964
|
var item = _ref4.item,
|
|
@@ -13040,7 +13049,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
13040
13049
|
return output;
|
|
13041
13050
|
};
|
|
13042
13051
|
|
|
13043
|
-
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$
|
|
13052
|
+
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$c, _templateObject14$9;
|
|
13044
13053
|
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"])));
|
|
13045
13054
|
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"])));
|
|
13046
13055
|
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"])));
|
|
@@ -13051,12 +13060,12 @@ var MenuFooter = styled.div(_templateObject7$J || (_templateObject7$J = _taggedT
|
|
|
13051
13060
|
var FooterItemContainer = styled.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
13052
13061
|
var PushContainer = styled.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
|
|
13053
13062
|
var isPinned = _ref.isPinned;
|
|
13054
|
-
return css(_templateObject10$
|
|
13063
|
+
return css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
|
|
13055
13064
|
});
|
|
13056
|
-
var Container$10 = styled.div(_templateObject11$
|
|
13065
|
+
var Container$10 = styled.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref2) {
|
|
13057
13066
|
var open = _ref2.open,
|
|
13058
13067
|
desktopSize = _ref2.desktopSize;
|
|
13059
|
-
return css(_templateObject12$
|
|
13068
|
+
return css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
13060
13069
|
});
|
|
13061
13070
|
var ContainerInner = styled.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
13062
13071
|
var MainMenu = function MainMenu(_ref3) {
|
|
@@ -13156,7 +13165,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13156
13165
|
})) : null))), document.body));
|
|
13157
13166
|
};
|
|
13158
13167
|
|
|
13159
|
-
var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$
|
|
13168
|
+
var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$m;
|
|
13160
13169
|
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"])));
|
|
13161
13170
|
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"])));
|
|
13162
13171
|
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"])));
|
|
@@ -13166,7 +13175,7 @@ var Container$11 = styled.div(_templateObject6$O || (_templateObject6$O = _tagge
|
|
|
13166
13175
|
var TitleBox = styled.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
13167
13176
|
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);
|
|
13168
13177
|
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"])));
|
|
13169
|
-
var CopyBox = styled.div(_templateObject10$
|
|
13178
|
+
var CopyBox = styled.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n"])));
|
|
13170
13179
|
var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
13171
13180
|
var item = _ref.item,
|
|
13172
13181
|
onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
|
|
@@ -13250,7 +13259,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13250
13259
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13251
13260
|
};
|
|
13252
13261
|
|
|
13253
|
-
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$
|
|
13262
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$n, _templateObject11$g, _templateObject12$e, _templateObject13$d, _templateObject14$a;
|
|
13254
13263
|
var DrawerTop = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
|
|
13255
13264
|
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);
|
|
13256
13265
|
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"])));
|
|
@@ -13260,15 +13269,15 @@ var Logout = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTempl
|
|
|
13260
13269
|
var LinkMenu = styled.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
13261
13270
|
var LinkMenuItem = styled.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
13262
13271
|
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"])));
|
|
13263
|
-
var LinkMenuItemA = styled(Link)(_templateObject10$
|
|
13272
|
+
var LinkMenuItemA = styled(Link)(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 400;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
|
|
13264
13273
|
var isActive = _ref.isActive;
|
|
13265
|
-
return isActive && css(_templateObject11$
|
|
13274
|
+
return isActive && css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
|
|
13266
13275
|
});
|
|
13267
|
-
var FooterMeta = styled.div(_templateObject12$
|
|
13276
|
+
var FooterMeta = styled.div(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
|
|
13268
13277
|
var icon = _ref2.icon;
|
|
13269
13278
|
return icon !== '' ? '31px;' : '21px;';
|
|
13270
13279
|
});
|
|
13271
|
-
var NavigationContainer$1 = styled.div(_templateObject13$
|
|
13280
|
+
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"])));
|
|
13272
13281
|
var FooterText = styled.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref3) {
|
|
13273
13282
|
var icon = _ref3.icon;
|
|
13274
13283
|
return icon !== '' ? '136px;' : '164px;';
|
|
@@ -13433,7 +13442,7 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13433
13442
|
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')));
|
|
13434
13443
|
};
|
|
13435
13444
|
|
|
13436
|
-
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$
|
|
13445
|
+
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$e;
|
|
13437
13446
|
var CoreStyle = css(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 32px;\n padding: 8px;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n border-radius: 3px;\n\n font-family: Lato;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 85.714% */\n white-space: nowrap;\n\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
|
|
13438
13447
|
var ContainerStatic = styled.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13439
13448
|
var themeColor = _ref.themeColor;
|
|
@@ -13446,12 +13455,12 @@ var ContainerLinked = styled.div(_templateObject7$N || (_templateObject7$N = _ta
|
|
|
13446
13455
|
return themeColor ? css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13447
13456
|
}, function (_ref3) {
|
|
13448
13457
|
var themeColor = _ref3.themeColor;
|
|
13449
|
-
return themeColor ? css(_templateObject10$
|
|
13458
|
+
return themeColor ? css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n background-color: var(--", "-9);\n border: 2px solid var(--", "-9);\n color: var(--white-12);\n "])), themeColor, themeColor) : css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
|
|
13450
13459
|
});
|
|
13451
|
-
var Container$15 = styled.div(_templateObject12$
|
|
13460
|
+
var Container$15 = styled.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13452
13461
|
var ready = _ref4.ready,
|
|
13453
13462
|
minWidth = _ref4.minWidth;
|
|
13454
|
-
return css(_templateObject13$
|
|
13463
|
+
return css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n \n visibility: ", ";\n opacity: ", ";\n\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", ", ", "{\n /* Required to accurately measure container sizes and ensure hover doesn't resize. */\n ", ";\n }\n "])), ready ? 'visible' : 'hidden', ready ? '1' : '0', DefaultText, LinkText, ready && "min-width: " + minWidth + "px;");
|
|
13455
13464
|
});
|
|
13456
13465
|
var TopBarBadge = function TopBarBadge(_ref5) {
|
|
13457
13466
|
var text = _ref5.text,
|
|
@@ -13518,7 +13527,7 @@ var TopBarBadge = function TopBarBadge(_ref5) {
|
|
|
13518
13527
|
}), badgeComponent);
|
|
13519
13528
|
};
|
|
13520
13529
|
|
|
13521
|
-
var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$
|
|
13530
|
+
var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$f;
|
|
13522
13531
|
var Container$16 = styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
|
|
13523
13532
|
var RightArea$1 = styled.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13524
13533
|
var SearchBar = styled.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
@@ -13532,15 +13541,15 @@ var DrawerToggle = styled.button.attrs({
|
|
|
13532
13541
|
var isActive = _ref.isActive;
|
|
13533
13542
|
return isActive && css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
|
|
13534
13543
|
});
|
|
13535
|
-
var DrawerPortalWrapper = styled.div(_templateObject10$
|
|
13536
|
-
var Drawer = styled.div(_templateObject11$
|
|
13544
|
+
var DrawerPortalWrapper = styled.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose([""])));
|
|
13545
|
+
var Drawer = styled.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n \n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
|
|
13537
13546
|
var baseWidth = _ref2.baseWidth;
|
|
13538
13547
|
return baseWidth ? baseWidth : "200px";
|
|
13539
13548
|
}, function (_ref3) {
|
|
13540
13549
|
var isOpen = _ref3.isOpen;
|
|
13541
|
-
return isOpen && css(_templateObject12$
|
|
13550
|
+
return isOpen && css(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13542
13551
|
});
|
|
13543
|
-
var NotificationsContainer = styled.div(_templateObject13$
|
|
13552
|
+
var NotificationsContainer = styled.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13544
13553
|
var TopBar = function TopBar(_ref4) {
|
|
13545
13554
|
var _ref4$hasNotification = _ref4.hasNotifications,
|
|
13546
13555
|
hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
|