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.modern.js
CHANGED
|
@@ -1531,16 +1531,16 @@ var _templateObject$1;
|
|
|
1531
1531
|
var animationVariables = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n :root {\n\n --easing-primary-in-out: cubic-bezier(0.76, 0, 0.24, 1);\n --easing-primary-in: cubic-bezier(0.5, 0, 0.75, 0);\n --easing-primary-out: cubic-bezier(0.25, 1, 0.5, 1);\n \n --speed-faster: 0.085s;\n --speed-fast: 0.175s;\n --speed-normal: 0.35s;\n --speed-slow: 0.7s;\n --speed-slower: 1.4s;\n --speed-slowest: 2.8s;\n \n }\n"])));
|
|
1532
1532
|
|
|
1533
1533
|
var _templateObject$2;
|
|
1534
|
-
var colorVariables = css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n .light-theme {\n --shadow-primary-default: var(--grey-a4);\n --shadow-primary-elevate: var(--primary-a5);\n\n --shadow-secondary-default: var(--grey-3);\n --shadow-secondary-elevate: var(--grey-a4);\n\n --shadow-warning-default: var(--grey-a4);\n --shadow-warning-elevate: var(--warning-a5);\n }\n\n .dark-theme {\n --shadow-primary-default: var(--primary-a2);\n --shadow-primary-elevate: var(--primary-a2);\n\n --shadow-secondary-default: var(--black-a8);\n --shadow-secondary-elevate: var(--primary-a4);\n\n --shadow-warning-default: var(--grey-a3);\n --shadow-warning-elevate: var(--warning-a7);\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n /* 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"])));
|
|
1534
|
+
var colorVariables = css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n .light-theme {\n --shadow-primary-default: var(--grey-a4);\n --shadow-primary-elevate: var(--primary-a5);\n\n --shadow-secondary-default: var(--grey-3);\n --shadow-secondary-elevate: var(--grey-a4);\n\n --shadow-warning-default: var(--grey-a4);\n --shadow-warning-elevate: var(--warning-a5);\n }\n\n .dark-theme {\n --shadow-primary-default: var(--primary-a2);\n --shadow-primary-elevate: var(--primary-a2);\n\n --shadow-secondary-default: var(--black-a8);\n --shadow-secondary-elevate: var(--primary-a4);\n\n --shadow-warning-default: var(--grey-a3);\n --shadow-warning-elevate: var(--warning-a7);\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n /* 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"])));
|
|
1535
1535
|
|
|
1536
1536
|
var _templateObject$3;
|
|
1537
|
-
var ThemeVariables = createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --input-height: 40px;\n --input-compact-height: 32px;\n --input-required-dot-display: inline-block;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n
|
|
1537
|
+
var ThemeVariables = createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --input-height: 40px;\n --input-compact-height: 32px;\n --input-required-dot-display: inline-block;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-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);
|
|
1538
1538
|
|
|
1539
1539
|
var _templateObject$4;
|
|
1540
|
-
var BaseStyles = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n text-rendering: geometricPrecision
|
|
1540
|
+
var BaseStyles = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n text-rendering: geometricPrecision;\n }\n body, html , #root {\n min-width: 100%;\n min-height: 100vh;\n margin: 0;\n }\n\n body {\n font-family: var(--font-ui);\n color: var(--grey-11);\n background: var(--main-background-gradient);\n background-attachment: fixed;\n }\n\n"])));
|
|
1541
1541
|
|
|
1542
1542
|
var _templateObject$5, _templateObject2, _templateObject3;
|
|
1543
|
-
var wrapperCss = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n
|
|
1543
|
+
var wrapperCss = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\n line-height: 0;\n\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n }\n"])));
|
|
1544
1544
|
var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1545
1545
|
var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1546
1546
|
var Icon = function Icon(_ref) {
|
|
@@ -1922,48 +1922,56 @@ var Tooltip = function Tooltip(_ref6) {
|
|
|
1922
1922
|
}), message)), document.body);
|
|
1923
1923
|
};
|
|
1924
1924
|
|
|
1925
|
-
var _excluded = ["design", "size", "shadow", "noPadding", "children"];
|
|
1926
|
-
var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1;
|
|
1925
|
+
var _excluded = ["design", "size", "shadow", "noPadding", "loading", "children"];
|
|
1926
|
+
var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1;
|
|
1927
1927
|
var activeAnimation = function activeAnimation(shadow) {
|
|
1928
|
-
var animation = keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n 0% {\n box-shadow
|
|
1928
|
+
var animation = 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)' : '');
|
|
1929
1929
|
return animation;
|
|
1930
1930
|
};
|
|
1931
|
-
var StyledButton = styled.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
|
|
1932
|
-
var $noPadding = _ref.$noPadding
|
|
1933
|
-
|
|
1931
|
+
var StyledButton = styled.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) {
|
|
1932
|
+
var $noPadding = _ref.$noPadding,
|
|
1933
|
+
isOutline = _ref.isOutline;
|
|
1934
|
+
return $noPadding ? css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n padding: 0px;\n "]))) : css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n padding: ", ";\n "])), isOutline ? "var(--button-h-padding-outline)" : "var(--button-h-padding)");
|
|
1934
1935
|
}, function (_ref2) {
|
|
1935
1936
|
var $shadow = _ref2.$shadow;
|
|
1936
|
-
return $shadow ? css(
|
|
1937
|
+
return $shadow ? 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 "]))) : css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n box-shadow: 0 0 0 var(--button-inner-shadow-color) inset;\n "])));
|
|
1937
1938
|
}, function (_ref3) {
|
|
1938
1939
|
var $shadow = _ref3.$shadow;
|
|
1939
|
-
return $shadow ? css(
|
|
1940
|
+
return $shadow ? 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 "]))) : css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n box-shadow: 0 0 5px var(--button-hover-inner-shadow-color) inset;\n "])));
|
|
1940
1941
|
}, function (_ref4) {
|
|
1941
1942
|
var $shadow = _ref4.$shadow;
|
|
1942
|
-
return css(
|
|
1943
|
+
return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n animation: var(--speed-normal) var(--easing-primary-in-out) ", " forwards;\n "])), function () {
|
|
1943
1944
|
return activeAnimation($shadow);
|
|
1944
1945
|
});
|
|
1946
|
+
}, function (_ref5) {
|
|
1947
|
+
var $loading = _ref5.$loading;
|
|
1948
|
+
return $loading && css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n &:disabled {\n opacity: 1;\n cursor: wait;\n color: var(--button-loading-text-color);\n }\n "])));
|
|
1945
1949
|
});
|
|
1946
|
-
var Button = function Button(
|
|
1947
|
-
var
|
|
1948
|
-
design =
|
|
1949
|
-
|
|
1950
|
-
size =
|
|
1951
|
-
|
|
1952
|
-
shadow =
|
|
1953
|
-
|
|
1954
|
-
noPadding =
|
|
1955
|
-
|
|
1956
|
-
|
|
1950
|
+
var Button = function Button(_ref6) {
|
|
1951
|
+
var _ref6$design = _ref6.design,
|
|
1952
|
+
design = _ref6$design === void 0 ? 'primary' : _ref6$design,
|
|
1953
|
+
_ref6$size = _ref6.size,
|
|
1954
|
+
size = _ref6$size === void 0 ? 'normal' : _ref6$size,
|
|
1955
|
+
_ref6$shadow = _ref6.shadow,
|
|
1956
|
+
shadow = _ref6$shadow === void 0 ? false : _ref6$shadow,
|
|
1957
|
+
_ref6$noPadding = _ref6.noPadding,
|
|
1958
|
+
noPadding = _ref6$noPadding === void 0 ? false : _ref6$noPadding,
|
|
1959
|
+
_ref6$loading = _ref6.loading,
|
|
1960
|
+
loading = _ref6$loading === void 0 ? false : _ref6$loading,
|
|
1961
|
+
children = _ref6.children,
|
|
1962
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded);
|
|
1957
1963
|
design === 'danger' ? console.warn('Button.tsx - Warning, the design prop value danger is being deprecated. Use warning instead.') : null;
|
|
1958
1964
|
return React__default.createElement(StyledButton, Object.assign({
|
|
1959
1965
|
type: 'button',
|
|
1966
|
+
isOutline: design === 'outline',
|
|
1960
1967
|
className: "button-design-" + design + " button-size-" + size
|
|
1961
1968
|
}, {
|
|
1962
1969
|
design: design,
|
|
1963
1970
|
size: size
|
|
1964
1971
|
}, {
|
|
1965
1972
|
"$noPadding": noPadding,
|
|
1966
|
-
"$shadow": shadow
|
|
1973
|
+
"$shadow": shadow,
|
|
1974
|
+
"$loading": loading
|
|
1967
1975
|
}, props), children);
|
|
1968
1976
|
};
|
|
1969
1977
|
|
|
@@ -2046,48 +2054,56 @@ var Spinner = function Spinner(_ref6) {
|
|
|
2046
2054
|
};
|
|
2047
2055
|
|
|
2048
2056
|
var _excluded$1 = ["design", "size", "loading", "shadow", "onClick", "disabled", "position", "icon", "children"];
|
|
2049
|
-
var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$
|
|
2050
|
-
var Container$2 = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n display: inline;\n
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
var
|
|
2055
|
-
var
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
var
|
|
2059
|
-
return css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n
|
|
2060
|
-
}
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
});
|
|
2064
|
-
|
|
2065
|
-
var
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2057
|
+
var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11;
|
|
2058
|
+
var Container$2 = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n display: inline;\n"])));
|
|
2059
|
+
var TextContainer = styled.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"])));
|
|
2060
|
+
var IconContainer = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n"])));
|
|
2061
|
+
var SpinnerContainer = styled.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"])));
|
|
2062
|
+
var IconArea = styled.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) {
|
|
2063
|
+
var position = _ref.position;
|
|
2064
|
+
return 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;");
|
|
2065
|
+
}, IconContainer, IconContainer, SpinnerContainer, function (_ref2) {
|
|
2066
|
+
var $loading = _ref2.$loading;
|
|
2067
|
+
return $loading && 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);
|
|
2068
|
+
});
|
|
2069
|
+
var InnerContainer = styled.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) {
|
|
2070
|
+
var disabled = _ref3.disabled;
|
|
2071
|
+
return !disabled && 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);
|
|
2072
|
+
}, function (_ref4) {
|
|
2073
|
+
var disabled = _ref4.disabled;
|
|
2074
|
+
return !disabled && 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);
|
|
2075
|
+
}, function (_ref5) {
|
|
2076
|
+
var disabled = _ref5.disabled;
|
|
2077
|
+
return disabled && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "{\n svg {\n path, rect, circle, d {\n stroke: var(--button-disabled-text-color);\n }\n }\n }\n "])), IconContainer);
|
|
2078
|
+
});
|
|
2079
|
+
var ButtonWithIcon = function ButtonWithIcon(_ref6) {
|
|
2080
|
+
var _ref6$design = _ref6.design,
|
|
2081
|
+
design = _ref6$design === void 0 ? 'primary' : _ref6$design,
|
|
2082
|
+
_ref6$size = _ref6.size,
|
|
2083
|
+
size = _ref6$size === void 0 ? 'normal' : _ref6$size,
|
|
2084
|
+
_ref6$loading = _ref6.loading,
|
|
2085
|
+
loading = _ref6$loading === void 0 ? false : _ref6$loading,
|
|
2086
|
+
_ref6$shadow = _ref6.shadow,
|
|
2087
|
+
shadow = _ref6$shadow === void 0 ? false : _ref6$shadow,
|
|
2088
|
+
onClick = _ref6.onClick,
|
|
2089
|
+
disabled = _ref6.disabled,
|
|
2090
|
+
position = _ref6.position,
|
|
2091
|
+
icon = _ref6.icon,
|
|
2092
|
+
children = _ref6.children,
|
|
2093
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded$1);
|
|
2094
|
+
return React__default.createElement(Container$2, null, React__default.createElement(Button, Object.assign({
|
|
2095
|
+
noPadding: true,
|
|
2096
|
+
disabled: disabled || loading
|
|
2084
2097
|
}, {
|
|
2085
2098
|
design: design,
|
|
2086
2099
|
size: size,
|
|
2087
2100
|
shadow: shadow,
|
|
2088
2101
|
onClick: onClick,
|
|
2089
|
-
|
|
2090
|
-
}, props), React__default.createElement(InnerContainer,
|
|
2102
|
+
loading: loading
|
|
2103
|
+
}, props), React__default.createElement(InnerContainer, Object.assign({}, {
|
|
2104
|
+
disabled: disabled,
|
|
2105
|
+
loading: loading
|
|
2106
|
+
}), React__default.createElement(TextContainer, Object.assign({}, {
|
|
2091
2107
|
size: size,
|
|
2092
2108
|
position: position
|
|
2093
2109
|
}), children), React__default.createElement(IconArea, Object.assign({
|
|
@@ -2104,43 +2120,40 @@ var ButtonWithIcon = function ButtonWithIcon(_ref4) {
|
|
|
2104
2120
|
};
|
|
2105
2121
|
|
|
2106
2122
|
var _excluded$2 = ["design", "size", "shadow", "onClick", "disabled", "position", "loading", "children"];
|
|
2107
|
-
var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3
|
|
2108
|
-
var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n display: inline;\n
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
});
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$2);
|
|
2134
|
-
return React__default.createElement(Container$3, {
|
|
2135
|
-
"$loading": loading
|
|
2136
|
-
}, React__default.createElement(Button, Object.assign({
|
|
2123
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3;
|
|
2124
|
+
var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n display: inline;\n"])));
|
|
2125
|
+
var TextContainer$1 = styled.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"])));
|
|
2126
|
+
var LoadingContainer = styled.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) {
|
|
2127
|
+
var position = _ref.position;
|
|
2128
|
+
return 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;");
|
|
2129
|
+
});
|
|
2130
|
+
var InnerContainer$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex:1;\n height: inherit;\n\n ", "\n"])), function (_ref2) {
|
|
2131
|
+
var $loading = _ref2.$loading;
|
|
2132
|
+
return $loading ? 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) : css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n ", "{\n flex: 0 0 0px;\n }\n "])), LoadingContainer);
|
|
2133
|
+
});
|
|
2134
|
+
var ButtonWithLoading = function ButtonWithLoading(_ref3) {
|
|
2135
|
+
var _ref3$design = _ref3.design,
|
|
2136
|
+
design = _ref3$design === void 0 ? 'primary' : _ref3$design,
|
|
2137
|
+
_ref3$size = _ref3.size,
|
|
2138
|
+
size = _ref3$size === void 0 ? 'normal' : _ref3$size,
|
|
2139
|
+
_ref3$shadow = _ref3.shadow,
|
|
2140
|
+
shadow = _ref3$shadow === void 0 ? false : _ref3$shadow,
|
|
2141
|
+
onClick = _ref3.onClick,
|
|
2142
|
+
disabled = _ref3.disabled,
|
|
2143
|
+
position = _ref3.position,
|
|
2144
|
+
_ref3$loading = _ref3.loading,
|
|
2145
|
+
loading = _ref3$loading === void 0 ? false : _ref3$loading,
|
|
2146
|
+
children = _ref3.children,
|
|
2147
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
|
|
2148
|
+
return React__default.createElement(Container$3, null, React__default.createElement(Button, Object.assign({
|
|
2137
2149
|
noPadding: true,
|
|
2138
2150
|
disabled: disabled || loading
|
|
2139
2151
|
}, {
|
|
2140
2152
|
design: design,
|
|
2141
2153
|
size: size,
|
|
2142
2154
|
shadow: shadow,
|
|
2143
|
-
onClick: onClick
|
|
2155
|
+
onClick: onClick,
|
|
2156
|
+
loading: loading
|
|
2144
2157
|
}, rest), React__default.createElement(InnerContainer$1, Object.assign({
|
|
2145
2158
|
"$loading": loading
|
|
2146
2159
|
}, {
|
|
@@ -2224,7 +2237,7 @@ var ActionButtons = function ActionButtons(_ref4) {
|
|
|
2224
2237
|
};
|
|
2225
2238
|
|
|
2226
2239
|
var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "showFeedback", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
|
|
2227
|
-
var _templateObject$h, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$
|
|
2240
|
+
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;
|
|
2228
2241
|
var ActionContainer = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
2229
2242
|
var InputActionButton = styled.button.attrs({
|
|
2230
2243
|
type: "button"
|
|
@@ -2238,12 +2251,12 @@ var StyledInput = styled.input(_templateObject6$4 || (_templateObject6$4 = _tagg
|
|
|
2238
2251
|
});
|
|
2239
2252
|
var InputContainer = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n\n flex: 1;\n position: relative;\n\n ", "\n\n"])), function (_ref2) {
|
|
2240
2253
|
var hasAction = _ref2.hasAction;
|
|
2241
|
-
return hasAction && css(_templateObject9$
|
|
2254
|
+
return hasAction && 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);
|
|
2242
2255
|
});
|
|
2243
|
-
var Container$5 = styled.div(_templateObject10$
|
|
2256
|
+
var Container$5 = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (_ref3) {
|
|
2244
2257
|
var fieldState = _ref3.fieldState,
|
|
2245
2258
|
showFeedback = _ref3.showFeedback;
|
|
2246
|
-
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n flex-direction: row;\n\n ", "{\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", ";\n\n }\n\n ", " {\n ", ";\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
|
|
2259
|
+
return 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 && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
|
|
2247
2260
|
});
|
|
2248
2261
|
var Input = function Input(_ref4) {
|
|
2249
2262
|
var _ref4$type = _ref4.type,
|
|
@@ -2389,7 +2402,7 @@ var SmallInput = function SmallInput(_ref4) {
|
|
|
2389
2402
|
}, props)), unit ? React__default.createElement(UnitKey, null, unit) : null)));
|
|
2390
2403
|
};
|
|
2391
2404
|
|
|
2392
|
-
var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$
|
|
2405
|
+
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;
|
|
2393
2406
|
var SwitchPosition;
|
|
2394
2407
|
(function (SwitchPosition) {
|
|
2395
2408
|
SwitchPosition[SwitchPosition["Off"] = 0] = "Off";
|
|
@@ -2412,28 +2425,28 @@ var getPositionKey = function getPositionKey(switchPos) {
|
|
|
2412
2425
|
}
|
|
2413
2426
|
};
|
|
2414
2427
|
var RealInput = styled.input(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
2415
|
-
var SwitchOuter = styled.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
|
|
2416
|
-
var SwitchInner = styled.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
|
|
2428
|
+
var SwitchOuter = styled.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"])));
|
|
2429
|
+
var SwitchInner = styled.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) {
|
|
2417
2430
|
var position = _ref.position;
|
|
2418
2431
|
return position && "var(--position-" + position + ")";
|
|
2419
2432
|
});
|
|
2420
2433
|
var LabelText$1 = styled.span(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose([""])));
|
|
2421
2434
|
var IconWrapper$1 = styled.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"])));
|
|
2422
2435
|
var SpinnerWrapper = styled.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose([""])));
|
|
2423
|
-
var Container$7 = styled(StyledLabel)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n
|
|
2436
|
+
var Container$7 = styled(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) {
|
|
2424
2437
|
var activeTheming = _ref2.activeTheming,
|
|
2425
2438
|
themeState = _ref2.themeState;
|
|
2426
2439
|
return css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n border-color: var(--switch-", "-", "-border);\n background-color: var(--switch-", "-", "-background);\n "])), themeState, activeTheming, themeState, activeTheming);
|
|
2427
2440
|
}, function (_ref3) {
|
|
2428
2441
|
var activeTheming = _ref3.activeTheming;
|
|
2429
|
-
return activeTheming === 'locked' && css(_templateObject9$
|
|
2442
|
+
return activeTheming === 'locked' && css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-special-locked-background);\n border-color: var(--switch-special-locked-border);\n "])));
|
|
2430
2443
|
}, function (_ref4) {
|
|
2431
2444
|
var activeTheming = _ref4.activeTheming;
|
|
2432
|
-
return activeTheming === 'failure' && css(_templateObject10$
|
|
2445
|
+
return activeTheming === 'failure' && css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-special-failure-background);\n border-color: var(--switch-special-failure-border);\n "])));
|
|
2433
2446
|
}, function (_ref5) {
|
|
2434
2447
|
var activeTheming = _ref5.activeTheming,
|
|
2435
2448
|
$loading = _ref5.$loading;
|
|
2436
|
-
return $loading && css(_templateObject11$
|
|
2449
|
+
return $loading && css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-default-", "-background);\n border-color: var(--switch-default-", "-border);\n "])), activeTheming, activeTheming);
|
|
2437
2450
|
}, SwitchInner, function (_ref6) {
|
|
2438
2451
|
var activeTheming = _ref6.activeTheming,
|
|
2439
2452
|
themeState = _ref6.themeState;
|
|
@@ -2457,7 +2470,7 @@ var isTypeSwitchState = function isTypeSwitchState(value) {
|
|
|
2457
2470
|
return value === 'default' || value === 'loading' || value === 'locked' || value === 'disabled' || value === 'failure';
|
|
2458
2471
|
};
|
|
2459
2472
|
var Switch = function Switch(_ref11) {
|
|
2460
|
-
var _inputRef$
|
|
2473
|
+
var _inputRef$current;
|
|
2461
2474
|
var _ref11$state = _ref11.state,
|
|
2462
2475
|
state = _ref11$state === void 0 ? 'default' : _ref11$state,
|
|
2463
2476
|
_ref11$leftTheme = _ref11.leftTheme,
|
|
@@ -2466,49 +2479,66 @@ var Switch = function Switch(_ref11) {
|
|
|
2466
2479
|
rightTheme = _ref11$rightTheme === void 0 ? 'on' : _ref11$rightTheme,
|
|
2467
2480
|
labelText = _ref11.labelText,
|
|
2468
2481
|
onChangeCallback = _ref11.onChangeCallback,
|
|
2469
|
-
|
|
2470
|
-
|
|
2482
|
+
checked = _ref11.checked,
|
|
2483
|
+
_ref11$defaultChecked = _ref11.defaultChecked,
|
|
2484
|
+
defaultChecked = _ref11$defaultChecked === void 0 ? false : _ref11$defaultChecked;
|
|
2485
|
+
var isControlled = checked !== undefined;
|
|
2486
|
+
var initialChecked = isControlled ? checked : defaultChecked;
|
|
2487
|
+
var initialPosition = initialChecked ? SwitchPosition.On : SwitchPosition.Off;
|
|
2488
|
+
var initialTheme = initialChecked ? rightTheme : leftTheme;
|
|
2489
|
+
var _useState = useState(defaultChecked),
|
|
2490
|
+
internalChecked = _useState[0],
|
|
2491
|
+
setInternalChecked = _useState[1];
|
|
2471
2492
|
var inputRef = useRef(null);
|
|
2472
2493
|
var innerRef = useRef(null);
|
|
2473
|
-
var
|
|
2474
|
-
position =
|
|
2475
|
-
setPosition =
|
|
2476
|
-
var
|
|
2477
|
-
activeTheming =
|
|
2478
|
-
setActiveTheming =
|
|
2479
|
-
var
|
|
2480
|
-
switchState =
|
|
2481
|
-
setSwitchState =
|
|
2482
|
-
var
|
|
2483
|
-
justUpdated =
|
|
2484
|
-
setJustUpdated =
|
|
2485
|
-
var
|
|
2486
|
-
innerSize =
|
|
2487
|
-
setInnerSize =
|
|
2494
|
+
var _useState2 = useState(initialPosition),
|
|
2495
|
+
position = _useState2[0],
|
|
2496
|
+
setPosition = _useState2[1];
|
|
2497
|
+
var _useState3 = useState(initialTheme),
|
|
2498
|
+
activeTheming = _useState3[0],
|
|
2499
|
+
setActiveTheming = _useState3[1];
|
|
2500
|
+
var _useState4 = useState('default'),
|
|
2501
|
+
switchState = _useState4[0],
|
|
2502
|
+
setSwitchState = _useState4[1];
|
|
2503
|
+
var _useState5 = useState(false),
|
|
2504
|
+
justUpdated = _useState5[0],
|
|
2505
|
+
setJustUpdated = _useState5[1];
|
|
2506
|
+
var _useState6 = useState(0),
|
|
2507
|
+
innerSize = _useState6[0],
|
|
2508
|
+
setInnerSize = _useState6[1];
|
|
2509
|
+
var updateSwitchPositionAndTheme = useCallback(function () {
|
|
2510
|
+
if (isControlled) {
|
|
2511
|
+
setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2512
|
+
setActiveTheming(checked ? rightTheme : leftTheme);
|
|
2513
|
+
} else if (inputRef.current) {
|
|
2514
|
+
inputRef.current.checked = internalChecked;
|
|
2515
|
+
setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2516
|
+
setActiveTheming(internalChecked ? rightTheme : leftTheme);
|
|
2517
|
+
}
|
|
2518
|
+
}, [checked, isControlled, internalChecked, leftTheme, rightTheme]);
|
|
2488
2519
|
useEffect(function () {
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
inputRef.current.checked = checked;
|
|
2492
|
-
}
|
|
2493
|
-
}, [checked]);
|
|
2520
|
+
updateSwitchPositionAndTheme();
|
|
2521
|
+
}, [updateSwitchPositionAndTheme]);
|
|
2494
2522
|
var positionSwitch = useCallback(function () {
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2523
|
+
if (isControlled) {
|
|
2524
|
+
setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2525
|
+
setActiveTheming(checked ? rightTheme : leftTheme);
|
|
2526
|
+
} else {
|
|
2527
|
+
setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2528
|
+
setActiveTheming(internalChecked ? rightTheme : leftTheme);
|
|
2529
|
+
}
|
|
2530
|
+
}, [checked, isControlled, leftTheme, rightTheme, internalChecked]);
|
|
2531
|
+
var customOnChange = useCallback(function () {
|
|
2532
|
+
if (state === 'locked' || state === 'disabled') return;
|
|
2533
|
+
if (isControlled) {
|
|
2534
|
+
onChangeCallback === null || onChangeCallback === void 0 ? void 0 : onChangeCallback(!checked);
|
|
2535
|
+
} else {
|
|
2536
|
+
var newChecked = !internalChecked;
|
|
2537
|
+
setInternalChecked(newChecked);
|
|
2538
|
+
onChangeCallback === null || onChangeCallback === void 0 ? void 0 : onChangeCallback(newChecked);
|
|
2502
2539
|
}
|
|
2503
|
-
}, [setPosition, setActiveTheming, leftTheme, rightTheme, inputRef]);
|
|
2504
|
-
var customOnChange = function customOnChange() {
|
|
2505
2540
|
positionSwitch();
|
|
2506
|
-
|
|
2507
|
-
if (onChangeCallback) {
|
|
2508
|
-
var _inputRef$current3;
|
|
2509
|
-
onChangeCallback(((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.checked) || false);
|
|
2510
|
-
}
|
|
2511
|
-
};
|
|
2541
|
+
}, [isControlled, checked, internalChecked, onChangeCallback, state, positionSwitch]);
|
|
2512
2542
|
var updateThemeChoice = useCallback(function () {
|
|
2513
2543
|
if (position === SwitchPosition.On) {
|
|
2514
2544
|
setActiveTheming(rightTheme);
|
|
@@ -2548,7 +2578,7 @@ var Switch = function Switch(_ref11) {
|
|
|
2548
2578
|
useIntent: !justUpdated && (state === 'default' || state === 'failure'),
|
|
2549
2579
|
themeState: switchState,
|
|
2550
2580
|
position: position,
|
|
2551
|
-
checked: (_inputRef$
|
|
2581
|
+
checked: (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked
|
|
2552
2582
|
}, React__default.createElement(SwitchOuter, null, React__default.createElement(SwitchInner, {
|
|
2553
2583
|
position: getPositionKey(position),
|
|
2554
2584
|
ref: innerRef
|
|
@@ -2571,7 +2601,7 @@ var Switch = function Switch(_ref11) {
|
|
|
2571
2601
|
ref: inputRef,
|
|
2572
2602
|
type: 'checkbox',
|
|
2573
2603
|
disabled: state !== 'default' && state !== 'failure',
|
|
2574
|
-
defaultChecked: checked
|
|
2604
|
+
defaultChecked: !isControlled ? defaultChecked : checked
|
|
2575
2605
|
}));
|
|
2576
2606
|
};
|
|
2577
2607
|
var stateCheck = function stateCheck(state) {
|
|
@@ -2689,7 +2719,7 @@ function SvgNoImage() {
|
|
|
2689
2719
|
}));
|
|
2690
2720
|
}
|
|
2691
2721
|
|
|
2692
|
-
var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$
|
|
2722
|
+
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;
|
|
2693
2723
|
var CheckboxState;
|
|
2694
2724
|
(function (CheckboxState) {
|
|
2695
2725
|
CheckboxState["Off"] = "off";
|
|
@@ -2710,7 +2740,7 @@ var Container$8 = styled.label(_templateObject5$b || (_templateObject5$b = _tagg
|
|
|
2710
2740
|
}, function (_ref3) {
|
|
2711
2741
|
var visualState = _ref3.visualState,
|
|
2712
2742
|
disabled = _ref3.disabled;
|
|
2713
|
-
return visualState === CheckboxState.On && css(_templateObject9$
|
|
2743
|
+
return visualState === CheckboxState.On && 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 && 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 && 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));
|
|
2714
2744
|
}, function (_ref4) {
|
|
2715
2745
|
var visualState = _ref4.visualState,
|
|
2716
2746
|
disabled = _ref4.disabled;
|
|
@@ -2766,15 +2796,15 @@ var Checkbox = function Checkbox(_ref5) {
|
|
|
2766
2796
|
})), " ");
|
|
2767
2797
|
};
|
|
2768
2798
|
|
|
2769
|
-
var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$
|
|
2799
|
+
var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$6, _templateObject10$6;
|
|
2770
2800
|
var InnerRadio = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
2771
2801
|
var OuterRadio = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n user-select: none;\n\n ", ";\n"])), function (_ref) {
|
|
2772
2802
|
var isChecked = _ref.isChecked,
|
|
2773
2803
|
disabled = _ref.disabled;
|
|
2774
2804
|
return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n border-color: var(--input-toggle-unchecked-border-color);\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), !disabled && css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--input-toggle-unchecked-hover-border-color);\n }\n "]))), isChecked && !disabled && 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 && css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: var(--input-toggle-checked-hover-border-color);\n ", " {\n background-color: var(--input-toggle-checked-hover-background-color);\n }\n }\n "])), InnerRadio), isChecked && disabled && css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-checked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-checked-disabled-background-color);\n }\n "])), InnerRadio), !isChecked && disabled && css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-unchecked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-unchecked-disabled-background-color);\n }\n "])), InnerRadio));
|
|
2775
2805
|
});
|
|
2776
|
-
var HiddenInput = styled.input(_templateObject9$
|
|
2777
|
-
var Container$9 = styled.div(_templateObject10$
|
|
2806
|
+
var HiddenInput = styled.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"])));
|
|
2807
|
+
var Container$9 = styled.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"])));
|
|
2778
2808
|
var RadioButton = function RadioButton(_ref2) {
|
|
2779
2809
|
var id = _ref2.id,
|
|
2780
2810
|
value = _ref2.value,
|
|
@@ -2808,7 +2838,7 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2808
2838
|
};
|
|
2809
2839
|
|
|
2810
2840
|
var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
|
|
2811
|
-
var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$
|
|
2841
|
+
var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$7;
|
|
2812
2842
|
var FeedbackIcon$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n padding-top: 2px;\n"])));
|
|
2813
2843
|
var StyledTextArea = styled.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n\n color: var(--input-color-default);\n font-size: 14px;\n\n transition:\n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n &::placeholder {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), function (_ref) {
|
|
2814
2844
|
var fieldState = _ref.fieldState;
|
|
@@ -2819,7 +2849,7 @@ var FeedbackMessage$1 = styled.div(_templateObject5$d || (_templateObject5$d = _
|
|
|
2819
2849
|
var Container$a = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
|
|
2820
2850
|
var fieldState = _ref2.fieldState,
|
|
2821
2851
|
showFeedback = _ref2.showFeedback;
|
|
2822
|
-
return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject9$
|
|
2852
|
+
return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n display:none;\n "]))), FeedbackContainer$1, fieldState, fieldState);
|
|
2823
2853
|
});
|
|
2824
2854
|
var TextArea = function TextArea(_ref3) {
|
|
2825
2855
|
var _ref3$placeholder = _ref3.placeholder,
|
|
@@ -2874,7 +2904,7 @@ var TextArea = function TextArea(_ref3) {
|
|
|
2874
2904
|
};
|
|
2875
2905
|
|
|
2876
2906
|
var _excluded$8 = ["fieldState", "placeholder", "label", "icon", "isCompact", "defaultValue", "changeCallback", "children"];
|
|
2877
|
-
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$
|
|
2907
|
+
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8;
|
|
2878
2908
|
var SelectWrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n"])));
|
|
2879
2909
|
var OpenIcon = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n right: ", ";\n pointer-events: none;\n"])), function (_ref) {
|
|
2880
2910
|
var isCompact = _ref.isCompact;
|
|
@@ -2894,7 +2924,7 @@ var StyledSelect = styled.select(_templateObject4$g || (_templateObject4$g = _ta
|
|
|
2894
2924
|
});
|
|
2895
2925
|
var Container$b = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n"])), function (_ref5) {
|
|
2896
2926
|
var activePlaceholder = _ref5.activePlaceholder;
|
|
2897
|
-
return activePlaceholder && css(_templateObject9$
|
|
2927
|
+
return activePlaceholder && 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);
|
|
2898
2928
|
});
|
|
2899
2929
|
var SelectField = function SelectField(_ref6) {
|
|
2900
2930
|
var _ref6$fieldState = _ref6.fieldState,
|
|
@@ -3040,9 +3070,21 @@ var areDatesEqual = function areDatesEqual(storedValue, currentDisplay) {
|
|
|
3040
3070
|
}
|
|
3041
3071
|
return false;
|
|
3042
3072
|
};
|
|
3073
|
+
var isDateInterval = function isDateInterval(value) {
|
|
3074
|
+
if (value === null || value === undefined) {
|
|
3075
|
+
return false;
|
|
3076
|
+
}
|
|
3077
|
+
if (value.start === null || value.start === undefined) {
|
|
3078
|
+
return false;
|
|
3079
|
+
}
|
|
3080
|
+
if (value.end === null || value.end === undefined) {
|
|
3081
|
+
return false;
|
|
3082
|
+
}
|
|
3083
|
+
return value.start instanceof Date && value.end instanceof Date;
|
|
3084
|
+
};
|
|
3043
3085
|
|
|
3044
3086
|
var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
|
|
3045
|
-
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$
|
|
3087
|
+
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;
|
|
3046
3088
|
var ThumbDiameter = 16;
|
|
3047
3089
|
var SliderWrapper = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
|
|
3048
3090
|
var theme = _ref.theme;
|
|
@@ -3071,10 +3113,10 @@ var MarkLabel = styled.span(_templateObject6$b || (_templateObject6$b = _taggedT
|
|
|
3071
3113
|
return alignment === 'right' && css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
|
|
3072
3114
|
}, function (_ref8) {
|
|
3073
3115
|
var alignment = _ref8.alignment;
|
|
3074
|
-
return alignment === 'left' && css(_templateObject9$
|
|
3116
|
+
return alignment === 'left' && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
|
|
3075
3117
|
});
|
|
3076
|
-
var ThumbWrapper = styled.div(_templateObject10$
|
|
3077
|
-
var Thumb = styled.span(_templateObject11$
|
|
3118
|
+
var ThumbWrapper = styled.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-right: 16px;\n left: 0;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n"])), ThumbDiameter);
|
|
3119
|
+
var Thumb = styled.span(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n width: ", "px;\n height: ", "px;\n border-radius: 8px;\n background-color: ", ";\n position: absolute;\n top: -7.5px;\n left: ", ";\n"])), ThumbDiameter, ThumbDiameter, function (_ref9) {
|
|
3078
3120
|
var theme = _ref9.theme,
|
|
3079
3121
|
bgColor = _ref9.bgColor;
|
|
3080
3122
|
return theme.colors.feedback[bgColor];
|
|
@@ -3846,7 +3888,7 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
|
|
|
3846
3888
|
return isDifferent;
|
|
3847
3889
|
};
|
|
3848
3890
|
|
|
3849
|
-
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$
|
|
3891
|
+
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;
|
|
3850
3892
|
var CropLineStyle = css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
|
|
3851
3893
|
var TopLine = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
|
|
3852
3894
|
var RightLine = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
@@ -3857,11 +3899,11 @@ var PointN = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTempl
|
|
|
3857
3899
|
var isResizable = _ref.isResizable;
|
|
3858
3900
|
return isResizable && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
|
|
3859
3901
|
});
|
|
3860
|
-
var PointNW = styled.div(_templateObject9$
|
|
3902
|
+
var PointNW = styled.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
|
|
3861
3903
|
var isResizable = _ref2.isResizable;
|
|
3862
|
-
return isResizable && css(_templateObject10$
|
|
3904
|
+
return isResizable && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
|
|
3863
3905
|
});
|
|
3864
|
-
var PointNE = styled.div(_templateObject11$
|
|
3906
|
+
var PointNE = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref3) {
|
|
3865
3907
|
var isResizable = _ref3.isResizable;
|
|
3866
3908
|
return isResizable && css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n cursor: ne-resize;\n "])));
|
|
3867
3909
|
});
|
|
@@ -3923,7 +3965,7 @@ var CropArea = function CropArea(_ref9) {
|
|
|
3923
3965
|
})));
|
|
3924
3966
|
};
|
|
3925
3967
|
|
|
3926
|
-
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$
|
|
3968
|
+
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b;
|
|
3927
3969
|
var Container$g = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
|
|
3928
3970
|
var theme = _ref.theme;
|
|
3929
3971
|
return theme.fontFamily.ui;
|
|
@@ -3945,7 +3987,7 @@ var SelectedArea = styled.div(_templateObject8$b || (_templateObject8$b = _tagge
|
|
|
3945
3987
|
cropTop = _ref4.cropTop,
|
|
3946
3988
|
cropWidth = _ref4.cropWidth,
|
|
3947
3989
|
cropHeight = _ref4.cropHeight;
|
|
3948
|
-
return css(_templateObject9$
|
|
3990
|
+
return css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n "])), cropTop, cropLeft, cropWidth, cropHeight);
|
|
3949
3991
|
});
|
|
3950
3992
|
var viewDimensions = {
|
|
3951
3993
|
cropLeft: 0,
|
|
@@ -4209,7 +4251,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4209
4251
|
})))))), document.body);
|
|
4210
4252
|
};
|
|
4211
4253
|
|
|
4212
|
-
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$
|
|
4254
|
+
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c;
|
|
4213
4255
|
var CROP_HEIGHT_AREA = 500;
|
|
4214
4256
|
var CROP_WIDTH_AREA = 475;
|
|
4215
4257
|
var CANVAS_HEIGHT = 490;
|
|
@@ -4227,7 +4269,7 @@ var PreviewImage = styled.img(_templateObject5$j || (_templateObject5$j = _tagge
|
|
|
4227
4269
|
var PlaceholderText = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
|
|
4228
4270
|
var NoPhoto = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
|
|
4229
4271
|
var StyledInputFileButton = styled(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
4230
|
-
var ButtonsWrapper = styled.div(_templateObject9$
|
|
4272
|
+
var ButtonsWrapper = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
|
|
4231
4273
|
var AvatarUploader = function AvatarUploader(_ref2) {
|
|
4232
4274
|
var _ref2$title = _ref2.title,
|
|
4233
4275
|
title = _ref2$title === void 0 ? 'Photograph' : _ref2$title,
|
|
@@ -5673,7 +5715,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5673
5715
|
})))));
|
|
5674
5716
|
};
|
|
5675
5717
|
|
|
5676
|
-
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$
|
|
5718
|
+
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;
|
|
5677
5719
|
var initializeInterval = function initializeInterval(day) {
|
|
5678
5720
|
return {
|
|
5679
5721
|
start: set(day, {
|
|
@@ -5693,9 +5735,9 @@ var TimeZoneValue = styled.div(_templateObject5$p || (_templateObject5$p = _tagg
|
|
|
5693
5735
|
var CalendarArea = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
5694
5736
|
var CalendarHeader = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
|
|
5695
5737
|
var CurrentMonth = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n flex: 1;\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 20px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.5px;\n color: var(--primary-10);\n\n span {\n display: block;\n flex: 0;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.33px;\n }\n"])));
|
|
5696
|
-
var IconWrap$1 = styled.div(_templateObject9$
|
|
5697
|
-
var PaginateMonth = styled.button(_templateObject10$
|
|
5698
|
-
var CalBody = styled.div(_templateObject11$
|
|
5738
|
+
var IconWrap$1 = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5739
|
+
var PaginateMonth = styled.button(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 72px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n ", "{\n svg * {\n transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n }\n }\n\n &:hover: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);
|
|
5740
|
+
var CalBody = styled.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5699
5741
|
var CalButtons = styled.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"])));
|
|
5700
5742
|
var CalRightButtons = styled.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
5701
5743
|
var CalRow = styled.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"])));
|
|
@@ -5749,18 +5791,6 @@ var CalCellB = styled(CalCell)(_templateObject24 || (_templateObject24 = _tagged
|
|
|
5749
5791
|
});
|
|
5750
5792
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5751
5793
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
5752
|
-
var isDateInterval = function isDateInterval(value) {
|
|
5753
|
-
if (value === null || value === undefined) {
|
|
5754
|
-
return false;
|
|
5755
|
-
}
|
|
5756
|
-
if (value.start === null || value.start === undefined) {
|
|
5757
|
-
return false;
|
|
5758
|
-
}
|
|
5759
|
-
if (value.end === null || value.end === undefined) {
|
|
5760
|
-
return false;
|
|
5761
|
-
}
|
|
5762
|
-
return value.start instanceof Date && value.end instanceof Date;
|
|
5763
|
-
};
|
|
5764
5794
|
var DatePicker = function DatePicker(_ref15) {
|
|
5765
5795
|
var _ref15$dateMode = _ref15.dateMode,
|
|
5766
5796
|
dateMode = _ref15$dateMode === void 0 ? 'interval' : _ref15$dateMode,
|
|
@@ -6072,7 +6102,7 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
|
6072
6102
|
};
|
|
6073
6103
|
|
|
6074
6104
|
var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
|
|
6075
|
-
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$
|
|
6105
|
+
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$a;
|
|
6076
6106
|
var LeftIconWrapper$1 = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0 6px;\n"])), function (_ref) {
|
|
6077
6107
|
var isSortAscending = _ref.isSortAscending;
|
|
6078
6108
|
return isSortAscending && css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
@@ -6099,8 +6129,8 @@ var StyledButton$4 = styled.button(_templateObject5$q || (_templateObject5$q = _
|
|
|
6099
6129
|
hasFlipArrow = _ref7.hasFlipArrow;
|
|
6100
6130
|
return isOpen && hasFlipArrow && css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-9);\n border: solid 1px var(--primary-9);\n color: var(--white-1);\n\n &, &:hover:enabled, &:active:enabled {\n color: var(--white-1);\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n }\n\n ", " ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n };\n "])), IconWrapper, FlipArrowContainer, IconWrapper);
|
|
6101
6131
|
});
|
|
6102
|
-
var InnerContainer$3 = styled.div(_templateObject9$
|
|
6103
|
-
var ButtonText = styled.div(_templateObject10$
|
|
6132
|
+
var InnerContainer$3 = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
6133
|
+
var ButtonText = styled.div(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose([""])));
|
|
6104
6134
|
var FilterButton = function FilterButton(_ref8) {
|
|
6105
6135
|
var icon = _ref8.icon,
|
|
6106
6136
|
_ref8$hasFlipArrow = _ref8.hasFlipArrow,
|
|
@@ -6137,7 +6167,7 @@ var FilterButton = function FilterButton(_ref8) {
|
|
|
6137
6167
|
};
|
|
6138
6168
|
|
|
6139
6169
|
var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
|
|
6140
|
-
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$
|
|
6170
|
+
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$f, _templateObject10$b;
|
|
6141
6171
|
var Title$1 = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n display: block;\n color: var(--grey-12);\n font-size: 14px;\n font-weight: 500;\n user-select: none;\n pointer-events: none;\n white-space: nowrap;\n"])));
|
|
6142
6172
|
var FakeCheckbox = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
|
|
6143
6173
|
var FakeCheckboxInner = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
|
|
@@ -6147,7 +6177,7 @@ var FakeInnerRadio = styled.div(_templateObject6$m || (_templateObject6$m = _tag
|
|
|
6147
6177
|
var Container$q = styled.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n gap: 12px;\n\n ", ";\n"])), function (_ref) {
|
|
6148
6178
|
var selected = _ref.selected,
|
|
6149
6179
|
disabled = _ref.disabled;
|
|
6150
|
-
return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n ", ", ", " {\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-unchecked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-unchecked-background-color);\n }\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-out);\n }\n \n "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && css(_templateObject9$
|
|
6180
|
+
return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n ", ", ", " {\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-unchecked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-unchecked-background-color);\n }\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-out);\n }\n \n "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && css(_templateObject9$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 && css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
|
|
6151
6181
|
});
|
|
6152
6182
|
var FilterOption = function FilterOption(_ref2) {
|
|
6153
6183
|
var title = _ref2.title,
|
|
@@ -6678,7 +6708,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6678
6708
|
}))))));
|
|
6679
6709
|
};
|
|
6680
6710
|
|
|
6681
|
-
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$z, _templateObject5$v, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$
|
|
6711
|
+
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;
|
|
6682
6712
|
var Container$w = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6683
6713
|
var ContextActionBaseCSS = css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n outline: none;\n text-decoration: none;\n padding: 0;\n"])));
|
|
6684
6714
|
var ContextIcon = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n ", ";\n width: 30px;\n height: 30px;\n border-radius: 3px;\n display:flex;\n justify-content:center;\n align-items:center;\n svg {\n display: block;\n }\n"])), function (_ref) {
|
|
@@ -6698,7 +6728,7 @@ var ContentBox$1 = styled.div(_templateObject8$l || (_templateObject8$l = _tagge
|
|
|
6698
6728
|
}, function (_ref5) {
|
|
6699
6729
|
var openState = _ref5.openState,
|
|
6700
6730
|
disabled = _ref5.disabled;
|
|
6701
|
-
return openState && css(_templateObject9$
|
|
6731
|
+
return openState && 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' && css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
|
|
6702
6732
|
});
|
|
6703
6733
|
var ButtonWrapper$1 = styled.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
6704
6734
|
var GroupStyles = 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"])));
|
|
@@ -7635,7 +7665,7 @@ var StatusIcon = function StatusIcon(_ref3) {
|
|
|
7635
7665
|
}));
|
|
7636
7666
|
};
|
|
7637
7667
|
|
|
7638
|
-
var _templateObject$V, _templateObject2$N, _templateObject3$I, _templateObject4$C, _templateObject5$y, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$
|
|
7668
|
+
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;
|
|
7639
7669
|
var HandleTouchReactionKeyframes = keyframes(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(3);\n }\n\n 100% {\n transform: scale(1.75);\n }\n"])));
|
|
7640
7670
|
var HandleMouseReactionKeyframes = keyframes(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n 0% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0.5);\n }\n"])));
|
|
7641
7671
|
var HandleBase = styled.svg(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
|
|
@@ -7660,17 +7690,17 @@ var HandleReactiveFill = styled.circle(_templateObject8$n || (_templateObject8$n
|
|
|
7660
7690
|
styling = _ref3.styling;
|
|
7661
7691
|
return theme.custom.lines[styling].handleReactiveFill.fill;
|
|
7662
7692
|
});
|
|
7663
|
-
var HandleReactiveRing = styled.circle(_templateObject9$
|
|
7693
|
+
var HandleReactiveRing = styled.circle(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref4) {
|
|
7664
7694
|
var theme = _ref4.theme,
|
|
7665
7695
|
styling = _ref4.styling;
|
|
7666
7696
|
return theme.custom.lines[styling].handleReactiveRing.stroke;
|
|
7667
7697
|
});
|
|
7668
|
-
var HandleContrastLayer = styled.circle(_templateObject10$
|
|
7698
|
+
var HandleContrastLayer = styled.circle(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
|
|
7669
7699
|
var theme = _ref5.theme,
|
|
7670
7700
|
styling = _ref5.styling;
|
|
7671
7701
|
return theme.custom.lines[styling].handleContrastLayer.stroke;
|
|
7672
7702
|
});
|
|
7673
|
-
var HandleShadowLayer = styled.circle(_templateObject11$
|
|
7703
|
+
var HandleShadowLayer = styled.circle(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: url(#", ");\n"])), function (props) {
|
|
7674
7704
|
return props.fillID;
|
|
7675
7705
|
});
|
|
7676
7706
|
var GrabHandleIndexGroup = styled.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
|
|
@@ -7868,7 +7898,7 @@ var HandleUnit = function HandleUnit(props) {
|
|
|
7868
7898
|
}, index + pointIndexOffset))));
|
|
7869
7899
|
};
|
|
7870
7900
|
|
|
7871
|
-
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$D, _templateObject5$z, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$
|
|
7901
|
+
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;
|
|
7872
7902
|
var ContrastLine = styled.line(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n mix-blend-mode: multiply;\n stroke-width: ", "px;\n stroke-opacity: ", ";\n cursor: pointer;\n"])), function (_ref) {
|
|
7873
7903
|
var theme = _ref.theme,
|
|
7874
7904
|
styling = _ref.styling;
|
|
@@ -7910,14 +7940,14 @@ var LabelText$2 = styled.text(_templateObject8$o || (_templateObject8$o = _tagge
|
|
|
7910
7940
|
return theme.custom.lines[styling].label.fill;
|
|
7911
7941
|
}, function (_ref9) {
|
|
7912
7942
|
var showLabelShadow = _ref9.showLabelShadow;
|
|
7913
|
-
return showLabelShadow && css(_templateObject9$
|
|
7943
|
+
return showLabelShadow && 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 "])));
|
|
7914
7944
|
});
|
|
7915
|
-
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$
|
|
7945
|
+
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
|
|
7916
7946
|
var theme = _ref10.theme,
|
|
7917
7947
|
styling = _ref10.styling;
|
|
7918
7948
|
return theme.custom.lines[styling].grabHandleContrast.stroke;
|
|
7919
7949
|
});
|
|
7920
|
-
var GrabHandleGroup = styled.g(_templateObject11$
|
|
7950
|
+
var GrabHandleGroup = styled.g(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
|
|
7921
7951
|
return props.showIndex && css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
|
|
7922
7952
|
});
|
|
7923
7953
|
var DMCircle = styled.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
|
|
@@ -9699,7 +9729,7 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
|
9699
9729
|
});
|
|
9700
9730
|
};
|
|
9701
9731
|
|
|
9702
|
-
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$
|
|
9732
|
+
var _templateObject$17, _templateObject2$Y, _templateObject3$S, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$j, _templateObject10$f, _templateObject11$a;
|
|
9703
9733
|
var CopyToClipboard = styled.button(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n\n cursor: pointer;\n opacity: 0;\n\n position: absolute;\n right: 0;\n top: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n outline: none;\n\n ", "\n\n svg {\n display: block;\n }\n\n &:hover {\n opacity: 1 !important;\n }\n\n"])), function (_ref) {
|
|
9704
9734
|
var theme = _ref.theme;
|
|
9705
9735
|
return theme && css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
@@ -9721,13 +9751,13 @@ var CellContainer = styled.div(_templateObject3$S || (_templateObject3$S = _tagg
|
|
|
9721
9751
|
});
|
|
9722
9752
|
var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
|
|
9723
9753
|
var theme = _ref5.theme;
|
|
9724
|
-
return css(_templateObject9$
|
|
9754
|
+
return css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
9725
9755
|
});
|
|
9726
|
-
var StatusBlip = styled.div(_templateObject10$
|
|
9756
|
+
var StatusBlip = styled.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) {
|
|
9727
9757
|
var _ref6$status = _ref6.status,
|
|
9728
9758
|
status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
|
|
9729
9759
|
colors = _ref6.theme.colors;
|
|
9730
|
-
return css(_templateObject11$
|
|
9760
|
+
return css(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n background: ", ";\n "])), colors.status[status]);
|
|
9731
9761
|
});
|
|
9732
9762
|
var TypeTableCell = function TypeTableCell(_ref7) {
|
|
9733
9763
|
var _ref7$showUnit = _ref7.showUnit,
|
|
@@ -9882,7 +9912,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
9882
9912
|
}), header);
|
|
9883
9913
|
};
|
|
9884
9914
|
|
|
9885
|
-
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$
|
|
9915
|
+
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;
|
|
9886
9916
|
var HeaderRow = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
9887
9917
|
var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
|
|
9888
9918
|
return p.theme.fontFamily.ui;
|
|
@@ -9905,11 +9935,11 @@ var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedT
|
|
|
9905
9935
|
isSortActive = _ref4.isSortActive;
|
|
9906
9936
|
return headerStyle === 'subHeader' && 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%');
|
|
9907
9937
|
});
|
|
9908
|
-
var TitleItems = styled.div(_templateObject9$
|
|
9938
|
+
var TitleItems = styled.div(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
|
|
9909
9939
|
var alignment = _ref5.alignment;
|
|
9910
|
-
return alignment && css(_templateObject10$
|
|
9940
|
+
return alignment && css(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
|
|
9911
9941
|
});
|
|
9912
|
-
var GroupTitle = styled.div(_templateObject11$
|
|
9942
|
+
var GroupTitle = styled.div(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n margin-bottom: 4px;\n"])));
|
|
9913
9943
|
var Title$4 = styled.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
|
|
9914
9944
|
var typography = _ref6.theme.typography;
|
|
9915
9945
|
return css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), typography.tables.groupName);
|
|
@@ -10139,7 +10169,7 @@ var TypeTable = function TypeTable(_ref4) {
|
|
|
10139
10169
|
};
|
|
10140
10170
|
|
|
10141
10171
|
var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
10142
|
-
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$
|
|
10172
|
+
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$l, _templateObject10$h;
|
|
10143
10173
|
var Container$M = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
10144
10174
|
var theme = _ref.theme;
|
|
10145
10175
|
return css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
@@ -10151,10 +10181,10 @@ var EditContainer = styled.div(_templateObject6$B || (_templateObject6$B = _tagg
|
|
|
10151
10181
|
var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose([""])));
|
|
10152
10182
|
var TextContainer$3 = styled.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
|
|
10153
10183
|
var alignment = _ref2.alignment;
|
|
10154
|
-
return alignment === 'center' && css(_templateObject9$
|
|
10184
|
+
return alignment === 'center' && css(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
10155
10185
|
}, function (_ref3) {
|
|
10156
10186
|
var alignment = _ref3.alignment;
|
|
10157
|
-
return alignment === 'right' && css(_templateObject10$
|
|
10187
|
+
return alignment === 'right' && css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
|
|
10158
10188
|
}, StyledIconButton$1, StyledIconButton$1);
|
|
10159
10189
|
var EditCell = function EditCell(_ref4) {
|
|
10160
10190
|
var _ref4$type = _ref4.type,
|
|
@@ -11903,7 +11933,7 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
11903
11933
|
}));
|
|
11904
11934
|
};
|
|
11905
11935
|
|
|
11906
|
-
var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$
|
|
11936
|
+
var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$m;
|
|
11907
11937
|
var Container$V = styled.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
|
|
11908
11938
|
var LeftData = styled.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
11909
11939
|
var hasRightData = _ref.hasRightData;
|
|
@@ -11926,7 +11956,7 @@ var Title$5 = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemp
|
|
|
11926
11956
|
var hasMarginBottom = _ref5.hasMarginBottom;
|
|
11927
11957
|
return hasMarginBottom && "margin-bottom: 6px;";
|
|
11928
11958
|
});
|
|
11929
|
-
var SubTitle = styled.div(_templateObject9$
|
|
11959
|
+
var SubTitle = styled.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
|
|
11930
11960
|
var PanelMetaData = function PanelMetaData(_ref6) {
|
|
11931
11961
|
var _ref6$deviceIcon = _ref6.deviceIcon,
|
|
11932
11962
|
deviceIcon = _ref6$deviceIcon === void 0 ? 'Camera' : _ref6$deviceIcon,
|
|
@@ -12078,7 +12108,7 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12078
12108
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
12079
12109
|
};
|
|
12080
12110
|
|
|
12081
|
-
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$
|
|
12111
|
+
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$n;
|
|
12082
12112
|
var WIDTH_PER_NUMBER = 12;
|
|
12083
12113
|
var PaginationContainer = styled.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-top: 20px;\n padding-bottom: 20px;\n width: 100%;\n height: fit-content;\n margin-right: 10px;\n white-space: nowrap;\n gap: 40px;\n vertical-align: baseline;\n"])));
|
|
12084
12114
|
var StaticPageCount = styled.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"])));
|
|
@@ -12103,7 +12133,7 @@ var ArrowButton = styled.button(_templateObject8$u || (_templateObject8$u = _tag
|
|
|
12103
12133
|
var active = _ref5.active;
|
|
12104
12134
|
return active ? '1' : '0.5';
|
|
12105
12135
|
});
|
|
12106
|
-
var ItemsSelectWrapper = styled.div(_templateObject9$
|
|
12136
|
+
var ItemsSelectWrapper = styled.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n ", " {\n width: ", ";\n }\n"])), SelectWrapper, function (_ref6) {
|
|
12107
12137
|
var width = _ref6.width;
|
|
12108
12138
|
return width ? width : "60px";
|
|
12109
12139
|
});
|
|
@@ -12591,7 +12621,7 @@ var ResizeLine = function ResizeLine(_ref4) {
|
|
|
12591
12621
|
}))), React__default.createElement(Line, null)));
|
|
12592
12622
|
};
|
|
12593
12623
|
|
|
12594
|
-
var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$
|
|
12624
|
+
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;
|
|
12595
12625
|
var DebugData = styled.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"])));
|
|
12596
12626
|
var MainArea = styled.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
12597
12627
|
var $layout = _ref.$layout,
|
|
@@ -12614,15 +12644,15 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
|
|
|
12614
12644
|
var $layout = _ref5.$layout,
|
|
12615
12645
|
$collapseState = _ref5.$collapseState,
|
|
12616
12646
|
$minDimension = _ref5.$minDimension;
|
|
12617
|
-
return $collapseState === 'collapsing' ? css(_templateObject9$
|
|
12647
|
+
return $collapseState === 'collapsing' ? css(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
|
|
12618
12648
|
}, function (_ref6) {
|
|
12619
12649
|
var $collapseState = _ref6.$collapseState;
|
|
12620
|
-
return $collapseState === 'collapsed' ? css(_templateObject10$
|
|
12650
|
+
return $collapseState === 'collapsed' ? css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
12621
12651
|
}, function (_ref7) {
|
|
12622
12652
|
var $layout = _ref7.$layout,
|
|
12623
12653
|
$collapseState = _ref7.$collapseState,
|
|
12624
12654
|
$minDimension = _ref7.$minDimension;
|
|
12625
|
-
return $collapseState === 'peeking' ? css(_templateObject11$
|
|
12655
|
+
return $collapseState === 'peeking' ? css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
12626
12656
|
}, function (_ref8) {
|
|
12627
12657
|
var $layout = _ref8.$layout,
|
|
12628
12658
|
$collapseState = _ref8.$collapseState,
|
|
@@ -12952,7 +12982,7 @@ var ContentArea = styled.div(_templateObject6$K || (_templateObject6$K = _tagged
|
|
|
12952
12982
|
return legacyLayout && css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
|
|
12953
12983
|
});
|
|
12954
12984
|
|
|
12955
|
-
var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$
|
|
12985
|
+
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;
|
|
12956
12986
|
var ContextTitle = styled.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) {
|
|
12957
12987
|
var compact = _ref.compact;
|
|
12958
12988
|
return compact && css(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
@@ -12964,11 +12994,11 @@ var StyledAnchor = styled.a(_templateObject6$L || (_templateObject6$L = _taggedT
|
|
|
12964
12994
|
var ExternalIconWrapper = styled.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
12965
12995
|
var ContextWrapper = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref2) {
|
|
12966
12996
|
var $menuOpen = _ref2.$menuOpen;
|
|
12967
|
-
return $menuOpen && css(_templateObject9$
|
|
12997
|
+
return $menuOpen && css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
12968
12998
|
}, ContextIcon$1, IconWrapper);
|
|
12969
|
-
var ContextActionA = styled(Link)(_templateObject10$
|
|
12999
|
+
var ContextActionA = styled(Link)(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
|
|
12970
13000
|
var $menuOpen = _ref3.$menuOpen;
|
|
12971
|
-
return $menuOpen && css(_templateObject11$
|
|
13001
|
+
return $menuOpen && css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
12972
13002
|
}, ContextIcon$1, IconWrapper, function (_ref4) {
|
|
12973
13003
|
var $isActive = _ref4.$isActive;
|
|
12974
13004
|
return $isActive && css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n color: var(--grey-12);\n\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
|
|
@@ -13151,7 +13181,7 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
13151
13181
|
};
|
|
13152
13182
|
};
|
|
13153
13183
|
|
|
13154
|
-
var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$
|
|
13184
|
+
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;
|
|
13155
13185
|
var Submenu = styled.ul(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
13156
13186
|
var SubmenuHeader = styled.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
13157
13187
|
var SubmenuContainerInner = styled.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
@@ -13161,9 +13191,9 @@ var ExternalIconWrapper$1 = styled.div(_templateObject6$M || (_templateObject6$M
|
|
|
13161
13191
|
var SubmenuItemAnchor = styled.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
13162
13192
|
var SubmenuItem = styled.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
|
|
13163
13193
|
var isActive = _ref.isActive;
|
|
13164
|
-
return css(_templateObject9$
|
|
13194
|
+
return css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
13165
13195
|
});
|
|
13166
|
-
var SubmenuContainer = styled.div(_templateObject11$
|
|
13196
|
+
var SubmenuContainer = styled.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
13167
13197
|
var ContextContainer = styled.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
|
|
13168
13198
|
var mobileMenu = _ref2.mobileMenu;
|
|
13169
13199
|
return mobileMenu ? '30px' : '70px';
|
|
@@ -13260,7 +13290,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
13260
13290
|
return output;
|
|
13261
13291
|
};
|
|
13262
13292
|
|
|
13263
|
-
var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$
|
|
13293
|
+
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;
|
|
13264
13294
|
var Logo = styled(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"])));
|
|
13265
13295
|
var LogoMark = styled.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"])));
|
|
13266
13296
|
var LogoType = styled.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"])));
|
|
@@ -13269,11 +13299,11 @@ var SVGObjectText = styled.object(_templateObject5$11 || (_templateObject5$11 =
|
|
|
13269
13299
|
var NavigationContainer = styled.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose([""])));
|
|
13270
13300
|
var MenuFooter = styled.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
|
|
13271
13301
|
var FooterItemContainer = styled.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
13272
|
-
var PushContainer = styled.div(_templateObject9$
|
|
13302
|
+
var PushContainer = styled.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
|
|
13273
13303
|
var isPinned = _ref.isPinned;
|
|
13274
|
-
return css(_templateObject10$
|
|
13304
|
+
return css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
|
|
13275
13305
|
});
|
|
13276
|
-
var Container$10 = styled.div(_templateObject11$
|
|
13306
|
+
var Container$10 = styled.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref2) {
|
|
13277
13307
|
var open = _ref2.open,
|
|
13278
13308
|
desktopSize = _ref2.desktopSize;
|
|
13279
13309
|
return css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
@@ -13378,7 +13408,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13378
13408
|
})) : null))), document.body));
|
|
13379
13409
|
};
|
|
13380
13410
|
|
|
13381
|
-
var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$
|
|
13411
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$m;
|
|
13382
13412
|
var MetaConatiner = styled.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"])));
|
|
13383
13413
|
var LabelTitle = styled.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"])));
|
|
13384
13414
|
var LabelContent = styled.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"])));
|
|
@@ -13387,8 +13417,8 @@ var TitleContainer = styled.div(_templateObject5$12 || (_templateObject5$12 = _t
|
|
|
13387
13417
|
var Container$11 = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
|
|
13388
13418
|
var TitleBox = styled.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
13389
13419
|
var IconBox = styled.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$11);
|
|
13390
|
-
var CopyTextBox = styled.pre(_templateObject9$
|
|
13391
|
-
var CopyBox = styled.div(_templateObject10$
|
|
13420
|
+
var CopyTextBox = styled.pre(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: var(--font-data);\n right:10px;\n margin-top: -23px;\n"])));
|
|
13421
|
+
var CopyBox = styled.div(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n"])));
|
|
13392
13422
|
var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
13393
13423
|
var item = _ref.item,
|
|
13394
13424
|
onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
|
|
@@ -13472,7 +13502,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13472
13502
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13473
13503
|
};
|
|
13474
13504
|
|
|
13475
|
-
var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$
|
|
13505
|
+
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;
|
|
13476
13506
|
var DrawerTop = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose([""])));
|
|
13477
13507
|
var DrawerBottom = styled.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);
|
|
13478
13508
|
var DrawerHeader = styled.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"])));
|
|
@@ -13481,10 +13511,10 @@ var UserOptions = styled.div(_templateObject5$13 || (_templateObject5$13 = _tagg
|
|
|
13481
13511
|
var Logout = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
|
|
13482
13512
|
var LinkMenu = styled.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
13483
13513
|
var LinkMenuItem = styled.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
13484
|
-
var IconWrapperFooter = styled.div(_templateObject9$
|
|
13485
|
-
var LinkMenuItemA = styled(Link)(_templateObject10$
|
|
13514
|
+
var IconWrapperFooter = styled.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n padding-right: 20px;\n"])));
|
|
13515
|
+
var LinkMenuItemA = styled(Link)(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 400;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
|
|
13486
13516
|
var isActive = _ref.isActive;
|
|
13487
|
-
return isActive && css(_templateObject11$
|
|
13517
|
+
return isActive && css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
|
|
13488
13518
|
});
|
|
13489
13519
|
var FooterMeta = styled.div(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
|
|
13490
13520
|
var icon = _ref2.icon;
|
|
@@ -13674,7 +13704,7 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13674
13704
|
return React__default.createElement(Container$14, null, unread && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13675
13705
|
};
|
|
13676
13706
|
|
|
13677
|
-
var _templateObject$1I, _templateObject2$1t, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$
|
|
13707
|
+
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;
|
|
13678
13708
|
var CoreStyle = 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"])));
|
|
13679
13709
|
var ContainerStatic = styled.div(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13680
13710
|
var themeColor = _ref.themeColor;
|
|
@@ -13684,10 +13714,10 @@ var DefaultText = styled.span(_templateObject5$15 || (_templateObject5$15 = _tag
|
|
|
13684
13714
|
var LinkText = styled.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
|
|
13685
13715
|
var ContainerLinked = styled.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) {
|
|
13686
13716
|
var themeColor = _ref2.themeColor;
|
|
13687
|
-
return themeColor ? css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$
|
|
13717
|
+
return themeColor ? css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13688
13718
|
}, function (_ref3) {
|
|
13689
13719
|
var themeColor = _ref3.themeColor;
|
|
13690
|
-
return themeColor ? css(_templateObject10$
|
|
13720
|
+
return themeColor ? css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n background-color: var(--", "-9);\n border: 2px solid var(--", "-9);\n color: var(--white-12);\n "])), themeColor, themeColor) : css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
|
|
13691
13721
|
});
|
|
13692
13722
|
var Container$15 = styled.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13693
13723
|
var ready = _ref4.ready,
|
|
@@ -13759,7 +13789,7 @@ var TopBarBadge = function TopBarBadge(_ref5) {
|
|
|
13759
13789
|
}), badgeComponent);
|
|
13760
13790
|
};
|
|
13761
13791
|
|
|
13762
|
-
var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$
|
|
13792
|
+
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;
|
|
13763
13793
|
var Container$16 = styled.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"])));
|
|
13764
13794
|
var RightArea$1 = styled.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13765
13795
|
var SearchBar = styled.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"])));
|
|
@@ -13771,10 +13801,10 @@ var DrawerToggle = styled.button.attrs({
|
|
|
13771
13801
|
type: 'button'
|
|
13772
13802
|
})(_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) {
|
|
13773
13803
|
var isActive = _ref.isActive;
|
|
13774
|
-
return isActive && css(_templateObject9$
|
|
13804
|
+
return isActive && css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
|
|
13775
13805
|
});
|
|
13776
|
-
var DrawerPortalWrapper = styled.div(_templateObject10$
|
|
13777
|
-
var Drawer = styled.div(_templateObject11$
|
|
13806
|
+
var DrawerPortalWrapper = styled.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose([""])));
|
|
13807
|
+
var Drawer = styled.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n\n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
|
|
13778
13808
|
var baseWidth = _ref2.baseWidth;
|
|
13779
13809
|
return baseWidth ? baseWidth : "200px";
|
|
13780
13810
|
}, function (_ref3) {
|
|
@@ -14380,7 +14410,7 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14380
14410
|
};
|
|
14381
14411
|
|
|
14382
14412
|
var _excluded$Q = ["children"];
|
|
14383
|
-
var _templateObject$1W, _templateObject2$1E, _templateObject3$1r, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$
|
|
14413
|
+
var _templateObject$1W, _templateObject2$1E, _templateObject3$1r, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
|
|
14384
14414
|
var Container$1f = styled.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"])));
|
|
14385
14415
|
var LogoContainer = styled.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"])));
|
|
14386
14416
|
var LogoTopText = styled.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"])));
|
|
@@ -14389,7 +14419,7 @@ var SidebarBox = styled.div(_templateObject5$18 || (_templateObject5$18 = _tagge
|
|
|
14389
14419
|
var SidebarHeading = styled.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"])));
|
|
14390
14420
|
var SidebarLinkHeading = styled.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"])));
|
|
14391
14421
|
var BackLink$1 = styled(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"])));
|
|
14392
|
-
var SLink = styled(Link)(_templateObject9$
|
|
14422
|
+
var SLink = styled(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"])));
|
|
14393
14423
|
var SidebarLink = function SidebarLink(_ref) {
|
|
14394
14424
|
var title = _ref.title,
|
|
14395
14425
|
to = _ref.to;
|