scorer-ui-kit 2.2.1 → 2.2.3
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/Form/index.d.ts +3 -2
- package/dist/Form/molecules/ButtonsStack.d.ts +15 -0
- package/dist/Layouts/atoms/ResizeLine.d.ts +11 -0
- package/dist/Layouts/index.d.ts +29 -2
- package/dist/Layouts/molecules/SplitLayout.d.ts +4 -0
- package/dist/Misc/atoms/Tag.d.ts +5 -0
- package/dist/Pages/atoms/PageTitle.d.ts +2 -0
- package/dist/Pages/index.d.ts +2 -1
- package/dist/Pages/molecules/PageHeader.d.ts +10 -1
- package/dist/Tables/atoms/TableRowThumbnail.d.ts +3 -2
- package/dist/Tables/index.d.ts +1 -0
- package/dist/common/ContentPlaceholder.d.ts +4 -0
- package/dist/common/index.d.ts +2 -0
- package/dist/hooks/index.d.ts +2 -1
- package/dist/hooks/useLocalStorage.d.ts +1 -0
- package/dist/index.d.ts +7 -6
- package/dist/index.js +1355 -749
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1351 -749
- package/dist/index.modern.js.map +1 -1
- package/dist/theme/ThemeHelpers.d.ts +2 -0
- package/dist/theme/ThemeVariables.d.ts +2 -2
- package/dist/theme/variables/Colors.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1696,13 +1696,19 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
1696
1696
|
}
|
|
1697
1697
|
|
|
1698
1698
|
var _templateObject;
|
|
1699
|
-
var layoutVariables = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n /** Layouts */\n :root {\n --max-content-width: 1840px;\n }\n\n .content-layout {\n \n &-default {\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 48px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 64px;\n --utility-header-padding-top: 48px;\n\n @media ", "{\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 96px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 96px;\n --utility-header-padding-top: 48px;\n }\n\n @media ", "{\n --content-layout-padding-top: 30px;\n --content-layout-padding-right: 120px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 120px;\n --utility-header-padding-top: 48px;\n }\n }\n\n &-fullscreen {\n --content-layout-padding-top: 0px;\n --content-layout-padding-right: 0px;\n --content-layout-padding-bottom: 0px;\n --content-layout-padding-left: 0px;\n --utility-header-padding-top: 0px;\n }\n\n &-dashboard {\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 32px;\n --content-layout-padding-bottom: 32px;\n --content-layout-padding-left: 32px;\n --utility-header-padding-top: 32px;\n }\n }\n"])), deviceMediaQuery.xlarge, deviceMediaQuery.xxlarge);
|
|
1699
|
+
var layoutVariables = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n /** Layouts */\n :root {\n --max-content-width: 1840px;\n }\n\n .content-layout {\n \n &-default {\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 48px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 64px;\n --utility-header-padding-top: 48px;\n\n @media ", "{\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 96px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 96px;\n --utility-header-padding-top: 48px;\n }\n\n @media ", "{\n --content-layout-padding-top: 30px;\n --content-layout-padding-right: 120px;\n --content-layout-padding-bottom: 64px;\n --content-layout-padding-left: 120px;\n --utility-header-padding-top: 48px;\n }\n }\n\n &-fullscreen {\n --content-layout-padding-top: 0px;\n --content-layout-padding-right: 0px;\n --content-layout-padding-bottom: 0px;\n --content-layout-padding-left: 0px;\n --utility-header-padding-top: 0px;\n --max-content-width: none;\n }\n\n &-dashboard {\n --content-layout-padding-top: 32px;\n --content-layout-padding-right: 32px;\n --content-layout-padding-bottom: 32px;\n --content-layout-padding-left: 32px;\n --utility-header-padding-top: 32px;\n --max-content-width: none;\n }\n }\n"])), deviceMediaQuery.xlarge, deviceMediaQuery.xxlarge);
|
|
1700
1700
|
|
|
1701
1701
|
var _templateObject$1;
|
|
1702
|
-
var GlobalStyle = styled.createGlobalStyle(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n :root {\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 --font-size: 14px;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n\n --input-height: 40px;\n }\n\n .button-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .button-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 .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 .light-theme {\n /* Light Mode */\n --grey-1: #fcfcfd;\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-a12: #00285bf4;\n --primary-a11: #00429cc3;\n --primary-a10: #0062e98a;\n --primary-a9: #006bff7f;\n --primary-a8: #0061eb89;\n --primary-a7: #0066f364;\n --primary-a6: #016fff4a;\n --primary-a5: #0077ff36;\n --primary-a4: #0079ff24;\n --primary-a3: #006eff15;\n --primary-a2: #0066ff0a;\n --primary-a1: #0055ff03;\n --info-1: #fafefd;\n --info-2: #f1fcfa;\n --info-3: #e7f9f5;\n --info-4: #d9f3ee;\n --info-5: #c7ebe5;\n --info-6: #afdfd7;\n --info-7: #8dcec3;\n --info-8: #53b9ab;\n --info-9: #12a594;\n --info-10: #0e9888;\n --info-11: #067a6f;\n --info-12: #10302b;\n --info-a12: #00221def;\n --info-a11: #00776bf9;\n --info-a10: #009281f1;\n --info-a9: #009e8ced;\n --info-a8: #009783ac;\n --info-a7: #01927a72;\n --info-a6: #00998050;\n --info-a5: #00a48938;\n --info-a4: #02af8c26;\n --info-a3: #02c09718;\n --info-a2: #01c8a40e;\n --info-a1: #05cd9b05;\n --success-1: #0d1912;\n --success-2: #0c1f17;\n --success-3: #0f291e;\n --success-4: #113123;\n --success-5: #133929;\n --success-6: #164430;\n --success-7: #1b543a;\n --success-8: #236e4a;\n --success-9: #30a46c;\n --success-10: #3cb179;\n --success-11: #4cc38a;\n --success-12: #e5fbeb;\n --success-a12: #eafff0fa;\n --success-a11: #62ffb3bd;\n --success-a10: #54ffafa9;\n --success-a9: #47ffa69a;\n --success-a8: #49ffaa5e;\n --success-a7: #43ffad42;\n --success-a6: #3dffb130;\n --success-a5: #38feb524;\n --success-a4: #33feb31b;\n --success-a3: #2afebe12;\n --success-a2: #00f7ca07;\n --success-a1: #0000;\n --caution-1: #1f1206;\n --caution-2: #2b1400;\n --caution-3: #391a03;\n --caution-4: #441f04;\n --caution-5: #4f2305;\n --caution-6: #5f2a06;\n --caution-7: #763205;\n --caution-8: #943e00;\n --caution-9: #f76808;\n --caution-10: #ff802b;\n --caution-11: #ff8b3e;\n --caution-12: #feeadd;\n --caution-a12: #ffeee1fa;\n --caution-a11: #ff8c3ffa;\n --caution-a10: #ff842cfa;\n --caution-a9: #ff6b08f6;\n --caution-a8: #fe660085;\n --caution-a7: #ff640363;\n --caution-a6: #ff650649;\n --caution-a5: #fe620137;\n --caution-a4: #fe61002a;\n --caution-a3: #fd54001e;\n --caution-a2: #fd37000e;\n --caution-a1: #0000;\n --warning-1: #150f0f;\n --warning-2: #1e1413;\n --warning-3: #361717;\n --warning-4: #49191a;\n --warning-5: #582122;\n --warning-6: #692e2e;\n --warning-7: #813e3e;\n --warning-8: #a75252;\n --warning-9: #d16565;\n --warning-10: #c35959;\n --warning-11: #ff9795;\n --warning-12: #f9d5d3;\n --warning-a12: #ffdad8f9;\n --warning-a11: #ff9795ef;\n --warning-a10: #ff7272bf;\n --warning-a9: #ff7979ce;\n --warning-a8: #ff7878a1;\n --warning-a7: #ff717178;\n --warning-a6: #fd5f5f5f;\n --warning-a5: #fd464a4d;\n --warning-a4: #ff33383c;\n --warning-a3: #fd383828;\n --warning-a2: #fe48360e;\n --warning-a1: #de000005;\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-a12: #002012ea;\n --green-a11: #006b3be7;\n --green-a10: #008346d6;\n --green-a9: #008f4acf;\n --green-a8: #00934ca4;\n --green-a7: #008c3d6d;\n --green-a6: #0193364b;\n --green-a5: #009b3633;\n --green-a4: #01a63522;\n --green-a3: #02ba3c16;\n --green-a2: #00c43b0d;\n --green-a1: #05c04304;\n --orange-1: #fefcfb;\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-a12: #3d0000da;\n --red-a11: #970002b2;\n --red-a10: #a50002a7;\n --red-a9: #b300009a;\n --red-a8: #a6080069;\n --red-a7: #b10a0051;\n --red-a6: #c609003e;\n --red-a5: #da0b002f;\n --red-a4: #f00f0022;\n --red-a3: #bc0e0013;\n --red-a2: #b7000007;\n --red-a1: #aa000003;\n --black-1: #000000;\n --black-a12: #000000e8;\n --black-a11: #00000090;\n --black-a10: #0000007a;\n --black-a9: #00000070;\n --black-a8: #00000038;\n --black-a7: #00000024;\n --black-a6: #0000001d;\n --black-a5: #00000017;\n --black-a4: #00000012;\n --black-a3: #0000000c;\n --black-a2: #00000007;\n --black-a1: #00000003;\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-a12: #380e00ee;\n --orange-a11: #bc4800fa;\n --orange-a10: #ed5b00fa;\n --orange-a9: #f76300f7;\n --orange-a8: #f86300b1;\n --orange-a7: #ff66017e;\n --orange-a6: #ff6b0158;\n --orange-a5: #ff6b013c;\n --orange-a4: #ff6e0028;\n --orange-a3: #ff6c0318;\n --orange-a2: #e860050b;\n --orange-a1: #c0430504;\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-a12: #020b1de3;\n --grey-a11: #020b1d9f;\n --grey-a10: #00071b7f;\n --grey-a9: #00051d74;\n --grey-a8: #00083046;\n --grey-a7: #00062e32;\n --grey-a6: #00002f26;\n --grey-a5: #0009321f;\n --grey-a4: #00002d17;\n --grey-a3: #00003310;\n --grey-a2: #00005506;\n --grey-a1: #00005503;\n --white-1: #FFFFFF;\n --white-a12: #ffffffeb;\n --white-a11: #ffffff97;\n --white-a10: #ffffff72;\n --white-a9: #ffffff62;\n --white-a8: #ffffff3f;\n --white-a7: #ffffff2d;\n --white-a6: #ffffff20;\n --white-a5: #ffffff16;\n --white-a4: #ffffff0e;\n --white-a3: #ffffff09;\n --white-a2: #ffffff03;\n --white-a1: #fff0;\n\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 /* icons */\n --inverse: var(--grey-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 --white: var(--white-1);\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n }\n\n .dark-theme {\n /* Dark mode */\n\n --grey-1: #111113;\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-a12: #cee3ff;\n --primary-a11: #81b7ff;\n --primary-a10: #7bb2fff3;\n --primary-a9: #80b5ff;\n --primary-a8: #4c97ffb5;\n --primary-a7: #4c98ff97;\n --primary-a6: #4293ff81;\n --primary-a5: #3089ff70;\n --primary-a4: #2181ff5d;\n --primary-a3: #378aff41;\n --primary-a2: #4d99ff1e;\n --primary-a1: #0000;\n --info-1: #091915;\n --info-2: #04201b;\n --info-3: #062923;\n --info-4: #07312b;\n --info-5: #083932;\n --info-6: #09443c;\n --info-7: #0b544a;\n --info-8: #0c6d62;\n --info-9: #12a594;\n --info-10: #10b3a3;\n --info-11: #0ac5b3;\n --info-12: #e1faf4;\n --info-a12: #e6fff9fa;\n --info-a11: #0affe7bf;\n --info-a10: #13ffe7ab;\n --info-a9: #18ffe49b;\n --info-a8: #11ffe75d;\n --info-a7: #11ffe342;\n --info-a6: #09ffe630;\n --info-a5: #02fee424;\n --info-a4: #00fde81b;\n --info-a3: #00fddc12;\n --info-a2: #00fbd508;\n --info-a1: #0000;\n --success-1: #0d1912;\n --success-2: #0c1f17;\n --success-3: #0f291e;\n --success-4: #113123;\n --success-5: #133929;\n --success-6: #164430;\n --success-7: #1b543a;\n --success-8: #236e4a;\n --success-9: #30a46c;\n --success-10: #3cb179;\n --success-11: #4cc38a;\n --success-12: #e5fbeb;\n --success-a12: #eafff0fa;\n --success-a11: #62ffb3bd;\n --success-a10: #54ffafa9;\n --success-a9: #47ffa69a;\n --success-a8: #49ffaa5e;\n --success-a7: #43ffad42;\n --success-a6: #3dffb130;\n --success-a5: #38feb524;\n --success-a4: #33feb31b;\n --success-a3: #2afebe12;\n --success-a2: #00f7ca07;\n --success-a1: #0000;\n --caution-1: #1f1206;\n --caution-2: #2b1400;\n --caution-3: #391a03;\n --caution-4: #441f04;\n --caution-5: #4f2305;\n --caution-6: #5f2a06;\n --caution-7: #763205;\n --caution-8: #943e00;\n --caution-9: #f76808;\n --caution-10: #ff802b;\n --caution-11: #ff8b3e;\n --caution-12: #feeadd;\n --caution-a12: #ffeee1fa;\n --caution-a11: #ff8c3ffa;\n --caution-a10: #ff842cfa;\n --caution-a9: #ff6b08f6;\n --caution-a8: #fe660085;\n --caution-a7: #ff640363;\n --caution-a6: #ff650649;\n --caution-a5: #fe620137;\n --caution-a4: #fe61002a;\n --caution-a3: #fd54001e;\n --caution-a2: #fd37000e;\n --caution-a1: #0000;\n --warning-1: #150f0f;\n --warning-2: #1e1413;\n --warning-3: #361717;\n --warning-4: #49191a;\n --warning-5: #582122;\n --warning-6: #692e2e;\n --warning-7: #813e3e;\n --warning-8: #a75252;\n --warning-9: #d16565;\n --warning-10: #c35959;\n --warning-11: #ff9795;\n --warning-12: #f9d5d3;\n --warning-a12: #ffdad8f9;\n --warning-a11: #ff9795ef;\n --warning-a10: #ff7272bf;\n --warning-a9: #ff7979ce;\n --warning-a8: #ff7878a1;\n --warning-a7: #ff717178;\n --warning-a6: #fd5f5f5f;\n --warning-a5: #fd464a4d;\n --warning-a4: #ff33383c;\n --warning-a3: #fd383828;\n --warning-a2: #fe48360e;\n --warning-a1: #de000005;\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-a12: #eafff0fa;\n --green-a11: #62ffb3bd;\n --green-a10: #54ffafa9;\n --green-a9: #47ffa69a;\n --green-a8: #49ffaa5e;\n --green-a7: #43ffad42;\n --green-a6: #3dffb130;\n --green-a5: #38feb524;\n --green-a4: #33feb31b;\n --green-a3: #2afebe12;\n --green-a2: #00f7ca07;\n --green-a1: #0000;\n --orange-1: #1f1206;\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-a12: #ffdad8f9;\n --red-a11: #ff9795ef;\n --red-a10: #ff7272bf;\n --red-a9: #ff7979ce;\n --red-a8: #ff7878a1;\n --red-a7: #ff717178;\n --red-a6: #fd5f5f5f;\n --red-a5: #fd464a4d;\n --red-a4: #ff33383c;\n --red-a3: #fd383828;\n --red-a2: #fe48360e;\n --red-a1: #de000005;\n --black-1: #000;\n --black-a12: #000000e8;\n --black-a11: #00000090;\n --black-a10: #0000007a;\n --black-a9: #00000070;\n --black-a8: #00000038;\n --black-a7: #00000024;\n --black-a6: #0000001d;\n --black-a5: #00000017;\n --black-a4: #00000012;\n --black-a3: #0000000c;\n --black-a2: #00000007;\n --black-a1: #00000003;\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-a12: #ffeee1fa;\n --orange-a11: #ff8c3ffa;\n --orange-a10: #ff842cfa;\n --orange-a9: #ff6b08f6;\n --orange-a8: #fe660085;\n --orange-a7: #ff640363;\n --orange-a6: #ff650649;\n --orange-a5: #fe620137;\n --orange-a4: #fe61002a;\n --orange-a3: #fd54001e;\n --orange-a2: #fd37000e;\n --orange-a1: #0000;\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-a12: #fcfdffef;\n --grey-a11: #f1f7feb5;\n --grey-a10: #e5edfd7b;\n --grey-a9: #dfebfd;\n --grey-a8: #d9edff5d;\n --grey-a7: #d9edff40;\n --grey-a6: #d6ebfd30;\n --grey-a5: #d9edfe25;\n --grey-a4: #d3edf81d;\n --grey-a3: #ddeaf814;\n --grey-a2: #d8f4f609;\n --grey-a1: #0000;\n --white-1: #fff;\n --white-a12: #ffffffeb;\n --white-a11: #ffffff97;\n --white-a10: #ffffff72;\n --white-a9: #ffffff62;\n --white-a8: #ffffff3f;\n --white-a7: #ffffff2d;\n --white-a6: #ffffff20;\n --white-a5: #ffffff16;\n --white-a4: #ffffff0e;\n --white-a3: #ffffff09;\n --white-a2: #ffffff03;\n --white-a1: #fff0;\n\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 /* 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 --white: var(--white-1);\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n }\n \n"])), layoutVariables);
|
|
1702
|
+
var colorVariables = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n.light-theme {\n /* Light Mode */\n --grey-1: #fcfcfd;\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-a12: #00285bf4;\n --primary-a11: #00429cc3;\n --primary-a10: #0062e98a;\n --primary-a9: #006bff7f;\n --primary-a8: #0061eb89;\n --primary-a7: #0066f364;\n --primary-a6: #016fff4a;\n --primary-a5: #0077ff36;\n --primary-a4: #0079ff24;\n --primary-a3: #006eff15;\n --primary-a2: #0066ff0a;\n --primary-a1: #0055ff03;\n --info-1: #fafefd;\n --info-2: #f1fcfa;\n --info-3: #e7f9f5;\n --info-4: #d9f3ee;\n --info-5: #c7ebe5;\n --info-6: #afdfd7;\n --info-7: #8dcec3;\n --info-8: #53b9ab;\n --info-9: #12a594;\n --info-10: #0e9888;\n --info-11: #067a6f;\n --info-12: #10302b;\n --info-a12: #00221def;\n --info-a11: #00776bf9;\n --info-a10: #009281f1;\n --info-a9: #009e8ced;\n --info-a8: #009783ac;\n --info-a7: #01927a72;\n --info-a6: #00998050;\n --info-a5: #00a48938;\n --info-a4: #02af8c26;\n --info-a3: #02c09718;\n --info-a2: #01c8a40e;\n --info-a1: #05cd9b05;\n --success-1: #0d1912;\n --success-2: #0c1f17;\n --success-3: #0f291e;\n --success-4: #113123;\n --success-5: #133929;\n --success-6: #164430;\n --success-7: #1b543a;\n --success-8: #236e4a;\n --success-9: #30a46c;\n --success-10: #3cb179;\n --success-11: #4cc38a;\n --success-12: #e5fbeb;\n --success-a12: #eafff0fa;\n --success-a11: #62ffb3bd;\n --success-a10: #54ffafa9;\n --success-a9: #47ffa69a;\n --success-a8: #49ffaa5e;\n --success-a7: #43ffad42;\n --success-a6: #3dffb130;\n --success-a5: #38feb524;\n --success-a4: #33feb31b;\n --success-a3: #2afebe12;\n --success-a2: #00f7ca07;\n --success-a1: #0000;\n --caution-1: #1f1206;\n --caution-2: #2b1400;\n --caution-3: #391a03;\n --caution-4: #441f04;\n --caution-5: #4f2305;\n --caution-6: #5f2a06;\n --caution-7: #763205;\n --caution-8: #943e00;\n --caution-9: #f76808;\n --caution-10: #ff802b;\n --caution-11: #ff8b3e;\n --caution-12: #feeadd;\n --caution-a12: #ffeee1fa;\n --caution-a11: #ff8c3ffa;\n --caution-a10: #ff842cfa;\n --caution-a9: #ff6b08f6;\n --caution-a8: #fe660085;\n --caution-a7: #ff640363;\n --caution-a6: #ff650649;\n --caution-a5: #fe620137;\n --caution-a4: #fe61002a;\n --caution-a3: #fd54001e;\n --caution-a2: #fd37000e;\n --caution-a1: #0000;\n --warning-1: #150f0f;\n --warning-2: #1e1413;\n --warning-3: #361717;\n --warning-4: #49191a;\n --warning-5: #582122;\n --warning-6: #692e2e;\n --warning-7: #813e3e;\n --warning-8: #a75252;\n --warning-9: #d16565;\n --warning-10: #c35959;\n --warning-11: #ff9795;\n --warning-12: #f9d5d3;\n --warning-a12: #ffdad8f9;\n --warning-a11: #ff9795ef;\n --warning-a10: #ff7272bf;\n --warning-a9: #ff7979ce;\n --warning-a8: #ff7878a1;\n --warning-a7: #ff717178;\n --warning-a6: #fd5f5f5f;\n --warning-a5: #fd464a4d;\n --warning-a4: #ff33383c;\n --warning-a3: #fd383828;\n --warning-a2: #fe48360e;\n --warning-a1: #de000005;\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-a12: #002012ea;\n --green-a11: #006b3be7;\n --green-a10: #008346d6;\n --green-a9: #008f4acf;\n --green-a8: #00934ca4;\n --green-a7: #008c3d6d;\n --green-a6: #0193364b;\n --green-a5: #009b3633;\n --green-a4: #01a63522;\n --green-a3: #02ba3c16;\n --green-a2: #00c43b0d;\n --green-a1: #05c04304;\n --orange-1: #fefcfb;\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-a12: #3d0000da;\n --red-a11: #970002b2;\n --red-a10: #a50002a7;\n --red-a9: #b300009a;\n --red-a8: #a6080069;\n --red-a7: #b10a0051;\n --red-a6: #c609003e;\n --red-a5: #da0b002f;\n --red-a4: #f00f0022;\n --red-a3: #bc0e0013;\n --red-a2: #b7000007;\n --red-a1: #aa000003;\n --black-1: #000000;\n --black-a12: #000000e8;\n --black-a11: #00000090;\n --black-a10: #0000007a;\n --black-a9: #00000070;\n --black-a8: #00000038;\n --black-a7: #00000024;\n --black-a6: #0000001d;\n --black-a5: #00000017;\n --black-a4: #00000012;\n --black-a3: #0000000c;\n --black-a2: #00000007;\n --black-a1: #00000003;\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-a12: #380e00ee;\n --orange-a11: #bc4800fa;\n --orange-a10: #ed5b00fa;\n --orange-a9: #f76300f7;\n --orange-a8: #f86300b1;\n --orange-a7: #ff66017e;\n --orange-a6: #ff6b0158;\n --orange-a5: #ff6b013c;\n --orange-a4: #ff6e0028;\n --orange-a3: #ff6c0318;\n --orange-a2: #e860050b;\n --orange-a1: #c0430504;\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-a12: #020b1de3;\n --grey-a11: #020b1d9f;\n --grey-a10: #00071b7f;\n --grey-a9: #00051d74;\n --grey-a8: #00083046;\n --grey-a7: #00062e32;\n --grey-a6: #00002f26;\n --grey-a5: #0009321f;\n --grey-a4: #00002d17;\n --grey-a3: #00003310;\n --grey-a2: #00005506;\n --grey-a1: #00005503;\n --white-1: #FFFFFF;\n --white-a12: #ffffffeb;\n --white-a11: #ffffff97;\n --white-a10: #ffffff72;\n --white-a9: #ffffff62;\n --white-a8: #ffffff3f;\n --white-a7: #ffffff2d;\n --white-a6: #ffffff20;\n --white-a5: #ffffff16;\n --white-a4: #ffffff0e;\n --white-a3: #ffffff09;\n --white-a2: #ffffff03;\n --white-a1: #fff0;\n\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 /* icons */\n --inverse: var(--grey-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 --white: var(--white-1);\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n\n --main-background-gradient: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n }\n\n .dark-theme {\n /* Dark mode */\n\n --grey-1: #111113;\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-a12: #cee3ff;\n --primary-a11: #81b7ff;\n --primary-a10: #7bb2fff3;\n --primary-a9: #80b5ff;\n --primary-a8: #4c97ffb5;\n --primary-a7: #4c98ff97;\n --primary-a6: #4293ff81;\n --primary-a5: #3089ff70;\n --primary-a4: #2181ff5d;\n --primary-a3: #378aff41;\n --primary-a2: #4d99ff1e;\n --primary-a1: #0000;\n --info-1: #091915;\n --info-2: #04201b;\n --info-3: #062923;\n --info-4: #07312b;\n --info-5: #083932;\n --info-6: #09443c;\n --info-7: #0b544a;\n --info-8: #0c6d62;\n --info-9: #12a594;\n --info-10: #10b3a3;\n --info-11: #0ac5b3;\n --info-12: #e1faf4;\n --info-a12: #e6fff9fa;\n --info-a11: #0affe7bf;\n --info-a10: #13ffe7ab;\n --info-a9: #18ffe49b;\n --info-a8: #11ffe75d;\n --info-a7: #11ffe342;\n --info-a6: #09ffe630;\n --info-a5: #02fee424;\n --info-a4: #00fde81b;\n --info-a3: #00fddc12;\n --info-a2: #00fbd508;\n --info-a1: #0000;\n --success-1: #0d1912;\n --success-2: #0c1f17;\n --success-3: #0f291e;\n --success-4: #113123;\n --success-5: #133929;\n --success-6: #164430;\n --success-7: #1b543a;\n --success-8: #236e4a;\n --success-9: #30a46c;\n --success-10: #3cb179;\n --success-11: #4cc38a;\n --success-12: #e5fbeb;\n --success-a12: #eafff0fa;\n --success-a11: #62ffb3bd;\n --success-a10: #54ffafa9;\n --success-a9: #47ffa69a;\n --success-a8: #49ffaa5e;\n --success-a7: #43ffad42;\n --success-a6: #3dffb130;\n --success-a5: #38feb524;\n --success-a4: #33feb31b;\n --success-a3: #2afebe12;\n --success-a2: #00f7ca07;\n --success-a1: #0000;\n --caution-1: #1f1206;\n --caution-2: #2b1400;\n --caution-3: #391a03;\n --caution-4: #441f04;\n --caution-5: #4f2305;\n --caution-6: #5f2a06;\n --caution-7: #763205;\n --caution-8: #943e00;\n --caution-9: #f76808;\n --caution-10: #ff802b;\n --caution-11: #ff8b3e;\n --caution-12: #feeadd;\n --caution-a12: #ffeee1fa;\n --caution-a11: #ff8c3ffa;\n --caution-a10: #ff842cfa;\n --caution-a9: #ff6b08f6;\n --caution-a8: #fe660085;\n --caution-a7: #ff640363;\n --caution-a6: #ff650649;\n --caution-a5: #fe620137;\n --caution-a4: #fe61002a;\n --caution-a3: #fd54001e;\n --caution-a2: #fd37000e;\n --caution-a1: #0000;\n --warning-1: #150f0f;\n --warning-2: #1e1413;\n --warning-3: #361717;\n --warning-4: #49191a;\n --warning-5: #582122;\n --warning-6: #692e2e;\n --warning-7: #813e3e;\n --warning-8: #a75252;\n --warning-9: #d16565;\n --warning-10: #c35959;\n --warning-11: #ff9795;\n --warning-12: #f9d5d3;\n --warning-a12: #ffdad8f9;\n --warning-a11: #ff9795ef;\n --warning-a10: #ff7272bf;\n --warning-a9: #ff7979ce;\n --warning-a8: #ff7878a1;\n --warning-a7: #ff717178;\n --warning-a6: #fd5f5f5f;\n --warning-a5: #fd464a4d;\n --warning-a4: #ff33383c;\n --warning-a3: #fd383828;\n --warning-a2: #fe48360e;\n --warning-a1: #de000005;\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-a12: #eafff0fa;\n --green-a11: #62ffb3bd;\n --green-a10: #54ffafa9;\n --green-a9: #47ffa69a;\n --green-a8: #49ffaa5e;\n --green-a7: #43ffad42;\n --green-a6: #3dffb130;\n --green-a5: #38feb524;\n --green-a4: #33feb31b;\n --green-a3: #2afebe12;\n --green-a2: #00f7ca07;\n --green-a1: #0000;\n --orange-1: #1f1206;\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-a12: #ffdad8f9;\n --red-a11: #ff9795ef;\n --red-a10: #ff7272bf;\n --red-a9: #ff7979ce;\n --red-a8: #ff7878a1;\n --red-a7: #ff717178;\n --red-a6: #fd5f5f5f;\n --red-a5: #fd464a4d;\n --red-a4: #ff33383c;\n --red-a3: #fd383828;\n --red-a2: #fe48360e;\n --red-a1: #de000005;\n --black-1: #000;\n --black-a12: #000000e8;\n --black-a11: #00000090;\n --black-a10: #0000007a;\n --black-a9: #00000070;\n --black-a8: #00000038;\n --black-a7: #00000024;\n --black-a6: #0000001d;\n --black-a5: #00000017;\n --black-a4: #00000012;\n --black-a3: #0000000c;\n --black-a2: #00000007;\n --black-a1: #00000003;\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-a12: #ffeee1fa;\n --orange-a11: #ff8c3ffa;\n --orange-a10: #ff842cfa;\n --orange-a9: #ff6b08f6;\n --orange-a8: #fe660085;\n --orange-a7: #ff640363;\n --orange-a6: #ff650649;\n --orange-a5: #fe620137;\n --orange-a4: #fe61002a;\n --orange-a3: #fd54001e;\n --orange-a2: #fd37000e;\n --orange-a1: #0000;\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-a12: #fcfdffef;\n --grey-a11: #f1f7feb5;\n --grey-a10: #e5edfd7b;\n --grey-a9: #dfebfd;\n --grey-a8: #d9edff5d;\n --grey-a7: #d9edff40;\n --grey-a6: #d6ebfd30;\n --grey-a5: #d9edfe25;\n --grey-a4: #d3edf81d;\n --grey-a3: #ddeaf814;\n --grey-a2: #d8f4f609;\n --grey-a1: #0000;\n --white-1: #fff;\n --white-a12: #ffffffeb;\n --white-a11: #ffffff97;\n --white-a10: #ffffff72;\n --white-a9: #ffffff62;\n --white-a8: #ffffff3f;\n --white-a7: #ffffff2d;\n --white-a6: #ffffff20;\n --white-a5: #ffffff16;\n --white-a4: #ffffff0e;\n --white-a3: #ffffff09;\n --white-a2: #ffffff03;\n --white-a1: #fff0;\n\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 /* 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 --white: var(--white-1);\n\n --spinner-danger: var(--warning-8);\n --spinner-secondary: var(--grey-8);\n --spinner-primary: var(--primary-6);\n --spinner-simple: var(--grey-a8);\n\n --main-background-gradient: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n }\n\n"])));
|
|
1703
1703
|
|
|
1704
|
-
var _templateObject$2
|
|
1705
|
-
var
|
|
1704
|
+
var _templateObject$2;
|
|
1705
|
+
var ThemeVariables = styled.createGlobalStyle(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\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 --font-size: 14px;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n\n --input-height: 40px;\n \n }\n\n .button-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .button-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 .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"])), layoutVariables, colorVariables);
|
|
1706
|
+
|
|
1707
|
+
var _templateObject$3;
|
|
1708
|
+
var BaseStyles = styled.css(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\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: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%) var(--grey-3); \n }\n \n"])));
|
|
1709
|
+
|
|
1710
|
+
var _templateObject$4, _templateObject2, _templateObject3;
|
|
1711
|
+
var wrapperCss = styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n }\n }\n"])));
|
|
1706
1712
|
var IconWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1707
1713
|
var IconWrapperForSVG = styled__default.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1708
1714
|
|
|
@@ -1729,18 +1735,47 @@ var Icon = function Icon(_ref) {
|
|
|
1729
1735
|
})) : null;
|
|
1730
1736
|
};
|
|
1731
1737
|
|
|
1732
|
-
var _templateObject$
|
|
1733
|
-
var
|
|
1734
|
-
var
|
|
1738
|
+
var _templateObject$5, _templateObject2$1;
|
|
1739
|
+
var Arrow = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: 2px solid var(--grey-10);\n border-left: 0;\n border-bottom: 0;\n border-radius: 0 3px 0 0;\n\n &.t { top: 24px; }\n &.b { bottom: 24px; }\n &.l { left: 24px; }\n &.r { right: 24px; }\n"])));
|
|
1740
|
+
var Container = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n height: 100%;\n background: var(--grey-3);\n border: 12px solid var(--grey-6);\n box-sizing: border-box;\n flex: 1;\n justify-content: center;\n align-items: center;\n letter-spacing: 1.2px;\n color: var(--grey-10);\n"])));
|
|
1741
|
+
var FlexContentPlaceholder = function FlexContentPlaceholder(_ref) {
|
|
1742
|
+
var _ref$title = _ref.title,
|
|
1743
|
+
title = _ref$title === void 0 ? 'Placeholder' : _ref$title;
|
|
1744
|
+
return React__default.createElement(Container, null, title, React__default.createElement(Arrow, {
|
|
1745
|
+
className: 't l',
|
|
1746
|
+
style: {
|
|
1747
|
+
transform: 'rotate(-90deg)'
|
|
1748
|
+
}
|
|
1749
|
+
}), React__default.createElement(Arrow, {
|
|
1750
|
+
className: 't r',
|
|
1751
|
+
style: {
|
|
1752
|
+
transform: 'rotate(0deg)'
|
|
1753
|
+
}
|
|
1754
|
+
}), React__default.createElement(Arrow, {
|
|
1755
|
+
className: 'b r',
|
|
1756
|
+
style: {
|
|
1757
|
+
transform: 'rotate(90deg)'
|
|
1758
|
+
}
|
|
1759
|
+
}), React__default.createElement(Arrow, {
|
|
1760
|
+
className: 'b l',
|
|
1761
|
+
style: {
|
|
1762
|
+
transform: 'rotate(180deg)'
|
|
1763
|
+
}
|
|
1764
|
+
}));
|
|
1765
|
+
};
|
|
1766
|
+
|
|
1767
|
+
var _templateObject$6, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5;
|
|
1768
|
+
var RowCss = styled.css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n position:relative;\n display: flex;\n flex-direction: row;\n align-items:center;\n"])));
|
|
1769
|
+
var ColumnCss = styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
1735
1770
|
var resetButtonStyles = styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n padding: 0;\n appearance: none;\n user-select: none;\n"])));
|
|
1736
1771
|
var removeAutoFillStyle = styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active{\n transition: background-color 600000s 0s, color 600000s 0s;\n }\n"])));
|
|
1737
1772
|
var EllipsisStyles = styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
|
|
1738
1773
|
|
|
1739
|
-
var _templateObject$
|
|
1740
|
-
var IconButton = styled__default.button(_templateObject$
|
|
1774
|
+
var _templateObject$7, _templateObject2$3, _templateObject3$2, _templateObject4$1;
|
|
1775
|
+
var IconButton = styled__default.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n ", ";\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n opacity: .8;\n }\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, function (_ref) {
|
|
1741
1776
|
var _ref$selected = _ref.selected,
|
|
1742
1777
|
selected = _ref$selected === void 0 ? false : _ref$selected;
|
|
1743
|
-
return selected && styled.css(_templateObject2$
|
|
1778
|
+
return selected && styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
|
|
1744
1779
|
});
|
|
1745
1780
|
var AlertWrapper = styled__default.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n min-height: 50px;\n border-radius: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n padding: 0 14px;\n\n font-family: ", ";\n background-color: ", ";\n\n text-align: left;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n text-decoration: none;\n color: var(--white-1);\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n"])), fontFamily.ui, function (_ref2) {
|
|
1746
1781
|
var type = _ref2.type;
|
|
@@ -1784,10 +1819,10 @@ var AlertBar = function AlertBar(_ref3) {
|
|
|
1784
1819
|
}))) : null;
|
|
1785
1820
|
};
|
|
1786
1821
|
|
|
1787
|
-
var _templateObject$
|
|
1788
|
-
var initAnimation = styled.keyframes(_templateObject$
|
|
1789
|
-
var closeAnimation = styled.keyframes(_templateObject2$
|
|
1790
|
-
var Container = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n min-height: 50px;\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 0 14px;\n width: 900px;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 999;\n\n font-family: ", ";\n background-color: ", ";\n text-align: left;\n font-size: 14px;\n font-weight: 400;\n line-height: 15px;\n letter-spacing: -0.2px;\n text-decoration: none;\n color: var(--white-1);\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n"])), fontFamily.ui, function (_ref) {
|
|
1822
|
+
var _templateObject$8, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
1823
|
+
var initAnimation = styled.keyframes(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, -100%);\n }\n 100% {\n transform: translate(-50%, 0%);\n }\n"])));
|
|
1824
|
+
var closeAnimation = styled.keyframes(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, 0);\n }\n 100% {\n transform: translate(-50%, -100%);\n }\n"])));
|
|
1825
|
+
var Container$1 = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n min-height: 50px;\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 0 14px;\n width: 900px;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 999;\n\n font-family: ", ";\n background-color: ", ";\n text-align: left;\n font-size: 14px;\n font-weight: 400;\n line-height: 15px;\n letter-spacing: -0.2px;\n text-decoration: none;\n color: var(--white-1);\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n"])), fontFamily.ui, function (_ref) {
|
|
1791
1826
|
var type = _ref.type;
|
|
1792
1827
|
return "var(--" + type + ")";
|
|
1793
1828
|
}, function (_ref2) {
|
|
@@ -1893,7 +1928,7 @@ var Notification = function Notification(_ref6) {
|
|
|
1893
1928
|
handleDismiss();
|
|
1894
1929
|
}
|
|
1895
1930
|
}, [closeNow, handleDismiss]);
|
|
1896
|
-
return message && !dismiss ? ReactDom.createPortal(React__default.createElement(Container, {
|
|
1931
|
+
return message && !dismiss ? ReactDom.createPortal(React__default.createElement(Container$1, {
|
|
1897
1932
|
type: type,
|
|
1898
1933
|
isClosing: slideUp,
|
|
1899
1934
|
onAnimationEnd: animationEnded
|
|
@@ -1916,12 +1951,12 @@ var Notification = function Notification(_ref6) {
|
|
|
1916
1951
|
|
|
1917
1952
|
var _excluded = ["design", "size", "children"];
|
|
1918
1953
|
|
|
1919
|
-
var _templateObject$
|
|
1920
|
-
var StyledButton = styled__default.button(_templateObject$
|
|
1954
|
+
var _templateObject$9, _templateObject2$5;
|
|
1955
|
+
var StyledButton = styled__default.button(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n ", ";\n\n overflow: hidden;\n border: none;\n cursor: pointer;\n border-radius: 3px;\n outline: none;\n\n button + button {\n margin-left: 20px;\n }\n\n"])), function (_ref) {
|
|
1921
1956
|
var theme = _ref.theme,
|
|
1922
1957
|
design = _ref.design,
|
|
1923
1958
|
size = _ref.size;
|
|
1924
|
-
return styled.css(_templateObject2$
|
|
1959
|
+
return styled.css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n\n ", ";\n height: ", ";\n padding: ", ";\n\n ", ";\n font-family: ", ";\n\n transition:\n background ", " ", ",\n opacity ", " ", ";\n\n &:hover:enabled {\n background: ", ";\n }\n\n &:active:enabled {\n background: ", ";\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n background: ", ";\n }\n\n "])), theme.styles.form.button[design]["default"], theme.dimensions.form.button[size].height, theme.dimensions.form.button[size].padding, theme.typography.form.button[design][size], theme.fontFamily.ui, theme.animation.speed.fast, theme.animation.easing.primary.easeOut, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.styles.form.button[design].hover.backgroundColor, theme.styles.form.button[design].active.backgroundColor, theme.styles.form.button[design].disabled.backgroundColor);
|
|
1925
1960
|
});
|
|
1926
1961
|
|
|
1927
1962
|
var Button = function Button(_ref2) {
|
|
@@ -1942,11 +1977,11 @@ var Button = function Button(_ref2) {
|
|
|
1942
1977
|
|
|
1943
1978
|
var _excluded$1 = ["design", "size", "onClick", "disabled", "position", "icon", "children"];
|
|
1944
1979
|
|
|
1945
|
-
var _templateObject$
|
|
1946
|
-
var TextContainer = styled__default.div(_templateObject$
|
|
1980
|
+
var _templateObject$a, _templateObject2$6, _templateObject3$4, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1;
|
|
1981
|
+
var TextContainer = styled__default.div(_templateObject$a || (_templateObject$a = _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\n ", "\n\n ", "\n"])), function (_ref) {
|
|
1947
1982
|
var position = _ref.position,
|
|
1948
1983
|
size = _ref.size;
|
|
1949
|
-
return position && position === 'left' ? styled.css(_templateObject2$
|
|
1984
|
+
return position && position === 'left' ? styled.css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n padding-left: ", ";\n "])), size === 'xsmall' ? "10px" : "20px") : styled.css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n "])), size === 'xsmall' ? "10px" : "20px");
|
|
1950
1985
|
}, function (_ref2) {
|
|
1951
1986
|
var theme = _ref2.theme;
|
|
1952
1987
|
return theme && styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
|
|
@@ -1988,7 +2023,7 @@ var ButtonWithIcon = function ButtonWithIcon(_ref4) {
|
|
|
1988
2023
|
}))));
|
|
1989
2024
|
};
|
|
1990
2025
|
|
|
1991
|
-
var _templateObject$
|
|
2026
|
+
var _templateObject$b, _templateObject2$7, _templateObject3$5, _templateObject4$4;
|
|
1992
2027
|
|
|
1993
2028
|
var circumference = function circumference(radius) {
|
|
1994
2029
|
return 2 * 3.1416 * radius;
|
|
@@ -1996,10 +2031,10 @@ var circumference = function circumference(radius) {
|
|
|
1996
2031
|
|
|
1997
2032
|
var animation$1 = function animation(radius) {
|
|
1998
2033
|
var c = circumference(radius);
|
|
1999
|
-
return styled.keyframes(_templateObject$
|
|
2034
|
+
return styled.keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n 0% {\n stroke-dashoffset: -", ";\n }\n 50% {\n stroke-dashoffset: -", ";\n }\n 100% {\n stroke-dashoffset: -", ";\n }\n "])), c * 0.85, c * 0.5, c * 0.85);
|
|
2000
2035
|
};
|
|
2001
2036
|
|
|
2002
|
-
var rotate = styled.keyframes(_templateObject2$
|
|
2037
|
+
var rotate = styled.keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
2003
2038
|
var BaseCircle = styled__default.circle(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n fill: none;\n"])), function (_ref) {
|
|
2004
2039
|
var styling = _ref.styling;
|
|
2005
2040
|
return "var(--spinner-" + styling + ", --grey-a8)";
|
|
@@ -2075,11 +2110,11 @@ var Spinner = function Spinner(_ref5) {
|
|
|
2075
2110
|
|
|
2076
2111
|
var _excluded$2 = ["design", "size", "onClick", "disabled", "position", "loading", "children"];
|
|
2077
2112
|
|
|
2078
|
-
var _templateObject$
|
|
2079
|
-
var LoadingButton = styled__default(Button)(_templateObject$
|
|
2113
|
+
var _templateObject$c, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
2114
|
+
var LoadingButton = styled__default(Button)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
2080
2115
|
var $loading = _ref.$loading,
|
|
2081
2116
|
theme = _ref.theme;
|
|
2082
|
-
return $loading && styled.css(_templateObject2$
|
|
2117
|
+
return $loading && styled.css(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n cursor: wait;\n background: ", ";\n padding: 0 20px;\n &:disabled {\n opacity: 1;\n }\n "])), theme.styles.form.button['primary'].active);
|
|
2083
2118
|
});
|
|
2084
2119
|
var TextContainer$1 = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _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 ", "\n\n"])), function (_ref2) {
|
|
2085
2120
|
var theme = _ref2.theme;
|
|
@@ -2137,8 +2172,8 @@ var ButtonWithLoading = function ButtonWithLoading(_ref6) {
|
|
|
2137
2172
|
|
|
2138
2173
|
var _excluded$3 = ["icon", "size", "weight", "color", "hoverColor"];
|
|
2139
2174
|
|
|
2140
|
-
var _templateObject$
|
|
2141
|
-
var StyledButton$1 = styled__default.button(_templateObject$
|
|
2175
|
+
var _templateObject$d;
|
|
2176
|
+
var StyledButton$1 = styled__default.button(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n ", ";\n [stroke]{\n stroke: ", ";\n }\n &:hover {\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n"])), resetButtonStyles, function (_ref) {
|
|
2142
2177
|
var color = _ref.color;
|
|
2143
2178
|
return color;
|
|
2144
2179
|
}, IconWrapper, function (_ref2) {
|
|
@@ -2169,9 +2204,9 @@ var IconButton$2 = function IconButton(_ref3) {
|
|
|
2169
2204
|
}));
|
|
2170
2205
|
};
|
|
2171
2206
|
|
|
2172
|
-
var _templateObject$
|
|
2173
|
-
var StyledIconButton = styled__default(IconButton$2)(_templateObject$
|
|
2174
|
-
var Container$
|
|
2207
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4;
|
|
2208
|
+
var StyledIconButton = styled__default(IconButton$2)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose([""])));
|
|
2209
|
+
var Container$2 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-left: 15px;\n }\n ", ":first-child {\n margin-left: 0px;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"])), StyledIconButton, StyledIconButton, function (_ref) {
|
|
2175
2210
|
var alignment = _ref.alignment;
|
|
2176
2211
|
return alignment === 'left' && styled.css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n justify-content: flex-start;\n "])));
|
|
2177
2212
|
}, function (_ref2) {
|
|
@@ -2186,7 +2221,7 @@ var ActionButtons = function ActionButtons(_ref4) {
|
|
|
2186
2221
|
var buttonsConfig = _ref4.buttonsConfig,
|
|
2187
2222
|
_ref4$alignment = _ref4.alignment,
|
|
2188
2223
|
alignment = _ref4$alignment === void 0 ? 'right' : _ref4$alignment;
|
|
2189
|
-
return React__default.createElement(Container$
|
|
2224
|
+
return React__default.createElement(Container$2, Object.assign({}, {
|
|
2190
2225
|
alignment: alignment
|
|
2191
2226
|
}), buttonsConfig.map(function (btn) {
|
|
2192
2227
|
var icon = btn.icon,
|
|
@@ -2209,11 +2244,11 @@ var ActionButtons = function ActionButtons(_ref4) {
|
|
|
2209
2244
|
|
|
2210
2245
|
var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
|
|
2211
2246
|
|
|
2212
|
-
var _templateObject$
|
|
2213
|
-
var ActionContainer = styled__default.div(_templateObject$
|
|
2247
|
+
var _templateObject$f, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
|
|
2248
|
+
var ActionContainer = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
2214
2249
|
var InputActionButton = styled__default.button.attrs({
|
|
2215
2250
|
type: "button"
|
|
2216
|
-
})(_templateObject2$
|
|
2251
|
+
})(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n width: 40px;\n height: 40px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n"])));
|
|
2217
2252
|
var FeedbackContainer = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n\n background-color: transparent;\n ", ";\n\n border-left: none;\n border-radius: 0 3px 3px 0;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])), function (_ref) {
|
|
2218
2253
|
var theme = _ref.theme;
|
|
2219
2254
|
return styled.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
|
|
@@ -2238,7 +2273,7 @@ var InputContainer = styled__default.div(_templateObject10$2 || (_templateObject
|
|
|
2238
2273
|
var hasAction = _ref6.hasAction;
|
|
2239
2274
|
return hasAction && styled.css(_templateObject11$1 || (_templateObject11$1 = _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);
|
|
2240
2275
|
});
|
|
2241
|
-
var Container$
|
|
2276
|
+
var Container$3 = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n\n ", "{\n ", ";\n\n &:focus {}\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n }\n"])), StyledInput, function (_ref7) {
|
|
2242
2277
|
var theme = _ref7.theme,
|
|
2243
2278
|
fieldState = _ref7.fieldState;
|
|
2244
2279
|
return theme.styles.form.input[fieldState].normal;
|
|
@@ -2311,7 +2346,7 @@ var Input = function Input(_ref13) {
|
|
|
2311
2346
|
}
|
|
2312
2347
|
};
|
|
2313
2348
|
|
|
2314
|
-
return React__default.createElement(Container$
|
|
2349
|
+
return React__default.createElement(Container$3, {
|
|
2315
2350
|
fieldState: fieldState || 'default'
|
|
2316
2351
|
}, React__default.createElement(InputContainer, {
|
|
2317
2352
|
hasAction: isActionButton
|
|
@@ -2331,15 +2366,15 @@ var Input = function Input(_ref13) {
|
|
|
2331
2366
|
|
|
2332
2367
|
var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
|
|
2333
2368
|
|
|
2334
|
-
var _templateObject$
|
|
2335
|
-
var StyledLabel = styled__default.label(_templateObject$
|
|
2369
|
+
var _templateObject$g, _templateObject2$b;
|
|
2370
|
+
var StyledLabel = styled__default.label(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 14px;\n font-weight: 500;\n ", ";\n"])), function (_ref) {
|
|
2336
2371
|
var theme = _ref.theme;
|
|
2337
2372
|
return theme.fontFamily.ui;
|
|
2338
2373
|
}, function (_ref2) {
|
|
2339
2374
|
var rightAlign = _ref2.rightAlign;
|
|
2340
2375
|
return rightAlign ? "\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n justify-content: left;\n " : "\n display: block;\n margin-bottom: 20px;\n ";
|
|
2341
2376
|
});
|
|
2342
|
-
var LabelText = styled__default.span(_templateObject2$
|
|
2377
|
+
var LabelText = styled__default.span(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n display: block;\n ", "\n"])), function (_ref3) {
|
|
2343
2378
|
var rightAlign = _ref3.rightAlign;
|
|
2344
2379
|
return rightAlign ? "\n margin-left: 12px;\n " : "\n margin-bottom: 10px;\n ";
|
|
2345
2380
|
});
|
|
@@ -2362,11 +2397,11 @@ var Label = function Label(_ref4) {
|
|
|
2362
2397
|
|
|
2363
2398
|
var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "className"];
|
|
2364
2399
|
|
|
2365
|
-
var _templateObject$
|
|
2366
|
-
var StyledInput$1 = styled__default.input(_templateObject$
|
|
2400
|
+
var _templateObject$h, _templateObject2$c, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3;
|
|
2401
|
+
var StyledInput$1 = styled__default.input(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n padding: 0 22px 0 10px;\n box-sizing: border-box;\n outline: none;\n\n ", ";\n\n ", "\n\n &:disabled {\n cursor: not-allowed;\n }\n"])), removeAutoFillStyle, function (_ref) {
|
|
2367
2402
|
var theme = _ref.theme,
|
|
2368
2403
|
fieldState = _ref.fieldState;
|
|
2369
|
-
return styled.css(_templateObject2$
|
|
2404
|
+
return styled.css(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n min-height: 30px;\n font-family: ", ";\n border: 1px solid ", ";\n "])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
|
|
2370
2405
|
}, function (_ref2) {
|
|
2371
2406
|
var typography = _ref2.theme.typography;
|
|
2372
2407
|
return styled.css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n "])), typography.form.input.value.compact, typography.form.input.placeholder.compact);
|
|
@@ -2381,7 +2416,7 @@ var UnitKey = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _t
|
|
|
2381
2416
|
var theme = _ref4.theme;
|
|
2382
2417
|
return theme.fontFamily.ui;
|
|
2383
2418
|
});
|
|
2384
|
-
var Container$
|
|
2419
|
+
var Container$4 = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n\n ", "{\n ", ";\n\n &:focus {}\n\n ", "\n }\n\n &:focus-within ", " {\n ", "\n\n"])), StyledInput$1, function (_ref5) {
|
|
2385
2420
|
var theme = _ref5.theme,
|
|
2386
2421
|
fieldState = _ref5.fieldState;
|
|
2387
2422
|
return theme.styles.form.input[fieldState].normal;
|
|
@@ -2419,7 +2454,7 @@ var SmallInput = function SmallInput(_ref8) {
|
|
|
2419
2454
|
setUnitElementWidth(unitElement.current.clientWidth || 0);
|
|
2420
2455
|
}
|
|
2421
2456
|
}, [unitElement, setUnitElementWidth, unit]);
|
|
2422
|
-
return React__default.createElement(Container$
|
|
2457
|
+
return React__default.createElement(Container$4, {
|
|
2423
2458
|
className: className,
|
|
2424
2459
|
fieldState: fieldState || 'default'
|
|
2425
2460
|
}, React__default.createElement(Label, {
|
|
@@ -2436,7 +2471,7 @@ var SmallInput = function SmallInput(_ref8) {
|
|
|
2436
2471
|
}, unit) : null)));
|
|
2437
2472
|
};
|
|
2438
2473
|
|
|
2439
|
-
var _templateObject$
|
|
2474
|
+
var _templateObject$i, _templateObject2$d, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$2;
|
|
2440
2475
|
var SwitchPosition;
|
|
2441
2476
|
|
|
2442
2477
|
(function (SwitchPosition) {
|
|
@@ -2452,8 +2487,8 @@ var intentPosition = function intentPosition(left, checked) {
|
|
|
2452
2487
|
return intentLeft + "px";
|
|
2453
2488
|
};
|
|
2454
2489
|
|
|
2455
|
-
var RealInput = styled__default.input(_templateObject$
|
|
2456
|
-
var SwitchOuter = styled__default.div(_templateObject2$
|
|
2490
|
+
var RealInput = styled__default.input(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
2491
|
+
var SwitchOuter = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n"])));
|
|
2457
2492
|
|
|
2458
2493
|
var getPositionKey = function getPositionKey(switchPos) {
|
|
2459
2494
|
switch (switchPos) {
|
|
@@ -2485,7 +2520,7 @@ var LabelText$1 = styled__default.span(_templateObject4$9 || (_templateObject4$9
|
|
|
2485
2520
|
});
|
|
2486
2521
|
var IconWrapper$1 = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _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"])));
|
|
2487
2522
|
var SpinnerWrapper = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n margin-top: 1px;\n"])));
|
|
2488
|
-
var Container$
|
|
2523
|
+
var Container$5 = styled__default.label(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n ", "{\n ", "\n\n ", "\n\n ", "\n }\n\n ", "{\n ", "\n }\n\n &:hover {\n ", "{\n left: ", ";\n }\n }\n"])), SwitchInner, function (_ref2) {
|
|
2489
2524
|
var theme = _ref2.theme,
|
|
2490
2525
|
position = _ref2.position,
|
|
2491
2526
|
themeState = _ref2.themeState,
|
|
@@ -2588,7 +2623,7 @@ var Switch = function Switch(_ref4) {
|
|
|
2588
2623
|
positionSwitch();
|
|
2589
2624
|
}
|
|
2590
2625
|
}, [state, setPosition, positionSwitch]);
|
|
2591
|
-
return React__default.createElement(Container$
|
|
2626
|
+
return React__default.createElement(Container$5, {
|
|
2592
2627
|
onChange: customOnChange,
|
|
2593
2628
|
activeTheming: activeTheming,
|
|
2594
2629
|
"$loading": state === 'loading',
|
|
@@ -2734,7 +2769,7 @@ function SvgNoImage() {
|
|
|
2734
2769
|
}));
|
|
2735
2770
|
}
|
|
2736
2771
|
|
|
2737
|
-
var _templateObject$
|
|
2772
|
+
var _templateObject$j, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$1, _templateObject13$1;
|
|
2738
2773
|
var CheckboxState;
|
|
2739
2774
|
|
|
2740
2775
|
(function (CheckboxState) {
|
|
@@ -2743,14 +2778,14 @@ var CheckboxState;
|
|
|
2743
2778
|
CheckboxState["Indeterminate"] = "indeterminate";
|
|
2744
2779
|
})(CheckboxState || (CheckboxState = {}));
|
|
2745
2780
|
|
|
2746
|
-
var RealInput$1 = styled__default.input(_templateObject$
|
|
2747
|
-
var CheckboxOuter = styled__default.div(_templateObject2$
|
|
2781
|
+
var RealInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
2782
|
+
var CheckboxOuter = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
|
|
2748
2783
|
var CheckboxInner = styled__default.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
|
|
2749
2784
|
var IconWrapper$2 = styled__default.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: ", ";\n }\n }\n"])), function (_ref) {
|
|
2750
2785
|
var color = _ref.color;
|
|
2751
2786
|
return "var(--" + color + ")";
|
|
2752
2787
|
});
|
|
2753
|
-
var Container$
|
|
2788
|
+
var Container$6 = styled__default.label(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref2) {
|
|
2754
2789
|
var visualState = _ref2.visualState,
|
|
2755
2790
|
disabled = _ref2.disabled;
|
|
2756
2791
|
return visualState === CheckboxState.Off && styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n ", "{\n border-color: var(--grey-9);\n border: var(--grey-9) 2px solid;\n }\n\n ", ";\n\n ", "\n "])), CheckboxOuter, !disabled && styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-8);\n border: var(--primary-8) 2px solid;\n }"])), CheckboxOuter), disabled && styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 2px solid;\n cursor: not-allowed;\n }\n "])), CheckboxOuter));
|
|
@@ -2797,7 +2832,7 @@ var Checkbox = function Checkbox(_ref5) {
|
|
|
2797
2832
|
setIsChecked(checked);
|
|
2798
2833
|
}, [checked, setIsChecked]);
|
|
2799
2834
|
var iconWeight = dimensions.icons.weights['regular'];
|
|
2800
|
-
return React__default.createElement(Container$
|
|
2835
|
+
return React__default.createElement(Container$6, Object.assign({
|
|
2801
2836
|
onChange: customOnChange
|
|
2802
2837
|
}, {
|
|
2803
2838
|
indeterminate: indeterminate,
|
|
@@ -2819,16 +2854,16 @@ var Checkbox = function Checkbox(_ref5) {
|
|
|
2819
2854
|
})), " ");
|
|
2820
2855
|
};
|
|
2821
2856
|
|
|
2822
|
-
var _templateObject$
|
|
2823
|
-
var InnerRadio = styled__default.div(_templateObject$
|
|
2824
|
-
var OuterRadio = styled__default.div(_templateObject2$
|
|
2857
|
+
var _templateObject$k, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6;
|
|
2858
|
+
var InnerRadio = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
2859
|
+
var OuterRadio = styled__default.div(_templateObject2$f || (_templateObject2$f = _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) {
|
|
2825
2860
|
var styles = _ref.theme.styles,
|
|
2826
2861
|
isChecked = _ref.isChecked,
|
|
2827
2862
|
disabled = _ref.disabled;
|
|
2828
2863
|
return styles && styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), styles.form.checkbox.unchecked["default"].borderColor, !disabled && styled.css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.hover.borderColor), isChecked && !disabled && styled.css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.checked["default"].backgroundColor, InnerRadio, styles.form.checkbox.checked["default"].backgroundColor), isChecked && !disabled && styled.css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n }\n "])), styles.form.checkbox.checked.hover.backgroundColor, InnerRadio, styles.form.checkbox.checked.hover.backgroundColor), isChecked && disabled && styled.css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.checked.disabled.backgroundColor, InnerRadio, styles.form.checkbox.checked.disabled.backgroundColor), !isChecked && disabled && styled.css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: ", ";\n ", " {\n background-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.disabled.borderColor, InnerRadio, styles.form.checkbox.unchecked.disabled.backgroundColor));
|
|
2829
2864
|
});
|
|
2830
2865
|
var HiddenInput = styled__default.input(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n padding:0;\n opacity: 0;\n"])));
|
|
2831
|
-
var Container$
|
|
2866
|
+
var Container$7 = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n"])));
|
|
2832
2867
|
|
|
2833
2868
|
var RadioButton = function RadioButton(_ref2) {
|
|
2834
2869
|
var id = _ref2.id,
|
|
@@ -2845,7 +2880,7 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2845
2880
|
onChangeCallback(checkedValue);
|
|
2846
2881
|
}, [onChangeCallback]);
|
|
2847
2882
|
var isChecked = currentChecked !== undefined ? currentChecked === value : false;
|
|
2848
|
-
return React__default.createElement(Container$
|
|
2883
|
+
return React__default.createElement(Container$7, null, React__default.createElement(HiddenInput, Object.assign({
|
|
2849
2884
|
type: 'radio'
|
|
2850
2885
|
}, {
|
|
2851
2886
|
id: id,
|
|
@@ -2864,9 +2899,9 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2864
2899
|
|
|
2865
2900
|
var _excluded$7 = ["placeholder", "fieldState", "feedbackMessage", "children"];
|
|
2866
2901
|
|
|
2867
|
-
var _templateObject$
|
|
2868
|
-
var FeedbackIcon$1 = styled__default.div(_templateObject$
|
|
2869
|
-
var StyledTextArea = styled__default.textarea(_templateObject2$
|
|
2902
|
+
var _templateObject$l, _templateObject2$g, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$8, _templateObject8$7, _templateObject9$7, _templateObject10$7;
|
|
2903
|
+
var FeedbackIcon$1 = styled__default.div(_templateObject$l || (_templateObject$l = _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"])));
|
|
2904
|
+
var StyledTextArea = styled__default.textarea(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n\n", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n ", ";\n"])), function (_ref) {
|
|
2870
2905
|
var theme = _ref.theme,
|
|
2871
2906
|
fieldState = _ref.fieldState;
|
|
2872
2907
|
return styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border: 1px solid ", ";\n"])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
|
|
@@ -2882,7 +2917,7 @@ var FeedbackMessage$1 = styled__default.div(_templateObject7$8 || (_templateObje
|
|
|
2882
2917
|
var theme = _ref4.theme;
|
|
2883
2918
|
return theme.typography.form.feedback.message;
|
|
2884
2919
|
});
|
|
2885
|
-
var Container$
|
|
2920
|
+
var Container$8 = styled__default.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n ", "{\n ", ";\n\n &:focus {\n box-shadow: 0px 3px 7px 0px var(--primary-a3);\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n }\n\n ", " {\n background: ", ";\n border-color: ", ";\n\n ", "\n }\n\n &:focus-within ", " {\n ", ";\n\n ", ";\n\n ", ";\n }\n\n"])), StyledTextArea, function (_ref5) {
|
|
2886
2921
|
var theme = _ref5.theme,
|
|
2887
2922
|
fieldState = _ref5.fieldState;
|
|
2888
2923
|
return theme.styles.form.input[fieldState].normal;
|
|
@@ -2957,7 +2992,7 @@ var TextArea = function TextArea(_ref13) {
|
|
|
2957
2992
|
}
|
|
2958
2993
|
};
|
|
2959
2994
|
|
|
2960
|
-
return React__default.createElement(Container$
|
|
2995
|
+
return React__default.createElement(Container$8, {
|
|
2961
2996
|
fieldState: fieldState || 'default'
|
|
2962
2997
|
}, React__default.createElement(StyledTextArea, Object.assign({
|
|
2963
2998
|
fieldState: fieldState || 'default',
|
|
@@ -2968,16 +3003,16 @@ var TextArea = function TextArea(_ref13) {
|
|
|
2968
3003
|
|
|
2969
3004
|
var _excluded$8 = ["placeholder", "label", "isCompact", "defaultValue", "changeCallback", "children"];
|
|
2970
3005
|
|
|
2971
|
-
var _templateObject$
|
|
2972
|
-
var SelectWrapper = styled__default.div(_templateObject$
|
|
2973
|
-
var StyledSelect = styled__default.select(_templateObject2$
|
|
3006
|
+
var _templateObject$m, _templateObject2$h, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$9, _templateObject8$8, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$2, _templateObject13$2;
|
|
3007
|
+
var SelectWrapper = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n\n ", " {\n position: absolute;\n top: calc(50% - 7px);\n right: 10px;\n pointer-events: none;\n }\n"])), IconWrapper);
|
|
3008
|
+
var StyledSelect = styled__default.select(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n outline: none;\n border-radius: 3px;\n height: 40px;\n padding: 0 25px 0 15px;\n appearance: none;\n line-height: 1.56;\n width: 100%;\n cursor: pointer;\n ", "\n\n &:disabled {\n ", "\n cursor: not-allowed;\n }\n\n &::-ms-expand {\n display: none;\n }\n"])), function (_ref) {
|
|
2974
3009
|
var styles = _ref.theme.styles;
|
|
2975
3010
|
return styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
|
|
2976
3011
|
}, function (_ref2) {
|
|
2977
3012
|
var styles = _ref2.theme.styles;
|
|
2978
3013
|
return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input.disabled.normal);
|
|
2979
3014
|
});
|
|
2980
|
-
var Container$
|
|
3015
|
+
var Container$9 = styled__default.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n\n", "\n\n", ";\n\n ", " {\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n option {\n font-style: normal;\n ", ";\n\n ", ";\n }\n font-weight: 400;\n }\n"])), function (_ref3) {
|
|
2981
3016
|
var isCompact = _ref3.isCompact;
|
|
2982
3017
|
return isCompact && styled.css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", " {\n span {\n margin-bottom: 6px;\n }\n }\n "])), StyledLabel);
|
|
2983
3018
|
}, function (_ref4) {
|
|
@@ -3049,7 +3084,7 @@ var SelectField = function SelectField(_ref11) {
|
|
|
3049
3084
|
size: 11
|
|
3050
3085
|
}));
|
|
3051
3086
|
}, [children, defaultValue, handleOnChange, placeholder, props]);
|
|
3052
|
-
return React__default.createElement(Container$
|
|
3087
|
+
return React__default.createElement(Container$9, Object.assign({}, {
|
|
3053
3088
|
isCompact: isCompact,
|
|
3054
3089
|
activePlaceholder: activePlaceholder
|
|
3055
3090
|
}, {
|
|
@@ -3132,14 +3167,14 @@ var isNotNumber = function isNotNumber(value) {
|
|
|
3132
3167
|
|
|
3133
3168
|
var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
|
|
3134
3169
|
|
|
3135
|
-
var _templateObject$
|
|
3170
|
+
var _templateObject$n, _templateObject2$i, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$a, _templateObject8$9, _templateObject9$9, _templateObject10$9, _templateObject11$5, _templateObject12$3;
|
|
3136
3171
|
var ThumbDiameter = 16;
|
|
3137
|
-
var SliderWrapper = styled__default.div(_templateObject$
|
|
3172
|
+
var SliderWrapper = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
|
|
3138
3173
|
var theme = _ref.theme;
|
|
3139
3174
|
return theme.fontFamily.data;
|
|
3140
3175
|
}, function (_ref2) {
|
|
3141
3176
|
var disabled = _ref2.disabled;
|
|
3142
|
-
return disabled && styled.css(_templateObject2$
|
|
3177
|
+
return disabled && styled.css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n opacity: .5;\n "])));
|
|
3143
3178
|
});
|
|
3144
3179
|
var HiddenInput$1 = styled__default.input(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin: 0;\n padding:0;\n opacity: .001;\n z-index: 99;\n cursor: ", ";\n"])), function (_ref3) {
|
|
3145
3180
|
var disabled = _ref3.disabled;
|
|
@@ -3378,9 +3413,9 @@ var SliderInput = function SliderInput(_ref12) {
|
|
|
3378
3413
|
|
|
3379
3414
|
var _excluded$a = ["text", "buttonDesign", "buttonSize", "inputCallback"];
|
|
3380
3415
|
|
|
3381
|
-
var _templateObject$
|
|
3382
|
-
var Container$
|
|
3383
|
-
var HiddenInput$2 = styled__default.input(_templateObject2$
|
|
3416
|
+
var _templateObject$o, _templateObject2$j, _templateObject3$g;
|
|
3417
|
+
var Container$a = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose([""])));
|
|
3418
|
+
var HiddenInput$2 = styled__default.input(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
3384
3419
|
var StyledButton$2 = styled__default(Button)(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
|
|
3385
3420
|
|
|
3386
3421
|
var InputFileButton = function InputFileButton(_ref) {
|
|
@@ -3414,7 +3449,7 @@ var InputFileButton = function InputFileButton(_ref) {
|
|
|
3414
3449
|
fileInputRef.current.click();
|
|
3415
3450
|
}
|
|
3416
3451
|
}, []);
|
|
3417
|
-
return React__default.createElement(Container$
|
|
3452
|
+
return React__default.createElement(Container$a, null, React__default.createElement(HiddenInput$2, Object.assign({}, props, {
|
|
3418
3453
|
ref: fileInputRef,
|
|
3419
3454
|
type: 'file',
|
|
3420
3455
|
onChange: handleFile
|
|
@@ -3427,9 +3462,9 @@ var InputFileButton = function InputFileButton(_ref) {
|
|
|
3427
3462
|
|
|
3428
3463
|
var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
|
|
3429
3464
|
|
|
3430
|
-
var _templateObject$
|
|
3431
|
-
var Container$
|
|
3432
|
-
var Headers = styled__default.div(_templateObject2$
|
|
3465
|
+
var _templateObject$p, _templateObject2$k, _templateObject3$h, _templateObject4$f, _templateObject5$d;
|
|
3466
|
+
var Container$b = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
|
|
3467
|
+
var Headers = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 30px;\n padding: 0 6px;\n"])));
|
|
3433
3468
|
var ValueLabel = styled__default(Label)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
|
|
3434
3469
|
var theme = _ref.theme;
|
|
3435
3470
|
return theme.fontFamily.ui;
|
|
@@ -3465,7 +3500,7 @@ var DurationSlider = function DurationSlider(_ref3) {
|
|
|
3465
3500
|
}, [inputCallback]);
|
|
3466
3501
|
var labelValue = controlledValue ? controlledValue : selectedValue;
|
|
3467
3502
|
var unit = isTimeUnit(timeUnit) ? getShortTextTimeUnit(labelValue, timeUnit) : timeUnit;
|
|
3468
|
-
return React__default.createElement(Container$
|
|
3503
|
+
return React__default.createElement(Container$b, null, React__default.createElement(Headers, null, React__default.createElement(Label, {
|
|
3469
3504
|
htmlFor: 'duration-slider',
|
|
3470
3505
|
labelText: title
|
|
3471
3506
|
}), React__default.createElement(ValueTitle, null, React__default.createElement(ValueLabel, {
|
|
@@ -3482,9 +3517,9 @@ var DurationSlider = function DurationSlider(_ref3) {
|
|
|
3482
3517
|
|
|
3483
3518
|
var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle", "showValue", "allMarkCentered"];
|
|
3484
3519
|
|
|
3485
|
-
var _templateObject$
|
|
3486
|
-
var Container$
|
|
3487
|
-
var Headers$1 = styled__default.div(_templateObject2$
|
|
3520
|
+
var _templateObject$q, _templateObject2$l, _templateObject3$i;
|
|
3521
|
+
var Container$c = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
|
|
3522
|
+
var Headers$1 = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n ", ";\n"])), function (_ref) {
|
|
3488
3523
|
var allMarkCentered = _ref.allMarkCentered;
|
|
3489
3524
|
return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
|
|
3490
3525
|
});
|
|
@@ -3538,7 +3573,7 @@ var PercentageSlider = function PercentageSlider(_ref3) {
|
|
|
3538
3573
|
|
|
3539
3574
|
setSelectedValue(value);
|
|
3540
3575
|
}, [inputCallback]);
|
|
3541
|
-
return React__default.createElement(Container$
|
|
3576
|
+
return React__default.createElement(Container$c, null, React__default.createElement(Headers$1, {
|
|
3542
3577
|
allMarkCentered: allMarkCentered
|
|
3543
3578
|
}, React__default.createElement(Label, {
|
|
3544
3579
|
htmlFor: 'percentage-slider',
|
|
@@ -3639,12 +3674,12 @@ var TextAreaField = function TextAreaField(_ref) {
|
|
|
3639
3674
|
|
|
3640
3675
|
var _excluded$g = ["height", "text", "dropCallback"];
|
|
3641
3676
|
|
|
3642
|
-
var _templateObject$
|
|
3643
|
-
var Container$
|
|
3677
|
+
var _templateObject$r, _templateObject2$m;
|
|
3678
|
+
var Container$d = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n ", ";\n position: relative;\n"])), function (_ref) {
|
|
3644
3679
|
var height = _ref.height;
|
|
3645
3680
|
return height ? "height: " + height : null;
|
|
3646
3681
|
});
|
|
3647
|
-
var DragAndDrop = styled__default.div(_templateObject2$
|
|
3682
|
+
var DragAndDrop = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n"])), function (_ref2) {
|
|
3648
3683
|
var inDropZone = _ref2.inDropZone;
|
|
3649
3684
|
return inDropZone ? "dashed var(--grey-8) 2px" : null;
|
|
3650
3685
|
});
|
|
@@ -3696,7 +3731,7 @@ var DropArea = function DropArea(_ref3) {
|
|
|
3696
3731
|
window.removeEventListener('drop', handleWindowDragAndDrop);
|
|
3697
3732
|
};
|
|
3698
3733
|
}, [handleWindowDragAndDrop]);
|
|
3699
|
-
return React__default.createElement(Container$
|
|
3734
|
+
return React__default.createElement(Container$d, Object.assign({}, {
|
|
3700
3735
|
height: height
|
|
3701
3736
|
}, props), React__default.createElement(DragAndDrop, Object.assign({}, {
|
|
3702
3737
|
inDropZone: inDropZone,
|
|
@@ -3968,9 +4003,9 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
|
|
|
3968
4003
|
return isDifferent;
|
|
3969
4004
|
};
|
|
3970
4005
|
|
|
3971
|
-
var _templateObject$
|
|
3972
|
-
var CropLineStyle = styled.css(_templateObject$
|
|
3973
|
-
var TopLine = styled__default.div(_templateObject2$
|
|
4006
|
+
var _templateObject$s, _templateObject2$n, _templateObject3$j, _templateObject4$g, _templateObject5$e, _templateObject6$b, _templateObject7$b, _templateObject8$a, _templateObject9$a, _templateObject10$a, _templateObject11$6, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
4007
|
+
var CropLineStyle = styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
|
|
4008
|
+
var TopLine = styled__default.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
|
|
3974
4009
|
var RightLine = styled__default.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
3975
4010
|
var BottomLine = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n ", "\n cursor: s-resize;\n bottom: -3px;\n height: 5px;\n width: 100%;\n left: 0;\n"])), CropLineStyle);
|
|
3976
4011
|
var LeftLine = styled__default.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: w-resize;\n left: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
@@ -4046,12 +4081,12 @@ var CropArea = function CropArea(_ref9) {
|
|
|
4046
4081
|
})));
|
|
4047
4082
|
};
|
|
4048
4083
|
|
|
4049
|
-
var _templateObject$
|
|
4050
|
-
var Container$
|
|
4084
|
+
var _templateObject$t, _templateObject2$o, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$c, _templateObject7$c, _templateObject8$b, _templateObject9$b;
|
|
4085
|
+
var Container$e = styled__default.div(_templateObject$t || (_templateObject$t = _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) {
|
|
4051
4086
|
var theme = _ref.theme;
|
|
4052
4087
|
return theme.fontFamily.ui;
|
|
4053
4088
|
});
|
|
4054
|
-
var InnerContainer$2 = styled__default.div(_templateObject2$
|
|
4089
|
+
var InnerContainer$2 = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: 99;\n"])));
|
|
4055
4090
|
var ToolHeader = styled__default.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
|
|
4056
4091
|
var TextGroup = styled__default.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 20px;\n font-weight: 500;\n color: var(--mono);\n\n ", " {\n display: flex;\n align-items: center;\n margin-right: 14px;\n }\n"])), IconWrapper);
|
|
4057
4092
|
var ButtonsGroup = styled__default.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
|
|
@@ -4324,7 +4359,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4324
4359
|
|
|
4325
4360
|
viewDimensions.isResizing = false;
|
|
4326
4361
|
}, []);
|
|
4327
|
-
return ReactDom.createPortal(React__default.createElement(Container$
|
|
4362
|
+
return ReactDom.createPortal(React__default.createElement(Container$e, null, React__default.createElement(InnerContainer$2, null, React__default.createElement(ToolHeader, null, React__default.createElement(TextGroup, null, React__default.createElement(Icon, {
|
|
4328
4363
|
icon: 'Crop',
|
|
4329
4364
|
size: 20,
|
|
4330
4365
|
color: 'mono'
|
|
@@ -4374,7 +4409,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4374
4409
|
})))))), document.body);
|
|
4375
4410
|
};
|
|
4376
4411
|
|
|
4377
|
-
var _templateObject$
|
|
4412
|
+
var _templateObject$u, _templateObject2$p, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$d, _templateObject7$d, _templateObject8$c, _templateObject9$c;
|
|
4378
4413
|
var CROP_HEIGHT_AREA = 500;
|
|
4379
4414
|
var CROP_WIDTH_AREA = 475;
|
|
4380
4415
|
var CANVAS_HEIGHT = 490;
|
|
@@ -4382,9 +4417,9 @@ var CANVAS_WIDTH = 460;
|
|
|
4382
4417
|
var ratio = Math.round(CROP_WIDTH_AREA / CROP_HEIGHT_AREA * 100) / 100;
|
|
4383
4418
|
var PHOTO_HEIGHT = "150px";
|
|
4384
4419
|
var PHOTO_WIDTH = "142px";
|
|
4385
|
-
var Container$
|
|
4420
|
+
var Container$f = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: relative;\n width: ", ";\n ", "\n button {\n width: 100%;\n }\n"])), PHOTO_WIDTH, function (_ref) {
|
|
4386
4421
|
var theme = _ref.theme;
|
|
4387
|
-
return styled.css(_templateObject2$
|
|
4422
|
+
return styled.css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
4388
4423
|
});
|
|
4389
4424
|
var PreviewImageGroup = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
|
|
4390
4425
|
var PhotoContainerStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n background-color: var(--grey-5);\n"])));
|
|
@@ -4488,7 +4523,7 @@ var AvatarUploader = function AvatarUploader(_ref2) {
|
|
|
4488
4523
|
setAvatarImg('');
|
|
4489
4524
|
onRemove();
|
|
4490
4525
|
}, [onRemove]);
|
|
4491
|
-
return React__default.createElement(Container$
|
|
4526
|
+
return React__default.createElement(Container$f, null, React__default.createElement(Label, {
|
|
4492
4527
|
labelText: title,
|
|
4493
4528
|
htmlFor: 'avatar-upload'
|
|
4494
4529
|
}), React__default.createElement(PreviewImageGroup, null, avatarImg ? React__default.createElement(PreviewImage, {
|
|
@@ -4544,9 +4579,9 @@ var AvatarUploader = function AvatarUploader(_ref2) {
|
|
|
4544
4579
|
|
|
4545
4580
|
var _excluded$h = ["icons", "color", "size", "weight"];
|
|
4546
4581
|
|
|
4547
|
-
var _templateObject$
|
|
4548
|
-
var Container$
|
|
4549
|
-
var PlusIcon = styled__default(Icon)(_templateObject2$
|
|
4582
|
+
var _templateObject$v, _templateObject2$q, _templateObject3$m;
|
|
4583
|
+
var Container$g = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 27px;\n ", " {\n display: flex;\n align-items: center;\n }\n"])), IconWrapper);
|
|
4584
|
+
var PlusIcon = styled__default(Icon)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose([""])));
|
|
4550
4585
|
var PlusIconWrapper = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n margin: 0 30px;\n ", "{\n transform: rotate(45deg);\n [stroke]{\n stroke: var(--primary-7);\n }\n }\n"])), IconWrapper);
|
|
4551
4586
|
|
|
4552
4587
|
var BigIconsSummary = function BigIconsSummary(_ref) {
|
|
@@ -4559,7 +4594,7 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
|
|
|
4559
4594
|
weight = _ref$weight === void 0 ? 'light' : _ref$weight,
|
|
4560
4595
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
4561
4596
|
|
|
4562
|
-
return React__default.createElement(Container$
|
|
4597
|
+
return React__default.createElement(Container$g, Object.assign({}, props), icons.map(function (icon, index) {
|
|
4563
4598
|
return React__default.createElement(React.Fragment, {
|
|
4564
4599
|
key: "type-upload-" + icon + "}"
|
|
4565
4600
|
}, index !== 0 && React__default.createElement(PlusIconWrapper, null, React__default.createElement(PlusIcon, {
|
|
@@ -4575,12 +4610,12 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
|
|
|
4575
4610
|
}));
|
|
4576
4611
|
};
|
|
4577
4612
|
|
|
4578
|
-
var _templateObject$
|
|
4579
|
-
var Container$
|
|
4613
|
+
var _templateObject$w, _templateObject2$r, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$e;
|
|
4614
|
+
var Container$h = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
|
|
4580
4615
|
var theme = _ref.theme;
|
|
4581
4616
|
return theme.fontFamily.ui;
|
|
4582
4617
|
});
|
|
4583
|
-
var StyledDropArea = styled__default(DropArea)(_templateObject2$
|
|
4618
|
+
var StyledDropArea = styled__default(DropArea)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
4584
4619
|
var InputButtonWrapper = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
|
|
4585
4620
|
var FilesUploadGroup = styled__default.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px;\n background-color: var(--grey-4);\n position: relative;\n"])), function (_ref2) {
|
|
4586
4621
|
var hasFiles = _ref2.hasFiles;
|
|
@@ -4681,7 +4716,7 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
|
|
|
4681
4716
|
setFiles(null);
|
|
4682
4717
|
clearFilesCallback();
|
|
4683
4718
|
}, [clearFilesCallback]);
|
|
4684
|
-
return React__default.createElement(Container$
|
|
4719
|
+
return React__default.createElement(Container$h, null, React__default.createElement(FilesUploadGroup, {
|
|
4685
4720
|
hasFiles: files !== null
|
|
4686
4721
|
}, React__default.createElement(StyledDropArea, {
|
|
4687
4722
|
dropCallback: handleFiles
|
|
@@ -4707,10 +4742,10 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
|
|
|
4707
4742
|
|
|
4708
4743
|
var _excluded$i = ["children", "spacing"];
|
|
4709
4744
|
|
|
4710
|
-
var _templateObject$
|
|
4711
|
-
var FormContainer = styled__default.form(_templateObject$
|
|
4745
|
+
var _templateObject$x, _templateObject2$s;
|
|
4746
|
+
var FormContainer = styled__default.form(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
4712
4747
|
var spacing = _ref.spacing;
|
|
4713
|
-
return spacing && styled.css(_templateObject2$
|
|
4748
|
+
return spacing && styled.css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n & > ", " {\n margin-bottom: ", ";\n }\n "])), StyledLabel, spacing);
|
|
4714
4749
|
});
|
|
4715
4750
|
|
|
4716
4751
|
var Form = function Form(_ref2) {
|
|
@@ -4726,10 +4761,10 @@ var Form = function Form(_ref2) {
|
|
|
4726
4761
|
|
|
4727
4762
|
var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
|
|
4728
4763
|
|
|
4729
|
-
var _templateObject$
|
|
4730
|
-
var StyledButton$3 = styled__default.button(_templateObject$
|
|
4764
|
+
var _templateObject$y, _templateObject2$t, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$d;
|
|
4765
|
+
var StyledButton$3 = styled__default.button(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n\n color: var(--text-color);\n height: var(--button-height);\n display: flex;\n flex: 1 0 0;\n align-items: center;\n align-self: stretch;\n\n &:hover:enabled {\n background: var(--button-hover-bg);\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:active:enabled {\n background: var(--button-active-bg);\n\n ", ";\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:disabled {\n color: var(--text-disabled-color);\n cursor: not-allowed;\n }\n"])), resetButtonStyles, function (_ref) {
|
|
4731
4766
|
var noBorderTop = _ref.noBorderTop;
|
|
4732
|
-
return noBorderTop ? "border-top: none" : styled.css(_templateObject2$
|
|
4767
|
+
return noBorderTop ? "border-top: none" : styled.css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
|
|
4733
4768
|
}, IconWrapper, function (_ref2) {
|
|
4734
4769
|
var noBorderTop = _ref2.noBorderTop;
|
|
4735
4770
|
return noBorderTop ? "border-top: none" : styled.css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
|
|
@@ -4890,6 +4925,41 @@ var useCopyToClipboard = function useCopyToClipboard() {
|
|
|
4890
4925
|
};
|
|
4891
4926
|
};
|
|
4892
4927
|
|
|
4928
|
+
function useLocalStorage(key, initialValue) {
|
|
4929
|
+
var _useState = React.useState(function () {
|
|
4930
|
+
if (typeof window === 'undefined') {
|
|
4931
|
+
return initialValue;
|
|
4932
|
+
}
|
|
4933
|
+
|
|
4934
|
+
try {
|
|
4935
|
+
var item = window.localStorage.getItem(key);
|
|
4936
|
+
return item ? JSON.parse(item) : initialValue;
|
|
4937
|
+
} catch (error) {
|
|
4938
|
+
console.log(error);
|
|
4939
|
+
return initialValue;
|
|
4940
|
+
}
|
|
4941
|
+
}),
|
|
4942
|
+
storedValue = _useState[0],
|
|
4943
|
+
setStoredValue = _useState[1];
|
|
4944
|
+
|
|
4945
|
+
var setValue = React.useCallback(function (value) {
|
|
4946
|
+
try {
|
|
4947
|
+
setStoredValue(function (storedValue) {
|
|
4948
|
+
var valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
4949
|
+
|
|
4950
|
+
if (typeof window !== 'undefined') {
|
|
4951
|
+
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
4952
|
+
}
|
|
4953
|
+
|
|
4954
|
+
return valueToStore;
|
|
4955
|
+
});
|
|
4956
|
+
} catch (error) {
|
|
4957
|
+
console.log(error);
|
|
4958
|
+
}
|
|
4959
|
+
}, [key]);
|
|
4960
|
+
return [storedValue, setValue];
|
|
4961
|
+
}
|
|
4962
|
+
|
|
4893
4963
|
function useClickOutside(elRef, elCallback) {
|
|
4894
4964
|
var callbackRef = React.useRef(elCallback);
|
|
4895
4965
|
callbackRef.current = elCallback;
|
|
@@ -4909,10 +4979,10 @@ function useClickOutside(elRef, elCallback) {
|
|
|
4909
4979
|
}, [elCallback, elRef]);
|
|
4910
4980
|
}
|
|
4911
4981
|
|
|
4912
|
-
var _templateObject$
|
|
4913
|
-
var Container$
|
|
4982
|
+
var _templateObject$z, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$g, _templateObject7$f;
|
|
4983
|
+
var Container$i = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n z-index: 999;\n ", "\n\n font-family: ", ";\n ", ";\n"])), function (_ref) {
|
|
4914
4984
|
var theme = _ref.theme;
|
|
4915
|
-
return theme && styled.css(_templateObject2$
|
|
4985
|
+
return theme && styled.css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose([""])));
|
|
4916
4986
|
}, function (_ref2) {
|
|
4917
4987
|
var theme = _ref2.theme;
|
|
4918
4988
|
return theme.fontFamily.ui;
|
|
@@ -4974,7 +5044,7 @@ var Modal = function Modal(_ref9) {
|
|
|
4974
5044
|
|
|
4975
5045
|
onDismiss();
|
|
4976
5046
|
}, [onDismiss, dismissCallback]);
|
|
4977
|
-
return isOpen ? ReactDom.createPortal(React__default.createElement(Container$
|
|
5047
|
+
return isOpen ? ReactDom.createPortal(React__default.createElement(Container$i, null, React__default.createElement(LightBox, {
|
|
4978
5048
|
ref: lightBoxRef,
|
|
4979
5049
|
width: width,
|
|
4980
5050
|
padding: padding
|
|
@@ -5313,8 +5383,8 @@ function SvgNoImageBig(props) {
|
|
|
5313
5383
|
|
|
5314
5384
|
var _excluded$k = ["loop", "autoPlay", "controls", "muted"];
|
|
5315
5385
|
|
|
5316
|
-
var _templateObject$
|
|
5317
|
-
var MediaBoxWrapper = styled__default.div(_templateObject$
|
|
5386
|
+
var _templateObject$A, _templateObject2$v, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$e;
|
|
5387
|
+
var MediaBoxWrapper = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
|
|
5318
5388
|
var minHeight = _ref.minHeight;
|
|
5319
5389
|
return minHeight && "min-height: " + minHeight;
|
|
5320
5390
|
}, function (_ref2) {
|
|
@@ -5322,7 +5392,7 @@ var MediaBoxWrapper = styled__default.div(_templateObject$x || (_templateObject$
|
|
|
5322
5392
|
return minWidth && "min-width: " + minWidth;
|
|
5323
5393
|
});
|
|
5324
5394
|
var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: var(--grey-11);\n";
|
|
5325
|
-
var LoadingOverlay = styled__default.div(_templateObject2$
|
|
5395
|
+
var LoadingOverlay = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
|
|
5326
5396
|
var Video = styled__default.video(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
|
|
5327
5397
|
var theme = _ref3.theme,
|
|
5328
5398
|
isLoaded = _ref3.isLoaded,
|
|
@@ -5617,10 +5687,10 @@ var _excluded$l = ["mainButtonId", "buttonList", "design", "size", "textMaxWidth
|
|
|
5617
5687
|
_excluded2 = ["id", "text", "icon", "disabled"],
|
|
5618
5688
|
_excluded3 = ["id", "text", "icon", "disabled"];
|
|
5619
5689
|
|
|
5620
|
-
var _templateObject$
|
|
5690
|
+
var _templateObject$B, _templateObject2$w, _templateObject3$r;
|
|
5621
5691
|
var TOGGLE_ICON_WIDTH = 20;
|
|
5622
|
-
var Container$
|
|
5623
|
-
var MainButtonWrapper = styled__default.div(_templateObject2$
|
|
5692
|
+
var Container$j = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n position: relative;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 3px;\n border: 1px solid var(--border);\n background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);\n box-shadow: var(--button-lift-default-x, 0px) var(--button-lift-default-y, 2px) var(--button-lift-default-blur, 4px) var(--button-lift-default-spread, 2px) var(--button-lift-default-color, rgba(221, 234, 248, 0.08));\n"])));
|
|
5693
|
+
var MainButtonWrapper = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n"])));
|
|
5624
5694
|
var ToggleIcon = styled__default.button(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n height: var(--button-height);\n padding: 3px var(--button-icon-h-padding);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n border-left: 1px solid var(--toggle-icon-border);\n cursor: pointer;\n\n ", " {\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n path, g {\n stroke: var(--toggle-icon);\n }\n }\n }\n\n &:hover:enabled {\n background: var(--toggle-icon-hover-bg);\n }\n\n &:active:enabled {\n background: var(--toggle-icon-active-bg);\n ", " {\n svg path, svg g {\n stroke: var(--toggle-icon-active);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n\n ", " {\n svg path {\n stroke: var(--toggle-icon-disabled);\n }\n }\n }\n\n"])), resetButtonStyles, IconWrapper, IconWrapper, IconWrapper);
|
|
5625
5695
|
|
|
5626
5696
|
var validateMaxWidth = function validateMaxWidth(btnTextMaxWidth, textMaxWidth) {
|
|
@@ -5655,7 +5725,7 @@ var SplitButton = function SplitButton(_ref) {
|
|
|
5655
5725
|
setIsOpen(false);
|
|
5656
5726
|
}, []);
|
|
5657
5727
|
useClickOutside(containerRef, closeCallback);
|
|
5658
|
-
return React__default.createElement(Container$
|
|
5728
|
+
return React__default.createElement(Container$j, Object.assign({
|
|
5659
5729
|
ref: containerRef,
|
|
5660
5730
|
className: "split-button-" + design + " button-" + size
|
|
5661
5731
|
}, rest), React__default.createElement(MainButtonWrapper, {
|
|
@@ -5713,10 +5783,39 @@ var SplitButton = function SplitButton(_ref) {
|
|
|
5713
5783
|
})) : null);
|
|
5714
5784
|
};
|
|
5715
5785
|
|
|
5716
|
-
var
|
|
5717
|
-
|
|
5786
|
+
var _excluded$m = ["id", "buttonType", "icon", "text", "iconPosition", "size"];
|
|
5787
|
+
|
|
5788
|
+
var _templateObject$C;
|
|
5789
|
+
var Container$k = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n button {\n text-wrap: nowrap;\n }\n"])));
|
|
5790
|
+
|
|
5791
|
+
var ButtonsStack = function ButtonsStack(_ref) {
|
|
5792
|
+
var buttons = _ref.buttons;
|
|
5793
|
+
return React__default.createElement(Container$k, null, buttons.map(function (_ref2) {
|
|
5794
|
+
var id = _ref2.id,
|
|
5795
|
+
buttonType = _ref2.buttonType,
|
|
5796
|
+
icon = _ref2.icon,
|
|
5797
|
+
text = _ref2.text,
|
|
5798
|
+
iconPosition = _ref2.iconPosition,
|
|
5799
|
+
size = _ref2.size,
|
|
5800
|
+
buttonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
|
|
5801
|
+
|
|
5802
|
+
if (buttonType === 'icon-button') return React__default.createElement(ButtonWithIcon, Object.assign({
|
|
5803
|
+
key: id || "button-stack-" + id,
|
|
5804
|
+
size: size || 'small',
|
|
5805
|
+
icon: icon || '',
|
|
5806
|
+
position: iconPosition
|
|
5807
|
+
}, buttonProps), text);
|
|
5808
|
+
return React__default.createElement(Button, Object.assign({
|
|
5809
|
+
key: id || "button-stack-" + id,
|
|
5810
|
+
size: size || 'small'
|
|
5811
|
+
}, buttonProps), text);
|
|
5812
|
+
}));
|
|
5813
|
+
};
|
|
5814
|
+
|
|
5815
|
+
var _templateObject$D, _templateObject2$x, _templateObject3$s, _templateObject4$n, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f;
|
|
5816
|
+
var Container$l = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (_ref) {
|
|
5718
5817
|
var hide = _ref.hide;
|
|
5719
|
-
return hide && styled.css(_templateObject2$
|
|
5818
|
+
return hide && styled.css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
|
|
5720
5819
|
});
|
|
5721
5820
|
var Label$1 = styled__default.label(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 14px;\n font-weight: 300;\n text-decoration: none;\n color: var(--grey-11);\n padding: 12px;\n border-bottom: var(--grey-6) 1px solid;\n"])), fontFamily.ui);
|
|
5722
5821
|
var Item = styled__default.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n padding: 12px;\n display: flex;\n justify-content: left;\n"])));
|
|
@@ -5871,7 +5970,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5871
5970
|
setDisplayHours(dateFns.format(date, 'HH'));
|
|
5872
5971
|
}
|
|
5873
5972
|
}, [date, allowAfterMidnight]);
|
|
5874
|
-
return React__default.createElement(Container$
|
|
5973
|
+
return React__default.createElement(Container$l, {
|
|
5875
5974
|
hide: !hasDate && !hasTime
|
|
5876
5975
|
}, React__default.createElement(Label$1, null, title), hasDate && React__default.createElement(Item, null, React__default.createElement(IconWrap, null, React__default.createElement(Icon, {
|
|
5877
5976
|
icon: 'Date',
|
|
@@ -5916,7 +6015,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5916
6015
|
})))));
|
|
5917
6016
|
};
|
|
5918
6017
|
|
|
5919
|
-
var _templateObject$
|
|
6018
|
+
var _templateObject$E, _templateObject2$y, _templateObject3$t, _templateObject4$o, _templateObject5$m, _templateObject6$j, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject10$b, _templateObject11$7, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23;
|
|
5920
6019
|
|
|
5921
6020
|
var initializeInterval = function initializeInterval(day) {
|
|
5922
6021
|
return {
|
|
@@ -5930,8 +6029,8 @@ var initializeInterval = function initializeInterval(day) {
|
|
|
5930
6029
|
|
|
5931
6030
|
var TODAY = new Date();
|
|
5932
6031
|
var TODAY_INTERVAL = initializeInterval(dateFns.startOfDay(new Date()));
|
|
5933
|
-
var Container$
|
|
5934
|
-
var DateTimeArea = styled__default.div(_templateObject2$
|
|
6032
|
+
var Container$m = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6033
|
+
var DateTimeArea = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 170px;\n display: flex;\n flex-direction: column;\n"])));
|
|
5935
6034
|
var TimeZoneOption = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n border-top: var(--grey-6) 1px solid;\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n"])));
|
|
5936
6035
|
var TimeZoneLabel = styled__default.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 12px;\n font-weight: 300;\n color: var(--grey-11);\n"])), fontFamily.ui);
|
|
5937
6036
|
var TimeZoneValue = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n text-align: left;\n font-size: 12px;\n font-weight: 300;\n color: var(--grey-11);\n"])), fontFamily.data);
|
|
@@ -6115,7 +6214,7 @@ var DatePicker = function DatePicker(_ref8) {
|
|
|
6115
6214
|
end: end
|
|
6116
6215
|
});
|
|
6117
6216
|
}, [selectedRange]);
|
|
6118
|
-
return React__default.createElement(Container$
|
|
6217
|
+
return React__default.createElement(Container$m, null, React__default.createElement(DateTimeArea, null, React__default.createElement(DateTimeBlock, Object.assign({}, {
|
|
6119
6218
|
isTimeRangeValid: isTimeRangeValid
|
|
6120
6219
|
}, {
|
|
6121
6220
|
title: dateTimeTextUpper,
|
|
@@ -6231,25 +6330,25 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
|
|
|
6231
6330
|
return validInitial instanceof Date ? initializeInterval(validInitial) : validInitial;
|
|
6232
6331
|
};
|
|
6233
6332
|
|
|
6234
|
-
var _excluded$
|
|
6333
|
+
var _excluded$n = ["children"];
|
|
6235
6334
|
|
|
6236
|
-
var _templateObject$
|
|
6237
|
-
var Container$
|
|
6238
|
-
var Inner = styled__default.div(_templateObject2$
|
|
6335
|
+
var _templateObject$F, _templateObject2$z;
|
|
6336
|
+
var Container$n = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 5px 25px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border: var(--grey-6) 1px solid;\n border-radius: 3px;\n position: relative;\n display: inline-flex;\n overflow: hidden;\n padding-top: 5px;\n\n &::before {\n background-color: var(--primary-7);\n content: '';\n\n display: block;\n height: 5px;\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n }\n\n"])));
|
|
6337
|
+
var Inner = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n"])));
|
|
6239
6338
|
|
|
6240
6339
|
var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
6241
6340
|
var children = _ref.children,
|
|
6242
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6341
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
|
|
6243
6342
|
|
|
6244
|
-
return React__default.createElement(Container$
|
|
6343
|
+
return React__default.createElement(Container$n, Object.assign({}, props), React__default.createElement(Inner, null, children));
|
|
6245
6344
|
};
|
|
6246
6345
|
|
|
6247
|
-
var _excluded$
|
|
6346
|
+
var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "children"];
|
|
6248
6347
|
|
|
6249
|
-
var _templateObject$
|
|
6250
|
-
var FlipWrapper = styled__default.div(_templateObject$
|
|
6348
|
+
var _templateObject$G, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$n, _templateObject6$k, _templateObject7$j;
|
|
6349
|
+
var FlipWrapper = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
6251
6350
|
var isSortAscending = _ref.isSortAscending;
|
|
6252
|
-
return isSortAscending && styled.css(_templateObject2$
|
|
6351
|
+
return isSortAscending && styled.css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
6253
6352
|
});
|
|
6254
6353
|
var StyledButton$4 = styled__default.button(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", ";\n border-radius: 3px;\n height: 30px;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref2) {
|
|
6255
6354
|
var animation = _ref2.theme.animation;
|
|
@@ -6273,7 +6372,7 @@ var FilterButton = function FilterButton(_ref5) {
|
|
|
6273
6372
|
isSortAscending = _ref5$isSortAscending === void 0 ? false : _ref5$isSortAscending,
|
|
6274
6373
|
isOpen = _ref5.isOpen,
|
|
6275
6374
|
children = _ref5.children,
|
|
6276
|
-
props = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
6375
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
|
|
6277
6376
|
|
|
6278
6377
|
return React__default.createElement(StyledButton$4, Object.assign({
|
|
6279
6378
|
type: 'button'
|
|
@@ -6294,19 +6393,19 @@ var FilterButton = function FilterButton(_ref5) {
|
|
|
6294
6393
|
})));
|
|
6295
6394
|
};
|
|
6296
6395
|
|
|
6297
|
-
var _excluded$
|
|
6396
|
+
var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
|
|
6298
6397
|
|
|
6299
|
-
var _templateObject$
|
|
6300
|
-
var Title$1 = styled__default.div(_templateObject$
|
|
6398
|
+
var _templateObject$H, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$c;
|
|
6399
|
+
var Title$1 = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n display: block;\n color: var(--grey-9);\n font-size: 14px;\n font-weight: 500;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n"])), function (_ref) {
|
|
6301
6400
|
var theme = _ref.theme;
|
|
6302
6401
|
return theme.fontFamily.data;
|
|
6303
6402
|
});
|
|
6304
|
-
var FakeCheckbox = styled__default.div(_templateObject2$
|
|
6403
|
+
var FakeCheckbox = styled__default.div(_templateObject2$B || (_templateObject2$B = _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"])));
|
|
6305
6404
|
var FakeCheckboxInner = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
|
|
6306
6405
|
var CheckMarkWrapper = styled__default.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n [stroke]{\n stroke: transparent;\n }\n [fill] {\n fill: var(--inverse);\n }\n }\n"])));
|
|
6307
6406
|
var FakeRadioButton = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-width: 2px;\n border-style: solid;\n"])));
|
|
6308
6407
|
var FakeInnerRadio = styled__default.div(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
6309
|
-
var Container$
|
|
6408
|
+
var Container$o = styled__default.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_ref2) {
|
|
6310
6409
|
var styles = _ref2.theme.styles,
|
|
6311
6410
|
selected = _ref2.selected,
|
|
6312
6411
|
disabled = _ref2.disabled;
|
|
@@ -6323,10 +6422,10 @@ var FilterOption = function FilterOption(_ref3) {
|
|
|
6323
6422
|
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
6324
6423
|
_ref3$onClick = _ref3.onClick,
|
|
6325
6424
|
onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick,
|
|
6326
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
6425
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$p);
|
|
6327
6426
|
|
|
6328
6427
|
var iconWeight = dimensions.icons.weights['regular'];
|
|
6329
|
-
return React__default.createElement(Container$
|
|
6428
|
+
return React__default.createElement(Container$o, Object.assign({}, {
|
|
6330
6429
|
onClick: onClick,
|
|
6331
6430
|
disabled: disabled,
|
|
6332
6431
|
selected: selected
|
|
@@ -6338,17 +6437,17 @@ var FilterOption = function FilterOption(_ref3) {
|
|
|
6338
6437
|
})))), optionType === 'radio' && React__default.createElement(FakeRadioButton, null, React__default.createElement(FakeInnerRadio, null)), React__default.createElement(Title$1, null, title));
|
|
6339
6438
|
};
|
|
6340
6439
|
|
|
6341
|
-
var _excluded$
|
|
6440
|
+
var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
|
|
6342
6441
|
|
|
6343
|
-
var _templateObject$
|
|
6344
|
-
var Container$
|
|
6442
|
+
var _templateObject$I, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$i;
|
|
6443
|
+
var Container$p = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n height: 30px;\n padding: 0 0 0 8px;\n align-items: center;\n display: flex;\n border-radius: 3px;\n"])), function (_ref) {
|
|
6345
6444
|
var styles = _ref.theme.styles,
|
|
6346
6445
|
theme = _ref.theme,
|
|
6347
6446
|
hasBorder = _ref.hasBorder,
|
|
6348
6447
|
disabled = _ref.disabled,
|
|
6349
6448
|
noBackground = _ref.noBackground,
|
|
6350
6449
|
width = _ref.width;
|
|
6351
|
-
return styled.css(_templateObject2$
|
|
6450
|
+
return styled.css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n ", ";\n\n background-color: ", ";\n\n &:focus-within {\n background-color: ", ";\n border: ", ";\n }\n\n "])), hasBorder && styled.css(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), styles.filters.searchInput["default"].border, styles.filters.searchInput["default"].boxShadow), disabled && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), width), noBackground ? 'transparent' : theme.styles.filters.searchInput["default"].backgroundColor, noBackground ? 'transparent' : styles.filters.searchInput.focused.backgroundColor, noBackground ? 'transparent' : styles.filters.searchInput.focused.border);
|
|
6352
6451
|
}, IconWrapper);
|
|
6353
6452
|
var CrossButton = styled__default.button(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n ", ";\n flex-shrink: 0;\n flex-grow: 0;\n flex-basis: auto;\n width: 26px;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), resetButtonStyles, IconWrapper);
|
|
6354
6453
|
var StyledInput$2 = styled__default.input(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n font-size: 12px;\n border: none;\n height: 100%;\n width: 100%;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 3px;\n outline: none;\n margin-left: 7px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
|
|
@@ -6374,9 +6473,9 @@ var BasicSearchInput = function BasicSearchInput(_ref3) {
|
|
|
6374
6473
|
_ref3$onCrossClick = _ref3.onCrossClick,
|
|
6375
6474
|
onCrossClick = _ref3$onCrossClick === void 0 ? function () {} : _ref3$onCrossClick,
|
|
6376
6475
|
width = _ref3.width,
|
|
6377
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
6476
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$q);
|
|
6378
6477
|
|
|
6379
|
-
return React__default.createElement(Container$
|
|
6478
|
+
return React__default.createElement(Container$p, Object.assign({}, {
|
|
6380
6479
|
hasBorder: hasBorder,
|
|
6381
6480
|
disabled: disabled,
|
|
6382
6481
|
noBackground: noBackground,
|
|
@@ -6415,11 +6514,11 @@ var isFilterItem = function isFilterItem(item) {
|
|
|
6415
6514
|
return (typeof item.value === 'number' || typeof item.value === 'string') && typeof item.text === 'string';
|
|
6416
6515
|
};
|
|
6417
6516
|
|
|
6418
|
-
var _excluded$
|
|
6517
|
+
var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "children", "onToggleOpenCallback", "onCloseCallback"];
|
|
6419
6518
|
|
|
6420
|
-
var _templateObject$
|
|
6421
|
-
var Container$
|
|
6422
|
-
var ButtonWrapper = styled__default.div(_templateObject2$
|
|
6519
|
+
var _templateObject$J, _templateObject2$D, _templateObject3$x, _templateObject4$s;
|
|
6520
|
+
var Container$q = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6521
|
+
var ButtonWrapper = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
6423
6522
|
var ContentBox = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
|
|
6424
6523
|
var minWidth = _ref.minWidth;
|
|
6425
6524
|
return minWidth;
|
|
@@ -6465,7 +6564,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6465
6564
|
onToggleOpenCallback = _ref3$onToggleOpenCal === void 0 ? function () {} : _ref3$onToggleOpenCal,
|
|
6466
6565
|
_ref3$onCloseCallback = _ref3.onCloseCallback,
|
|
6467
6566
|
onCloseCallback = _ref3$onCloseCallback === void 0 ? function () {} : _ref3$onCloseCallback,
|
|
6468
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
6567
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$r);
|
|
6469
6568
|
|
|
6470
6569
|
var _useState = React.useState({
|
|
6471
6570
|
isOpen: false,
|
|
@@ -6510,7 +6609,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6510
6609
|
});
|
|
6511
6610
|
});
|
|
6512
6611
|
}, [onToggleOpenCallback, openState.isOpen]);
|
|
6513
|
-
return React__default.createElement(Container$
|
|
6612
|
+
return React__default.createElement(Container$q, Object.assign({
|
|
6514
6613
|
ref: mainRef
|
|
6515
6614
|
}, props), React__default.createElement(ButtonWrapper, {
|
|
6516
6615
|
ref: buttonWrapperRef
|
|
@@ -6532,23 +6631,23 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6532
6631
|
}), children));
|
|
6533
6632
|
};
|
|
6534
6633
|
|
|
6535
|
-
var _templateObject$
|
|
6536
|
-
var Container$
|
|
6537
|
-
var LoadingText = styled__default.div(_templateObject2$
|
|
6634
|
+
var _templateObject$K, _templateObject2$E;
|
|
6635
|
+
var Container$r = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 146px;\n border-top: 1px solid var(--grey-5);\n"])));
|
|
6636
|
+
var LoadingText = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-11);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])), fontFamily.data);
|
|
6538
6637
|
|
|
6539
6638
|
var LoadingBox = function LoadingBox(_ref) {
|
|
6540
6639
|
var loadingText = _ref.loadingText;
|
|
6541
|
-
return React__default.createElement(Container$
|
|
6640
|
+
return React__default.createElement(Container$r, null, React__default.createElement(Spinner, {
|
|
6542
6641
|
size: 'large',
|
|
6543
6642
|
styling: 'primary'
|
|
6544
6643
|
}), React__default.createElement(LoadingText, null, loadingText));
|
|
6545
6644
|
};
|
|
6546
6645
|
|
|
6547
|
-
var _excluded$
|
|
6646
|
+
var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "onSelect"];
|
|
6548
6647
|
|
|
6549
|
-
var _templateObject$
|
|
6550
|
-
var Container$
|
|
6551
|
-
var TopLine$1 = styled__default.div(_templateObject2$
|
|
6648
|
+
var _templateObject$L, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$j, _templateObject9$f, _templateObject10$d;
|
|
6649
|
+
var Container$s = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6650
|
+
var TopLine$1 = styled__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])));
|
|
6552
6651
|
var InnerBox = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 4px 9px 0 var(--grey-a2);\n border-right: solid 1px var(--grey-7);\n border-bottom: solid 1px var(--grey-7);\n border-left: solid 1px var(--grey-7);\n background-color: var(--grey-2);\n"])));
|
|
6553
6652
|
var StyledFilterOption = styled__default(FilterOption)(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
|
|
6554
6653
|
var OptionList = styled__default.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n max-height: ", ";\n min-height: 40px;\n position: relative;\n overflow-y: auto;\n margin-right: 2px;\n\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), function (_ref) {
|
|
@@ -6707,7 +6806,7 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6707
6806
|
emptyResultText = _ref2.emptyResultText,
|
|
6708
6807
|
_ref2$onSelect = _ref2.onSelect,
|
|
6709
6808
|
onSelect = _ref2$onSelect === void 0 ? function () {} : _ref2$onSelect,
|
|
6710
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6809
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
|
|
6711
6810
|
|
|
6712
6811
|
var _useState = React.useState(selectedOrderList(list, maxDisplayedItems, selected)),
|
|
6713
6812
|
visibleList = _useState[0],
|
|
@@ -6754,7 +6853,7 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6754
6853
|
isActive = false;
|
|
6755
6854
|
};
|
|
6756
6855
|
}, [list, maxDisplayedItems, selected]);
|
|
6757
|
-
return React__default.createElement(Container$
|
|
6856
|
+
return React__default.createElement(Container$s, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
|
|
6758
6857
|
buttonIcon: buttonIcon,
|
|
6759
6858
|
buttonText: buttonText,
|
|
6760
6859
|
disabled: disabled
|
|
@@ -6791,11 +6890,11 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6791
6890
|
}) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(Gradient, null)))));
|
|
6792
6891
|
};
|
|
6793
6892
|
|
|
6794
|
-
var _excluded$
|
|
6893
|
+
var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "onSelect"];
|
|
6795
6894
|
|
|
6796
|
-
var _templateObject$
|
|
6797
|
-
var Container$
|
|
6798
|
-
var TopLine$2 = styled__default.div(_templateObject2$
|
|
6895
|
+
var _templateObject$M, _templateObject2$G, _templateObject3$z, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$k, _templateObject9$g;
|
|
6896
|
+
var Container$t = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6897
|
+
var TopLine$2 = styled__default.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-7);\n height: 3px;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n"])));
|
|
6799
6898
|
var InnerBox$1 = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: unset;\n box-shadow: 0px 5px 25px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border-color: var(--grey-6);\n border: var(--grey-6) 1px solid;\n"])));
|
|
6800
6899
|
var StyledFilterOption$1 = styled__default(FilterOption)(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
|
|
6801
6900
|
var OptionList$1 = styled__default.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption$1);
|
|
@@ -6819,7 +6918,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6819
6918
|
_ref2$ascendingText = _ref2.ascendingText,
|
|
6820
6919
|
ascendingText = _ref2$ascendingText === void 0 ? 'Ascending' : _ref2$ascendingText,
|
|
6821
6920
|
onSelect = _ref2.onSelect,
|
|
6822
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6921
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
6823
6922
|
|
|
6824
6923
|
var handleSortSelect = React.useCallback(function (newValue) {
|
|
6825
6924
|
if (newValue.value === selected.value) {
|
|
@@ -6835,7 +6934,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6835
6934
|
|
|
6836
6935
|
onSelect(selected, isAscending);
|
|
6837
6936
|
}, [isSortAscending, onSelect, selected]);
|
|
6838
|
-
return React__default.createElement(Container$
|
|
6937
|
+
return React__default.createElement(Container$t, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
|
|
6839
6938
|
buttonText: buttonText,
|
|
6840
6939
|
disabled: disabled,
|
|
6841
6940
|
isSortAscending: isSortAscending
|
|
@@ -6880,9 +6979,9 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6880
6979
|
}))))));
|
|
6881
6980
|
};
|
|
6882
6981
|
|
|
6883
|
-
var _templateObject$
|
|
6884
|
-
var Container$
|
|
6885
|
-
var ContextActionBaseCSS = styled.css(_templateObject2$
|
|
6982
|
+
var _templateObject$N, _templateObject2$H, _templateObject3$A, _templateObject4$v, _templateObject5$s, _templateObject6$p, _templateObject7$o, _templateObject8$l, _templateObject9$h, _templateObject10$e, _templateObject11$8, _templateObject12$6, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$1;
|
|
6983
|
+
var Container$u = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6984
|
+
var ContextActionBaseCSS = styled.css(_templateObject2$H || (_templateObject2$H = _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"])));
|
|
6886
6985
|
var ContextIcon = styled__default.div(_templateObject3$A || (_templateObject3$A = _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) {
|
|
6887
6986
|
var theme = _ref.theme;
|
|
6888
6987
|
return styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-2);\n transition: background ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
|
|
@@ -7024,7 +7123,7 @@ var FilterLayout = function FilterLayout(_ref6) {
|
|
|
7024
7123
|
color: openState.isOpen ? 'inverse' : 'dimmed',
|
|
7025
7124
|
size: 16
|
|
7026
7125
|
})));
|
|
7027
|
-
return React__default.createElement(Container$
|
|
7126
|
+
return React__default.createElement(Container$u, {
|
|
7028
7127
|
ref: mainRef
|
|
7029
7128
|
}, React__default.createElement(ButtonWrapper$1, {
|
|
7030
7129
|
ref: buttonWrapperRef
|
|
@@ -7066,12 +7165,12 @@ var FilterLayout = function FilterLayout(_ref6) {
|
|
|
7066
7165
|
}))))))));
|
|
7067
7166
|
};
|
|
7068
7167
|
|
|
7069
|
-
var _excluded$
|
|
7168
|
+
var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
|
|
7070
7169
|
|
|
7071
|
-
var _templateObject$
|
|
7170
|
+
var _templateObject$O;
|
|
7072
7171
|
var MIN_WIDTH = 470;
|
|
7073
7172
|
var MIN_HEIGHT = 360;
|
|
7074
|
-
var Container$
|
|
7173
|
+
var Container$v = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose([""])));
|
|
7075
7174
|
|
|
7076
7175
|
var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
7077
7176
|
var buttonIcon = _ref.buttonIcon,
|
|
@@ -7092,7 +7191,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
7092
7191
|
onUpdateCallback = _ref$onUpdateCallback === void 0 ? function () {} : _ref$onUpdateCallback,
|
|
7093
7192
|
_ref$onToggleCallback = _ref.onToggleCallback,
|
|
7094
7193
|
onToggleCallback = _ref$onToggleCallback === void 0 ? function () {} : _ref$onToggleCallback,
|
|
7095
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7194
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
7096
7195
|
|
|
7097
7196
|
var pickerValue = React.useRef(null);
|
|
7098
7197
|
|
|
@@ -7139,7 +7238,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
7139
7238
|
canReset = false;
|
|
7140
7239
|
};
|
|
7141
7240
|
}, [selected]);
|
|
7142
|
-
return React__default.createElement(Container$
|
|
7241
|
+
return React__default.createElement(Container$v, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
|
|
7143
7242
|
buttonIcon: buttonIcon,
|
|
7144
7243
|
buttonText: buttonText,
|
|
7145
7244
|
disabled: disabled
|
|
@@ -7163,11 +7262,11 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
7163
7262
|
})))));
|
|
7164
7263
|
};
|
|
7165
7264
|
|
|
7166
|
-
var _excluded$
|
|
7265
|
+
var _excluded$v = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
|
|
7167
7266
|
|
|
7168
|
-
var _templateObject$
|
|
7169
|
-
var fadeInAnimation = styled.keyframes(_templateObject$
|
|
7170
|
-
var SearchInputWrapper = styled__default.div(_templateObject2$
|
|
7267
|
+
var _templateObject$P, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$t, _templateObject6$q, _templateObject7$p, _templateObject8$m;
|
|
7268
|
+
var fadeInAnimation = styled.keyframes(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n 0% {\n width: 50%;\n opacity: .5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n width: 100%;\n }\n"])));
|
|
7269
|
+
var SearchInputWrapper = styled__default.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
|
|
7171
7270
|
var CloseSearchInputWrapper = styled__default.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
7172
7271
|
var theme = _ref.theme;
|
|
7173
7272
|
return theme && styled.css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
|
|
@@ -7175,7 +7274,7 @@ var CloseSearchInputWrapper = styled__default.div(_templateObject3$B || (_templa
|
|
|
7175
7274
|
var StyledFilterButton = styled__default(FilterButton)(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose([""])));
|
|
7176
7275
|
var StyledDropdown = styled__default(FilterDropdown)(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose([""])));
|
|
7177
7276
|
var StyledDropdownDatePicker = styled__default(DropdownDatePicker)(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose([""])));
|
|
7178
|
-
var Container$
|
|
7277
|
+
var Container$w = styled__default.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n ", ", ", ", ", ", ", " {\n margin: 0 3px 10px 3px;\n }\n"])), SearchInputWrapper, StyledDropdown, StyledFilterButton, StyledDropdownDatePicker);
|
|
7179
7278
|
|
|
7180
7279
|
var renderDropdowns = function renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore) {
|
|
7181
7280
|
return dropdownFilters.map(function (dropdown) {
|
|
@@ -7254,7 +7353,7 @@ var FilterInputs = function FilterInputs(_ref2) {
|
|
|
7254
7353
|
showMoreText = _ref2$showMoreText === void 0 ? 'Show More' : _ref2$showMoreText,
|
|
7255
7354
|
_ref2$showLessText = _ref2.showLessText,
|
|
7256
7355
|
showLessText = _ref2$showLessText === void 0 ? 'Show Less' : _ref2$showLessText,
|
|
7257
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7356
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$v);
|
|
7258
7357
|
|
|
7259
7358
|
var _useState = React.useState(initialSearchFilters(searchFilters)),
|
|
7260
7359
|
visibleSearchInputs = _useState[0],
|
|
@@ -7281,7 +7380,7 @@ var FilterInputs = function FilterInputs(_ref2) {
|
|
|
7281
7380
|
setVisibleSearchInputs(_newVisible);
|
|
7282
7381
|
}
|
|
7283
7382
|
}, [visibleSearchInputs]);
|
|
7284
|
-
return React__default.createElement(Container$
|
|
7383
|
+
return React__default.createElement(Container$w, Object.assign({}, {
|
|
7285
7384
|
props: props
|
|
7286
7385
|
}), renderSearchInputs(searchFilters, visibleSearchInputs, handleVisibleSearch), renderDatePickers(datePickerFilters), renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore), (!hasShowMore || !showMoreDropdowns) && renderAddSearchButtons(searchFilters, visibleSearchInputs, handleVisibleSearch), hasShowMore && React__default.createElement(FilterButton, {
|
|
7287
7386
|
icon: 'FilterEllipsis',
|
|
@@ -7289,11 +7388,11 @@ var FilterInputs = function FilterInputs(_ref2) {
|
|
|
7289
7388
|
}, showMoreDropdowns ? showMoreText : showLessText));
|
|
7290
7389
|
};
|
|
7291
7390
|
|
|
7292
|
-
var _excluded$
|
|
7391
|
+
var _excluded$w = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
|
|
7293
7392
|
|
|
7294
|
-
var _templateObject$
|
|
7295
|
-
var Container$
|
|
7296
|
-
var ResultsTextWrapper = styled__default.div(_templateObject2$
|
|
7393
|
+
var _templateObject$Q, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$u, _templateObject6$r, _templateObject7$q;
|
|
7394
|
+
var Container$x = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
|
|
7395
|
+
var ResultsTextWrapper = styled__default.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), fontFamily.ui);
|
|
7297
7396
|
var FilterLabel = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n height: 18px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n padding: 0 11px 0 8px;\n margin-left: 3px;\n color: var(--grey-9);\n font-family: ", ";\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid var(--grey-8);\n"])), fontFamily.data, IconWrapper);
|
|
7298
7397
|
var FilterLabelText = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n padding: ", ";\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 300px;\n"])), function (_ref) {
|
|
7299
7398
|
var hasIcon = _ref.hasIcon;
|
|
@@ -7369,9 +7468,9 @@ var FiltersResults = function FiltersResults(_ref2) {
|
|
|
7369
7468
|
onRemoveFilter = _ref2$onRemoveFilter === void 0 ? function () {} : _ref2$onRemoveFilter,
|
|
7370
7469
|
_ref2$onClearAll = _ref2.onClearAll,
|
|
7371
7470
|
onClearAll = _ref2$onClearAll === void 0 ? function () {} : _ref2$onClearAll,
|
|
7372
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7471
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$w);
|
|
7373
7472
|
|
|
7374
|
-
return React__default.createElement(Container$
|
|
7473
|
+
return React__default.createElement(Container$x, Object.assign({}, props), React__default.createElement(ResultsTextWrapper, null, renderResults(resultTextTemplate, totalResults)), React__default.createElement(FilterLabelsGroup, null, labelLists.map(function (_ref3, index) {
|
|
7375
7474
|
var icon = _ref3.icon,
|
|
7376
7475
|
item = _ref3.item,
|
|
7377
7476
|
filterName = _ref3.filterName,
|
|
@@ -7399,12 +7498,12 @@ var FiltersResults = function FiltersResults(_ref2) {
|
|
|
7399
7498
|
}, clearText)));
|
|
7400
7499
|
};
|
|
7401
7500
|
|
|
7402
|
-
var _excluded$
|
|
7501
|
+
var _excluded$x = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
|
|
7403
7502
|
|
|
7404
|
-
var _templateObject$
|
|
7405
|
-
var Title$2 = styled__default.div(_templateObject$
|
|
7406
|
-
var StyledFilterResults = styled__default(FiltersResults)(_templateObject2$
|
|
7407
|
-
var Container$
|
|
7503
|
+
var _templateObject$R, _templateObject2$K, _templateObject3$D;
|
|
7504
|
+
var Title$2 = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), fontFamily.ui);
|
|
7505
|
+
var StyledFilterResults = styled__default(FiltersResults)(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose([""])));
|
|
7506
|
+
var Container$y = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
|
|
7408
7507
|
|
|
7409
7508
|
var getDisableValue = function getDisableValue(filtersValues, singleFilter, filter) {
|
|
7410
7509
|
var disabled = false;
|
|
@@ -7668,7 +7767,7 @@ var FilterBar = function FilterBar(_ref4) {
|
|
|
7668
7767
|
resultsDateFormat = _ref4.resultsDateFormat,
|
|
7669
7768
|
_ref4$onChangeCallbac = _ref4.onChangeCallback,
|
|
7670
7769
|
onChangeCallback = _ref4$onChangeCallbac === void 0 ? function () {} : _ref4$onChangeCallbac,
|
|
7671
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
7770
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$x);
|
|
7672
7771
|
|
|
7673
7772
|
var _useState = React.useState(initFilters(searchersConfig, dropdownsConfig, datePickersConfig)),
|
|
7674
7773
|
filtersValues = _useState[0],
|
|
@@ -7812,7 +7911,7 @@ var FilterBar = function FilterBar(_ref4) {
|
|
|
7812
7911
|
mountConfig = false;
|
|
7813
7912
|
};
|
|
7814
7913
|
}, [dropdownsConfigRef.current]);
|
|
7815
|
-
return React__default.createElement(Container$
|
|
7914
|
+
return React__default.createElement(Container$y, Object.assign({}, props), React__default.createElement(Title$2, null, filtersTitle), React__default.createElement(FilterInputs, Object.assign({}, {
|
|
7816
7915
|
hasShowMore: hasShowMore,
|
|
7817
7916
|
showMoreText: showMoreText,
|
|
7818
7917
|
showLessText: showLessText
|
|
@@ -7832,9 +7931,9 @@ var FilterBar = function FilterBar(_ref4) {
|
|
|
7832
7931
|
})));
|
|
7833
7932
|
};
|
|
7834
7933
|
|
|
7835
|
-
var _templateObject$
|
|
7836
|
-
var Container$
|
|
7837
|
-
var StatusCounter = styled__default.div(_templateObject2$
|
|
7934
|
+
var _templateObject$S, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$v;
|
|
7935
|
+
var Container$z = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
|
|
7936
|
+
var StatusCounter = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 14px;;\n top: -12px;\n border-radius: 4px;\n height: 14px;\n min-width: 14px;\n padding: 2px;\n font-size: 10px;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n background-color: ", ";\n"])), function (_ref) {
|
|
7838
7937
|
var animation = _ref.theme.animation;
|
|
7839
7938
|
return styled.css(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n transition: background-color ", " ", ";\n "])), animation.speed.slow, animation.easing.primary.easeInOut);
|
|
7840
7939
|
}, function (_ref2) {
|
|
@@ -7857,7 +7956,7 @@ var StatusIcon = function StatusIcon(_ref5) {
|
|
|
7857
7956
|
counter = _ref5.counter,
|
|
7858
7957
|
_ref5$maxCounter = _ref5.maxCounter,
|
|
7859
7958
|
maxCounter = _ref5$maxCounter === void 0 ? 999 : _ref5$maxCounter;
|
|
7860
|
-
return React__default.createElement(Container$
|
|
7959
|
+
return React__default.createElement(Container$z, null, status && counter === undefined ? React__default.createElement(StatusDot, {
|
|
7861
7960
|
color: status
|
|
7862
7961
|
}) : counter === undefined ? null : React__default.createElement(StatusCounter, {
|
|
7863
7962
|
color: status
|
|
@@ -7868,9 +7967,9 @@ var StatusIcon = function StatusIcon(_ref5) {
|
|
|
7868
7967
|
}));
|
|
7869
7968
|
};
|
|
7870
7969
|
|
|
7871
|
-
var _templateObject$
|
|
7872
|
-
var HandleTouchReactionKeyframes = styled.keyframes(_templateObject$
|
|
7873
|
-
var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$
|
|
7970
|
+
var _templateObject$T, _templateObject2$M, _templateObject3$F, _templateObject4$z, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$n, _templateObject9$i, _templateObject10$f, _templateObject11$9, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3;
|
|
7971
|
+
var HandleTouchReactionKeyframes = styled.keyframes(_templateObject$T || (_templateObject$T = _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"])));
|
|
7972
|
+
var HandleMouseReactionKeyframes = styled.keyframes(_templateObject2$M || (_templateObject2$M = _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"])));
|
|
7874
7973
|
var HandleBase = styled__default.svg(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
|
|
7875
7974
|
var theme = _ref.theme,
|
|
7876
7975
|
styling = _ref.styling;
|
|
@@ -8117,8 +8216,8 @@ var HandleUnit = function HandleUnit(props) {
|
|
|
8117
8216
|
}, index + pointIndexOffset))));
|
|
8118
8217
|
};
|
|
8119
8218
|
|
|
8120
|
-
var _templateObject$
|
|
8121
|
-
var ContrastLine = styled__default.line(_templateObject$
|
|
8219
|
+
var _templateObject$U, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$o, _templateObject9$j, _templateObject10$g, _templateObject11$a, _templateObject12$8, _templateObject13$7, _templateObject14$5;
|
|
8220
|
+
var ContrastLine = styled__default.line(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n mix-blend-mode: multiply;\n stroke-width: ", "px;\n stroke-opacity: ", ";\n cursor: pointer;\n"])), function (_ref) {
|
|
8122
8221
|
var theme = _ref.theme,
|
|
8123
8222
|
styling = _ref.styling;
|
|
8124
8223
|
return theme.custom.lines[styling].contrastLine.stroke;
|
|
@@ -8129,7 +8228,7 @@ var ContrastLine = styled__default.line(_templateObject$Q || (_templateObject$Q
|
|
|
8129
8228
|
var showLineBorder = _ref3.showLineBorder;
|
|
8130
8229
|
return showLineBorder ? '0.35' : '0';
|
|
8131
8230
|
});
|
|
8132
|
-
var HighlightLine = styled__default.line(_templateObject2$
|
|
8231
|
+
var HighlightLine = styled__default.line(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n"])), function (_ref4) {
|
|
8133
8232
|
var theme = _ref4.theme,
|
|
8134
8233
|
styling = _ref4.styling;
|
|
8135
8234
|
return theme.custom.lines[styling].highlightLineBorder.stroke;
|
|
@@ -8407,15 +8506,15 @@ var LineUnit = function LineUnit(props) {
|
|
|
8407
8506
|
|
|
8408
8507
|
var LineSetContext = React.createContext({});
|
|
8409
8508
|
|
|
8410
|
-
var _templateObject$
|
|
8411
|
-
var FilledPolygon = styled__default.polygon(_templateObject$
|
|
8509
|
+
var _templateObject$V, _templateObject2$O, _templateObject3$H, _templateObject4$B;
|
|
8510
|
+
var FilledPolygon = styled__default.polygon(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
|
|
8412
8511
|
var color = _ref.color;
|
|
8413
8512
|
return color;
|
|
8414
8513
|
}, function (_ref2) {
|
|
8415
8514
|
var opacity = _ref2.opacity;
|
|
8416
8515
|
return opacity;
|
|
8417
8516
|
});
|
|
8418
|
-
var Point = styled__default.circle(_templateObject2$
|
|
8517
|
+
var Point = styled__default.circle(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
|
|
8419
8518
|
var theme = _ref3.theme,
|
|
8420
8519
|
styling = _ref3.styling;
|
|
8421
8520
|
return theme.custom.lines[styling].point.fill;
|
|
@@ -8691,9 +8790,9 @@ var LineSet = function LineSet(_ref8) {
|
|
|
8691
8790
|
}));
|
|
8692
8791
|
};
|
|
8693
8792
|
|
|
8694
|
-
var _templateObject$
|
|
8695
|
-
var Container$
|
|
8696
|
-
var LoadingOverlay$1 = styled__default.div(_templateObject2$
|
|
8793
|
+
var _templateObject$W, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$y;
|
|
8794
|
+
var Container$A = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n\n"])));
|
|
8795
|
+
var LoadingOverlay$1 = styled__default.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
|
|
8697
8796
|
var Frame = styled__default.svg(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
|
|
8698
8797
|
return props.transculent && styled.css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
8699
8798
|
});
|
|
@@ -8863,7 +8962,7 @@ var LineUI = function LineUI(_ref) {
|
|
|
8863
8962
|
showPoint: showPoint,
|
|
8864
8963
|
showDirectionMark: showDirectionMark
|
|
8865
8964
|
};
|
|
8866
|
-
return React__default.createElement(Container$
|
|
8965
|
+
return React__default.createElement(Container$A, null, React__default.createElement(Image$1, {
|
|
8867
8966
|
ref: imgRef,
|
|
8868
8967
|
onLoad: initScaleAndBounds,
|
|
8869
8968
|
src: src,
|
|
@@ -8898,11 +8997,11 @@ var LineUI = function LineUI(_ref) {
|
|
|
8898
8997
|
})));
|
|
8899
8998
|
};
|
|
8900
8999
|
|
|
8901
|
-
var _excluded$
|
|
9000
|
+
var _excluded$y = ["loop", "autoPlay", "controls", "muted"];
|
|
8902
9001
|
|
|
8903
|
-
var _templateObject$
|
|
8904
|
-
var Container$
|
|
8905
|
-
var Video$1 = styled__default.video(_templateObject2$
|
|
9002
|
+
var _templateObject$X, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$z;
|
|
9003
|
+
var Container$B = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
|
|
9004
|
+
var Video$1 = styled__default.video(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
|
|
8906
9005
|
var LoadingOverlay$2 = styled__default.div(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
|
|
8907
9006
|
var Frame$1 = styled__default.svg(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
|
|
8908
9007
|
return props.transcalent && styled.css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
@@ -8931,7 +9030,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
|
|
|
8931
9030
|
controls = _ref$videoOptions$con === void 0 ? false : _ref$videoOptions$con,
|
|
8932
9031
|
_ref$videoOptions$mut = _ref$videoOptions.muted,
|
|
8933
9032
|
muted = _ref$videoOptions$mut === void 0 ? true : _ref$videoOptions$mut,
|
|
8934
|
-
videoOptions = _objectWithoutPropertiesLoose(_ref$videoOptions, _excluded$
|
|
9033
|
+
videoOptions = _objectWithoutPropertiesLoose(_ref$videoOptions, _excluded$y),
|
|
8935
9034
|
_ref$options = _ref.options;
|
|
8936
9035
|
|
|
8937
9036
|
_ref$options = _ref$options === void 0 ? {} : _ref$options;
|
|
@@ -9086,7 +9185,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
|
|
|
9086
9185
|
showPoint: showPoint,
|
|
9087
9186
|
showDirectionMark: showDirectionMark
|
|
9088
9187
|
};
|
|
9089
|
-
return React__default.createElement(Container$
|
|
9188
|
+
return React__default.createElement(Container$B, null, React__default.createElement(Video$1, Object.assign({
|
|
9090
9189
|
ref: videoRef,
|
|
9091
9190
|
controls: controls,
|
|
9092
9191
|
muted: muted,
|
|
@@ -9126,10 +9225,10 @@ var LineUIVideo = function LineUIVideo(_ref) {
|
|
|
9126
9225
|
})));
|
|
9127
9226
|
};
|
|
9128
9227
|
|
|
9129
|
-
var _excluded$
|
|
9228
|
+
var _excluded$z = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
|
|
9130
9229
|
|
|
9131
|
-
var _templateObject$
|
|
9132
|
-
var Video$2 = styled__default.video(_templateObject$
|
|
9230
|
+
var _templateObject$Y;
|
|
9231
|
+
var Video$2 = styled__default.video(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n /* width: 800px; */\n"])));
|
|
9133
9232
|
|
|
9134
9233
|
var WebRTCPlayer = function WebRTCPlayer(_ref) {
|
|
9135
9234
|
var _ref$id = _ref.id,
|
|
@@ -9148,7 +9247,7 @@ var WebRTCPlayer = function WebRTCPlayer(_ref) {
|
|
|
9148
9247
|
autoPlay = _ref$autoPlay === void 0 ? true : _ref$autoPlay,
|
|
9149
9248
|
_ref$muted = _ref.muted,
|
|
9150
9249
|
muted = _ref$muted === void 0 ? true : _ref$muted,
|
|
9151
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9250
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
|
|
9152
9251
|
|
|
9153
9252
|
var _useState = React.useState(0),
|
|
9154
9253
|
connectionAttempts = _useState[0],
|
|
@@ -9453,9 +9552,9 @@ function getPeerId(id) {
|
|
|
9453
9552
|
return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
|
|
9454
9553
|
}
|
|
9455
9554
|
|
|
9456
|
-
var _templateObject$
|
|
9457
|
-
var Container$
|
|
9458
|
-
var Video$3 = styled__default(WebRTCPlayer)(_templateObject2$
|
|
9555
|
+
var _templateObject$Z, _templateObject2$R, _templateObject3$K, _templateObject4$E, _templateObject5$A;
|
|
9556
|
+
var Container$C = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n user-select: none;\n touch-action: none;\n /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n /* border-radius:3px; */\n\n width: auto;\n /* transform: translateY(-70%); */\n"])));
|
|
9557
|
+
var Video$3 = styled__default(WebRTCPlayer)(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
|
|
9459
9558
|
var LoadingOverlay$3 = styled__default.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
|
|
9460
9559
|
var Frame$2 = styled__default.svg(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n margin: 0;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n transition: background 250ms ease;\n background: hsla(0deg, 0%, 0%, 0%);\n\n ", "\n\n"])), function (props) {
|
|
9461
9560
|
return props.transcalent && styled.css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
@@ -9631,7 +9730,7 @@ var LineUI$1 = function LineUI(_ref) {
|
|
|
9631
9730
|
showPoint: showPoint,
|
|
9632
9731
|
showDirectionMark: showDirectionMark
|
|
9633
9732
|
};
|
|
9634
|
-
return React__default.createElement(Container$
|
|
9733
|
+
return React__default.createElement(Container$C, null, React__default.createElement(Video$3, Object.assign({
|
|
9635
9734
|
onLoadedMetadata: onLoadedMetadata,
|
|
9636
9735
|
peerAddress: ws,
|
|
9637
9736
|
id: '1'
|
|
@@ -9667,7 +9766,7 @@ var LineUI$1 = function LineUI(_ref) {
|
|
|
9667
9766
|
})));
|
|
9668
9767
|
};
|
|
9669
9768
|
|
|
9670
|
-
var _excluded$
|
|
9769
|
+
var _excluded$A = ["name", "points"];
|
|
9671
9770
|
|
|
9672
9771
|
var getMidpoint = function getMidpoint(pointA, pointB) {
|
|
9673
9772
|
return {
|
|
@@ -9755,7 +9854,7 @@ var LineReducer = (function (state, action) {
|
|
|
9755
9854
|
var newState = action.state.map(function (_ref) {
|
|
9756
9855
|
var name = _ref.name,
|
|
9757
9856
|
points = _ref.points,
|
|
9758
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9857
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
|
|
9759
9858
|
|
|
9760
9859
|
return _extends({
|
|
9761
9860
|
name: name,
|
|
@@ -9804,100 +9903,200 @@ var LineReducer = (function (state, action) {
|
|
|
9804
9903
|
}
|
|
9805
9904
|
});
|
|
9806
9905
|
|
|
9807
|
-
var _templateObject$
|
|
9808
|
-
var
|
|
9809
|
-
var
|
|
9810
|
-
var
|
|
9811
|
-
|
|
9812
|
-
|
|
9813
|
-
|
|
9814
|
-
|
|
9815
|
-
|
|
9816
|
-
|
|
9817
|
-
|
|
9818
|
-
var
|
|
9819
|
-
var
|
|
9820
|
-
|
|
9821
|
-
|
|
9822
|
-
|
|
9823
|
-
|
|
9824
|
-
|
|
9825
|
-
|
|
9826
|
-
|
|
9827
|
-
updateDocTitle =
|
|
9828
|
-
|
|
9829
|
-
|
|
9906
|
+
var _templateObject$_, _templateObject2$S, _templateObject3$L, _templateObject4$F, _templateObject5$B, _templateObject6$u, _templateObject7$t;
|
|
9907
|
+
var ICON_SIZE = 24;
|
|
9908
|
+
var GAP_LEFT = 20;
|
|
9909
|
+
var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
|
|
9910
|
+
var Container$D = styled__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n @media ", " {\n gap: ", "px;\n flex-direction: row;\n }\n"])), deviceMediaQuery.large, GAP_LEFT);
|
|
9911
|
+
var TitlesWrapper = styled__default.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: ", ";\n gap: 4px;\n"])), function (_ref) {
|
|
9912
|
+
var areaTitleBottom = _ref.areaTitleBottom;
|
|
9913
|
+
return areaTitleBottom ? "column-reverse" : "column";
|
|
9914
|
+
});
|
|
9915
|
+
var IconContainer$1 = styled__default.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-left: 0px;\n justify-content: left;\n\n @media ", " {\n margin-left: ", "px;\n justify-content: center;\n }\n\n svg {\n display: block;\n }\n"])), deviceMediaQuery.large, ICON_MARGIN_LEFT);
|
|
9916
|
+
var Title$3 = styled__default.h1(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 26px;\n font-weight: 600;\n text-decoration: none;\n color: var(--grey-12);\n margin: 0;\n"])));
|
|
9917
|
+
var AreaTitleCss = styled.css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 18px;\n font-weight: 600;\n text-decoration: none;\n color: var(--grey-11);\n"])));
|
|
9918
|
+
var AreaTitle = styled__default.div(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n ", "\n"])), AreaTitleCss);
|
|
9919
|
+
var AreaLinkTitle = styled__default(reactRouterDom.Link)(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
|
|
9920
|
+
|
|
9921
|
+
var PageTitle = function PageTitle(_ref2) {
|
|
9922
|
+
var title = _ref2.title,
|
|
9923
|
+
icon = _ref2.icon,
|
|
9924
|
+
areaTitle = _ref2.areaTitle,
|
|
9925
|
+
areaHref = _ref2.areaHref,
|
|
9926
|
+
_ref2$updateDocTitle = _ref2.updateDocTitle,
|
|
9927
|
+
updateDocTitle = _ref2$updateDocTitle === void 0 ? true : _ref2$updateDocTitle,
|
|
9928
|
+
_ref2$hideAreaInDocTi = _ref2.hideAreaInDocTitle,
|
|
9929
|
+
hideAreaInDocTitle = _ref2$hideAreaInDocTi === void 0 ? false : _ref2$hideAreaInDocTi,
|
|
9930
|
+
_ref2$areaTitleBottom = _ref2.areaTitleBottom,
|
|
9931
|
+
areaTitleBottom = _ref2$areaTitleBottom === void 0 ? false : _ref2$areaTitleBottom,
|
|
9932
|
+
_ref2$iconColor = _ref2.iconColor,
|
|
9933
|
+
iconColor = _ref2$iconColor === void 0 ? 'dimmed' : _ref2$iconColor;
|
|
9830
9934
|
useTitle(title, hideAreaInDocTitle ? undefined : areaTitle || '', undefined, updateDocTitle);
|
|
9831
|
-
return React__default.createElement(Container$
|
|
9832
|
-
|
|
9833
|
-
|
|
9834
|
-
size: 24,
|
|
9835
|
-
color: 'dimmed'
|
|
9935
|
+
return React__default.createElement(Container$D, null, icon ? React__default.createElement(IconContainer$1, null, React__default.createElement(Icon, Object.assign({
|
|
9936
|
+
size: ICON_SIZE,
|
|
9937
|
+
color: iconColor
|
|
9836
9938
|
}, {
|
|
9837
9939
|
icon: icon
|
|
9838
|
-
}))) : null
|
|
9940
|
+
}))) : null, React__default.createElement(TitlesWrapper, {
|
|
9941
|
+
areaTitleBottom: areaTitleBottom
|
|
9942
|
+
}, areaTitle && areaHref ? React__default.createElement(AreaLinkTitle, {
|
|
9943
|
+
to: areaHref
|
|
9944
|
+
}, areaTitle) : areaTitle && React__default.createElement(AreaTitle, null, areaTitle), React__default.createElement(Title$3, null, title)));
|
|
9839
9945
|
};
|
|
9840
9946
|
|
|
9841
|
-
var _templateObject
|
|
9842
|
-
var Container$
|
|
9947
|
+
var _templateObject$$, _templateObject2$T;
|
|
9948
|
+
var Container$E = styled__default.p(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9843
9949
|
var theme = _ref.theme;
|
|
9844
|
-
return styled.css(_templateObject2$
|
|
9950
|
+
return styled.css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.introduction);
|
|
9845
9951
|
});
|
|
9846
9952
|
|
|
9847
9953
|
var IntroductionText = function IntroductionText(_ref2) {
|
|
9848
9954
|
var children = _ref2.children;
|
|
9849
|
-
return React__default.createElement(Container$
|
|
9955
|
+
return React__default.createElement(Container$E, null, children);
|
|
9850
9956
|
};
|
|
9851
9957
|
|
|
9852
|
-
var
|
|
9853
|
-
var Container$D = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose([""])));
|
|
9958
|
+
var _excluded$B = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
|
|
9854
9959
|
|
|
9855
|
-
var
|
|
9856
|
-
|
|
9857
|
-
|
|
9858
|
-
|
|
9859
|
-
|
|
9860
|
-
|
|
9861
|
-
|
|
9862
|
-
|
|
9863
|
-
|
|
9864
|
-
|
|
9960
|
+
var _templateObject$10, _templateObject2$U, _templateObject3$M, _templateObject4$G, _templateObject5$C, _templateObject6$v, _templateObject7$u;
|
|
9961
|
+
var TextContainer$2 = styled__default.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
9962
|
+
var StyledLink = styled__default(reactRouterDom.Link)(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n"])));
|
|
9963
|
+
var TagWrapper = styled__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n\n ", ";\n\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 8px;\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
|
|
9964
|
+
var size = _ref.size;
|
|
9965
|
+
return size;
|
|
9966
|
+
}, function (_ref2) {
|
|
9967
|
+
var noBorder = _ref2.noBorder;
|
|
9968
|
+
return !noBorder && styled.css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n border: solid 1px var(--grey-8);\n border-radius: 3px;\n "])));
|
|
9969
|
+
}, function (_ref3) {
|
|
9970
|
+
var tagSize = _ref3.tagSize;
|
|
9971
|
+
return tagSize === 'compact' && styled.css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n padding: 2px 6px;\n gap: 4px;\n "])));
|
|
9972
|
+
}, function (_ref4) {
|
|
9973
|
+
var tagSize = _ref4.tagSize;
|
|
9974
|
+
return tagSize === 'default' && styled.css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n padding: 3px 8px;\n "])));
|
|
9975
|
+
}, IconWrapper, function (_ref5) {
|
|
9976
|
+
var hoverColor = _ref5.hoverColor,
|
|
9977
|
+
enableHover = _ref5.enableHover;
|
|
9978
|
+
return enableHover && styled.css(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--", ");\n color: var(--", ");\n ", " {\n [stroke]{\n stroke: var(--", ");\n }\n }\n }\n "])), hoverColor, hoverColor, IconWrapper, hoverColor);
|
|
9979
|
+
});
|
|
9980
|
+
|
|
9981
|
+
var Tag = function Tag(_ref6) {
|
|
9982
|
+
var _ref6$icon = _ref6.icon,
|
|
9983
|
+
icon = _ref6$icon === void 0 ? '' : _ref6$icon,
|
|
9984
|
+
_ref6$size = _ref6.size,
|
|
9985
|
+
size = _ref6$size === void 0 ? 12 : _ref6$size,
|
|
9986
|
+
_ref6$weight = _ref6.weight,
|
|
9987
|
+
weight = _ref6$weight === void 0 ? 'regular' : _ref6$weight,
|
|
9988
|
+
_ref6$label = _ref6.label,
|
|
9989
|
+
label = _ref6$label === void 0 ? '' : _ref6$label,
|
|
9990
|
+
linkTo = _ref6.linkTo,
|
|
9991
|
+
_ref6$noBorder = _ref6.noBorder,
|
|
9992
|
+
noBorder = _ref6$noBorder === void 0 ? false : _ref6$noBorder,
|
|
9993
|
+
tagSize = _ref6.tagSize,
|
|
9994
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded$B);
|
|
9995
|
+
|
|
9996
|
+
var iconTagSize = React.useMemo(function () {
|
|
9997
|
+
return tagSize === 'compact' ? 8 : 10;
|
|
9998
|
+
}, [tagSize]);
|
|
9999
|
+
var textTagSize = React.useMemo(function () {
|
|
10000
|
+
return tagSize === 'compact' ? 12 : 14;
|
|
10001
|
+
}, [tagSize]);
|
|
10002
|
+
|
|
10003
|
+
var renderTag = function renderTag() {
|
|
10004
|
+
return React__default.createElement(TagWrapper, {
|
|
10005
|
+
hoverColor: 'primary',
|
|
10006
|
+
enableHover: linkTo ? true : false,
|
|
10007
|
+
size: tagSize ? textTagSize : size,
|
|
10008
|
+
tagSize: tagSize,
|
|
10009
|
+
noBorder: noBorder
|
|
10010
|
+
}, icon && React__default.createElement(Icon, Object.assign({
|
|
10011
|
+
icon: icon,
|
|
10012
|
+
size: tagSize ? iconTagSize : size,
|
|
10013
|
+
weight: weight
|
|
10014
|
+
}, props)), React__default.createElement(TextContainer$2, null, label));
|
|
10015
|
+
};
|
|
10016
|
+
|
|
10017
|
+
return linkTo ? React__default.createElement(StyledLink, {
|
|
10018
|
+
to: linkTo
|
|
10019
|
+
}, renderTag()) : renderTag();
|
|
10020
|
+
};
|
|
10021
|
+
|
|
10022
|
+
var _templateObject$11, _templateObject2$V, _templateObject3$N, _templateObject4$H, _templateObject5$D;
|
|
10023
|
+
var Container$F = styled__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
|
|
10024
|
+
var LeftPanel = styled__default.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n"])));
|
|
10025
|
+
var RightPanel = styled__default.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
|
|
10026
|
+
var iconLeftPanel = _ref.iconLeftPanel;
|
|
10027
|
+
return iconLeftPanel && styled.css(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
|
|
10028
|
+
}, deviceMediaQuery.large);
|
|
10029
|
+
var TagListWrapper = styled__default.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: flex-start;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 5px;\n margin-top: 29px;\n"])));
|
|
10030
|
+
|
|
10031
|
+
var PageHeader = function PageHeader(_ref2) {
|
|
10032
|
+
var title = _ref2.title,
|
|
10033
|
+
icon = _ref2.icon,
|
|
10034
|
+
_ref2$iconColor = _ref2.iconColor,
|
|
10035
|
+
iconColor = _ref2$iconColor === void 0 ? 'primary-9' : _ref2$iconColor,
|
|
10036
|
+
introductionText = _ref2.introductionText,
|
|
10037
|
+
areaHref = _ref2.areaHref,
|
|
10038
|
+
areaTitle = _ref2.areaTitle,
|
|
10039
|
+
_ref2$updateDocTitle = _ref2.updateDocTitle,
|
|
10040
|
+
updateDocTitle = _ref2$updateDocTitle === void 0 ? true : _ref2$updateDocTitle,
|
|
10041
|
+
hideAreaInDocTitle = _ref2.hideAreaInDocTitle,
|
|
10042
|
+
tagList = _ref2.tagList,
|
|
10043
|
+
areaTitleBottom = _ref2.areaTitleBottom,
|
|
10044
|
+
rightContent = _ref2.rightContent;
|
|
10045
|
+
return React__default.createElement(Container$F, null, React__default.createElement(LeftPanel, null, React__default.createElement(PageTitle, Object.assign({
|
|
10046
|
+
iconColor: iconColor
|
|
10047
|
+
}, {
|
|
9865
10048
|
title: title,
|
|
9866
10049
|
icon: icon,
|
|
9867
10050
|
areaHref: areaHref,
|
|
9868
10051
|
areaTitle: areaTitle,
|
|
9869
10052
|
updateDocTitle: updateDocTitle,
|
|
9870
|
-
hideAreaInDocTitle: hideAreaInDocTitle
|
|
9871
|
-
|
|
10053
|
+
hideAreaInDocTitle: hideAreaInDocTitle,
|
|
10054
|
+
areaTitleBottom: areaTitleBottom
|
|
10055
|
+
})), !tagList ? null : React__default.createElement(TagListWrapper, null, tagList.map(function (_ref3) {
|
|
10056
|
+
var icon = _ref3.icon,
|
|
10057
|
+
label = _ref3.label,
|
|
10058
|
+
linkTo = _ref3.linkTo;
|
|
10059
|
+
return React__default.createElement(Tag, Object.assign({
|
|
10060
|
+
key: "tag-",
|
|
10061
|
+
icon: icon || '',
|
|
10062
|
+
noBorder: true,
|
|
10063
|
+
tagSize: 'compact'
|
|
10064
|
+
}, {
|
|
10065
|
+
label: label,
|
|
10066
|
+
linkTo: linkTo
|
|
10067
|
+
}));
|
|
10068
|
+
})), introductionText ? React__default.createElement(IntroductionText, null, introductionText) : null), rightContent ? React__default.createElement(RightPanel, {
|
|
10069
|
+
iconLeftPanel: !!icon
|
|
10070
|
+
}, rightContent) : null);
|
|
9872
10071
|
};
|
|
9873
10072
|
|
|
9874
|
-
var _templateObject$
|
|
9875
|
-
var Container$
|
|
10073
|
+
var _templateObject$12;
|
|
10074
|
+
var Container$G = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9876
10075
|
|
|
9877
10076
|
var MultilineContent = function MultilineContent(_ref) {
|
|
9878
10077
|
var contentArray = _ref.contentArray;
|
|
9879
|
-
return React__default.createElement(Container$
|
|
10078
|
+
return React__default.createElement(Container$G, null, contentArray.map(function (element, index) {
|
|
9880
10079
|
return React__default.createElement("div", {
|
|
9881
10080
|
key: "element-" + index
|
|
9882
10081
|
}, element);
|
|
9883
10082
|
}));
|
|
9884
10083
|
};
|
|
9885
10084
|
|
|
9886
|
-
var _templateObject$
|
|
9887
|
-
var Container$
|
|
10085
|
+
var _templateObject$13, _templateObject2$W, _templateObject3$O, _templateObject4$I, _templateObject5$E, _templateObject6$w, _templateObject7$v;
|
|
10086
|
+
var Container$H = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n background: grey;\n border-radius: 3px;\n overflow: hidden;\n width: 55px;\n height: auto;\n opacity: 0.65;\n margin-right: 10px;\n\n &::after {\n content: '';\n display: block;\n padding-bottom: 75%;\n ", "\n }\n\n ", "\n\n &:hover {\n cursor: pointer;\n\n ", "\n }\n\n"])), function (_ref) {
|
|
9888
10087
|
var aspect = _ref.aspect;
|
|
9889
|
-
return aspect === '16:9' && styled.css(_templateObject2$
|
|
10088
|
+
return aspect === '16:9' && styled.css(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
|
|
9890
10089
|
}, function (_ref2) {
|
|
9891
10090
|
var theme = _ref2.theme;
|
|
9892
|
-
return theme && styled.css(_templateObject3$
|
|
10091
|
+
return theme && styled.css(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
|
|
9893
10092
|
}, function (_ref3) {
|
|
9894
10093
|
var theme = _ref3.theme,
|
|
9895
10094
|
hoverZoom = _ref3.hoverZoom;
|
|
9896
|
-
return theme && hoverZoom && styled.css(_templateObject4$
|
|
10095
|
+
return theme && hoverZoom && styled.css(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n transform: scale(1.5);\n opacity: 1;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut);
|
|
9897
10096
|
});
|
|
9898
|
-
var ImageWrapper = styled__default.img(_templateObject5$
|
|
9899
|
-
var NoImageWrapper = styled__default.div(_templateObject6$
|
|
9900
|
-
var PlayableDrop = styled__default.div(_templateObject7$
|
|
10097
|
+
var ImageWrapper = styled__default.img(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n"])));
|
|
10098
|
+
var NoImageWrapper = styled__default.div(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 41px;\n width: 55px;\n object-fit: cover;\n display: block;\n"])));
|
|
10099
|
+
var PlayableDrop = styled__default.div(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--black-a1);\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n display: flex;\n svg {\n padding-left: 2px;\n path {\n stroke: var(--white-1);\n }\n }\n };\n"])), IconWrapper);
|
|
9901
10100
|
|
|
9902
10101
|
var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
9903
10102
|
var _ref4$hoverZoom = _ref4.hoverZoom,
|
|
@@ -9910,7 +10109,8 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
|
9910
10109
|
retryImageLoad = _ref4$retryImageLoad === void 0 ? false : _ref4$retryImageLoad,
|
|
9911
10110
|
_ref4$retryLimit = _ref4.retryLimit,
|
|
9912
10111
|
retryLimit = _ref4$retryLimit === void 0 ? 5 : _ref4$retryLimit,
|
|
9913
|
-
closeText = _ref4.closeText
|
|
10112
|
+
closeText = _ref4.closeText,
|
|
10113
|
+
onClickThumbnail = _ref4.onClickThumbnail;
|
|
9914
10114
|
|
|
9915
10115
|
var _useState = React.useState(true),
|
|
9916
10116
|
showImage = _useState[0],
|
|
@@ -9999,12 +10199,12 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
|
9999
10199
|
}
|
|
10000
10200
|
});
|
|
10001
10201
|
}, [image]);
|
|
10002
|
-
return React__default.createElement(Container$
|
|
10202
|
+
return React__default.createElement(Container$H, Object.assign({}, {
|
|
10003
10203
|
hoverZoom: hoverZoom,
|
|
10004
10204
|
mediaUrl: mediaUrl
|
|
10005
10205
|
}, {
|
|
10006
10206
|
aspect: '16:9',
|
|
10007
|
-
onClick: handleModal
|
|
10207
|
+
onClick: onClickThumbnail || handleModal
|
|
10008
10208
|
}), showImage ? React__default.createElement(ImageWrapper, {
|
|
10009
10209
|
ref: imgRef,
|
|
10010
10210
|
src: imgSrc,
|
|
@@ -10017,42 +10217,42 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
|
10017
10217
|
})));
|
|
10018
10218
|
};
|
|
10019
10219
|
|
|
10020
|
-
var _templateObject
|
|
10021
|
-
var Container$
|
|
10220
|
+
var _templateObject$14, _templateObject2$X;
|
|
10221
|
+
var Container$I = styled__default.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n height: 42px;\n width: 4px;\n border-radius: 3px;\n display: block;\n\n ", "\n\n"])), function (_ref) {
|
|
10022
10222
|
var status = _ref.status,
|
|
10023
10223
|
colors = _ref.theme.colors;
|
|
10024
|
-
return styled.css(_templateObject2$
|
|
10224
|
+
return styled.css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n background: ", ";\n content:'", "';\n "])), colors.status[status], status);
|
|
10025
10225
|
});
|
|
10026
10226
|
|
|
10027
10227
|
var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
10028
10228
|
var _ref2$status = _ref2.status,
|
|
10029
10229
|
status = _ref2$status === void 0 ? 'neutral' : _ref2$status;
|
|
10030
|
-
return React__default.createElement(Container$
|
|
10230
|
+
return React__default.createElement(Container$I, {
|
|
10031
10231
|
status: status
|
|
10032
10232
|
});
|
|
10033
10233
|
};
|
|
10034
10234
|
|
|
10035
|
-
var _templateObject$
|
|
10036
|
-
var CopyToClipboard = styled__default.button(_templateObject$
|
|
10235
|
+
var _templateObject$15, _templateObject2$Y, _templateObject3$P, _templateObject4$J, _templateObject5$F, _templateObject6$x, _templateObject7$w, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$b;
|
|
10236
|
+
var CopyToClipboard = styled__default.button(_templateObject$15 || (_templateObject$15 = _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) {
|
|
10037
10237
|
var theme = _ref.theme;
|
|
10038
|
-
return theme && styled.css(_templateObject2$
|
|
10238
|
+
return theme && styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
10039
10239
|
});
|
|
10040
|
-
var CellContainer = styled__default.div(_templateObject3$
|
|
10240
|
+
var CellContainer = styled__default.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: 50px;\n vertical-align: middle;\n position: relative;\n line-height: 30px;\n font-family: ", ";\n\n &:hover ", "{\n opacity: 0.5;\n }\n\n &, a {\n ", "\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n ", ";\n\n ", "\n"])), function (p) {
|
|
10041
10241
|
return p.theme.fontFamily.data;
|
|
10042
10242
|
}, CopyToClipboard, function (_ref2) {
|
|
10043
10243
|
var theme = _ref2.theme,
|
|
10044
10244
|
cellStyle = _ref2.cellStyle,
|
|
10045
10245
|
alignment = _ref2.alignment;
|
|
10046
|
-
return cellStyle === 'firstColumn' ? styled.css(_templateObject4$
|
|
10246
|
+
return cellStyle === 'firstColumn' ? styled.css(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : styled.css(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
|
|
10047
10247
|
}, function (_ref3) {
|
|
10048
10248
|
var hasCopyButton = _ref3.hasCopyButton;
|
|
10049
|
-
return hasCopyButton && styled.css(_templateObject6$
|
|
10249
|
+
return hasCopyButton && styled.css(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
|
|
10050
10250
|
}, function (_ref4) {
|
|
10051
10251
|
var styles = _ref4.theme.styles,
|
|
10052
10252
|
hideDivider = _ref4.hideDivider;
|
|
10053
|
-
return !hideDivider && styled.css(_templateObject7$
|
|
10253
|
+
return !hideDivider && styled.css(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0px;\n position: absolute;\n }\n "])), styles.tables.rows.divider);
|
|
10054
10254
|
});
|
|
10055
|
-
var UnitText = styled__default.span(_templateObject8$
|
|
10255
|
+
var UnitText = styled__default.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
|
|
10056
10256
|
var theme = _ref5.theme;
|
|
10057
10257
|
return styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
10058
10258
|
});
|
|
@@ -10104,14 +10304,14 @@ var TypeTableCell = function TypeTableCell(_ref7) {
|
|
|
10104
10304
|
})) : null);
|
|
10105
10305
|
};
|
|
10106
10306
|
|
|
10107
|
-
var _templateObject$
|
|
10108
|
-
var RowContainer = styled__default.div(_templateObject$
|
|
10307
|
+
var _templateObject$16, _templateObject2$Z;
|
|
10308
|
+
var RowContainer = styled__default.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n display: table-row;\n ", ";\n"])), function (_ref) {
|
|
10109
10309
|
var isEmpty = _ref.isEmpty;
|
|
10110
|
-
return isEmpty && styled.css(_templateObject2$
|
|
10310
|
+
return isEmpty && styled.css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n visibility: hidden;\n "])));
|
|
10111
10311
|
});
|
|
10112
10312
|
|
|
10113
10313
|
var TypeTableRow = function TypeTableRow(_ref2) {
|
|
10114
|
-
var _rowData$header, _rowData$header2, _rowData$header3, _rowData$header4, _rowData$header5;
|
|
10314
|
+
var _rowData$header, _rowData$header2, _rowData$header3, _rowData$header4, _rowData$header5, _rowData$header6;
|
|
10115
10315
|
|
|
10116
10316
|
var _ref2$selectable = _ref2.selectable,
|
|
10117
10317
|
selectable = _ref2$selectable === void 0 ? false : _ref2$selectable,
|
|
@@ -10146,11 +10346,12 @@ var TypeTableRow = function TypeTableRow(_ref2) {
|
|
|
10146
10346
|
image: (_rowData$header2 = rowData.header) === null || _rowData$header2 === void 0 ? void 0 : _rowData$header2.image,
|
|
10147
10347
|
mediaUrl: (_rowData$header3 = rowData.header) === null || _rowData$header3 === void 0 ? void 0 : _rowData$header3.mediaUrl,
|
|
10148
10348
|
mediaType: (_rowData$header4 = rowData.header) === null || _rowData$header4 === void 0 ? void 0 : _rowData$header4.mediaType,
|
|
10149
|
-
closeText: closeText
|
|
10349
|
+
closeText: closeText,
|
|
10350
|
+
onClickThumbnail: (_rowData$header5 = rowData.header) === null || _rowData$header5 === void 0 ? void 0 : _rowData$header5.onClickThumbnail
|
|
10150
10351
|
})) : null, hasTypeIcon ? React__default.createElement(TypeTableCell, {
|
|
10151
10352
|
hideDivider: true
|
|
10152
10353
|
}, React__default.createElement(Icon, {
|
|
10153
|
-
icon: ((_rowData$
|
|
10354
|
+
icon: ((_rowData$header6 = rowData.header) === null || _rowData$header6 === void 0 ? void 0 : _rowData$header6.icon) || '',
|
|
10154
10355
|
color: 'dimmed',
|
|
10155
10356
|
weight: 'regular',
|
|
10156
10357
|
size: 16
|
|
@@ -10181,17 +10382,17 @@ var TypeTableRow = function TypeTableRow(_ref2) {
|
|
|
10181
10382
|
}));
|
|
10182
10383
|
};
|
|
10183
10384
|
|
|
10184
|
-
var _templateObject$
|
|
10185
|
-
var HeaderTitle = styled__default.div(_templateObject$
|
|
10385
|
+
var _templateObject$17, _templateObject2$_, _templateObject3$Q, _templateObject4$K;
|
|
10386
|
+
var HeaderTitle = styled__default.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n display: inline-flex;\n justify-content: center;\n align-content: center;\n position: relative;\n padding: 0 2px;\n user-select: none;\n z-index: 99;\n\n ", " {\n position: absolute;\n top: 0px;\n left: -15px;\n display: none;\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n padding: 3px 1px;\n\n ", "\n }\n\n ", "\n\n ", "\n"])), IconWrapper, function (_ref) {
|
|
10186
10387
|
var ascending = _ref.ascending;
|
|
10187
|
-
return ascending && styled.css(_templateObject2$
|
|
10388
|
+
return ascending && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n transform: rotate(180deg);\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n top: 0;\n "])));
|
|
10188
10389
|
}, function (_ref2) {
|
|
10189
10390
|
var isSortActive = _ref2.isSortActive;
|
|
10190
|
-
return isSortActive && styled.css(_templateObject3$
|
|
10391
|
+
return isSortActive && styled.css(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
|
|
10191
10392
|
}, function (_ref3) {
|
|
10192
10393
|
var styles = _ref3.theme.styles,
|
|
10193
10394
|
sortable = _ref3.sortable;
|
|
10194
|
-
return sortable && styled.css(_templateObject4$
|
|
10395
|
+
return sortable && styled.css(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n &:hover {\n cursor: pointer;\n ", ";\n\n ", " {\n ", ";\n display: inline-flex;\n }\n }\n "])), styles.tables.header.sortable["default"], styles.tables.header.sortable.hover, IconWrapper, styles.tables.header.sortable.hover);
|
|
10195
10396
|
});
|
|
10196
10397
|
|
|
10197
10398
|
var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
@@ -10221,28 +10422,28 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
10221
10422
|
}), header);
|
|
10222
10423
|
};
|
|
10223
10424
|
|
|
10224
|
-
var _templateObject$
|
|
10225
|
-
var HeaderRow = styled__default.div(_templateObject$
|
|
10226
|
-
var HeaderItem = styled__default.div(_templateObject2
|
|
10425
|
+
var _templateObject$18, _templateObject2$$, _templateObject3$R, _templateObject4$L, _templateObject5$G, _templateObject6$y, _templateObject7$x, _templateObject8$q, _templateObject9$l, _templateObject10$i, _templateObject11$c, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4, _templateObject16$4, _templateObject17$4;
|
|
10426
|
+
var HeaderRow = styled__default.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
10427
|
+
var HeaderItem = styled__default.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
|
|
10227
10428
|
return p.theme.fontFamily.ui;
|
|
10228
10429
|
}, function (_ref) {
|
|
10229
10430
|
var hasCopyButton = _ref.hasCopyButton;
|
|
10230
|
-
return hasCopyButton && styled.css(_templateObject3$
|
|
10431
|
+
return hasCopyButton && styled.css(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
|
|
10231
10432
|
}, function (_ref2) {
|
|
10232
10433
|
var theme = _ref2.theme,
|
|
10233
10434
|
alignment = _ref2.alignment,
|
|
10234
10435
|
headerStyle = _ref2.headerStyle;
|
|
10235
|
-
return alignment ? styled.css(_templateObject4$
|
|
10436
|
+
return alignment ? styled.css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : styled.css(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
|
|
10236
10437
|
}, function (p) {
|
|
10237
|
-
return p.fixedWidth && styled.css(_templateObject6$
|
|
10438
|
+
return p.fixedWidth && styled.css(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
|
|
10238
10439
|
}, function (_ref3) {
|
|
10239
10440
|
var minWidth = _ref3.minWidth;
|
|
10240
|
-
return minWidth && styled.css(_templateObject7$
|
|
10441
|
+
return minWidth && styled.css(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
|
|
10241
10442
|
}, function (_ref4) {
|
|
10242
10443
|
var styles = _ref4.theme.styles,
|
|
10243
10444
|
headerStyle = _ref4.headerStyle,
|
|
10244
10445
|
isSortActive = _ref4.isSortActive;
|
|
10245
|
-
return headerStyle === 'subHeader' && styled.css(_templateObject8$
|
|
10446
|
+
return headerStyle === 'subHeader' && styled.css(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
|
|
10246
10447
|
});
|
|
10247
10448
|
var TitleItems = styled__default.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
|
|
10248
10449
|
var alignment = _ref5.alignment;
|
|
@@ -10390,15 +10591,15 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
|
|
|
10390
10591
|
}));
|
|
10391
10592
|
};
|
|
10392
10593
|
|
|
10393
|
-
var _templateObject$
|
|
10394
|
-
var Container$
|
|
10395
|
-
var TableContainer = styled__default.div(_templateObject2$
|
|
10396
|
-
var LoadingText$1 = styled__default.div(_templateObject3$
|
|
10397
|
-
var LoadingBox$1 = styled__default.div(_templateObject4$
|
|
10594
|
+
var _templateObject$19, _templateObject2$10, _templateObject3$S, _templateObject4$M, _templateObject5$H;
|
|
10595
|
+
var Container$J = styled__default.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose([""])));
|
|
10596
|
+
var TableContainer = styled__default.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
|
|
10597
|
+
var LoadingText$1 = styled__default.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
|
|
10598
|
+
var LoadingBox$1 = styled__default.div(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n background-color: ", ";\n height: calc(100% - 50px);\n opacity: 85%;\n width: 100%;\n min-height: 100px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n\n ", " {\n margin-top: 10px;\n }\n"])), function (_ref) {
|
|
10398
10599
|
var theme = _ref.theme;
|
|
10399
10600
|
return theme.colors["pureBase"];
|
|
10400
10601
|
}, LoadingText$1);
|
|
10401
|
-
var EmptyTableBox = styled__default.div(_templateObject5$
|
|
10602
|
+
var EmptyTableBox = styled__default.div(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n z-index: 99;\n padding: 20px;\n width: 100%;\n min-height: 100px;\n text-align: center;\n h3 {\n font-weight: 500;\n color: var(--grey-11);\n }\n color: var(--grey-10);\n"])));
|
|
10402
10603
|
|
|
10403
10604
|
var isChecked = function isChecked(_ref2) {
|
|
10404
10605
|
var _ref2$_checked = _ref2._checked,
|
|
@@ -10452,7 +10653,7 @@ var TypeTable = function TypeTable(_ref3) {
|
|
|
10452
10653
|
|
|
10453
10654
|
setAllChecked(areAllChecked);
|
|
10454
10655
|
}, [isEmptyTable, rows]);
|
|
10455
|
-
return React__default.createElement(Container$
|
|
10656
|
+
return React__default.createElement(Container$J, null, React__default.createElement(TableContainer, null, React__default.createElement(TypeTableHeader, Object.assign({}, {
|
|
10456
10657
|
selectable: selectable,
|
|
10457
10658
|
hasStatus: hasStatus,
|
|
10458
10659
|
hasThumbnail: hasThumbnail,
|
|
@@ -10486,19 +10687,19 @@ var TypeTable = function TypeTable(_ref3) {
|
|
|
10486
10687
|
})));
|
|
10487
10688
|
};
|
|
10488
10689
|
|
|
10489
|
-
var _excluded$
|
|
10690
|
+
var _excluded$C = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
10490
10691
|
|
|
10491
|
-
var _templateObject$
|
|
10492
|
-
var Container$
|
|
10692
|
+
var _templateObject$1a, _templateObject2$11, _templateObject3$T, _templateObject4$N, _templateObject5$I, _templateObject6$z, _templateObject7$y, _templateObject8$r, _templateObject9$m, _templateObject10$j;
|
|
10693
|
+
var Container$K = styled__default.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
10493
10694
|
var theme = _ref.theme;
|
|
10494
|
-
return styled.css(_templateObject2$
|
|
10495
|
-
});
|
|
10496
|
-
var StyledButton$5 = styled__default(Button)(_templateObject3$
|
|
10497
|
-
var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$
|
|
10498
|
-
var StyledLink = styled__default(reactRouterDom.Link)(_templateObject5$
|
|
10499
|
-
var EditContainer = styled__default.div(_templateObject6$
|
|
10500
|
-
var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$
|
|
10501
|
-
var TextContainer$
|
|
10695
|
+
return styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
10696
|
+
});
|
|
10697
|
+
var StyledButton$5 = styled__default(Button)(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10698
|
+
var StyledLoadingButton = styled__default(ButtonWithLoading)(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10699
|
+
var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
|
|
10700
|
+
var EditContainer = styled__default.div(_templateObject6$z || (_templateObject6$z = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: var(--grey-2);\n z-index: 99;\n position: absolute;\n bottom: -15px;\n left: -11px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n margin:0;\n span {\n margin: 0;\n }\n }\n ", " {\n margin-left: 5px;\n }\n ", " {\n margin-left: 5px;\n }\n"])), StyledLabel, StyledButton$5, StyledLoadingButton);
|
|
10701
|
+
var StyledIconButton$1 = styled__default(IconButton$2)(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose([""])));
|
|
10702
|
+
var TextContainer$3 = styled__default.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
|
|
10502
10703
|
var alignment = _ref2.alignment;
|
|
10503
10704
|
return alignment === 'center' && styled.css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
10504
10705
|
}, function (_ref3) {
|
|
@@ -10518,7 +10719,7 @@ var EditCell = function EditCell(_ref4) {
|
|
|
10518
10719
|
_ref4$toLink = _ref4.toLink,
|
|
10519
10720
|
toLink = _ref4$toLink === void 0 ? '' : _ref4$toLink,
|
|
10520
10721
|
saveCallback = _ref4.saveCallback,
|
|
10521
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
10722
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$C);
|
|
10522
10723
|
|
|
10523
10724
|
var _useState = React.useState(false),
|
|
10524
10725
|
isEditMode = _useState[0],
|
|
@@ -10584,7 +10785,7 @@ var EditCell = function EditCell(_ref4) {
|
|
|
10584
10785
|
};
|
|
10585
10786
|
|
|
10586
10787
|
useClickOutside(editContainerRef, onClickOutsideEdit);
|
|
10587
|
-
return React__default.createElement(Container$
|
|
10788
|
+
return React__default.createElement(Container$K, null, isEditMode ? React__default.createElement(EditContainer, {
|
|
10588
10789
|
ref: editContainerRef
|
|
10589
10790
|
}, React__default.createElement(SmallInput, Object.assign({}, props, {
|
|
10590
10791
|
autoFocus: true,
|
|
@@ -10611,9 +10812,9 @@ var EditCell = function EditCell(_ref4) {
|
|
|
10611
10812
|
},
|
|
10612
10813
|
design: 'secondary',
|
|
10613
10814
|
size: 'small'
|
|
10614
|
-
}, "Cancel")) : React__default.createElement(TextContainer$
|
|
10815
|
+
}, "Cancel")) : React__default.createElement(TextContainer$3, {
|
|
10615
10816
|
alignment: alignment
|
|
10616
|
-
}, toLink ? React__default.createElement(StyledLink, {
|
|
10817
|
+
}, toLink ? React__default.createElement(StyledLink$1, {
|
|
10617
10818
|
to: toLink
|
|
10618
10819
|
}, updatedValue) : updatedValue, React__default.createElement(StyledIconButton$1, {
|
|
10619
10820
|
icon: 'Edit',
|
|
@@ -10956,16 +11157,16 @@ var PTZProvider = function PTZProvider(_ref) {
|
|
|
10956
11157
|
}, children);
|
|
10957
11158
|
};
|
|
10958
11159
|
|
|
10959
|
-
var _templateObject$
|
|
10960
|
-
var Active = styled__default.g(_templateObject$
|
|
11160
|
+
var _templateObject$1b, _templateObject2$12, _templateObject3$U, _templateObject4$O, _templateObject5$J;
|
|
11161
|
+
var Active = styled__default.g(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
10961
11162
|
var active = _ref.active;
|
|
10962
|
-
return active && styled.css(_templateObject2
|
|
11163
|
+
return active && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10963
11164
|
});
|
|
10964
|
-
var Hover = styled__default.g(_templateObject3$
|
|
11165
|
+
var Hover = styled__default.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
10965
11166
|
var hover = _ref2.hover;
|
|
10966
|
-
return hover && styled.css(_templateObject4$
|
|
11167
|
+
return hover && styled.css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10967
11168
|
});
|
|
10968
|
-
var Container$
|
|
11169
|
+
var Container$L = styled__default.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
|
|
10969
11170
|
|
|
10970
11171
|
var Up = function Up() {
|
|
10971
11172
|
var _useState = React.useState(false),
|
|
@@ -10994,7 +11195,7 @@ var Up = function Up() {
|
|
|
10994
11195
|
var hoverEnd = React.useCallback(function () {
|
|
10995
11196
|
setHover(false);
|
|
10996
11197
|
}, []);
|
|
10997
|
-
return React__default.createElement(Container$
|
|
11198
|
+
return React__default.createElement(Container$L, {
|
|
10998
11199
|
onMouseEnter: hoverStart,
|
|
10999
11200
|
onMouseLeave: hoverEnd,
|
|
11000
11201
|
onMouseDown: activeStart,
|
|
@@ -11038,17 +11239,17 @@ var Up = function Up() {
|
|
|
11038
11239
|
})));
|
|
11039
11240
|
};
|
|
11040
11241
|
|
|
11041
|
-
var _templateObject$
|
|
11042
|
-
var Active$1 = styled__default.g(_templateObject$
|
|
11242
|
+
var _templateObject$1c, _templateObject2$13, _templateObject3$V, _templateObject4$P, _templateObject5$K, _templateObject6$A;
|
|
11243
|
+
var Active$1 = styled__default.g(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11043
11244
|
var active = _ref.active;
|
|
11044
|
-
return active && styled.css(_templateObject2$
|
|
11245
|
+
return active && styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11045
11246
|
});
|
|
11046
|
-
var Hover$1 = styled__default.g(_templateObject3$
|
|
11247
|
+
var Hover$1 = styled__default.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11047
11248
|
var hover = _ref2.hover;
|
|
11048
|
-
return hover && styled.css(_templateObject4$
|
|
11249
|
+
return hover && styled.css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11049
11250
|
});
|
|
11050
|
-
var Container$
|
|
11051
|
-
var Arrow = styled__default.g(_templateObject6$
|
|
11251
|
+
var Container$M = styled__default.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
|
|
11252
|
+
var Arrow$1 = styled__default.g(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n\n"])));
|
|
11052
11253
|
|
|
11053
11254
|
var Down = function Down() {
|
|
11054
11255
|
var _useState = React.useState(false),
|
|
@@ -11077,7 +11278,7 @@ var Down = function Down() {
|
|
|
11077
11278
|
var hoverEnd = React.useCallback(function () {
|
|
11078
11279
|
setHover(false);
|
|
11079
11280
|
}, []);
|
|
11080
|
-
return React__default.createElement(Container$
|
|
11281
|
+
return React__default.createElement(Container$M, {
|
|
11081
11282
|
onMouseEnter: hoverStart,
|
|
11082
11283
|
onMouseLeave: hoverEnd,
|
|
11083
11284
|
onMouseDown: activeStart,
|
|
@@ -11107,7 +11308,7 @@ var Down = function Down() {
|
|
|
11107
11308
|
d: 'M0.519854724,96.4994462 L0.189392188,96.1665222 L0.518392188,95.841 L0.50309316,91.4994743 C49.8427789,91.3340713 90.0585638,52.0879566 91.6405416,3.0448693 L91.6766244,1.55574655 L91.6867621,0.290388759 L96.0313922,0.326 L96.3559144,-4.8316906e-13 L96.6866017,0.330446162 L96.6764639,1.59580395 C95.8260725,54.0454751 53.1308151,96.3230768 0.519854724,96.4994462 Z',
|
|
11108
11309
|
id: 'PTZ-Active-Down-Highlight',
|
|
11109
11310
|
stroke: 'url(#linearGradient-15)'
|
|
11110
|
-
})), React__default.createElement(Arrow, {
|
|
11311
|
+
})), React__default.createElement(Arrow$1, {
|
|
11111
11312
|
id: 'PTZ-Arrows-Icons',
|
|
11112
11313
|
transform: 'rotate(-45) translate(-138.146447, -137.146447) translate(68.000000, 68.000000) translate(71.000000, 125.000000) rotate(180.000000) translate(-71.000000, -125.000000)',
|
|
11113
11314
|
fillRule: 'nonzero'
|
|
@@ -11122,16 +11323,16 @@ var Down = function Down() {
|
|
|
11122
11323
|
})));
|
|
11123
11324
|
};
|
|
11124
11325
|
|
|
11125
|
-
var _templateObject$
|
|
11126
|
-
var Active$2 = styled__default.g(_templateObject$
|
|
11326
|
+
var _templateObject$1d, _templateObject2$14, _templateObject3$W, _templateObject4$Q, _templateObject5$L;
|
|
11327
|
+
var Active$2 = styled__default.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11127
11328
|
var active = _ref.active;
|
|
11128
|
-
return active && styled.css(_templateObject2$
|
|
11329
|
+
return active && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11129
11330
|
});
|
|
11130
|
-
var Hover$2 = styled__default.g(_templateObject3$
|
|
11331
|
+
var Hover$2 = styled__default.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11131
11332
|
var hover = _ref2.hover;
|
|
11132
|
-
return hover && styled.css(_templateObject4$
|
|
11333
|
+
return hover && styled.css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11133
11334
|
});
|
|
11134
|
-
var Container$
|
|
11335
|
+
var Container$N = styled__default.g(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n"])));
|
|
11135
11336
|
|
|
11136
11337
|
var Left = function Left() {
|
|
11137
11338
|
var _useState = React.useState(false),
|
|
@@ -11160,7 +11361,7 @@ var Left = function Left() {
|
|
|
11160
11361
|
var hoverEnd = React.useCallback(function () {
|
|
11161
11362
|
setHover(false);
|
|
11162
11363
|
}, []);
|
|
11163
|
-
return React__default.createElement(Container$
|
|
11364
|
+
return React__default.createElement(Container$N, {
|
|
11164
11365
|
onMouseEnter: hoverStart,
|
|
11165
11366
|
onMouseLeave: hoverEnd,
|
|
11166
11367
|
onMouseDown: activeStart,
|
|
@@ -11206,16 +11407,16 @@ var Left = function Left() {
|
|
|
11206
11407
|
})));
|
|
11207
11408
|
};
|
|
11208
11409
|
|
|
11209
|
-
var _templateObject$
|
|
11210
|
-
var Active$3 = styled__default.g(_templateObject$
|
|
11410
|
+
var _templateObject$1e, _templateObject2$15, _templateObject3$X, _templateObject4$R, _templateObject5$M;
|
|
11411
|
+
var Active$3 = styled__default.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11211
11412
|
var active = _ref.active;
|
|
11212
|
-
return active && styled.css(_templateObject2$
|
|
11413
|
+
return active && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11213
11414
|
});
|
|
11214
|
-
var Hover$3 = styled__default.g(_templateObject3$
|
|
11415
|
+
var Hover$3 = styled__default.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11215
11416
|
var hover = _ref2.hover;
|
|
11216
|
-
return hover && styled.css(_templateObject4$
|
|
11417
|
+
return hover && styled.css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11217
11418
|
});
|
|
11218
|
-
var Container$
|
|
11419
|
+
var Container$O = styled__default.g(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n"])));
|
|
11219
11420
|
|
|
11220
11421
|
var Right = function Right() {
|
|
11221
11422
|
var _useState = React.useState(false),
|
|
@@ -11244,7 +11445,7 @@ var Right = function Right() {
|
|
|
11244
11445
|
var hoverEnd = React.useCallback(function () {
|
|
11245
11446
|
setHover(false);
|
|
11246
11447
|
}, []);
|
|
11247
|
-
return React__default.createElement(Container$
|
|
11448
|
+
return React__default.createElement(Container$O, {
|
|
11248
11449
|
onMouseEnter: hoverStart,
|
|
11249
11450
|
onMouseLeave: hoverEnd,
|
|
11250
11451
|
onMouseDown: activeStart,
|
|
@@ -12103,16 +12304,16 @@ var ZoomBase = function ZoomBase(_ref) {
|
|
|
12103
12304
|
})), children));
|
|
12104
12305
|
};
|
|
12105
12306
|
|
|
12106
|
-
var _templateObject$
|
|
12107
|
-
var Active$4 = styled__default.g(_templateObject$
|
|
12307
|
+
var _templateObject$1f, _templateObject2$16, _templateObject3$Y, _templateObject4$S, _templateObject5$N;
|
|
12308
|
+
var Active$4 = styled__default.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
12108
12309
|
var active = _ref.active;
|
|
12109
|
-
return active && styled.css(_templateObject2$
|
|
12310
|
+
return active && styled.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12110
12311
|
});
|
|
12111
|
-
var Hover$4 = styled__default.g(_templateObject3$
|
|
12312
|
+
var Hover$4 = styled__default.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
12112
12313
|
var hover = _ref2.hover;
|
|
12113
|
-
return hover && styled.css(_templateObject4$
|
|
12314
|
+
return hover && styled.css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12114
12315
|
});
|
|
12115
|
-
var Container$
|
|
12316
|
+
var Container$P = styled__default.g(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n"])));
|
|
12116
12317
|
|
|
12117
12318
|
var Up$1 = function Up() {
|
|
12118
12319
|
var _useState = React.useState(false),
|
|
@@ -12141,7 +12342,7 @@ var Up$1 = function Up() {
|
|
|
12141
12342
|
var hoverEnd = React.useCallback(function () {
|
|
12142
12343
|
setHover(false);
|
|
12143
12344
|
}, []);
|
|
12144
|
-
return React__default.createElement(Container$
|
|
12345
|
+
return React__default.createElement(Container$P, {
|
|
12145
12346
|
onMouseEnter: hoverStart,
|
|
12146
12347
|
onMouseLeave: hoverEnd,
|
|
12147
12348
|
onMouseDown: activeStart,
|
|
@@ -12180,16 +12381,16 @@ var Up$1 = function Up() {
|
|
|
12180
12381
|
})));
|
|
12181
12382
|
};
|
|
12182
12383
|
|
|
12183
|
-
var _templateObject$
|
|
12184
|
-
var Active$5 = styled__default.g(_templateObject$
|
|
12384
|
+
var _templateObject$1g, _templateObject2$17, _templateObject3$Z, _templateObject4$T, _templateObject5$O;
|
|
12385
|
+
var Active$5 = styled__default.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
12185
12386
|
var active = _ref.active;
|
|
12186
|
-
return active && styled.css(_templateObject2$
|
|
12387
|
+
return active && styled.css(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12187
12388
|
});
|
|
12188
|
-
var Hover$5 = styled__default.g(_templateObject3$
|
|
12389
|
+
var Hover$5 = styled__default.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
12189
12390
|
var hover = _ref2.hover;
|
|
12190
|
-
return hover && styled.css(_templateObject4$
|
|
12391
|
+
return hover && styled.css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12191
12392
|
});
|
|
12192
|
-
var Container$
|
|
12393
|
+
var Container$Q = styled__default.g(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n"])));
|
|
12193
12394
|
|
|
12194
12395
|
var Up$2 = function Up() {
|
|
12195
12396
|
var _useState = React.useState(false),
|
|
@@ -12218,7 +12419,7 @@ var Up$2 = function Up() {
|
|
|
12218
12419
|
var hoverEnd = React.useCallback(function () {
|
|
12219
12420
|
setHover(false);
|
|
12220
12421
|
}, []);
|
|
12221
|
-
return React__default.createElement(Container$
|
|
12422
|
+
return React__default.createElement(Container$Q, {
|
|
12222
12423
|
onMouseEnter: hoverStart,
|
|
12223
12424
|
onMouseLeave: hoverEnd,
|
|
12224
12425
|
onMouseDown: activeStart,
|
|
@@ -12253,8 +12454,8 @@ var Up$2 = function Up() {
|
|
|
12253
12454
|
})));
|
|
12254
12455
|
};
|
|
12255
12456
|
|
|
12256
|
-
var _templateObject$
|
|
12257
|
-
var Container$
|
|
12457
|
+
var _templateObject$1h;
|
|
12458
|
+
var Container$R = styled__default.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n flex-direction: column;\n"])));
|
|
12258
12459
|
|
|
12259
12460
|
var Controls = function Controls(_ref) {
|
|
12260
12461
|
var _ref$debug = _ref.debug,
|
|
@@ -12263,26 +12464,26 @@ var Controls = function Controls(_ref) {
|
|
|
12263
12464
|
var _useContext = React.useContext(PTZContext),
|
|
12264
12465
|
state = _useContext.state;
|
|
12265
12466
|
|
|
12266
|
-
return React__default.createElement(Container$
|
|
12467
|
+
return React__default.createElement(Container$R, null, React__default.createElement(PTZControl, null, React__default.createElement(Up, null), React__default.createElement(Down, null), React__default.createElement(Left, null), React__default.createElement(Right, null)), React__default.createElement(ZoomBase, null, React__default.createElement(Up$2, null), React__default.createElement(Up$1, null)), debug && React__default.createElement("pre", null, JSON.stringify(state, null, 2)));
|
|
12267
12468
|
};
|
|
12268
12469
|
|
|
12269
|
-
var _excluded$
|
|
12470
|
+
var _excluded$D = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
|
|
12270
12471
|
|
|
12271
|
-
var _templateObject$
|
|
12272
|
-
var Container$
|
|
12273
|
-
var EmptyWithIcon = styled__default.div(_templateObject2$
|
|
12472
|
+
var _templateObject$1i, _templateObject2$18, _templateObject3$_, _templateObject4$U, _templateObject5$P, _templateObject6$B, _templateObject7$z, _templateObject8$s;
|
|
12473
|
+
var Container$S = styled__default.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 170px;\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n position: relative;\n\n ", " {\n height: 100%;\n width: 100%;\n text-align: center;\n img, video {\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n"])), MediaBoxWrapper);
|
|
12474
|
+
var EmptyWithIcon = styled__default.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n ", "\n;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
12274
12475
|
var hasPadding = _ref.hasPadding;
|
|
12275
12476
|
return hasPadding && "\n padding-bottom: 43px\n ";
|
|
12276
12477
|
}, IconWrapper);
|
|
12277
|
-
var Notice = styled__default.div(_templateObject3$
|
|
12478
|
+
var Notice = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: var(--inverse);\n opacity: 0.85;\n height: 46px;\n width: 300px;\n position: absolute;\n bottom: 0px;\n left: 0px;\n display: flex;\n align-items: center;\n padding: 10px;\n"])), function (_ref2) {
|
|
12278
12479
|
var color = _ref2.color;
|
|
12279
12480
|
return color && "var(--" + color + ")";
|
|
12280
12481
|
});
|
|
12281
|
-
var NoticeMessage = styled__default.div(_templateObject4$
|
|
12282
|
-
var NoticeTitle = styled__default.div(_templateObject5$
|
|
12283
|
-
var NoticeIcon = styled__default.div(_templateObject6$
|
|
12284
|
-
var NoticeTextGroup = styled__default.div(_templateObject7$
|
|
12285
|
-
var StatusLine = styled__default.div(_templateObject8$
|
|
12482
|
+
var NoticeMessage = styled__default.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
|
|
12483
|
+
var NoticeTitle = styled__default.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
|
|
12484
|
+
var NoticeIcon = styled__default.div(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n height: 20px;\n width: 20px;\n margin-left: 2px;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), IconWrapper);
|
|
12485
|
+
var NoticeTextGroup = styled__default.div(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
|
|
12486
|
+
var StatusLine = styled__default.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
|
|
12286
12487
|
var color = _ref3.color;
|
|
12287
12488
|
return color && "var(--" + color + ")";
|
|
12288
12489
|
});
|
|
@@ -12298,9 +12499,9 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
12298
12499
|
noticeMessage = _ref4.noticeMessage,
|
|
12299
12500
|
noticeTitle = _ref4.noticeTitle,
|
|
12300
12501
|
emptyIcon = _ref4.emptyIcon,
|
|
12301
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
12502
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$D);
|
|
12302
12503
|
|
|
12303
|
-
return React__default.createElement(Container$
|
|
12504
|
+
return React__default.createElement(Container$S, null, isEmptyWithIcon ? React__default.createElement(EmptyWithIcon, {
|
|
12304
12505
|
hasPadding: hasNotice
|
|
12305
12506
|
}, React__default.createElement(Icon, {
|
|
12306
12507
|
icon: emptyIcon ? emptyIcon : 'PasswordHide',
|
|
@@ -12317,26 +12518,26 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
12317
12518
|
}));
|
|
12318
12519
|
};
|
|
12319
12520
|
|
|
12320
|
-
var _templateObject$
|
|
12321
|
-
var Container$
|
|
12322
|
-
var LeftData = styled__default.div(_templateObject2$
|
|
12521
|
+
var _templateObject$1j, _templateObject2$19, _templateObject3$$, _templateObject4$V, _templateObject5$Q, _templateObject6$C, _templateObject7$A, _templateObject8$t, _templateObject9$n;
|
|
12522
|
+
var Container$T = styled__default.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
|
|
12523
|
+
var LeftData = styled__default.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
12323
12524
|
var hasRightData = _ref.hasRightData;
|
|
12324
|
-
return hasRightData && styled.css(_templateObject3
|
|
12525
|
+
return hasRightData && styled.css(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
|
|
12325
12526
|
}, IconWrapper);
|
|
12326
|
-
var RightData = styled__default.div(_templateObject4$
|
|
12327
|
-
var DeviceDataGroup = styled__default.div(_templateObject5$
|
|
12328
|
-
var LeftTitle = styled__default.div(_templateObject6$
|
|
12527
|
+
var RightData = styled__default.div(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
12528
|
+
var DeviceDataGroup = styled__default.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
|
|
12529
|
+
var LeftTitle = styled__default.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
|
|
12329
12530
|
var hasRightData = _ref2.hasRightData;
|
|
12330
12531
|
return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
|
|
12331
12532
|
}, function (_ref3) {
|
|
12332
12533
|
var hasMarginBottom = _ref3.hasMarginBottom;
|
|
12333
12534
|
return hasMarginBottom && "margin-bottom: 1px;";
|
|
12334
12535
|
});
|
|
12335
|
-
var LeftSubTitle = styled__default.div(_templateObject7$
|
|
12536
|
+
var LeftSubTitle = styled__default.div(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), fontFamily.data, EllipsisStyles, function (_ref4) {
|
|
12336
12537
|
var hasRightData = _ref4.hasRightData;
|
|
12337
12538
|
return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
|
|
12338
12539
|
});
|
|
12339
|
-
var Title$5 = styled__default.div(_templateObject8$
|
|
12540
|
+
var Title$5 = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-a10);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref5) {
|
|
12340
12541
|
var hasMarginBottom = _ref5.hasMarginBottom;
|
|
12341
12542
|
return hasMarginBottom && "margin-bottom: 6px;";
|
|
12342
12543
|
});
|
|
@@ -12354,7 +12555,7 @@ var PanelMetaData = function PanelMetaData(_ref6) {
|
|
|
12354
12555
|
var hasRightData = React.useMemo(function () {
|
|
12355
12556
|
return !!rightTitle || !!rightSubTitle;
|
|
12356
12557
|
}, [rightSubTitle, rightTitle]);
|
|
12357
|
-
return React__default.createElement(Container$
|
|
12558
|
+
return React__default.createElement(Container$T, null, React__default.createElement(LeftData, Object.assign({}, {
|
|
12358
12559
|
hasRightData: hasRightData
|
|
12359
12560
|
}), !hideIcon && React__default.createElement(Icon, {
|
|
12360
12561
|
icon: deviceIcon,
|
|
@@ -12371,10 +12572,10 @@ var PanelMetaData = function PanelMetaData(_ref6) {
|
|
|
12371
12572
|
}, rightTitle), rightSubTitle && React__default.createElement(SubTitle, null, rightSubTitle)));
|
|
12372
12573
|
};
|
|
12373
12574
|
|
|
12374
|
-
var _excluded$
|
|
12575
|
+
var _excluded$E = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
|
|
12375
12576
|
|
|
12376
|
-
var _templateObject$
|
|
12377
|
-
var CameraPanelWrapper = styled__default.div(_templateObject$
|
|
12577
|
+
var _templateObject$1k;
|
|
12578
|
+
var CameraPanelWrapper = styled__default.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n width: 300px;\n height: 230px;\n border-radius: 3px;\n box-shadow: 0 2px 10px 0 var(--grey-a5);\n background-color: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n }\n\n ", ";\n"])), function (_ref) {
|
|
12378
12579
|
var hasOnClick = _ref.hasOnClick;
|
|
12379
12580
|
return hasOnClick && "\n cursor: pointer;\n ";
|
|
12380
12581
|
});
|
|
@@ -12384,7 +12585,7 @@ var NewComponent = function NewComponent(_ref2) {
|
|
|
12384
12585
|
panelMetaData = _ref2.panelMetaData,
|
|
12385
12586
|
customBottom = _ref2.customBottom,
|
|
12386
12587
|
panelOnClick = _ref2.panelOnClick,
|
|
12387
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12588
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
|
|
12388
12589
|
|
|
12389
12590
|
return React__default.createElement(CameraPanelWrapper, Object.assign({
|
|
12390
12591
|
onClick: panelOnClick,
|
|
@@ -12392,8 +12593,8 @@ var NewComponent = function NewComponent(_ref2) {
|
|
|
12392
12593
|
}, props), React__default.createElement(MediaStream, Object.assign({}, streamProps)), customBottom ? customBottom : panelMetaData && React__default.createElement(PanelMetaData, Object.assign({}, panelMetaData)));
|
|
12393
12594
|
};
|
|
12394
12595
|
|
|
12395
|
-
var _templateObject$
|
|
12396
|
-
var CameraGrid = styled__default.div(_templateObject$
|
|
12596
|
+
var _templateObject$1l;
|
|
12597
|
+
var CameraGrid = styled__default.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(auto-fill, 300px);\n gap: 20px 20px;\n"])));
|
|
12397
12598
|
|
|
12398
12599
|
var CameraPanels = function CameraPanels(_ref) {
|
|
12399
12600
|
var panels = _ref.panels;
|
|
@@ -12404,71 +12605,25 @@ var CameraPanels = function CameraPanels(_ref) {
|
|
|
12404
12605
|
}));
|
|
12405
12606
|
};
|
|
12406
12607
|
|
|
12407
|
-
var
|
|
12408
|
-
|
|
12409
|
-
var _templateObject$1h, _templateObject2$17, _templateObject3$_, _templateObject4$U;
|
|
12410
|
-
var TextContainer$3 = styled__default.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
12411
|
-
var StyledLink$1 = styled__default(reactRouterDom.Link)(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n"])));
|
|
12412
|
-
var TagWrapper = styled__default.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n border: solid 1px var(--grey-8);\n display: inline-flex;\n align-items: center;\n border-radius: 3px;\n height: 26px;\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n margin-right: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
|
|
12413
|
-
var theme = _ref.theme;
|
|
12414
|
-
return theme.fontFamily.ui;
|
|
12415
|
-
}, function (_ref2) {
|
|
12416
|
-
var size = _ref2.size;
|
|
12417
|
-
return size;
|
|
12418
|
-
}, IconWrapper, function (_ref3) {
|
|
12419
|
-
var hoverColor = _ref3.hoverColor,
|
|
12420
|
-
enableHover = _ref3.enableHover;
|
|
12421
|
-
return enableHover && styled.css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--", ");\n color: var(--", ");\n ", " {\n [stroke]{\n stroke: var(--", ");\n }\n }\n }\n "])), hoverColor, hoverColor, IconWrapper, hoverColor);
|
|
12422
|
-
});
|
|
12423
|
-
|
|
12424
|
-
var Tag = function Tag(_ref4) {
|
|
12425
|
-
var _ref4$icon = _ref4.icon,
|
|
12426
|
-
icon = _ref4$icon === void 0 ? '' : _ref4$icon,
|
|
12427
|
-
_ref4$size = _ref4.size,
|
|
12428
|
-
size = _ref4$size === void 0 ? 14 : _ref4$size,
|
|
12429
|
-
_ref4$weight = _ref4.weight,
|
|
12430
|
-
weight = _ref4$weight === void 0 ? 'regular' : _ref4$weight,
|
|
12431
|
-
_ref4$label = _ref4.label,
|
|
12432
|
-
label = _ref4$label === void 0 ? '' : _ref4$label,
|
|
12433
|
-
linkTo = _ref4.linkTo,
|
|
12434
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$D);
|
|
12435
|
-
|
|
12436
|
-
var renderTag = function renderTag() {
|
|
12437
|
-
return React__default.createElement(TagWrapper, {
|
|
12438
|
-
hoverColor: 'primary',
|
|
12439
|
-
enableHover: linkTo ? true : false,
|
|
12440
|
-
size: size
|
|
12441
|
-
}, icon && React__default.createElement(Icon, Object.assign({
|
|
12442
|
-
icon: icon,
|
|
12443
|
-
size: size,
|
|
12444
|
-
weight: weight
|
|
12445
|
-
}, props)), React__default.createElement(TextContainer$3, null, label));
|
|
12446
|
-
};
|
|
12447
|
-
|
|
12448
|
-
return linkTo ? React__default.createElement(StyledLink$1, {
|
|
12449
|
-
to: linkTo
|
|
12450
|
-
}, renderTag()) : renderTag();
|
|
12451
|
-
};
|
|
12452
|
-
|
|
12453
|
-
var _templateObject$1i;
|
|
12454
|
-
var TagListWrapper = styled__default.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-right: 10px;\n margin-bottom: 6px;\n flex-shrink: 0;\n }\n flex-wrap: wrap;\n"])), TagWrapper);
|
|
12608
|
+
var _templateObject$1m;
|
|
12609
|
+
var TagListWrapper$1 = styled__default.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-right: 10px;\n margin-bottom: 6px;\n flex-shrink: 0;\n }\n flex-wrap: wrap;\n"])), TagWrapper);
|
|
12455
12610
|
|
|
12456
12611
|
var TagList = function TagList(_ref) {
|
|
12457
12612
|
var tagsConfig = _ref.tagsConfig;
|
|
12458
|
-
return React__default.createElement(TagListWrapper, null, tagsConfig.map(function (tagProps, index) {
|
|
12613
|
+
return React__default.createElement(TagListWrapper$1, null, tagsConfig.map(function (tagProps, index) {
|
|
12459
12614
|
return React__default.createElement(Tag, Object.assign({
|
|
12460
12615
|
key: "tag-" + index
|
|
12461
12616
|
}, tagProps));
|
|
12462
12617
|
}));
|
|
12463
12618
|
};
|
|
12464
12619
|
|
|
12465
|
-
var _excluded$
|
|
12620
|
+
var _excluded$F = ["onDebouncedChange", "defaultValue"];
|
|
12466
12621
|
|
|
12467
12622
|
var DebouncedSearcher = function DebouncedSearcher(_ref) {
|
|
12468
12623
|
var _ref$onDebouncedChang = _ref.onDebouncedChange,
|
|
12469
12624
|
onDebouncedChange = _ref$onDebouncedChang === void 0 ? function () {} : _ref$onDebouncedChang,
|
|
12470
12625
|
defaultValue = _ref.defaultValue,
|
|
12471
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12626
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
|
|
12472
12627
|
|
|
12473
12628
|
var _useState = React.useState(defaultValue || ''),
|
|
12474
12629
|
typedValue = _useState[0],
|
|
@@ -12496,18 +12651,18 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
|
|
|
12496
12651
|
}));
|
|
12497
12652
|
};
|
|
12498
12653
|
|
|
12499
|
-
var _excluded$
|
|
12654
|
+
var _excluded$G = ["design", "size", "position", "text"];
|
|
12500
12655
|
|
|
12501
|
-
var _templateObject$
|
|
12502
|
-
var Container$
|
|
12503
|
-
var Title$6 = styled__default.div(_templateObject2$
|
|
12656
|
+
var _templateObject$1n, _templateObject2$1a, _templateObject3$10, _templateObject4$W, _templateObject5$R, _templateObject6$D;
|
|
12657
|
+
var Container$U = styled__default.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose([""])));
|
|
12658
|
+
var Title$6 = styled__default.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
|
|
12504
12659
|
var theme = _ref.theme;
|
|
12505
12660
|
return theme.fontFamily.ui;
|
|
12506
12661
|
});
|
|
12507
|
-
var ButtonsWrapper$1 = styled__default.div(_templateObject3
|
|
12508
|
-
var LeftButtons = styled__default.div(_templateObject4$
|
|
12509
|
-
var RightButtons = styled__default.div(_templateObject5$
|
|
12510
|
-
var SelectedResults = styled__default.div(_templateObject6$
|
|
12662
|
+
var ButtonsWrapper$1 = styled__default.div(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12663
|
+
var LeftButtons = styled__default.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
|
|
12664
|
+
var RightButtons = styled__default.div(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
12665
|
+
var SelectedResults = styled__default.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-top: 29px;\n min-height: 19px;\n color: var(--grey-10);\n font-size: 12px;\n"])), function (_ref2) {
|
|
12511
12666
|
var theme = _ref2.theme;
|
|
12512
12667
|
return theme.fontFamily.ui;
|
|
12513
12668
|
});
|
|
@@ -12532,12 +12687,12 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12532
12687
|
totalAvailable = _ref3$totalAvailable === void 0 ? 0 : _ref3$totalAvailable,
|
|
12533
12688
|
_ref3$finishCallback = _ref3.finishCallback,
|
|
12534
12689
|
finishCallback = _ref3$finishCallback === void 0 ? function () {} : _ref3$finishCallback;
|
|
12535
|
-
return React__default.createElement(Container$
|
|
12690
|
+
return React__default.createElement(Container$U, null, React__default.createElement(Title$6, null, title), React__default.createElement(ButtonsWrapper$1, null, React__default.createElement(LeftButtons, null, actionButtons.map(function (_ref4, index) {
|
|
12536
12691
|
var design = _ref4.design,
|
|
12537
12692
|
size = _ref4.size,
|
|
12538
12693
|
position = _ref4.position,
|
|
12539
12694
|
text = _ref4.text,
|
|
12540
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
12695
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$G);
|
|
12541
12696
|
|
|
12542
12697
|
return React__default.createElement(ButtonWithIcon, Object.assign({
|
|
12543
12698
|
key: index,
|
|
@@ -12551,28 +12706,28 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12551
12706
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
12552
12707
|
};
|
|
12553
12708
|
|
|
12554
|
-
var _templateObject$
|
|
12709
|
+
var _templateObject$1o, _templateObject2$1b, _templateObject3$11, _templateObject4$X, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$u, _templateObject9$o, _templateObject10$k;
|
|
12555
12710
|
var WIDTH_PER_NUMBER = 12;
|
|
12556
|
-
var PaginationContainer = styled__default.div(_templateObject$
|
|
12557
|
-
var PageLabel = styled__default.label(_templateObject2$
|
|
12558
|
-
var StaticPageCount = styled__default.div(_templateObject3$
|
|
12559
|
-
var StyledInput$3 = styled__default.input(_templateObject4$
|
|
12711
|
+
var PaginationContainer = styled__default.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-top: 20px;\n padding-bottom: 20px;\n width: 100%;\n height: fit-content;\n margin-right: 10px;\n white-space: nowrap;\n gap: 0 8px;\n vertical-align: baseline;\n"])));
|
|
12712
|
+
var PageLabel = styled__default.label(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-weight: 500px;\n font-size: 14px;\n color: var(--grey-10);\n text-align: left;\n"])));
|
|
12713
|
+
var StaticPageCount = styled__default.div(_templateObject3$11 || (_templateObject3$11 = _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"])));
|
|
12714
|
+
var StyledInput$3 = styled__default.input(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n ", ";\n color: ", ";\n max-width: ", ";\n font-family: var(--font-data);\n height: 100%;\n box-sizing: border-box;\n outline: none;\n background: transparent;\n text-align: right;\n font-size: 14px;\n font-weight: 500;\n line-height: 25px;\n border: none;\n padding-right: ", "px;\n"])), removeAutoFillStyle, function (_ref) {
|
|
12560
12715
|
var textColor = _ref.textColor;
|
|
12561
12716
|
return textColor;
|
|
12562
12717
|
}, function (_ref2) {
|
|
12563
12718
|
var maxWidth = _ref2.maxWidth;
|
|
12564
12719
|
return maxWidth ? maxWidth : '40px';
|
|
12565
12720
|
}, WIDTH_PER_NUMBER / 2);
|
|
12566
|
-
var shakeAnimation = styled.keyframes(_templateObject5$
|
|
12567
|
-
var InputContainer$2 = styled__default.div(_templateObject6$
|
|
12721
|
+
var shakeAnimation = styled.keyframes(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n 0% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n 20%, 40%, 60%, 80% { transform: translateX(5px); }\n 100% { transform: translateX(0); }\n"])));
|
|
12722
|
+
var InputContainer$2 = styled__default.div(_templateObject6$E || (_templateObject6$E = _taggedTemplateLiteralLoose(["\n height: var(--input-height, 40px);\n animation: ", " 150ms 2 linear;\n flex-grow: 0;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: 0 8px;\n border-radius: 3px;\n box-shadow: 0 2px 1px 0 rgba(0, 102, 255, 0.04);\n ", ";\n"])), function (_ref3) {
|
|
12568
12723
|
var shouldShake = _ref3.shouldShake;
|
|
12569
12724
|
return shouldShake ? shakeAnimation : 'none';
|
|
12570
12725
|
}, function (_ref4) {
|
|
12571
12726
|
var borderColor = _ref4.borderColor;
|
|
12572
12727
|
return borderColor && "border: 1px solid " + borderColor;
|
|
12573
12728
|
});
|
|
12574
|
-
var GoButton = styled__default(Button)(_templateObject7$
|
|
12575
|
-
var ArrowWrapper = styled__default.div(_templateObject8$
|
|
12729
|
+
var GoButton = styled__default(Button)(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
|
|
12730
|
+
var ArrowWrapper = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
|
|
12576
12731
|
var ArrowButton = styled__default.button(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", ";\n width: 40px;\n height: 40px;\n padding: 12px;\n border-radius: 3px;\n box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);\n border: solid 1px var(--grey-9);\n background-color: var(grey-2);\n pointer-events: ", ";\n opacity: ", ";\n\n &:focus, &:hover {\n outline: 2px solid #838383;\n }\n"])), resetButtonStyles, function (_ref5) {
|
|
12577
12732
|
var active = _ref5.active;
|
|
12578
12733
|
return active ? 'auto' : 'none';
|
|
@@ -12811,18 +12966,18 @@ var Pagination = function Pagination(props) {
|
|
|
12811
12966
|
}))));
|
|
12812
12967
|
};
|
|
12813
12968
|
|
|
12814
|
-
var _templateObject$
|
|
12815
|
-
var Container$
|
|
12816
|
-
var Title$7 = styled__default.div(_templateObject2$
|
|
12969
|
+
var _templateObject$1p, _templateObject2$1c, _templateObject3$12, _templateObject4$Y, _templateObject5$T;
|
|
12970
|
+
var Container$V = styled__default.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
|
|
12971
|
+
var Title$7 = styled__default.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
12817
12972
|
var typography = _ref.theme.typography;
|
|
12818
12973
|
return typography.modal.title;
|
|
12819
12974
|
});
|
|
12820
|
-
var MessageBox$1 = styled__default.div(_templateObject3$
|
|
12975
|
+
var MessageBox$1 = styled__default.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
|
|
12821
12976
|
var typography = _ref2.theme.typography;
|
|
12822
12977
|
return typography.modal.basicContent;
|
|
12823
12978
|
});
|
|
12824
|
-
var StyledButton$6 = styled__default(Button)(_templateObject4$
|
|
12825
|
-
var ButtonsGroup$1 = styled__default.div(_templateObject5$
|
|
12979
|
+
var StyledButton$6 = styled__default(Button)(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
|
|
12980
|
+
var ButtonsGroup$1 = styled__default.div(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n text-align: right;\n"])));
|
|
12826
12981
|
|
|
12827
12982
|
var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
12828
12983
|
var _ref3$title = _ref3.title,
|
|
@@ -12855,7 +13010,7 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
|
12855
13010
|
setModalOpen(false);
|
|
12856
13011
|
};
|
|
12857
13012
|
|
|
12858
|
-
return React__default.createElement(Container$
|
|
13013
|
+
return React__default.createElement(Container$V, null, React__default.createElement(Title$7, null, title), React__default.createElement(MessageBox$1, null, message), React__default.createElement(ButtonsGroup$1, null, React__default.createElement(StyledButton$6, {
|
|
12859
13014
|
design: leftButtonDesign,
|
|
12860
13015
|
onClick: handlePrimaryBtn
|
|
12861
13016
|
}, leftButtonText), React__default.createElement(StyledButton$6, {
|
|
@@ -12864,19 +13019,19 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
|
12864
13019
|
}, rightButtonText)));
|
|
12865
13020
|
};
|
|
12866
13021
|
|
|
12867
|
-
var _templateObject$
|
|
12868
|
-
var Container$
|
|
12869
|
-
var LeftArea = styled__default.div(_templateObject2$
|
|
12870
|
-
var BackLinkIcon = styled__default.div(_templateObject3$
|
|
12871
|
-
var BackLink = styled__default(reactRouterDom.Link)(_templateObject4$
|
|
13022
|
+
var _templateObject$1q, _templateObject2$1d, _templateObject3$13, _templateObject4$Z, _templateObject5$U, _templateObject6$F, _templateObject7$C, _templateObject8$v, _templateObject9$p, _templateObject10$l, _templateObject11$d, _templateObject12$a;
|
|
13023
|
+
var Container$W = styled__default.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n margin-top: var(--utility-header-padding-top);\n padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n height: 48px;\n width: 100%;\n display: flex;\n"])));
|
|
13024
|
+
var LeftArea = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
|
|
13025
|
+
var BackLinkIcon = styled__default.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n flex: 1; \n > div {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
13026
|
+
var BackLink = styled__default(reactRouterDom.Link)(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n margin-left: ", ";\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n ", "\n"])), function (props) {
|
|
12872
13027
|
return props.$iconInGutter ? '-24px' : '0';
|
|
12873
13028
|
}, BackLinkIcon, BackLinkIcon, function (_ref) {
|
|
12874
13029
|
var $showDivider = _ref.$showDivider;
|
|
12875
|
-
return $showDivider && styled.css(_templateObject5$
|
|
13030
|
+
return $showDivider && styled.css(_templateObject5$U || (_templateObject5$U = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: inline-block;\n height: 12px;\n width: 1px;\n padding-left: 8px;\n border-right: 1px solid var(--grey-10);\n }\n "])));
|
|
12876
13031
|
});
|
|
12877
|
-
var ExtraActionIcon = styled__default.div(_templateObject6$
|
|
12878
|
-
var ExtraAction = styled__default.button(_templateObject7$
|
|
12879
|
-
var Breadcrumbs = styled__default.div(_templateObject8$
|
|
13032
|
+
var ExtraActionIcon = styled__default.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
|
|
13033
|
+
var ExtraAction = styled__default.button(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n cursor: pointer;\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n"])), ExtraActionIcon, ExtraActionIcon);
|
|
13034
|
+
var Breadcrumbs = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
12880
13035
|
var Breadcrumb = styled__default.div(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n"])));
|
|
12881
13036
|
var BreadcrumbIcon = styled__default.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
12882
13037
|
var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n transition: color 0.25s ease;\n &:hover {\n color: var(--grey-12);\n }\n"])));
|
|
@@ -12909,7 +13064,7 @@ var UtilityHeader = function UtilityHeader(_ref2) {
|
|
|
12909
13064
|
return setCopyActionText("Share");
|
|
12910
13065
|
}, 2000);
|
|
12911
13066
|
}, [shareLink, copyToClipboard]);
|
|
12912
|
-
return React__default.createElement(Container$
|
|
13067
|
+
return React__default.createElement(Container$W, null, React__default.createElement(LeftArea, null, backLink ? React__default.createElement(BackLink, Object.assign({
|
|
12913
13068
|
to: backLink,
|
|
12914
13069
|
"$showDivider": hasBreadcrumbs
|
|
12915
13070
|
}, {
|
|
@@ -12960,12 +13115,12 @@ var Tabs = function Tabs(_ref) {
|
|
|
12960
13115
|
}, children);
|
|
12961
13116
|
};
|
|
12962
13117
|
|
|
12963
|
-
var _templateObject$
|
|
12964
|
-
var Container$
|
|
12965
|
-
var HeaderArea = styled__default.div(_templateObject2$
|
|
12966
|
-
var TabArea = styled__default.div(_templateObject3$
|
|
12967
|
-
var TabAreaInner = styled__default.div(_templateObject4$
|
|
12968
|
-
var Content = styled__default.div(_templateObject5$
|
|
13118
|
+
var _templateObject$1r, _templateObject2$1e, _templateObject3$14, _templateObject4$_, _templateObject5$V;
|
|
13119
|
+
var Container$X = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
|
|
13120
|
+
var HeaderArea = styled__default.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n 24px\n var(--content-layout-padding-right)\n 32px\n var(--content-layout-padding-left);\n \n"])));
|
|
13121
|
+
var TabArea = styled__default.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-8);\n"])));
|
|
13122
|
+
var TabAreaInner = styled__default.div(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n flex: 1;\n width: 100%;\n padding: \n 0\n var(--content-layout-padding-right)\n 0\n var(--content-layout-padding-left);\n"])));
|
|
13123
|
+
var Content = styled__default.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n var(--content-layout-padding-top)\n var(--content-layout-padding-right)\n var(--content-layout-padding-bottom)\n var(--content-layout-padding-left);\n\n display: flex;\n flex: 1;\n flex-direction: column;\n"])));
|
|
12969
13124
|
|
|
12970
13125
|
var ContentLayout = function ContentLayout(_ref) {
|
|
12971
13126
|
var _ref$layout = _ref.layout,
|
|
@@ -12977,17 +13132,17 @@ var ContentLayout = function ContentLayout(_ref) {
|
|
|
12977
13132
|
TabsElementArea = HeaderContent.TabsElementArea,
|
|
12978
13133
|
UtilityHeaderOptions = HeaderContent.UtilityHeaderOptions;
|
|
12979
13134
|
var containerClass = 'content-layout-' + layout;
|
|
12980
|
-
return React__default.createElement(Container$
|
|
13135
|
+
return React__default.createElement(Container$X, {
|
|
12981
13136
|
className: containerClass
|
|
12982
13137
|
}, UtilityHeaderOptions ? React__default.createElement(UtilityHeader, Object.assign({}, UtilityHeaderOptions)) : null, PageHeaderArea ? React__default.createElement(HeaderArea, null, PageHeaderArea) : null, TabsElementArea ? React__default.createElement(Tabs, null, React__default.createElement(TabArea, null, React__default.createElement(TabAreaInner, null, TabsElementArea)), React__default.createElement(Content, null, children)) : React__default.createElement(Content, null, children));
|
|
12983
13138
|
};
|
|
12984
13139
|
|
|
12985
|
-
var _templateObject$
|
|
12986
|
-
var FullWidthContainer = styled__default.div(_templateObject$
|
|
13140
|
+
var _templateObject$1s, _templateObject2$1f;
|
|
13141
|
+
var FullWidthContainer = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
|
|
12987
13142
|
var $contentHeight = _ref.$contentHeight;
|
|
12988
13143
|
return $contentHeight + 'px';
|
|
12989
13144
|
});
|
|
12990
|
-
var FullWidthInner = styled__default.div(_templateObject2$
|
|
13145
|
+
var FullWidthInner = styled__default.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n input {width: 100%;}\n"])));
|
|
12991
13146
|
|
|
12992
13147
|
var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
|
|
12993
13148
|
var children = _ref2.children;
|
|
@@ -13009,74 +13164,521 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
|
|
|
13009
13164
|
}, children));
|
|
13010
13165
|
};
|
|
13011
13166
|
|
|
13012
|
-
var _templateObject$
|
|
13013
|
-
var
|
|
13014
|
-
var
|
|
13015
|
-
var
|
|
13016
|
-
|
|
13017
|
-
|
|
13167
|
+
var _templateObject$1t, _templateObject2$1g, _templateObject3$15, _templateObject4$$, _templateObject5$W, _templateObject6$G, _templateObject7$D, _templateObject8$w;
|
|
13168
|
+
var Inner$1 = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
13169
|
+
var Line = styled__default.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
|
|
13170
|
+
var IconContainer$2 = styled__default.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
|
|
13171
|
+
var IconDefault = styled__default.svg(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
|
|
13172
|
+
var $layout = _ref.$layout;
|
|
13173
|
+
return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
|
|
13018
13174
|
});
|
|
13019
|
-
var
|
|
13020
|
-
var
|
|
13021
|
-
|
|
13022
|
-
|
|
13175
|
+
var IconArrow = styled__default.svg(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n transform: rotate(0deg);\n ", ";\n"])), function (_ref2) {
|
|
13176
|
+
var $direction = _ref2.$direction;
|
|
13177
|
+
|
|
13178
|
+
switch ($direction) {
|
|
13179
|
+
case 'up':
|
|
13180
|
+
return 'transform: rotate(-90deg);';
|
|
13181
|
+
|
|
13182
|
+
case 'down':
|
|
13183
|
+
return 'transform: rotate(90deg);';
|
|
13184
|
+
|
|
13185
|
+
case 'left':
|
|
13186
|
+
return 'transform: rotate(180deg);';
|
|
13187
|
+
|
|
13188
|
+
case 'right':
|
|
13189
|
+
default:
|
|
13190
|
+
return 'transform: rotate(0deg);';
|
|
13191
|
+
}
|
|
13023
13192
|
});
|
|
13024
|
-
var
|
|
13025
|
-
var
|
|
13026
|
-
|
|
13027
|
-
|
|
13028
|
-
|
|
13029
|
-
|
|
13193
|
+
var Container$Y = styled__default.div(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (_ref3) {
|
|
13194
|
+
var $layout = _ref3.$layout;
|
|
13195
|
+
return $layout === 'horizontal' ? styled.css(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n width: 16px;\n flex-direction: column;\n ", "{\n flex-direction: column;\n }\n\n ", "{\n width: 1px;\n }\n\n "])), Inner$1, Line) : styled.css(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n height: 16px;\n flex-direction: row;\n ", "{\n flex-direction: row;\n }\n ", "{\n height: 1px;\n }\n "])), Inner$1, Line);
|
|
13196
|
+
});
|
|
13197
|
+
|
|
13198
|
+
var ResizeLine = function ResizeLine(_ref4) {
|
|
13199
|
+
var _ref4$state = _ref4.state,
|
|
13200
|
+
state = _ref4$state === void 0 ? 'default' : _ref4$state,
|
|
13201
|
+
_ref4$layout = _ref4.layout,
|
|
13202
|
+
layout = _ref4$layout === void 0 ? 'horizontal' : _ref4$layout,
|
|
13203
|
+
arrowDirection = _ref4.arrowDirection;
|
|
13204
|
+
return React__default.createElement(Container$Y, {
|
|
13205
|
+
"$layout": layout
|
|
13206
|
+
}, React__default.createElement(Inner$1, null, React__default.createElement(Line, null), React__default.createElement(IconContainer$2, null, state === 'default' ? React__default.createElement(IconDefault, {
|
|
13207
|
+
"$layout": layout,
|
|
13208
|
+
width: "20",
|
|
13209
|
+
height: "20",
|
|
13210
|
+
viewBox: "0 0 20 20",
|
|
13211
|
+
fill: "none",
|
|
13212
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
13213
|
+
}, React__default.createElement("path", {
|
|
13214
|
+
d: "M13 14.875V5.125",
|
|
13215
|
+
strokeLinecap: "round",
|
|
13216
|
+
strokeLinejoin: "round"
|
|
13217
|
+
}), React__default.createElement("path", {
|
|
13218
|
+
d: "M10 14.875V5.125",
|
|
13219
|
+
strokeLinecap: "round",
|
|
13220
|
+
strokeLinejoin: "round"
|
|
13221
|
+
}), React__default.createElement("path", {
|
|
13222
|
+
d: "M7 14.875L7 5.125",
|
|
13223
|
+
strokeLinecap: "round",
|
|
13224
|
+
strokeLinejoin: "round"
|
|
13225
|
+
})) : React__default.createElement(IconArrow, {
|
|
13226
|
+
"$direction": arrowDirection,
|
|
13227
|
+
width: "20",
|
|
13228
|
+
height: "20",
|
|
13229
|
+
viewBox: "0 0 20 20",
|
|
13230
|
+
fill: "none",
|
|
13231
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
13232
|
+
}, React__default.createElement("path", {
|
|
13233
|
+
d: "M7.25 4.375L12.61 9.735C12.6803 9.80525 12.7199 9.90058 12.7199 10C12.7199 10.0994 12.6803 10.1948 12.61 10.265L7.25 15.625",
|
|
13234
|
+
stroke: "#9BA1A6",
|
|
13235
|
+
strokeLinecap: "round",
|
|
13236
|
+
strokeLinejoin: "round"
|
|
13237
|
+
}))), React__default.createElement(Line, null)));
|
|
13238
|
+
};
|
|
13239
|
+
|
|
13240
|
+
var _templateObject$1u, _templateObject2$1h, _templateObject3$16, _templateObject4$10, _templateObject5$X, _templateObject6$H, _templateObject7$E, _templateObject8$x, _templateObject9$q, _templateObject10$m, _templateObject11$e, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
|
|
13241
|
+
var DebugData = styled__default.div(_templateObject$1u || (_templateObject$1u = _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"])));
|
|
13242
|
+
var MainArea = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
13243
|
+
var $layout = _ref.$layout,
|
|
13244
|
+
$minDimension = _ref.$minDimension;
|
|
13245
|
+
return $layout === 'vertical' ? styled.css(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
|
|
13246
|
+
});
|
|
13247
|
+
var SideAreaInner = styled__default.div(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n height: 100%;\n transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
|
|
13248
|
+
var SideArea = styled__default.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 0 0 ", "px;\n display: ", ";\n transition: \n min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n \n ", "\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref2) {
|
|
13249
|
+
var $defaultSize = _ref2.$defaultSize;
|
|
13250
|
+
return $defaultSize;
|
|
13251
|
+
}, function (_ref3) {
|
|
13252
|
+
var $collapseState = _ref3.$collapseState;
|
|
13253
|
+
return $collapseState === 'collapsed' ? 'none' : 'block';
|
|
13254
|
+
}, function (_ref4) {
|
|
13255
|
+
var $layout = _ref4.$layout,
|
|
13256
|
+
$maxDimension = _ref4.$maxDimension,
|
|
13257
|
+
$minDimension = _ref4.$minDimension;
|
|
13258
|
+
return $layout === 'vertical' ? styled.css(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-height: ", "px;\n }\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : '0', $maxDimension ? "max-height: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension) : styled.css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-width: ", "px;\n }\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : '0', $maxDimension ? "max-width: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension);
|
|
13259
|
+
}, function (_ref5) {
|
|
13260
|
+
var $layout = _ref5.$layout,
|
|
13261
|
+
$collapseState = _ref5.$collapseState,
|
|
13262
|
+
$minDimension = _ref5.$minDimension;
|
|
13263
|
+
return $collapseState === 'collapsing' ? styled.css(_templateObject9$q || (_templateObject9$q = _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;
|
|
13264
|
+
}, function (_ref6) {
|
|
13265
|
+
var $collapseState = _ref6.$collapseState;
|
|
13266
|
+
return $collapseState === 'collapsed' ? styled.css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
13267
|
+
}, function (_ref7) {
|
|
13268
|
+
var $layout = _ref7.$layout,
|
|
13269
|
+
$collapseState = _ref7.$collapseState,
|
|
13270
|
+
$minDimension = _ref7.$minDimension;
|
|
13271
|
+
return $collapseState === 'peeking' ? styled.css(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
13272
|
+
}, function (_ref8) {
|
|
13273
|
+
var $layout = _ref8.$layout,
|
|
13274
|
+
$collapseState = _ref8.$collapseState,
|
|
13275
|
+
$minDimension = _ref8.$minDimension;
|
|
13276
|
+
return $collapseState === 'opening' ? styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", "{\n min-width: ", "px;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
13277
|
+
});
|
|
13278
|
+
var DragContainer = styled__default.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n flex: 0 0 ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: col-resize;\n \n > div {\n transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n }\n\n &:hover > div {\n opacity: 1;\n }\n\n ", "\n\n"])), function (_ref9) {
|
|
13279
|
+
var $size = _ref9.$size;
|
|
13280
|
+
return $size;
|
|
13281
|
+
}, function (_ref10) {
|
|
13282
|
+
var $fauxHover = _ref10.$fauxHover;
|
|
13283
|
+
return $fauxHover === 'false' ? styled.css(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 0.6;\n }\n "]))) : styled.css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 1;\n }\n "])));
|
|
13284
|
+
});
|
|
13285
|
+
var Container$Z = styled__default.section(_templateObject16$5 || (_templateObject16$5 = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n display: flex;\n flex:1;\n flex-direction: row;\n overflow: hidden;\n\n transition: opacity 0.25s cubic-bezier(0.45, 0, 0.55, 1);\n opacity: 0;\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref11) {
|
|
13286
|
+
var $initialised = _ref11.$initialised;
|
|
13287
|
+
return $initialised === 'true' ? styled.css(_templateObject17$5 || (_templateObject17$5 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n "]))) : null;
|
|
13288
|
+
}, function (_ref12) {
|
|
13289
|
+
var $layout = _ref12.$layout;
|
|
13290
|
+
return $layout === 'vertical' ? styled.css(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n flex-direction: column;\n ", "{}\n ", "{ \n cursor: row-resize;\n }\n "])), MainArea, DragContainer) : null;
|
|
13291
|
+
}, function (_ref13) {
|
|
13292
|
+
var $reverse = _ref13.$reverse;
|
|
13293
|
+
return $reverse === 'true' ? styled.css(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n ", "{ order: 2; }\n ", "{ order: 1; }\n "])), MainArea, DragContainer) : null;
|
|
13294
|
+
});
|
|
13295
|
+
var SplitLayout = React.forwardRef(function (_ref14, controlRef) {
|
|
13296
|
+
var mainArea = _ref14.mainArea,
|
|
13297
|
+
sideArea = _ref14.sideArea,
|
|
13298
|
+
_ref14$layout = _ref14.layout,
|
|
13299
|
+
layout = _ref14$layout === void 0 ? 'horizontal' : _ref14$layout,
|
|
13300
|
+
reverse = _ref14.reverse,
|
|
13301
|
+
_ref14$dividerSize = _ref14.dividerSize,
|
|
13302
|
+
dividerSize = _ref14$dividerSize === void 0 ? 16 : _ref14$dividerSize,
|
|
13303
|
+
_ref14$persist = _ref14.persist,
|
|
13304
|
+
persist = _ref14$persist === void 0 ? false : _ref14$persist,
|
|
13305
|
+
_ref14$persistenceKey = _ref14.persistenceKey,
|
|
13306
|
+
persistenceKey = _ref14$persistenceKey === void 0 ? 'resizable_ui' : _ref14$persistenceKey,
|
|
13307
|
+
showDebug = _ref14.showDebug;
|
|
13308
|
+
var componentKey = 'resizable_layout_';
|
|
13309
|
+
var referenceKey = componentKey + persistenceKey;
|
|
13310
|
+
var closedBasis = 1;
|
|
13311
|
+
var hideTolerance = 50;
|
|
13312
|
+
var sideDefaultSize = sideArea.defaultSize || 350;
|
|
13313
|
+
var sideMinSize = sideArea.minSize || 0;
|
|
13314
|
+
var sideMaxSize = sideArea.maxSize;
|
|
13315
|
+
var mainMinSize = mainArea.minSize;
|
|
13316
|
+
|
|
13317
|
+
var _useState = React.useState(false),
|
|
13318
|
+
initialised = _useState[0],
|
|
13319
|
+
setInitialised = _useState[1];
|
|
13320
|
+
|
|
13321
|
+
var _useState2 = React.useState(),
|
|
13322
|
+
initialMousePos = _useState2[0],
|
|
13323
|
+
setInitialMousePos = _useState2[1];
|
|
13324
|
+
|
|
13325
|
+
var _useState3 = React.useState(),
|
|
13326
|
+
mousePosDiff = _useState3[0],
|
|
13327
|
+
setMousePosDiff = _useState3[1];
|
|
13328
|
+
|
|
13329
|
+
var _useState4 = React.useState(),
|
|
13330
|
+
resizing = _useState4[0],
|
|
13331
|
+
setResizing = _useState4[1];
|
|
13332
|
+
|
|
13333
|
+
var _useState5 = React.useState('open'),
|
|
13334
|
+
sideAreaState = _useState5[0],
|
|
13335
|
+
setSideAreaState = _useState5[1];
|
|
13336
|
+
|
|
13337
|
+
var _useState6 = React.useState(sideDefaultSize),
|
|
13338
|
+
sideAreaBasis = _useState6[0],
|
|
13339
|
+
setSideAreaBasis = _useState6[1];
|
|
13340
|
+
|
|
13341
|
+
var _useState7 = React.useState(sideDefaultSize),
|
|
13342
|
+
sideAreaStartBasis = _useState7[0],
|
|
13343
|
+
setSideAreaStartBasis = _useState7[1];
|
|
13344
|
+
|
|
13345
|
+
var _useState8 = React.useState(sideDefaultSize),
|
|
13346
|
+
lastOpenSize = _useState8[0],
|
|
13347
|
+
setLastOpenSize = _useState8[1];
|
|
13348
|
+
|
|
13349
|
+
var ContainerRef = React.useRef();
|
|
13350
|
+
var AreaB = React.useRef();
|
|
13351
|
+
|
|
13352
|
+
var _useLocalStorage = useLocalStorage(referenceKey + "_size", null),
|
|
13353
|
+
savedSize = _useLocalStorage[0],
|
|
13354
|
+
setSavedSize = _useLocalStorage[1];
|
|
13355
|
+
|
|
13356
|
+
var _useLocalStorage2 = useLocalStorage(referenceKey + "_state", null),
|
|
13357
|
+
savedCollapsedState = _useLocalStorage2[0],
|
|
13358
|
+
setSavedCollapsedState = _useLocalStorage2[1];
|
|
13359
|
+
|
|
13360
|
+
var _useLocalStorage3 = useLocalStorage(referenceKey + "_quick_open_size", null),
|
|
13361
|
+
savedLastOpenSize = _useLocalStorage3[0],
|
|
13362
|
+
setSavedLastOpenSize = _useLocalStorage3[1];
|
|
13363
|
+
|
|
13364
|
+
React.useEffect(function () {
|
|
13365
|
+
if (!initialised) {
|
|
13366
|
+
if (persist) {
|
|
13367
|
+
if (savedSize) {
|
|
13368
|
+
setSideAreaBasis(savedSize);
|
|
13369
|
+
}
|
|
13370
|
+
|
|
13371
|
+
if (savedCollapsedState) {
|
|
13372
|
+
setSideAreaState(savedCollapsedState);
|
|
13373
|
+
}
|
|
13374
|
+
|
|
13375
|
+
if (savedLastOpenSize) {
|
|
13376
|
+
setLastOpenSize(savedLastOpenSize);
|
|
13377
|
+
}
|
|
13378
|
+
}
|
|
13379
|
+
|
|
13380
|
+
setInitialised(true);
|
|
13381
|
+
}
|
|
13382
|
+
}, [initialised, persist, savedCollapsedState, savedSize, savedLastOpenSize]);
|
|
13383
|
+
React.useImperativeHandle(controlRef, function () {
|
|
13384
|
+
return {
|
|
13385
|
+
open: function open() {
|
|
13386
|
+
_open();
|
|
13387
|
+
},
|
|
13388
|
+
close: function close() {
|
|
13389
|
+
collapse();
|
|
13390
|
+
},
|
|
13391
|
+
reset: function reset() {
|
|
13392
|
+
restoreDefault();
|
|
13393
|
+
}
|
|
13394
|
+
};
|
|
13395
|
+
});
|
|
13396
|
+
var restoreDefault = React.useCallback(function () {
|
|
13397
|
+
setSideAreaBasis(sideDefaultSize);
|
|
13398
|
+
setSideAreaState('open');
|
|
13399
|
+
setSavedSize(null);
|
|
13400
|
+
setSavedCollapsedState(null);
|
|
13401
|
+
}, [setSideAreaBasis, sideDefaultSize, setSideAreaState, setSavedSize, setSavedCollapsedState]);
|
|
13402
|
+
var collapse = React.useCallback(function () {
|
|
13403
|
+
setSideAreaState('collapsed');
|
|
13404
|
+
setSideAreaBasis(closedBasis);
|
|
13405
|
+
setSideAreaStartBasis(closedBasis);
|
|
13406
|
+
|
|
13407
|
+
if (persist) {
|
|
13408
|
+
setSavedSize(closedBasis);
|
|
13409
|
+
setSavedCollapsedState('collapsed');
|
|
13410
|
+
setSavedLastOpenSize(sideAreaStartBasis);
|
|
13411
|
+
}
|
|
13412
|
+
}, [setSideAreaBasis, setSideAreaState, setSavedCollapsedState, setSavedSize, setSavedLastOpenSize, sideAreaStartBasis, persist]);
|
|
13413
|
+
|
|
13414
|
+
var _open = React.useCallback(function () {
|
|
13415
|
+
setSideAreaState('open');
|
|
13416
|
+
var openBasis;
|
|
13417
|
+
|
|
13418
|
+
if (sideAreaBasis > closedBasis) {
|
|
13419
|
+
openBasis = layout === 'horizontal' ? AreaB.current.clientWidth : AreaB.current.clientHeight;
|
|
13420
|
+
} else {
|
|
13421
|
+
openBasis = lastOpenSize;
|
|
13422
|
+
}
|
|
13423
|
+
|
|
13424
|
+
setSideAreaStartBasis(openBasis);
|
|
13425
|
+
setSideAreaBasis(openBasis);
|
|
13426
|
+
|
|
13427
|
+
if (persist) {
|
|
13428
|
+
setSavedSize(Math.round(sideAreaBasis));
|
|
13429
|
+
setSavedCollapsedState('open');
|
|
13430
|
+
}
|
|
13431
|
+
}, [persist, setSavedCollapsedState, setSavedSize, lastOpenSize, sideAreaBasis, layout]);
|
|
13432
|
+
|
|
13433
|
+
var releaseDrag = React.useCallback(function () {
|
|
13434
|
+
if (sideAreaState === 'collapsing' && sideAreaBasis < sideMinSize - hideTolerance) {
|
|
13435
|
+
collapse();
|
|
13436
|
+
} else {
|
|
13437
|
+
setSideAreaStartBasis(Math.round(sideAreaBasis));
|
|
13438
|
+
setLastOpenSize(Math.round(sideAreaBasis));
|
|
13439
|
+
|
|
13440
|
+
_open();
|
|
13441
|
+
}
|
|
13442
|
+
|
|
13443
|
+
setResizing(false);
|
|
13444
|
+
}, [collapse, _open, sideMinSize, sideAreaBasis, sideAreaState]);
|
|
13445
|
+
var handleDragPointerDown = React.useCallback(function (event) {
|
|
13446
|
+
event.preventDefault();
|
|
13447
|
+
var clientX = event.clientX,
|
|
13448
|
+
clientY = event.clientY;
|
|
13449
|
+
|
|
13450
|
+
if (sideAreaState === 'collapsed') {
|
|
13451
|
+
setSideAreaStartBasis(sideAreaBasis);
|
|
13452
|
+
} else {
|
|
13453
|
+
setSideAreaStartBasis(clampInt(sideAreaBasis, sideMinSize, sideMaxSize));
|
|
13454
|
+
}
|
|
13455
|
+
|
|
13456
|
+
setInitialMousePos({
|
|
13457
|
+
x: clientX,
|
|
13458
|
+
y: clientY
|
|
13459
|
+
});
|
|
13460
|
+
setMousePosDiff({
|
|
13461
|
+
x: 0,
|
|
13462
|
+
y: 0
|
|
13463
|
+
});
|
|
13464
|
+
setResizing(true);
|
|
13465
|
+
}, [sideAreaBasis, sideMaxSize, sideMinSize, sideAreaState]);
|
|
13466
|
+
|
|
13467
|
+
var handleDragPointerUp = function handleDragPointerUp() {
|
|
13468
|
+
if (resizing) {
|
|
13469
|
+
releaseDrag();
|
|
13470
|
+
}
|
|
13471
|
+
};
|
|
13472
|
+
|
|
13473
|
+
var handleDragPointerMove = React.useCallback(function (event) {
|
|
13474
|
+
var clientX = event.clientX,
|
|
13475
|
+
clientY = event.clientY;
|
|
13476
|
+
var newBasis;
|
|
13477
|
+
var collapse = sideAreaState;
|
|
13478
|
+
|
|
13479
|
+
if (resizing && initialMousePos && sideAreaStartBasis) {
|
|
13480
|
+
setMousePosDiff({
|
|
13481
|
+
x: initialMousePos.x - clientX,
|
|
13482
|
+
y: initialMousePos.y - clientY
|
|
13483
|
+
});
|
|
13484
|
+
|
|
13485
|
+
if (layout === 'horizontal') {
|
|
13486
|
+
var maxClamp = ContainerRef.current.clientWidth - dividerSize - (mainMinSize || 0);
|
|
13487
|
+
|
|
13488
|
+
if (!reverse) {
|
|
13489
|
+
newBasis = clampInt(sideAreaStartBasis + (initialMousePos.x - clientX), null, maxClamp);
|
|
13490
|
+
} else {
|
|
13491
|
+
newBasis = clampInt(sideAreaStartBasis - (initialMousePos.x - clientX), null, maxClamp);
|
|
13492
|
+
}
|
|
13493
|
+
} else {
|
|
13494
|
+
var _maxClamp = ContainerRef.current.clientHeight - dividerSize - (mainMinSize || 0);
|
|
13495
|
+
|
|
13496
|
+
if (!reverse) {
|
|
13497
|
+
newBasis = clampInt(sideAreaStartBasis + (initialMousePos.y - clientY), null, _maxClamp);
|
|
13498
|
+
} else {
|
|
13499
|
+
newBasis = clampInt(sideAreaStartBasis - (initialMousePos.y - clientY), null, _maxClamp);
|
|
13500
|
+
}
|
|
13501
|
+
}
|
|
13502
|
+
|
|
13503
|
+
if (sideArea.collapsable) {
|
|
13504
|
+
var inCloseRange = newBasis < sideMinSize - hideTolerance;
|
|
13505
|
+
|
|
13506
|
+
if (sideAreaState === 'open' && inCloseRange) {
|
|
13507
|
+
collapse = 'collapsing';
|
|
13508
|
+
} else if (sideAreaState === 'opening' && inCloseRange) {
|
|
13509
|
+
collapse = 'collapsing';
|
|
13510
|
+
} else if (sideAreaState === 'collapsing' && !inCloseRange) {
|
|
13511
|
+
collapse = 'open';
|
|
13512
|
+
} else if (sideAreaState === 'collapsed') {
|
|
13513
|
+
collapse = 'peeking';
|
|
13514
|
+
} else if (sideAreaState === 'peeking' && !inCloseRange) {
|
|
13515
|
+
collapse = 'opening';
|
|
13516
|
+
}
|
|
13517
|
+
}
|
|
13518
|
+
|
|
13519
|
+
setSideAreaBasis(newBasis);
|
|
13520
|
+
setSideAreaState(collapse);
|
|
13521
|
+
}
|
|
13522
|
+
}, [setSideAreaBasis, setMousePosDiff, resizing, initialMousePos, sideAreaStartBasis, sideAreaState, layout, dividerSize, mainMinSize, sideMinSize, reverse, sideArea.collapsable]);
|
|
13523
|
+
var handleMouseLeaveViewport = React.useCallback(function () {
|
|
13524
|
+
if (resizing) {
|
|
13525
|
+
releaseDrag();
|
|
13526
|
+
}
|
|
13527
|
+
}, [resizing, releaseDrag]);
|
|
13528
|
+
React.useEffect(function () {
|
|
13529
|
+
document.addEventListener('mouseleave', handleMouseLeaveViewport);
|
|
13530
|
+
return function () {
|
|
13531
|
+
document.removeEventListener('mouseleave', handleMouseLeaveViewport);
|
|
13532
|
+
};
|
|
13533
|
+
}, [handleMouseLeaveViewport]);
|
|
13534
|
+
|
|
13535
|
+
var resizeLineArrowDirection = function resizeLineArrowDirection() {
|
|
13536
|
+
if (sideAreaState === 'collapsed' || sideAreaState === 'peeking') {
|
|
13537
|
+
if (layout === 'horizontal') {
|
|
13538
|
+
if (!reverse) {
|
|
13539
|
+
return 'left';
|
|
13540
|
+
} else {
|
|
13541
|
+
return 'right';
|
|
13542
|
+
}
|
|
13543
|
+
} else {
|
|
13544
|
+
if (!reverse) {
|
|
13545
|
+
return 'up';
|
|
13546
|
+
} else {
|
|
13547
|
+
return 'down';
|
|
13548
|
+
}
|
|
13549
|
+
}
|
|
13550
|
+
} else {
|
|
13551
|
+
if (layout === 'horizontal') {
|
|
13552
|
+
if (!reverse) {
|
|
13553
|
+
return 'right';
|
|
13554
|
+
} else {
|
|
13555
|
+
return 'left';
|
|
13556
|
+
}
|
|
13557
|
+
} else {
|
|
13558
|
+
if (!reverse) {
|
|
13559
|
+
return 'down';
|
|
13560
|
+
} else {
|
|
13561
|
+
return 'up';
|
|
13562
|
+
}
|
|
13563
|
+
}
|
|
13564
|
+
}
|
|
13565
|
+
};
|
|
13566
|
+
|
|
13567
|
+
var resizeLineState = function resizeLineState() {
|
|
13568
|
+
if (sideAreaState === 'collapsed' || sideAreaState === 'peeking') {
|
|
13569
|
+
return 'arrow';
|
|
13570
|
+
} else if (sideAreaState === 'collapsing') {
|
|
13571
|
+
return 'arrow';
|
|
13572
|
+
} else {
|
|
13573
|
+
return 'default';
|
|
13574
|
+
}
|
|
13575
|
+
};
|
|
13576
|
+
|
|
13577
|
+
var debugData = React__default.createElement(DebugData, null, React__default.createElement("div", null, React__default.createElement("span", null, "State:"), " ", sideAreaState), React__default.createElement("div", null, React__default.createElement("span", null, "Position:"), " ", initialMousePos === null || initialMousePos === void 0 ? void 0 : initialMousePos.x, ", ", initialMousePos === null || initialMousePos === void 0 ? void 0 : initialMousePos.y), React__default.createElement("div", null, React__default.createElement("span", null, "Difference:"), " ", mousePosDiff === null || mousePosDiff === void 0 ? void 0 : mousePosDiff.x, ", ", mousePosDiff === null || mousePosDiff === void 0 ? void 0 : mousePosDiff.y), React__default.createElement("div", null, React__default.createElement("span", null, "sideAreaStartBasis:"), " ", sideAreaStartBasis), React__default.createElement("div", null, React__default.createElement("span", null, "sideAreaBasis:"), " ", sideAreaBasis), React__default.createElement("div", null, React__default.createElement("span", null, "lastOpenSize:"), " ", lastOpenSize));
|
|
13578
|
+
return React__default.createElement(Container$Z, {
|
|
13579
|
+
ref: ContainerRef,
|
|
13580
|
+
onPointerMove: handleDragPointerMove,
|
|
13581
|
+
onPointerUp: handleDragPointerUp,
|
|
13582
|
+
"$initialised": initialised ? 'true' : 'false',
|
|
13583
|
+
"$layout": layout,
|
|
13584
|
+
"$reverse": reverse ? 'true' : 'false'
|
|
13585
|
+
}, React__default.createElement(MainArea, {
|
|
13586
|
+
"$layout": layout,
|
|
13587
|
+
"$minDimension": mainMinSize
|
|
13588
|
+
}, mainArea.content), React__default.createElement(DragContainer, {
|
|
13589
|
+
onPointerDown: handleDragPointerDown,
|
|
13590
|
+
onDoubleClick: restoreDefault,
|
|
13591
|
+
"$size": dividerSize,
|
|
13592
|
+
"$fauxHover": resizing ? 'true' : 'false'
|
|
13593
|
+
}, React__default.createElement(ResizeLine, {
|
|
13594
|
+
state: resizeLineState(),
|
|
13595
|
+
layout: layout,
|
|
13596
|
+
arrowDirection: resizeLineArrowDirection()
|
|
13597
|
+
})), React__default.createElement(SideArea, {
|
|
13598
|
+
ref: AreaB,
|
|
13599
|
+
style: {
|
|
13600
|
+
flexBasis: sideAreaBasis + "px"
|
|
13601
|
+
},
|
|
13602
|
+
"$defaultSize": sideDefaultSize,
|
|
13603
|
+
"$minDimension": sideMinSize,
|
|
13604
|
+
"$maxDimension": sideMaxSize,
|
|
13605
|
+
"$layout": layout,
|
|
13606
|
+
"$collapseState": sideAreaState
|
|
13607
|
+
}, React__default.createElement(SideAreaInner, null, sideArea.content)), showDebug ? debugData : null);
|
|
13030
13608
|
});
|
|
13031
13609
|
|
|
13032
|
-
var
|
|
13033
|
-
var
|
|
13610
|
+
var clampInt = function clampInt(value, lower, upper) {
|
|
13611
|
+
var clampedInt = value;
|
|
13612
|
+
clampedInt = upper && clampedInt > upper ? upper : clampedInt;
|
|
13613
|
+
clampedInt = lower && clampedInt < lower ? lower : clampedInt;
|
|
13614
|
+
return clampedInt;
|
|
13615
|
+
};
|
|
13616
|
+
|
|
13617
|
+
var _templateObject$1v, _templateObject2$1i, _templateObject3$17, _templateObject4$11, _templateObject5$Y, _templateObject6$I, _templateObject7$F;
|
|
13618
|
+
var MOBILE_CLOSE_HEIGHT = 50;
|
|
13619
|
+
var MOBILE_NAVBAR_HEIGHT = 68;
|
|
13620
|
+
var Layout = styled__default.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
13621
|
+
var MobileLayout = styled__default.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose([""])));
|
|
13622
|
+
var Content$1 = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
|
|
13623
|
+
var maxWidth = _ref.maxWidth;
|
|
13624
|
+
return maxWidth && styled.css(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
|
|
13625
|
+
});
|
|
13626
|
+
var MainContainer = styled__default.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
|
|
13627
|
+
var ContentArea = styled__default.div(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n flex: 1;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n\n ", "\n"])), function (_ref2) {
|
|
13628
|
+
var legacyLayout = _ref2.legacyLayout,
|
|
13629
|
+
paddingOverride = _ref2.paddingOverride,
|
|
13630
|
+
maxWidth = _ref2.maxWidth;
|
|
13631
|
+
return legacyLayout && styled.css(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
|
|
13632
|
+
});
|
|
13633
|
+
|
|
13634
|
+
var _templateObject$1w, _templateObject2$1j, _templateObject3$18, _templateObject4$12, _templateObject5$Z, _templateObject6$J, _templateObject7$G, _templateObject8$y, _templateObject9$r, _templateObject10$n, _templateObject11$f, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$6, _templateObject16$6, _templateObject17$6, _templateObject18$4, _templateObject19$4, _templateObject20$3, _templateObject21$3;
|
|
13635
|
+
var ContextTitle = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n opacity: 0;\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
13034
13636
|
var theme = _ref.theme;
|
|
13035
|
-
return styled.css(_templateObject2$
|
|
13637
|
+
return styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
|
|
13036
13638
|
}, function (_ref2) {
|
|
13037
13639
|
var compact = _ref2.compact;
|
|
13038
|
-
return compact && styled.css(_templateObject3$
|
|
13640
|
+
return compact && styled.css(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
13039
13641
|
});
|
|
13040
|
-
var ContextIcon$1 = styled__default.div(_templateObject4
|
|
13642
|
+
var ContextIcon$1 = styled__default.div(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n ", ";\n\n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])), function (_ref3) {
|
|
13041
13643
|
var theme = _ref3.theme;
|
|
13042
|
-
return styled.css(_templateObject5$
|
|
13644
|
+
return styled.css(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n ", ";\n transition: background ", " ", ";\n "])), theme.styles.global.mainMenu.iconBackground["default"], theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
|
|
13043
13645
|
});
|
|
13044
|
-
var ContextIndicator = styled__default.div(_templateObject6$
|
|
13646
|
+
var ContextIndicator = styled__default.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n width: 12px;\n height: 12px;\n flex: 0 0 14px;\n margin: 0 20px 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n display: block;\n height: 12px;\n width: 12px;\n }\n\n opacity: 0;\n\n ", "\n\n"])), function (_ref4) {
|
|
13045
13647
|
var theme = _ref4.theme;
|
|
13046
|
-
return styled.css(_templateObject7$
|
|
13648
|
+
return styled.css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n transition: opacity 0 ", ";\n "])), theme.animation.easing.primary.easeInOut);
|
|
13047
13649
|
});
|
|
13048
|
-
var ContextActionBaseCSS$1 = styled.css(_templateObject8$
|
|
13049
|
-
var StyledAnchor = styled__default.a(_templateObject9$
|
|
13050
|
-
var ExternalIconWrapper = styled__default.div(_templateObject10$
|
|
13051
|
-
var ContextWrapper = styled__default.div(_templateObject11$
|
|
13650
|
+
var ContextActionBaseCSS$1 = styled.css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n"])));
|
|
13651
|
+
var StyledAnchor = styled__default.a(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
|
|
13652
|
+
var ExternalIconWrapper = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
13653
|
+
var ContextWrapper = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref5) {
|
|
13052
13654
|
var theme = _ref5.theme;
|
|
13053
|
-
return theme && styled.css(_templateObject12$
|
|
13655
|
+
return theme && styled.css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
|
|
13054
13656
|
}, function (_ref6) {
|
|
13055
13657
|
var $menuOpen = _ref6.$menuOpen;
|
|
13056
|
-
return $menuOpen && styled.css(_templateObject13$
|
|
13658
|
+
return $menuOpen && styled.css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
13057
13659
|
}, ContextIcon$1, function (_ref7) {
|
|
13058
13660
|
var theme = _ref7.theme;
|
|
13059
13661
|
return theme.styles.global.mainMenu.iconBackground.hover;
|
|
13060
13662
|
}, IconWrapper);
|
|
13061
|
-
var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$
|
|
13663
|
+
var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject14$8 || (_templateObject14$8 = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref8) {
|
|
13062
13664
|
var theme = _ref8.theme;
|
|
13063
|
-
return theme && styled.css(_templateObject15$
|
|
13665
|
+
return theme && styled.css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
|
|
13064
13666
|
}, function (_ref9) {
|
|
13065
13667
|
var $menuOpen = _ref9.$menuOpen;
|
|
13066
|
-
return $menuOpen && styled.css(_templateObject16$
|
|
13668
|
+
return $menuOpen && styled.css(_templateObject16$6 || (_templateObject16$6 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
13067
13669
|
}, ContextIcon$1, function (_ref10) {
|
|
13068
13670
|
var theme = _ref10.theme;
|
|
13069
13671
|
return theme.styles.global.mainMenu.iconBackground.hover;
|
|
13070
13672
|
}, IconWrapper, function (_ref11) {
|
|
13071
13673
|
var $isActive = _ref11.$isActive;
|
|
13072
|
-
return $isActive && styled.css(_templateObject17$
|
|
13674
|
+
return $isActive && styled.css(_templateObject17$6 || (_templateObject17$6 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon$1, ContextIcon$1, function (_ref12) {
|
|
13073
13675
|
var theme = _ref12.theme;
|
|
13074
13676
|
return theme.styles.global.mainMenu.iconBackground.active;
|
|
13075
13677
|
});
|
|
13076
13678
|
});
|
|
13077
|
-
var ContextActionButton$1 = styled__default.button(_templateObject18$
|
|
13679
|
+
var ContextActionButton$1 = styled__default.button(_templateObject18$4 || (_templateObject18$4 = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n ", ";\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref13) {
|
|
13078
13680
|
var theme = _ref13.theme;
|
|
13079
|
-
return theme && styled.css(_templateObject19$
|
|
13681
|
+
return theme && styled.css(_templateObject19$4 || (_templateObject19$4 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
|
|
13080
13682
|
}, function (_ref14) {
|
|
13081
13683
|
var menuOpen = _ref14.menuOpen,
|
|
13082
13684
|
theme = _ref14.theme;
|
|
@@ -13282,42 +13884,42 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
13282
13884
|
};
|
|
13283
13885
|
};
|
|
13284
13886
|
|
|
13285
|
-
var _templateObject$
|
|
13286
|
-
var Submenu = styled__default.ul(_templateObject$
|
|
13287
|
-
var SubmenuHeader = styled__default.div(_templateObject2$
|
|
13288
|
-
var SubmenuItemTitle = styled__default.span(_templateObject3$
|
|
13887
|
+
var _templateObject$1x, _templateObject2$1k, _templateObject3$19, _templateObject4$13, _templateObject5$_, _templateObject6$K, _templateObject7$H, _templateObject8$z, _templateObject9$s, _templateObject10$o, _templateObject11$g, _templateObject12$d, _templateObject13$b, _templateObject14$9, _templateObject15$7;
|
|
13888
|
+
var Submenu = styled__default.ul(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
13889
|
+
var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
13890
|
+
var SubmenuItemTitle = styled__default.span(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
|
|
13289
13891
|
var theme = _ref.theme;
|
|
13290
|
-
return theme && styled.css(_templateObject4$
|
|
13892
|
+
return theme && styled.css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
|
|
13291
13893
|
});
|
|
13292
|
-
var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$
|
|
13293
|
-
var ExternalIconWrapper$1 = styled__default.div(_templateObject6$
|
|
13294
|
-
var SubmenuItemAnchor = styled__default.a(_templateObject7$
|
|
13295
|
-
var SubmenuItem = styled__default.li(_templateObject8$
|
|
13894
|
+
var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
|
|
13895
|
+
var ExternalIconWrapper$1 = styled__default.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
13896
|
+
var SubmenuItemAnchor = styled__default.a(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
13897
|
+
var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: ", ";\n }\n\n ", ", ", "{\n\n ", ";\n\n\n\n }\n"])), function (_ref2) {
|
|
13296
13898
|
var colors = _ref2.theme.colors;
|
|
13297
13899
|
return colors.divider;
|
|
13298
13900
|
}, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
|
|
13299
13901
|
var theme = _ref3.theme,
|
|
13300
13902
|
isActive = _ref3.isActive;
|
|
13301
|
-
return theme && styled.css(_templateObject9$
|
|
13903
|
+
return theme && styled.css(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n\n &:hover {\n ", ";\n }\n\n ", "\n\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover, isActive && styled.css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
|
|
13302
13904
|
});
|
|
13303
|
-
var SubmenuContainer = styled__default.div(_templateObject11$
|
|
13905
|
+
var SubmenuContainer = styled__default.div(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n ", ";\n\n position: relative;\n overflow: hidden;\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: ", ";\n }\n\n"])), function (_ref4) {
|
|
13304
13906
|
var theme = _ref4.theme;
|
|
13305
|
-
return theme && styled.css(_templateObject12$
|
|
13907
|
+
return theme && styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n transition:\n max-height ", " ", ",\n opacity ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut);
|
|
13306
13908
|
}, function (_ref5) {
|
|
13307
13909
|
var colors = _ref5.theme.colors;
|
|
13308
13910
|
return colors.divider;
|
|
13309
13911
|
});
|
|
13310
|
-
var ContextContainer = styled__default.div(_templateObject13$
|
|
13912
|
+
var ContextContainer = styled__default.div(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n max-height: 0;\n opacity: 0;\n }\n ", ";\n\n ", ";\n\n"])), function (_ref6) {
|
|
13311
13913
|
var minHeight = _ref6.minHeight;
|
|
13312
13914
|
return minHeight ? minHeight + "px" : "70px";
|
|
13313
13915
|
}, SubmenuContainer, function (_ref7) {
|
|
13314
13916
|
var open = _ref7.open,
|
|
13315
13917
|
maxHeight = _ref7.maxHeight,
|
|
13316
13918
|
theme = _ref7.theme;
|
|
13317
|
-
return open && styled.css(_templateObject14$
|
|
13919
|
+
return open && styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n transition:\n max-height ", " ", ",\n opacity ", " ", ";\n max-height: ", "px !important;\n opacity: 1;\n }\n "])), SubmenuContainer, theme.animation.speed.normal, theme.animation.easing.primary.easeOut, theme.animation.speed.fast, theme.animation.easing.primary.easeOut, maxHeight);
|
|
13318
13920
|
}, function (_ref8) {
|
|
13319
13921
|
var loading = _ref8.loading;
|
|
13320
|
-
return loading === 'true' && styled.css(_templateObject15$
|
|
13922
|
+
return loading === 'true' && styled.css(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
13321
13923
|
});
|
|
13322
13924
|
|
|
13323
13925
|
var NavigationItem = function NavigationItem(_ref9) {
|
|
@@ -13429,30 +14031,30 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
13429
14031
|
return output;
|
|
13430
14032
|
};
|
|
13431
14033
|
|
|
13432
|
-
var _templateObject$
|
|
13433
|
-
var Logo = styled__default(reactRouterDom.Link)(_templateObject$
|
|
13434
|
-
var LogoMark = styled__default.div(_templateObject2$
|
|
13435
|
-
var LogoType = styled__default.div(_templateObject3$
|
|
13436
|
-
var SVGObject = styled__default.object(_templateObject4$
|
|
13437
|
-
var SVGObjectText = styled__default.object(_templateObject5
|
|
13438
|
-
var NavigationContainer = styled__default.div(_templateObject6$
|
|
13439
|
-
var MenuFooter = styled__default.div(_templateObject7$
|
|
14034
|
+
var _templateObject$1y, _templateObject2$1l, _templateObject3$1a, _templateObject4$14, _templateObject5$$, _templateObject6$L, _templateObject7$I, _templateObject8$A, _templateObject9$t, _templateObject10$p, _templateObject11$h, _templateObject12$e, _templateObject13$c, _templateObject14$a, _templateObject15$8;
|
|
14035
|
+
var Logo = styled__default(reactRouterDom.Link)(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
|
|
14036
|
+
var LogoMark = styled__default.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
|
|
14037
|
+
var LogoType = styled__default.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
|
|
14038
|
+
var SVGObject = styled__default.object(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose([""])));
|
|
14039
|
+
var SVGObjectText = styled__default.object(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
|
|
14040
|
+
var NavigationContainer = styled__default.div(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose([""])));
|
|
14041
|
+
var MenuFooter = styled__default.div(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])), function (_ref) {
|
|
13440
14042
|
var theme = _ref.theme;
|
|
13441
|
-
return theme && styled.css(_templateObject8$
|
|
14043
|
+
return theme && styled.css(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
|
|
13442
14044
|
});
|
|
13443
|
-
var FooterItemContainer = styled__default.div(_templateObject9$
|
|
13444
|
-
var PushContainer = styled__default.div(_templateObject10$
|
|
14045
|
+
var FooterItemContainer = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
14046
|
+
var PushContainer = styled__default.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
|
|
13445
14047
|
var theme = _ref2.theme,
|
|
13446
14048
|
isPinned = _ref2.isPinned;
|
|
13447
|
-
return theme && styled.css(_templateObject11$
|
|
14049
|
+
return theme && styled.css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
|
|
13448
14050
|
});
|
|
13449
|
-
var Container$
|
|
14051
|
+
var Container$_ = styled__default.div(_templateObject12$e || (_templateObject12$e = _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 (_ref3) {
|
|
13450
14052
|
var theme = _ref3.theme,
|
|
13451
14053
|
open = _ref3.open,
|
|
13452
14054
|
desktopSize = _ref3.desktopSize;
|
|
13453
|
-
return theme && styled.css(_templateObject13$
|
|
14055
|
+
return theme && styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n width: ", ";\n border-right: 1px solid ", ";\n\n ", "{\n transition: opacity ", " ", ";\n opacity: ", ";\n }\n "])), theme.styles.global.mainMenu.background, desktopSize === 'xxlarge' ? "" : styled.css(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n transition: width ", " ", "\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeOut), open ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed, theme.styles.global.mainMenu.lines.backgroundColor, LogoType, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, open ? 1 : 0);
|
|
13454
14056
|
});
|
|
13455
|
-
var ContainerInner = styled__default.div(_templateObject15$
|
|
14057
|
+
var ContainerInner = styled__default.div(_templateObject15$8 || (_templateObject15$8 = _taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_ref4) {
|
|
13456
14058
|
var theme = _ref4.theme;
|
|
13457
14059
|
return theme.dimensions.global.mainMenu.width.open;
|
|
13458
14060
|
});
|
|
@@ -13527,7 +14129,7 @@ var MainMenu = function MainMenu(_ref5) {
|
|
|
13527
14129
|
}, [checkedInItems, content]);
|
|
13528
14130
|
return React__default.createElement(PushContainer, {
|
|
13529
14131
|
isPinned: menuState.isMenuPinned
|
|
13530
|
-
}, ReactDom.createPortal(React__default.createElement(Container$
|
|
14132
|
+
}, ReactDom.createPortal(React__default.createElement(Container$_, {
|
|
13531
14133
|
open: menuState.isMenuOpen,
|
|
13532
14134
|
desktopSize: menuState.desktopSize,
|
|
13533
14135
|
onPointerEnter: menuState.isMenuPinned ? function () {} : autoMenuOpen,
|
|
@@ -13574,26 +14176,26 @@ var MainMenu = function MainMenu(_ref5) {
|
|
|
13574
14176
|
})) : null))), document.body));
|
|
13575
14177
|
};
|
|
13576
14178
|
|
|
13577
|
-
var _templateObject$
|
|
13578
|
-
var MetaConatiner = styled__default.div(_templateObject$
|
|
13579
|
-
var LabelTitle = styled__default.div(_templateObject2$
|
|
14179
|
+
var _templateObject$1z, _templateObject2$1m, _templateObject3$1b, _templateObject4$15, _templateObject5$10, _templateObject6$M, _templateObject7$J, _templateObject8$B, _templateObject9$u, _templateObject10$q, _templateObject11$i;
|
|
14180
|
+
var MetaConatiner = styled__default.div(_templateObject$1z || (_templateObject$1z = _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"])));
|
|
14181
|
+
var LabelTitle = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: ", ";\n margin-top: 2px;\n"])), function (_ref) {
|
|
13580
14182
|
var theme = _ref.theme;
|
|
13581
14183
|
return theme.fontFamily.ui;
|
|
13582
14184
|
});
|
|
13583
|
-
var LabelContent = styled__default.div(_templateObject3$
|
|
13584
|
-
var LabelNotes = styled__default.div(_templateObject4$
|
|
14185
|
+
var LabelContent = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _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"])));
|
|
14186
|
+
var LabelNotes = styled__default.div(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n ", "\n"])), function (_ref2) {
|
|
13585
14187
|
var theme = _ref2.theme;
|
|
13586
|
-
return theme && styled.css(_templateObject5$
|
|
14188
|
+
return theme && styled.css(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
|
|
13587
14189
|
});
|
|
13588
|
-
var TitleContainer = styled__default.div(_templateObject6$
|
|
13589
|
-
var Container
|
|
13590
|
-
var TitleBox = styled__default.div(_templateObject8$
|
|
13591
|
-
var IconBox = styled__default.div(_templateObject9$
|
|
13592
|
-
var CopyTextBox = styled__default.pre(_templateObject10$
|
|
14190
|
+
var TitleContainer = styled__default.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n display: flex;\n gap:6px;\n flex-direction: row;\n align-items: center;\n margin-left: 10px;\n margin: 3px 0 5px 10px;\n"])));
|
|
14191
|
+
var Container$$ = styled__default.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
|
|
14192
|
+
var TitleBox = styled__default.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
14193
|
+
var IconBox = styled__default.div(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$$);
|
|
14194
|
+
var CopyTextBox = styled__default.pre(_templateObject10$q || (_templateObject10$q = _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: ", ";\n right:10px;\n margin-top: -23px;\n"])), function (_ref3) {
|
|
13593
14195
|
var theme = _ref3.theme;
|
|
13594
14196
|
return theme.fontFamily.data;
|
|
13595
14197
|
});
|
|
13596
|
-
var CopyBox = styled__default.div(_templateObject11$
|
|
14198
|
+
var CopyBox = styled__default.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n"])));
|
|
13597
14199
|
|
|
13598
14200
|
var UserDrawerMeta = function UserDrawerMeta(_ref4) {
|
|
13599
14201
|
var item = _ref4.item,
|
|
@@ -13638,7 +14240,7 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
|
|
|
13638
14240
|
var onLeaveMeatInfo = React.useCallback(function () {
|
|
13639
14241
|
setOnHoverColorValue('dimmed');
|
|
13640
14242
|
}, []);
|
|
13641
|
-
return React__default.createElement(React.Fragment, null, title !== '' && React__default.createElement(Container
|
|
14243
|
+
return React__default.createElement(React.Fragment, null, title !== '' && React__default.createElement(Container$$, {
|
|
13642
14244
|
onClick: onUserDrawerMetaClick
|
|
13643
14245
|
}, React__default.createElement(MetaConatiner, null, React__default.createElement(TitleBox, null, React__default.createElement(TitleContainer, null, React__default.createElement(Icon, {
|
|
13644
14246
|
icon: icon,
|
|
@@ -13663,20 +14265,20 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
|
|
|
13663
14265
|
}, notes) : null)));
|
|
13664
14266
|
};
|
|
13665
14267
|
|
|
13666
|
-
var _templateObject$
|
|
13667
|
-
var Container$
|
|
14268
|
+
var _templateObject$1A, _templateObject2$1n, _templateObject3$1c, _templateObject4$16;
|
|
14269
|
+
var Container$10 = styled__default.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid ", ";\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])), function (_ref) {
|
|
13668
14270
|
var theme = _ref.theme;
|
|
13669
14271
|
return theme.colors.divider;
|
|
13670
14272
|
});
|
|
13671
|
-
var ColumnContainer = styled__default.div(_templateObject2$
|
|
13672
|
-
var Title$8 = styled__default.div(_templateObject3$
|
|
14273
|
+
var ColumnContainer = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
|
|
14274
|
+
var Title$8 = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: ", ";\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: ", ";\n"])), function (_ref2) {
|
|
13673
14275
|
var theme = _ref2.theme;
|
|
13674
14276
|
return theme.fontFamily.ui;
|
|
13675
14277
|
}, function (_ref3) {
|
|
13676
14278
|
var theme = _ref3.theme;
|
|
13677
14279
|
return theme.typography.global.mainMenu.subheader.color;
|
|
13678
14280
|
});
|
|
13679
|
-
var SubTitle$1 = styled__default.div(_templateObject4$
|
|
14281
|
+
var SubTitle$1 = styled__default.div(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: ", ";\n padding-top: 2px;\n opacity: 0.5;\n"])), function (_ref4) {
|
|
13680
14282
|
var theme = _ref4.theme;
|
|
13681
14283
|
return theme.fontFamily.ui;
|
|
13682
14284
|
}, function (_ref5) {
|
|
@@ -13691,7 +14293,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
|
|
|
13691
14293
|
subTitle = _ref6.subTitle,
|
|
13692
14294
|
_ref6$onClickCallback = _ref6.onClickCallback,
|
|
13693
14295
|
onClickCallback = _ref6$onClickCallback === void 0 ? function () {} : _ref6$onClickCallback;
|
|
13694
|
-
return React__default.createElement(Container$
|
|
14296
|
+
return React__default.createElement(Container$10, {
|
|
13695
14297
|
onClick: onClickCallback
|
|
13696
14298
|
}, React__default.createElement(Icon, {
|
|
13697
14299
|
icon: icon,
|
|
@@ -13700,37 +14302,37 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
|
|
|
13700
14302
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13701
14303
|
};
|
|
13702
14304
|
|
|
13703
|
-
var _templateObject$
|
|
13704
|
-
var DrawerTop = styled__default.div(_templateObject$
|
|
13705
|
-
var DrawerBottom = styled__default.div(_templateObject2$
|
|
14305
|
+
var _templateObject$1B, _templateObject2$1o, _templateObject3$1d, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$K, _templateObject8$C, _templateObject9$v, _templateObject10$r, _templateObject11$j, _templateObject12$f, _templateObject13$d, _templateObject14$b, _templateObject15$9, _templateObject16$7, _templateObject17$7, _templateObject18$5, _templateObject19$5;
|
|
14306
|
+
var DrawerTop = styled__default.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose([""])));
|
|
14307
|
+
var DrawerBottom = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
13706
14308
|
var theme = _ref.theme;
|
|
13707
|
-
return styled.css(_templateObject3$
|
|
14309
|
+
return styled.css(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n\n @media ", " {\n position: static;\n bottom: 0;\n }\n "])), theme.deviceMediaQuery.medium);
|
|
13708
14310
|
});
|
|
13709
|
-
var DrawerHeader = styled__default.h2(_templateObject4$
|
|
14311
|
+
var DrawerHeader = styled__default.h2(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
|
|
13710
14312
|
var theme = _ref2.theme;
|
|
13711
14313
|
return theme.typography.global.mainMenu.subheader;
|
|
13712
14314
|
});
|
|
13713
|
-
var CurrentUser = styled__default.div(_templateObject5$
|
|
14315
|
+
var CurrentUser = styled__default.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n\n ", ";\n"])), function (_ref3) {
|
|
13714
14316
|
var theme = _ref3.theme;
|
|
13715
|
-
return styled.css(_templateObject6$
|
|
14317
|
+
return styled.css(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n ", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
|
|
13716
14318
|
});
|
|
13717
|
-
var UserOptions = styled__default.div(_templateObject7$
|
|
14319
|
+
var UserOptions = styled__default.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n ", ";\n\n"])), function (_ref4) {
|
|
13718
14320
|
var theme = _ref4.theme;
|
|
13719
|
-
return styled.css(_templateObject8$
|
|
14321
|
+
return styled.css(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.styles.global.mainMenu.lines.backgroundColor);
|
|
13720
14322
|
});
|
|
13721
|
-
var Logout = styled__default.div(_templateObject9$
|
|
13722
|
-
var LinkMenu = styled__default.ul(_templateObject10$
|
|
13723
|
-
var LinkMenuItem = styled__default.li(_templateObject11$
|
|
13724
|
-
var IconWrapperFooter = styled__default.div(_templateObject12$
|
|
13725
|
-
var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject13$
|
|
14323
|
+
var Logout = styled__default.div(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
|
|
14324
|
+
var LinkMenu = styled__default.ul(_templateObject10$r || (_templateObject10$r = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
14325
|
+
var LinkMenuItem = styled__default.li(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
14326
|
+
var IconWrapperFooter = styled__default.div(_templateObject12$f || (_templateObject12$f = _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"])));
|
|
14327
|
+
var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
|
|
13726
14328
|
var theme = _ref5.theme;
|
|
13727
|
-
return styled.css(_templateObject14$
|
|
14329
|
+
return styled.css(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n ", ";\n\n &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem["default"], theme.typography.global.mainMenu.subItem.hover);
|
|
13728
14330
|
}, function (_ref6) {
|
|
13729
14331
|
var theme = _ref6.theme,
|
|
13730
14332
|
isActive = _ref6.isActive;
|
|
13731
|
-
return isActive && styled.css(_templateObject15$
|
|
14333
|
+
return isActive && styled.css(_templateObject15$9 || (_templateObject15$9 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active);
|
|
13732
14334
|
});
|
|
13733
|
-
var FooterMeta = styled__default.div(_templateObject16$
|
|
14335
|
+
var FooterMeta = styled__default.div(_templateObject16$7 || (_templateObject16$7 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border-top: ", " 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 (_ref7) {
|
|
13734
14336
|
var theme = _ref7.theme;
|
|
13735
14337
|
return theme.fontFamily.ui;
|
|
13736
14338
|
}, function (_ref8) {
|
|
@@ -13740,11 +14342,11 @@ var FooterMeta = styled__default.div(_templateObject16$6 || (_templateObject16$6
|
|
|
13740
14342
|
var icon = _ref9.icon;
|
|
13741
14343
|
return icon !== '' ? '31px;' : '21px;';
|
|
13742
14344
|
});
|
|
13743
|
-
var NavigationContainer$1 = styled__default.div(_templateObject17$
|
|
14345
|
+
var NavigationContainer$1 = styled__default.div(_templateObject17$7 || (_templateObject17$7 = _taggedTemplateLiteralLoose(["\n max-height: 300px;\n overflow: scroll;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_ref10) {
|
|
13744
14346
|
var theme = _ref10.theme;
|
|
13745
|
-
return styled.css(_templateObject18$
|
|
14347
|
+
return styled.css(_templateObject18$5 || (_templateObject18$5 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.colors.divider);
|
|
13746
14348
|
});
|
|
13747
|
-
var FooterText = styled__default.div(_templateObject19$
|
|
14349
|
+
var FooterText = styled__default.div(_templateObject19$5 || (_templateObject19$5 = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref11) {
|
|
13748
14350
|
var icon = _ref11.icon;
|
|
13749
14351
|
return icon !== '' ? '136px;' : '164px;';
|
|
13750
14352
|
});
|
|
@@ -13861,37 +14463,37 @@ var UserMenu = function UserMenu(_ref12) {
|
|
|
13861
14463
|
}, title)) : null));
|
|
13862
14464
|
};
|
|
13863
14465
|
|
|
13864
|
-
var _templateObject$
|
|
13865
|
-
var Container$
|
|
13866
|
-
var ImgWrapper = styled__default.div(_templateObject2$
|
|
13867
|
-
var EmptyImg = styled__default.div(_templateObject3$
|
|
13868
|
-
var Image$2 = styled__default.div(_templateObject4$
|
|
14466
|
+
var _templateObject$1C, _templateObject2$1p, _templateObject3$1e, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$L, _templateObject8$D;
|
|
14467
|
+
var Container$11 = styled__default.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
|
|
14468
|
+
var ImgWrapper = styled__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
|
|
14469
|
+
var EmptyImg = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
|
|
14470
|
+
var Image$2 = styled__default.div(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-image: url(", ");\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n display: ", ";\n"])), function (p) {
|
|
13869
14471
|
return p.image;
|
|
13870
14472
|
}, function (p) {
|
|
13871
14473
|
return p.image ? 'block' : 'none';
|
|
13872
14474
|
});
|
|
13873
|
-
var InfoContainer = styled__default.div(_templateObject5$
|
|
13874
|
-
var Title$9 = styled__default.div(_templateObject6$
|
|
13875
|
-
var Message = styled__default.div(_templateObject7$
|
|
13876
|
-
var TimeMsg = styled__default.div(_templateObject8$
|
|
14475
|
+
var InfoContainer = styled__default.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
14476
|
+
var Title$9 = styled__default.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
|
|
14477
|
+
var Message = styled__default.div(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n color: var(--grey-11);\n margin: 4px 0;\n height: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n vertical-align: middle;\n"])));
|
|
14478
|
+
var TimeMsg = styled__default.div(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
|
|
13877
14479
|
|
|
13878
14480
|
var NotificationItem = function NotificationItem(_ref) {
|
|
13879
14481
|
var imgUrl = _ref.imgUrl,
|
|
13880
14482
|
title = _ref.title,
|
|
13881
14483
|
message = _ref.message,
|
|
13882
14484
|
time = _ref.time;
|
|
13883
|
-
return React__default.createElement(Container$
|
|
14485
|
+
return React__default.createElement(Container$11, null, React__default.createElement(ImgWrapper, null, imgUrl ? React__default.createElement(Image$2, {
|
|
13884
14486
|
image: imgUrl
|
|
13885
14487
|
}) : React__default.createElement(EmptyImg, null)), React__default.createElement(InfoContainer, null, React__default.createElement(Title$9, null, title), React__default.createElement(Message, null, message), React__default.createElement(TimeMsg, null, time)));
|
|
13886
14488
|
};
|
|
13887
14489
|
|
|
13888
|
-
var _templateObject$
|
|
13889
|
-
var Container$
|
|
13890
|
-
var StatusContainer = styled__default.h2(_templateObject2$
|
|
14490
|
+
var _templateObject$1D, _templateObject2$1q, _templateObject3$1f;
|
|
14491
|
+
var Container$12 = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
14492
|
+
var StatusContainer = styled__default.h2(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n padding: 10px 0 10px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--grey-12);\n border-bottom: ", " 1px solid;\n margin: 0;\n"])), function (_ref) {
|
|
13891
14493
|
var theme = _ref.theme;
|
|
13892
14494
|
return theme.colors.divider;
|
|
13893
14495
|
});
|
|
13894
|
-
var NotificationWrapper = styled__default.div(_templateObject3$
|
|
14496
|
+
var NotificationWrapper = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
|
|
13895
14497
|
var colors = _ref2.theme.colors;
|
|
13896
14498
|
return colors.divider;
|
|
13897
14499
|
});
|
|
@@ -13915,21 +14517,21 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
|
|
|
13915
14517
|
unreadNotificationsText = _ref3$unreadNotificat === void 0 ? 'Read' : _ref3$unreadNotificat;
|
|
13916
14518
|
|
|
13917
14519
|
if (read.length === 0 && unread.length === 0) {
|
|
13918
|
-
return React__default.createElement(Container$
|
|
14520
|
+
return React__default.createElement(Container$12, null, React__default.createElement(StatusContainer, null, noNotificationsText));
|
|
13919
14521
|
}
|
|
13920
14522
|
|
|
13921
|
-
return React__default.createElement(Container$
|
|
14523
|
+
return React__default.createElement(Container$12, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13922
14524
|
};
|
|
13923
14525
|
|
|
13924
|
-
var _templateObject$
|
|
13925
|
-
var Container
|
|
14526
|
+
var _templateObject$1E, _templateObject2$1r, _templateObject3$1g, _templateObject4$19, _templateObject5$13, _templateObject6$P, _templateObject7$M, _templateObject8$E, _templateObject9$w, _templateObject10$s, _templateObject11$k, _templateObject12$g, _templateObject13$e, _templateObject14$c;
|
|
14527
|
+
var Container$13 = styled__default.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n align-self: flex-start;\n height: 65px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n\n ", "\n"])), function (_ref) {
|
|
13926
14528
|
var theme = _ref.theme,
|
|
13927
14529
|
colors = _ref.theme.colors;
|
|
13928
|
-
return colors && styled.css(_templateObject2$
|
|
14530
|
+
return colors && styled.css(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n background-color:", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.styles.global.mainMenu.background.backgroundColor);
|
|
13929
14531
|
});
|
|
13930
|
-
var SearchBar = styled__default.div(_templateObject3$
|
|
13931
|
-
var IconWrapper$4 = styled__default.div(_templateObject4$
|
|
13932
|
-
var SearchInput = styled__default.input(_templateObject5
|
|
14532
|
+
var SearchBar = styled__default.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n margin-left: 25px;\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
14533
|
+
var IconWrapper$4 = styled__default.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n flex: 0 40px;\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"])));
|
|
14534
|
+
var SearchInput = styled__default.input(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: ", ";\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent;\n\n ", ";\n\n &::placeholder {\n font-style: italic;\n ", ";\n }\n"])), removeAutoFillStyle, function (_ref2) {
|
|
13933
14535
|
var theme = _ref2.theme;
|
|
13934
14536
|
return theme.fontFamily.data;
|
|
13935
14537
|
}, function (_ref3) {
|
|
@@ -13939,19 +14541,19 @@ var SearchInput = styled__default.input(_templateObject5$$ || (_templateObject5$
|
|
|
13939
14541
|
var typography = _ref4.theme.typography;
|
|
13940
14542
|
return typography.global.topBar.search.placeholder;
|
|
13941
14543
|
});
|
|
13942
|
-
var ButtonArea = styled__default.div(_templateObject6$
|
|
14544
|
+
var ButtonArea = styled__default.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n height: inherit;\n padding-right: 10px;\n display: flex;\n"])));
|
|
13943
14545
|
var DrawerToggle = styled__default.button.attrs({
|
|
13944
14546
|
type: 'button'
|
|
13945
|
-
})(_templateObject7$
|
|
14547
|
+
})(_templateObject7$M || (_templateObject7$M = _taggedTemplateLiteralLoose(["\n width: 60px;\n margin: 0 5px;\n height: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n\n ", ";\n\n ", "\n"])), function (_ref5) {
|
|
13946
14548
|
var theme = _ref5.theme;
|
|
13947
|
-
return styled.css(_templateObject8$
|
|
14549
|
+
return styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid transparent;\n /*", ";*/\n\n &:hover {\n border-bottom-color: ", ";\n }\n\n transition: border ", " ", ";\n "])), theme.colors.menu.indicator, theme.colors.menu.hover, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
|
|
13948
14550
|
}, function (_ref6) {
|
|
13949
14551
|
var isActive = _ref6.isActive,
|
|
13950
14552
|
theme = _ref6.theme;
|
|
13951
|
-
return isActive && styled.css(_templateObject9$
|
|
14553
|
+
return isActive && styled.css(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n }\n "])), theme.colors.menu.active);
|
|
13952
14554
|
});
|
|
13953
|
-
var DrawerPortalWrapper = styled__default.div(_templateObject10$
|
|
13954
|
-
var Drawer = styled__default.div(_templateObject11$
|
|
14555
|
+
var DrawerPortalWrapper = styled__default.div(_templateObject10$s || (_templateObject10$s = _taggedTemplateLiteralLoose([""])));
|
|
14556
|
+
var Drawer = styled__default.div(_templateObject11$k || (_templateObject11$k = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n\n position: fixed;\n right: -10px;\n top: 65px;\n bottom: 0;\n background: ", ";\n border-left: ", " 1px solid;\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 ", ";\n\n ", "\n"])), function (_ref7) {
|
|
13955
14557
|
var theme = _ref7.theme;
|
|
13956
14558
|
return theme.fontFamily.ui;
|
|
13957
14559
|
}, function (_ref8) {
|
|
@@ -13965,12 +14567,12 @@ var Drawer = styled__default.div(_templateObject11$j || (_templateObject11$j = _
|
|
|
13965
14567
|
return baseWidth ? baseWidth : "200px";
|
|
13966
14568
|
}, function (_ref11) {
|
|
13967
14569
|
var theme = _ref11.theme;
|
|
13968
|
-
return styled.css(_templateObject12$
|
|
14570
|
+
return styled.css(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n transition:\n opacity ", " ", ",\n right ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.animation.speed.normal, theme.animation.easing.primary.easeInOut);
|
|
13969
14571
|
}, function (_ref12) {
|
|
13970
14572
|
var isOpen = _ref12.isOpen;
|
|
13971
|
-
return isOpen && styled.css(_templateObject13$
|
|
14573
|
+
return isOpen && styled.css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13972
14574
|
});
|
|
13973
|
-
var NotificationsContainer = styled__default.div(_templateObject14$
|
|
14575
|
+
var NotificationsContainer = styled__default.div(_templateObject14$c || (_templateObject14$c = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13974
14576
|
|
|
13975
14577
|
var TopBar = function TopBar(_ref13) {
|
|
13976
14578
|
var _ref13$hasNotificatio = _ref13.hasNotifications,
|
|
@@ -14038,7 +14640,7 @@ var TopBar = function TopBar(_ref13) {
|
|
|
14038
14640
|
});
|
|
14039
14641
|
};
|
|
14040
14642
|
|
|
14041
|
-
return React__default.createElement(Container
|
|
14643
|
+
return React__default.createElement(Container$13, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
|
|
14042
14644
|
icon: 'Search',
|
|
14043
14645
|
size: 18,
|
|
14044
14646
|
color: 'dimmed'
|
|
@@ -14104,8 +14706,8 @@ var TopBar = function TopBar(_ref13) {
|
|
|
14104
14706
|
}, customDrawer.customComponent)), document.body));
|
|
14105
14707
|
};
|
|
14106
14708
|
|
|
14107
|
-
var _templateObject$
|
|
14108
|
-
var TabListWrapper = styled__default.div(_templateObject$
|
|
14709
|
+
var _templateObject$1F;
|
|
14710
|
+
var TabListWrapper = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
|
|
14109
14711
|
|
|
14110
14712
|
var TabList = function TabList(_ref) {
|
|
14111
14713
|
var children = _ref.children,
|
|
@@ -14120,13 +14722,13 @@ var TabList = function TabList(_ref) {
|
|
|
14120
14722
|
return React__default.createElement(TabListWrapper, null, children);
|
|
14121
14723
|
};
|
|
14122
14724
|
|
|
14123
|
-
var _excluded$
|
|
14725
|
+
var _excluded$H = ["children", "tabFor", "onClick"];
|
|
14124
14726
|
|
|
14125
|
-
var _templateObject$
|
|
14126
|
-
var TabComponent = styled__default.div(_templateObject$
|
|
14127
|
-
var TabLabel = styled__default.label(_templateObject2$
|
|
14727
|
+
var _templateObject$1G, _templateObject2$1s, _templateObject3$1h;
|
|
14728
|
+
var TabComponent = styled__default.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
|
|
14729
|
+
var TabLabel = styled__default.label(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n height: 40px;\n ", "\n font-size: 15px;\n font-weight: ", ";\n letter-spacing: 0.09px;\n color: ", ";\n cursor: pointer;\n border-bottom: ", ";\n padding-top: 6px;\n padding-bottom: 14px;\n flex-shrink: 0;\n user-select: none;\n"])), function (_ref) {
|
|
14128
14730
|
var theme = _ref.theme;
|
|
14129
|
-
return styled.css(_templateObject3$
|
|
14731
|
+
return styled.css(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
14130
14732
|
}, function (_ref2) {
|
|
14131
14733
|
var active = _ref2.active;
|
|
14132
14734
|
return active ? '600' : '500';
|
|
@@ -14142,7 +14744,7 @@ var Tab = function Tab(_ref5) {
|
|
|
14142
14744
|
var children = _ref5.children,
|
|
14143
14745
|
tabFor = _ref5.tabFor,
|
|
14144
14746
|
onClick = _ref5.onClick,
|
|
14145
|
-
props = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
14747
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded$H);
|
|
14146
14748
|
|
|
14147
14749
|
var _useContext = React.useContext(TabContext),
|
|
14148
14750
|
selected = _useContext.selected,
|
|
@@ -14159,33 +14761,33 @@ var Tab = function Tab(_ref5) {
|
|
|
14159
14761
|
}, children));
|
|
14160
14762
|
};
|
|
14161
14763
|
|
|
14162
|
-
var _excluded$
|
|
14764
|
+
var _excluded$I = ["children", "tabId"];
|
|
14163
14765
|
|
|
14164
|
-
var _templateObject$
|
|
14165
|
-
var Container$
|
|
14766
|
+
var _templateObject$1H;
|
|
14767
|
+
var Container$14 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n"])));
|
|
14166
14768
|
|
|
14167
14769
|
var TabContent = function TabContent(_ref) {
|
|
14168
14770
|
var children = _ref.children,
|
|
14169
14771
|
tabId = _ref.tabId,
|
|
14170
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
14772
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
|
|
14171
14773
|
|
|
14172
14774
|
var _useContext = React.useContext(TabContext),
|
|
14173
14775
|
selected = _useContext.selected;
|
|
14174
14776
|
|
|
14175
|
-
return selected === tabId ? React__default.createElement(Container$
|
|
14777
|
+
return selected === tabId ? React__default.createElement(Container$14, Object.assign({}, props), children) : null;
|
|
14176
14778
|
};
|
|
14177
14779
|
|
|
14178
|
-
var _excluded$
|
|
14780
|
+
var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
14179
14781
|
|
|
14180
|
-
var _templateObject$
|
|
14181
|
-
var Container$
|
|
14182
|
-
var LinkTab = styled__default.div(_templateObject2$
|
|
14782
|
+
var _templateObject$1I, _templateObject2$1t, _templateObject3$1i, _templateObject4$1a;
|
|
14783
|
+
var Container$15 = styled__default.button(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
14784
|
+
var LinkTab = styled__default.div(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
|
|
14183
14785
|
var theme = _ref.theme;
|
|
14184
|
-
return styled.css(_templateObject3$
|
|
14786
|
+
return styled.css(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
|
|
14185
14787
|
}, function (_ref2) {
|
|
14186
14788
|
var isActive = _ref2.isActive,
|
|
14187
14789
|
theme = _ref2.theme;
|
|
14188
|
-
return isActive && styled.css(_templateObject4$
|
|
14790
|
+
return isActive && styled.css(_templateObject4$1a || (_templateObject4$1a = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.colors.menu.active, IconWrapper, theme.colors.menu.active);
|
|
14189
14791
|
});
|
|
14190
14792
|
|
|
14191
14793
|
var MobileTab = function MobileTab(_ref3) {
|
|
@@ -14194,7 +14796,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14194
14796
|
closeId = _ref3.closeId,
|
|
14195
14797
|
counter = _ref3.counter,
|
|
14196
14798
|
status = _ref3.status,
|
|
14197
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
14799
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$J);
|
|
14198
14800
|
|
|
14199
14801
|
var _useContext = React.useContext(TabContext),
|
|
14200
14802
|
selected = _useContext.selected,
|
|
@@ -14204,7 +14806,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14204
14806
|
var newValue = selected === tabId ? closeId : tabId;
|
|
14205
14807
|
setSelected(newValue);
|
|
14206
14808
|
}, [closeId, selected, setSelected]);
|
|
14207
|
-
return React__default.createElement(Container$
|
|
14809
|
+
return React__default.createElement(Container$15, Object.assign({}, props, {
|
|
14208
14810
|
onClick: function onClick() {
|
|
14209
14811
|
return onChangeTab(tabFor);
|
|
14210
14812
|
}
|
|
@@ -14217,32 +14819,32 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14217
14819
|
}))));
|
|
14218
14820
|
};
|
|
14219
14821
|
|
|
14220
|
-
var _excluded$
|
|
14822
|
+
var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
|
|
14221
14823
|
|
|
14222
|
-
var _templateObject$
|
|
14223
|
-
var Container$
|
|
14824
|
+
var _templateObject$1J, _templateObject2$1u, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$Q;
|
|
14825
|
+
var Container$16 = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
14224
14826
|
var active = _ref.active;
|
|
14225
|
-
return active ? styled.css(_templateObject2$
|
|
14827
|
+
return active ? styled.css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
14226
14828
|
}, IconWrapper);
|
|
14227
|
-
var Title$a = styled__default.div(_templateObject4$
|
|
14829
|
+
var Title$a = styled__default.div(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-family: ", ";\n letter-spacing: 0.09px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref2) {
|
|
14228
14830
|
var theme = _ref2.theme;
|
|
14229
14831
|
return theme.fontFamily.ui;
|
|
14230
14832
|
}, function (_ref3) {
|
|
14231
14833
|
var active = _ref3.active;
|
|
14232
14834
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
14233
14835
|
});
|
|
14234
|
-
var SubTitle$2 = styled__default.div(_templateObject5$
|
|
14836
|
+
var SubTitle$2 = styled__default.div(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-family: ", ";\n font-style: italic;\n color: var(--grey-a10);\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref4) {
|
|
14235
14837
|
var theme = _ref4.theme;
|
|
14236
14838
|
return theme.fontFamily.data;
|
|
14237
14839
|
});
|
|
14238
|
-
var TextGroup$1 = styled__default.div(_templateObject6$
|
|
14840
|
+
var TextGroup$1 = styled__default.div(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
|
|
14239
14841
|
|
|
14240
14842
|
var TabWithIcon = function TabWithIcon(_ref5) {
|
|
14241
14843
|
var icon = _ref5.icon,
|
|
14242
14844
|
title = _ref5.title,
|
|
14243
14845
|
subtitle = _ref5.subtitle,
|
|
14244
14846
|
tabFor = _ref5.tabFor,
|
|
14245
|
-
props = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
14847
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded$K);
|
|
14246
14848
|
|
|
14247
14849
|
var _useContext = React.useContext(TabContext),
|
|
14248
14850
|
selected = _useContext.selected,
|
|
@@ -14252,7 +14854,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
14252
14854
|
setSelected(tabId);
|
|
14253
14855
|
}, [setSelected]);
|
|
14254
14856
|
var active = selected === tabFor;
|
|
14255
|
-
return React__default.createElement(Container$
|
|
14857
|
+
return React__default.createElement(Container$16, Object.assign({}, {
|
|
14256
14858
|
active: active
|
|
14257
14859
|
}, props, {
|
|
14258
14860
|
onClick: function onClick() {
|
|
@@ -14269,9 +14871,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
14269
14871
|
}), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
|
|
14270
14872
|
};
|
|
14271
14873
|
|
|
14272
|
-
var _templateObject$
|
|
14273
|
-
var Container$
|
|
14274
|
-
var TabListWrapper$1 = styled__default.div(_templateObject2$
|
|
14874
|
+
var _templateObject$1K, _templateObject2$1v;
|
|
14875
|
+
var Container$17 = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose([""])));
|
|
14876
|
+
var TabListWrapper$1 = styled__default.div(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n padding-top: 10px;\n padding-left: ", ";\n box-shadow: 0 -5px 5px 0 var(--black-a1);\n border-bottom: 1px solid var(--grey-6);\n overflow-y: auto;\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* Internet Explorer 10+ */\n &::-webkit-scrollbar { /* WebKit */\n width: 0;\n height: 0;\n }\n"])), function (_ref) {
|
|
14275
14877
|
var paddingLeft = _ref.paddingLeft;
|
|
14276
14878
|
return paddingLeft ? paddingLeft : '87px';
|
|
14277
14879
|
});
|
|
@@ -14280,7 +14882,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
14280
14882
|
var defaultTabId = _ref2.defaultTabId,
|
|
14281
14883
|
tabList = _ref2.tabList,
|
|
14282
14884
|
paddingLeft = _ref2.paddingLeft;
|
|
14283
|
-
return React__default.createElement(Container$
|
|
14885
|
+
return React__default.createElement(Container$17, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
|
|
14284
14886
|
paddingLeft: paddingLeft
|
|
14285
14887
|
}), React__default.createElement(TabList, Object.assign({}, {
|
|
14286
14888
|
defaultTabId: defaultTabId
|
|
@@ -14307,21 +14909,21 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
14307
14909
|
})));
|
|
14308
14910
|
};
|
|
14309
14911
|
|
|
14310
|
-
var _excluded$
|
|
14912
|
+
var _excluded$L = ["closeId", "closeText"];
|
|
14311
14913
|
|
|
14312
|
-
var _templateObject$
|
|
14313
|
-
var StyledButton$7 = styled__default.button(_templateObject$
|
|
14914
|
+
var _templateObject$1L, _templateObject2$1w, _templateObject3$1k, _templateObject4$1c;
|
|
14915
|
+
var StyledButton$7 = styled__default.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n ", "\n\n ", ";\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, function (_ref) {
|
|
14314
14916
|
var theme = _ref.theme;
|
|
14315
|
-
return styled.css(_templateObject2$
|
|
14917
|
+
return styled.css(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n ", ";\n border-top: 1px solid ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"], theme.styles.global.mainMenu.background, theme.colors.divider);
|
|
14316
14918
|
}, MOBILE_CLOSE_HEIGHT);
|
|
14317
|
-
var IconContainer$
|
|
14318
|
-
var TextWrapper$1 = styled__default.div(_templateObject4$
|
|
14919
|
+
var IconContainer$3 = styled__default.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
|
|
14920
|
+
var TextWrapper$1 = styled__default.div(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
14319
14921
|
|
|
14320
14922
|
var CloseButton$1 = function CloseButton(_ref2) {
|
|
14321
14923
|
var closeId = _ref2.closeId,
|
|
14322
14924
|
_ref2$closeText = _ref2.closeText,
|
|
14323
14925
|
closeText = _ref2$closeText === void 0 ? 'CLOSE MENU' : _ref2$closeText,
|
|
14324
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
14926
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$L);
|
|
14325
14927
|
|
|
14326
14928
|
var _useContext = React.useContext(TabContext),
|
|
14327
14929
|
setSelected = _useContext.setSelected;
|
|
@@ -14330,16 +14932,16 @@ var CloseButton$1 = function CloseButton(_ref2) {
|
|
|
14330
14932
|
onClick: function onClick() {
|
|
14331
14933
|
return setSelected(closeId);
|
|
14332
14934
|
}
|
|
14333
|
-
}, props), React__default.createElement(IconContainer$
|
|
14935
|
+
}, props), React__default.createElement(IconContainer$3, null, React__default.createElement(Icon, {
|
|
14334
14936
|
icon: 'CloseCompact',
|
|
14335
14937
|
color: 'dimmed',
|
|
14336
14938
|
size: 16
|
|
14337
14939
|
})), React__default.createElement(TextWrapper$1, null, closeText));
|
|
14338
14940
|
};
|
|
14339
14941
|
|
|
14340
|
-
var _templateObject$
|
|
14341
|
-
var Container$
|
|
14342
|
-
var ContentWrapper = styled__default.div(_templateObject2$
|
|
14942
|
+
var _templateObject$1M, _templateObject2$1x;
|
|
14943
|
+
var Container$18 = styled__default.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
|
|
14944
|
+
var ContentWrapper = styled__default.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
14343
14945
|
|
|
14344
14946
|
var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
14345
14947
|
var closeId = _ref.closeId,
|
|
@@ -14348,14 +14950,14 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
|
14348
14950
|
var _useContext = React.useContext(TabContext),
|
|
14349
14951
|
selected = _useContext.selected;
|
|
14350
14952
|
|
|
14351
|
-
return selected === closeId ? null : React__default.createElement(Container$
|
|
14953
|
+
return selected === closeId ? null : React__default.createElement(Container$18, null, React__default.createElement(ContentWrapper, null, children));
|
|
14352
14954
|
};
|
|
14353
14955
|
|
|
14354
|
-
var _templateObject$
|
|
14355
|
-
var Container$
|
|
14356
|
-
var ItemWrapper = styled__default.div(_templateObject2$
|
|
14956
|
+
var _templateObject$1N, _templateObject2$1y, _templateObject3$1l;
|
|
14957
|
+
var Container$19 = styled__default.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
|
|
14958
|
+
var ItemWrapper = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n ", ";\n"])), function (_ref) {
|
|
14357
14959
|
var theme = _ref.theme;
|
|
14358
|
-
return styled.css(_templateObject3$
|
|
14960
|
+
return styled.css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
|
|
14359
14961
|
});
|
|
14360
14962
|
|
|
14361
14963
|
var MobileMenu = function MobileMenu(_ref2) {
|
|
@@ -14398,7 +15000,7 @@ var MobileMenu = function MobileMenu(_ref2) {
|
|
|
14398
15000
|
var handleCloseMenu = React.useCallback(function () {
|
|
14399
15001
|
setSelected(closeId);
|
|
14400
15002
|
}, [closeId, setSelected]);
|
|
14401
|
-
return React__default.createElement(Container$
|
|
15003
|
+
return React__default.createElement(Container$19, null, content.items.map(function (item, key) {
|
|
14402
15004
|
return React__default.createElement(ItemWrapper, {
|
|
14403
15005
|
key: key,
|
|
14404
15006
|
"data-key": key
|
|
@@ -14426,10 +15028,10 @@ var MobileMenu = function MobileMenu(_ref2) {
|
|
|
14426
15028
|
})));
|
|
14427
15029
|
};
|
|
14428
15030
|
|
|
14429
|
-
var _templateObject$
|
|
14430
|
-
var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$
|
|
14431
|
-
var LogoMark$1 = styled__default.div(_templateObject2$
|
|
14432
|
-
var SVGObject$1 = styled__default.object(_templateObject3$
|
|
15031
|
+
var _templateObject$1O, _templateObject2$1z, _templateObject3$1m;
|
|
15032
|
+
var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
|
|
15033
|
+
var LogoMark$1 = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
|
|
15034
|
+
var SVGObject$1 = styled__default.object(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose([""])));
|
|
14433
15035
|
|
|
14434
15036
|
var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
14435
15037
|
var _ref$home = _ref.home,
|
|
@@ -14451,10 +15053,10 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
14451
15053
|
}) : React__default.createElement(SvgLogoMark, null)));
|
|
14452
15054
|
};
|
|
14453
15055
|
|
|
14454
|
-
var _excluded$
|
|
15056
|
+
var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
14455
15057
|
|
|
14456
|
-
var _templateObject$
|
|
14457
|
-
var Container$
|
|
15058
|
+
var _templateObject$1P;
|
|
15059
|
+
var Container$1a = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n background: ", ";\n z-index: 100;\n display: flex;\n flex-direction: column;\n"])), function (_ref) {
|
|
14458
15060
|
var theme = _ref.theme;
|
|
14459
15061
|
return theme.styles.global.mainMenu.background;
|
|
14460
15062
|
});
|
|
@@ -14470,7 +15072,7 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
|
|
|
14470
15072
|
loggedInUser = _ref2.loggedInUser,
|
|
14471
15073
|
onLogout = _ref2.onLogout,
|
|
14472
15074
|
onLanguageToggle = _ref2.onLanguageToggle,
|
|
14473
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
15075
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
|
|
14474
15076
|
|
|
14475
15077
|
var _useContext = React.useContext(TabContext),
|
|
14476
15078
|
setSelected = _useContext.setSelected;
|
|
@@ -14478,7 +15080,7 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
|
|
|
14478
15080
|
var handleCloseMenu = React.useCallback(function () {
|
|
14479
15081
|
setSelected(closeId);
|
|
14480
15082
|
}, [closeId, setSelected]);
|
|
14481
|
-
return React__default.createElement(Container$
|
|
15083
|
+
return React__default.createElement(Container$1a, null, React__default.createElement(UserMenu, Object.assign({}, _extends({
|
|
14482
15084
|
hasLanguage: hasLanguage,
|
|
14483
15085
|
hasLogout: hasLogout,
|
|
14484
15086
|
logoutLink: logoutLink,
|
|
@@ -14493,19 +15095,19 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
|
|
|
14493
15095
|
})));
|
|
14494
15096
|
};
|
|
14495
15097
|
|
|
14496
|
-
var _excluded$
|
|
15098
|
+
var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
|
|
14497
15099
|
|
|
14498
|
-
var _templateObject$
|
|
15100
|
+
var _templateObject$1Q, _templateObject2$1A;
|
|
14499
15101
|
var CLOSE_ID = 'closeMenu';
|
|
14500
15102
|
var NOTI_TAB = 'notifications';
|
|
14501
15103
|
var USER_TAB = 'user';
|
|
14502
15104
|
var MENU_TAB = 'menu';
|
|
14503
15105
|
var CUSTOM_TAB = 'custom';
|
|
14504
|
-
var Container$
|
|
15106
|
+
var Container$1b = styled__default.nav(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 99;\n"])), function (_ref) {
|
|
14505
15107
|
var theme = _ref.theme;
|
|
14506
15108
|
return theme.styles.global.mainMenu.background.backgroundColor;
|
|
14507
15109
|
});
|
|
14508
|
-
var HeaderContainer = styled__default.div(_templateObject2$
|
|
15110
|
+
var HeaderContainer = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: ", "px;\n border-bottom: ", " 1px solid;\n\n ", " {\n flex-basis: 0;\n flex-grow: 3;\n }\n"])), MOBILE_NAVBAR_HEIGHT, function (_ref2) {
|
|
14509
15111
|
var theme = _ref2.theme;
|
|
14510
15112
|
return theme.colors.divider;
|
|
14511
15113
|
}, TabListWrapper);
|
|
@@ -14530,9 +15132,9 @@ var MobileNavbar = function MobileNavbar(_ref3) {
|
|
|
14530
15132
|
customDrawer = _ref3.customDrawer,
|
|
14531
15133
|
onLogout = _ref3.onLogout,
|
|
14532
15134
|
onLanguageToggle = _ref3.onLanguageToggle,
|
|
14533
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
15135
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$N);
|
|
14534
15136
|
|
|
14535
|
-
return React__default.createElement(Container$
|
|
15137
|
+
return React__default.createElement(Container$1b, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
|
|
14536
15138
|
home: home,
|
|
14537
15139
|
logoMark: logoMark
|
|
14538
15140
|
}, {
|
|
@@ -14589,7 +15191,7 @@ var MobileNavbar = function MobileNavbar(_ref3) {
|
|
|
14589
15191
|
})))));
|
|
14590
15192
|
};
|
|
14591
15193
|
|
|
14592
|
-
var _excluded$
|
|
15194
|
+
var _excluded$O = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
|
|
14593
15195
|
|
|
14594
15196
|
var GlobalUI = function GlobalUI(_ref) {
|
|
14595
15197
|
var content = _ref.content,
|
|
@@ -14605,7 +15207,7 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14605
15207
|
legacyLayout = _ref.legacyLayout,
|
|
14606
15208
|
children = _ref.children,
|
|
14607
15209
|
onMenuToggle = _ref.onMenuToggle,
|
|
14608
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
15210
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
|
|
14609
15211
|
|
|
14610
15212
|
var _useBreakpoints = useBreakpoints(),
|
|
14611
15213
|
isLarge = _useBreakpoints.isLarge;
|
|
@@ -14633,18 +15235,18 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14633
15235
|
}, props))), React__default.createElement(ContentArea, null, children));
|
|
14634
15236
|
};
|
|
14635
15237
|
|
|
14636
|
-
var _excluded$
|
|
15238
|
+
var _excluded$P = ["children"];
|
|
14637
15239
|
|
|
14638
|
-
var _templateObject$
|
|
14639
|
-
var Container$
|
|
14640
|
-
var LogoContainer = styled__default.div(_templateObject2$
|
|
14641
|
-
var LogoTopText = styled__default.div(_templateObject3$
|
|
14642
|
-
var LogoBottomText = styled__default.div(_templateObject4$
|
|
14643
|
-
var SidebarBox = styled__default.div(_templateObject5$
|
|
14644
|
-
var SidebarHeading = styled__default.div(_templateObject6$
|
|
14645
|
-
var SidebarLinkHeading = styled__default.div(_templateObject7$
|
|
14646
|
-
var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$
|
|
14647
|
-
var SLink = styled__default(reactRouterDom.Link)(_templateObject9$
|
|
15240
|
+
var _templateObject$1R, _templateObject2$1B, _templateObject3$1n, _templateObject4$1d, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$F, _templateObject9$x;
|
|
15241
|
+
var Container$1c = styled__default.div(_templateObject$1R || (_templateObject$1R = _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"])));
|
|
15242
|
+
var LogoContainer = styled__default.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
|
|
15243
|
+
var LogoTopText = styled__default.div(_templateObject3$1n || (_templateObject3$1n = _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"])));
|
|
15244
|
+
var LogoBottomText = styled__default.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
|
|
15245
|
+
var SidebarBox = styled__default.div(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
15246
|
+
var SidebarHeading = styled__default.div(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
|
|
15247
|
+
var SidebarLinkHeading = styled__default.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
15248
|
+
var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
15249
|
+
var SLink = styled__default(reactRouterDom.Link)(_templateObject9$x || (_templateObject9$x = _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"])));
|
|
14648
15250
|
var SidebarLink = function SidebarLink(_ref) {
|
|
14649
15251
|
var title = _ref.title,
|
|
14650
15252
|
to = _ref.to;
|
|
@@ -14660,9 +15262,9 @@ var Logo$2 = function Logo(_ref2) {
|
|
|
14660
15262
|
|
|
14661
15263
|
var Sidebar = function Sidebar(_ref3) {
|
|
14662
15264
|
var children = _ref3.children,
|
|
14663
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
15265
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$P);
|
|
14664
15266
|
|
|
14665
|
-
return React__default.createElement(Container$
|
|
15267
|
+
return React__default.createElement(Container$1c, Object.assign({}, props), children);
|
|
14666
15268
|
};
|
|
14667
15269
|
|
|
14668
15270
|
Object.defineProperty(exports, 'IconSVGs', {
|
|
@@ -14678,10 +15280,12 @@ exports.AlertWrapper = AlertWrapper;
|
|
|
14678
15280
|
exports.AreaUploadManager = AreaUploadManager;
|
|
14679
15281
|
exports.AvatarUploader = AvatarUploader;
|
|
14680
15282
|
exports.BackLink = BackLink$1;
|
|
15283
|
+
exports.BaseStyles = BaseStyles;
|
|
14681
15284
|
exports.BasicSearchInput = BasicSearchInput;
|
|
14682
15285
|
exports.Button = Button;
|
|
14683
15286
|
exports.ButtonWithIcon = ButtonWithIcon;
|
|
14684
15287
|
exports.ButtonWithLoading = ButtonWithLoading;
|
|
15288
|
+
exports.ButtonsStack = ButtonsStack;
|
|
14685
15289
|
exports.CameraPanelWrapper = CameraPanelWrapper;
|
|
14686
15290
|
exports.CameraPanels = CameraPanels;
|
|
14687
15291
|
exports.Checkbox = Checkbox;
|
|
@@ -14702,6 +15306,7 @@ exports.FilterDropdownContainer = FilterDropdownContainer;
|
|
|
14702
15306
|
exports.FilterInputs = FilterInputs;
|
|
14703
15307
|
exports.FilterLayout = FilterLayout;
|
|
14704
15308
|
exports.FiltersResults = FiltersResults;
|
|
15309
|
+
exports.FlexContentPlaceholder = FlexContentPlaceholder;
|
|
14705
15310
|
exports.Form = Form;
|
|
14706
15311
|
exports.FullWidthContentBlock = FullWidthContentBlock;
|
|
14707
15312
|
exports.GlobalUI = GlobalUI;
|
|
@@ -14747,6 +15352,7 @@ exports.SmallInput = SmallInput;
|
|
|
14747
15352
|
exports.SortDropdown = SortDropdown;
|
|
14748
15353
|
exports.Spinner = Spinner;
|
|
14749
15354
|
exports.SplitButton = SplitButton;
|
|
15355
|
+
exports.SplitLayout = SplitLayout;
|
|
14750
15356
|
exports.StatusIcon = StatusIcon;
|
|
14751
15357
|
exports.Switch = Switch;
|
|
14752
15358
|
exports.Tab = Tab;
|
|
@@ -14760,11 +15366,11 @@ exports.Tabs = Tabs;
|
|
|
14760
15366
|
exports.TabsWithIconBar = TabsWithIconBar;
|
|
14761
15367
|
exports.Tag = Tag;
|
|
14762
15368
|
exports.TagList = TagList;
|
|
14763
|
-
exports.TagListWrapper = TagListWrapper;
|
|
15369
|
+
exports.TagListWrapper = TagListWrapper$1;
|
|
14764
15370
|
exports.TextArea = TextArea;
|
|
14765
15371
|
exports.TextAreaField = TextAreaField;
|
|
14766
15372
|
exports.TextField = TextField;
|
|
14767
|
-
exports.ThemeVariables =
|
|
15373
|
+
exports.ThemeVariables = ThemeVariables;
|
|
14768
15374
|
exports.TopBar = TopBar;
|
|
14769
15375
|
exports.TypeTable = TypeTable;
|
|
14770
15376
|
exports.UtilityHeader = UtilityHeader;
|