scorer-ui-kit 2.9.2 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Filters/FilterTypes.d.ts +2 -2
- package/dist/Filters/index.d.ts +11 -2
- package/dist/Filters/molecules/DatePicker.d.ts +4 -12
- package/dist/Filters/molecules/DropdownDatePicker.d.ts +6 -6
- package/dist/Filters/molecules/FiltersResults.d.ts +3 -3
- package/dist/Form/atoms/Button.d.ts +1 -0
- package/dist/Form/atoms/ButtonWithIcon.d.ts +0 -1
- package/dist/Form/atoms/ButtonWithLoading.d.ts +0 -1
- package/dist/Form/atoms/Switch.d.ts +2 -1
- package/dist/Form/index.d.ts +4 -3
- package/dist/helpers/index.d.ts +5 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +272 -242
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +272 -242
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1534,16 +1534,16 @@ var _templateObject$1;
|
|
|
1534
1534
|
var animationVariables = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n :root {\n\n --easing-primary-in-out: cubic-bezier(0.76, 0, 0.24, 1);\n --easing-primary-in: cubic-bezier(0.5, 0, 0.75, 0);\n --easing-primary-out: cubic-bezier(0.25, 1, 0.5, 1);\n \n --speed-faster: 0.085s;\n --speed-fast: 0.175s;\n --speed-normal: 0.35s;\n --speed-slow: 0.7s;\n --speed-slower: 1.4s;\n --speed-slowest: 2.8s;\n \n }\n"])));
|
|
1535
1535
|
|
|
1536
1536
|
var _templateObject$2;
|
|
1537
|
-
var colorVariables = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n .light-theme {\n --shadow-primary-default: var(--grey-a4);\n --shadow-primary-elevate: var(--primary-a5);\n\n --shadow-secondary-default: var(--grey-3);\n --shadow-secondary-elevate: var(--grey-a4);\n\n --shadow-warning-default: var(--grey-a4);\n --shadow-warning-elevate: var(--warning-a5);\n }\n\n .dark-theme {\n --shadow-primary-default: var(--primary-a2);\n --shadow-primary-elevate: var(--primary-a2);\n\n --shadow-secondary-default: var(--black-a8);\n --shadow-secondary-elevate: var(--primary-a4);\n\n --shadow-warning-default: var(--grey-a3);\n --shadow-warning-elevate: var(--warning-a7);\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n /* Spinner */\n --spinner-primary-base: var(--primary-6);\n --spinner-primary-top: var(--white-1);\n \n --spinner-secondary-base: var(--grey-8);\n --spinner-secondary-top: var(--white-1);\n \n --spinner-simple-base: var(--grey-a8);\n --spinner-simple-top: var(--white-1);\n \n --spinner-warning-base: var(--warning-8);\n --spinner-warning-top: var(--white-1);\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 /* Typography */\n .light-theme, .dark-theme {\n --label-color: var(--grey-11);\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 /* Switches */\n .light-theme, .dark-theme {\n // Background\n --switch-default-off-background: var(--grey-4);\n --switch-default-on-background: var(--primary-9);\n --switch-default-danger-background: var(--warning-9);\n\n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-8);\n --switch-disabled-danger-background: var(--warning-8);\n \n // Border\n --switch-default-off-border: var(--grey-7);\n --switch-default-on-border: var(--primary-9);\n --switch-default-danger-border: var(--warning-9);\n \n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-a6);\n --switch-disabled-danger-border: var(--warning-a6);\n \n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n \n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-a9);\n --switch-disabled-danger-inner: var(--warning-a9);\n \n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-11);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n\n --switch-special-failure-background: var(--warning-8);\n --switch-special-failure-border: var(--warning-9);\n --switch-special-failure-inner: var(--white-12);\n --switch-special-failure-icon: var(--warning-8);\n\n }\n\n .light-theme {\n // Background\n --switch-default-off-background: var(--grey-2);\n --switch-default-on-background: var(--primary-7);\n --switch-default-danger-background: var(--warning-9);\n \n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-6);\n --switch-disabled-danger-background: var(--warning-8);\n\n // Border\n --switch-default-off-border: var(--grey-6);\n --switch-default-on-border: var(--primary-7);\n --switch-default-danger-border: var(--warning-9);\n \n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-7);\n --switch-disabled-danger-border: var(--warning-a5);\n \n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n\n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-9);\n --switch-disabled-danger-inner: var(--warning-a8);\n \n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-8);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n }\n\n"])));
|
|
1537
|
+
var colorVariables = styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n .light-theme {\n --shadow-primary-default: var(--grey-a4);\n --shadow-primary-elevate: var(--primary-a5);\n\n --shadow-secondary-default: var(--grey-3);\n --shadow-secondary-elevate: var(--grey-a4);\n\n --shadow-warning-default: var(--grey-a4);\n --shadow-warning-elevate: var(--warning-a5);\n }\n\n .dark-theme {\n --shadow-primary-default: var(--primary-a2);\n --shadow-primary-elevate: var(--primary-a2);\n\n --shadow-secondary-default: var(--black-a8);\n --shadow-secondary-elevate: var(--primary-a4);\n\n --shadow-warning-default: var(--grey-a3);\n --shadow-warning-elevate: var(--warning-a7);\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n /* Spinner */\n --spinner-primary-base: var(--primary-6);\n --spinner-primary-top: var(--white-1);\n\n --spinner-secondary-base: var(--grey-8);\n --spinner-secondary-top: var(--white-1);\n\n --spinner-simple-base: var(--grey-a8);\n --spinner-simple-top: var(--white-1);\n\n --spinner-warning-base: var(--warning-8);\n --spinner-warning-top: var(--white-1);\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 /* Typography */\n .light-theme, .dark-theme {\n --label-color: var(--grey-11);\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-border-width: 1px;\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\n --button-loading-area-background-color: var(--primary-a7);\n --button-loading-area-divider-color: var(--primary-a8);\n --button-loading-text-color: var(--white-1);\n --button-disabled-border-color: var(--button-border-color);\n --button-disabled-text-color: var(--white-1);\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 --button-disabled-border-color: var(--button-border-color);\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 --button-disabled-border-color: var(--button-border-color);\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 .button-design-text-only {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-inner-shadow-color: transparent;\n --button-gradient-start: transparent;\n --button-gradient-end: transparent;\n --button-drop-shadow-color: transparent;\n --button-text-color: var(--grey-12);\n --button-divider-color: transparent;\n\n --button-loading-area-background-color: transparent;\n --button-loading-area-divider-color: transparent;\n --button-loading-text-color: var(--grey-8);\n --button-disabled-border-color: transparent;\n --button-disabled-text-color: var(--grey-8);\n\n --button-hover-background-color: transparent;\n --button-hover-border-color: transparent;\n --button-hover-text-color: var(--primary-9);\n --button-hover-drop-shadow-color: transparent;\n --button-hover-inner-shadow-color: transparent;\n\n --button-active-inner-shadow-color: transparent;\n --button-active-drop-shadow-color: transparent;\n --button-active-background-color: transparent;\n --button-active-border-color: transparent;\n --button-active-text-color: var(--primary-10);\n }\n\n .button-design-outline {\n --button-background-color: transparent;\n --button-border-color: var(--grey-11);\n --button-border-width: 2px;\n --button-inner-shadow-color: transparent;\n --button-gradient-start: transparent;\n --button-gradient-end: transparent;\n --button-drop-shadow-color: var(--grey-a3);\n --button-divider-color: var(--grey-a3);\n --button-text-color: var(--grey-12);\n\n --button-loading-area-background-color: transparent;\n --button-loading-area-divider-color: var(--grey-a3);\n --button-loading-text-color: var(--grey-10);\n --button-disabled-border-color: var(--grey-a6);\n --button-disabled-text-color: var(--grey-12);\n\n --button-hover-background-color: transparent;\n --button-hover-border-color: var(--primary-9);\n --button-hover-text-color: var(--primary-9);\n --button-hover-drop-shadow-color: var(--grey-a4);\n --button-hover-inner-shadow-color: transparent;\n\n --button-active-inner-shadow-color: transparent;\n --button-active-drop-shadow-color: transparent;\n --button-active-background-color: transparent;\n --button-active-border-color: var(--primary-11);\n --button-active-text-color: var(--primary-11);\n }\n\n }\n\n /* Switches */\n .light-theme, .dark-theme {\n // Background\n --switch-default-off-background: var(--grey-4);\n --switch-default-on-background: var(--primary-9);\n --switch-default-danger-background: var(--warning-9);\n\n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-8);\n --switch-disabled-danger-background: var(--warning-8);\n\n // Border\n --switch-default-off-border: var(--grey-7);\n --switch-default-on-border: var(--primary-9);\n --switch-default-danger-border: var(--warning-9);\n\n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-a6);\n --switch-disabled-danger-border: var(--warning-a6);\n\n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n\n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-a9);\n --switch-disabled-danger-inner: var(--warning-a9);\n\n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-11);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n\n --switch-special-failure-background: var(--warning-8);\n --switch-special-failure-border: var(--warning-9);\n --switch-special-failure-inner: var(--white-12);\n --switch-special-failure-icon: var(--warning-8);\n\n }\n\n .light-theme {\n // Background\n --switch-default-off-background: var(--grey-2);\n --switch-default-on-background: var(--primary-7);\n --switch-default-danger-background: var(--warning-9);\n\n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-6);\n --switch-disabled-danger-background: var(--warning-8);\n\n // Border\n --switch-default-off-border: var(--grey-6);\n --switch-default-on-border: var(--primary-7);\n --switch-default-danger-border: var(--warning-9);\n\n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-7);\n --switch-disabled-danger-border: var(--warning-a5);\n\n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n\n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-9);\n --switch-disabled-danger-inner: var(--warning-a8);\n\n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-8);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n }\n\n"])));
|
|
1538
1538
|
|
|
1539
1539
|
var _templateObject$3;
|
|
1540
|
-
var ThemeVariables = styled.createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --input-height: 40px;\n --input-compact-height: 32px;\n --input-required-dot-display: inline-block;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n
|
|
1540
|
+
var ThemeVariables = styled.createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --input-height: 40px;\n --input-compact-height: 32px;\n --input-required-dot-display: inline-block;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-h-padding-outline: 7px;\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 // Inputs\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 // Switches\n --switch-height: 24px;\n --switch-width: 40px;\n --switch-border-width: 2px;\n --switch-inner-size: 16px;\n --switch-intent-offset: 3px;\n\n // Labels\n --label-font: var(--font-ui);\n --label-font-size: 14px;\n --label-weight: 500;\n\n }\n\n .button-size-xsmall {\n --button-font-size: 12px;\n --button-height: 20px;\n --button-h-padding: 4px;\n --button-h-padding-outline: 3px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 4px;\n }\n\n .button-size-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-h-padding-outline: 3px;\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-h-padding-outline: 7px;\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);
|
|
1541
1541
|
|
|
1542
1542
|
var _templateObject$4;
|
|
1543
|
-
var BaseStyles = styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n text-rendering: geometricPrecision
|
|
1543
|
+
var BaseStyles = styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n text-rendering: geometricPrecision;\n }\n body, html , #root {\n min-width: 100%;\n min-height: 100vh;\n margin: 0;\n }\n\n body {\n font-family: var(--font-ui);\n color: var(--grey-11);\n background: var(--main-background-gradient);\n background-attachment: fixed;\n }\n\n"])));
|
|
1544
1544
|
|
|
1545
1545
|
var _templateObject$5, _templateObject2, _templateObject3;
|
|
1546
|
-
var wrapperCss = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n
|
|
1546
|
+
var wrapperCss = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\n line-height: 0;\n\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n }\n"])));
|
|
1547
1547
|
var IconWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1548
1548
|
var IconWrapperForSVG = styled__default.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1549
1549
|
var Icon = function Icon(_ref) {
|
|
@@ -1925,48 +1925,56 @@ var Tooltip = function Tooltip(_ref6) {
|
|
|
1925
1925
|
}), message)), document.body);
|
|
1926
1926
|
};
|
|
1927
1927
|
|
|
1928
|
-
var _excluded = ["design", "size", "shadow", "noPadding", "children"];
|
|
1929
|
-
var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1;
|
|
1928
|
+
var _excluded = ["design", "size", "shadow", "noPadding", "loading", "children"];
|
|
1929
|
+
var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1;
|
|
1930
1930
|
var activeAnimation = function activeAnimation(shadow) {
|
|
1931
|
-
var animation = styled.keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n 0% {\n box-shadow
|
|
1931
|
+
var animation = styled.keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n 0% {\n box-shadow:\n 0 0px 0px var(--button-hover-inner-shadow-color) inset\n ", ";\n }\n\n 75% {\n box-shadow:\n 0 0 24px var(--button-active-inner-shadow-color) inset\n ", ";\n }\n\n 100% {\n box-shadow:\n 0 0 16px var(--button-active-inner-shadow-color) inset\n ", ";\n }\n "])), shadow ? ', 0 4px 8px var(--button-hover-drop-shadow-color)' : '', shadow ? ', 0 4px 6px var(--button-active-drop-shadow-color)' : '', shadow ? ', 0 4px 6px var(--button-active-drop-shadow-color)' : '');
|
|
1932
1932
|
return animation;
|
|
1933
1933
|
};
|
|
1934
|
-
var StyledButton = styled__default.button(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-family: var(--font-ui);\n height: var(--button-height);\n font-size: var(--button-font-size);\n color: var(--button-text-color);\n font-weight: 600;\n
|
|
1935
|
-
var $noPadding = _ref.$noPadding
|
|
1936
|
-
|
|
1934
|
+
var StyledButton = styled__default.button(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-family: var(--font-ui);\n height: var(--button-height);\n font-size: var(--button-font-size);\n color: var(--button-text-color);\n font-weight: 600;\n\n ", "\n\n overflow: hidden;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n border-radius: 3px;\n border: var(--button-border-width) solid var(--button-border-color);\n background: linear-gradient(135deg, transparent, transparent, var(--button-gradient-start), var(--button-gradient-end));\n background-color: var(--button-background-color);\n background-size: 400%;\n background-position: 99%;\n\n ", "\n\n transition:\n border-color var(--speed-normal) var(--easing-primary-in-out),\n background-color var(--speed-normal) var(--easing-primary-in-out),\n background-position var(--speed-normal) var(--easing-primary-out),\n background-size var(--speed-normal) var(--easing-primary-out),\n box-shadow var(--speed-normal) var(--easing-primary-out),\n opacity var(--speed-normal) var(--easing-primary-out),\n color var(--speed-normal) var(--easing-primary-in-out);\n\n &:hover:enabled {\n background-position: 1%;\n background-color: var(--button-hover-background-color);\n border-color: var(--button-hover-border-color);\n color: var(--button-hover-text-color);\n\n ", "\n }\n\n &:active:enabled {\n background-color: var(--button-active-background-color);\n border-color: var(--button-active-border-color);\n color: var(--button-active-text-color);\n ", ";\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n color: var(--button-disabled-text-color);\n border-color: var(--button-disabled-border-color, transparent);\n }\n\n ", ";\n\n button + button {\n margin-left: 20px;\n }\n\n"])), function (_ref) {
|
|
1935
|
+
var $noPadding = _ref.$noPadding,
|
|
1936
|
+
isOutline = _ref.isOutline;
|
|
1937
|
+
return $noPadding ? styled.css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n padding: 0px;\n "]))) : styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n padding: ", ";\n "])), isOutline ? "var(--button-h-padding-outline)" : "var(--button-h-padding)");
|
|
1937
1938
|
}, function (_ref2) {
|
|
1938
1939
|
var $shadow = _ref2.$shadow;
|
|
1939
|
-
return $shadow ? styled.css(
|
|
1940
|
+
return $shadow ? styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n box-shadow:\n 0 2px 4px 2px var(--button-drop-shadow-color),\n 0 0 0 var(--button-inner-shadow-color) inset;\n "]))) : styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n box-shadow: 0 0 0 var(--button-inner-shadow-color) inset;\n "])));
|
|
1940
1941
|
}, function (_ref3) {
|
|
1941
1942
|
var $shadow = _ref3.$shadow;
|
|
1942
|
-
return $shadow ? styled.css(
|
|
1943
|
+
return $shadow ? styled.css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n box-shadow:\n 0 4px 8px var(--button-hover-drop-shadow-color),\n 0 0 5px var(--button-hover-inner-shadow-color) inset;\n "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n box-shadow: 0 0 5px var(--button-hover-inner-shadow-color) inset;\n "])));
|
|
1943
1944
|
}, function (_ref4) {
|
|
1944
1945
|
var $shadow = _ref4.$shadow;
|
|
1945
|
-
return styled.css(
|
|
1946
|
+
return styled.css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n animation: var(--speed-normal) var(--easing-primary-in-out) ", " forwards;\n "])), function () {
|
|
1946
1947
|
return activeAnimation($shadow);
|
|
1947
1948
|
});
|
|
1949
|
+
}, function (_ref5) {
|
|
1950
|
+
var $loading = _ref5.$loading;
|
|
1951
|
+
return $loading && styled.css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n &:disabled {\n opacity: 1;\n cursor: wait;\n color: var(--button-loading-text-color);\n }\n "])));
|
|
1948
1952
|
});
|
|
1949
|
-
var Button = function Button(
|
|
1950
|
-
var
|
|
1951
|
-
design =
|
|
1952
|
-
|
|
1953
|
-
size =
|
|
1954
|
-
|
|
1955
|
-
shadow =
|
|
1956
|
-
|
|
1957
|
-
noPadding =
|
|
1958
|
-
|
|
1959
|
-
|
|
1953
|
+
var Button = function Button(_ref6) {
|
|
1954
|
+
var _ref6$design = _ref6.design,
|
|
1955
|
+
design = _ref6$design === void 0 ? 'primary' : _ref6$design,
|
|
1956
|
+
_ref6$size = _ref6.size,
|
|
1957
|
+
size = _ref6$size === void 0 ? 'normal' : _ref6$size,
|
|
1958
|
+
_ref6$shadow = _ref6.shadow,
|
|
1959
|
+
shadow = _ref6$shadow === void 0 ? false : _ref6$shadow,
|
|
1960
|
+
_ref6$noPadding = _ref6.noPadding,
|
|
1961
|
+
noPadding = _ref6$noPadding === void 0 ? false : _ref6$noPadding,
|
|
1962
|
+
_ref6$loading = _ref6.loading,
|
|
1963
|
+
loading = _ref6$loading === void 0 ? false : _ref6$loading,
|
|
1964
|
+
children = _ref6.children,
|
|
1965
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded);
|
|
1960
1966
|
design === 'danger' ? console.warn('Button.tsx - Warning, the design prop value danger is being deprecated. Use warning instead.') : null;
|
|
1961
1967
|
return React__default.createElement(StyledButton, Object.assign({
|
|
1962
1968
|
type: 'button',
|
|
1969
|
+
isOutline: design === 'outline',
|
|
1963
1970
|
className: "button-design-" + design + " button-size-" + size
|
|
1964
1971
|
}, {
|
|
1965
1972
|
design: design,
|
|
1966
1973
|
size: size
|
|
1967
1974
|
}, {
|
|
1968
1975
|
"$noPadding": noPadding,
|
|
1969
|
-
"$shadow": shadow
|
|
1976
|
+
"$shadow": shadow,
|
|
1977
|
+
"$loading": loading
|
|
1970
1978
|
}, props), children);
|
|
1971
1979
|
};
|
|
1972
1980
|
|
|
@@ -2049,48 +2057,56 @@ var Spinner = function Spinner(_ref6) {
|
|
|
2049
2057
|
};
|
|
2050
2058
|
|
|
2051
2059
|
var _excluded$1 = ["design", "size", "loading", "shadow", "onClick", "disabled", "position", "icon", "children"];
|
|
2052
|
-
var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$
|
|
2053
|
-
var Container$2 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n display: inline;\n
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
var
|
|
2058
|
-
var
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
var
|
|
2062
|
-
return styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n
|
|
2063
|
-
}
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
});
|
|
2067
|
-
|
|
2068
|
-
var
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2060
|
+
var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11;
|
|
2061
|
+
var Container$2 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n display: inline;\n"])));
|
|
2062
|
+
var TextContainer = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n padding: 0 var(--button-h-padding);\n\n transition: padding var(--speed-slow) var(--easing-primary-in-out);\n"])));
|
|
2063
|
+
var IconContainer = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n"])));
|
|
2064
|
+
var SpinnerContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n background-color: var(--button-loading-area-background-color);\n\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n opacity: 0;\n"])));
|
|
2065
|
+
var IconArea = styled__default.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n flex: 0 0 calc((var(--button-h-padding)* 2) + var(--button-icon-size));\n border: 0px solid var(--button-divider-color);\n padding: 0 var(--button-h-padding);\n\n ", "\n\n ", "{\n svg {\n display:block;\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n path, rect, circle, d {\n stroke: var(--button-text-color);\n }\n }\n }\n\n ", ", ", "{\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n }\n\n ", ";\n\n"])), function (_ref) {
|
|
2066
|
+
var position = _ref.position;
|
|
2067
|
+
return styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n order: ", ";\n ", ";\n "])), position && position === 'left' ? 0 : 2, position === 'left' ? "border-right-width: 1px;" : "border-left-width: 1px;");
|
|
2068
|
+
}, IconContainer, IconContainer, SpinnerContainer, function (_ref2) {
|
|
2069
|
+
var $loading = _ref2.$loading;
|
|
2070
|
+
return $loading && styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n border-color: var(--button-loading-area-divider-color);\n\n ", "{\n opacity: 1;\n }\n\n ", "{\n opacity: 0;\n };\n "])), SpinnerContainer, IconContainer);
|
|
2071
|
+
});
|
|
2072
|
+
var InnerContainer = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n height: inherit;\n\n &:hover {\n ", ";\n }\n\n &:active{\n ", ";\n }\n\n ", ";\n"])), function (_ref3) {
|
|
2073
|
+
var disabled = _ref3.disabled;
|
|
2074
|
+
return !disabled && styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n ", "{\n svg {\n path, rect, circle, d {\n stroke: var(--button-hover-text-color);\n }\n }\n }\n "])), IconContainer);
|
|
2075
|
+
}, function (_ref4) {
|
|
2076
|
+
var disabled = _ref4.disabled;
|
|
2077
|
+
return !disabled && styled.css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n ", "{\n svg {\n path, rect, circle, d {\n stroke: var(--button-active-text-color);\n }\n }\n }\n "])), IconContainer);
|
|
2078
|
+
}, function (_ref5) {
|
|
2079
|
+
var disabled = _ref5.disabled;
|
|
2080
|
+
return disabled && styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "{\n svg {\n path, rect, circle, d {\n stroke: var(--button-disabled-text-color);\n }\n }\n }\n "])), IconContainer);
|
|
2081
|
+
});
|
|
2082
|
+
var ButtonWithIcon = function ButtonWithIcon(_ref6) {
|
|
2083
|
+
var _ref6$design = _ref6.design,
|
|
2084
|
+
design = _ref6$design === void 0 ? 'primary' : _ref6$design,
|
|
2085
|
+
_ref6$size = _ref6.size,
|
|
2086
|
+
size = _ref6$size === void 0 ? 'normal' : _ref6$size,
|
|
2087
|
+
_ref6$loading = _ref6.loading,
|
|
2088
|
+
loading = _ref6$loading === void 0 ? false : _ref6$loading,
|
|
2089
|
+
_ref6$shadow = _ref6.shadow,
|
|
2090
|
+
shadow = _ref6$shadow === void 0 ? false : _ref6$shadow,
|
|
2091
|
+
onClick = _ref6.onClick,
|
|
2092
|
+
disabled = _ref6.disabled,
|
|
2093
|
+
position = _ref6.position,
|
|
2094
|
+
icon = _ref6.icon,
|
|
2095
|
+
children = _ref6.children,
|
|
2096
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded$1);
|
|
2097
|
+
return React__default.createElement(Container$2, null, React__default.createElement(Button, Object.assign({
|
|
2098
|
+
noPadding: true,
|
|
2099
|
+
disabled: disabled || loading
|
|
2087
2100
|
}, {
|
|
2088
2101
|
design: design,
|
|
2089
2102
|
size: size,
|
|
2090
2103
|
shadow: shadow,
|
|
2091
2104
|
onClick: onClick,
|
|
2092
|
-
|
|
2093
|
-
}, props), React__default.createElement(InnerContainer,
|
|
2105
|
+
loading: loading
|
|
2106
|
+
}, props), React__default.createElement(InnerContainer, Object.assign({}, {
|
|
2107
|
+
disabled: disabled,
|
|
2108
|
+
loading: loading
|
|
2109
|
+
}), React__default.createElement(TextContainer, Object.assign({}, {
|
|
2094
2110
|
size: size,
|
|
2095
2111
|
position: position
|
|
2096
2112
|
}), children), React__default.createElement(IconArea, Object.assign({
|
|
@@ -2107,43 +2123,40 @@ var ButtonWithIcon = function ButtonWithIcon(_ref4) {
|
|
|
2107
2123
|
};
|
|
2108
2124
|
|
|
2109
2125
|
var _excluded$2 = ["design", "size", "shadow", "onClick", "disabled", "position", "loading", "children"];
|
|
2110
|
-
var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3
|
|
2111
|
-
var Container$3 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n display: inline;\n
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
});
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$2);
|
|
2137
|
-
return React__default.createElement(Container$3, {
|
|
2138
|
-
"$loading": loading
|
|
2139
|
-
}, React__default.createElement(Button, Object.assign({
|
|
2126
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3;
|
|
2127
|
+
var Container$3 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n display: inline;\n"])));
|
|
2128
|
+
var TextContainer$1 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n padding: 0 var(--button-h-padding);\n\n transition: padding var(--speed-slow) var(--easing-primary-in-out);\n"])));
|
|
2129
|
+
var LoadingContainer = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 0 0 calc((var(--button-h-padding) * 2) + var(--button-icon-size));\n width: calc((var(--button-h-padding) * 2) + var(--button-icon-size));\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n opacity: 0;\n border: 0px solid var(--button-loading-area-divider-color);\n background-color: var(--button-loading-area-background-color);\n\n transition:\n flex var(--speed-slow) var(--easing-primary-in-out) var(--speed-slow),\n opacity var(--speed-slow) var(--easing-primary-in-out);\n\n ", "\n\n svg {\n display:block;\n }\n"])), function (_ref) {
|
|
2130
|
+
var position = _ref.position;
|
|
2131
|
+
return styled.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n order: ", ";\n ", ";\n "])), position && position === 'left' ? 0 : 2, position === 'left' ? "border-right-width: 1px;" : "border-left-width: 1px;");
|
|
2132
|
+
});
|
|
2133
|
+
var InnerContainer$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex:1;\n height: inherit;\n\n ", "\n"])), function (_ref2) {
|
|
2134
|
+
var $loading = _ref2.$loading;
|
|
2135
|
+
return $loading ? styled.css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n\n transition: margin var(--speed-slow) var(--easing-primary-in-out);\n\n ", "{\n opacity: 1;\n transition: flex var(--speed-slow) var(--easing-primary-in-out), opacity var(--speed-slow) var(--easing-primary-in-out) var(--speed-slow);\n }\n "])), LoadingContainer) : styled.css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n ", "{\n flex: 0 0 0px;\n }\n "])), LoadingContainer);
|
|
2136
|
+
});
|
|
2137
|
+
var ButtonWithLoading = function ButtonWithLoading(_ref3) {
|
|
2138
|
+
var _ref3$design = _ref3.design,
|
|
2139
|
+
design = _ref3$design === void 0 ? 'primary' : _ref3$design,
|
|
2140
|
+
_ref3$size = _ref3.size,
|
|
2141
|
+
size = _ref3$size === void 0 ? 'normal' : _ref3$size,
|
|
2142
|
+
_ref3$shadow = _ref3.shadow,
|
|
2143
|
+
shadow = _ref3$shadow === void 0 ? false : _ref3$shadow,
|
|
2144
|
+
onClick = _ref3.onClick,
|
|
2145
|
+
disabled = _ref3.disabled,
|
|
2146
|
+
position = _ref3.position,
|
|
2147
|
+
_ref3$loading = _ref3.loading,
|
|
2148
|
+
loading = _ref3$loading === void 0 ? false : _ref3$loading,
|
|
2149
|
+
children = _ref3.children,
|
|
2150
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
|
|
2151
|
+
return React__default.createElement(Container$3, null, React__default.createElement(Button, Object.assign({
|
|
2140
2152
|
noPadding: true,
|
|
2141
2153
|
disabled: disabled || loading
|
|
2142
2154
|
}, {
|
|
2143
2155
|
design: design,
|
|
2144
2156
|
size: size,
|
|
2145
2157
|
shadow: shadow,
|
|
2146
|
-
onClick: onClick
|
|
2158
|
+
onClick: onClick,
|
|
2159
|
+
loading: loading
|
|
2147
2160
|
}, rest), React__default.createElement(InnerContainer$1, Object.assign({
|
|
2148
2161
|
"$loading": loading
|
|
2149
2162
|
}, {
|
|
@@ -2227,7 +2240,7 @@ var ActionButtons = function ActionButtons(_ref4) {
|
|
|
2227
2240
|
};
|
|
2228
2241
|
|
|
2229
2242
|
var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "showFeedback", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
|
|
2230
|
-
var _templateObject$h, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$
|
|
2243
|
+
var _templateObject$h, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13;
|
|
2231
2244
|
var ActionContainer = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
2232
2245
|
var InputActionButton = styled__default.button.attrs({
|
|
2233
2246
|
type: "button"
|
|
@@ -2241,12 +2254,12 @@ var StyledInput = styled__default.input(_templateObject6$4 || (_templateObject6$
|
|
|
2241
2254
|
});
|
|
2242
2255
|
var InputContainer = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n\n flex: 1;\n position: relative;\n\n ", "\n\n"])), function (_ref2) {
|
|
2243
2256
|
var hasAction = _ref2.hasAction;
|
|
2244
|
-
return hasAction && styled.css(_templateObject9$
|
|
2257
|
+
return hasAction && styled.css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 60px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput);
|
|
2245
2258
|
});
|
|
2246
|
-
var Container$5 = styled__default.div(_templateObject10$
|
|
2259
|
+
var Container$5 = styled__default.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (_ref3) {
|
|
2247
2260
|
var fieldState = _ref3.fieldState,
|
|
2248
2261
|
showFeedback = _ref3.showFeedback;
|
|
2249
|
-
return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n flex-direction: row;\n\n ", "{\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", ";\n\n }\n\n ", " {\n ", ";\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
|
|
2262
|
+
return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n flex-direction: row;\n\n ", "{\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", ";\n\n }\n\n ", " {\n ", ";\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
|
|
2250
2263
|
});
|
|
2251
2264
|
var Input = function Input(_ref4) {
|
|
2252
2265
|
var _ref4$type = _ref4.type,
|
|
@@ -2392,7 +2405,7 @@ var SmallInput = function SmallInput(_ref4) {
|
|
|
2392
2405
|
}, props)), unit ? React__default.createElement(UnitKey, null, unit) : null)));
|
|
2393
2406
|
};
|
|
2394
2407
|
|
|
2395
|
-
var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$
|
|
2408
|
+
var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15;
|
|
2396
2409
|
var SwitchPosition;
|
|
2397
2410
|
(function (SwitchPosition) {
|
|
2398
2411
|
SwitchPosition[SwitchPosition["Off"] = 0] = "Off";
|
|
@@ -2415,28 +2428,28 @@ var getPositionKey = function getPositionKey(switchPos) {
|
|
|
2415
2428
|
}
|
|
2416
2429
|
};
|
|
2417
2430
|
var RealInput = styled__default.input(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
2418
|
-
var SwitchOuter = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n border: var(--switch-border-width) solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n\n width: var(--switch-width);\n height: var(--switch-height);\n border-radius: calc(var(--switch-height) / 2);\n\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: calc(var(--switch-border-width) * -1);\n left: calc(var(--switch-border-width) * -1);\n bottom: calc(var(--switch-border-width) * -1);\n right: calc(var(--switch-border-width) * -1);\n pointer-events: none;\n border-radius: 12px;\n box-shadow
|
|
2419
|
-
var SwitchInner = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n --offset: calc(((var(--switch-height) - var(--switch-inner-size)) / 2) - var(--switch-border-width));\n --position-off: var(--offset);\n --position-on: calc(var(--switch-width) - var(--switch-inner-size) - (var(--switch-border-width)*2) - var(--offset));\n --position-neutral: calc((var(--switch-width) / 2) - (var(--switch-inner-size) / 2) - var(--offset));\n --position-locked: var(--offset);\n\n position: absolute;\n top: var(--offset);\n left: ", ";\n
|
|
2431
|
+
var SwitchOuter = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n border: var(--switch-border-width) solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n\n width: var(--switch-width);\n height: var(--switch-height);\n border-radius: calc(var(--switch-height) / 2);\n\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: calc(var(--switch-border-width) * -1);\n left: calc(var(--switch-border-width) * -1);\n bottom: calc(var(--switch-border-width) * -1);\n right: calc(var(--switch-border-width) * -1);\n pointer-events: none;\n border-radius: 12px;\n box-shadow:\n 0px 2px 2px 0px var(--grey-a4) inset,\n 0px -8px 8px 0px var(--grey-a2) inset,\n 0px 2px 4px var(--black-a4),\n 0px -2px 4px var(--white-a4);\n }\n"])));
|
|
2432
|
+
var SwitchInner = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n --offset: calc(((var(--switch-height) - var(--switch-inner-size)) / 2) - var(--switch-border-width));\n --position-off: var(--offset);\n --position-on: calc(var(--switch-width) - var(--switch-inner-size) - (var(--switch-border-width)*2) - var(--offset));\n --position-neutral: calc((var(--switch-width) / 2) - (var(--switch-inner-size) / 2) - var(--offset));\n --position-locked: var(--offset);\n\n position: absolute;\n top: var(--offset);\n left: ", ";\n\n box-sizing: border-box;\n height: var(--switch-inner-size);\n width: var(--switch-inner-size);\n border-radius: calc(var(--switch-inner-size) / 2);\n\n background-color: var(--switch-default-off-background);\n\n box-shadow:\n 0px 2px 4px 0px var(--black-a8),\n 0px 1px 2px 0px var(--white-a5) inset,\n 0px -1px 1px 0px var(--black-a5) inset;\n"])), function (_ref) {
|
|
2420
2433
|
var position = _ref.position;
|
|
2421
2434
|
return position && "var(--position-" + position + ")";
|
|
2422
2435
|
});
|
|
2423
2436
|
var LabelText$1 = styled__default.span(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose([""])));
|
|
2424
2437
|
var IconWrapper$1 = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n }\n"])));
|
|
2425
2438
|
var SpinnerWrapper = styled__default.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose([""])));
|
|
2426
|
-
var Container$7 = styled__default(StyledLabel)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n
|
|
2439
|
+
var Container$7 = styled__default(StyledLabel)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n\n ", "{\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n }\n\n ", "{\n ", ";\n\n transition:\n left var(--speed-fast) var(--easing-primary-in-out),\n border var(--speed-fast) var(--easing-primary-in-out),\n width var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n\n ", "\n\n ", ";\n\n }\n\n &:hover {\n ", "{\n left: ", ";\n }\n }\n"])), SwitchOuter, function (_ref2) {
|
|
2427
2440
|
var activeTheming = _ref2.activeTheming,
|
|
2428
2441
|
themeState = _ref2.themeState;
|
|
2429
2442
|
return styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n border-color: var(--switch-", "-", "-border);\n background-color: var(--switch-", "-", "-background);\n "])), themeState, activeTheming, themeState, activeTheming);
|
|
2430
2443
|
}, function (_ref3) {
|
|
2431
2444
|
var activeTheming = _ref3.activeTheming;
|
|
2432
|
-
return activeTheming === 'locked' && styled.css(_templateObject9$
|
|
2445
|
+
return activeTheming === 'locked' && styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-special-locked-background);\n border-color: var(--switch-special-locked-border);\n "])));
|
|
2433
2446
|
}, function (_ref4) {
|
|
2434
2447
|
var activeTheming = _ref4.activeTheming;
|
|
2435
|
-
return activeTheming === 'failure' && styled.css(_templateObject10$
|
|
2448
|
+
return activeTheming === 'failure' && styled.css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-special-failure-background);\n border-color: var(--switch-special-failure-border);\n "])));
|
|
2436
2449
|
}, function (_ref5) {
|
|
2437
2450
|
var activeTheming = _ref5.activeTheming,
|
|
2438
2451
|
$loading = _ref5.$loading;
|
|
2439
|
-
return $loading && styled.css(_templateObject11$
|
|
2452
|
+
return $loading && styled.css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-default-", "-background);\n border-color: var(--switch-default-", "-border);\n "])), activeTheming, activeTheming);
|
|
2440
2453
|
}, SwitchInner, function (_ref6) {
|
|
2441
2454
|
var activeTheming = _ref6.activeTheming,
|
|
2442
2455
|
themeState = _ref6.themeState;
|
|
@@ -2460,7 +2473,7 @@ var isTypeSwitchState = function isTypeSwitchState(value) {
|
|
|
2460
2473
|
return value === 'default' || value === 'loading' || value === 'locked' || value === 'disabled' || value === 'failure';
|
|
2461
2474
|
};
|
|
2462
2475
|
var Switch = function Switch(_ref11) {
|
|
2463
|
-
var _inputRef$
|
|
2476
|
+
var _inputRef$current;
|
|
2464
2477
|
var _ref11$state = _ref11.state,
|
|
2465
2478
|
state = _ref11$state === void 0 ? 'default' : _ref11$state,
|
|
2466
2479
|
_ref11$leftTheme = _ref11.leftTheme,
|
|
@@ -2469,49 +2482,66 @@ var Switch = function Switch(_ref11) {
|
|
|
2469
2482
|
rightTheme = _ref11$rightTheme === void 0 ? 'on' : _ref11$rightTheme,
|
|
2470
2483
|
labelText = _ref11.labelText,
|
|
2471
2484
|
onChangeCallback = _ref11.onChangeCallback,
|
|
2472
|
-
|
|
2473
|
-
|
|
2485
|
+
checked = _ref11.checked,
|
|
2486
|
+
_ref11$defaultChecked = _ref11.defaultChecked,
|
|
2487
|
+
defaultChecked = _ref11$defaultChecked === void 0 ? false : _ref11$defaultChecked;
|
|
2488
|
+
var isControlled = checked !== undefined;
|
|
2489
|
+
var initialChecked = isControlled ? checked : defaultChecked;
|
|
2490
|
+
var initialPosition = initialChecked ? SwitchPosition.On : SwitchPosition.Off;
|
|
2491
|
+
var initialTheme = initialChecked ? rightTheme : leftTheme;
|
|
2492
|
+
var _useState = React.useState(defaultChecked),
|
|
2493
|
+
internalChecked = _useState[0],
|
|
2494
|
+
setInternalChecked = _useState[1];
|
|
2474
2495
|
var inputRef = React.useRef(null);
|
|
2475
2496
|
var innerRef = React.useRef(null);
|
|
2476
|
-
var
|
|
2477
|
-
position =
|
|
2478
|
-
setPosition =
|
|
2479
|
-
var
|
|
2480
|
-
activeTheming =
|
|
2481
|
-
setActiveTheming =
|
|
2482
|
-
var
|
|
2483
|
-
switchState =
|
|
2484
|
-
setSwitchState =
|
|
2485
|
-
var
|
|
2486
|
-
justUpdated =
|
|
2487
|
-
setJustUpdated =
|
|
2488
|
-
var
|
|
2489
|
-
innerSize =
|
|
2490
|
-
setInnerSize =
|
|
2497
|
+
var _useState2 = React.useState(initialPosition),
|
|
2498
|
+
position = _useState2[0],
|
|
2499
|
+
setPosition = _useState2[1];
|
|
2500
|
+
var _useState3 = React.useState(initialTheme),
|
|
2501
|
+
activeTheming = _useState3[0],
|
|
2502
|
+
setActiveTheming = _useState3[1];
|
|
2503
|
+
var _useState4 = React.useState('default'),
|
|
2504
|
+
switchState = _useState4[0],
|
|
2505
|
+
setSwitchState = _useState4[1];
|
|
2506
|
+
var _useState5 = React.useState(false),
|
|
2507
|
+
justUpdated = _useState5[0],
|
|
2508
|
+
setJustUpdated = _useState5[1];
|
|
2509
|
+
var _useState6 = React.useState(0),
|
|
2510
|
+
innerSize = _useState6[0],
|
|
2511
|
+
setInnerSize = _useState6[1];
|
|
2512
|
+
var updateSwitchPositionAndTheme = React.useCallback(function () {
|
|
2513
|
+
if (isControlled) {
|
|
2514
|
+
setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2515
|
+
setActiveTheming(checked ? rightTheme : leftTheme);
|
|
2516
|
+
} else if (inputRef.current) {
|
|
2517
|
+
inputRef.current.checked = internalChecked;
|
|
2518
|
+
setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2519
|
+
setActiveTheming(internalChecked ? rightTheme : leftTheme);
|
|
2520
|
+
}
|
|
2521
|
+
}, [checked, isControlled, internalChecked, leftTheme, rightTheme]);
|
|
2491
2522
|
React.useEffect(function () {
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
inputRef.current.checked = checked;
|
|
2495
|
-
}
|
|
2496
|
-
}, [checked]);
|
|
2523
|
+
updateSwitchPositionAndTheme();
|
|
2524
|
+
}, [updateSwitchPositionAndTheme]);
|
|
2497
2525
|
var positionSwitch = React.useCallback(function () {
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2526
|
+
if (isControlled) {
|
|
2527
|
+
setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2528
|
+
setActiveTheming(checked ? rightTheme : leftTheme);
|
|
2529
|
+
} else {
|
|
2530
|
+
setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2531
|
+
setActiveTheming(internalChecked ? rightTheme : leftTheme);
|
|
2532
|
+
}
|
|
2533
|
+
}, [checked, isControlled, leftTheme, rightTheme, internalChecked]);
|
|
2534
|
+
var customOnChange = React.useCallback(function () {
|
|
2535
|
+
if (state === 'locked' || state === 'disabled') return;
|
|
2536
|
+
if (isControlled) {
|
|
2537
|
+
onChangeCallback === null || onChangeCallback === void 0 ? void 0 : onChangeCallback(!checked);
|
|
2538
|
+
} else {
|
|
2539
|
+
var newChecked = !internalChecked;
|
|
2540
|
+
setInternalChecked(newChecked);
|
|
2541
|
+
onChangeCallback === null || onChangeCallback === void 0 ? void 0 : onChangeCallback(newChecked);
|
|
2505
2542
|
}
|
|
2506
|
-
}, [setPosition, setActiveTheming, leftTheme, rightTheme, inputRef]);
|
|
2507
|
-
var customOnChange = function customOnChange() {
|
|
2508
2543
|
positionSwitch();
|
|
2509
|
-
|
|
2510
|
-
if (onChangeCallback) {
|
|
2511
|
-
var _inputRef$current3;
|
|
2512
|
-
onChangeCallback(((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.checked) || false);
|
|
2513
|
-
}
|
|
2514
|
-
};
|
|
2544
|
+
}, [isControlled, checked, internalChecked, onChangeCallback, state, positionSwitch]);
|
|
2515
2545
|
var updateThemeChoice = React.useCallback(function () {
|
|
2516
2546
|
if (position === SwitchPosition.On) {
|
|
2517
2547
|
setActiveTheming(rightTheme);
|
|
@@ -2551,7 +2581,7 @@ var Switch = function Switch(_ref11) {
|
|
|
2551
2581
|
useIntent: !justUpdated && (state === 'default' || state === 'failure'),
|
|
2552
2582
|
themeState: switchState,
|
|
2553
2583
|
position: position,
|
|
2554
|
-
checked: (_inputRef$
|
|
2584
|
+
checked: (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked
|
|
2555
2585
|
}, React__default.createElement(SwitchOuter, null, React__default.createElement(SwitchInner, {
|
|
2556
2586
|
position: getPositionKey(position),
|
|
2557
2587
|
ref: innerRef
|
|
@@ -2574,7 +2604,7 @@ var Switch = function Switch(_ref11) {
|
|
|
2574
2604
|
ref: inputRef,
|
|
2575
2605
|
type: 'checkbox',
|
|
2576
2606
|
disabled: state !== 'default' && state !== 'failure',
|
|
2577
|
-
defaultChecked: checked
|
|
2607
|
+
defaultChecked: !isControlled ? defaultChecked : checked
|
|
2578
2608
|
}));
|
|
2579
2609
|
};
|
|
2580
2610
|
var stateCheck = function stateCheck(state) {
|
|
@@ -2692,7 +2722,7 @@ function SvgNoImage() {
|
|
|
2692
2722
|
}));
|
|
2693
2723
|
}
|
|
2694
2724
|
|
|
2695
|
-
var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$
|
|
2725
|
+
var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$1;
|
|
2696
2726
|
var CheckboxState;
|
|
2697
2727
|
(function (CheckboxState) {
|
|
2698
2728
|
CheckboxState["Off"] = "off";
|
|
@@ -2713,7 +2743,7 @@ var Container$8 = styled__default.label(_templateObject5$b || (_templateObject5$
|
|
|
2713
2743
|
}, function (_ref3) {
|
|
2714
2744
|
var visualState = _ref3.visualState,
|
|
2715
2745
|
disabled = _ref3.disabled;
|
|
2716
|
-
return visualState === CheckboxState.On && styled.css(_templateObject9$
|
|
2746
|
+
return visualState === CheckboxState.On && styled.css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n /* Checked */ \n ", "{\n background-color: var(--input-toggle-checked-background-color);\n border-color: var(--input-toggle-checked-border-color);\n }\n /* Checked - Hover */\n ", ";\n\n /* Checked - Disabled */ \n ", "\n "])), CheckboxOuter, !disabled && styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n background-color: var(--input-toggle-checked-hover-background-color);\n border-color: var(--input-toggle-checked-hover-border-color);\n }"])), CheckboxOuter), disabled && styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--input-toggle-checked-disabled-background-color);\n border-color: var(--input-toggle-checked-disabled-border-color);\n cursor: not-allowed;\n }\n ", "{\n opacity: 0.65;\n }\n "])), CheckboxOuter, IconWrapper$2));
|
|
2717
2747
|
}, function (_ref4) {
|
|
2718
2748
|
var visualState = _ref4.visualState,
|
|
2719
2749
|
disabled = _ref4.disabled;
|
|
@@ -2769,15 +2799,15 @@ var Checkbox = function Checkbox(_ref5) {
|
|
|
2769
2799
|
})), " ");
|
|
2770
2800
|
};
|
|
2771
2801
|
|
|
2772
|
-
var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$
|
|
2802
|
+
var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$6, _templateObject10$6;
|
|
2773
2803
|
var InnerRadio = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
2774
2804
|
var OuterRadio = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n user-select: none;\n\n ", ";\n"])), function (_ref) {
|
|
2775
2805
|
var isChecked = _ref.isChecked,
|
|
2776
2806
|
disabled = _ref.disabled;
|
|
2777
2807
|
return styled.css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n border-color: var(--input-toggle-unchecked-border-color);\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), !disabled && styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--input-toggle-unchecked-hover-border-color);\n }\n "]))), isChecked && !disabled && styled.css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n border-color: var(--input-toggle-checked-border-color);\n ", " {\n background-color: var(--input-toggle-checked-background-color);\n }\n "])), InnerRadio), isChecked && !disabled && styled.css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: var(--input-toggle-checked-hover-border-color);\n ", " {\n background-color: var(--input-toggle-checked-hover-background-color);\n }\n }\n "])), InnerRadio), isChecked && disabled && styled.css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-checked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-checked-disabled-background-color);\n }\n "])), InnerRadio), !isChecked && disabled && styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-unchecked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-unchecked-disabled-background-color);\n }\n "])), InnerRadio));
|
|
2778
2808
|
});
|
|
2779
|
-
var HiddenInput = styled__default.input(_templateObject9$
|
|
2780
|
-
var Container$9 = styled__default.div(_templateObject10$
|
|
2809
|
+
var HiddenInput = styled__default.input(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n padding:0;\n opacity: 0;\n"])));
|
|
2810
|
+
var Container$9 = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n"])));
|
|
2781
2811
|
var RadioButton = function RadioButton(_ref2) {
|
|
2782
2812
|
var id = _ref2.id,
|
|
2783
2813
|
value = _ref2.value,
|
|
@@ -2811,7 +2841,7 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2811
2841
|
};
|
|
2812
2842
|
|
|
2813
2843
|
var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
|
|
2814
|
-
var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$
|
|
2844
|
+
var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$7;
|
|
2815
2845
|
var FeedbackIcon$1 = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n padding-top: 2px;\n"])));
|
|
2816
2846
|
var StyledTextArea = styled__default.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n\n color: var(--input-color-default);\n font-size: 14px;\n\n transition:\n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n &::placeholder {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), function (_ref) {
|
|
2817
2847
|
var fieldState = _ref.fieldState;
|
|
@@ -2822,7 +2852,7 @@ var FeedbackMessage$1 = styled__default.div(_templateObject5$d || (_templateObje
|
|
|
2822
2852
|
var Container$a = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
|
|
2823
2853
|
var fieldState = _ref2.fieldState,
|
|
2824
2854
|
showFeedback = _ref2.showFeedback;
|
|
2825
|
-
return styled.css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject9$
|
|
2855
|
+
return styled.css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n display:none;\n "]))), FeedbackContainer$1, fieldState, fieldState);
|
|
2826
2856
|
});
|
|
2827
2857
|
var TextArea = function TextArea(_ref3) {
|
|
2828
2858
|
var _ref3$placeholder = _ref3.placeholder,
|
|
@@ -2877,7 +2907,7 @@ var TextArea = function TextArea(_ref3) {
|
|
|
2877
2907
|
};
|
|
2878
2908
|
|
|
2879
2909
|
var _excluded$8 = ["fieldState", "placeholder", "label", "icon", "isCompact", "defaultValue", "changeCallback", "children"];
|
|
2880
|
-
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$
|
|
2910
|
+
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8;
|
|
2881
2911
|
var SelectWrapper = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n"])));
|
|
2882
2912
|
var OpenIcon = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n right: ", ";\n pointer-events: none;\n"])), function (_ref) {
|
|
2883
2913
|
var isCompact = _ref.isCompact;
|
|
@@ -2897,7 +2927,7 @@ var StyledSelect = styled__default.select(_templateObject4$g || (_templateObject
|
|
|
2897
2927
|
});
|
|
2898
2928
|
var Container$b = styled__default.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n"])), function (_ref5) {
|
|
2899
2929
|
var activePlaceholder = _ref5.activePlaceholder;
|
|
2900
|
-
return activePlaceholder && styled.css(_templateObject9$
|
|
2930
|
+
return activePlaceholder && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n ", " {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n font-weight: 400;\n }\n "])), StyledSelect);
|
|
2901
2931
|
});
|
|
2902
2932
|
var SelectField = function SelectField(_ref6) {
|
|
2903
2933
|
var _ref6$fieldState = _ref6.fieldState,
|
|
@@ -3043,9 +3073,21 @@ var areDatesEqual = function areDatesEqual(storedValue, currentDisplay) {
|
|
|
3043
3073
|
}
|
|
3044
3074
|
return false;
|
|
3045
3075
|
};
|
|
3076
|
+
var isDateInterval = function isDateInterval(value) {
|
|
3077
|
+
if (value === null || value === undefined) {
|
|
3078
|
+
return false;
|
|
3079
|
+
}
|
|
3080
|
+
if (value.start === null || value.start === undefined) {
|
|
3081
|
+
return false;
|
|
3082
|
+
}
|
|
3083
|
+
if (value.end === null || value.end === undefined) {
|
|
3084
|
+
return false;
|
|
3085
|
+
}
|
|
3086
|
+
return value.start instanceof Date && value.end instanceof Date;
|
|
3087
|
+
};
|
|
3046
3088
|
|
|
3047
3089
|
var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
|
|
3048
|
-
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$
|
|
3090
|
+
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$9, _templateObject10$7, _templateObject11$4, _templateObject12$3;
|
|
3049
3091
|
var ThumbDiameter = 16;
|
|
3050
3092
|
var SliderWrapper = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
|
|
3051
3093
|
var theme = _ref.theme;
|
|
@@ -3074,10 +3116,10 @@ var MarkLabel = styled__default.span(_templateObject6$b || (_templateObject6$b =
|
|
|
3074
3116
|
return alignment === 'right' && styled.css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
|
|
3075
3117
|
}, function (_ref8) {
|
|
3076
3118
|
var alignment = _ref8.alignment;
|
|
3077
|
-
return alignment === 'left' && styled.css(_templateObject9$
|
|
3119
|
+
return alignment === 'left' && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
|
|
3078
3120
|
});
|
|
3079
|
-
var ThumbWrapper = styled__default.div(_templateObject10$
|
|
3080
|
-
var Thumb = styled__default.span(_templateObject11$
|
|
3121
|
+
var ThumbWrapper = styled__default.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-right: 16px;\n left: 0;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n"])), ThumbDiameter);
|
|
3122
|
+
var Thumb = styled__default.span(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n width: ", "px;\n height: ", "px;\n border-radius: 8px;\n background-color: ", ";\n position: absolute;\n top: -7.5px;\n left: ", ";\n"])), ThumbDiameter, ThumbDiameter, function (_ref9) {
|
|
3081
3123
|
var theme = _ref9.theme,
|
|
3082
3124
|
bgColor = _ref9.bgColor;
|
|
3083
3125
|
return theme.colors.feedback[bgColor];
|
|
@@ -3849,7 +3891,7 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
|
|
|
3849
3891
|
return isDifferent;
|
|
3850
3892
|
};
|
|
3851
3893
|
|
|
3852
|
-
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$
|
|
3894
|
+
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$8, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
3853
3895
|
var CropLineStyle = styled.css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
|
|
3854
3896
|
var TopLine = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
|
|
3855
3897
|
var RightLine = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
@@ -3860,11 +3902,11 @@ var PointN = styled__default.div(_templateObject7$d || (_templateObject7$d = _ta
|
|
|
3860
3902
|
var isResizable = _ref.isResizable;
|
|
3861
3903
|
return isResizable && styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
|
|
3862
3904
|
});
|
|
3863
|
-
var PointNW = styled__default.div(_templateObject9$
|
|
3905
|
+
var PointNW = styled__default.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
|
|
3864
3906
|
var isResizable = _ref2.isResizable;
|
|
3865
|
-
return isResizable && styled.css(_templateObject10$
|
|
3907
|
+
return isResizable && styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
|
|
3866
3908
|
});
|
|
3867
|
-
var PointNE = styled__default.div(_templateObject11$
|
|
3909
|
+
var PointNE = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref3) {
|
|
3868
3910
|
var isResizable = _ref3.isResizable;
|
|
3869
3911
|
return isResizable && styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n cursor: ne-resize;\n "])));
|
|
3870
3912
|
});
|
|
@@ -3926,7 +3968,7 @@ var CropArea = function CropArea(_ref9) {
|
|
|
3926
3968
|
})));
|
|
3927
3969
|
};
|
|
3928
3970
|
|
|
3929
|
-
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$
|
|
3971
|
+
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b;
|
|
3930
3972
|
var Container$g = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
|
|
3931
3973
|
var theme = _ref.theme;
|
|
3932
3974
|
return theme.fontFamily.ui;
|
|
@@ -3948,7 +3990,7 @@ var SelectedArea = styled__default.div(_templateObject8$b || (_templateObject8$b
|
|
|
3948
3990
|
cropTop = _ref4.cropTop,
|
|
3949
3991
|
cropWidth = _ref4.cropWidth,
|
|
3950
3992
|
cropHeight = _ref4.cropHeight;
|
|
3951
|
-
return styled.css(_templateObject9$
|
|
3993
|
+
return styled.css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n "])), cropTop, cropLeft, cropWidth, cropHeight);
|
|
3952
3994
|
});
|
|
3953
3995
|
var viewDimensions = {
|
|
3954
3996
|
cropLeft: 0,
|
|
@@ -4212,7 +4254,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4212
4254
|
})))))), document.body);
|
|
4213
4255
|
};
|
|
4214
4256
|
|
|
4215
|
-
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$
|
|
4257
|
+
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c;
|
|
4216
4258
|
var CROP_HEIGHT_AREA = 500;
|
|
4217
4259
|
var CROP_WIDTH_AREA = 475;
|
|
4218
4260
|
var CANVAS_HEIGHT = 490;
|
|
@@ -4230,7 +4272,7 @@ var PreviewImage = styled__default.img(_templateObject5$j || (_templateObject5$j
|
|
|
4230
4272
|
var PlaceholderText = styled__default.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
|
|
4231
4273
|
var NoPhoto = styled__default.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
|
|
4232
4274
|
var StyledInputFileButton = styled__default(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
4233
|
-
var ButtonsWrapper = styled__default.div(_templateObject9$
|
|
4275
|
+
var ButtonsWrapper = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
|
|
4234
4276
|
var AvatarUploader = function AvatarUploader(_ref2) {
|
|
4235
4277
|
var _ref2$title = _ref2.title,
|
|
4236
4278
|
title = _ref2$title === void 0 ? 'Photograph' : _ref2$title,
|
|
@@ -5676,7 +5718,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5676
5718
|
})))));
|
|
5677
5719
|
};
|
|
5678
5720
|
|
|
5679
|
-
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$
|
|
5721
|
+
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$d, _templateObject10$9, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
|
|
5680
5722
|
var initializeInterval = function initializeInterval(day) {
|
|
5681
5723
|
return {
|
|
5682
5724
|
start: dateFns.set(day, {
|
|
@@ -5696,9 +5738,9 @@ var TimeZoneValue = styled__default.div(_templateObject5$p || (_templateObject5$
|
|
|
5696
5738
|
var CalendarArea = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
5697
5739
|
var CalendarHeader = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
|
|
5698
5740
|
var CurrentMonth = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n flex: 1;\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 20px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.5px;\n color: var(--primary-10);\n\n span {\n display: block;\n flex: 0;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.33px;\n }\n"])));
|
|
5699
|
-
var IconWrap$1 = styled__default.div(_templateObject9$
|
|
5700
|
-
var PaginateMonth = styled__default.button(_templateObject10$
|
|
5701
|
-
var CalBody = styled__default.div(_templateObject11$
|
|
5741
|
+
var IconWrap$1 = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5742
|
+
var PaginateMonth = styled__default.button(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 72px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n ", "{\n svg * {\n transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n }\n }\n\n &:hover: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);
|
|
5743
|
+
var CalBody = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5702
5744
|
var CalButtons = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n padding: 4px;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-top: 1px solid var(--grey-6);\n"])));
|
|
5703
5745
|
var CalRightButtons = styled__default.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
5704
5746
|
var CalRow = styled__default.div(_templateObject14$3 || (_templateObject14$3 = _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"])));
|
|
@@ -5752,18 +5794,6 @@ var CalCellB = styled__default(CalCell)(_templateObject24 || (_templateObject24
|
|
|
5752
5794
|
});
|
|
5753
5795
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5754
5796
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
5755
|
-
var isDateInterval = function isDateInterval(value) {
|
|
5756
|
-
if (value === null || value === undefined) {
|
|
5757
|
-
return false;
|
|
5758
|
-
}
|
|
5759
|
-
if (value.start === null || value.start === undefined) {
|
|
5760
|
-
return false;
|
|
5761
|
-
}
|
|
5762
|
-
if (value.end === null || value.end === undefined) {
|
|
5763
|
-
return false;
|
|
5764
|
-
}
|
|
5765
|
-
return value.start instanceof Date && value.end instanceof Date;
|
|
5766
|
-
};
|
|
5767
5797
|
var DatePicker = function DatePicker(_ref15) {
|
|
5768
5798
|
var _ref15$dateMode = _ref15.dateMode,
|
|
5769
5799
|
dateMode = _ref15$dateMode === void 0 ? 'interval' : _ref15$dateMode,
|
|
@@ -6075,7 +6105,7 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
|
6075
6105
|
};
|
|
6076
6106
|
|
|
6077
6107
|
var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
|
|
6078
|
-
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$
|
|
6108
|
+
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$a;
|
|
6079
6109
|
var LeftIconWrapper$1 = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0 6px;\n"])), function (_ref) {
|
|
6080
6110
|
var isSortAscending = _ref.isSortAscending;
|
|
6081
6111
|
return isSortAscending && styled.css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
@@ -6102,8 +6132,8 @@ var StyledButton$4 = styled__default.button(_templateObject5$q || (_templateObje
|
|
|
6102
6132
|
hasFlipArrow = _ref7.hasFlipArrow;
|
|
6103
6133
|
return isOpen && hasFlipArrow && styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-9);\n border: solid 1px var(--primary-9);\n color: var(--white-1);\n\n &, &:hover:enabled, &:active:enabled {\n color: var(--white-1);\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n }\n\n ", " ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n };\n "])), IconWrapper, FlipArrowContainer, IconWrapper);
|
|
6104
6134
|
});
|
|
6105
|
-
var InnerContainer$3 = styled__default.div(_templateObject9$
|
|
6106
|
-
var ButtonText = styled__default.div(_templateObject10$
|
|
6135
|
+
var InnerContainer$3 = styled__default.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
6136
|
+
var ButtonText = styled__default.div(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose([""])));
|
|
6107
6137
|
var FilterButton = function FilterButton(_ref8) {
|
|
6108
6138
|
var icon = _ref8.icon,
|
|
6109
6139
|
_ref8$hasFlipArrow = _ref8.hasFlipArrow,
|
|
@@ -6140,7 +6170,7 @@ var FilterButton = function FilterButton(_ref8) {
|
|
|
6140
6170
|
};
|
|
6141
6171
|
|
|
6142
6172
|
var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
|
|
6143
|
-
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$
|
|
6173
|
+
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$f, _templateObject10$b;
|
|
6144
6174
|
var Title$1 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n display: block;\n color: var(--grey-12);\n font-size: 14px;\n font-weight: 500;\n user-select: none;\n pointer-events: none;\n white-space: nowrap;\n"])));
|
|
6145
6175
|
var FakeCheckbox = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
|
|
6146
6176
|
var FakeCheckboxInner = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
|
|
@@ -6150,7 +6180,7 @@ var FakeInnerRadio = styled__default.div(_templateObject6$m || (_templateObject6
|
|
|
6150
6180
|
var Container$q = styled__default.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n gap: 12px;\n\n ", ";\n"])), function (_ref) {
|
|
6151
6181
|
var selected = _ref.selected,
|
|
6152
6182
|
disabled = _ref.disabled;
|
|
6153
|
-
return styled.css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n ", ", ", " {\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-unchecked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-unchecked-background-color);\n }\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-out);\n }\n \n "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && styled.css(_templateObject9$
|
|
6183
|
+
return styled.css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n ", ", ", " {\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-unchecked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-unchecked-background-color);\n }\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-out);\n }\n \n "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && styled.css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n ", " {\n color: var(--input-label-active);\n font-weight: 600;\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-checked-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-checked-background-color);\n }\n }\n \n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-checked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-checked-hover-background-color);\n }\n }\n }\n \n\n "])), Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner), disabled && styled.css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
|
|
6154
6184
|
});
|
|
6155
6185
|
var FilterOption = function FilterOption(_ref2) {
|
|
6156
6186
|
var title = _ref2.title,
|
|
@@ -6681,7 +6711,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6681
6711
|
}))))));
|
|
6682
6712
|
};
|
|
6683
6713
|
|
|
6684
|
-
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$z, _templateObject5$v, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$
|
|
6714
|
+
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$z, _templateObject5$v, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$g, _templateObject10$c, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
|
|
6685
6715
|
var Container$w = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6686
6716
|
var ContextActionBaseCSS = styled.css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n outline: none;\n text-decoration: none;\n padding: 0;\n"])));
|
|
6687
6717
|
var ContextIcon = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n ", ";\n width: 30px;\n height: 30px;\n border-radius: 3px;\n display:flex;\n justify-content:center;\n align-items:center;\n svg {\n display: block;\n }\n"])), function (_ref) {
|
|
@@ -6701,7 +6731,7 @@ var ContentBox$1 = styled__default.div(_templateObject8$l || (_templateObject8$l
|
|
|
6701
6731
|
}, function (_ref5) {
|
|
6702
6732
|
var openState = _ref5.openState,
|
|
6703
6733
|
disabled = _ref5.disabled;
|
|
6704
|
-
return openState && styled.css(_templateObject9$
|
|
6734
|
+
return openState && styled.css(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && styled.css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && styled.css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && styled.css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
|
|
6705
6735
|
});
|
|
6706
6736
|
var ButtonWrapper$1 = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
6707
6737
|
var GroupStyles = styled.css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n width: auto;\n align-items: center;\n gap: 16px;\n"])));
|
|
@@ -7638,7 +7668,7 @@ var StatusIcon = function StatusIcon(_ref3) {
|
|
|
7638
7668
|
}));
|
|
7639
7669
|
};
|
|
7640
7670
|
|
|
7641
|
-
var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$
|
|
7671
|
+
var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$h, _templateObject10$d, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$3, _templateObject17$3;
|
|
7642
7672
|
var HandleTouchReactionKeyframes = styled.keyframes(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(3);\n }\n\n 100% {\n transform: scale(1.75);\n }\n"])));
|
|
7643
7673
|
var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0.5);\n }\n"])));
|
|
7644
7674
|
var HandleBase = styled__default.svg(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
|
|
@@ -7663,17 +7693,17 @@ var HandleReactiveFill = styled__default.circle(_templateObject8$n || (_template
|
|
|
7663
7693
|
styling = _ref3.styling;
|
|
7664
7694
|
return theme.custom.lines[styling].handleReactiveFill.fill;
|
|
7665
7695
|
});
|
|
7666
|
-
var HandleReactiveRing = styled__default.circle(_templateObject9$
|
|
7696
|
+
var HandleReactiveRing = styled__default.circle(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref4) {
|
|
7667
7697
|
var theme = _ref4.theme,
|
|
7668
7698
|
styling = _ref4.styling;
|
|
7669
7699
|
return theme.custom.lines[styling].handleReactiveRing.stroke;
|
|
7670
7700
|
});
|
|
7671
|
-
var HandleContrastLayer = styled__default.circle(_templateObject10$
|
|
7701
|
+
var HandleContrastLayer = styled__default.circle(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
|
|
7672
7702
|
var theme = _ref5.theme,
|
|
7673
7703
|
styling = _ref5.styling;
|
|
7674
7704
|
return theme.custom.lines[styling].handleContrastLayer.stroke;
|
|
7675
7705
|
});
|
|
7676
|
-
var HandleShadowLayer = styled__default.circle(_templateObject11$
|
|
7706
|
+
var HandleShadowLayer = styled__default.circle(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: url(#", ");\n"])), function (props) {
|
|
7677
7707
|
return props.fillID;
|
|
7678
7708
|
});
|
|
7679
7709
|
var GrabHandleIndexGroup = styled__default.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
|
|
@@ -7871,7 +7901,7 @@ var HandleUnit = function HandleUnit(props) {
|
|
|
7871
7901
|
}, index + pointIndexOffset))));
|
|
7872
7902
|
};
|
|
7873
7903
|
|
|
7874
|
-
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$
|
|
7904
|
+
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$i, _templateObject10$e, _templateObject11$9, _templateObject12$8, _templateObject13$7, _templateObject14$6;
|
|
7875
7905
|
var ContrastLine = styled__default.line(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n mix-blend-mode: multiply;\n stroke-width: ", "px;\n stroke-opacity: ", ";\n cursor: pointer;\n"])), function (_ref) {
|
|
7876
7906
|
var theme = _ref.theme,
|
|
7877
7907
|
styling = _ref.styling;
|
|
@@ -7913,14 +7943,14 @@ var LabelText$2 = styled__default.text(_templateObject8$o || (_templateObject8$o
|
|
|
7913
7943
|
return theme.custom.lines[styling].label.fill;
|
|
7914
7944
|
}, function (_ref9) {
|
|
7915
7945
|
var showLabelShadow = _ref9.showLabelShadow;
|
|
7916
|
-
return showLabelShadow && styled.css(_templateObject9$
|
|
7946
|
+
return showLabelShadow && styled.css(_templateObject9$i || (_templateObject9$i = _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 "])));
|
|
7917
7947
|
});
|
|
7918
|
-
var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$
|
|
7948
|
+
var GrabHandleContrast = styled__default(GrabHandle)(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
|
|
7919
7949
|
var theme = _ref10.theme,
|
|
7920
7950
|
styling = _ref10.styling;
|
|
7921
7951
|
return theme.custom.lines[styling].grabHandleContrast.stroke;
|
|
7922
7952
|
});
|
|
7923
|
-
var GrabHandleGroup = styled__default.g(_templateObject11$
|
|
7953
|
+
var GrabHandleGroup = styled__default.g(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
|
|
7924
7954
|
return props.showIndex && styled.css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
|
|
7925
7955
|
});
|
|
7926
7956
|
var DMCircle = styled__default.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
|
|
@@ -9702,7 +9732,7 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
|
9702
9732
|
});
|
|
9703
9733
|
};
|
|
9704
9734
|
|
|
9705
|
-
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$
|
|
9735
|
+
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$j, _templateObject10$f, _templateObject11$a;
|
|
9706
9736
|
var CopyToClipboard = styled__default.button(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n\n cursor: pointer;\n opacity: 0;\n\n position: absolute;\n right: 0;\n top: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n outline: none;\n\n ", "\n\n svg {\n display: block;\n }\n\n &:hover {\n opacity: 1 !important;\n }\n\n"])), function (_ref) {
|
|
9707
9737
|
var theme = _ref.theme;
|
|
9708
9738
|
return theme && styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
@@ -9724,13 +9754,13 @@ var CellContainer = styled__default.div(_templateObject3$S || (_templateObject3$
|
|
|
9724
9754
|
});
|
|
9725
9755
|
var UnitText = styled__default.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
|
|
9726
9756
|
var theme = _ref5.theme;
|
|
9727
|
-
return styled.css(_templateObject9$
|
|
9757
|
+
return styled.css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
9728
9758
|
});
|
|
9729
|
-
var StatusBlip = styled__default.div(_templateObject10$
|
|
9759
|
+
var StatusBlip = styled__default.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
|
|
9730
9760
|
var _ref6$status = _ref6.status,
|
|
9731
9761
|
status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
|
|
9732
9762
|
colors = _ref6.theme.colors;
|
|
9733
|
-
return styled.css(_templateObject11$
|
|
9763
|
+
return styled.css(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n background: ", ";\n "])), colors.status[status]);
|
|
9734
9764
|
});
|
|
9735
9765
|
var TypeTableCell = function TypeTableCell(_ref7) {
|
|
9736
9766
|
var _ref7$showUnit = _ref7.showUnit,
|
|
@@ -9885,7 +9915,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
9885
9915
|
}), header);
|
|
9886
9916
|
};
|
|
9887
9917
|
|
|
9888
|
-
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$
|
|
9918
|
+
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$k, _templateObject10$g, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$7, _templateObject15$5, _templateObject16$4, _templateObject17$4;
|
|
9889
9919
|
var HeaderRow = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
9890
9920
|
var HeaderItem = styled__default.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
|
|
9891
9921
|
return p.theme.fontFamily.ui;
|
|
@@ -9908,11 +9938,11 @@ var HeaderItem = styled__default.div(_templateObject2$$ || (_templateObject2$$ =
|
|
|
9908
9938
|
isSortActive = _ref4.isSortActive;
|
|
9909
9939
|
return headerStyle === 'subHeader' && styled.css(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
|
|
9910
9940
|
});
|
|
9911
|
-
var TitleItems = styled__default.div(_templateObject9$
|
|
9941
|
+
var TitleItems = styled__default.div(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
|
|
9912
9942
|
var alignment = _ref5.alignment;
|
|
9913
|
-
return alignment && styled.css(_templateObject10$
|
|
9943
|
+
return alignment && styled.css(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
|
|
9914
9944
|
});
|
|
9915
|
-
var GroupTitle = styled__default.div(_templateObject11$
|
|
9945
|
+
var GroupTitle = styled__default.div(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n margin-bottom: 4px;\n"])));
|
|
9916
9946
|
var Title$4 = styled__default.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
|
|
9917
9947
|
var typography = _ref6.theme.typography;
|
|
9918
9948
|
return styled.css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), typography.tables.groupName);
|
|
@@ -10142,7 +10172,7 @@ var TypeTable = function TypeTable(_ref4) {
|
|
|
10142
10172
|
};
|
|
10143
10173
|
|
|
10144
10174
|
var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
10145
|
-
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$
|
|
10175
|
+
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$l, _templateObject10$h;
|
|
10146
10176
|
var Container$M = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
10147
10177
|
var theme = _ref.theme;
|
|
10148
10178
|
return styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
@@ -10154,10 +10184,10 @@ var EditContainer = styled__default.div(_templateObject6$B || (_templateObject6$
|
|
|
10154
10184
|
var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose([""])));
|
|
10155
10185
|
var TextContainer$3 = styled__default.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
|
|
10156
10186
|
var alignment = _ref2.alignment;
|
|
10157
|
-
return alignment === 'center' && styled.css(_templateObject9$
|
|
10187
|
+
return alignment === 'center' && styled.css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
10158
10188
|
}, function (_ref3) {
|
|
10159
10189
|
var alignment = _ref3.alignment;
|
|
10160
|
-
return alignment === 'right' && styled.css(_templateObject10$
|
|
10190
|
+
return alignment === 'right' && styled.css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
|
|
10161
10191
|
}, StyledIconButton$1, StyledIconButton$1);
|
|
10162
10192
|
var EditCell = function EditCell(_ref4) {
|
|
10163
10193
|
var _ref4$type = _ref4.type,
|
|
@@ -11906,7 +11936,7 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
11906
11936
|
}));
|
|
11907
11937
|
};
|
|
11908
11938
|
|
|
11909
|
-
var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$
|
|
11939
|
+
var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$m;
|
|
11910
11940
|
var Container$V = styled__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
|
|
11911
11941
|
var LeftData = styled__default.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
11912
11942
|
var hasRightData = _ref.hasRightData;
|
|
@@ -11929,7 +11959,7 @@ var Title$5 = styled__default.div(_templateObject8$t || (_templateObject8$t = _t
|
|
|
11929
11959
|
var hasMarginBottom = _ref5.hasMarginBottom;
|
|
11930
11960
|
return hasMarginBottom && "margin-bottom: 6px;";
|
|
11931
11961
|
});
|
|
11932
|
-
var SubTitle = styled__default.div(_templateObject9$
|
|
11962
|
+
var SubTitle = styled__default.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
|
|
11933
11963
|
var PanelMetaData = function PanelMetaData(_ref6) {
|
|
11934
11964
|
var _ref6$deviceIcon = _ref6.deviceIcon,
|
|
11935
11965
|
deviceIcon = _ref6$deviceIcon === void 0 ? 'Camera' : _ref6$deviceIcon,
|
|
@@ -12081,7 +12111,7 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12081
12111
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
12082
12112
|
};
|
|
12083
12113
|
|
|
12084
|
-
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$
|
|
12114
|
+
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$n;
|
|
12085
12115
|
var WIDTH_PER_NUMBER = 12;
|
|
12086
12116
|
var PaginationContainer = styled__default.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-top: 20px;\n padding-bottom: 20px;\n width: 100%;\n height: fit-content;\n margin-right: 10px;\n white-space: nowrap;\n gap: 40px;\n vertical-align: baseline;\n"])));
|
|
12087
12117
|
var StaticPageCount = styled__default.div(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n font-size: 14px;\n color: var(--grey-8);\n height: 100%;\n text-align: left;\n padding-top: 1px;\n padding-right: 1px;\n"])));
|
|
@@ -12106,7 +12136,7 @@ var ArrowButton = styled__default.button(_templateObject8$u || (_templateObject8
|
|
|
12106
12136
|
var active = _ref5.active;
|
|
12107
12137
|
return active ? '1' : '0.5';
|
|
12108
12138
|
});
|
|
12109
|
-
var ItemsSelectWrapper = styled__default.div(_templateObject9$
|
|
12139
|
+
var ItemsSelectWrapper = styled__default.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n ", " {\n width: ", ";\n }\n"])), SelectWrapper, function (_ref6) {
|
|
12110
12140
|
var width = _ref6.width;
|
|
12111
12141
|
return width ? width : "60px";
|
|
12112
12142
|
});
|
|
@@ -12594,7 +12624,7 @@ var ResizeLine = function ResizeLine(_ref4) {
|
|
|
12594
12624
|
}))), React__default.createElement(Line, null)));
|
|
12595
12625
|
};
|
|
12596
12626
|
|
|
12597
|
-
var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$
|
|
12627
|
+
var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$i, _templateObject11$c, _templateObject12$a, _templateObject13$9, _templateObject14$8, _templateObject15$6, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
|
|
12598
12628
|
var DebugData = styled__default.div(_templateObject$1y || (_templateObject$1y = _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"])));
|
|
12599
12629
|
var MainArea = styled__default.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
12600
12630
|
var $layout = _ref.$layout,
|
|
@@ -12617,15 +12647,15 @@ var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _
|
|
|
12617
12647
|
var $layout = _ref5.$layout,
|
|
12618
12648
|
$collapseState = _ref5.$collapseState,
|
|
12619
12649
|
$minDimension = _ref5.$minDimension;
|
|
12620
|
-
return $collapseState === 'collapsing' ? styled.css(_templateObject9$
|
|
12650
|
+
return $collapseState === 'collapsing' ? styled.css(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
|
|
12621
12651
|
}, function (_ref6) {
|
|
12622
12652
|
var $collapseState = _ref6.$collapseState;
|
|
12623
|
-
return $collapseState === 'collapsed' ? styled.css(_templateObject10$
|
|
12653
|
+
return $collapseState === 'collapsed' ? styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
12624
12654
|
}, function (_ref7) {
|
|
12625
12655
|
var $layout = _ref7.$layout,
|
|
12626
12656
|
$collapseState = _ref7.$collapseState,
|
|
12627
12657
|
$minDimension = _ref7.$minDimension;
|
|
12628
|
-
return $collapseState === 'peeking' ? styled.css(_templateObject11$
|
|
12658
|
+
return $collapseState === 'peeking' ? styled.css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
12629
12659
|
}, function (_ref8) {
|
|
12630
12660
|
var $layout = _ref8.$layout,
|
|
12631
12661
|
$collapseState = _ref8.$collapseState,
|
|
@@ -12955,7 +12985,7 @@ var ContentArea = styled__default.div(_templateObject6$K || (_templateObject6$K
|
|
|
12955
12985
|
return legacyLayout && styled.css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
|
|
12956
12986
|
});
|
|
12957
12987
|
|
|
12958
|
-
var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$
|
|
12988
|
+
var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$a, _templateObject14$9, _templateObject15$7;
|
|
12959
12989
|
var ContextTitle = styled__default.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n opacity: 0;\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref) {
|
|
12960
12990
|
var compact = _ref.compact;
|
|
12961
12991
|
return compact && styled.css(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
@@ -12967,11 +12997,11 @@ var StyledAnchor = styled__default.a(_templateObject6$L || (_templateObject6$L =
|
|
|
12967
12997
|
var ExternalIconWrapper = styled__default.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
12968
12998
|
var ContextWrapper = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref2) {
|
|
12969
12999
|
var $menuOpen = _ref2.$menuOpen;
|
|
12970
|
-
return $menuOpen && styled.css(_templateObject9$
|
|
13000
|
+
return $menuOpen && styled.css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
12971
13001
|
}, ContextIcon$1, IconWrapper);
|
|
12972
|
-
var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$
|
|
13002
|
+
var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
|
|
12973
13003
|
var $menuOpen = _ref3.$menuOpen;
|
|
12974
|
-
return $menuOpen && styled.css(_templateObject11$
|
|
13004
|
+
return $menuOpen && styled.css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
12975
13005
|
}, ContextIcon$1, IconWrapper, function (_ref4) {
|
|
12976
13006
|
var $isActive = _ref4.$isActive;
|
|
12977
13007
|
return $isActive && styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n color: var(--grey-12);\n\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
|
|
@@ -13154,7 +13184,7 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
13154
13184
|
};
|
|
13155
13185
|
};
|
|
13156
13186
|
|
|
13157
|
-
var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$
|
|
13187
|
+
var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$b;
|
|
13158
13188
|
var Submenu = styled__default.ul(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
13159
13189
|
var SubmenuHeader = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
13160
13190
|
var SubmenuContainerInner = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
@@ -13164,9 +13194,9 @@ var ExternalIconWrapper$1 = styled__default.div(_templateObject6$M || (_template
|
|
|
13164
13194
|
var SubmenuItemAnchor = styled__default.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
13165
13195
|
var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
|
|
13166
13196
|
var isActive = _ref.isActive;
|
|
13167
|
-
return styled.css(_templateObject9$
|
|
13197
|
+
return styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && styled.css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
13168
13198
|
});
|
|
13169
|
-
var SubmenuContainer = styled__default.div(_templateObject11$
|
|
13199
|
+
var SubmenuContainer = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
13170
13200
|
var ContextContainer = styled__default.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
|
|
13171
13201
|
var mobileMenu = _ref2.mobileMenu;
|
|
13172
13202
|
return mobileMenu ? '30px' : '70px';
|
|
@@ -13263,7 +13293,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
13263
13293
|
return output;
|
|
13264
13294
|
};
|
|
13265
13295
|
|
|
13266
|
-
var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$
|
|
13296
|
+
var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$c, _templateObject14$a;
|
|
13267
13297
|
var Logo = styled__default(reactRouterDom.Link)(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
|
|
13268
13298
|
var LogoMark = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _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"])));
|
|
13269
13299
|
var LogoType = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
|
|
@@ -13272,11 +13302,11 @@ var SVGObjectText = styled__default.object(_templateObject5$11 || (_templateObje
|
|
|
13272
13302
|
var NavigationContainer = styled__default.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose([""])));
|
|
13273
13303
|
var MenuFooter = styled__default.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
|
|
13274
13304
|
var FooterItemContainer = styled__default.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
13275
|
-
var PushContainer = styled__default.div(_templateObject9$
|
|
13305
|
+
var PushContainer = styled__default.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
|
|
13276
13306
|
var isPinned = _ref.isPinned;
|
|
13277
|
-
return styled.css(_templateObject10$
|
|
13307
|
+
return styled.css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
|
|
13278
13308
|
});
|
|
13279
|
-
var Container$10 = styled__default.div(_templateObject11$
|
|
13309
|
+
var Container$10 = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref2) {
|
|
13280
13310
|
var open = _ref2.open,
|
|
13281
13311
|
desktopSize = _ref2.desktopSize;
|
|
13282
13312
|
return styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
@@ -13381,7 +13411,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13381
13411
|
})) : null))), document.body));
|
|
13382
13412
|
};
|
|
13383
13413
|
|
|
13384
|
-
var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$
|
|
13414
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$m;
|
|
13385
13415
|
var MetaConatiner = styled__default.div(_templateObject$1D || (_templateObject$1D = _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"])));
|
|
13386
13416
|
var LabelTitle = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _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"])));
|
|
13387
13417
|
var LabelContent = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _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"])));
|
|
@@ -13390,8 +13420,8 @@ var TitleContainer = styled__default.div(_templateObject5$12 || (_templateObject
|
|
|
13390
13420
|
var Container$11 = styled__default.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
|
|
13391
13421
|
var TitleBox = styled__default.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
13392
13422
|
var IconBox = styled__default.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$11);
|
|
13393
|
-
var CopyTextBox = styled__default.pre(_templateObject9$
|
|
13394
|
-
var CopyBox = styled__default.div(_templateObject10$
|
|
13423
|
+
var CopyTextBox = styled__default.pre(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: var(--font-data);\n right:10px;\n margin-top: -23px;\n"])));
|
|
13424
|
+
var CopyBox = styled__default.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n"])));
|
|
13395
13425
|
var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
13396
13426
|
var item = _ref.item,
|
|
13397
13427
|
onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
|
|
@@ -13475,7 +13505,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13475
13505
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13476
13506
|
};
|
|
13477
13507
|
|
|
13478
|
-
var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$
|
|
13508
|
+
var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$n, _templateObject11$g, _templateObject12$e, _templateObject13$d, _templateObject14$b;
|
|
13479
13509
|
var DrawerTop = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose([""])));
|
|
13480
13510
|
var DrawerBottom = styled__default.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
|
|
13481
13511
|
var DrawerHeader = styled__default.h2(_templateObject3$1h || (_templateObject3$1h = _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"])));
|
|
@@ -13484,10 +13514,10 @@ var UserOptions = styled__default.div(_templateObject5$13 || (_templateObject5$1
|
|
|
13484
13514
|
var Logout = styled__default.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
|
|
13485
13515
|
var LinkMenu = styled__default.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
13486
13516
|
var LinkMenuItem = styled__default.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
13487
|
-
var IconWrapperFooter = styled__default.div(_templateObject9$
|
|
13488
|
-
var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$
|
|
13517
|
+
var IconWrapperFooter = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n padding-right: 20px;\n"])));
|
|
13518
|
+
var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 400;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
|
|
13489
13519
|
var isActive = _ref.isActive;
|
|
13490
|
-
return isActive && styled.css(_templateObject11$
|
|
13520
|
+
return isActive && styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
|
|
13491
13521
|
});
|
|
13492
13522
|
var FooterMeta = styled__default.div(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
|
|
13493
13523
|
var icon = _ref2.icon;
|
|
@@ -13677,7 +13707,7 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13677
13707
|
return React__default.createElement(Container$14, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13678
13708
|
};
|
|
13679
13709
|
|
|
13680
|
-
var _templateObject$1I, _templateObject2$1t, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$
|
|
13710
|
+
var _templateObject$1I, _templateObject2$1t, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$e;
|
|
13681
13711
|
var CoreStyle = styled.css(_templateObject$1I || (_templateObject$1I = _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"])));
|
|
13682
13712
|
var ContainerStatic = styled__default.div(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13683
13713
|
var themeColor = _ref.themeColor;
|
|
@@ -13687,10 +13717,10 @@ var DefaultText = styled__default.span(_templateObject5$15 || (_templateObject5$
|
|
|
13687
13717
|
var LinkText = styled__default.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
|
|
13688
13718
|
var ContainerLinked = styled__default.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n a {\n ", ";\n\n text-decoration: none;\n\n ", ";\n\n &:hover {\n ", ";\n }\n }\n"])), CoreStyle, function (_ref2) {
|
|
13689
13719
|
var themeColor = _ref2.themeColor;
|
|
13690
|
-
return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject9$
|
|
13720
|
+
return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13691
13721
|
}, function (_ref3) {
|
|
13692
13722
|
var themeColor = _ref3.themeColor;
|
|
13693
|
-
return themeColor ? styled.css(_templateObject10$
|
|
13723
|
+
return themeColor ? styled.css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n background-color: var(--", "-9);\n border: 2px solid var(--", "-9);\n color: var(--white-12);\n "])), themeColor, themeColor) : styled.css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
|
|
13694
13724
|
});
|
|
13695
13725
|
var Container$15 = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13696
13726
|
var ready = _ref4.ready,
|
|
@@ -13762,7 +13792,7 @@ var TopBarBadge = function TopBarBadge(_ref5) {
|
|
|
13762
13792
|
}), badgeComponent);
|
|
13763
13793
|
};
|
|
13764
13794
|
|
|
13765
|
-
var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$
|
|
13795
|
+
var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$f;
|
|
13766
13796
|
var Container$16 = styled__default.div(_templateObject$1J || (_templateObject$1J = _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"])));
|
|
13767
13797
|
var RightArea$1 = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13768
13798
|
var SearchBar = styled__default.div(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
@@ -13774,10 +13804,10 @@ var DrawerToggle = styled__default.button.attrs({
|
|
|
13774
13804
|
type: 'button'
|
|
13775
13805
|
})(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n position: relative;\n flex: 0 56px;\n width: 56px;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: none;\n outline: none;\n cursor: pointer;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n height: 5px;\n background-color: transparent;\n border-radius: 2px 2px 0 0;\n }\n\n transition: background-color var(--speed-normal) var(--easing-primary-out);\n\n svg {\n transition: transform var(--speed-normal) var(--easing-primary-out);\n }\n\n &:hover {\n opacity: 0.9;\n &::after {\n background-color: var(--primary-6);\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
13776
13806
|
var isActive = _ref.isActive;
|
|
13777
|
-
return isActive && styled.css(_templateObject9$
|
|
13807
|
+
return isActive && styled.css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
|
|
13778
13808
|
});
|
|
13779
|
-
var DrawerPortalWrapper = styled__default.div(_templateObject10$
|
|
13780
|
-
var Drawer = styled__default.div(_templateObject11$
|
|
13809
|
+
var DrawerPortalWrapper = styled__default.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose([""])));
|
|
13810
|
+
var Drawer = styled__default.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n\n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
|
|
13781
13811
|
var baseWidth = _ref2.baseWidth;
|
|
13782
13812
|
return baseWidth ? baseWidth : "200px";
|
|
13783
13813
|
}, function (_ref3) {
|
|
@@ -14383,7 +14413,7 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14383
14413
|
};
|
|
14384
14414
|
|
|
14385
14415
|
var _excluded$Q = ["children"];
|
|
14386
|
-
var _templateObject$1W, _templateObject2$1E, _templateObject3$1r, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$
|
|
14416
|
+
var _templateObject$1W, _templateObject2$1E, _templateObject3$1r, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
|
|
14387
14417
|
var Container$1f = styled__default.div(_templateObject$1W || (_templateObject$1W = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
|
|
14388
14418
|
var LogoContainer = styled__default.div(_templateObject2$1E || (_templateObject2$1E = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
|
|
14389
14419
|
var LogoTopText = styled__default.div(_templateObject3$1r || (_templateObject3$1r = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
|
|
@@ -14392,7 +14422,7 @@ var SidebarBox = styled__default.div(_templateObject5$18 || (_templateObject5$18
|
|
|
14392
14422
|
var SidebarHeading = styled__default.div(_templateObject6$U || (_templateObject6$U = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
|
|
14393
14423
|
var SidebarLinkHeading = styled__default.div(_templateObject7$P || (_templateObject7$P = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14394
14424
|
var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$G || (_templateObject8$G = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14395
|
-
var SLink = styled__default(reactRouterDom.Link)(_templateObject9$
|
|
14425
|
+
var SLink = styled__default(reactRouterDom.Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
|
|
14396
14426
|
var SidebarLink = function SidebarLink(_ref) {
|
|
14397
14427
|
var title = _ref.title,
|
|
14398
14428
|
to = _ref.to;
|