scorer-ui-kit 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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/Misc/molecules/Pagination.d.ts +2 -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 +9 -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 +1358 -751
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1354 -751
- 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.modern.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled, { css, createGlobalStyle, keyframes } from 'styled-components';
|
|
2
|
-
import React__default, { useState, useEffect, useCallback, useRef, createElement, Fragment, useContext, useMemo, useLayoutEffect, createContext, useReducer } from 'react';
|
|
2
|
+
import React__default, { useState, useEffect, useCallback, useRef, createElement, Fragment, useContext, useMemo, useLayoutEffect, createContext, useReducer, forwardRef, useImperativeHandle } from 'react';
|
|
3
3
|
import { IconSVGs } from '@future-standard/icons';
|
|
4
4
|
export { IconSVGs } from '@future-standard/icons';
|
|
5
5
|
import ReactDom from 'react-dom';
|
|
@@ -1693,13 +1693,19 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
1693
1693
|
}
|
|
1694
1694
|
|
|
1695
1695
|
var _templateObject;
|
|
1696
|
-
var layoutVariables = 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);
|
|
1696
|
+
var layoutVariables = 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);
|
|
1697
1697
|
|
|
1698
1698
|
var _templateObject$1;
|
|
1699
|
-
var GlobalStyle = 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);
|
|
1699
|
+
var colorVariables = 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"])));
|
|
1700
1700
|
|
|
1701
|
-
var _templateObject$2
|
|
1702
|
-
var
|
|
1701
|
+
var _templateObject$2;
|
|
1702
|
+
var ThemeVariables = 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);
|
|
1703
|
+
|
|
1704
|
+
var _templateObject$3;
|
|
1705
|
+
var BaseStyles = 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"])));
|
|
1706
|
+
|
|
1707
|
+
var _templateObject$4, _templateObject2, _templateObject3;
|
|
1708
|
+
var wrapperCss = 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"])));
|
|
1703
1709
|
var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1704
1710
|
var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1705
1711
|
|
|
@@ -1726,18 +1732,47 @@ var Icon = function Icon(_ref) {
|
|
|
1726
1732
|
})) : null;
|
|
1727
1733
|
};
|
|
1728
1734
|
|
|
1729
|
-
var _templateObject$
|
|
1730
|
-
var
|
|
1731
|
-
var
|
|
1735
|
+
var _templateObject$5, _templateObject2$1;
|
|
1736
|
+
var Arrow = styled.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"])));
|
|
1737
|
+
var Container = styled.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"])));
|
|
1738
|
+
var FlexContentPlaceholder = function FlexContentPlaceholder(_ref) {
|
|
1739
|
+
var _ref$title = _ref.title,
|
|
1740
|
+
title = _ref$title === void 0 ? 'Placeholder' : _ref$title;
|
|
1741
|
+
return React__default.createElement(Container, null, title, React__default.createElement(Arrow, {
|
|
1742
|
+
className: 't l',
|
|
1743
|
+
style: {
|
|
1744
|
+
transform: 'rotate(-90deg)'
|
|
1745
|
+
}
|
|
1746
|
+
}), React__default.createElement(Arrow, {
|
|
1747
|
+
className: 't r',
|
|
1748
|
+
style: {
|
|
1749
|
+
transform: 'rotate(0deg)'
|
|
1750
|
+
}
|
|
1751
|
+
}), React__default.createElement(Arrow, {
|
|
1752
|
+
className: 'b r',
|
|
1753
|
+
style: {
|
|
1754
|
+
transform: 'rotate(90deg)'
|
|
1755
|
+
}
|
|
1756
|
+
}), React__default.createElement(Arrow, {
|
|
1757
|
+
className: 'b l',
|
|
1758
|
+
style: {
|
|
1759
|
+
transform: 'rotate(180deg)'
|
|
1760
|
+
}
|
|
1761
|
+
}));
|
|
1762
|
+
};
|
|
1763
|
+
|
|
1764
|
+
var _templateObject$6, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5;
|
|
1765
|
+
var RowCss = css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n position:relative;\n display: flex;\n flex-direction: row;\n align-items:center;\n"])));
|
|
1766
|
+
var ColumnCss = css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
1732
1767
|
var resetButtonStyles = 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"])));
|
|
1733
1768
|
var removeAutoFillStyle = 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"])));
|
|
1734
1769
|
var EllipsisStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
|
|
1735
1770
|
|
|
1736
|
-
var _templateObject$
|
|
1737
|
-
var IconButton = styled.button(_templateObject$
|
|
1771
|
+
var _templateObject$7, _templateObject2$3, _templateObject3$2, _templateObject4$1;
|
|
1772
|
+
var IconButton = styled.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) {
|
|
1738
1773
|
var _ref$selected = _ref.selected,
|
|
1739
1774
|
selected = _ref$selected === void 0 ? false : _ref$selected;
|
|
1740
|
-
return selected && css(_templateObject2$
|
|
1775
|
+
return selected && css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
|
|
1741
1776
|
});
|
|
1742
1777
|
var AlertWrapper = styled.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) {
|
|
1743
1778
|
var type = _ref2.type;
|
|
@@ -1781,10 +1816,10 @@ var AlertBar = function AlertBar(_ref3) {
|
|
|
1781
1816
|
}))) : null;
|
|
1782
1817
|
};
|
|
1783
1818
|
|
|
1784
|
-
var _templateObject$
|
|
1785
|
-
var initAnimation = keyframes(_templateObject$
|
|
1786
|
-
var closeAnimation = keyframes(_templateObject2$
|
|
1787
|
-
var Container = styled.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) {
|
|
1819
|
+
var _templateObject$8, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
1820
|
+
var initAnimation = keyframes(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, -100%);\n }\n 100% {\n transform: translate(-50%, 0%);\n }\n"])));
|
|
1821
|
+
var closeAnimation = keyframes(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: translate(-50%, 0);\n }\n 100% {\n transform: translate(-50%, -100%);\n }\n"])));
|
|
1822
|
+
var Container$1 = styled.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) {
|
|
1788
1823
|
var type = _ref.type;
|
|
1789
1824
|
return "var(--" + type + ")";
|
|
1790
1825
|
}, function (_ref2) {
|
|
@@ -1890,7 +1925,7 @@ var Notification = function Notification(_ref6) {
|
|
|
1890
1925
|
handleDismiss();
|
|
1891
1926
|
}
|
|
1892
1927
|
}, [closeNow, handleDismiss]);
|
|
1893
|
-
return message && !dismiss ? ReactDom.createPortal(React__default.createElement(Container, {
|
|
1928
|
+
return message && !dismiss ? ReactDom.createPortal(React__default.createElement(Container$1, {
|
|
1894
1929
|
type: type,
|
|
1895
1930
|
isClosing: slideUp,
|
|
1896
1931
|
onAnimationEnd: animationEnded
|
|
@@ -1913,12 +1948,12 @@ var Notification = function Notification(_ref6) {
|
|
|
1913
1948
|
|
|
1914
1949
|
var _excluded = ["design", "size", "children"];
|
|
1915
1950
|
|
|
1916
|
-
var _templateObject$
|
|
1917
|
-
var StyledButton = styled.button(_templateObject$
|
|
1951
|
+
var _templateObject$9, _templateObject2$5;
|
|
1952
|
+
var StyledButton = styled.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) {
|
|
1918
1953
|
var theme = _ref.theme,
|
|
1919
1954
|
design = _ref.design,
|
|
1920
1955
|
size = _ref.size;
|
|
1921
|
-
return css(_templateObject2$
|
|
1956
|
+
return 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);
|
|
1922
1957
|
});
|
|
1923
1958
|
|
|
1924
1959
|
var Button = function Button(_ref2) {
|
|
@@ -1939,11 +1974,11 @@ var Button = function Button(_ref2) {
|
|
|
1939
1974
|
|
|
1940
1975
|
var _excluded$1 = ["design", "size", "onClick", "disabled", "position", "icon", "children"];
|
|
1941
1976
|
|
|
1942
|
-
var _templateObject$
|
|
1943
|
-
var TextContainer = styled.div(_templateObject$
|
|
1977
|
+
var _templateObject$a, _templateObject2$6, _templateObject3$4, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1;
|
|
1978
|
+
var TextContainer = styled.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) {
|
|
1944
1979
|
var position = _ref.position,
|
|
1945
1980
|
size = _ref.size;
|
|
1946
|
-
return position && position === 'left' ? css(_templateObject2$
|
|
1981
|
+
return position && position === 'left' ? css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n padding-left: ", ";\n "])), size === 'xsmall' ? "10px" : "20px") : css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n padding-right: ", ";\n "])), size === 'xsmall' ? "10px" : "20px");
|
|
1947
1982
|
}, function (_ref2) {
|
|
1948
1983
|
var theme = _ref2.theme;
|
|
1949
1984
|
return theme && css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n transition: padding ", " ", ";\n "])), theme.animation.speed.slow, theme.animation.easing.primary.easeInOut);
|
|
@@ -1985,7 +2020,7 @@ var ButtonWithIcon = function ButtonWithIcon(_ref4) {
|
|
|
1985
2020
|
}))));
|
|
1986
2021
|
};
|
|
1987
2022
|
|
|
1988
|
-
var _templateObject$
|
|
2023
|
+
var _templateObject$b, _templateObject2$7, _templateObject3$5, _templateObject4$4;
|
|
1989
2024
|
|
|
1990
2025
|
var circumference = function circumference(radius) {
|
|
1991
2026
|
return 2 * 3.1416 * radius;
|
|
@@ -1993,10 +2028,10 @@ var circumference = function circumference(radius) {
|
|
|
1993
2028
|
|
|
1994
2029
|
var animation$1 = function animation(radius) {
|
|
1995
2030
|
var c = circumference(radius);
|
|
1996
|
-
return keyframes(_templateObject$
|
|
2031
|
+
return 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);
|
|
1997
2032
|
};
|
|
1998
2033
|
|
|
1999
|
-
var rotate = keyframes(_templateObject2$
|
|
2034
|
+
var rotate = keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
2000
2035
|
var BaseCircle = styled.circle(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n fill: none;\n"])), function (_ref) {
|
|
2001
2036
|
var styling = _ref.styling;
|
|
2002
2037
|
return "var(--spinner-" + styling + ", --grey-a8)";
|
|
@@ -2072,11 +2107,11 @@ var Spinner = function Spinner(_ref5) {
|
|
|
2072
2107
|
|
|
2073
2108
|
var _excluded$2 = ["design", "size", "onClick", "disabled", "position", "loading", "children"];
|
|
2074
2109
|
|
|
2075
|
-
var _templateObject$
|
|
2076
|
-
var LoadingButton = styled(Button)(_templateObject$
|
|
2110
|
+
var _templateObject$c, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
2111
|
+
var LoadingButton = styled(Button)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
2077
2112
|
var $loading = _ref.$loading,
|
|
2078
2113
|
theme = _ref.theme;
|
|
2079
|
-
return $loading && css(_templateObject2$
|
|
2114
|
+
return $loading && 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);
|
|
2080
2115
|
});
|
|
2081
2116
|
var TextContainer$1 = styled.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) {
|
|
2082
2117
|
var theme = _ref2.theme;
|
|
@@ -2134,8 +2169,8 @@ var ButtonWithLoading = function ButtonWithLoading(_ref6) {
|
|
|
2134
2169
|
|
|
2135
2170
|
var _excluded$3 = ["icon", "size", "weight", "color", "hoverColor"];
|
|
2136
2171
|
|
|
2137
|
-
var _templateObject$
|
|
2138
|
-
var StyledButton$1 = styled.button(_templateObject$
|
|
2172
|
+
var _templateObject$d;
|
|
2173
|
+
var StyledButton$1 = styled.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) {
|
|
2139
2174
|
var color = _ref.color;
|
|
2140
2175
|
return color;
|
|
2141
2176
|
}, IconWrapper, function (_ref2) {
|
|
@@ -2166,9 +2201,9 @@ var IconButton$2 = function IconButton(_ref3) {
|
|
|
2166
2201
|
}));
|
|
2167
2202
|
};
|
|
2168
2203
|
|
|
2169
|
-
var _templateObject$
|
|
2170
|
-
var StyledIconButton = styled(IconButton$2)(_templateObject$
|
|
2171
|
-
var Container$
|
|
2204
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4;
|
|
2205
|
+
var StyledIconButton = styled(IconButton$2)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose([""])));
|
|
2206
|
+
var Container$2 = styled.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) {
|
|
2172
2207
|
var alignment = _ref.alignment;
|
|
2173
2208
|
return alignment === 'left' && css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n justify-content: flex-start;\n "])));
|
|
2174
2209
|
}, function (_ref2) {
|
|
@@ -2183,7 +2218,7 @@ var ActionButtons = function ActionButtons(_ref4) {
|
|
|
2183
2218
|
var buttonsConfig = _ref4.buttonsConfig,
|
|
2184
2219
|
_ref4$alignment = _ref4.alignment,
|
|
2185
2220
|
alignment = _ref4$alignment === void 0 ? 'right' : _ref4$alignment;
|
|
2186
|
-
return React__default.createElement(Container$
|
|
2221
|
+
return React__default.createElement(Container$2, Object.assign({}, {
|
|
2187
2222
|
alignment: alignment
|
|
2188
2223
|
}), buttonsConfig.map(function (btn) {
|
|
2189
2224
|
var icon = btn.icon,
|
|
@@ -2206,11 +2241,11 @@ var ActionButtons = function ActionButtons(_ref4) {
|
|
|
2206
2241
|
|
|
2207
2242
|
var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
|
|
2208
2243
|
|
|
2209
|
-
var _templateObject$
|
|
2210
|
-
var ActionContainer = styled.div(_templateObject$
|
|
2244
|
+
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;
|
|
2245
|
+
var ActionContainer = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
2211
2246
|
var InputActionButton = styled.button.attrs({
|
|
2212
2247
|
type: "button"
|
|
2213
|
-
})(_templateObject2$
|
|
2248
|
+
})(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n width: 40px;\n height: 40px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n"])));
|
|
2214
2249
|
var FeedbackContainer = styled.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) {
|
|
2215
2250
|
var theme = _ref.theme;
|
|
2216
2251
|
return css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n border: 1px solid ", ";\n "])), theme.styles.form.input["default"].normal.borderColor);
|
|
@@ -2235,7 +2270,7 @@ var InputContainer = styled.div(_templateObject10$2 || (_templateObject10$2 = _t
|
|
|
2235
2270
|
var hasAction = _ref6.hasAction;
|
|
2236
2271
|
return hasAction && 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);
|
|
2237
2272
|
});
|
|
2238
|
-
var Container$
|
|
2273
|
+
var Container$3 = styled.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) {
|
|
2239
2274
|
var theme = _ref7.theme,
|
|
2240
2275
|
fieldState = _ref7.fieldState;
|
|
2241
2276
|
return theme.styles.form.input[fieldState].normal;
|
|
@@ -2308,7 +2343,7 @@ var Input = function Input(_ref13) {
|
|
|
2308
2343
|
}
|
|
2309
2344
|
};
|
|
2310
2345
|
|
|
2311
|
-
return React__default.createElement(Container$
|
|
2346
|
+
return React__default.createElement(Container$3, {
|
|
2312
2347
|
fieldState: fieldState || 'default'
|
|
2313
2348
|
}, React__default.createElement(InputContainer, {
|
|
2314
2349
|
hasAction: isActionButton
|
|
@@ -2328,15 +2363,15 @@ var Input = function Input(_ref13) {
|
|
|
2328
2363
|
|
|
2329
2364
|
var _excluded$5 = ["htmlFor", "labelText", "rightAlign", "children"];
|
|
2330
2365
|
|
|
2331
|
-
var _templateObject$
|
|
2332
|
-
var StyledLabel = styled.label(_templateObject$
|
|
2366
|
+
var _templateObject$g, _templateObject2$b;
|
|
2367
|
+
var StyledLabel = styled.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) {
|
|
2333
2368
|
var theme = _ref.theme;
|
|
2334
2369
|
return theme.fontFamily.ui;
|
|
2335
2370
|
}, function (_ref2) {
|
|
2336
2371
|
var rightAlign = _ref2.rightAlign;
|
|
2337
2372
|
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 ";
|
|
2338
2373
|
});
|
|
2339
|
-
var LabelText = styled.span(_templateObject2$
|
|
2374
|
+
var LabelText = styled.span(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n display: block;\n ", "\n"])), function (_ref3) {
|
|
2340
2375
|
var rightAlign = _ref3.rightAlign;
|
|
2341
2376
|
return rightAlign ? "\n margin-left: 12px;\n " : "\n margin-bottom: 10px;\n ";
|
|
2342
2377
|
});
|
|
@@ -2359,11 +2394,11 @@ var Label = function Label(_ref4) {
|
|
|
2359
2394
|
|
|
2360
2395
|
var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "className"];
|
|
2361
2396
|
|
|
2362
|
-
var _templateObject$
|
|
2363
|
-
var StyledInput$1 = styled.input(_templateObject$
|
|
2397
|
+
var _templateObject$h, _templateObject2$c, _templateObject3$9, _templateObject4$8, _templateObject5$6, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3;
|
|
2398
|
+
var StyledInput$1 = styled.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) {
|
|
2364
2399
|
var theme = _ref.theme,
|
|
2365
2400
|
fieldState = _ref.fieldState;
|
|
2366
|
-
return css(_templateObject2$
|
|
2401
|
+
return 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);
|
|
2367
2402
|
}, function (_ref2) {
|
|
2368
2403
|
var typography = _ref2.theme.typography;
|
|
2369
2404
|
return css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n ", ";\n &::placeholder {\n ", ";\n }\n "])), typography.form.input.value.compact, typography.form.input.placeholder.compact);
|
|
@@ -2378,7 +2413,7 @@ var UnitKey = styled.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemp
|
|
|
2378
2413
|
var theme = _ref4.theme;
|
|
2379
2414
|
return theme.fontFamily.ui;
|
|
2380
2415
|
});
|
|
2381
|
-
var Container$
|
|
2416
|
+
var Container$4 = styled.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) {
|
|
2382
2417
|
var theme = _ref5.theme,
|
|
2383
2418
|
fieldState = _ref5.fieldState;
|
|
2384
2419
|
return theme.styles.form.input[fieldState].normal;
|
|
@@ -2416,7 +2451,7 @@ var SmallInput = function SmallInput(_ref8) {
|
|
|
2416
2451
|
setUnitElementWidth(unitElement.current.clientWidth || 0);
|
|
2417
2452
|
}
|
|
2418
2453
|
}, [unitElement, setUnitElementWidth, unit]);
|
|
2419
|
-
return React__default.createElement(Container$
|
|
2454
|
+
return React__default.createElement(Container$4, {
|
|
2420
2455
|
className: className,
|
|
2421
2456
|
fieldState: fieldState || 'default'
|
|
2422
2457
|
}, React__default.createElement(Label, {
|
|
@@ -2433,7 +2468,7 @@ var SmallInput = function SmallInput(_ref8) {
|
|
|
2433
2468
|
}, unit) : null)));
|
|
2434
2469
|
};
|
|
2435
2470
|
|
|
2436
|
-
var _templateObject$
|
|
2471
|
+
var _templateObject$i, _templateObject2$d, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$2;
|
|
2437
2472
|
var SwitchPosition;
|
|
2438
2473
|
|
|
2439
2474
|
(function (SwitchPosition) {
|
|
@@ -2449,8 +2484,8 @@ var intentPosition = function intentPosition(left, checked) {
|
|
|
2449
2484
|
return intentLeft + "px";
|
|
2450
2485
|
};
|
|
2451
2486
|
|
|
2452
|
-
var RealInput = styled.input(_templateObject$
|
|
2453
|
-
var SwitchOuter = styled.div(_templateObject2$
|
|
2487
|
+
var RealInput = styled.input(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
2488
|
+
var SwitchOuter = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n"])));
|
|
2454
2489
|
|
|
2455
2490
|
var getPositionKey = function getPositionKey(switchPos) {
|
|
2456
2491
|
switch (switchPos) {
|
|
@@ -2482,7 +2517,7 @@ var LabelText$1 = styled.span(_templateObject4$9 || (_templateObject4$9 = _tagge
|
|
|
2482
2517
|
});
|
|
2483
2518
|
var IconWrapper$1 = styled.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"])));
|
|
2484
2519
|
var SpinnerWrapper = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n margin-top: 1px;\n"])));
|
|
2485
|
-
var Container$
|
|
2520
|
+
var Container$5 = styled.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) {
|
|
2486
2521
|
var theme = _ref2.theme,
|
|
2487
2522
|
position = _ref2.position,
|
|
2488
2523
|
themeState = _ref2.themeState,
|
|
@@ -2585,7 +2620,7 @@ var Switch = function Switch(_ref4) {
|
|
|
2585
2620
|
positionSwitch();
|
|
2586
2621
|
}
|
|
2587
2622
|
}, [state, setPosition, positionSwitch]);
|
|
2588
|
-
return React__default.createElement(Container$
|
|
2623
|
+
return React__default.createElement(Container$5, {
|
|
2589
2624
|
onChange: customOnChange,
|
|
2590
2625
|
activeTheming: activeTheming,
|
|
2591
2626
|
"$loading": state === 'loading',
|
|
@@ -2731,7 +2766,7 @@ function SvgNoImage() {
|
|
|
2731
2766
|
}));
|
|
2732
2767
|
}
|
|
2733
2768
|
|
|
2734
|
-
var _templateObject$
|
|
2769
|
+
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;
|
|
2735
2770
|
var CheckboxState;
|
|
2736
2771
|
|
|
2737
2772
|
(function (CheckboxState) {
|
|
@@ -2740,14 +2775,14 @@ var CheckboxState;
|
|
|
2740
2775
|
CheckboxState["Indeterminate"] = "indeterminate";
|
|
2741
2776
|
})(CheckboxState || (CheckboxState = {}));
|
|
2742
2777
|
|
|
2743
|
-
var RealInput$1 = styled.input(_templateObject$
|
|
2744
|
-
var CheckboxOuter = styled.div(_templateObject2$
|
|
2778
|
+
var RealInput$1 = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
2779
|
+
var CheckboxOuter = styled.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"])));
|
|
2745
2780
|
var CheckboxInner = styled.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"])));
|
|
2746
2781
|
var IconWrapper$2 = styled.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) {
|
|
2747
2782
|
var color = _ref.color;
|
|
2748
2783
|
return "var(--" + color + ")";
|
|
2749
2784
|
});
|
|
2750
|
-
var Container$
|
|
2785
|
+
var Container$6 = styled.label(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n user-select: none;\n\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref2) {
|
|
2751
2786
|
var visualState = _ref2.visualState,
|
|
2752
2787
|
disabled = _ref2.disabled;
|
|
2753
2788
|
return visualState === CheckboxState.Off && 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 && css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n &:hover ", " {\n border-color: var(--primary-8);\n border: var(--primary-8) 2px solid;\n }"])), CheckboxOuter), disabled && 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));
|
|
@@ -2794,7 +2829,7 @@ var Checkbox = function Checkbox(_ref5) {
|
|
|
2794
2829
|
setIsChecked(checked);
|
|
2795
2830
|
}, [checked, setIsChecked]);
|
|
2796
2831
|
var iconWeight = dimensions.icons.weights['regular'];
|
|
2797
|
-
return React__default.createElement(Container$
|
|
2832
|
+
return React__default.createElement(Container$6, Object.assign({
|
|
2798
2833
|
onChange: customOnChange
|
|
2799
2834
|
}, {
|
|
2800
2835
|
indeterminate: indeterminate,
|
|
@@ -2816,16 +2851,16 @@ var Checkbox = function Checkbox(_ref5) {
|
|
|
2816
2851
|
})), " ");
|
|
2817
2852
|
};
|
|
2818
2853
|
|
|
2819
|
-
var _templateObject$
|
|
2820
|
-
var InnerRadio = styled.div(_templateObject$
|
|
2821
|
-
var OuterRadio = styled.div(_templateObject2$
|
|
2854
|
+
var _templateObject$k, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6;
|
|
2855
|
+
var InnerRadio = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
2856
|
+
var OuterRadio = styled.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) {
|
|
2822
2857
|
var styles = _ref.theme.styles,
|
|
2823
2858
|
isChecked = _ref.isChecked,
|
|
2824
2859
|
disabled = _ref.disabled;
|
|
2825
2860
|
return styles && 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 && css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: ", ";\n }\n "])), styles.form.checkbox.unchecked.hover.borderColor), isChecked && !disabled && 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 && 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 && 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 && 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));
|
|
2826
2861
|
});
|
|
2827
2862
|
var HiddenInput = styled.input(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n padding:0;\n opacity: 0;\n"])));
|
|
2828
|
-
var Container$
|
|
2863
|
+
var Container$7 = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n"])));
|
|
2829
2864
|
|
|
2830
2865
|
var RadioButton = function RadioButton(_ref2) {
|
|
2831
2866
|
var id = _ref2.id,
|
|
@@ -2842,7 +2877,7 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2842
2877
|
onChangeCallback(checkedValue);
|
|
2843
2878
|
}, [onChangeCallback]);
|
|
2844
2879
|
var isChecked = currentChecked !== undefined ? currentChecked === value : false;
|
|
2845
|
-
return React__default.createElement(Container$
|
|
2880
|
+
return React__default.createElement(Container$7, null, React__default.createElement(HiddenInput, Object.assign({
|
|
2846
2881
|
type: 'radio'
|
|
2847
2882
|
}, {
|
|
2848
2883
|
id: id,
|
|
@@ -2861,9 +2896,9 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2861
2896
|
|
|
2862
2897
|
var _excluded$7 = ["placeholder", "fieldState", "feedbackMessage", "children"];
|
|
2863
2898
|
|
|
2864
|
-
var _templateObject$
|
|
2865
|
-
var FeedbackIcon$1 = styled.div(_templateObject$
|
|
2866
|
-
var StyledTextArea = styled.textarea(_templateObject2$
|
|
2899
|
+
var _templateObject$l, _templateObject2$g, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$8, _templateObject8$7, _templateObject9$7, _templateObject10$7;
|
|
2900
|
+
var FeedbackIcon$1 = styled.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"])));
|
|
2901
|
+
var StyledTextArea = styled.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) {
|
|
2867
2902
|
var theme = _ref.theme,
|
|
2868
2903
|
fieldState = _ref.fieldState;
|
|
2869
2904
|
return css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n border: 1px solid ", ";\n"])), theme.fontFamily.data, theme.styles.form.input[fieldState].normal.borderColor);
|
|
@@ -2879,7 +2914,7 @@ var FeedbackMessage$1 = styled.div(_templateObject7$8 || (_templateObject7$8 = _
|
|
|
2879
2914
|
var theme = _ref4.theme;
|
|
2880
2915
|
return theme.typography.form.feedback.message;
|
|
2881
2916
|
});
|
|
2882
|
-
var Container$
|
|
2917
|
+
var Container$8 = styled.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) {
|
|
2883
2918
|
var theme = _ref5.theme,
|
|
2884
2919
|
fieldState = _ref5.fieldState;
|
|
2885
2920
|
return theme.styles.form.input[fieldState].normal;
|
|
@@ -2954,7 +2989,7 @@ var TextArea = function TextArea(_ref13) {
|
|
|
2954
2989
|
}
|
|
2955
2990
|
};
|
|
2956
2991
|
|
|
2957
|
-
return React__default.createElement(Container$
|
|
2992
|
+
return React__default.createElement(Container$8, {
|
|
2958
2993
|
fieldState: fieldState || 'default'
|
|
2959
2994
|
}, React__default.createElement(StyledTextArea, Object.assign({
|
|
2960
2995
|
fieldState: fieldState || 'default',
|
|
@@ -2965,16 +3000,16 @@ var TextArea = function TextArea(_ref13) {
|
|
|
2965
3000
|
|
|
2966
3001
|
var _excluded$8 = ["placeholder", "label", "isCompact", "defaultValue", "changeCallback", "children"];
|
|
2967
3002
|
|
|
2968
|
-
var _templateObject$
|
|
2969
|
-
var SelectWrapper = styled.div(_templateObject$
|
|
2970
|
-
var StyledSelect = styled.select(_templateObject2$
|
|
3003
|
+
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;
|
|
3004
|
+
var SelectWrapper = styled.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);
|
|
3005
|
+
var StyledSelect = styled.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) {
|
|
2971
3006
|
var styles = _ref.theme.styles;
|
|
2972
3007
|
return css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input["default"].normal);
|
|
2973
3008
|
}, function (_ref2) {
|
|
2974
3009
|
var styles = _ref2.theme.styles;
|
|
2975
3010
|
return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n ", ";\n "])), styles.form.input.disabled.normal);
|
|
2976
3011
|
});
|
|
2977
|
-
var Container$
|
|
3012
|
+
var Container$9 = styled.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) {
|
|
2978
3013
|
var isCompact = _ref3.isCompact;
|
|
2979
3014
|
return isCompact && css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", " {\n span {\n margin-bottom: 6px;\n }\n }\n "])), StyledLabel);
|
|
2980
3015
|
}, function (_ref4) {
|
|
@@ -3046,7 +3081,7 @@ var SelectField = function SelectField(_ref11) {
|
|
|
3046
3081
|
size: 11
|
|
3047
3082
|
}));
|
|
3048
3083
|
}, [children, defaultValue, handleOnChange, placeholder, props]);
|
|
3049
|
-
return React__default.createElement(Container$
|
|
3084
|
+
return React__default.createElement(Container$9, Object.assign({}, {
|
|
3050
3085
|
isCompact: isCompact,
|
|
3051
3086
|
activePlaceholder: activePlaceholder
|
|
3052
3087
|
}, {
|
|
@@ -3129,14 +3164,14 @@ var isNotNumber = function isNotNumber(value) {
|
|
|
3129
3164
|
|
|
3130
3165
|
var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
|
|
3131
3166
|
|
|
3132
|
-
var _templateObject$
|
|
3167
|
+
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;
|
|
3133
3168
|
var ThumbDiameter = 16;
|
|
3134
|
-
var SliderWrapper = styled.div(_templateObject$
|
|
3169
|
+
var SliderWrapper = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
|
|
3135
3170
|
var theme = _ref.theme;
|
|
3136
3171
|
return theme.fontFamily.data;
|
|
3137
3172
|
}, function (_ref2) {
|
|
3138
3173
|
var disabled = _ref2.disabled;
|
|
3139
|
-
return disabled && css(_templateObject2$
|
|
3174
|
+
return disabled && css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n opacity: .5;\n "])));
|
|
3140
3175
|
});
|
|
3141
3176
|
var HiddenInput$1 = styled.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) {
|
|
3142
3177
|
var disabled = _ref3.disabled;
|
|
@@ -3375,9 +3410,9 @@ var SliderInput = function SliderInput(_ref12) {
|
|
|
3375
3410
|
|
|
3376
3411
|
var _excluded$a = ["text", "buttonDesign", "buttonSize", "inputCallback"];
|
|
3377
3412
|
|
|
3378
|
-
var _templateObject$
|
|
3379
|
-
var Container$
|
|
3380
|
-
var HiddenInput$2 = styled.input(_templateObject2$
|
|
3413
|
+
var _templateObject$o, _templateObject2$j, _templateObject3$g;
|
|
3414
|
+
var Container$a = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose([""])));
|
|
3415
|
+
var HiddenInput$2 = styled.input(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
3381
3416
|
var StyledButton$2 = styled(Button)(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n text-align: center;\n"])));
|
|
3382
3417
|
|
|
3383
3418
|
var InputFileButton = function InputFileButton(_ref) {
|
|
@@ -3411,7 +3446,7 @@ var InputFileButton = function InputFileButton(_ref) {
|
|
|
3411
3446
|
fileInputRef.current.click();
|
|
3412
3447
|
}
|
|
3413
3448
|
}, []);
|
|
3414
|
-
return React__default.createElement(Container$
|
|
3449
|
+
return React__default.createElement(Container$a, null, React__default.createElement(HiddenInput$2, Object.assign({}, props, {
|
|
3415
3450
|
ref: fileInputRef,
|
|
3416
3451
|
type: 'file',
|
|
3417
3452
|
onChange: handleFile
|
|
@@ -3424,9 +3459,9 @@ var InputFileButton = function InputFileButton(_ref) {
|
|
|
3424
3459
|
|
|
3425
3460
|
var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
|
|
3426
3461
|
|
|
3427
|
-
var _templateObject$
|
|
3428
|
-
var Container$
|
|
3429
|
-
var Headers = styled.div(_templateObject2$
|
|
3462
|
+
var _templateObject$p, _templateObject2$k, _templateObject3$h, _templateObject4$f, _templateObject5$d;
|
|
3463
|
+
var Container$b = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
|
|
3464
|
+
var Headers = styled.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"])));
|
|
3430
3465
|
var ValueLabel = styled(Label)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-bottom: 0;\n"])), function (_ref) {
|
|
3431
3466
|
var theme = _ref.theme;
|
|
3432
3467
|
return theme.fontFamily.ui;
|
|
@@ -3462,7 +3497,7 @@ var DurationSlider = function DurationSlider(_ref3) {
|
|
|
3462
3497
|
}, [inputCallback]);
|
|
3463
3498
|
var labelValue = controlledValue ? controlledValue : selectedValue;
|
|
3464
3499
|
var unit = isTimeUnit(timeUnit) ? getShortTextTimeUnit(labelValue, timeUnit) : timeUnit;
|
|
3465
|
-
return React__default.createElement(Container$
|
|
3500
|
+
return React__default.createElement(Container$b, null, React__default.createElement(Headers, null, React__default.createElement(Label, {
|
|
3466
3501
|
htmlFor: 'duration-slider',
|
|
3467
3502
|
labelText: title
|
|
3468
3503
|
}), React__default.createElement(ValueTitle, null, React__default.createElement(ValueLabel, {
|
|
@@ -3479,9 +3514,9 @@ var DurationSlider = function DurationSlider(_ref3) {
|
|
|
3479
3514
|
|
|
3480
3515
|
var _excluded$c = ["defaultValue", "inputCallback", "updateThumbColor", "updateTitle", "showValue", "allMarkCentered"];
|
|
3481
3516
|
|
|
3482
|
-
var _templateObject$
|
|
3483
|
-
var Container$
|
|
3484
|
-
var Headers$1 = styled.div(_templateObject2$
|
|
3517
|
+
var _templateObject$q, _templateObject2$l, _templateObject3$i;
|
|
3518
|
+
var Container$c = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
|
|
3519
|
+
var Headers$1 = styled.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) {
|
|
3485
3520
|
var allMarkCentered = _ref.allMarkCentered;
|
|
3486
3521
|
return allMarkCentered ? "padding: 0;" : "padding: 0 6px;";
|
|
3487
3522
|
});
|
|
@@ -3535,7 +3570,7 @@ var PercentageSlider = function PercentageSlider(_ref3) {
|
|
|
3535
3570
|
|
|
3536
3571
|
setSelectedValue(value);
|
|
3537
3572
|
}, [inputCallback]);
|
|
3538
|
-
return React__default.createElement(Container$
|
|
3573
|
+
return React__default.createElement(Container$c, null, React__default.createElement(Headers$1, {
|
|
3539
3574
|
allMarkCentered: allMarkCentered
|
|
3540
3575
|
}, React__default.createElement(Label, {
|
|
3541
3576
|
htmlFor: 'percentage-slider',
|
|
@@ -3636,12 +3671,12 @@ var TextAreaField = function TextAreaField(_ref) {
|
|
|
3636
3671
|
|
|
3637
3672
|
var _excluded$g = ["height", "text", "dropCallback"];
|
|
3638
3673
|
|
|
3639
|
-
var _templateObject$
|
|
3640
|
-
var Container$
|
|
3674
|
+
var _templateObject$r, _templateObject2$m;
|
|
3675
|
+
var Container$d = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n ", ";\n position: relative;\n"])), function (_ref) {
|
|
3641
3676
|
var height = _ref.height;
|
|
3642
3677
|
return height ? "height: " + height : null;
|
|
3643
3678
|
});
|
|
3644
|
-
var DragAndDrop = styled.div(_templateObject2$
|
|
3679
|
+
var DragAndDrop = styled.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) {
|
|
3645
3680
|
var inDropZone = _ref2.inDropZone;
|
|
3646
3681
|
return inDropZone ? "dashed var(--grey-8) 2px" : null;
|
|
3647
3682
|
});
|
|
@@ -3693,7 +3728,7 @@ var DropArea = function DropArea(_ref3) {
|
|
|
3693
3728
|
window.removeEventListener('drop', handleWindowDragAndDrop);
|
|
3694
3729
|
};
|
|
3695
3730
|
}, [handleWindowDragAndDrop]);
|
|
3696
|
-
return React__default.createElement(Container$
|
|
3731
|
+
return React__default.createElement(Container$d, Object.assign({}, {
|
|
3697
3732
|
height: height
|
|
3698
3733
|
}, props), React__default.createElement(DragAndDrop, Object.assign({}, {
|
|
3699
3734
|
inDropZone: inDropZone,
|
|
@@ -3965,9 +4000,9 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
|
|
|
3965
4000
|
return isDifferent;
|
|
3966
4001
|
};
|
|
3967
4002
|
|
|
3968
|
-
var _templateObject$
|
|
3969
|
-
var CropLineStyle = css(_templateObject$
|
|
3970
|
-
var TopLine = styled.div(_templateObject2$
|
|
4003
|
+
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;
|
|
4004
|
+
var CropLineStyle = css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
|
|
4005
|
+
var TopLine = styled.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);
|
|
3971
4006
|
var RightLine = styled.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);
|
|
3972
4007
|
var BottomLine = styled.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);
|
|
3973
4008
|
var LeftLine = styled.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);
|
|
@@ -4043,12 +4078,12 @@ var CropArea = function CropArea(_ref9) {
|
|
|
4043
4078
|
})));
|
|
4044
4079
|
};
|
|
4045
4080
|
|
|
4046
|
-
var _templateObject$
|
|
4047
|
-
var Container$
|
|
4081
|
+
var _templateObject$t, _templateObject2$o, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$c, _templateObject7$c, _templateObject8$b, _templateObject9$b;
|
|
4082
|
+
var Container$e = styled.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) {
|
|
4048
4083
|
var theme = _ref.theme;
|
|
4049
4084
|
return theme.fontFamily.ui;
|
|
4050
4085
|
});
|
|
4051
|
-
var InnerContainer$2 = styled.div(_templateObject2$
|
|
4086
|
+
var InnerContainer$2 = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: 99;\n"])));
|
|
4052
4087
|
var ToolHeader = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
|
|
4053
4088
|
var TextGroup = styled.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);
|
|
4054
4089
|
var ButtonsGroup = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
|
|
@@ -4321,7 +4356,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4321
4356
|
|
|
4322
4357
|
viewDimensions.isResizing = false;
|
|
4323
4358
|
}, []);
|
|
4324
|
-
return ReactDom.createPortal(React__default.createElement(Container$
|
|
4359
|
+
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, {
|
|
4325
4360
|
icon: 'Crop',
|
|
4326
4361
|
size: 20,
|
|
4327
4362
|
color: 'mono'
|
|
@@ -4371,7 +4406,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4371
4406
|
})))))), document.body);
|
|
4372
4407
|
};
|
|
4373
4408
|
|
|
4374
|
-
var _templateObject$
|
|
4409
|
+
var _templateObject$u, _templateObject2$p, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$d, _templateObject7$d, _templateObject8$c, _templateObject9$c;
|
|
4375
4410
|
var CROP_HEIGHT_AREA = 500;
|
|
4376
4411
|
var CROP_WIDTH_AREA = 475;
|
|
4377
4412
|
var CANVAS_HEIGHT = 490;
|
|
@@ -4379,9 +4414,9 @@ var CANVAS_WIDTH = 460;
|
|
|
4379
4414
|
var ratio = Math.round(CROP_WIDTH_AREA / CROP_HEIGHT_AREA * 100) / 100;
|
|
4380
4415
|
var PHOTO_HEIGHT = "150px";
|
|
4381
4416
|
var PHOTO_WIDTH = "142px";
|
|
4382
|
-
var Container$
|
|
4417
|
+
var Container$f = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: relative;\n width: ", ";\n ", "\n button {\n width: 100%;\n }\n"])), PHOTO_WIDTH, function (_ref) {
|
|
4383
4418
|
var theme = _ref.theme;
|
|
4384
|
-
return css(_templateObject2$
|
|
4419
|
+
return css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
4385
4420
|
});
|
|
4386
4421
|
var PreviewImageGroup = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
|
|
4387
4422
|
var PhotoContainerStyle = 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"])));
|
|
@@ -4485,7 +4520,7 @@ var AvatarUploader = function AvatarUploader(_ref2) {
|
|
|
4485
4520
|
setAvatarImg('');
|
|
4486
4521
|
onRemove();
|
|
4487
4522
|
}, [onRemove]);
|
|
4488
|
-
return React__default.createElement(Container$
|
|
4523
|
+
return React__default.createElement(Container$f, null, React__default.createElement(Label, {
|
|
4489
4524
|
labelText: title,
|
|
4490
4525
|
htmlFor: 'avatar-upload'
|
|
4491
4526
|
}), React__default.createElement(PreviewImageGroup, null, avatarImg ? React__default.createElement(PreviewImage, {
|
|
@@ -4541,9 +4576,9 @@ var AvatarUploader = function AvatarUploader(_ref2) {
|
|
|
4541
4576
|
|
|
4542
4577
|
var _excluded$h = ["icons", "color", "size", "weight"];
|
|
4543
4578
|
|
|
4544
|
-
var _templateObject$
|
|
4545
|
-
var Container$
|
|
4546
|
-
var PlusIcon = styled(Icon)(_templateObject2$
|
|
4579
|
+
var _templateObject$v, _templateObject2$q, _templateObject3$m;
|
|
4580
|
+
var Container$g = styled.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);
|
|
4581
|
+
var PlusIcon = styled(Icon)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose([""])));
|
|
4547
4582
|
var PlusIconWrapper = styled.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);
|
|
4548
4583
|
|
|
4549
4584
|
var BigIconsSummary = function BigIconsSummary(_ref) {
|
|
@@ -4556,7 +4591,7 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
|
|
|
4556
4591
|
weight = _ref$weight === void 0 ? 'light' : _ref$weight,
|
|
4557
4592
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
4558
4593
|
|
|
4559
|
-
return React__default.createElement(Container$
|
|
4594
|
+
return React__default.createElement(Container$g, Object.assign({}, props), icons.map(function (icon, index) {
|
|
4560
4595
|
return React__default.createElement(Fragment, {
|
|
4561
4596
|
key: "type-upload-" + icon + "}"
|
|
4562
4597
|
}, index !== 0 && React__default.createElement(PlusIconWrapper, null, React__default.createElement(PlusIcon, {
|
|
@@ -4572,12 +4607,12 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
|
|
|
4572
4607
|
}));
|
|
4573
4608
|
};
|
|
4574
4609
|
|
|
4575
|
-
var _templateObject$
|
|
4576
|
-
var Container$
|
|
4610
|
+
var _templateObject$w, _templateObject2$r, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$e;
|
|
4611
|
+
var Container$h = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
|
|
4577
4612
|
var theme = _ref.theme;
|
|
4578
4613
|
return theme.fontFamily.ui;
|
|
4579
4614
|
});
|
|
4580
|
-
var StyledDropArea = styled(DropArea)(_templateObject2$
|
|
4615
|
+
var StyledDropArea = styled(DropArea)(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
4581
4616
|
var InputButtonWrapper = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n z-index: 99;\n margin-top: 20px;\n display: flex;\n gap: 20px;\n"])));
|
|
4582
4617
|
var FilesUploadGroup = styled.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) {
|
|
4583
4618
|
var hasFiles = _ref2.hasFiles;
|
|
@@ -4678,7 +4713,7 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
|
|
|
4678
4713
|
setFiles(null);
|
|
4679
4714
|
clearFilesCallback();
|
|
4680
4715
|
}, [clearFilesCallback]);
|
|
4681
|
-
return React__default.createElement(Container$
|
|
4716
|
+
return React__default.createElement(Container$h, null, React__default.createElement(FilesUploadGroup, {
|
|
4682
4717
|
hasFiles: files !== null
|
|
4683
4718
|
}, React__default.createElement(StyledDropArea, {
|
|
4684
4719
|
dropCallback: handleFiles
|
|
@@ -4704,10 +4739,10 @@ var AreaUploadManager = function AreaUploadManager(_ref3) {
|
|
|
4704
4739
|
|
|
4705
4740
|
var _excluded$i = ["children", "spacing"];
|
|
4706
4741
|
|
|
4707
|
-
var _templateObject$
|
|
4708
|
-
var FormContainer = styled.form(_templateObject$
|
|
4742
|
+
var _templateObject$x, _templateObject2$s;
|
|
4743
|
+
var FormContainer = styled.form(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
4709
4744
|
var spacing = _ref.spacing;
|
|
4710
|
-
return spacing && css(_templateObject2$
|
|
4745
|
+
return spacing && css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n & > ", " {\n margin-bottom: ", ";\n }\n "])), StyledLabel, spacing);
|
|
4711
4746
|
});
|
|
4712
4747
|
|
|
4713
4748
|
var Form = function Form(_ref2) {
|
|
@@ -4723,10 +4758,10 @@ var Form = function Form(_ref2) {
|
|
|
4723
4758
|
|
|
4724
4759
|
var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
|
|
4725
4760
|
|
|
4726
|
-
var _templateObject$
|
|
4727
|
-
var StyledButton$3 = styled.button(_templateObject$
|
|
4761
|
+
var _templateObject$y, _templateObject2$t, _templateObject3$o, _templateObject4$k, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$d;
|
|
4762
|
+
var StyledButton$3 = styled.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) {
|
|
4728
4763
|
var noBorderTop = _ref.noBorderTop;
|
|
4729
|
-
return noBorderTop ? "border-top: none" : css(_templateObject2$
|
|
4764
|
+
return noBorderTop ? "border-top: none" : css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
|
|
4730
4765
|
}, IconWrapper, function (_ref2) {
|
|
4731
4766
|
var noBorderTop = _ref2.noBorderTop;
|
|
4732
4767
|
return noBorderTop ? "border-top: none" : css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-active-color)"])));
|
|
@@ -4887,6 +4922,41 @@ var useCopyToClipboard = function useCopyToClipboard() {
|
|
|
4887
4922
|
};
|
|
4888
4923
|
};
|
|
4889
4924
|
|
|
4925
|
+
function useLocalStorage(key, initialValue) {
|
|
4926
|
+
var _useState = useState(function () {
|
|
4927
|
+
if (typeof window === 'undefined') {
|
|
4928
|
+
return initialValue;
|
|
4929
|
+
}
|
|
4930
|
+
|
|
4931
|
+
try {
|
|
4932
|
+
var item = window.localStorage.getItem(key);
|
|
4933
|
+
return item ? JSON.parse(item) : initialValue;
|
|
4934
|
+
} catch (error) {
|
|
4935
|
+
console.log(error);
|
|
4936
|
+
return initialValue;
|
|
4937
|
+
}
|
|
4938
|
+
}),
|
|
4939
|
+
storedValue = _useState[0],
|
|
4940
|
+
setStoredValue = _useState[1];
|
|
4941
|
+
|
|
4942
|
+
var setValue = useCallback(function (value) {
|
|
4943
|
+
try {
|
|
4944
|
+
setStoredValue(function (storedValue) {
|
|
4945
|
+
var valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
4946
|
+
|
|
4947
|
+
if (typeof window !== 'undefined') {
|
|
4948
|
+
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
4949
|
+
}
|
|
4950
|
+
|
|
4951
|
+
return valueToStore;
|
|
4952
|
+
});
|
|
4953
|
+
} catch (error) {
|
|
4954
|
+
console.log(error);
|
|
4955
|
+
}
|
|
4956
|
+
}, [key]);
|
|
4957
|
+
return [storedValue, setValue];
|
|
4958
|
+
}
|
|
4959
|
+
|
|
4890
4960
|
function useClickOutside(elRef, elCallback) {
|
|
4891
4961
|
var callbackRef = useRef(elCallback);
|
|
4892
4962
|
callbackRef.current = elCallback;
|
|
@@ -4906,10 +4976,10 @@ function useClickOutside(elRef, elCallback) {
|
|
|
4906
4976
|
}, [elCallback, elRef]);
|
|
4907
4977
|
}
|
|
4908
4978
|
|
|
4909
|
-
var _templateObject$
|
|
4910
|
-
var Container$
|
|
4979
|
+
var _templateObject$z, _templateObject2$u, _templateObject3$p, _templateObject4$l, _templateObject5$j, _templateObject6$g, _templateObject7$f;
|
|
4980
|
+
var Container$i = styled.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) {
|
|
4911
4981
|
var theme = _ref.theme;
|
|
4912
|
-
return theme && css(_templateObject2$
|
|
4982
|
+
return theme && css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose([""])));
|
|
4913
4983
|
}, function (_ref2) {
|
|
4914
4984
|
var theme = _ref2.theme;
|
|
4915
4985
|
return theme.fontFamily.ui;
|
|
@@ -4971,7 +5041,7 @@ var Modal = function Modal(_ref9) {
|
|
|
4971
5041
|
|
|
4972
5042
|
onDismiss();
|
|
4973
5043
|
}, [onDismiss, dismissCallback]);
|
|
4974
|
-
return isOpen ? ReactDom.createPortal(React__default.createElement(Container$
|
|
5044
|
+
return isOpen ? ReactDom.createPortal(React__default.createElement(Container$i, null, React__default.createElement(LightBox, {
|
|
4975
5045
|
ref: lightBoxRef,
|
|
4976
5046
|
width: width,
|
|
4977
5047
|
padding: padding
|
|
@@ -5310,8 +5380,8 @@ function SvgNoImageBig(props) {
|
|
|
5310
5380
|
|
|
5311
5381
|
var _excluded$k = ["loop", "autoPlay", "controls", "muted"];
|
|
5312
5382
|
|
|
5313
|
-
var _templateObject$
|
|
5314
|
-
var MediaBoxWrapper = styled.div(_templateObject$
|
|
5383
|
+
var _templateObject$A, _templateObject2$v, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$e;
|
|
5384
|
+
var MediaBoxWrapper = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n position: relative;\n line-height: 0;\n ", ";\n ", ";\n"])), function (_ref) {
|
|
5315
5385
|
var minHeight = _ref.minHeight;
|
|
5316
5386
|
return minHeight && "min-height: " + minHeight;
|
|
5317
5387
|
}, function (_ref2) {
|
|
@@ -5319,7 +5389,7 @@ var MediaBoxWrapper = styled.div(_templateObject$x || (_templateObject$x = _tagg
|
|
|
5319
5389
|
return minWidth && "min-width: " + minWidth;
|
|
5320
5390
|
});
|
|
5321
5391
|
var mediaStyle = "\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n background-color: var(--grey-11);\n";
|
|
5322
|
-
var LoadingOverlay = styled.div(_templateObject2$
|
|
5392
|
+
var LoadingOverlay = styled.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"])));
|
|
5323
5393
|
var Video = styled.video(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n ", ";\n outline: none;\n\n ", ";\n"])), mediaStyle, function (_ref3) {
|
|
5324
5394
|
var theme = _ref3.theme,
|
|
5325
5395
|
isLoaded = _ref3.isLoaded,
|
|
@@ -5614,10 +5684,10 @@ var _excluded$l = ["mainButtonId", "buttonList", "design", "size", "textMaxWidth
|
|
|
5614
5684
|
_excluded2 = ["id", "text", "icon", "disabled"],
|
|
5615
5685
|
_excluded3 = ["id", "text", "icon", "disabled"];
|
|
5616
5686
|
|
|
5617
|
-
var _templateObject$
|
|
5687
|
+
var _templateObject$B, _templateObject2$w, _templateObject3$r;
|
|
5618
5688
|
var TOGGLE_ICON_WIDTH = 20;
|
|
5619
|
-
var Container$
|
|
5620
|
-
var MainButtonWrapper = styled.div(_templateObject2$
|
|
5689
|
+
var Container$j = styled.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"])));
|
|
5690
|
+
var MainButtonWrapper = styled.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"])));
|
|
5621
5691
|
var ToggleIcon = styled.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);
|
|
5622
5692
|
|
|
5623
5693
|
var validateMaxWidth = function validateMaxWidth(btnTextMaxWidth, textMaxWidth) {
|
|
@@ -5652,7 +5722,7 @@ var SplitButton = function SplitButton(_ref) {
|
|
|
5652
5722
|
setIsOpen(false);
|
|
5653
5723
|
}, []);
|
|
5654
5724
|
useClickOutside(containerRef, closeCallback);
|
|
5655
|
-
return React__default.createElement(Container$
|
|
5725
|
+
return React__default.createElement(Container$j, Object.assign({
|
|
5656
5726
|
ref: containerRef,
|
|
5657
5727
|
className: "split-button-" + design + " button-" + size
|
|
5658
5728
|
}, rest), React__default.createElement(MainButtonWrapper, {
|
|
@@ -5710,10 +5780,39 @@ var SplitButton = function SplitButton(_ref) {
|
|
|
5710
5780
|
})) : null);
|
|
5711
5781
|
};
|
|
5712
5782
|
|
|
5713
|
-
var
|
|
5714
|
-
|
|
5783
|
+
var _excluded$m = ["id", "buttonType", "icon", "text", "iconPosition", "size"];
|
|
5784
|
+
|
|
5785
|
+
var _templateObject$C;
|
|
5786
|
+
var Container$k = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n button {\n text-wrap: nowrap;\n }\n"])));
|
|
5787
|
+
|
|
5788
|
+
var ButtonsStack = function ButtonsStack(_ref) {
|
|
5789
|
+
var buttons = _ref.buttons;
|
|
5790
|
+
return React__default.createElement(Container$k, null, buttons.map(function (_ref2) {
|
|
5791
|
+
var id = _ref2.id,
|
|
5792
|
+
buttonType = _ref2.buttonType,
|
|
5793
|
+
icon = _ref2.icon,
|
|
5794
|
+
text = _ref2.text,
|
|
5795
|
+
iconPosition = _ref2.iconPosition,
|
|
5796
|
+
size = _ref2.size,
|
|
5797
|
+
buttonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
|
|
5798
|
+
|
|
5799
|
+
if (buttonType === 'icon-button') return React__default.createElement(ButtonWithIcon, Object.assign({
|
|
5800
|
+
key: id || "button-stack-" + id,
|
|
5801
|
+
size: size || 'small',
|
|
5802
|
+
icon: icon || '',
|
|
5803
|
+
position: iconPosition
|
|
5804
|
+
}, buttonProps), text);
|
|
5805
|
+
return React__default.createElement(Button, Object.assign({
|
|
5806
|
+
key: id || "button-stack-" + id,
|
|
5807
|
+
size: size || 'small'
|
|
5808
|
+
}, buttonProps), text);
|
|
5809
|
+
}));
|
|
5810
|
+
};
|
|
5811
|
+
|
|
5812
|
+
var _templateObject$D, _templateObject2$x, _templateObject3$s, _templateObject4$n, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f;
|
|
5813
|
+
var Container$l = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (_ref) {
|
|
5715
5814
|
var hide = _ref.hide;
|
|
5716
|
-
return hide && css(_templateObject2$
|
|
5815
|
+
return hide && css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
|
|
5717
5816
|
});
|
|
5718
5817
|
var Label$1 = styled.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);
|
|
5719
5818
|
var Item = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n padding: 12px;\n display: flex;\n justify-content: left;\n"])));
|
|
@@ -5868,7 +5967,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5868
5967
|
setDisplayHours(format(date, 'HH'));
|
|
5869
5968
|
}
|
|
5870
5969
|
}, [date, allowAfterMidnight]);
|
|
5871
|
-
return React__default.createElement(Container$
|
|
5970
|
+
return React__default.createElement(Container$l, {
|
|
5872
5971
|
hide: !hasDate && !hasTime
|
|
5873
5972
|
}, React__default.createElement(Label$1, null, title), hasDate && React__default.createElement(Item, null, React__default.createElement(IconWrap, null, React__default.createElement(Icon, {
|
|
5874
5973
|
icon: 'Date',
|
|
@@ -5913,7 +6012,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5913
6012
|
})))));
|
|
5914
6013
|
};
|
|
5915
6014
|
|
|
5916
|
-
var _templateObject$
|
|
6015
|
+
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;
|
|
5917
6016
|
|
|
5918
6017
|
var initializeInterval = function initializeInterval(day) {
|
|
5919
6018
|
return {
|
|
@@ -5927,8 +6026,8 @@ var initializeInterval = function initializeInterval(day) {
|
|
|
5927
6026
|
|
|
5928
6027
|
var TODAY = new Date();
|
|
5929
6028
|
var TODAY_INTERVAL = initializeInterval(startOfDay(new Date()));
|
|
5930
|
-
var Container$
|
|
5931
|
-
var DateTimeArea = styled.div(_templateObject2$
|
|
6029
|
+
var Container$m = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6030
|
+
var DateTimeArea = styled.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"])));
|
|
5932
6031
|
var TimeZoneOption = styled.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"])));
|
|
5933
6032
|
var TimeZoneLabel = styled.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);
|
|
5934
6033
|
var TimeZoneValue = styled.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);
|
|
@@ -6112,7 +6211,7 @@ var DatePicker = function DatePicker(_ref8) {
|
|
|
6112
6211
|
end: end
|
|
6113
6212
|
});
|
|
6114
6213
|
}, [selectedRange]);
|
|
6115
|
-
return React__default.createElement(Container$
|
|
6214
|
+
return React__default.createElement(Container$m, null, React__default.createElement(DateTimeArea, null, React__default.createElement(DateTimeBlock, Object.assign({}, {
|
|
6116
6215
|
isTimeRangeValid: isTimeRangeValid
|
|
6117
6216
|
}, {
|
|
6118
6217
|
title: dateTimeTextUpper,
|
|
@@ -6228,25 +6327,25 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
|
|
|
6228
6327
|
return validInitial instanceof Date ? initializeInterval(validInitial) : validInitial;
|
|
6229
6328
|
};
|
|
6230
6329
|
|
|
6231
|
-
var _excluded$
|
|
6330
|
+
var _excluded$n = ["children"];
|
|
6232
6331
|
|
|
6233
|
-
var _templateObject$
|
|
6234
|
-
var Container$
|
|
6235
|
-
var Inner = styled.div(_templateObject2$
|
|
6332
|
+
var _templateObject$F, _templateObject2$z;
|
|
6333
|
+
var Container$n = styled.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"])));
|
|
6334
|
+
var Inner = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n"])));
|
|
6236
6335
|
|
|
6237
6336
|
var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
6238
6337
|
var children = _ref.children,
|
|
6239
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6338
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
|
|
6240
6339
|
|
|
6241
|
-
return React__default.createElement(Container$
|
|
6340
|
+
return React__default.createElement(Container$n, Object.assign({}, props), React__default.createElement(Inner, null, children));
|
|
6242
6341
|
};
|
|
6243
6342
|
|
|
6244
|
-
var _excluded$
|
|
6343
|
+
var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "children"];
|
|
6245
6344
|
|
|
6246
|
-
var _templateObject$
|
|
6247
|
-
var FlipWrapper = styled.div(_templateObject$
|
|
6345
|
+
var _templateObject$G, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$n, _templateObject6$k, _templateObject7$j;
|
|
6346
|
+
var FlipWrapper = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
6248
6347
|
var isSortAscending = _ref.isSortAscending;
|
|
6249
|
-
return isSortAscending && css(_templateObject2$
|
|
6348
|
+
return isSortAscending && css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
6250
6349
|
});
|
|
6251
6350
|
var StyledButton$4 = styled.button(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", ";\n border-radius: 3px;\n height: 30px;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref2) {
|
|
6252
6351
|
var animation = _ref2.theme.animation;
|
|
@@ -6270,7 +6369,7 @@ var FilterButton = function FilterButton(_ref5) {
|
|
|
6270
6369
|
isSortAscending = _ref5$isSortAscending === void 0 ? false : _ref5$isSortAscending,
|
|
6271
6370
|
isOpen = _ref5.isOpen,
|
|
6272
6371
|
children = _ref5.children,
|
|
6273
|
-
props = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
6372
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
|
|
6274
6373
|
|
|
6275
6374
|
return React__default.createElement(StyledButton$4, Object.assign({
|
|
6276
6375
|
type: 'button'
|
|
@@ -6291,19 +6390,19 @@ var FilterButton = function FilterButton(_ref5) {
|
|
|
6291
6390
|
})));
|
|
6292
6391
|
};
|
|
6293
6392
|
|
|
6294
|
-
var _excluded$
|
|
6393
|
+
var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
|
|
6295
6394
|
|
|
6296
|
-
var _templateObject$
|
|
6297
|
-
var Title$1 = styled.div(_templateObject$
|
|
6395
|
+
var _templateObject$H, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$c;
|
|
6396
|
+
var Title$1 = styled.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) {
|
|
6298
6397
|
var theme = _ref.theme;
|
|
6299
6398
|
return theme.fontFamily.data;
|
|
6300
6399
|
});
|
|
6301
|
-
var FakeCheckbox = styled.div(_templateObject2$
|
|
6400
|
+
var FakeCheckbox = styled.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"])));
|
|
6302
6401
|
var FakeCheckboxInner = styled.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"])));
|
|
6303
6402
|
var CheckMarkWrapper = styled.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"])));
|
|
6304
6403
|
var FakeRadioButton = styled.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"])));
|
|
6305
6404
|
var FakeInnerRadio = styled.div(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
6306
|
-
var Container$
|
|
6405
|
+
var Container$o = styled.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_ref2) {
|
|
6307
6406
|
var styles = _ref2.theme.styles,
|
|
6308
6407
|
selected = _ref2.selected,
|
|
6309
6408
|
disabled = _ref2.disabled;
|
|
@@ -6320,10 +6419,10 @@ var FilterOption = function FilterOption(_ref3) {
|
|
|
6320
6419
|
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
6321
6420
|
_ref3$onClick = _ref3.onClick,
|
|
6322
6421
|
onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick,
|
|
6323
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
6422
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$p);
|
|
6324
6423
|
|
|
6325
6424
|
var iconWeight = dimensions.icons.weights['regular'];
|
|
6326
|
-
return React__default.createElement(Container$
|
|
6425
|
+
return React__default.createElement(Container$o, Object.assign({}, {
|
|
6327
6426
|
onClick: onClick,
|
|
6328
6427
|
disabled: disabled,
|
|
6329
6428
|
selected: selected
|
|
@@ -6335,17 +6434,17 @@ var FilterOption = function FilterOption(_ref3) {
|
|
|
6335
6434
|
})))), optionType === 'radio' && React__default.createElement(FakeRadioButton, null, React__default.createElement(FakeInnerRadio, null)), React__default.createElement(Title$1, null, title));
|
|
6336
6435
|
};
|
|
6337
6436
|
|
|
6338
|
-
var _excluded$
|
|
6437
|
+
var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
|
|
6339
6438
|
|
|
6340
|
-
var _templateObject$
|
|
6341
|
-
var Container$
|
|
6439
|
+
var _templateObject$I, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$i;
|
|
6440
|
+
var Container$p = styled.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) {
|
|
6342
6441
|
var styles = _ref.theme.styles,
|
|
6343
6442
|
theme = _ref.theme,
|
|
6344
6443
|
hasBorder = _ref.hasBorder,
|
|
6345
6444
|
disabled = _ref.disabled,
|
|
6346
6445
|
noBackground = _ref.noBackground,
|
|
6347
6446
|
width = _ref.width;
|
|
6348
|
-
return css(_templateObject2$
|
|
6447
|
+
return 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 && css(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), styles.filters.searchInput["default"].border, styles.filters.searchInput["default"].boxShadow), disabled && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && 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);
|
|
6349
6448
|
}, IconWrapper);
|
|
6350
6449
|
var CrossButton = styled.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);
|
|
6351
6450
|
var StyledInput$2 = styled.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) {
|
|
@@ -6371,9 +6470,9 @@ var BasicSearchInput = function BasicSearchInput(_ref3) {
|
|
|
6371
6470
|
_ref3$onCrossClick = _ref3.onCrossClick,
|
|
6372
6471
|
onCrossClick = _ref3$onCrossClick === void 0 ? function () {} : _ref3$onCrossClick,
|
|
6373
6472
|
width = _ref3.width,
|
|
6374
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
6473
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$q);
|
|
6375
6474
|
|
|
6376
|
-
return React__default.createElement(Container$
|
|
6475
|
+
return React__default.createElement(Container$p, Object.assign({}, {
|
|
6377
6476
|
hasBorder: hasBorder,
|
|
6378
6477
|
disabled: disabled,
|
|
6379
6478
|
noBackground: noBackground,
|
|
@@ -6412,11 +6511,11 @@ var isFilterItem = function isFilterItem(item) {
|
|
|
6412
6511
|
return (typeof item.value === 'number' || typeof item.value === 'string') && typeof item.text === 'string';
|
|
6413
6512
|
};
|
|
6414
6513
|
|
|
6415
|
-
var _excluded$
|
|
6514
|
+
var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "children", "onToggleOpenCallback", "onCloseCallback"];
|
|
6416
6515
|
|
|
6417
|
-
var _templateObject$
|
|
6418
|
-
var Container$
|
|
6419
|
-
var ButtonWrapper = styled.div(_templateObject2$
|
|
6516
|
+
var _templateObject$J, _templateObject2$D, _templateObject3$x, _templateObject4$s;
|
|
6517
|
+
var Container$q = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6518
|
+
var ButtonWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
6420
6519
|
var ContentBox = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n z-index: 100;\n min-width: ", "px;\n position: absolute;\n\n ", ";\n"])), function (_ref) {
|
|
6421
6520
|
var minWidth = _ref.minWidth;
|
|
6422
6521
|
return minWidth;
|
|
@@ -6462,7 +6561,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6462
6561
|
onToggleOpenCallback = _ref3$onToggleOpenCal === void 0 ? function () {} : _ref3$onToggleOpenCal,
|
|
6463
6562
|
_ref3$onCloseCallback = _ref3.onCloseCallback,
|
|
6464
6563
|
onCloseCallback = _ref3$onCloseCallback === void 0 ? function () {} : _ref3$onCloseCallback,
|
|
6465
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
6564
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$r);
|
|
6466
6565
|
|
|
6467
6566
|
var _useState = useState({
|
|
6468
6567
|
isOpen: false,
|
|
@@ -6507,7 +6606,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6507
6606
|
});
|
|
6508
6607
|
});
|
|
6509
6608
|
}, [onToggleOpenCallback, openState.isOpen]);
|
|
6510
|
-
return React__default.createElement(Container$
|
|
6609
|
+
return React__default.createElement(Container$q, Object.assign({
|
|
6511
6610
|
ref: mainRef
|
|
6512
6611
|
}, props), React__default.createElement(ButtonWrapper, {
|
|
6513
6612
|
ref: buttonWrapperRef
|
|
@@ -6529,23 +6628,23 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6529
6628
|
}), children));
|
|
6530
6629
|
};
|
|
6531
6630
|
|
|
6532
|
-
var _templateObject$
|
|
6533
|
-
var Container$
|
|
6534
|
-
var LoadingText = styled.div(_templateObject2$
|
|
6631
|
+
var _templateObject$K, _templateObject2$E;
|
|
6632
|
+
var Container$r = styled.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"])));
|
|
6633
|
+
var LoadingText = styled.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);
|
|
6535
6634
|
|
|
6536
6635
|
var LoadingBox = function LoadingBox(_ref) {
|
|
6537
6636
|
var loadingText = _ref.loadingText;
|
|
6538
|
-
return React__default.createElement(Container$
|
|
6637
|
+
return React__default.createElement(Container$r, null, React__default.createElement(Spinner, {
|
|
6539
6638
|
size: 'large',
|
|
6540
6639
|
styling: 'primary'
|
|
6541
6640
|
}), React__default.createElement(LoadingText, null, loadingText));
|
|
6542
6641
|
};
|
|
6543
6642
|
|
|
6544
|
-
var _excluded$
|
|
6643
|
+
var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "onSelect"];
|
|
6545
6644
|
|
|
6546
|
-
var _templateObject$
|
|
6547
|
-
var Container$
|
|
6548
|
-
var TopLine$1 = styled.div(_templateObject2$
|
|
6645
|
+
var _templateObject$L, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$j, _templateObject9$f, _templateObject10$d;
|
|
6646
|
+
var Container$s = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6647
|
+
var TopLine$1 = styled.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"])));
|
|
6549
6648
|
var InnerBox = styled.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"])));
|
|
6550
6649
|
var StyledFilterOption = styled(FilterOption)(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
|
|
6551
6650
|
var OptionList = styled.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) {
|
|
@@ -6704,7 +6803,7 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6704
6803
|
emptyResultText = _ref2.emptyResultText,
|
|
6705
6804
|
_ref2$onSelect = _ref2.onSelect,
|
|
6706
6805
|
onSelect = _ref2$onSelect === void 0 ? function () {} : _ref2$onSelect,
|
|
6707
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6806
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
|
|
6708
6807
|
|
|
6709
6808
|
var _useState = useState(selectedOrderList(list, maxDisplayedItems, selected)),
|
|
6710
6809
|
visibleList = _useState[0],
|
|
@@ -6751,7 +6850,7 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6751
6850
|
isActive = false;
|
|
6752
6851
|
};
|
|
6753
6852
|
}, [list, maxDisplayedItems, selected]);
|
|
6754
|
-
return React__default.createElement(Container$
|
|
6853
|
+
return React__default.createElement(Container$s, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
|
|
6755
6854
|
buttonIcon: buttonIcon,
|
|
6756
6855
|
buttonText: buttonText,
|
|
6757
6856
|
disabled: disabled
|
|
@@ -6788,11 +6887,11 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6788
6887
|
}) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(Gradient, null)))));
|
|
6789
6888
|
};
|
|
6790
6889
|
|
|
6791
|
-
var _excluded$
|
|
6890
|
+
var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "onSelect"];
|
|
6792
6891
|
|
|
6793
|
-
var _templateObject$
|
|
6794
|
-
var Container$
|
|
6795
|
-
var TopLine$2 = styled.div(_templateObject2$
|
|
6892
|
+
var _templateObject$M, _templateObject2$G, _templateObject3$z, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$k, _templateObject9$g;
|
|
6893
|
+
var Container$t = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6894
|
+
var TopLine$2 = styled.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"])));
|
|
6796
6895
|
var InnerBox$1 = styled.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"])));
|
|
6797
6896
|
var StyledFilterOption$1 = styled(FilterOption)(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
|
|
6798
6897
|
var OptionList$1 = styled.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n ", " {\n height: 35px;\n padding-left: 10px;\n }\n"])), StyledFilterOption$1);
|
|
@@ -6816,7 +6915,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6816
6915
|
_ref2$ascendingText = _ref2.ascendingText,
|
|
6817
6916
|
ascendingText = _ref2$ascendingText === void 0 ? 'Ascending' : _ref2$ascendingText,
|
|
6818
6917
|
onSelect = _ref2.onSelect,
|
|
6819
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6918
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
6820
6919
|
|
|
6821
6920
|
var handleSortSelect = useCallback(function (newValue) {
|
|
6822
6921
|
if (newValue.value === selected.value) {
|
|
@@ -6832,7 +6931,7 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6832
6931
|
|
|
6833
6932
|
onSelect(selected, isAscending);
|
|
6834
6933
|
}, [isSortAscending, onSelect, selected]);
|
|
6835
|
-
return React__default.createElement(Container$
|
|
6934
|
+
return React__default.createElement(Container$t, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
|
|
6836
6935
|
buttonText: buttonText,
|
|
6837
6936
|
disabled: disabled,
|
|
6838
6937
|
isSortAscending: isSortAscending
|
|
@@ -6877,9 +6976,9 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6877
6976
|
}))))));
|
|
6878
6977
|
};
|
|
6879
6978
|
|
|
6880
|
-
var _templateObject$
|
|
6881
|
-
var Container$
|
|
6882
|
-
var ContextActionBaseCSS = css(_templateObject2$
|
|
6979
|
+
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;
|
|
6980
|
+
var Container$u = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6981
|
+
var ContextActionBaseCSS = 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"])));
|
|
6883
6982
|
var ContextIcon = styled.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) {
|
|
6884
6983
|
var theme = _ref.theme;
|
|
6885
6984
|
return 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);
|
|
@@ -7021,7 +7120,7 @@ var FilterLayout = function FilterLayout(_ref6) {
|
|
|
7021
7120
|
color: openState.isOpen ? 'inverse' : 'dimmed',
|
|
7022
7121
|
size: 16
|
|
7023
7122
|
})));
|
|
7024
|
-
return React__default.createElement(Container$
|
|
7123
|
+
return React__default.createElement(Container$u, {
|
|
7025
7124
|
ref: mainRef
|
|
7026
7125
|
}, React__default.createElement(ButtonWrapper$1, {
|
|
7027
7126
|
ref: buttonWrapperRef
|
|
@@ -7063,12 +7162,12 @@ var FilterLayout = function FilterLayout(_ref6) {
|
|
|
7063
7162
|
}))))))));
|
|
7064
7163
|
};
|
|
7065
7164
|
|
|
7066
|
-
var _excluded$
|
|
7165
|
+
var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
|
|
7067
7166
|
|
|
7068
|
-
var _templateObject$
|
|
7167
|
+
var _templateObject$O;
|
|
7069
7168
|
var MIN_WIDTH = 470;
|
|
7070
7169
|
var MIN_HEIGHT = 360;
|
|
7071
|
-
var Container$
|
|
7170
|
+
var Container$v = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose([""])));
|
|
7072
7171
|
|
|
7073
7172
|
var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
7074
7173
|
var buttonIcon = _ref.buttonIcon,
|
|
@@ -7089,7 +7188,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
7089
7188
|
onUpdateCallback = _ref$onUpdateCallback === void 0 ? function () {} : _ref$onUpdateCallback,
|
|
7090
7189
|
_ref$onToggleCallback = _ref.onToggleCallback,
|
|
7091
7190
|
onToggleCallback = _ref$onToggleCallback === void 0 ? function () {} : _ref$onToggleCallback,
|
|
7092
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7191
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
7093
7192
|
|
|
7094
7193
|
var pickerValue = useRef(null);
|
|
7095
7194
|
|
|
@@ -7136,7 +7235,7 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
7136
7235
|
canReset = false;
|
|
7137
7236
|
};
|
|
7138
7237
|
}, [selected]);
|
|
7139
|
-
return React__default.createElement(Container$
|
|
7238
|
+
return React__default.createElement(Container$v, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
|
|
7140
7239
|
buttonIcon: buttonIcon,
|
|
7141
7240
|
buttonText: buttonText,
|
|
7142
7241
|
disabled: disabled
|
|
@@ -7160,11 +7259,11 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
7160
7259
|
})))));
|
|
7161
7260
|
};
|
|
7162
7261
|
|
|
7163
|
-
var _excluded$
|
|
7262
|
+
var _excluded$v = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
|
|
7164
7263
|
|
|
7165
|
-
var _templateObject$
|
|
7166
|
-
var fadeInAnimation = keyframes(_templateObject$
|
|
7167
|
-
var SearchInputWrapper = styled.div(_templateObject2$
|
|
7264
|
+
var _templateObject$P, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$t, _templateObject6$q, _templateObject7$p, _templateObject8$m;
|
|
7265
|
+
var fadeInAnimation = 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"])));
|
|
7266
|
+
var SearchInputWrapper = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
|
|
7168
7267
|
var CloseSearchInputWrapper = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
7169
7268
|
var theme = _ref.theme;
|
|
7170
7269
|
return theme && css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
|
|
@@ -7172,7 +7271,7 @@ var CloseSearchInputWrapper = styled.div(_templateObject3$B || (_templateObject3
|
|
|
7172
7271
|
var StyledFilterButton = styled(FilterButton)(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose([""])));
|
|
7173
7272
|
var StyledDropdown = styled(FilterDropdown)(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose([""])));
|
|
7174
7273
|
var StyledDropdownDatePicker = styled(DropdownDatePicker)(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose([""])));
|
|
7175
|
-
var Container$
|
|
7274
|
+
var Container$w = styled.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);
|
|
7176
7275
|
|
|
7177
7276
|
var renderDropdowns = function renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore) {
|
|
7178
7277
|
return dropdownFilters.map(function (dropdown) {
|
|
@@ -7251,7 +7350,7 @@ var FilterInputs = function FilterInputs(_ref2) {
|
|
|
7251
7350
|
showMoreText = _ref2$showMoreText === void 0 ? 'Show More' : _ref2$showMoreText,
|
|
7252
7351
|
_ref2$showLessText = _ref2.showLessText,
|
|
7253
7352
|
showLessText = _ref2$showLessText === void 0 ? 'Show Less' : _ref2$showLessText,
|
|
7254
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7353
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$v);
|
|
7255
7354
|
|
|
7256
7355
|
var _useState = useState(initialSearchFilters(searchFilters)),
|
|
7257
7356
|
visibleSearchInputs = _useState[0],
|
|
@@ -7278,7 +7377,7 @@ var FilterInputs = function FilterInputs(_ref2) {
|
|
|
7278
7377
|
setVisibleSearchInputs(_newVisible);
|
|
7279
7378
|
}
|
|
7280
7379
|
}, [visibleSearchInputs]);
|
|
7281
|
-
return React__default.createElement(Container$
|
|
7380
|
+
return React__default.createElement(Container$w, Object.assign({}, {
|
|
7282
7381
|
props: props
|
|
7283
7382
|
}), renderSearchInputs(searchFilters, visibleSearchInputs, handleVisibleSearch), renderDatePickers(datePickerFilters), renderDropdowns(dropdownFilters, showMoreDropdowns, hasShowMore), (!hasShowMore || !showMoreDropdowns) && renderAddSearchButtons(searchFilters, visibleSearchInputs, handleVisibleSearch), hasShowMore && React__default.createElement(FilterButton, {
|
|
7284
7383
|
icon: 'FilterEllipsis',
|
|
@@ -7286,11 +7385,11 @@ var FilterInputs = function FilterInputs(_ref2) {
|
|
|
7286
7385
|
}, showMoreDropdowns ? showMoreText : showLessText));
|
|
7287
7386
|
};
|
|
7288
7387
|
|
|
7289
|
-
var _excluded$
|
|
7388
|
+
var _excluded$w = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
|
|
7290
7389
|
|
|
7291
|
-
var _templateObject$
|
|
7292
|
-
var Container$
|
|
7293
|
-
var ResultsTextWrapper = styled.div(_templateObject2$
|
|
7390
|
+
var _templateObject$Q, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$u, _templateObject6$r, _templateObject7$q;
|
|
7391
|
+
var Container$x = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
|
|
7392
|
+
var ResultsTextWrapper = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-9);\n"])), fontFamily.ui);
|
|
7294
7393
|
var FilterLabel = styled.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);
|
|
7295
7394
|
var FilterLabelText = styled.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) {
|
|
7296
7395
|
var hasIcon = _ref.hasIcon;
|
|
@@ -7366,9 +7465,9 @@ var FiltersResults = function FiltersResults(_ref2) {
|
|
|
7366
7465
|
onRemoveFilter = _ref2$onRemoveFilter === void 0 ? function () {} : _ref2$onRemoveFilter,
|
|
7367
7466
|
_ref2$onClearAll = _ref2.onClearAll,
|
|
7368
7467
|
onClearAll = _ref2$onClearAll === void 0 ? function () {} : _ref2$onClearAll,
|
|
7369
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7468
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$w);
|
|
7370
7469
|
|
|
7371
|
-
return React__default.createElement(Container$
|
|
7470
|
+
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) {
|
|
7372
7471
|
var icon = _ref3.icon,
|
|
7373
7472
|
item = _ref3.item,
|
|
7374
7473
|
filterName = _ref3.filterName,
|
|
@@ -7396,12 +7495,12 @@ var FiltersResults = function FiltersResults(_ref2) {
|
|
|
7396
7495
|
}, clearText)));
|
|
7397
7496
|
};
|
|
7398
7497
|
|
|
7399
|
-
var _excluded$
|
|
7498
|
+
var _excluded$x = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
|
|
7400
7499
|
|
|
7401
|
-
var _templateObject$
|
|
7402
|
-
var Title$2 = styled.div(_templateObject$
|
|
7403
|
-
var StyledFilterResults = styled(FiltersResults)(_templateObject2$
|
|
7404
|
-
var Container$
|
|
7500
|
+
var _templateObject$R, _templateObject2$K, _templateObject3$D;
|
|
7501
|
+
var Title$2 = styled.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);
|
|
7502
|
+
var StyledFilterResults = styled(FiltersResults)(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose([""])));
|
|
7503
|
+
var Container$y = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
|
|
7405
7504
|
|
|
7406
7505
|
var getDisableValue = function getDisableValue(filtersValues, singleFilter, filter) {
|
|
7407
7506
|
var disabled = false;
|
|
@@ -7665,7 +7764,7 @@ var FilterBar = function FilterBar(_ref4) {
|
|
|
7665
7764
|
resultsDateFormat = _ref4.resultsDateFormat,
|
|
7666
7765
|
_ref4$onChangeCallbac = _ref4.onChangeCallback,
|
|
7667
7766
|
onChangeCallback = _ref4$onChangeCallbac === void 0 ? function () {} : _ref4$onChangeCallbac,
|
|
7668
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
7767
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$x);
|
|
7669
7768
|
|
|
7670
7769
|
var _useState = useState(initFilters(searchersConfig, dropdownsConfig, datePickersConfig)),
|
|
7671
7770
|
filtersValues = _useState[0],
|
|
@@ -7809,7 +7908,7 @@ var FilterBar = function FilterBar(_ref4) {
|
|
|
7809
7908
|
mountConfig = false;
|
|
7810
7909
|
};
|
|
7811
7910
|
}, [dropdownsConfigRef.current]);
|
|
7812
|
-
return React__default.createElement(Container$
|
|
7911
|
+
return React__default.createElement(Container$y, Object.assign({}, props), React__default.createElement(Title$2, null, filtersTitle), React__default.createElement(FilterInputs, Object.assign({}, {
|
|
7813
7912
|
hasShowMore: hasShowMore,
|
|
7814
7913
|
showMoreText: showMoreText,
|
|
7815
7914
|
showLessText: showLessText
|
|
@@ -7829,9 +7928,9 @@ var FilterBar = function FilterBar(_ref4) {
|
|
|
7829
7928
|
})));
|
|
7830
7929
|
};
|
|
7831
7930
|
|
|
7832
|
-
var _templateObject$
|
|
7833
|
-
var Container$
|
|
7834
|
-
var StatusCounter = styled.div(_templateObject2$
|
|
7931
|
+
var _templateObject$S, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$v;
|
|
7932
|
+
var Container$z = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
|
|
7933
|
+
var StatusCounter = styled.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) {
|
|
7835
7934
|
var animation = _ref.theme.animation;
|
|
7836
7935
|
return css(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n transition: background-color ", " ", ";\n "])), animation.speed.slow, animation.easing.primary.easeInOut);
|
|
7837
7936
|
}, function (_ref2) {
|
|
@@ -7854,7 +7953,7 @@ var StatusIcon = function StatusIcon(_ref5) {
|
|
|
7854
7953
|
counter = _ref5.counter,
|
|
7855
7954
|
_ref5$maxCounter = _ref5.maxCounter,
|
|
7856
7955
|
maxCounter = _ref5$maxCounter === void 0 ? 999 : _ref5$maxCounter;
|
|
7857
|
-
return React__default.createElement(Container$
|
|
7956
|
+
return React__default.createElement(Container$z, null, status && counter === undefined ? React__default.createElement(StatusDot, {
|
|
7858
7957
|
color: status
|
|
7859
7958
|
}) : counter === undefined ? null : React__default.createElement(StatusCounter, {
|
|
7860
7959
|
color: status
|
|
@@ -7865,9 +7964,9 @@ var StatusIcon = function StatusIcon(_ref5) {
|
|
|
7865
7964
|
}));
|
|
7866
7965
|
};
|
|
7867
7966
|
|
|
7868
|
-
var _templateObject$
|
|
7869
|
-
var HandleTouchReactionKeyframes = keyframes(_templateObject$
|
|
7870
|
-
var HandleMouseReactionKeyframes = keyframes(_templateObject2$
|
|
7967
|
+
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;
|
|
7968
|
+
var HandleTouchReactionKeyframes = 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"])));
|
|
7969
|
+
var HandleMouseReactionKeyframes = 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"])));
|
|
7871
7970
|
var HandleBase = styled.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) {
|
|
7872
7971
|
var theme = _ref.theme,
|
|
7873
7972
|
styling = _ref.styling;
|
|
@@ -8114,8 +8213,8 @@ var HandleUnit = function HandleUnit(props) {
|
|
|
8114
8213
|
}, index + pointIndexOffset))));
|
|
8115
8214
|
};
|
|
8116
8215
|
|
|
8117
|
-
var _templateObject$
|
|
8118
|
-
var ContrastLine = styled.line(_templateObject$
|
|
8216
|
+
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;
|
|
8217
|
+
var ContrastLine = styled.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) {
|
|
8119
8218
|
var theme = _ref.theme,
|
|
8120
8219
|
styling = _ref.styling;
|
|
8121
8220
|
return theme.custom.lines[styling].contrastLine.stroke;
|
|
@@ -8126,7 +8225,7 @@ var ContrastLine = styled.line(_templateObject$Q || (_templateObject$Q = _tagged
|
|
|
8126
8225
|
var showLineBorder = _ref3.showLineBorder;
|
|
8127
8226
|
return showLineBorder ? '0.35' : '0';
|
|
8128
8227
|
});
|
|
8129
|
-
var HighlightLine = styled.line(_templateObject2$
|
|
8228
|
+
var HighlightLine = styled.line(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n"])), function (_ref4) {
|
|
8130
8229
|
var theme = _ref4.theme,
|
|
8131
8230
|
styling = _ref4.styling;
|
|
8132
8231
|
return theme.custom.lines[styling].highlightLineBorder.stroke;
|
|
@@ -8404,15 +8503,15 @@ var LineUnit = function LineUnit(props) {
|
|
|
8404
8503
|
|
|
8405
8504
|
var LineSetContext = createContext({});
|
|
8406
8505
|
|
|
8407
|
-
var _templateObject$
|
|
8408
|
-
var FilledPolygon = styled.polygon(_templateObject$
|
|
8506
|
+
var _templateObject$V, _templateObject2$O, _templateObject3$H, _templateObject4$B;
|
|
8507
|
+
var FilledPolygon = styled.polygon(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
|
|
8409
8508
|
var color = _ref.color;
|
|
8410
8509
|
return color;
|
|
8411
8510
|
}, function (_ref2) {
|
|
8412
8511
|
var opacity = _ref2.opacity;
|
|
8413
8512
|
return opacity;
|
|
8414
8513
|
});
|
|
8415
|
-
var Point = styled.circle(_templateObject2$
|
|
8514
|
+
var Point = styled.circle(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
|
|
8416
8515
|
var theme = _ref3.theme,
|
|
8417
8516
|
styling = _ref3.styling;
|
|
8418
8517
|
return theme.custom.lines[styling].point.fill;
|
|
@@ -8688,9 +8787,9 @@ var LineSet = function LineSet(_ref8) {
|
|
|
8688
8787
|
}));
|
|
8689
8788
|
};
|
|
8690
8789
|
|
|
8691
|
-
var _templateObject$
|
|
8692
|
-
var Container$
|
|
8693
|
-
var LoadingOverlay$1 = styled.div(_templateObject2$
|
|
8790
|
+
var _templateObject$W, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$y;
|
|
8791
|
+
var Container$A = styled.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"])));
|
|
8792
|
+
var LoadingOverlay$1 = styled.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"])));
|
|
8694
8793
|
var Frame = styled.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) {
|
|
8695
8794
|
return props.transculent && css(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
8696
8795
|
});
|
|
@@ -8860,7 +8959,7 @@ var LineUI = function LineUI(_ref) {
|
|
|
8860
8959
|
showPoint: showPoint,
|
|
8861
8960
|
showDirectionMark: showDirectionMark
|
|
8862
8961
|
};
|
|
8863
|
-
return React__default.createElement(Container$
|
|
8962
|
+
return React__default.createElement(Container$A, null, React__default.createElement(Image$1, {
|
|
8864
8963
|
ref: imgRef,
|
|
8865
8964
|
onLoad: initScaleAndBounds,
|
|
8866
8965
|
src: src,
|
|
@@ -8895,11 +8994,11 @@ var LineUI = function LineUI(_ref) {
|
|
|
8895
8994
|
})));
|
|
8896
8995
|
};
|
|
8897
8996
|
|
|
8898
|
-
var _excluded$
|
|
8997
|
+
var _excluded$y = ["loop", "autoPlay", "controls", "muted"];
|
|
8899
8998
|
|
|
8900
|
-
var _templateObject$
|
|
8901
|
-
var Container$
|
|
8902
|
-
var Video$1 = styled.video(_templateObject2$
|
|
8999
|
+
var _templateObject$X, _templateObject2$Q, _templateObject3$J, _templateObject4$D, _templateObject5$z;
|
|
9000
|
+
var Container$B = styled.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"])));
|
|
9001
|
+
var Video$1 = styled.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"])));
|
|
8903
9002
|
var LoadingOverlay$2 = styled.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"])));
|
|
8904
9003
|
var Frame$1 = styled.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) {
|
|
8905
9004
|
return props.transcalent && css(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
@@ -8928,7 +9027,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
|
|
|
8928
9027
|
controls = _ref$videoOptions$con === void 0 ? false : _ref$videoOptions$con,
|
|
8929
9028
|
_ref$videoOptions$mut = _ref$videoOptions.muted,
|
|
8930
9029
|
muted = _ref$videoOptions$mut === void 0 ? true : _ref$videoOptions$mut,
|
|
8931
|
-
videoOptions = _objectWithoutPropertiesLoose(_ref$videoOptions, _excluded$
|
|
9030
|
+
videoOptions = _objectWithoutPropertiesLoose(_ref$videoOptions, _excluded$y),
|
|
8932
9031
|
_ref$options = _ref.options;
|
|
8933
9032
|
|
|
8934
9033
|
_ref$options = _ref$options === void 0 ? {} : _ref$options;
|
|
@@ -9083,7 +9182,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
|
|
|
9083
9182
|
showPoint: showPoint,
|
|
9084
9183
|
showDirectionMark: showDirectionMark
|
|
9085
9184
|
};
|
|
9086
|
-
return React__default.createElement(Container$
|
|
9185
|
+
return React__default.createElement(Container$B, null, React__default.createElement(Video$1, Object.assign({
|
|
9087
9186
|
ref: videoRef,
|
|
9088
9187
|
controls: controls,
|
|
9089
9188
|
muted: muted,
|
|
@@ -9123,10 +9222,10 @@ var LineUIVideo = function LineUIVideo(_ref) {
|
|
|
9123
9222
|
})));
|
|
9124
9223
|
};
|
|
9125
9224
|
|
|
9126
|
-
var _excluded$
|
|
9225
|
+
var _excluded$z = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
|
|
9127
9226
|
|
|
9128
|
-
var _templateObject$
|
|
9129
|
-
var Video$2 = styled.video(_templateObject$
|
|
9227
|
+
var _templateObject$Y;
|
|
9228
|
+
var Video$2 = styled.video(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n /* width: 800px; */\n"])));
|
|
9130
9229
|
|
|
9131
9230
|
var WebRTCPlayer = function WebRTCPlayer(_ref) {
|
|
9132
9231
|
var _ref$id = _ref.id,
|
|
@@ -9145,7 +9244,7 @@ var WebRTCPlayer = function WebRTCPlayer(_ref) {
|
|
|
9145
9244
|
autoPlay = _ref$autoPlay === void 0 ? true : _ref$autoPlay,
|
|
9146
9245
|
_ref$muted = _ref.muted,
|
|
9147
9246
|
muted = _ref$muted === void 0 ? true : _ref$muted,
|
|
9148
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9247
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
|
|
9149
9248
|
|
|
9150
9249
|
var _useState = useState(0),
|
|
9151
9250
|
connectionAttempts = _useState[0],
|
|
@@ -9450,9 +9549,9 @@ function getPeerId(id) {
|
|
|
9450
9549
|
return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
|
|
9451
9550
|
}
|
|
9452
9551
|
|
|
9453
|
-
var _templateObject$
|
|
9454
|
-
var Container$
|
|
9455
|
-
var Video$3 = styled(WebRTCPlayer)(_templateObject2$
|
|
9552
|
+
var _templateObject$Z, _templateObject2$R, _templateObject3$K, _templateObject4$E, _templateObject5$A;
|
|
9553
|
+
var Container$C = styled.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"])));
|
|
9554
|
+
var Video$3 = styled(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"])));
|
|
9456
9555
|
var LoadingOverlay$3 = styled.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"])));
|
|
9457
9556
|
var Frame$2 = styled.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) {
|
|
9458
9557
|
return props.transcalent && css(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
@@ -9628,7 +9727,7 @@ var LineUI$1 = function LineUI(_ref) {
|
|
|
9628
9727
|
showPoint: showPoint,
|
|
9629
9728
|
showDirectionMark: showDirectionMark
|
|
9630
9729
|
};
|
|
9631
|
-
return React__default.createElement(Container$
|
|
9730
|
+
return React__default.createElement(Container$C, null, React__default.createElement(Video$3, Object.assign({
|
|
9632
9731
|
onLoadedMetadata: onLoadedMetadata,
|
|
9633
9732
|
peerAddress: ws,
|
|
9634
9733
|
id: '1'
|
|
@@ -9664,7 +9763,7 @@ var LineUI$1 = function LineUI(_ref) {
|
|
|
9664
9763
|
})));
|
|
9665
9764
|
};
|
|
9666
9765
|
|
|
9667
|
-
var _excluded$
|
|
9766
|
+
var _excluded$A = ["name", "points"];
|
|
9668
9767
|
|
|
9669
9768
|
var getMidpoint = function getMidpoint(pointA, pointB) {
|
|
9670
9769
|
return {
|
|
@@ -9752,7 +9851,7 @@ var LineReducer = (function (state, action) {
|
|
|
9752
9851
|
var newState = action.state.map(function (_ref) {
|
|
9753
9852
|
var name = _ref.name,
|
|
9754
9853
|
points = _ref.points,
|
|
9755
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9854
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
|
|
9756
9855
|
|
|
9757
9856
|
return _extends({
|
|
9758
9857
|
name: name,
|
|
@@ -9801,100 +9900,198 @@ var LineReducer = (function (state, action) {
|
|
|
9801
9900
|
}
|
|
9802
9901
|
});
|
|
9803
9902
|
|
|
9804
|
-
var _templateObject$
|
|
9805
|
-
var
|
|
9806
|
-
var
|
|
9807
|
-
var
|
|
9808
|
-
|
|
9809
|
-
|
|
9810
|
-
|
|
9811
|
-
|
|
9812
|
-
|
|
9813
|
-
|
|
9814
|
-
|
|
9815
|
-
var
|
|
9816
|
-
var
|
|
9817
|
-
|
|
9818
|
-
|
|
9819
|
-
|
|
9820
|
-
|
|
9821
|
-
|
|
9822
|
-
|
|
9823
|
-
|
|
9824
|
-
updateDocTitle =
|
|
9825
|
-
|
|
9826
|
-
|
|
9903
|
+
var _templateObject$_, _templateObject2$S, _templateObject3$L, _templateObject4$F, _templateObject5$B, _templateObject6$u, _templateObject7$t;
|
|
9904
|
+
var ICON_SIZE = 24;
|
|
9905
|
+
var GAP_LEFT = 20;
|
|
9906
|
+
var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
|
|
9907
|
+
var Container$D = styled.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);
|
|
9908
|
+
var TitlesWrapper = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: ", ";\n gap: 4px;\n"])), function (_ref) {
|
|
9909
|
+
var areaTitleBottom = _ref.areaTitleBottom;
|
|
9910
|
+
return areaTitleBottom ? "column-reverse" : "column";
|
|
9911
|
+
});
|
|
9912
|
+
var IconContainer$1 = styled.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);
|
|
9913
|
+
var Title$3 = styled.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"])));
|
|
9914
|
+
var AreaTitleCss = 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"])));
|
|
9915
|
+
var AreaTitle = styled.div(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n ", "\n"])), AreaTitleCss);
|
|
9916
|
+
var AreaLinkTitle = styled(Link)(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
|
|
9917
|
+
|
|
9918
|
+
var PageTitle = function PageTitle(_ref2) {
|
|
9919
|
+
var title = _ref2.title,
|
|
9920
|
+
icon = _ref2.icon,
|
|
9921
|
+
areaTitle = _ref2.areaTitle,
|
|
9922
|
+
areaHref = _ref2.areaHref,
|
|
9923
|
+
_ref2$updateDocTitle = _ref2.updateDocTitle,
|
|
9924
|
+
updateDocTitle = _ref2$updateDocTitle === void 0 ? true : _ref2$updateDocTitle,
|
|
9925
|
+
_ref2$hideAreaInDocTi = _ref2.hideAreaInDocTitle,
|
|
9926
|
+
hideAreaInDocTitle = _ref2$hideAreaInDocTi === void 0 ? false : _ref2$hideAreaInDocTi,
|
|
9927
|
+
_ref2$areaTitleBottom = _ref2.areaTitleBottom,
|
|
9928
|
+
areaTitleBottom = _ref2$areaTitleBottom === void 0 ? false : _ref2$areaTitleBottom,
|
|
9929
|
+
_ref2$iconColor = _ref2.iconColor,
|
|
9930
|
+
iconColor = _ref2$iconColor === void 0 ? 'dimmed' : _ref2$iconColor;
|
|
9827
9931
|
useTitle(title, hideAreaInDocTitle ? undefined : areaTitle || '', undefined, updateDocTitle);
|
|
9828
|
-
return React__default.createElement(Container$
|
|
9829
|
-
|
|
9830
|
-
|
|
9831
|
-
size: 24,
|
|
9832
|
-
color: 'dimmed'
|
|
9932
|
+
return React__default.createElement(Container$D, null, icon ? React__default.createElement(IconContainer$1, null, React__default.createElement(Icon, Object.assign({
|
|
9933
|
+
size: ICON_SIZE,
|
|
9934
|
+
color: iconColor
|
|
9833
9935
|
}, {
|
|
9834
9936
|
icon: icon
|
|
9835
|
-
}))) : null
|
|
9937
|
+
}))) : null, React__default.createElement(TitlesWrapper, {
|
|
9938
|
+
areaTitleBottom: areaTitleBottom
|
|
9939
|
+
}, areaTitle && areaHref ? React__default.createElement(AreaLinkTitle, {
|
|
9940
|
+
to: areaHref
|
|
9941
|
+
}, areaTitle) : areaTitle && React__default.createElement(AreaTitle, null, areaTitle), React__default.createElement(Title$3, null, title)));
|
|
9836
9942
|
};
|
|
9837
9943
|
|
|
9838
|
-
var _templateObject
|
|
9839
|
-
var Container$
|
|
9944
|
+
var _templateObject$$, _templateObject2$T;
|
|
9945
|
+
var Container$E = styled.p(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9840
9946
|
var theme = _ref.theme;
|
|
9841
|
-
return css(_templateObject2$
|
|
9947
|
+
return css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.pageHeader.introduction);
|
|
9842
9948
|
});
|
|
9843
9949
|
|
|
9844
9950
|
var IntroductionText = function IntroductionText(_ref2) {
|
|
9845
9951
|
var children = _ref2.children;
|
|
9846
|
-
return React__default.createElement(Container$
|
|
9952
|
+
return React__default.createElement(Container$E, null, children);
|
|
9847
9953
|
};
|
|
9848
9954
|
|
|
9849
|
-
var
|
|
9850
|
-
var Container$D = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose([""])));
|
|
9955
|
+
var _excluded$B = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
|
|
9851
9956
|
|
|
9852
|
-
var
|
|
9853
|
-
|
|
9854
|
-
|
|
9855
|
-
|
|
9856
|
-
|
|
9857
|
-
|
|
9858
|
-
|
|
9859
|
-
|
|
9860
|
-
|
|
9861
|
-
|
|
9957
|
+
var _templateObject$10, _templateObject2$U, _templateObject3$M, _templateObject4$G, _templateObject5$C, _templateObject6$v, _templateObject7$u;
|
|
9958
|
+
var TextContainer$2 = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
9959
|
+
var StyledLink = styled(Link)(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n"])));
|
|
9960
|
+
var TagWrapper = styled.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) {
|
|
9961
|
+
var size = _ref.size;
|
|
9962
|
+
return size;
|
|
9963
|
+
}, function (_ref2) {
|
|
9964
|
+
var noBorder = _ref2.noBorder;
|
|
9965
|
+
return !noBorder && css(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n border: solid 1px var(--grey-8);\n border-radius: 3px;\n "])));
|
|
9966
|
+
}, function (_ref3) {
|
|
9967
|
+
var tagSize = _ref3.tagSize;
|
|
9968
|
+
return tagSize === 'compact' && css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n padding: 2px 6px;\n gap: 4px;\n "])));
|
|
9969
|
+
}, function (_ref4) {
|
|
9970
|
+
var tagSize = _ref4.tagSize;
|
|
9971
|
+
return tagSize === 'default' && css(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n padding: 3px 8px;\n "])));
|
|
9972
|
+
}, IconWrapper, function (_ref5) {
|
|
9973
|
+
var hoverColor = _ref5.hoverColor,
|
|
9974
|
+
enableHover = _ref5.enableHover;
|
|
9975
|
+
return enableHover && 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);
|
|
9976
|
+
});
|
|
9977
|
+
|
|
9978
|
+
var Tag = function Tag(_ref6) {
|
|
9979
|
+
var _ref6$icon = _ref6.icon,
|
|
9980
|
+
icon = _ref6$icon === void 0 ? '' : _ref6$icon,
|
|
9981
|
+
_ref6$size = _ref6.size,
|
|
9982
|
+
size = _ref6$size === void 0 ? 12 : _ref6$size,
|
|
9983
|
+
_ref6$weight = _ref6.weight,
|
|
9984
|
+
weight = _ref6$weight === void 0 ? 'regular' : _ref6$weight,
|
|
9985
|
+
_ref6$label = _ref6.label,
|
|
9986
|
+
label = _ref6$label === void 0 ? '' : _ref6$label,
|
|
9987
|
+
linkTo = _ref6.linkTo,
|
|
9988
|
+
_ref6$noBorder = _ref6.noBorder,
|
|
9989
|
+
noBorder = _ref6$noBorder === void 0 ? false : _ref6$noBorder,
|
|
9990
|
+
tagSize = _ref6.tagSize,
|
|
9991
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded$B);
|
|
9992
|
+
|
|
9993
|
+
var iconTagSize = useMemo(function () {
|
|
9994
|
+
return tagSize === 'compact' ? 8 : 10;
|
|
9995
|
+
}, [tagSize]);
|
|
9996
|
+
var textTagSize = useMemo(function () {
|
|
9997
|
+
return tagSize === 'compact' ? 12 : 14;
|
|
9998
|
+
}, [tagSize]);
|
|
9999
|
+
|
|
10000
|
+
var renderTag = function renderTag() {
|
|
10001
|
+
return React__default.createElement(TagWrapper, {
|
|
10002
|
+
hoverColor: 'primary',
|
|
10003
|
+
enableHover: linkTo ? true : false,
|
|
10004
|
+
size: tagSize ? textTagSize : size,
|
|
10005
|
+
tagSize: tagSize,
|
|
10006
|
+
noBorder: noBorder
|
|
10007
|
+
}, icon && React__default.createElement(Icon, Object.assign({
|
|
10008
|
+
icon: icon,
|
|
10009
|
+
size: tagSize ? iconTagSize : size,
|
|
10010
|
+
weight: weight
|
|
10011
|
+
}, props)), React__default.createElement(TextContainer$2, null, label));
|
|
10012
|
+
};
|
|
10013
|
+
|
|
10014
|
+
return linkTo ? React__default.createElement(StyledLink, {
|
|
10015
|
+
to: linkTo
|
|
10016
|
+
}, renderTag()) : renderTag();
|
|
10017
|
+
};
|
|
10018
|
+
|
|
10019
|
+
var _templateObject$11, _templateObject2$V, _templateObject3$N, _templateObject4$H, _templateObject5$D;
|
|
10020
|
+
var Container$F = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
|
|
10021
|
+
var LeftPanel = styled.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n"])));
|
|
10022
|
+
var RightPanel = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
|
|
10023
|
+
var iconLeftPanel = _ref.iconLeftPanel;
|
|
10024
|
+
return iconLeftPanel && css(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
|
|
10025
|
+
}, deviceMediaQuery.large);
|
|
10026
|
+
var TagListWrapper = styled.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"])));
|
|
10027
|
+
|
|
10028
|
+
var PageHeader = function PageHeader(_ref2) {
|
|
10029
|
+
var title = _ref2.title,
|
|
10030
|
+
icon = _ref2.icon,
|
|
10031
|
+
introductionText = _ref2.introductionText,
|
|
10032
|
+
areaHref = _ref2.areaHref,
|
|
10033
|
+
areaTitle = _ref2.areaTitle,
|
|
10034
|
+
_ref2$updateDocTitle = _ref2.updateDocTitle,
|
|
10035
|
+
updateDocTitle = _ref2$updateDocTitle === void 0 ? true : _ref2$updateDocTitle,
|
|
10036
|
+
hideAreaInDocTitle = _ref2.hideAreaInDocTitle,
|
|
10037
|
+
tagList = _ref2.tagList,
|
|
10038
|
+
areaTitleBottom = _ref2.areaTitleBottom,
|
|
10039
|
+
rightContent = _ref2.rightContent;
|
|
10040
|
+
return React__default.createElement(Container$F, null, React__default.createElement(LeftPanel, null, React__default.createElement(PageTitle, Object.assign({
|
|
10041
|
+
iconColor: 'primary-9'
|
|
10042
|
+
}, {
|
|
9862
10043
|
title: title,
|
|
9863
10044
|
icon: icon,
|
|
9864
10045
|
areaHref: areaHref,
|
|
9865
10046
|
areaTitle: areaTitle,
|
|
9866
10047
|
updateDocTitle: updateDocTitle,
|
|
9867
|
-
hideAreaInDocTitle: hideAreaInDocTitle
|
|
9868
|
-
|
|
10048
|
+
hideAreaInDocTitle: hideAreaInDocTitle,
|
|
10049
|
+
areaTitleBottom: areaTitleBottom
|
|
10050
|
+
})), !tagList ? null : React__default.createElement(TagListWrapper, null, tagList.map(function (_ref3) {
|
|
10051
|
+
var icon = _ref3.icon,
|
|
10052
|
+
label = _ref3.label,
|
|
10053
|
+
linkTo = _ref3.linkTo;
|
|
10054
|
+
return React__default.createElement(Tag, Object.assign({
|
|
10055
|
+
key: "tag-",
|
|
10056
|
+
icon: icon || '',
|
|
10057
|
+
noBorder: true,
|
|
10058
|
+
tagSize: 'compact'
|
|
10059
|
+
}, {
|
|
10060
|
+
label: label,
|
|
10061
|
+
linkTo: linkTo
|
|
10062
|
+
}));
|
|
10063
|
+
})), introductionText ? React__default.createElement(IntroductionText, null, introductionText) : null), rightContent ? React__default.createElement(RightPanel, {
|
|
10064
|
+
iconLeftPanel: !!icon
|
|
10065
|
+
}, rightContent) : null);
|
|
9869
10066
|
};
|
|
9870
10067
|
|
|
9871
|
-
var _templateObject$
|
|
9872
|
-
var Container$
|
|
10068
|
+
var _templateObject$12;
|
|
10069
|
+
var Container$G = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9873
10070
|
|
|
9874
10071
|
var MultilineContent = function MultilineContent(_ref) {
|
|
9875
10072
|
var contentArray = _ref.contentArray;
|
|
9876
|
-
return React__default.createElement(Container$
|
|
10073
|
+
return React__default.createElement(Container$G, null, contentArray.map(function (element, index) {
|
|
9877
10074
|
return React__default.createElement("div", {
|
|
9878
10075
|
key: "element-" + index
|
|
9879
10076
|
}, element);
|
|
9880
10077
|
}));
|
|
9881
10078
|
};
|
|
9882
10079
|
|
|
9883
|
-
var _templateObject$
|
|
9884
|
-
var Container$
|
|
10080
|
+
var _templateObject$13, _templateObject2$W, _templateObject3$O, _templateObject4$I, _templateObject5$E, _templateObject6$w, _templateObject7$v;
|
|
10081
|
+
var Container$H = styled.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) {
|
|
9885
10082
|
var aspect = _ref.aspect;
|
|
9886
|
-
return aspect === '16:9' && css(_templateObject2$
|
|
10083
|
+
return aspect === '16:9' && css(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
|
|
9887
10084
|
}, function (_ref2) {
|
|
9888
10085
|
var theme = _ref2.theme;
|
|
9889
|
-
return theme && css(_templateObject3$
|
|
10086
|
+
return theme && 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);
|
|
9890
10087
|
}, function (_ref3) {
|
|
9891
10088
|
var theme = _ref3.theme,
|
|
9892
10089
|
hoverZoom = _ref3.hoverZoom;
|
|
9893
|
-
return theme && hoverZoom && css(_templateObject4$
|
|
10090
|
+
return theme && hoverZoom && 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);
|
|
9894
10091
|
});
|
|
9895
|
-
var ImageWrapper = styled.img(_templateObject5$
|
|
9896
|
-
var NoImageWrapper = styled.div(_templateObject6$
|
|
9897
|
-
var PlayableDrop = styled.div(_templateObject7$
|
|
10092
|
+
var ImageWrapper = styled.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"])));
|
|
10093
|
+
var NoImageWrapper = styled.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"])));
|
|
10094
|
+
var PlayableDrop = styled.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);
|
|
9898
10095
|
|
|
9899
10096
|
var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
9900
10097
|
var _ref4$hoverZoom = _ref4.hoverZoom,
|
|
@@ -9907,7 +10104,8 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
|
9907
10104
|
retryImageLoad = _ref4$retryImageLoad === void 0 ? false : _ref4$retryImageLoad,
|
|
9908
10105
|
_ref4$retryLimit = _ref4.retryLimit,
|
|
9909
10106
|
retryLimit = _ref4$retryLimit === void 0 ? 5 : _ref4$retryLimit,
|
|
9910
|
-
closeText = _ref4.closeText
|
|
10107
|
+
closeText = _ref4.closeText,
|
|
10108
|
+
onClickThumbnail = _ref4.onClickThumbnail;
|
|
9911
10109
|
|
|
9912
10110
|
var _useState = useState(true),
|
|
9913
10111
|
showImage = _useState[0],
|
|
@@ -9996,12 +10194,12 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
|
9996
10194
|
}
|
|
9997
10195
|
});
|
|
9998
10196
|
}, [image]);
|
|
9999
|
-
return React__default.createElement(Container$
|
|
10197
|
+
return React__default.createElement(Container$H, Object.assign({}, {
|
|
10000
10198
|
hoverZoom: hoverZoom,
|
|
10001
10199
|
mediaUrl: mediaUrl
|
|
10002
10200
|
}, {
|
|
10003
10201
|
aspect: '16:9',
|
|
10004
|
-
onClick: handleModal
|
|
10202
|
+
onClick: onClickThumbnail || handleModal
|
|
10005
10203
|
}), showImage ? React__default.createElement(ImageWrapper, {
|
|
10006
10204
|
ref: imgRef,
|
|
10007
10205
|
src: imgSrc,
|
|
@@ -10014,42 +10212,42 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
|
10014
10212
|
})));
|
|
10015
10213
|
};
|
|
10016
10214
|
|
|
10017
|
-
var _templateObject
|
|
10018
|
-
var Container$
|
|
10215
|
+
var _templateObject$14, _templateObject2$X;
|
|
10216
|
+
var Container$I = styled.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) {
|
|
10019
10217
|
var status = _ref.status,
|
|
10020
10218
|
colors = _ref.theme.colors;
|
|
10021
|
-
return css(_templateObject2$
|
|
10219
|
+
return css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n background: ", ";\n content:'", "';\n "])), colors.status[status], status);
|
|
10022
10220
|
});
|
|
10023
10221
|
|
|
10024
10222
|
var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
10025
10223
|
var _ref2$status = _ref2.status,
|
|
10026
10224
|
status = _ref2$status === void 0 ? 'neutral' : _ref2$status;
|
|
10027
|
-
return React__default.createElement(Container$
|
|
10225
|
+
return React__default.createElement(Container$I, {
|
|
10028
10226
|
status: status
|
|
10029
10227
|
});
|
|
10030
10228
|
};
|
|
10031
10229
|
|
|
10032
|
-
var _templateObject$
|
|
10033
|
-
var CopyToClipboard = styled.button(_templateObject$
|
|
10230
|
+
var _templateObject$15, _templateObject2$Y, _templateObject3$P, _templateObject4$J, _templateObject5$F, _templateObject6$x, _templateObject7$w, _templateObject8$p, _templateObject9$k, _templateObject10$h, _templateObject11$b;
|
|
10231
|
+
var CopyToClipboard = styled.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) {
|
|
10034
10232
|
var theme = _ref.theme;
|
|
10035
|
-
return theme && css(_templateObject2$
|
|
10233
|
+
return theme && css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
10036
10234
|
});
|
|
10037
|
-
var CellContainer = styled.div(_templateObject3$
|
|
10235
|
+
var CellContainer = styled.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) {
|
|
10038
10236
|
return p.theme.fontFamily.data;
|
|
10039
10237
|
}, CopyToClipboard, function (_ref2) {
|
|
10040
10238
|
var theme = _ref2.theme,
|
|
10041
10239
|
cellStyle = _ref2.cellStyle,
|
|
10042
10240
|
alignment = _ref2.alignment;
|
|
10043
|
-
return cellStyle === 'firstColumn' ? css(_templateObject4$
|
|
10241
|
+
return cellStyle === 'firstColumn' ? css(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle]) : css(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData[cellStyle][alignment]);
|
|
10044
10242
|
}, function (_ref3) {
|
|
10045
10243
|
var hasCopyButton = _ref3.hasCopyButton;
|
|
10046
|
-
return hasCopyButton && css(_templateObject6$
|
|
10244
|
+
return hasCopyButton && css(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
|
|
10047
10245
|
}, function (_ref4) {
|
|
10048
10246
|
var styles = _ref4.theme.styles,
|
|
10049
10247
|
hideDivider = _ref4.hideDivider;
|
|
10050
|
-
return !hideDivider && css(_templateObject7$
|
|
10248
|
+
return !hideDivider && 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);
|
|
10051
10249
|
});
|
|
10052
|
-
var UnitText = styled.span(_templateObject8$
|
|
10250
|
+
var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
|
|
10053
10251
|
var theme = _ref5.theme;
|
|
10054
10252
|
return css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
10055
10253
|
});
|
|
@@ -10101,14 +10299,14 @@ var TypeTableCell = function TypeTableCell(_ref7) {
|
|
|
10101
10299
|
})) : null);
|
|
10102
10300
|
};
|
|
10103
10301
|
|
|
10104
|
-
var _templateObject$
|
|
10105
|
-
var RowContainer = styled.div(_templateObject$
|
|
10302
|
+
var _templateObject$16, _templateObject2$Z;
|
|
10303
|
+
var RowContainer = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n display: table-row;\n ", ";\n"])), function (_ref) {
|
|
10106
10304
|
var isEmpty = _ref.isEmpty;
|
|
10107
|
-
return isEmpty && css(_templateObject2$
|
|
10305
|
+
return isEmpty && css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n visibility: hidden;\n "])));
|
|
10108
10306
|
});
|
|
10109
10307
|
|
|
10110
10308
|
var TypeTableRow = function TypeTableRow(_ref2) {
|
|
10111
|
-
var _rowData$header, _rowData$header2, _rowData$header3, _rowData$header4, _rowData$header5;
|
|
10309
|
+
var _rowData$header, _rowData$header2, _rowData$header3, _rowData$header4, _rowData$header5, _rowData$header6;
|
|
10112
10310
|
|
|
10113
10311
|
var _ref2$selectable = _ref2.selectable,
|
|
10114
10312
|
selectable = _ref2$selectable === void 0 ? false : _ref2$selectable,
|
|
@@ -10143,11 +10341,12 @@ var TypeTableRow = function TypeTableRow(_ref2) {
|
|
|
10143
10341
|
image: (_rowData$header2 = rowData.header) === null || _rowData$header2 === void 0 ? void 0 : _rowData$header2.image,
|
|
10144
10342
|
mediaUrl: (_rowData$header3 = rowData.header) === null || _rowData$header3 === void 0 ? void 0 : _rowData$header3.mediaUrl,
|
|
10145
10343
|
mediaType: (_rowData$header4 = rowData.header) === null || _rowData$header4 === void 0 ? void 0 : _rowData$header4.mediaType,
|
|
10146
|
-
closeText: closeText
|
|
10344
|
+
closeText: closeText,
|
|
10345
|
+
onClickThumbnail: (_rowData$header5 = rowData.header) === null || _rowData$header5 === void 0 ? void 0 : _rowData$header5.onClickThumbnail
|
|
10147
10346
|
})) : null, hasTypeIcon ? React__default.createElement(TypeTableCell, {
|
|
10148
10347
|
hideDivider: true
|
|
10149
10348
|
}, React__default.createElement(Icon, {
|
|
10150
|
-
icon: ((_rowData$
|
|
10349
|
+
icon: ((_rowData$header6 = rowData.header) === null || _rowData$header6 === void 0 ? void 0 : _rowData$header6.icon) || '',
|
|
10151
10350
|
color: 'dimmed',
|
|
10152
10351
|
weight: 'regular',
|
|
10153
10352
|
size: 16
|
|
@@ -10178,17 +10377,17 @@ var TypeTableRow = function TypeTableRow(_ref2) {
|
|
|
10178
10377
|
}));
|
|
10179
10378
|
};
|
|
10180
10379
|
|
|
10181
|
-
var _templateObject$
|
|
10182
|
-
var HeaderTitle = styled.div(_templateObject$
|
|
10380
|
+
var _templateObject$17, _templateObject2$_, _templateObject3$Q, _templateObject4$K;
|
|
10381
|
+
var HeaderTitle = styled.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) {
|
|
10183
10382
|
var ascending = _ref.ascending;
|
|
10184
|
-
return ascending && css(_templateObject2$
|
|
10383
|
+
return ascending && 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 "])));
|
|
10185
10384
|
}, function (_ref2) {
|
|
10186
10385
|
var isSortActive = _ref2.isSortActive;
|
|
10187
|
-
return isSortActive && css(_templateObject3$
|
|
10386
|
+
return isSortActive && css(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
|
|
10188
10387
|
}, function (_ref3) {
|
|
10189
10388
|
var styles = _ref3.theme.styles,
|
|
10190
10389
|
sortable = _ref3.sortable;
|
|
10191
|
-
return sortable && css(_templateObject4$
|
|
10390
|
+
return sortable && 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);
|
|
10192
10391
|
});
|
|
10193
10392
|
|
|
10194
10393
|
var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
@@ -10218,28 +10417,28 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
10218
10417
|
}), header);
|
|
10219
10418
|
};
|
|
10220
10419
|
|
|
10221
|
-
var _templateObject$
|
|
10222
|
-
var HeaderRow = styled.div(_templateObject$
|
|
10223
|
-
var HeaderItem = styled.div(_templateObject2
|
|
10420
|
+
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;
|
|
10421
|
+
var HeaderRow = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
10422
|
+
var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
|
|
10224
10423
|
return p.theme.fontFamily.ui;
|
|
10225
10424
|
}, function (_ref) {
|
|
10226
10425
|
var hasCopyButton = _ref.hasCopyButton;
|
|
10227
|
-
return hasCopyButton && css(_templateObject3$
|
|
10426
|
+
return hasCopyButton && css(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
|
|
10228
10427
|
}, function (_ref2) {
|
|
10229
10428
|
var theme = _ref2.theme,
|
|
10230
10429
|
alignment = _ref2.alignment,
|
|
10231
10430
|
headerStyle = _ref2.headerStyle;
|
|
10232
|
-
return alignment ? css(_templateObject4$
|
|
10431
|
+
return alignment ? css(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle][alignment]) : css(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table[headerStyle]['left']);
|
|
10233
10432
|
}, function (p) {
|
|
10234
|
-
return p.fixedWidth && css(_templateObject6$
|
|
10433
|
+
return p.fixedWidth && css(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
|
|
10235
10434
|
}, function (_ref3) {
|
|
10236
10435
|
var minWidth = _ref3.minWidth;
|
|
10237
|
-
return minWidth && css(_templateObject7$
|
|
10436
|
+
return minWidth && css(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
|
|
10238
10437
|
}, function (_ref4) {
|
|
10239
10438
|
var styles = _ref4.theme.styles,
|
|
10240
10439
|
headerStyle = _ref4.headerStyle,
|
|
10241
10440
|
isSortActive = _ref4.isSortActive;
|
|
10242
|
-
return headerStyle === 'subHeader' && css(_templateObject8$
|
|
10441
|
+
return headerStyle === 'subHeader' && css(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
|
|
10243
10442
|
});
|
|
10244
10443
|
var TitleItems = styled.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
|
|
10245
10444
|
var alignment = _ref5.alignment;
|
|
@@ -10387,15 +10586,15 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
|
|
|
10387
10586
|
}));
|
|
10388
10587
|
};
|
|
10389
10588
|
|
|
10390
|
-
var _templateObject$
|
|
10391
|
-
var Container$
|
|
10392
|
-
var TableContainer = styled.div(_templateObject2$
|
|
10393
|
-
var LoadingText$1 = styled.div(_templateObject3$
|
|
10394
|
-
var LoadingBox$1 = styled.div(_templateObject4$
|
|
10589
|
+
var _templateObject$19, _templateObject2$10, _templateObject3$S, _templateObject4$M, _templateObject5$H;
|
|
10590
|
+
var Container$J = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose([""])));
|
|
10591
|
+
var TableContainer = styled.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
|
|
10592
|
+
var LoadingText$1 = styled.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
|
|
10593
|
+
var LoadingBox$1 = styled.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) {
|
|
10395
10594
|
var theme = _ref.theme;
|
|
10396
10595
|
return theme.colors["pureBase"];
|
|
10397
10596
|
}, LoadingText$1);
|
|
10398
|
-
var EmptyTableBox = styled.div(_templateObject5$
|
|
10597
|
+
var EmptyTableBox = styled.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"])));
|
|
10399
10598
|
|
|
10400
10599
|
var isChecked = function isChecked(_ref2) {
|
|
10401
10600
|
var _ref2$_checked = _ref2._checked,
|
|
@@ -10449,7 +10648,7 @@ var TypeTable = function TypeTable(_ref3) {
|
|
|
10449
10648
|
|
|
10450
10649
|
setAllChecked(areAllChecked);
|
|
10451
10650
|
}, [isEmptyTable, rows]);
|
|
10452
|
-
return React__default.createElement(Container$
|
|
10651
|
+
return React__default.createElement(Container$J, null, React__default.createElement(TableContainer, null, React__default.createElement(TypeTableHeader, Object.assign({}, {
|
|
10453
10652
|
selectable: selectable,
|
|
10454
10653
|
hasStatus: hasStatus,
|
|
10455
10654
|
hasThumbnail: hasThumbnail,
|
|
@@ -10483,19 +10682,19 @@ var TypeTable = function TypeTable(_ref3) {
|
|
|
10483
10682
|
})));
|
|
10484
10683
|
};
|
|
10485
10684
|
|
|
10486
|
-
var _excluded$
|
|
10685
|
+
var _excluded$C = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
10487
10686
|
|
|
10488
|
-
var _templateObject$
|
|
10489
|
-
var Container$
|
|
10687
|
+
var _templateObject$1a, _templateObject2$11, _templateObject3$T, _templateObject4$N, _templateObject5$I, _templateObject6$z, _templateObject7$y, _templateObject8$r, _templateObject9$m, _templateObject10$j;
|
|
10688
|
+
var Container$K = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
10490
10689
|
var theme = _ref.theme;
|
|
10491
|
-
return css(_templateObject2$
|
|
10492
|
-
});
|
|
10493
|
-
var StyledButton$5 = styled(Button)(_templateObject3$
|
|
10494
|
-
var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$
|
|
10495
|
-
var StyledLink = styled(Link)(_templateObject5$
|
|
10496
|
-
var EditContainer = styled.div(_templateObject6$
|
|
10497
|
-
var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$
|
|
10498
|
-
var TextContainer$
|
|
10690
|
+
return css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
10691
|
+
});
|
|
10692
|
+
var StyledButton$5 = styled(Button)(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10693
|
+
var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10694
|
+
var StyledLink$1 = styled(Link)(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
|
|
10695
|
+
var EditContainer = styled.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);
|
|
10696
|
+
var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose([""])));
|
|
10697
|
+
var TextContainer$3 = styled.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
|
|
10499
10698
|
var alignment = _ref2.alignment;
|
|
10500
10699
|
return alignment === 'center' && css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
10501
10700
|
}, function (_ref3) {
|
|
@@ -10515,7 +10714,7 @@ var EditCell = function EditCell(_ref4) {
|
|
|
10515
10714
|
_ref4$toLink = _ref4.toLink,
|
|
10516
10715
|
toLink = _ref4$toLink === void 0 ? '' : _ref4$toLink,
|
|
10517
10716
|
saveCallback = _ref4.saveCallback,
|
|
10518
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
10717
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$C);
|
|
10519
10718
|
|
|
10520
10719
|
var _useState = useState(false),
|
|
10521
10720
|
isEditMode = _useState[0],
|
|
@@ -10581,7 +10780,7 @@ var EditCell = function EditCell(_ref4) {
|
|
|
10581
10780
|
};
|
|
10582
10781
|
|
|
10583
10782
|
useClickOutside(editContainerRef, onClickOutsideEdit);
|
|
10584
|
-
return React__default.createElement(Container$
|
|
10783
|
+
return React__default.createElement(Container$K, null, isEditMode ? React__default.createElement(EditContainer, {
|
|
10585
10784
|
ref: editContainerRef
|
|
10586
10785
|
}, React__default.createElement(SmallInput, Object.assign({}, props, {
|
|
10587
10786
|
autoFocus: true,
|
|
@@ -10608,9 +10807,9 @@ var EditCell = function EditCell(_ref4) {
|
|
|
10608
10807
|
},
|
|
10609
10808
|
design: 'secondary',
|
|
10610
10809
|
size: 'small'
|
|
10611
|
-
}, "Cancel")) : React__default.createElement(TextContainer$
|
|
10810
|
+
}, "Cancel")) : React__default.createElement(TextContainer$3, {
|
|
10612
10811
|
alignment: alignment
|
|
10613
|
-
}, toLink ? React__default.createElement(StyledLink, {
|
|
10812
|
+
}, toLink ? React__default.createElement(StyledLink$1, {
|
|
10614
10813
|
to: toLink
|
|
10615
10814
|
}, updatedValue) : updatedValue, React__default.createElement(StyledIconButton$1, {
|
|
10616
10815
|
icon: 'Edit',
|
|
@@ -10953,16 +11152,16 @@ var PTZProvider = function PTZProvider(_ref) {
|
|
|
10953
11152
|
}, children);
|
|
10954
11153
|
};
|
|
10955
11154
|
|
|
10956
|
-
var _templateObject$
|
|
10957
|
-
var Active = styled.g(_templateObject$
|
|
11155
|
+
var _templateObject$1b, _templateObject2$12, _templateObject3$U, _templateObject4$O, _templateObject5$J;
|
|
11156
|
+
var Active = styled.g(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
10958
11157
|
var active = _ref.active;
|
|
10959
|
-
return active && css(_templateObject2
|
|
11158
|
+
return active && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10960
11159
|
});
|
|
10961
|
-
var Hover = styled.g(_templateObject3$
|
|
11160
|
+
var Hover = styled.g(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
10962
11161
|
var hover = _ref2.hover;
|
|
10963
|
-
return hover && css(_templateObject4$
|
|
11162
|
+
return hover && css(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10964
11163
|
});
|
|
10965
|
-
var Container$
|
|
11164
|
+
var Container$L = styled.g(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n"])));
|
|
10966
11165
|
|
|
10967
11166
|
var Up = function Up() {
|
|
10968
11167
|
var _useState = useState(false),
|
|
@@ -10991,7 +11190,7 @@ var Up = function Up() {
|
|
|
10991
11190
|
var hoverEnd = useCallback(function () {
|
|
10992
11191
|
setHover(false);
|
|
10993
11192
|
}, []);
|
|
10994
|
-
return React__default.createElement(Container$
|
|
11193
|
+
return React__default.createElement(Container$L, {
|
|
10995
11194
|
onMouseEnter: hoverStart,
|
|
10996
11195
|
onMouseLeave: hoverEnd,
|
|
10997
11196
|
onMouseDown: activeStart,
|
|
@@ -11035,17 +11234,17 @@ var Up = function Up() {
|
|
|
11035
11234
|
})));
|
|
11036
11235
|
};
|
|
11037
11236
|
|
|
11038
|
-
var _templateObject$
|
|
11039
|
-
var Active$1 = styled.g(_templateObject$
|
|
11237
|
+
var _templateObject$1c, _templateObject2$13, _templateObject3$V, _templateObject4$P, _templateObject5$K, _templateObject6$A;
|
|
11238
|
+
var Active$1 = styled.g(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11040
11239
|
var active = _ref.active;
|
|
11041
|
-
return active && css(_templateObject2$
|
|
11240
|
+
return active && css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11042
11241
|
});
|
|
11043
|
-
var Hover$1 = styled.g(_templateObject3$
|
|
11242
|
+
var Hover$1 = styled.g(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11044
11243
|
var hover = _ref2.hover;
|
|
11045
|
-
return hover && css(_templateObject4$
|
|
11244
|
+
return hover && css(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11046
11245
|
});
|
|
11047
|
-
var Container$
|
|
11048
|
-
var Arrow = styled.g(_templateObject6$
|
|
11246
|
+
var Container$M = styled.g(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n"])));
|
|
11247
|
+
var Arrow$1 = styled.g(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n\n"])));
|
|
11049
11248
|
|
|
11050
11249
|
var Down = function Down() {
|
|
11051
11250
|
var _useState = useState(false),
|
|
@@ -11074,7 +11273,7 @@ var Down = function Down() {
|
|
|
11074
11273
|
var hoverEnd = useCallback(function () {
|
|
11075
11274
|
setHover(false);
|
|
11076
11275
|
}, []);
|
|
11077
|
-
return React__default.createElement(Container$
|
|
11276
|
+
return React__default.createElement(Container$M, {
|
|
11078
11277
|
onMouseEnter: hoverStart,
|
|
11079
11278
|
onMouseLeave: hoverEnd,
|
|
11080
11279
|
onMouseDown: activeStart,
|
|
@@ -11104,7 +11303,7 @@ var Down = function Down() {
|
|
|
11104
11303
|
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',
|
|
11105
11304
|
id: 'PTZ-Active-Down-Highlight',
|
|
11106
11305
|
stroke: 'url(#linearGradient-15)'
|
|
11107
|
-
})), React__default.createElement(Arrow, {
|
|
11306
|
+
})), React__default.createElement(Arrow$1, {
|
|
11108
11307
|
id: 'PTZ-Arrows-Icons',
|
|
11109
11308
|
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)',
|
|
11110
11309
|
fillRule: 'nonzero'
|
|
@@ -11119,16 +11318,16 @@ var Down = function Down() {
|
|
|
11119
11318
|
})));
|
|
11120
11319
|
};
|
|
11121
11320
|
|
|
11122
|
-
var _templateObject$
|
|
11123
|
-
var Active$2 = styled.g(_templateObject$
|
|
11321
|
+
var _templateObject$1d, _templateObject2$14, _templateObject3$W, _templateObject4$Q, _templateObject5$L;
|
|
11322
|
+
var Active$2 = styled.g(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11124
11323
|
var active = _ref.active;
|
|
11125
|
-
return active && css(_templateObject2$
|
|
11324
|
+
return active && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11126
11325
|
});
|
|
11127
|
-
var Hover$2 = styled.g(_templateObject3$
|
|
11326
|
+
var Hover$2 = styled.g(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11128
11327
|
var hover = _ref2.hover;
|
|
11129
|
-
return hover && css(_templateObject4$
|
|
11328
|
+
return hover && css(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11130
11329
|
});
|
|
11131
|
-
var Container$
|
|
11330
|
+
var Container$N = styled.g(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n"])));
|
|
11132
11331
|
|
|
11133
11332
|
var Left = function Left() {
|
|
11134
11333
|
var _useState = useState(false),
|
|
@@ -11157,7 +11356,7 @@ var Left = function Left() {
|
|
|
11157
11356
|
var hoverEnd = useCallback(function () {
|
|
11158
11357
|
setHover(false);
|
|
11159
11358
|
}, []);
|
|
11160
|
-
return React__default.createElement(Container$
|
|
11359
|
+
return React__default.createElement(Container$N, {
|
|
11161
11360
|
onMouseEnter: hoverStart,
|
|
11162
11361
|
onMouseLeave: hoverEnd,
|
|
11163
11362
|
onMouseDown: activeStart,
|
|
@@ -11203,16 +11402,16 @@ var Left = function Left() {
|
|
|
11203
11402
|
})));
|
|
11204
11403
|
};
|
|
11205
11404
|
|
|
11206
|
-
var _templateObject$
|
|
11207
|
-
var Active$3 = styled.g(_templateObject$
|
|
11405
|
+
var _templateObject$1e, _templateObject2$15, _templateObject3$X, _templateObject4$R, _templateObject5$M;
|
|
11406
|
+
var Active$3 = styled.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11208
11407
|
var active = _ref.active;
|
|
11209
|
-
return active && css(_templateObject2$
|
|
11408
|
+
return active && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11210
11409
|
});
|
|
11211
|
-
var Hover$3 = styled.g(_templateObject3$
|
|
11410
|
+
var Hover$3 = styled.g(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11212
11411
|
var hover = _ref2.hover;
|
|
11213
|
-
return hover && css(_templateObject4$
|
|
11412
|
+
return hover && css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11214
11413
|
});
|
|
11215
|
-
var Container$
|
|
11414
|
+
var Container$O = styled.g(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n"])));
|
|
11216
11415
|
|
|
11217
11416
|
var Right = function Right() {
|
|
11218
11417
|
var _useState = useState(false),
|
|
@@ -11241,7 +11440,7 @@ var Right = function Right() {
|
|
|
11241
11440
|
var hoverEnd = useCallback(function () {
|
|
11242
11441
|
setHover(false);
|
|
11243
11442
|
}, []);
|
|
11244
|
-
return React__default.createElement(Container$
|
|
11443
|
+
return React__default.createElement(Container$O, {
|
|
11245
11444
|
onMouseEnter: hoverStart,
|
|
11246
11445
|
onMouseLeave: hoverEnd,
|
|
11247
11446
|
onMouseDown: activeStart,
|
|
@@ -12100,16 +12299,16 @@ var ZoomBase = function ZoomBase(_ref) {
|
|
|
12100
12299
|
})), children));
|
|
12101
12300
|
};
|
|
12102
12301
|
|
|
12103
|
-
var _templateObject$
|
|
12104
|
-
var Active$4 = styled.g(_templateObject$
|
|
12302
|
+
var _templateObject$1f, _templateObject2$16, _templateObject3$Y, _templateObject4$S, _templateObject5$N;
|
|
12303
|
+
var Active$4 = styled.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
12105
12304
|
var active = _ref.active;
|
|
12106
|
-
return active && css(_templateObject2$
|
|
12305
|
+
return active && css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12107
12306
|
});
|
|
12108
|
-
var Hover$4 = styled.g(_templateObject3$
|
|
12307
|
+
var Hover$4 = styled.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
12109
12308
|
var hover = _ref2.hover;
|
|
12110
|
-
return hover && css(_templateObject4$
|
|
12309
|
+
return hover && css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12111
12310
|
});
|
|
12112
|
-
var Container$
|
|
12311
|
+
var Container$P = styled.g(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n"])));
|
|
12113
12312
|
|
|
12114
12313
|
var Up$1 = function Up() {
|
|
12115
12314
|
var _useState = useState(false),
|
|
@@ -12138,7 +12337,7 @@ var Up$1 = function Up() {
|
|
|
12138
12337
|
var hoverEnd = useCallback(function () {
|
|
12139
12338
|
setHover(false);
|
|
12140
12339
|
}, []);
|
|
12141
|
-
return React__default.createElement(Container$
|
|
12340
|
+
return React__default.createElement(Container$P, {
|
|
12142
12341
|
onMouseEnter: hoverStart,
|
|
12143
12342
|
onMouseLeave: hoverEnd,
|
|
12144
12343
|
onMouseDown: activeStart,
|
|
@@ -12177,16 +12376,16 @@ var Up$1 = function Up() {
|
|
|
12177
12376
|
})));
|
|
12178
12377
|
};
|
|
12179
12378
|
|
|
12180
|
-
var _templateObject$
|
|
12181
|
-
var Active$5 = styled.g(_templateObject$
|
|
12379
|
+
var _templateObject$1g, _templateObject2$17, _templateObject3$Z, _templateObject4$T, _templateObject5$O;
|
|
12380
|
+
var Active$5 = styled.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
12182
12381
|
var active = _ref.active;
|
|
12183
|
-
return active && css(_templateObject2$
|
|
12382
|
+
return active && css(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12184
12383
|
});
|
|
12185
|
-
var Hover$5 = styled.g(_templateObject3$
|
|
12384
|
+
var Hover$5 = styled.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
12186
12385
|
var hover = _ref2.hover;
|
|
12187
|
-
return hover && css(_templateObject4$
|
|
12386
|
+
return hover && css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
12188
12387
|
});
|
|
12189
|
-
var Container$
|
|
12388
|
+
var Container$Q = styled.g(_templateObject5$O || (_templateObject5$O = _taggedTemplateLiteralLoose(["\n"])));
|
|
12190
12389
|
|
|
12191
12390
|
var Up$2 = function Up() {
|
|
12192
12391
|
var _useState = useState(false),
|
|
@@ -12215,7 +12414,7 @@ var Up$2 = function Up() {
|
|
|
12215
12414
|
var hoverEnd = useCallback(function () {
|
|
12216
12415
|
setHover(false);
|
|
12217
12416
|
}, []);
|
|
12218
|
-
return React__default.createElement(Container$
|
|
12417
|
+
return React__default.createElement(Container$Q, {
|
|
12219
12418
|
onMouseEnter: hoverStart,
|
|
12220
12419
|
onMouseLeave: hoverEnd,
|
|
12221
12420
|
onMouseDown: activeStart,
|
|
@@ -12250,8 +12449,8 @@ var Up$2 = function Up() {
|
|
|
12250
12449
|
})));
|
|
12251
12450
|
};
|
|
12252
12451
|
|
|
12253
|
-
var _templateObject$
|
|
12254
|
-
var Container$
|
|
12452
|
+
var _templateObject$1h;
|
|
12453
|
+
var Container$R = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n flex-direction: column;\n"])));
|
|
12255
12454
|
|
|
12256
12455
|
var Controls = function Controls(_ref) {
|
|
12257
12456
|
var _ref$debug = _ref.debug,
|
|
@@ -12260,26 +12459,26 @@ var Controls = function Controls(_ref) {
|
|
|
12260
12459
|
var _useContext = useContext(PTZContext),
|
|
12261
12460
|
state = _useContext.state;
|
|
12262
12461
|
|
|
12263
|
-
return React__default.createElement(Container$
|
|
12462
|
+
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)));
|
|
12264
12463
|
};
|
|
12265
12464
|
|
|
12266
|
-
var _excluded$
|
|
12465
|
+
var _excluded$D = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
|
|
12267
12466
|
|
|
12268
|
-
var _templateObject$
|
|
12269
|
-
var Container$
|
|
12270
|
-
var EmptyWithIcon = styled.div(_templateObject2$
|
|
12467
|
+
var _templateObject$1i, _templateObject2$18, _templateObject3$_, _templateObject4$U, _templateObject5$P, _templateObject6$B, _templateObject7$z, _templateObject8$s;
|
|
12468
|
+
var Container$S = styled.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);
|
|
12469
|
+
var EmptyWithIcon = styled.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) {
|
|
12271
12470
|
var hasPadding = _ref.hasPadding;
|
|
12272
12471
|
return hasPadding && "\n padding-bottom: 43px\n ";
|
|
12273
12472
|
}, IconWrapper);
|
|
12274
|
-
var Notice = styled.div(_templateObject3$
|
|
12473
|
+
var Notice = styled.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) {
|
|
12275
12474
|
var color = _ref2.color;
|
|
12276
12475
|
return color && "var(--" + color + ")";
|
|
12277
12476
|
});
|
|
12278
|
-
var NoticeMessage = styled.div(_templateObject4$
|
|
12279
|
-
var NoticeTitle = styled.div(_templateObject5$
|
|
12280
|
-
var NoticeIcon = styled.div(_templateObject6$
|
|
12281
|
-
var NoticeTextGroup = styled.div(_templateObject7$
|
|
12282
|
-
var StatusLine = styled.div(_templateObject8$
|
|
12477
|
+
var NoticeMessage = styled.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
|
|
12478
|
+
var NoticeTitle = styled.div(_templateObject5$P || (_templateObject5$P = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
|
|
12479
|
+
var NoticeIcon = styled.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);
|
|
12480
|
+
var NoticeTextGroup = styled.div(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
|
|
12481
|
+
var StatusLine = styled.div(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
|
|
12283
12482
|
var color = _ref3.color;
|
|
12284
12483
|
return color && "var(--" + color + ")";
|
|
12285
12484
|
});
|
|
@@ -12295,9 +12494,9 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
12295
12494
|
noticeMessage = _ref4.noticeMessage,
|
|
12296
12495
|
noticeTitle = _ref4.noticeTitle,
|
|
12297
12496
|
emptyIcon = _ref4.emptyIcon,
|
|
12298
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
12497
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$D);
|
|
12299
12498
|
|
|
12300
|
-
return React__default.createElement(Container$
|
|
12499
|
+
return React__default.createElement(Container$S, null, isEmptyWithIcon ? React__default.createElement(EmptyWithIcon, {
|
|
12301
12500
|
hasPadding: hasNotice
|
|
12302
12501
|
}, React__default.createElement(Icon, {
|
|
12303
12502
|
icon: emptyIcon ? emptyIcon : 'PasswordHide',
|
|
@@ -12314,26 +12513,26 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
12314
12513
|
}));
|
|
12315
12514
|
};
|
|
12316
12515
|
|
|
12317
|
-
var _templateObject$
|
|
12318
|
-
var Container$
|
|
12319
|
-
var LeftData = styled.div(_templateObject2$
|
|
12516
|
+
var _templateObject$1j, _templateObject2$19, _templateObject3$$, _templateObject4$V, _templateObject5$Q, _templateObject6$C, _templateObject7$A, _templateObject8$t, _templateObject9$n;
|
|
12517
|
+
var Container$T = styled.div(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
|
|
12518
|
+
var LeftData = styled.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
12320
12519
|
var hasRightData = _ref.hasRightData;
|
|
12321
|
-
return hasRightData && css(_templateObject3
|
|
12520
|
+
return hasRightData && css(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
|
|
12322
12521
|
}, IconWrapper);
|
|
12323
|
-
var RightData = styled.div(_templateObject4$
|
|
12324
|
-
var DeviceDataGroup = styled.div(_templateObject5$
|
|
12325
|
-
var LeftTitle = styled.div(_templateObject6$
|
|
12522
|
+
var RightData = styled.div(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
12523
|
+
var DeviceDataGroup = styled.div(_templateObject5$Q || (_templateObject5$Q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
|
|
12524
|
+
var LeftTitle = styled.div(_templateObject6$C || (_templateObject6$C = _taggedTemplateLiteralLoose(["\n ", ";\n ", "};\n ", ";\n\n color: var(--grey-a10);\n font-size: 10px;\n"])), EllipsisStyles, function (_ref2) {
|
|
12326
12525
|
var hasRightData = _ref2.hasRightData;
|
|
12327
12526
|
return hasRightData ? "max-margin: 140px;" : "max-margin: 250px;";
|
|
12328
12527
|
}, function (_ref3) {
|
|
12329
12528
|
var hasMarginBottom = _ref3.hasMarginBottom;
|
|
12330
12529
|
return hasMarginBottom && "margin-bottom: 1px;";
|
|
12331
12530
|
});
|
|
12332
|
-
var LeftSubTitle = styled.div(_templateObject7$
|
|
12531
|
+
var LeftSubTitle = styled.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) {
|
|
12333
12532
|
var hasRightData = _ref4.hasRightData;
|
|
12334
12533
|
return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
|
|
12335
12534
|
});
|
|
12336
|
-
var Title$5 = styled.div(_templateObject8$
|
|
12535
|
+
var Title$5 = styled.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) {
|
|
12337
12536
|
var hasMarginBottom = _ref5.hasMarginBottom;
|
|
12338
12537
|
return hasMarginBottom && "margin-bottom: 6px;";
|
|
12339
12538
|
});
|
|
@@ -12351,7 +12550,7 @@ var PanelMetaData = function PanelMetaData(_ref6) {
|
|
|
12351
12550
|
var hasRightData = useMemo(function () {
|
|
12352
12551
|
return !!rightTitle || !!rightSubTitle;
|
|
12353
12552
|
}, [rightSubTitle, rightTitle]);
|
|
12354
|
-
return React__default.createElement(Container$
|
|
12553
|
+
return React__default.createElement(Container$T, null, React__default.createElement(LeftData, Object.assign({}, {
|
|
12355
12554
|
hasRightData: hasRightData
|
|
12356
12555
|
}), !hideIcon && React__default.createElement(Icon, {
|
|
12357
12556
|
icon: deviceIcon,
|
|
@@ -12368,10 +12567,10 @@ var PanelMetaData = function PanelMetaData(_ref6) {
|
|
|
12368
12567
|
}, rightTitle), rightSubTitle && React__default.createElement(SubTitle, null, rightSubTitle)));
|
|
12369
12568
|
};
|
|
12370
12569
|
|
|
12371
|
-
var _excluded$
|
|
12570
|
+
var _excluded$E = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
|
|
12372
12571
|
|
|
12373
|
-
var _templateObject$
|
|
12374
|
-
var CameraPanelWrapper = styled.div(_templateObject$
|
|
12572
|
+
var _templateObject$1k;
|
|
12573
|
+
var CameraPanelWrapper = styled.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) {
|
|
12375
12574
|
var hasOnClick = _ref.hasOnClick;
|
|
12376
12575
|
return hasOnClick && "\n cursor: pointer;\n ";
|
|
12377
12576
|
});
|
|
@@ -12381,7 +12580,7 @@ var NewComponent = function NewComponent(_ref2) {
|
|
|
12381
12580
|
panelMetaData = _ref2.panelMetaData,
|
|
12382
12581
|
customBottom = _ref2.customBottom,
|
|
12383
12582
|
panelOnClick = _ref2.panelOnClick,
|
|
12384
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12583
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
|
|
12385
12584
|
|
|
12386
12585
|
return React__default.createElement(CameraPanelWrapper, Object.assign({
|
|
12387
12586
|
onClick: panelOnClick,
|
|
@@ -12389,8 +12588,8 @@ var NewComponent = function NewComponent(_ref2) {
|
|
|
12389
12588
|
}, props), React__default.createElement(MediaStream, Object.assign({}, streamProps)), customBottom ? customBottom : panelMetaData && React__default.createElement(PanelMetaData, Object.assign({}, panelMetaData)));
|
|
12390
12589
|
};
|
|
12391
12590
|
|
|
12392
|
-
var _templateObject$
|
|
12393
|
-
var CameraGrid = styled.div(_templateObject$
|
|
12591
|
+
var _templateObject$1l;
|
|
12592
|
+
var CameraGrid = styled.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(auto-fill, 300px);\n gap: 20px 20px;\n"])));
|
|
12394
12593
|
|
|
12395
12594
|
var CameraPanels = function CameraPanels(_ref) {
|
|
12396
12595
|
var panels = _ref.panels;
|
|
@@ -12401,71 +12600,25 @@ var CameraPanels = function CameraPanels(_ref) {
|
|
|
12401
12600
|
}));
|
|
12402
12601
|
};
|
|
12403
12602
|
|
|
12404
|
-
var
|
|
12405
|
-
|
|
12406
|
-
var _templateObject$1h, _templateObject2$17, _templateObject3$_, _templateObject4$U;
|
|
12407
|
-
var TextContainer$3 = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
12408
|
-
var StyledLink$1 = styled(Link)(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n"])));
|
|
12409
|
-
var TagWrapper = styled.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) {
|
|
12410
|
-
var theme = _ref.theme;
|
|
12411
|
-
return theme.fontFamily.ui;
|
|
12412
|
-
}, function (_ref2) {
|
|
12413
|
-
var size = _ref2.size;
|
|
12414
|
-
return size;
|
|
12415
|
-
}, IconWrapper, function (_ref3) {
|
|
12416
|
-
var hoverColor = _ref3.hoverColor,
|
|
12417
|
-
enableHover = _ref3.enableHover;
|
|
12418
|
-
return enableHover && 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);
|
|
12419
|
-
});
|
|
12420
|
-
|
|
12421
|
-
var Tag = function Tag(_ref4) {
|
|
12422
|
-
var _ref4$icon = _ref4.icon,
|
|
12423
|
-
icon = _ref4$icon === void 0 ? '' : _ref4$icon,
|
|
12424
|
-
_ref4$size = _ref4.size,
|
|
12425
|
-
size = _ref4$size === void 0 ? 14 : _ref4$size,
|
|
12426
|
-
_ref4$weight = _ref4.weight,
|
|
12427
|
-
weight = _ref4$weight === void 0 ? 'regular' : _ref4$weight,
|
|
12428
|
-
_ref4$label = _ref4.label,
|
|
12429
|
-
label = _ref4$label === void 0 ? '' : _ref4$label,
|
|
12430
|
-
linkTo = _ref4.linkTo,
|
|
12431
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$D);
|
|
12432
|
-
|
|
12433
|
-
var renderTag = function renderTag() {
|
|
12434
|
-
return React__default.createElement(TagWrapper, {
|
|
12435
|
-
hoverColor: 'primary',
|
|
12436
|
-
enableHover: linkTo ? true : false,
|
|
12437
|
-
size: size
|
|
12438
|
-
}, icon && React__default.createElement(Icon, Object.assign({
|
|
12439
|
-
icon: icon,
|
|
12440
|
-
size: size,
|
|
12441
|
-
weight: weight
|
|
12442
|
-
}, props)), React__default.createElement(TextContainer$3, null, label));
|
|
12443
|
-
};
|
|
12444
|
-
|
|
12445
|
-
return linkTo ? React__default.createElement(StyledLink$1, {
|
|
12446
|
-
to: linkTo
|
|
12447
|
-
}, renderTag()) : renderTag();
|
|
12448
|
-
};
|
|
12449
|
-
|
|
12450
|
-
var _templateObject$1i;
|
|
12451
|
-
var TagListWrapper = styled.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);
|
|
12603
|
+
var _templateObject$1m;
|
|
12604
|
+
var TagListWrapper$1 = styled.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);
|
|
12452
12605
|
|
|
12453
12606
|
var TagList = function TagList(_ref) {
|
|
12454
12607
|
var tagsConfig = _ref.tagsConfig;
|
|
12455
|
-
return React__default.createElement(TagListWrapper, null, tagsConfig.map(function (tagProps, index) {
|
|
12608
|
+
return React__default.createElement(TagListWrapper$1, null, tagsConfig.map(function (tagProps, index) {
|
|
12456
12609
|
return React__default.createElement(Tag, Object.assign({
|
|
12457
12610
|
key: "tag-" + index
|
|
12458
12611
|
}, tagProps));
|
|
12459
12612
|
}));
|
|
12460
12613
|
};
|
|
12461
12614
|
|
|
12462
|
-
var _excluded$
|
|
12615
|
+
var _excluded$F = ["onDebouncedChange", "defaultValue"];
|
|
12463
12616
|
|
|
12464
12617
|
var DebouncedSearcher = function DebouncedSearcher(_ref) {
|
|
12465
12618
|
var _ref$onDebouncedChang = _ref.onDebouncedChange,
|
|
12466
12619
|
onDebouncedChange = _ref$onDebouncedChang === void 0 ? function () {} : _ref$onDebouncedChang,
|
|
12467
12620
|
defaultValue = _ref.defaultValue,
|
|
12468
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12621
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
|
|
12469
12622
|
|
|
12470
12623
|
var _useState = useState(defaultValue || ''),
|
|
12471
12624
|
typedValue = _useState[0],
|
|
@@ -12493,18 +12646,18 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
|
|
|
12493
12646
|
}));
|
|
12494
12647
|
};
|
|
12495
12648
|
|
|
12496
|
-
var _excluded$
|
|
12649
|
+
var _excluded$G = ["design", "size", "position", "text"];
|
|
12497
12650
|
|
|
12498
|
-
var _templateObject$
|
|
12499
|
-
var Container$
|
|
12500
|
-
var Title$6 = styled.div(_templateObject2$
|
|
12651
|
+
var _templateObject$1n, _templateObject2$1a, _templateObject3$10, _templateObject4$W, _templateObject5$R, _templateObject6$D;
|
|
12652
|
+
var Container$U = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose([""])));
|
|
12653
|
+
var Title$6 = styled.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) {
|
|
12501
12654
|
var theme = _ref.theme;
|
|
12502
12655
|
return theme.fontFamily.ui;
|
|
12503
12656
|
});
|
|
12504
|
-
var ButtonsWrapper$1 = styled.div(_templateObject3
|
|
12505
|
-
var LeftButtons = styled.div(_templateObject4$
|
|
12506
|
-
var RightButtons = styled.div(_templateObject5$
|
|
12507
|
-
var SelectedResults = styled.div(_templateObject6$
|
|
12657
|
+
var ButtonsWrapper$1 = styled.div(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12658
|
+
var LeftButtons = styled.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
|
|
12659
|
+
var RightButtons = styled.div(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
12660
|
+
var SelectedResults = styled.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) {
|
|
12508
12661
|
var theme = _ref2.theme;
|
|
12509
12662
|
return theme.fontFamily.ui;
|
|
12510
12663
|
});
|
|
@@ -12529,12 +12682,12 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12529
12682
|
totalAvailable = _ref3$totalAvailable === void 0 ? 0 : _ref3$totalAvailable,
|
|
12530
12683
|
_ref3$finishCallback = _ref3.finishCallback,
|
|
12531
12684
|
finishCallback = _ref3$finishCallback === void 0 ? function () {} : _ref3$finishCallback;
|
|
12532
|
-
return React__default.createElement(Container$
|
|
12685
|
+
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) {
|
|
12533
12686
|
var design = _ref4.design,
|
|
12534
12687
|
size = _ref4.size,
|
|
12535
12688
|
position = _ref4.position,
|
|
12536
12689
|
text = _ref4.text,
|
|
12537
|
-
props = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
12690
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded$G);
|
|
12538
12691
|
|
|
12539
12692
|
return React__default.createElement(ButtonWithIcon, Object.assign({
|
|
12540
12693
|
key: index,
|
|
@@ -12548,28 +12701,28 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12548
12701
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
12549
12702
|
};
|
|
12550
12703
|
|
|
12551
|
-
var _templateObject$
|
|
12704
|
+
var _templateObject$1o, _templateObject2$1b, _templateObject3$11, _templateObject4$X, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$u, _templateObject9$o, _templateObject10$k;
|
|
12552
12705
|
var WIDTH_PER_NUMBER = 12;
|
|
12553
|
-
var PaginationContainer = styled.div(_templateObject$
|
|
12554
|
-
var PageLabel = styled.label(_templateObject2$
|
|
12555
|
-
var StaticPageCount = styled.div(_templateObject3$
|
|
12556
|
-
var StyledInput$3 = styled.input(_templateObject4$
|
|
12706
|
+
var PaginationContainer = styled.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"])));
|
|
12707
|
+
var PageLabel = styled.label(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-weight: 500px;\n font-size: 14px;\n color: var(--grey-10);\n text-align: left;\n"])));
|
|
12708
|
+
var StaticPageCount = styled.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"])));
|
|
12709
|
+
var StyledInput$3 = styled.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) {
|
|
12557
12710
|
var textColor = _ref.textColor;
|
|
12558
12711
|
return textColor;
|
|
12559
12712
|
}, function (_ref2) {
|
|
12560
12713
|
var maxWidth = _ref2.maxWidth;
|
|
12561
12714
|
return maxWidth ? maxWidth : '40px';
|
|
12562
12715
|
}, WIDTH_PER_NUMBER / 2);
|
|
12563
|
-
var shakeAnimation = keyframes(_templateObject5$
|
|
12564
|
-
var InputContainer$2 = styled.div(_templateObject6$
|
|
12716
|
+
var shakeAnimation = 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"])));
|
|
12717
|
+
var InputContainer$2 = styled.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) {
|
|
12565
12718
|
var shouldShake = _ref3.shouldShake;
|
|
12566
12719
|
return shouldShake ? shakeAnimation : 'none';
|
|
12567
12720
|
}, function (_ref4) {
|
|
12568
12721
|
var borderColor = _ref4.borderColor;
|
|
12569
12722
|
return borderColor && "border: 1px solid " + borderColor;
|
|
12570
12723
|
});
|
|
12571
|
-
var GoButton = styled(Button)(_templateObject7$
|
|
12572
|
-
var ArrowWrapper = styled.div(_templateObject8$
|
|
12724
|
+
var GoButton = styled(Button)(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
|
|
12725
|
+
var ArrowWrapper = styled.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
|
|
12573
12726
|
var ArrowButton = styled.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) {
|
|
12574
12727
|
var active = _ref5.active;
|
|
12575
12728
|
return active ? 'auto' : 'none';
|
|
@@ -12593,6 +12746,9 @@ var Pagination = function Pagination(props) {
|
|
|
12593
12746
|
buttonText = _props$buttonText === void 0 ? 'GO' : _props$buttonText,
|
|
12594
12747
|
_props$itemsText = props.itemsText,
|
|
12595
12748
|
itemsText = _props$itemsText === void 0 ? 'Items Per Page' : _props$itemsText,
|
|
12749
|
+
itemsDefaultValue = props.itemsDefaultValue,
|
|
12750
|
+
_props$selectId = props.selectId,
|
|
12751
|
+
selectId = _props$selectId === void 0 ? 'paginationPages' : _props$selectId,
|
|
12596
12752
|
_props$selectWidth = props.selectWidth,
|
|
12597
12753
|
selectWidth = _props$selectWidth === void 0 ? '60px' : _props$selectWidth,
|
|
12598
12754
|
_props$selectDisabled = props.selectDisabled,
|
|
@@ -12740,11 +12896,11 @@ var Pagination = function Pagination(props) {
|
|
|
12740
12896
|
}, React__default.createElement(SelectField, {
|
|
12741
12897
|
disabled: selectDisabled,
|
|
12742
12898
|
label: {
|
|
12743
|
-
htmlFor:
|
|
12899
|
+
htmlFor: selectId,
|
|
12744
12900
|
text: itemsText,
|
|
12745
12901
|
isSameRow: true
|
|
12746
12902
|
},
|
|
12747
|
-
defaultValue: 1,
|
|
12903
|
+
defaultValue: itemsDefaultValue ? itemsDefaultValue : itemsOptions[0].value || 1,
|
|
12748
12904
|
changeCallback: onItemsSelectChange
|
|
12749
12905
|
}, React__default.createElement(Fragment, null, itemsOptions.map(function (_ref11, index) {
|
|
12750
12906
|
var value = _ref11.value,
|
|
@@ -12805,18 +12961,18 @@ var Pagination = function Pagination(props) {
|
|
|
12805
12961
|
}))));
|
|
12806
12962
|
};
|
|
12807
12963
|
|
|
12808
|
-
var _templateObject$
|
|
12809
|
-
var Container$
|
|
12810
|
-
var Title$7 = styled.div(_templateObject2$
|
|
12964
|
+
var _templateObject$1p, _templateObject2$1c, _templateObject3$12, _templateObject4$Y, _templateObject5$T;
|
|
12965
|
+
var Container$V = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
|
|
12966
|
+
var Title$7 = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
12811
12967
|
var typography = _ref.theme.typography;
|
|
12812
12968
|
return typography.modal.title;
|
|
12813
12969
|
});
|
|
12814
|
-
var MessageBox$1 = styled.div(_templateObject3$
|
|
12970
|
+
var MessageBox$1 = styled.div(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
|
|
12815
12971
|
var typography = _ref2.theme.typography;
|
|
12816
12972
|
return typography.modal.basicContent;
|
|
12817
12973
|
});
|
|
12818
|
-
var StyledButton$6 = styled(Button)(_templateObject4$
|
|
12819
|
-
var ButtonsGroup$1 = styled.div(_templateObject5$
|
|
12974
|
+
var StyledButton$6 = styled(Button)(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
|
|
12975
|
+
var ButtonsGroup$1 = styled.div(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n text-align: right;\n"])));
|
|
12820
12976
|
|
|
12821
12977
|
var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
12822
12978
|
var _ref3$title = _ref3.title,
|
|
@@ -12849,7 +13005,7 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
|
12849
13005
|
setModalOpen(false);
|
|
12850
13006
|
};
|
|
12851
13007
|
|
|
12852
|
-
return React__default.createElement(Container$
|
|
13008
|
+
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, {
|
|
12853
13009
|
design: leftButtonDesign,
|
|
12854
13010
|
onClick: handlePrimaryBtn
|
|
12855
13011
|
}, leftButtonText), React__default.createElement(StyledButton$6, {
|
|
@@ -12858,19 +13014,19 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
|
|
|
12858
13014
|
}, rightButtonText)));
|
|
12859
13015
|
};
|
|
12860
13016
|
|
|
12861
|
-
var _templateObject$
|
|
12862
|
-
var Container$
|
|
12863
|
-
var LeftArea = styled.div(_templateObject2$
|
|
12864
|
-
var BackLinkIcon = styled.div(_templateObject3$
|
|
12865
|
-
var BackLink = styled(Link)(_templateObject4$
|
|
13017
|
+
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;
|
|
13018
|
+
var Container$W = styled.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"])));
|
|
13019
|
+
var LeftArea = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
|
|
13020
|
+
var BackLinkIcon = styled.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"])));
|
|
13021
|
+
var BackLink = styled(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) {
|
|
12866
13022
|
return props.$iconInGutter ? '-24px' : '0';
|
|
12867
13023
|
}, BackLinkIcon, BackLinkIcon, function (_ref) {
|
|
12868
13024
|
var $showDivider = _ref.$showDivider;
|
|
12869
|
-
return $showDivider && css(_templateObject5$
|
|
13025
|
+
return $showDivider && 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 "])));
|
|
12870
13026
|
});
|
|
12871
|
-
var ExtraActionIcon = styled.div(_templateObject6$
|
|
12872
|
-
var ExtraAction = styled.button(_templateObject7$
|
|
12873
|
-
var Breadcrumbs = styled.div(_templateObject8$
|
|
13027
|
+
var ExtraActionIcon = styled.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
|
|
13028
|
+
var ExtraAction = styled.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);
|
|
13029
|
+
var Breadcrumbs = styled.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
12874
13030
|
var Breadcrumb = styled.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"])));
|
|
12875
13031
|
var BreadcrumbIcon = styled.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"])));
|
|
12876
13032
|
var BreadcrumbLink = styled(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"])));
|
|
@@ -12903,7 +13059,7 @@ var UtilityHeader = function UtilityHeader(_ref2) {
|
|
|
12903
13059
|
return setCopyActionText("Share");
|
|
12904
13060
|
}, 2000);
|
|
12905
13061
|
}, [shareLink, copyToClipboard]);
|
|
12906
|
-
return React__default.createElement(Container$
|
|
13062
|
+
return React__default.createElement(Container$W, null, React__default.createElement(LeftArea, null, backLink ? React__default.createElement(BackLink, Object.assign({
|
|
12907
13063
|
to: backLink,
|
|
12908
13064
|
"$showDivider": hasBreadcrumbs
|
|
12909
13065
|
}, {
|
|
@@ -12954,12 +13110,12 @@ var Tabs = function Tabs(_ref) {
|
|
|
12954
13110
|
}, children);
|
|
12955
13111
|
};
|
|
12956
13112
|
|
|
12957
|
-
var _templateObject$
|
|
12958
|
-
var Container$
|
|
12959
|
-
var HeaderArea = styled.div(_templateObject2$
|
|
12960
|
-
var TabArea = styled.div(_templateObject3$
|
|
12961
|
-
var TabAreaInner = styled.div(_templateObject4$
|
|
12962
|
-
var Content = styled.div(_templateObject5$
|
|
13113
|
+
var _templateObject$1r, _templateObject2$1e, _templateObject3$14, _templateObject4$_, _templateObject5$V;
|
|
13114
|
+
var Container$X = styled.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"])));
|
|
13115
|
+
var HeaderArea = styled.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"])));
|
|
13116
|
+
var TabArea = styled.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"])));
|
|
13117
|
+
var TabAreaInner = styled.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"])));
|
|
13118
|
+
var Content = styled.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"])));
|
|
12963
13119
|
|
|
12964
13120
|
var ContentLayout = function ContentLayout(_ref) {
|
|
12965
13121
|
var _ref$layout = _ref.layout,
|
|
@@ -12971,17 +13127,17 @@ var ContentLayout = function ContentLayout(_ref) {
|
|
|
12971
13127
|
TabsElementArea = HeaderContent.TabsElementArea,
|
|
12972
13128
|
UtilityHeaderOptions = HeaderContent.UtilityHeaderOptions;
|
|
12973
13129
|
var containerClass = 'content-layout-' + layout;
|
|
12974
|
-
return React__default.createElement(Container$
|
|
13130
|
+
return React__default.createElement(Container$X, {
|
|
12975
13131
|
className: containerClass
|
|
12976
13132
|
}, 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));
|
|
12977
13133
|
};
|
|
12978
13134
|
|
|
12979
|
-
var _templateObject$
|
|
12980
|
-
var FullWidthContainer = styled.div(_templateObject$
|
|
13135
|
+
var _templateObject$1s, _templateObject2$1f;
|
|
13136
|
+
var FullWidthContainer = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
|
|
12981
13137
|
var $contentHeight = _ref.$contentHeight;
|
|
12982
13138
|
return $contentHeight + 'px';
|
|
12983
13139
|
});
|
|
12984
|
-
var FullWidthInner = styled.div(_templateObject2$
|
|
13140
|
+
var FullWidthInner = styled.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n input {width: 100%;}\n"])));
|
|
12985
13141
|
|
|
12986
13142
|
var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
|
|
12987
13143
|
var children = _ref2.children;
|
|
@@ -13003,74 +13159,521 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
|
|
|
13003
13159
|
}, children));
|
|
13004
13160
|
};
|
|
13005
13161
|
|
|
13006
|
-
var _templateObject$
|
|
13007
|
-
var
|
|
13008
|
-
var
|
|
13009
|
-
var
|
|
13010
|
-
|
|
13011
|
-
|
|
13162
|
+
var _templateObject$1t, _templateObject2$1g, _templateObject3$15, _templateObject4$$, _templateObject5$W, _templateObject6$G, _templateObject7$D, _templateObject8$w;
|
|
13163
|
+
var Inner$1 = styled.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"])));
|
|
13164
|
+
var Line = styled.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
|
|
13165
|
+
var IconContainer$2 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
|
|
13166
|
+
var IconDefault = styled.svg(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
|
|
13167
|
+
var $layout = _ref.$layout;
|
|
13168
|
+
return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
|
|
13012
13169
|
});
|
|
13013
|
-
var
|
|
13014
|
-
var
|
|
13015
|
-
|
|
13016
|
-
|
|
13170
|
+
var IconArrow = styled.svg(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n transform: rotate(0deg);\n ", ";\n"])), function (_ref2) {
|
|
13171
|
+
var $direction = _ref2.$direction;
|
|
13172
|
+
|
|
13173
|
+
switch ($direction) {
|
|
13174
|
+
case 'up':
|
|
13175
|
+
return 'transform: rotate(-90deg);';
|
|
13176
|
+
|
|
13177
|
+
case 'down':
|
|
13178
|
+
return 'transform: rotate(90deg);';
|
|
13179
|
+
|
|
13180
|
+
case 'left':
|
|
13181
|
+
return 'transform: rotate(180deg);';
|
|
13182
|
+
|
|
13183
|
+
case 'right':
|
|
13184
|
+
default:
|
|
13185
|
+
return 'transform: rotate(0deg);';
|
|
13186
|
+
}
|
|
13017
13187
|
});
|
|
13018
|
-
var
|
|
13019
|
-
var
|
|
13020
|
-
|
|
13021
|
-
|
|
13022
|
-
|
|
13023
|
-
|
|
13188
|
+
var Container$Y = styled.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) {
|
|
13189
|
+
var $layout = _ref3.$layout;
|
|
13190
|
+
return $layout === 'horizontal' ? 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) : 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);
|
|
13191
|
+
});
|
|
13192
|
+
|
|
13193
|
+
var ResizeLine = function ResizeLine(_ref4) {
|
|
13194
|
+
var _ref4$state = _ref4.state,
|
|
13195
|
+
state = _ref4$state === void 0 ? 'default' : _ref4$state,
|
|
13196
|
+
_ref4$layout = _ref4.layout,
|
|
13197
|
+
layout = _ref4$layout === void 0 ? 'horizontal' : _ref4$layout,
|
|
13198
|
+
arrowDirection = _ref4.arrowDirection;
|
|
13199
|
+
return React__default.createElement(Container$Y, {
|
|
13200
|
+
"$layout": layout
|
|
13201
|
+
}, React__default.createElement(Inner$1, null, React__default.createElement(Line, null), React__default.createElement(IconContainer$2, null, state === 'default' ? React__default.createElement(IconDefault, {
|
|
13202
|
+
"$layout": layout,
|
|
13203
|
+
width: "20",
|
|
13204
|
+
height: "20",
|
|
13205
|
+
viewBox: "0 0 20 20",
|
|
13206
|
+
fill: "none",
|
|
13207
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
13208
|
+
}, React__default.createElement("path", {
|
|
13209
|
+
d: "M13 14.875V5.125",
|
|
13210
|
+
strokeLinecap: "round",
|
|
13211
|
+
strokeLinejoin: "round"
|
|
13212
|
+
}), React__default.createElement("path", {
|
|
13213
|
+
d: "M10 14.875V5.125",
|
|
13214
|
+
strokeLinecap: "round",
|
|
13215
|
+
strokeLinejoin: "round"
|
|
13216
|
+
}), React__default.createElement("path", {
|
|
13217
|
+
d: "M7 14.875L7 5.125",
|
|
13218
|
+
strokeLinecap: "round",
|
|
13219
|
+
strokeLinejoin: "round"
|
|
13220
|
+
})) : React__default.createElement(IconArrow, {
|
|
13221
|
+
"$direction": arrowDirection,
|
|
13222
|
+
width: "20",
|
|
13223
|
+
height: "20",
|
|
13224
|
+
viewBox: "0 0 20 20",
|
|
13225
|
+
fill: "none",
|
|
13226
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
13227
|
+
}, React__default.createElement("path", {
|
|
13228
|
+
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",
|
|
13229
|
+
stroke: "#9BA1A6",
|
|
13230
|
+
strokeLinecap: "round",
|
|
13231
|
+
strokeLinejoin: "round"
|
|
13232
|
+
}))), React__default.createElement(Line, null)));
|
|
13233
|
+
};
|
|
13234
|
+
|
|
13235
|
+
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;
|
|
13236
|
+
var DebugData = styled.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"])));
|
|
13237
|
+
var MainArea = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
13238
|
+
var $layout = _ref.$layout,
|
|
13239
|
+
$minDimension = _ref.$minDimension;
|
|
13240
|
+
return $layout === 'vertical' ? css(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
|
|
13241
|
+
});
|
|
13242
|
+
var SideAreaInner = styled.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"])));
|
|
13243
|
+
var SideArea = styled.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) {
|
|
13244
|
+
var $defaultSize = _ref2.$defaultSize;
|
|
13245
|
+
return $defaultSize;
|
|
13246
|
+
}, function (_ref3) {
|
|
13247
|
+
var $collapseState = _ref3.$collapseState;
|
|
13248
|
+
return $collapseState === 'collapsed' ? 'none' : 'block';
|
|
13249
|
+
}, function (_ref4) {
|
|
13250
|
+
var $layout = _ref4.$layout,
|
|
13251
|
+
$maxDimension = _ref4.$maxDimension,
|
|
13252
|
+
$minDimension = _ref4.$minDimension;
|
|
13253
|
+
return $layout === 'vertical' ? 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) : 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);
|
|
13254
|
+
}, function (_ref5) {
|
|
13255
|
+
var $layout = _ref5.$layout,
|
|
13256
|
+
$collapseState = _ref5.$collapseState,
|
|
13257
|
+
$minDimension = _ref5.$minDimension;
|
|
13258
|
+
return $collapseState === 'collapsing' ? 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;
|
|
13259
|
+
}, function (_ref6) {
|
|
13260
|
+
var $collapseState = _ref6.$collapseState;
|
|
13261
|
+
return $collapseState === 'collapsed' ? css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
13262
|
+
}, function (_ref7) {
|
|
13263
|
+
var $layout = _ref7.$layout,
|
|
13264
|
+
$collapseState = _ref7.$collapseState,
|
|
13265
|
+
$minDimension = _ref7.$minDimension;
|
|
13266
|
+
return $collapseState === 'peeking' ? 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;
|
|
13267
|
+
}, function (_ref8) {
|
|
13268
|
+
var $layout = _ref8.$layout,
|
|
13269
|
+
$collapseState = _ref8.$collapseState,
|
|
13270
|
+
$minDimension = _ref8.$minDimension;
|
|
13271
|
+
return $collapseState === 'opening' ? 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;
|
|
13272
|
+
});
|
|
13273
|
+
var DragContainer = styled.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n flex: 0 0 ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: col-resize;\n \n > div {\n transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n }\n\n &:hover > div {\n opacity: 1;\n }\n\n ", "\n\n"])), function (_ref9) {
|
|
13274
|
+
var $size = _ref9.$size;
|
|
13275
|
+
return $size;
|
|
13276
|
+
}, function (_ref10) {
|
|
13277
|
+
var $fauxHover = _ref10.$fauxHover;
|
|
13278
|
+
return $fauxHover === 'false' ? css(_templateObject14$7 || (_templateObject14$7 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 0.6;\n }\n "]))) : css(_templateObject15$5 || (_templateObject15$5 = _taggedTemplateLiteralLoose(["\n > div {\n opacity: 1;\n }\n "])));
|
|
13279
|
+
});
|
|
13280
|
+
var Container$Z = styled.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) {
|
|
13281
|
+
var $initialised = _ref11.$initialised;
|
|
13282
|
+
return $initialised === 'true' ? css(_templateObject17$5 || (_templateObject17$5 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n "]))) : null;
|
|
13283
|
+
}, function (_ref12) {
|
|
13284
|
+
var $layout = _ref12.$layout;
|
|
13285
|
+
return $layout === 'vertical' ? css(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n flex-direction: column;\n ", "{}\n ", "{ \n cursor: row-resize;\n }\n "])), MainArea, DragContainer) : null;
|
|
13286
|
+
}, function (_ref13) {
|
|
13287
|
+
var $reverse = _ref13.$reverse;
|
|
13288
|
+
return $reverse === 'true' ? css(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n ", "{ order: 2; }\n ", "{ order: 1; }\n "])), MainArea, DragContainer) : null;
|
|
13289
|
+
});
|
|
13290
|
+
var SplitLayout = forwardRef(function (_ref14, controlRef) {
|
|
13291
|
+
var mainArea = _ref14.mainArea,
|
|
13292
|
+
sideArea = _ref14.sideArea,
|
|
13293
|
+
_ref14$layout = _ref14.layout,
|
|
13294
|
+
layout = _ref14$layout === void 0 ? 'horizontal' : _ref14$layout,
|
|
13295
|
+
reverse = _ref14.reverse,
|
|
13296
|
+
_ref14$dividerSize = _ref14.dividerSize,
|
|
13297
|
+
dividerSize = _ref14$dividerSize === void 0 ? 16 : _ref14$dividerSize,
|
|
13298
|
+
_ref14$persist = _ref14.persist,
|
|
13299
|
+
persist = _ref14$persist === void 0 ? false : _ref14$persist,
|
|
13300
|
+
_ref14$persistenceKey = _ref14.persistenceKey,
|
|
13301
|
+
persistenceKey = _ref14$persistenceKey === void 0 ? 'resizable_ui' : _ref14$persistenceKey,
|
|
13302
|
+
showDebug = _ref14.showDebug;
|
|
13303
|
+
var componentKey = 'resizable_layout_';
|
|
13304
|
+
var referenceKey = componentKey + persistenceKey;
|
|
13305
|
+
var closedBasis = 1;
|
|
13306
|
+
var hideTolerance = 50;
|
|
13307
|
+
var sideDefaultSize = sideArea.defaultSize || 350;
|
|
13308
|
+
var sideMinSize = sideArea.minSize || 0;
|
|
13309
|
+
var sideMaxSize = sideArea.maxSize;
|
|
13310
|
+
var mainMinSize = mainArea.minSize;
|
|
13311
|
+
|
|
13312
|
+
var _useState = useState(false),
|
|
13313
|
+
initialised = _useState[0],
|
|
13314
|
+
setInitialised = _useState[1];
|
|
13315
|
+
|
|
13316
|
+
var _useState2 = useState(),
|
|
13317
|
+
initialMousePos = _useState2[0],
|
|
13318
|
+
setInitialMousePos = _useState2[1];
|
|
13319
|
+
|
|
13320
|
+
var _useState3 = useState(),
|
|
13321
|
+
mousePosDiff = _useState3[0],
|
|
13322
|
+
setMousePosDiff = _useState3[1];
|
|
13323
|
+
|
|
13324
|
+
var _useState4 = useState(),
|
|
13325
|
+
resizing = _useState4[0],
|
|
13326
|
+
setResizing = _useState4[1];
|
|
13327
|
+
|
|
13328
|
+
var _useState5 = useState('open'),
|
|
13329
|
+
sideAreaState = _useState5[0],
|
|
13330
|
+
setSideAreaState = _useState5[1];
|
|
13331
|
+
|
|
13332
|
+
var _useState6 = useState(sideDefaultSize),
|
|
13333
|
+
sideAreaBasis = _useState6[0],
|
|
13334
|
+
setSideAreaBasis = _useState6[1];
|
|
13335
|
+
|
|
13336
|
+
var _useState7 = useState(sideDefaultSize),
|
|
13337
|
+
sideAreaStartBasis = _useState7[0],
|
|
13338
|
+
setSideAreaStartBasis = _useState7[1];
|
|
13339
|
+
|
|
13340
|
+
var _useState8 = useState(sideDefaultSize),
|
|
13341
|
+
lastOpenSize = _useState8[0],
|
|
13342
|
+
setLastOpenSize = _useState8[1];
|
|
13343
|
+
|
|
13344
|
+
var ContainerRef = useRef();
|
|
13345
|
+
var AreaB = useRef();
|
|
13346
|
+
|
|
13347
|
+
var _useLocalStorage = useLocalStorage(referenceKey + "_size", null),
|
|
13348
|
+
savedSize = _useLocalStorage[0],
|
|
13349
|
+
setSavedSize = _useLocalStorage[1];
|
|
13350
|
+
|
|
13351
|
+
var _useLocalStorage2 = useLocalStorage(referenceKey + "_state", null),
|
|
13352
|
+
savedCollapsedState = _useLocalStorage2[0],
|
|
13353
|
+
setSavedCollapsedState = _useLocalStorage2[1];
|
|
13354
|
+
|
|
13355
|
+
var _useLocalStorage3 = useLocalStorage(referenceKey + "_quick_open_size", null),
|
|
13356
|
+
savedLastOpenSize = _useLocalStorage3[0],
|
|
13357
|
+
setSavedLastOpenSize = _useLocalStorage3[1];
|
|
13358
|
+
|
|
13359
|
+
useEffect(function () {
|
|
13360
|
+
if (!initialised) {
|
|
13361
|
+
if (persist) {
|
|
13362
|
+
if (savedSize) {
|
|
13363
|
+
setSideAreaBasis(savedSize);
|
|
13364
|
+
}
|
|
13365
|
+
|
|
13366
|
+
if (savedCollapsedState) {
|
|
13367
|
+
setSideAreaState(savedCollapsedState);
|
|
13368
|
+
}
|
|
13369
|
+
|
|
13370
|
+
if (savedLastOpenSize) {
|
|
13371
|
+
setLastOpenSize(savedLastOpenSize);
|
|
13372
|
+
}
|
|
13373
|
+
}
|
|
13374
|
+
|
|
13375
|
+
setInitialised(true);
|
|
13376
|
+
}
|
|
13377
|
+
}, [initialised, persist, savedCollapsedState, savedSize, savedLastOpenSize]);
|
|
13378
|
+
useImperativeHandle(controlRef, function () {
|
|
13379
|
+
return {
|
|
13380
|
+
open: function open() {
|
|
13381
|
+
_open();
|
|
13382
|
+
},
|
|
13383
|
+
close: function close() {
|
|
13384
|
+
collapse();
|
|
13385
|
+
},
|
|
13386
|
+
reset: function reset() {
|
|
13387
|
+
restoreDefault();
|
|
13388
|
+
}
|
|
13389
|
+
};
|
|
13390
|
+
});
|
|
13391
|
+
var restoreDefault = useCallback(function () {
|
|
13392
|
+
setSideAreaBasis(sideDefaultSize);
|
|
13393
|
+
setSideAreaState('open');
|
|
13394
|
+
setSavedSize(null);
|
|
13395
|
+
setSavedCollapsedState(null);
|
|
13396
|
+
}, [setSideAreaBasis, sideDefaultSize, setSideAreaState, setSavedSize, setSavedCollapsedState]);
|
|
13397
|
+
var collapse = useCallback(function () {
|
|
13398
|
+
setSideAreaState('collapsed');
|
|
13399
|
+
setSideAreaBasis(closedBasis);
|
|
13400
|
+
setSideAreaStartBasis(closedBasis);
|
|
13401
|
+
|
|
13402
|
+
if (persist) {
|
|
13403
|
+
setSavedSize(closedBasis);
|
|
13404
|
+
setSavedCollapsedState('collapsed');
|
|
13405
|
+
setSavedLastOpenSize(sideAreaStartBasis);
|
|
13406
|
+
}
|
|
13407
|
+
}, [setSideAreaBasis, setSideAreaState, setSavedCollapsedState, setSavedSize, setSavedLastOpenSize, sideAreaStartBasis, persist]);
|
|
13408
|
+
|
|
13409
|
+
var _open = useCallback(function () {
|
|
13410
|
+
setSideAreaState('open');
|
|
13411
|
+
var openBasis;
|
|
13412
|
+
|
|
13413
|
+
if (sideAreaBasis > closedBasis) {
|
|
13414
|
+
openBasis = layout === 'horizontal' ? AreaB.current.clientWidth : AreaB.current.clientHeight;
|
|
13415
|
+
} else {
|
|
13416
|
+
openBasis = lastOpenSize;
|
|
13417
|
+
}
|
|
13418
|
+
|
|
13419
|
+
setSideAreaStartBasis(openBasis);
|
|
13420
|
+
setSideAreaBasis(openBasis);
|
|
13421
|
+
|
|
13422
|
+
if (persist) {
|
|
13423
|
+
setSavedSize(Math.round(sideAreaBasis));
|
|
13424
|
+
setSavedCollapsedState('open');
|
|
13425
|
+
}
|
|
13426
|
+
}, [persist, setSavedCollapsedState, setSavedSize, lastOpenSize, sideAreaBasis, layout]);
|
|
13427
|
+
|
|
13428
|
+
var releaseDrag = useCallback(function () {
|
|
13429
|
+
if (sideAreaState === 'collapsing' && sideAreaBasis < sideMinSize - hideTolerance) {
|
|
13430
|
+
collapse();
|
|
13431
|
+
} else {
|
|
13432
|
+
setSideAreaStartBasis(Math.round(sideAreaBasis));
|
|
13433
|
+
setLastOpenSize(Math.round(sideAreaBasis));
|
|
13434
|
+
|
|
13435
|
+
_open();
|
|
13436
|
+
}
|
|
13437
|
+
|
|
13438
|
+
setResizing(false);
|
|
13439
|
+
}, [collapse, _open, sideMinSize, sideAreaBasis, sideAreaState]);
|
|
13440
|
+
var handleDragPointerDown = useCallback(function (event) {
|
|
13441
|
+
event.preventDefault();
|
|
13442
|
+
var clientX = event.clientX,
|
|
13443
|
+
clientY = event.clientY;
|
|
13444
|
+
|
|
13445
|
+
if (sideAreaState === 'collapsed') {
|
|
13446
|
+
setSideAreaStartBasis(sideAreaBasis);
|
|
13447
|
+
} else {
|
|
13448
|
+
setSideAreaStartBasis(clampInt(sideAreaBasis, sideMinSize, sideMaxSize));
|
|
13449
|
+
}
|
|
13450
|
+
|
|
13451
|
+
setInitialMousePos({
|
|
13452
|
+
x: clientX,
|
|
13453
|
+
y: clientY
|
|
13454
|
+
});
|
|
13455
|
+
setMousePosDiff({
|
|
13456
|
+
x: 0,
|
|
13457
|
+
y: 0
|
|
13458
|
+
});
|
|
13459
|
+
setResizing(true);
|
|
13460
|
+
}, [sideAreaBasis, sideMaxSize, sideMinSize, sideAreaState]);
|
|
13461
|
+
|
|
13462
|
+
var handleDragPointerUp = function handleDragPointerUp() {
|
|
13463
|
+
if (resizing) {
|
|
13464
|
+
releaseDrag();
|
|
13465
|
+
}
|
|
13466
|
+
};
|
|
13467
|
+
|
|
13468
|
+
var handleDragPointerMove = useCallback(function (event) {
|
|
13469
|
+
var clientX = event.clientX,
|
|
13470
|
+
clientY = event.clientY;
|
|
13471
|
+
var newBasis;
|
|
13472
|
+
var collapse = sideAreaState;
|
|
13473
|
+
|
|
13474
|
+
if (resizing && initialMousePos && sideAreaStartBasis) {
|
|
13475
|
+
setMousePosDiff({
|
|
13476
|
+
x: initialMousePos.x - clientX,
|
|
13477
|
+
y: initialMousePos.y - clientY
|
|
13478
|
+
});
|
|
13479
|
+
|
|
13480
|
+
if (layout === 'horizontal') {
|
|
13481
|
+
var maxClamp = ContainerRef.current.clientWidth - dividerSize - (mainMinSize || 0);
|
|
13482
|
+
|
|
13483
|
+
if (!reverse) {
|
|
13484
|
+
newBasis = clampInt(sideAreaStartBasis + (initialMousePos.x - clientX), null, maxClamp);
|
|
13485
|
+
} else {
|
|
13486
|
+
newBasis = clampInt(sideAreaStartBasis - (initialMousePos.x - clientX), null, maxClamp);
|
|
13487
|
+
}
|
|
13488
|
+
} else {
|
|
13489
|
+
var _maxClamp = ContainerRef.current.clientHeight - dividerSize - (mainMinSize || 0);
|
|
13490
|
+
|
|
13491
|
+
if (!reverse) {
|
|
13492
|
+
newBasis = clampInt(sideAreaStartBasis + (initialMousePos.y - clientY), null, _maxClamp);
|
|
13493
|
+
} else {
|
|
13494
|
+
newBasis = clampInt(sideAreaStartBasis - (initialMousePos.y - clientY), null, _maxClamp);
|
|
13495
|
+
}
|
|
13496
|
+
}
|
|
13497
|
+
|
|
13498
|
+
if (sideArea.collapsable) {
|
|
13499
|
+
var inCloseRange = newBasis < sideMinSize - hideTolerance;
|
|
13500
|
+
|
|
13501
|
+
if (sideAreaState === 'open' && inCloseRange) {
|
|
13502
|
+
collapse = 'collapsing';
|
|
13503
|
+
} else if (sideAreaState === 'opening' && inCloseRange) {
|
|
13504
|
+
collapse = 'collapsing';
|
|
13505
|
+
} else if (sideAreaState === 'collapsing' && !inCloseRange) {
|
|
13506
|
+
collapse = 'open';
|
|
13507
|
+
} else if (sideAreaState === 'collapsed') {
|
|
13508
|
+
collapse = 'peeking';
|
|
13509
|
+
} else if (sideAreaState === 'peeking' && !inCloseRange) {
|
|
13510
|
+
collapse = 'opening';
|
|
13511
|
+
}
|
|
13512
|
+
}
|
|
13513
|
+
|
|
13514
|
+
setSideAreaBasis(newBasis);
|
|
13515
|
+
setSideAreaState(collapse);
|
|
13516
|
+
}
|
|
13517
|
+
}, [setSideAreaBasis, setMousePosDiff, resizing, initialMousePos, sideAreaStartBasis, sideAreaState, layout, dividerSize, mainMinSize, sideMinSize, reverse, sideArea.collapsable]);
|
|
13518
|
+
var handleMouseLeaveViewport = useCallback(function () {
|
|
13519
|
+
if (resizing) {
|
|
13520
|
+
releaseDrag();
|
|
13521
|
+
}
|
|
13522
|
+
}, [resizing, releaseDrag]);
|
|
13523
|
+
useEffect(function () {
|
|
13524
|
+
document.addEventListener('mouseleave', handleMouseLeaveViewport);
|
|
13525
|
+
return function () {
|
|
13526
|
+
document.removeEventListener('mouseleave', handleMouseLeaveViewport);
|
|
13527
|
+
};
|
|
13528
|
+
}, [handleMouseLeaveViewport]);
|
|
13529
|
+
|
|
13530
|
+
var resizeLineArrowDirection = function resizeLineArrowDirection() {
|
|
13531
|
+
if (sideAreaState === 'collapsed' || sideAreaState === 'peeking') {
|
|
13532
|
+
if (layout === 'horizontal') {
|
|
13533
|
+
if (!reverse) {
|
|
13534
|
+
return 'left';
|
|
13535
|
+
} else {
|
|
13536
|
+
return 'right';
|
|
13537
|
+
}
|
|
13538
|
+
} else {
|
|
13539
|
+
if (!reverse) {
|
|
13540
|
+
return 'up';
|
|
13541
|
+
} else {
|
|
13542
|
+
return 'down';
|
|
13543
|
+
}
|
|
13544
|
+
}
|
|
13545
|
+
} else {
|
|
13546
|
+
if (layout === 'horizontal') {
|
|
13547
|
+
if (!reverse) {
|
|
13548
|
+
return 'right';
|
|
13549
|
+
} else {
|
|
13550
|
+
return 'left';
|
|
13551
|
+
}
|
|
13552
|
+
} else {
|
|
13553
|
+
if (!reverse) {
|
|
13554
|
+
return 'down';
|
|
13555
|
+
} else {
|
|
13556
|
+
return 'up';
|
|
13557
|
+
}
|
|
13558
|
+
}
|
|
13559
|
+
}
|
|
13560
|
+
};
|
|
13561
|
+
|
|
13562
|
+
var resizeLineState = function resizeLineState() {
|
|
13563
|
+
if (sideAreaState === 'collapsed' || sideAreaState === 'peeking') {
|
|
13564
|
+
return 'arrow';
|
|
13565
|
+
} else if (sideAreaState === 'collapsing') {
|
|
13566
|
+
return 'arrow';
|
|
13567
|
+
} else {
|
|
13568
|
+
return 'default';
|
|
13569
|
+
}
|
|
13570
|
+
};
|
|
13571
|
+
|
|
13572
|
+
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));
|
|
13573
|
+
return React__default.createElement(Container$Z, {
|
|
13574
|
+
ref: ContainerRef,
|
|
13575
|
+
onPointerMove: handleDragPointerMove,
|
|
13576
|
+
onPointerUp: handleDragPointerUp,
|
|
13577
|
+
"$initialised": initialised ? 'true' : 'false',
|
|
13578
|
+
"$layout": layout,
|
|
13579
|
+
"$reverse": reverse ? 'true' : 'false'
|
|
13580
|
+
}, React__default.createElement(MainArea, {
|
|
13581
|
+
"$layout": layout,
|
|
13582
|
+
"$minDimension": mainMinSize
|
|
13583
|
+
}, mainArea.content), React__default.createElement(DragContainer, {
|
|
13584
|
+
onPointerDown: handleDragPointerDown,
|
|
13585
|
+
onDoubleClick: restoreDefault,
|
|
13586
|
+
"$size": dividerSize,
|
|
13587
|
+
"$fauxHover": resizing ? 'true' : 'false'
|
|
13588
|
+
}, React__default.createElement(ResizeLine, {
|
|
13589
|
+
state: resizeLineState(),
|
|
13590
|
+
layout: layout,
|
|
13591
|
+
arrowDirection: resizeLineArrowDirection()
|
|
13592
|
+
})), React__default.createElement(SideArea, {
|
|
13593
|
+
ref: AreaB,
|
|
13594
|
+
style: {
|
|
13595
|
+
flexBasis: sideAreaBasis + "px"
|
|
13596
|
+
},
|
|
13597
|
+
"$defaultSize": sideDefaultSize,
|
|
13598
|
+
"$minDimension": sideMinSize,
|
|
13599
|
+
"$maxDimension": sideMaxSize,
|
|
13600
|
+
"$layout": layout,
|
|
13601
|
+
"$collapseState": sideAreaState
|
|
13602
|
+
}, React__default.createElement(SideAreaInner, null, sideArea.content)), showDebug ? debugData : null);
|
|
13024
13603
|
});
|
|
13025
13604
|
|
|
13026
|
-
var
|
|
13027
|
-
var
|
|
13605
|
+
var clampInt = function clampInt(value, lower, upper) {
|
|
13606
|
+
var clampedInt = value;
|
|
13607
|
+
clampedInt = upper && clampedInt > upper ? upper : clampedInt;
|
|
13608
|
+
clampedInt = lower && clampedInt < lower ? lower : clampedInt;
|
|
13609
|
+
return clampedInt;
|
|
13610
|
+
};
|
|
13611
|
+
|
|
13612
|
+
var _templateObject$1v, _templateObject2$1i, _templateObject3$17, _templateObject4$11, _templateObject5$Y, _templateObject6$I, _templateObject7$F;
|
|
13613
|
+
var MOBILE_CLOSE_HEIGHT = 50;
|
|
13614
|
+
var MOBILE_NAVBAR_HEIGHT = 68;
|
|
13615
|
+
var Layout = styled.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
13616
|
+
var MobileLayout = styled.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose([""])));
|
|
13617
|
+
var Content$1 = styled.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) {
|
|
13618
|
+
var maxWidth = _ref.maxWidth;
|
|
13619
|
+
return maxWidth && css(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
|
|
13620
|
+
});
|
|
13621
|
+
var MainContainer = styled.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
|
|
13622
|
+
var ContentArea = styled.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) {
|
|
13623
|
+
var legacyLayout = _ref2.legacyLayout,
|
|
13624
|
+
paddingOverride = _ref2.paddingOverride,
|
|
13625
|
+
maxWidth = _ref2.maxWidth;
|
|
13626
|
+
return legacyLayout && 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');
|
|
13627
|
+
});
|
|
13628
|
+
|
|
13629
|
+
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;
|
|
13630
|
+
var ContextTitle = styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n opacity: 0;\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
13028
13631
|
var theme = _ref.theme;
|
|
13029
|
-
return css(_templateObject2$
|
|
13632
|
+
return css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n transition: opacity ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
|
|
13030
13633
|
}, function (_ref2) {
|
|
13031
13634
|
var compact = _ref2.compact;
|
|
13032
|
-
return compact && css(_templateObject3$
|
|
13635
|
+
return compact && css(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
13033
13636
|
});
|
|
13034
|
-
var ContextIcon$1 = styled.div(_templateObject4
|
|
13637
|
+
var ContextIcon$1 = styled.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) {
|
|
13035
13638
|
var theme = _ref3.theme;
|
|
13036
|
-
return css(_templateObject5$
|
|
13639
|
+
return 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);
|
|
13037
13640
|
});
|
|
13038
|
-
var ContextIndicator = styled.div(_templateObject6$
|
|
13641
|
+
var ContextIndicator = styled.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) {
|
|
13039
13642
|
var theme = _ref4.theme;
|
|
13040
|
-
return css(_templateObject7$
|
|
13643
|
+
return css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n transition: opacity 0 ", ";\n "])), theme.animation.easing.primary.easeInOut);
|
|
13041
13644
|
});
|
|
13042
|
-
var ContextActionBaseCSS$1 = css(_templateObject8$
|
|
13043
|
-
var StyledAnchor = styled.a(_templateObject9$
|
|
13044
|
-
var ExternalIconWrapper = styled.div(_templateObject10$
|
|
13045
|
-
var ContextWrapper = styled.div(_templateObject11$
|
|
13645
|
+
var ContextActionBaseCSS$1 = 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"])));
|
|
13646
|
+
var StyledAnchor = styled.a(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
|
|
13647
|
+
var ExternalIconWrapper = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
13648
|
+
var ContextWrapper = styled.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) {
|
|
13046
13649
|
var theme = _ref5.theme;
|
|
13047
|
-
return theme && css(_templateObject12$
|
|
13650
|
+
return theme && css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
|
|
13048
13651
|
}, function (_ref6) {
|
|
13049
13652
|
var $menuOpen = _ref6.$menuOpen;
|
|
13050
|
-
return $menuOpen && css(_templateObject13$
|
|
13653
|
+
return $menuOpen && css(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
13051
13654
|
}, ContextIcon$1, function (_ref7) {
|
|
13052
13655
|
var theme = _ref7.theme;
|
|
13053
13656
|
return theme.styles.global.mainMenu.iconBackground.hover;
|
|
13054
13657
|
}, IconWrapper);
|
|
13055
|
-
var ContextActionA = styled(Link)(_templateObject14$
|
|
13658
|
+
var ContextActionA = styled(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) {
|
|
13056
13659
|
var theme = _ref8.theme;
|
|
13057
|
-
return theme && css(_templateObject15$
|
|
13660
|
+
return theme && css(_templateObject15$6 || (_templateObject15$6 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
|
|
13058
13661
|
}, function (_ref9) {
|
|
13059
13662
|
var $menuOpen = _ref9.$menuOpen;
|
|
13060
|
-
return $menuOpen && css(_templateObject16$
|
|
13663
|
+
return $menuOpen && css(_templateObject16$6 || (_templateObject16$6 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
13061
13664
|
}, ContextIcon$1, function (_ref10) {
|
|
13062
13665
|
var theme = _ref10.theme;
|
|
13063
13666
|
return theme.styles.global.mainMenu.iconBackground.hover;
|
|
13064
13667
|
}, IconWrapper, function (_ref11) {
|
|
13065
13668
|
var $isActive = _ref11.$isActive;
|
|
13066
|
-
return $isActive && css(_templateObject17$
|
|
13669
|
+
return $isActive && css(_templateObject17$6 || (_templateObject17$6 = _taggedTemplateLiteralLoose(["\n ", ",\n &:hover ", "{\n ", ";\n }\n "])), ContextIcon$1, ContextIcon$1, function (_ref12) {
|
|
13067
13670
|
var theme = _ref12.theme;
|
|
13068
13671
|
return theme.styles.global.mainMenu.iconBackground.active;
|
|
13069
13672
|
});
|
|
13070
13673
|
});
|
|
13071
|
-
var ContextActionButton$1 = styled.button(_templateObject18$
|
|
13674
|
+
var ContextActionButton$1 = styled.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) {
|
|
13072
13675
|
var theme = _ref13.theme;
|
|
13073
|
-
return theme && css(_templateObject19$
|
|
13676
|
+
return theme && css(_templateObject19$4 || (_templateObject19$4 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", ";\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.menuItem["default"]);
|
|
13074
13677
|
}, function (_ref14) {
|
|
13075
13678
|
var menuOpen = _ref14.menuOpen,
|
|
13076
13679
|
theme = _ref14.theme;
|
|
@@ -13276,42 +13879,42 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
13276
13879
|
};
|
|
13277
13880
|
};
|
|
13278
13881
|
|
|
13279
|
-
var _templateObject$
|
|
13280
|
-
var Submenu = styled.ul(_templateObject$
|
|
13281
|
-
var SubmenuHeader = styled.div(_templateObject2$
|
|
13282
|
-
var SubmenuItemTitle = styled.span(_templateObject3$
|
|
13882
|
+
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;
|
|
13883
|
+
var Submenu = styled.ul(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
13884
|
+
var SubmenuHeader = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
13885
|
+
var SubmenuItemTitle = styled.span(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n display: block;\n ", ";\n\n"])), function (_ref) {
|
|
13283
13886
|
var theme = _ref.theme;
|
|
13284
|
-
return theme && css(_templateObject4$
|
|
13887
|
+
return theme && css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n ", "\n "])), theme.fontFamily.ui, theme.typography.global.mainMenu.subheader);
|
|
13285
13888
|
});
|
|
13286
|
-
var SubmenuItemLink = styled(Link)(_templateObject5$
|
|
13287
|
-
var ExternalIconWrapper$1 = styled.div(_templateObject6$
|
|
13288
|
-
var SubmenuItemAnchor = styled.a(_templateObject7$
|
|
13289
|
-
var SubmenuItem = styled.li(_templateObject8$
|
|
13889
|
+
var SubmenuItemLink = styled(Link)(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
|
|
13890
|
+
var ExternalIconWrapper$1 = styled.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
13891
|
+
var SubmenuItemAnchor = styled.a(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
13892
|
+
var SubmenuItem = styled.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: ", ";\n }\n\n ", ", ", "{\n\n ", ";\n\n\n\n }\n"])), function (_ref2) {
|
|
13290
13893
|
var colors = _ref2.theme.colors;
|
|
13291
13894
|
return colors.divider;
|
|
13292
13895
|
}, SubmenuItemLink, SubmenuItemAnchor, function (_ref3) {
|
|
13293
13896
|
var theme = _ref3.theme,
|
|
13294
13897
|
isActive = _ref3.isActive;
|
|
13295
|
-
return theme && css(_templateObject9$
|
|
13898
|
+
return theme && 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 && css(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active));
|
|
13296
13899
|
});
|
|
13297
|
-
var SubmenuContainer = styled.div(_templateObject11$
|
|
13900
|
+
var SubmenuContainer = styled.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) {
|
|
13298
13901
|
var theme = _ref4.theme;
|
|
13299
|
-
return theme && css(_templateObject12$
|
|
13902
|
+
return theme && 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);
|
|
13300
13903
|
}, function (_ref5) {
|
|
13301
13904
|
var colors = _ref5.theme.colors;
|
|
13302
13905
|
return colors.divider;
|
|
13303
13906
|
});
|
|
13304
|
-
var ContextContainer = styled.div(_templateObject13$
|
|
13907
|
+
var ContextContainer = styled.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) {
|
|
13305
13908
|
var minHeight = _ref6.minHeight;
|
|
13306
13909
|
return minHeight ? minHeight + "px" : "70px";
|
|
13307
13910
|
}, SubmenuContainer, function (_ref7) {
|
|
13308
13911
|
var open = _ref7.open,
|
|
13309
13912
|
maxHeight = _ref7.maxHeight,
|
|
13310
13913
|
theme = _ref7.theme;
|
|
13311
|
-
return open && css(_templateObject14$
|
|
13914
|
+
return open && 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);
|
|
13312
13915
|
}, function (_ref8) {
|
|
13313
13916
|
var loading = _ref8.loading;
|
|
13314
|
-
return loading === 'true' && css(_templateObject15$
|
|
13917
|
+
return loading === 'true' && css(_templateObject15$7 || (_templateObject15$7 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
13315
13918
|
});
|
|
13316
13919
|
|
|
13317
13920
|
var NavigationItem = function NavigationItem(_ref9) {
|
|
@@ -13423,30 +14026,30 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
13423
14026
|
return output;
|
|
13424
14027
|
};
|
|
13425
14028
|
|
|
13426
|
-
var _templateObject$
|
|
13427
|
-
var Logo = styled(Link)(_templateObject$
|
|
13428
|
-
var LogoMark = styled.div(_templateObject2$
|
|
13429
|
-
var LogoType = styled.div(_templateObject3$
|
|
13430
|
-
var SVGObject = styled.object(_templateObject4$
|
|
13431
|
-
var SVGObjectText = styled.object(_templateObject5
|
|
13432
|
-
var NavigationContainer = styled.div(_templateObject6$
|
|
13433
|
-
var MenuFooter = styled.div(_templateObject7$
|
|
14029
|
+
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;
|
|
14030
|
+
var Logo = styled(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"])));
|
|
14031
|
+
var LogoMark = styled.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
|
|
14032
|
+
var LogoType = styled.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"])));
|
|
14033
|
+
var SVGObject = styled.object(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose([""])));
|
|
14034
|
+
var SVGObjectText = styled.object(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
|
|
14035
|
+
var NavigationContainer = styled.div(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose([""])));
|
|
14036
|
+
var MenuFooter = styled.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) {
|
|
13434
14037
|
var theme = _ref.theme;
|
|
13435
|
-
return theme && css(_templateObject8$
|
|
14038
|
+
return theme && css(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n ", "\n "])), theme.styles.global.mainMenu.footerBackground);
|
|
13436
14039
|
});
|
|
13437
|
-
var FooterItemContainer = styled.div(_templateObject9$
|
|
13438
|
-
var PushContainer = styled.div(_templateObject10$
|
|
14040
|
+
var FooterItemContainer = styled.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
14041
|
+
var PushContainer = styled.div(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref2) {
|
|
13439
14042
|
var theme = _ref2.theme,
|
|
13440
14043
|
isPinned = _ref2.isPinned;
|
|
13441
|
-
return theme && css(_templateObject11$
|
|
14044
|
+
return theme && css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? theme.dimensions.global.mainMenu.width.open : theme.dimensions.global.mainMenu.width.closed);
|
|
13442
14045
|
});
|
|
13443
|
-
var Container$
|
|
14046
|
+
var Container$_ = styled.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) {
|
|
13444
14047
|
var theme = _ref3.theme,
|
|
13445
14048
|
open = _ref3.open,
|
|
13446
14049
|
desktopSize = _ref3.desktopSize;
|
|
13447
|
-
return theme && css(_templateObject13$
|
|
14050
|
+
return theme && 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' ? "" : 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);
|
|
13448
14051
|
});
|
|
13449
|
-
var ContainerInner = styled.div(_templateObject15$
|
|
14052
|
+
var ContainerInner = styled.div(_templateObject15$8 || (_templateObject15$8 = _taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_ref4) {
|
|
13450
14053
|
var theme = _ref4.theme;
|
|
13451
14054
|
return theme.dimensions.global.mainMenu.width.open;
|
|
13452
14055
|
});
|
|
@@ -13521,7 +14124,7 @@ var MainMenu = function MainMenu(_ref5) {
|
|
|
13521
14124
|
}, [checkedInItems, content]);
|
|
13522
14125
|
return React__default.createElement(PushContainer, {
|
|
13523
14126
|
isPinned: menuState.isMenuPinned
|
|
13524
|
-
}, ReactDom.createPortal(React__default.createElement(Container$
|
|
14127
|
+
}, ReactDom.createPortal(React__default.createElement(Container$_, {
|
|
13525
14128
|
open: menuState.isMenuOpen,
|
|
13526
14129
|
desktopSize: menuState.desktopSize,
|
|
13527
14130
|
onPointerEnter: menuState.isMenuPinned ? function () {} : autoMenuOpen,
|
|
@@ -13568,26 +14171,26 @@ var MainMenu = function MainMenu(_ref5) {
|
|
|
13568
14171
|
})) : null))), document.body));
|
|
13569
14172
|
};
|
|
13570
14173
|
|
|
13571
|
-
var _templateObject$
|
|
13572
|
-
var MetaConatiner = styled.div(_templateObject$
|
|
13573
|
-
var LabelTitle = styled.div(_templateObject2$
|
|
14174
|
+
var _templateObject$1z, _templateObject2$1m, _templateObject3$1b, _templateObject4$15, _templateObject5$10, _templateObject6$M, _templateObject7$J, _templateObject8$B, _templateObject9$u, _templateObject10$q, _templateObject11$i;
|
|
14175
|
+
var MetaConatiner = styled.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"])));
|
|
14176
|
+
var LabelTitle = styled.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: ", ";\n margin-top: 2px;\n"])), function (_ref) {
|
|
13574
14177
|
var theme = _ref.theme;
|
|
13575
14178
|
return theme.fontFamily.ui;
|
|
13576
14179
|
});
|
|
13577
|
-
var LabelContent = styled.div(_templateObject3$
|
|
13578
|
-
var LabelNotes = styled.div(_templateObject4$
|
|
14180
|
+
var LabelContent = styled.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"])));
|
|
14181
|
+
var LabelNotes = styled.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) {
|
|
13579
14182
|
var theme = _ref2.theme;
|
|
13580
|
-
return theme && css(_templateObject5$
|
|
14183
|
+
return theme && css(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.data);
|
|
13581
14184
|
});
|
|
13582
|
-
var TitleContainer = styled.div(_templateObject6$
|
|
13583
|
-
var Container
|
|
13584
|
-
var TitleBox = styled.div(_templateObject8$
|
|
13585
|
-
var IconBox = styled.div(_templateObject9$
|
|
13586
|
-
var CopyTextBox = styled.pre(_templateObject10$
|
|
14185
|
+
var TitleContainer = styled.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"])));
|
|
14186
|
+
var Container$$ = styled.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
|
|
14187
|
+
var TitleBox = styled.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
14188
|
+
var IconBox = styled.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$$);
|
|
14189
|
+
var CopyTextBox = styled.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) {
|
|
13587
14190
|
var theme = _ref3.theme;
|
|
13588
14191
|
return theme.fontFamily.data;
|
|
13589
14192
|
});
|
|
13590
|
-
var CopyBox = styled.div(_templateObject11$
|
|
14193
|
+
var CopyBox = styled.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n"])));
|
|
13591
14194
|
|
|
13592
14195
|
var UserDrawerMeta = function UserDrawerMeta(_ref4) {
|
|
13593
14196
|
var item = _ref4.item,
|
|
@@ -13632,7 +14235,7 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
|
|
|
13632
14235
|
var onLeaveMeatInfo = useCallback(function () {
|
|
13633
14236
|
setOnHoverColorValue('dimmed');
|
|
13634
14237
|
}, []);
|
|
13635
|
-
return React__default.createElement(Fragment, null, title !== '' && React__default.createElement(Container
|
|
14238
|
+
return React__default.createElement(Fragment, null, title !== '' && React__default.createElement(Container$$, {
|
|
13636
14239
|
onClick: onUserDrawerMetaClick
|
|
13637
14240
|
}, React__default.createElement(MetaConatiner, null, React__default.createElement(TitleBox, null, React__default.createElement(TitleContainer, null, React__default.createElement(Icon, {
|
|
13638
14241
|
icon: icon,
|
|
@@ -13657,20 +14260,20 @@ var UserDrawerMeta = function UserDrawerMeta(_ref4) {
|
|
|
13657
14260
|
}, notes) : null)));
|
|
13658
14261
|
};
|
|
13659
14262
|
|
|
13660
|
-
var _templateObject$
|
|
13661
|
-
var Container$
|
|
14263
|
+
var _templateObject$1A, _templateObject2$1n, _templateObject3$1c, _templateObject4$16;
|
|
14264
|
+
var Container$10 = styled.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) {
|
|
13662
14265
|
var theme = _ref.theme;
|
|
13663
14266
|
return theme.colors.divider;
|
|
13664
14267
|
});
|
|
13665
|
-
var ColumnContainer = styled.div(_templateObject2$
|
|
13666
|
-
var Title$8 = styled.div(_templateObject3$
|
|
14268
|
+
var ColumnContainer = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
|
|
14269
|
+
var Title$8 = styled.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) {
|
|
13667
14270
|
var theme = _ref2.theme;
|
|
13668
14271
|
return theme.fontFamily.ui;
|
|
13669
14272
|
}, function (_ref3) {
|
|
13670
14273
|
var theme = _ref3.theme;
|
|
13671
14274
|
return theme.typography.global.mainMenu.subheader.color;
|
|
13672
14275
|
});
|
|
13673
|
-
var SubTitle$1 = styled.div(_templateObject4$
|
|
14276
|
+
var SubTitle$1 = styled.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) {
|
|
13674
14277
|
var theme = _ref4.theme;
|
|
13675
14278
|
return theme.fontFamily.ui;
|
|
13676
14279
|
}, function (_ref5) {
|
|
@@ -13685,7 +14288,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
|
|
|
13685
14288
|
subTitle = _ref6.subTitle,
|
|
13686
14289
|
_ref6$onClickCallback = _ref6.onClickCallback,
|
|
13687
14290
|
onClickCallback = _ref6$onClickCallback === void 0 ? function () {} : _ref6$onClickCallback;
|
|
13688
|
-
return React__default.createElement(Container$
|
|
14291
|
+
return React__default.createElement(Container$10, {
|
|
13689
14292
|
onClick: onClickCallback
|
|
13690
14293
|
}, React__default.createElement(Icon, {
|
|
13691
14294
|
icon: icon,
|
|
@@ -13694,37 +14297,37 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref6) {
|
|
|
13694
14297
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13695
14298
|
};
|
|
13696
14299
|
|
|
13697
|
-
var _templateObject$
|
|
13698
|
-
var DrawerTop = styled.div(_templateObject$
|
|
13699
|
-
var DrawerBottom = styled.div(_templateObject2$
|
|
14300
|
+
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;
|
|
14301
|
+
var DrawerTop = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose([""])));
|
|
14302
|
+
var DrawerBottom = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
13700
14303
|
var theme = _ref.theme;
|
|
13701
|
-
return css(_templateObject3$
|
|
14304
|
+
return 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);
|
|
13702
14305
|
});
|
|
13703
|
-
var DrawerHeader = styled.h2(_templateObject4$
|
|
14306
|
+
var DrawerHeader = styled.h2(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0;\n margin: 0 0 5px;\n"])), function (_ref2) {
|
|
13704
14307
|
var theme = _ref2.theme;
|
|
13705
14308
|
return theme.typography.global.mainMenu.subheader;
|
|
13706
14309
|
});
|
|
13707
|
-
var CurrentUser = styled.div(_templateObject5$
|
|
14310
|
+
var CurrentUser = styled.div(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n\n ", ";\n"])), function (_ref3) {
|
|
13708
14311
|
var theme = _ref3.theme;
|
|
13709
|
-
return css(_templateObject6$
|
|
14312
|
+
return css(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n ", ";\n "])), theme.styles.global.mainMenu.lines.backgroundColor, theme.typography.global.mainMenu.identity);
|
|
13710
14313
|
});
|
|
13711
|
-
var UserOptions = styled.div(_templateObject7$
|
|
14314
|
+
var UserOptions = styled.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n ", ";\n\n"])), function (_ref4) {
|
|
13712
14315
|
var theme = _ref4.theme;
|
|
13713
|
-
return css(_templateObject8$
|
|
14316
|
+
return css(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.styles.global.mainMenu.lines.backgroundColor);
|
|
13714
14317
|
});
|
|
13715
|
-
var Logout = styled.div(_templateObject9$
|
|
13716
|
-
var LinkMenu = styled.ul(_templateObject10$
|
|
13717
|
-
var LinkMenuItem = styled.li(_templateObject11$
|
|
13718
|
-
var IconWrapperFooter = styled.div(_templateObject12$
|
|
13719
|
-
var LinkMenuItemA = styled(Link)(_templateObject13$
|
|
14318
|
+
var Logout = styled.div(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
|
|
14319
|
+
var LinkMenu = styled.ul(_templateObject10$r || (_templateObject10$r = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
14320
|
+
var LinkMenuItem = styled.li(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
14321
|
+
var IconWrapperFooter = styled.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"])));
|
|
14322
|
+
var LinkMenuItemA = styled(Link)(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n\n ", ";\n\n ", ";\n"])), resetButtonStyles, function (_ref5) {
|
|
13720
14323
|
var theme = _ref5.theme;
|
|
13721
|
-
return css(_templateObject14$
|
|
14324
|
+
return 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);
|
|
13722
14325
|
}, function (_ref6) {
|
|
13723
14326
|
var theme = _ref6.theme,
|
|
13724
14327
|
isActive = _ref6.isActive;
|
|
13725
|
-
return isActive && css(_templateObject15$
|
|
14328
|
+
return isActive && css(_templateObject15$9 || (_templateObject15$9 = _taggedTemplateLiteralLoose(["\n &, &:hover {\n ", ";\n }\n "])), theme.typography.global.mainMenu.subItem.active);
|
|
13726
14329
|
});
|
|
13727
|
-
var FooterMeta = styled.div(_templateObject16$
|
|
14330
|
+
var FooterMeta = styled.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) {
|
|
13728
14331
|
var theme = _ref7.theme;
|
|
13729
14332
|
return theme.fontFamily.ui;
|
|
13730
14333
|
}, function (_ref8) {
|
|
@@ -13734,11 +14337,11 @@ var FooterMeta = styled.div(_templateObject16$6 || (_templateObject16$6 = _tagge
|
|
|
13734
14337
|
var icon = _ref9.icon;
|
|
13735
14338
|
return icon !== '' ? '31px;' : '21px;';
|
|
13736
14339
|
});
|
|
13737
|
-
var NavigationContainer$1 = styled.div(_templateObject17$
|
|
14340
|
+
var NavigationContainer$1 = styled.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) {
|
|
13738
14341
|
var theme = _ref10.theme;
|
|
13739
|
-
return css(_templateObject18$
|
|
14342
|
+
return css(_templateObject18$5 || (_templateObject18$5 = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n "])), theme.colors.divider);
|
|
13740
14343
|
});
|
|
13741
|
-
var FooterText = styled.div(_templateObject19$
|
|
14344
|
+
var FooterText = styled.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) {
|
|
13742
14345
|
var icon = _ref11.icon;
|
|
13743
14346
|
return icon !== '' ? '136px;' : '164px;';
|
|
13744
14347
|
});
|
|
@@ -13855,37 +14458,37 @@ var UserMenu = function UserMenu(_ref12) {
|
|
|
13855
14458
|
}, title)) : null));
|
|
13856
14459
|
};
|
|
13857
14460
|
|
|
13858
|
-
var _templateObject$
|
|
13859
|
-
var Container$
|
|
13860
|
-
var ImgWrapper = styled.div(_templateObject2$
|
|
13861
|
-
var EmptyImg = styled.div(_templateObject3$
|
|
13862
|
-
var Image$2 = styled.div(_templateObject4$
|
|
14461
|
+
var _templateObject$1C, _templateObject2$1p, _templateObject3$1e, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$L, _templateObject8$D;
|
|
14462
|
+
var Container$11 = styled.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"])));
|
|
14463
|
+
var ImgWrapper = styled.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
|
|
14464
|
+
var EmptyImg = styled.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
|
|
14465
|
+
var Image$2 = styled.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) {
|
|
13863
14466
|
return p.image;
|
|
13864
14467
|
}, function (p) {
|
|
13865
14468
|
return p.image ? 'block' : 'none';
|
|
13866
14469
|
});
|
|
13867
|
-
var InfoContainer = styled.div(_templateObject5$
|
|
13868
|
-
var Title$9 = styled.div(_templateObject6$
|
|
13869
|
-
var Message = styled.div(_templateObject7$
|
|
13870
|
-
var TimeMsg = styled.div(_templateObject8$
|
|
14470
|
+
var InfoContainer = styled.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
14471
|
+
var Title$9 = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
|
|
14472
|
+
var Message = styled.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"])));
|
|
14473
|
+
var TimeMsg = styled.div(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
|
|
13871
14474
|
|
|
13872
14475
|
var NotificationItem = function NotificationItem(_ref) {
|
|
13873
14476
|
var imgUrl = _ref.imgUrl,
|
|
13874
14477
|
title = _ref.title,
|
|
13875
14478
|
message = _ref.message,
|
|
13876
14479
|
time = _ref.time;
|
|
13877
|
-
return React__default.createElement(Container$
|
|
14480
|
+
return React__default.createElement(Container$11, null, React__default.createElement(ImgWrapper, null, imgUrl ? React__default.createElement(Image$2, {
|
|
13878
14481
|
image: imgUrl
|
|
13879
14482
|
}) : 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)));
|
|
13880
14483
|
};
|
|
13881
14484
|
|
|
13882
|
-
var _templateObject$
|
|
13883
|
-
var Container$
|
|
13884
|
-
var StatusContainer = styled.h2(_templateObject2$
|
|
14485
|
+
var _templateObject$1D, _templateObject2$1q, _templateObject3$1f;
|
|
14486
|
+
var Container$12 = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
14487
|
+
var StatusContainer = styled.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) {
|
|
13885
14488
|
var theme = _ref.theme;
|
|
13886
14489
|
return theme.colors.divider;
|
|
13887
14490
|
});
|
|
13888
|
-
var NotificationWrapper = styled.div(_templateObject3$
|
|
14491
|
+
var NotificationWrapper = styled.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n border-bottom: ", " 1px solid;\n"])), function (_ref2) {
|
|
13889
14492
|
var colors = _ref2.theme.colors;
|
|
13890
14493
|
return colors.divider;
|
|
13891
14494
|
});
|
|
@@ -13909,21 +14512,21 @@ var NotificationsHistory = function NotificationsHistory(_ref3) {
|
|
|
13909
14512
|
unreadNotificationsText = _ref3$unreadNotificat === void 0 ? 'Read' : _ref3$unreadNotificat;
|
|
13910
14513
|
|
|
13911
14514
|
if (read.length === 0 && unread.length === 0) {
|
|
13912
|
-
return React__default.createElement(Container$
|
|
14515
|
+
return React__default.createElement(Container$12, null, React__default.createElement(StatusContainer, null, noNotificationsText));
|
|
13913
14516
|
}
|
|
13914
14517
|
|
|
13915
|
-
return React__default.createElement(Container$
|
|
14518
|
+
return React__default.createElement(Container$12, null, unread && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13916
14519
|
};
|
|
13917
14520
|
|
|
13918
|
-
var _templateObject$
|
|
13919
|
-
var Container
|
|
14521
|
+
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;
|
|
14522
|
+
var Container$13 = styled.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) {
|
|
13920
14523
|
var theme = _ref.theme,
|
|
13921
14524
|
colors = _ref.theme.colors;
|
|
13922
|
-
return colors && css(_templateObject2$
|
|
14525
|
+
return colors && 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);
|
|
13923
14526
|
});
|
|
13924
|
-
var SearchBar = styled.div(_templateObject3$
|
|
13925
|
-
var IconWrapper$4 = styled.div(_templateObject4$
|
|
13926
|
-
var SearchInput = styled.input(_templateObject5
|
|
14527
|
+
var SearchBar = styled.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"])));
|
|
14528
|
+
var IconWrapper$4 = styled.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"])));
|
|
14529
|
+
var SearchInput = styled.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) {
|
|
13927
14530
|
var theme = _ref2.theme;
|
|
13928
14531
|
return theme.fontFamily.data;
|
|
13929
14532
|
}, function (_ref3) {
|
|
@@ -13933,19 +14536,19 @@ var SearchInput = styled.input(_templateObject5$$ || (_templateObject5$$ = _tagg
|
|
|
13933
14536
|
var typography = _ref4.theme.typography;
|
|
13934
14537
|
return typography.global.topBar.search.placeholder;
|
|
13935
14538
|
});
|
|
13936
|
-
var ButtonArea = styled.div(_templateObject6$
|
|
14539
|
+
var ButtonArea = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n height: inherit;\n padding-right: 10px;\n display: flex;\n"])));
|
|
13937
14540
|
var DrawerToggle = styled.button.attrs({
|
|
13938
14541
|
type: 'button'
|
|
13939
|
-
})(_templateObject7$
|
|
14542
|
+
})(_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) {
|
|
13940
14543
|
var theme = _ref5.theme;
|
|
13941
|
-
return css(_templateObject8$
|
|
14544
|
+
return 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);
|
|
13942
14545
|
}, function (_ref6) {
|
|
13943
14546
|
var isActive = _ref6.isActive,
|
|
13944
14547
|
theme = _ref6.theme;
|
|
13945
|
-
return isActive && css(_templateObject9$
|
|
14548
|
+
return isActive && css(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n }\n "])), theme.colors.menu.active);
|
|
13946
14549
|
});
|
|
13947
|
-
var DrawerPortalWrapper = styled.div(_templateObject10$
|
|
13948
|
-
var Drawer = styled.div(_templateObject11$
|
|
14550
|
+
var DrawerPortalWrapper = styled.div(_templateObject10$s || (_templateObject10$s = _taggedTemplateLiteralLoose([""])));
|
|
14551
|
+
var Drawer = styled.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) {
|
|
13949
14552
|
var theme = _ref7.theme;
|
|
13950
14553
|
return theme.fontFamily.ui;
|
|
13951
14554
|
}, function (_ref8) {
|
|
@@ -13959,12 +14562,12 @@ var Drawer = styled.div(_templateObject11$j || (_templateObject11$j = _taggedTem
|
|
|
13959
14562
|
return baseWidth ? baseWidth : "200px";
|
|
13960
14563
|
}, function (_ref11) {
|
|
13961
14564
|
var theme = _ref11.theme;
|
|
13962
|
-
return css(_templateObject12$
|
|
14565
|
+
return 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);
|
|
13963
14566
|
}, function (_ref12) {
|
|
13964
14567
|
var isOpen = _ref12.isOpen;
|
|
13965
|
-
return isOpen && css(_templateObject13$
|
|
14568
|
+
return isOpen && css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13966
14569
|
});
|
|
13967
|
-
var NotificationsContainer = styled.div(_templateObject14$
|
|
14570
|
+
var NotificationsContainer = styled.div(_templateObject14$c || (_templateObject14$c = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13968
14571
|
|
|
13969
14572
|
var TopBar = function TopBar(_ref13) {
|
|
13970
14573
|
var _ref13$hasNotificatio = _ref13.hasNotifications,
|
|
@@ -14032,7 +14635,7 @@ var TopBar = function TopBar(_ref13) {
|
|
|
14032
14635
|
});
|
|
14033
14636
|
};
|
|
14034
14637
|
|
|
14035
|
-
return React__default.createElement(Container
|
|
14638
|
+
return React__default.createElement(Container$13, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
|
|
14036
14639
|
icon: 'Search',
|
|
14037
14640
|
size: 18,
|
|
14038
14641
|
color: 'dimmed'
|
|
@@ -14098,8 +14701,8 @@ var TopBar = function TopBar(_ref13) {
|
|
|
14098
14701
|
}, customDrawer.customComponent)), document.body));
|
|
14099
14702
|
};
|
|
14100
14703
|
|
|
14101
|
-
var _templateObject$
|
|
14102
|
-
var TabListWrapper = styled.div(_templateObject$
|
|
14704
|
+
var _templateObject$1F;
|
|
14705
|
+
var TabListWrapper = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
|
|
14103
14706
|
|
|
14104
14707
|
var TabList = function TabList(_ref) {
|
|
14105
14708
|
var children = _ref.children,
|
|
@@ -14114,13 +14717,13 @@ var TabList = function TabList(_ref) {
|
|
|
14114
14717
|
return React__default.createElement(TabListWrapper, null, children);
|
|
14115
14718
|
};
|
|
14116
14719
|
|
|
14117
|
-
var _excluded$
|
|
14720
|
+
var _excluded$H = ["children", "tabFor", "onClick"];
|
|
14118
14721
|
|
|
14119
|
-
var _templateObject$
|
|
14120
|
-
var TabComponent = styled.div(_templateObject$
|
|
14121
|
-
var TabLabel = styled.label(_templateObject2$
|
|
14722
|
+
var _templateObject$1G, _templateObject2$1s, _templateObject3$1h;
|
|
14723
|
+
var TabComponent = styled.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
|
|
14724
|
+
var TabLabel = styled.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) {
|
|
14122
14725
|
var theme = _ref.theme;
|
|
14123
|
-
return css(_templateObject3$
|
|
14726
|
+
return css(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
14124
14727
|
}, function (_ref2) {
|
|
14125
14728
|
var active = _ref2.active;
|
|
14126
14729
|
return active ? '600' : '500';
|
|
@@ -14136,7 +14739,7 @@ var Tab = function Tab(_ref5) {
|
|
|
14136
14739
|
var children = _ref5.children,
|
|
14137
14740
|
tabFor = _ref5.tabFor,
|
|
14138
14741
|
onClick = _ref5.onClick,
|
|
14139
|
-
props = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
14742
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded$H);
|
|
14140
14743
|
|
|
14141
14744
|
var _useContext = useContext(TabContext),
|
|
14142
14745
|
selected = _useContext.selected,
|
|
@@ -14153,33 +14756,33 @@ var Tab = function Tab(_ref5) {
|
|
|
14153
14756
|
}, children));
|
|
14154
14757
|
};
|
|
14155
14758
|
|
|
14156
|
-
var _excluded$
|
|
14759
|
+
var _excluded$I = ["children", "tabId"];
|
|
14157
14760
|
|
|
14158
|
-
var _templateObject$
|
|
14159
|
-
var Container$
|
|
14761
|
+
var _templateObject$1H;
|
|
14762
|
+
var Container$14 = styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n"])));
|
|
14160
14763
|
|
|
14161
14764
|
var TabContent = function TabContent(_ref) {
|
|
14162
14765
|
var children = _ref.children,
|
|
14163
14766
|
tabId = _ref.tabId,
|
|
14164
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
14767
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
|
|
14165
14768
|
|
|
14166
14769
|
var _useContext = useContext(TabContext),
|
|
14167
14770
|
selected = _useContext.selected;
|
|
14168
14771
|
|
|
14169
|
-
return selected === tabId ? React__default.createElement(Container$
|
|
14772
|
+
return selected === tabId ? React__default.createElement(Container$14, Object.assign({}, props), children) : null;
|
|
14170
14773
|
};
|
|
14171
14774
|
|
|
14172
|
-
var _excluded$
|
|
14775
|
+
var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
14173
14776
|
|
|
14174
|
-
var _templateObject$
|
|
14175
|
-
var Container$
|
|
14176
|
-
var LinkTab = styled.div(_templateObject2$
|
|
14777
|
+
var _templateObject$1I, _templateObject2$1t, _templateObject3$1i, _templateObject4$1a;
|
|
14778
|
+
var Container$15 = styled.button(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
14779
|
+
var LinkTab = styled.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) {
|
|
14177
14780
|
var theme = _ref.theme;
|
|
14178
|
-
return css(_templateObject3$
|
|
14781
|
+
return 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);
|
|
14179
14782
|
}, function (_ref2) {
|
|
14180
14783
|
var isActive = _ref2.isActive,
|
|
14181
14784
|
theme = _ref2.theme;
|
|
14182
|
-
return isActive && css(_templateObject4$
|
|
14785
|
+
return isActive && 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);
|
|
14183
14786
|
});
|
|
14184
14787
|
|
|
14185
14788
|
var MobileTab = function MobileTab(_ref3) {
|
|
@@ -14188,7 +14791,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14188
14791
|
closeId = _ref3.closeId,
|
|
14189
14792
|
counter = _ref3.counter,
|
|
14190
14793
|
status = _ref3.status,
|
|
14191
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
14794
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$J);
|
|
14192
14795
|
|
|
14193
14796
|
var _useContext = useContext(TabContext),
|
|
14194
14797
|
selected = _useContext.selected,
|
|
@@ -14198,7 +14801,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14198
14801
|
var newValue = selected === tabId ? closeId : tabId;
|
|
14199
14802
|
setSelected(newValue);
|
|
14200
14803
|
}, [closeId, selected, setSelected]);
|
|
14201
|
-
return React__default.createElement(Container$
|
|
14804
|
+
return React__default.createElement(Container$15, Object.assign({}, props, {
|
|
14202
14805
|
onClick: function onClick() {
|
|
14203
14806
|
return onChangeTab(tabFor);
|
|
14204
14807
|
}
|
|
@@ -14211,32 +14814,32 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14211
14814
|
}))));
|
|
14212
14815
|
};
|
|
14213
14816
|
|
|
14214
|
-
var _excluded$
|
|
14817
|
+
var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
|
|
14215
14818
|
|
|
14216
|
-
var _templateObject$
|
|
14217
|
-
var Container$
|
|
14819
|
+
var _templateObject$1J, _templateObject2$1u, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$Q;
|
|
14820
|
+
var Container$16 = styled.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) {
|
|
14218
14821
|
var active = _ref.active;
|
|
14219
|
-
return active ? css(_templateObject2$
|
|
14822
|
+
return active ? css(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
14220
14823
|
}, IconWrapper);
|
|
14221
|
-
var Title$a = styled.div(_templateObject4$
|
|
14824
|
+
var Title$a = styled.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) {
|
|
14222
14825
|
var theme = _ref2.theme;
|
|
14223
14826
|
return theme.fontFamily.ui;
|
|
14224
14827
|
}, function (_ref3) {
|
|
14225
14828
|
var active = _ref3.active;
|
|
14226
14829
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
14227
14830
|
});
|
|
14228
|
-
var SubTitle$2 = styled.div(_templateObject5$
|
|
14831
|
+
var SubTitle$2 = styled.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) {
|
|
14229
14832
|
var theme = _ref4.theme;
|
|
14230
14833
|
return theme.fontFamily.data;
|
|
14231
14834
|
});
|
|
14232
|
-
var TextGroup$1 = styled.div(_templateObject6$
|
|
14835
|
+
var TextGroup$1 = styled.div(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
|
|
14233
14836
|
|
|
14234
14837
|
var TabWithIcon = function TabWithIcon(_ref5) {
|
|
14235
14838
|
var icon = _ref5.icon,
|
|
14236
14839
|
title = _ref5.title,
|
|
14237
14840
|
subtitle = _ref5.subtitle,
|
|
14238
14841
|
tabFor = _ref5.tabFor,
|
|
14239
|
-
props = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
14842
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded$K);
|
|
14240
14843
|
|
|
14241
14844
|
var _useContext = useContext(TabContext),
|
|
14242
14845
|
selected = _useContext.selected,
|
|
@@ -14246,7 +14849,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
14246
14849
|
setSelected(tabId);
|
|
14247
14850
|
}, [setSelected]);
|
|
14248
14851
|
var active = selected === tabFor;
|
|
14249
|
-
return React__default.createElement(Container$
|
|
14852
|
+
return React__default.createElement(Container$16, Object.assign({}, {
|
|
14250
14853
|
active: active
|
|
14251
14854
|
}, props, {
|
|
14252
14855
|
onClick: function onClick() {
|
|
@@ -14263,9 +14866,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
14263
14866
|
}), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
|
|
14264
14867
|
};
|
|
14265
14868
|
|
|
14266
|
-
var _templateObject$
|
|
14267
|
-
var Container$
|
|
14268
|
-
var TabListWrapper$1 = styled.div(_templateObject2$
|
|
14869
|
+
var _templateObject$1K, _templateObject2$1v;
|
|
14870
|
+
var Container$17 = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose([""])));
|
|
14871
|
+
var TabListWrapper$1 = styled.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) {
|
|
14269
14872
|
var paddingLeft = _ref.paddingLeft;
|
|
14270
14873
|
return paddingLeft ? paddingLeft : '87px';
|
|
14271
14874
|
});
|
|
@@ -14274,7 +14877,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
14274
14877
|
var defaultTabId = _ref2.defaultTabId,
|
|
14275
14878
|
tabList = _ref2.tabList,
|
|
14276
14879
|
paddingLeft = _ref2.paddingLeft;
|
|
14277
|
-
return React__default.createElement(Container$
|
|
14880
|
+
return React__default.createElement(Container$17, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
|
|
14278
14881
|
paddingLeft: paddingLeft
|
|
14279
14882
|
}), React__default.createElement(TabList, Object.assign({}, {
|
|
14280
14883
|
defaultTabId: defaultTabId
|
|
@@ -14301,21 +14904,21 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
14301
14904
|
})));
|
|
14302
14905
|
};
|
|
14303
14906
|
|
|
14304
|
-
var _excluded$
|
|
14907
|
+
var _excluded$L = ["closeId", "closeText"];
|
|
14305
14908
|
|
|
14306
|
-
var _templateObject$
|
|
14307
|
-
var StyledButton$7 = styled.button(_templateObject$
|
|
14909
|
+
var _templateObject$1L, _templateObject2$1w, _templateObject3$1k, _templateObject4$1c;
|
|
14910
|
+
var StyledButton$7 = styled.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) {
|
|
14308
14911
|
var theme = _ref.theme;
|
|
14309
|
-
return css(_templateObject2$
|
|
14912
|
+
return 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);
|
|
14310
14913
|
}, MOBILE_CLOSE_HEIGHT);
|
|
14311
|
-
var IconContainer$
|
|
14312
|
-
var TextWrapper$1 = styled.div(_templateObject4$
|
|
14914
|
+
var IconContainer$3 = styled.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"])));
|
|
14915
|
+
var TextWrapper$1 = styled.div(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
14313
14916
|
|
|
14314
14917
|
var CloseButton$1 = function CloseButton(_ref2) {
|
|
14315
14918
|
var closeId = _ref2.closeId,
|
|
14316
14919
|
_ref2$closeText = _ref2.closeText,
|
|
14317
14920
|
closeText = _ref2$closeText === void 0 ? 'CLOSE MENU' : _ref2$closeText,
|
|
14318
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
14921
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$L);
|
|
14319
14922
|
|
|
14320
14923
|
var _useContext = useContext(TabContext),
|
|
14321
14924
|
setSelected = _useContext.setSelected;
|
|
@@ -14324,16 +14927,16 @@ var CloseButton$1 = function CloseButton(_ref2) {
|
|
|
14324
14927
|
onClick: function onClick() {
|
|
14325
14928
|
return setSelected(closeId);
|
|
14326
14929
|
}
|
|
14327
|
-
}, props), React__default.createElement(IconContainer$
|
|
14930
|
+
}, props), React__default.createElement(IconContainer$3, null, React__default.createElement(Icon, {
|
|
14328
14931
|
icon: 'CloseCompact',
|
|
14329
14932
|
color: 'dimmed',
|
|
14330
14933
|
size: 16
|
|
14331
14934
|
})), React__default.createElement(TextWrapper$1, null, closeText));
|
|
14332
14935
|
};
|
|
14333
14936
|
|
|
14334
|
-
var _templateObject$
|
|
14335
|
-
var Container$
|
|
14336
|
-
var ContentWrapper = styled.div(_templateObject2$
|
|
14937
|
+
var _templateObject$1M, _templateObject2$1x;
|
|
14938
|
+
var Container$18 = styled.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);
|
|
14939
|
+
var ContentWrapper = styled.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
14337
14940
|
|
|
14338
14941
|
var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
14339
14942
|
var closeId = _ref.closeId,
|
|
@@ -14342,14 +14945,14 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
|
14342
14945
|
var _useContext = useContext(TabContext),
|
|
14343
14946
|
selected = _useContext.selected;
|
|
14344
14947
|
|
|
14345
|
-
return selected === closeId ? null : React__default.createElement(Container$
|
|
14948
|
+
return selected === closeId ? null : React__default.createElement(Container$18, null, React__default.createElement(ContentWrapper, null, children));
|
|
14346
14949
|
};
|
|
14347
14950
|
|
|
14348
|
-
var _templateObject$
|
|
14349
|
-
var Container$
|
|
14350
|
-
var ItemWrapper = styled.div(_templateObject2$
|
|
14951
|
+
var _templateObject$1N, _templateObject2$1y, _templateObject3$1l;
|
|
14952
|
+
var Container$19 = styled.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
|
|
14953
|
+
var ItemWrapper = styled.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n ", ";\n"])), function (_ref) {
|
|
14351
14954
|
var theme = _ref.theme;
|
|
14352
|
-
return css(_templateObject3$
|
|
14955
|
+
return css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", "\n "])), theme.colors.divider);
|
|
14353
14956
|
});
|
|
14354
14957
|
|
|
14355
14958
|
var MobileMenu = function MobileMenu(_ref2) {
|
|
@@ -14392,7 +14995,7 @@ var MobileMenu = function MobileMenu(_ref2) {
|
|
|
14392
14995
|
var handleCloseMenu = useCallback(function () {
|
|
14393
14996
|
setSelected(closeId);
|
|
14394
14997
|
}, [closeId, setSelected]);
|
|
14395
|
-
return React__default.createElement(Container$
|
|
14998
|
+
return React__default.createElement(Container$19, null, content.items.map(function (item, key) {
|
|
14396
14999
|
return React__default.createElement(ItemWrapper, {
|
|
14397
15000
|
key: key,
|
|
14398
15001
|
"data-key": key
|
|
@@ -14420,10 +15023,10 @@ var MobileMenu = function MobileMenu(_ref2) {
|
|
|
14420
15023
|
})));
|
|
14421
15024
|
};
|
|
14422
15025
|
|
|
14423
|
-
var _templateObject$
|
|
14424
|
-
var Logo$1 = styled(Link)(_templateObject$
|
|
14425
|
-
var LogoMark$1 = styled.div(_templateObject2$
|
|
14426
|
-
var SVGObject$1 = styled.object(_templateObject3$
|
|
15026
|
+
var _templateObject$1O, _templateObject2$1z, _templateObject3$1m;
|
|
15027
|
+
var Logo$1 = styled(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);
|
|
15028
|
+
var LogoMark$1 = styled.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
|
|
15029
|
+
var SVGObject$1 = styled.object(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose([""])));
|
|
14427
15030
|
|
|
14428
15031
|
var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
14429
15032
|
var _ref$home = _ref.home,
|
|
@@ -14445,10 +15048,10 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
14445
15048
|
}) : React__default.createElement(SvgLogoMark, null)));
|
|
14446
15049
|
};
|
|
14447
15050
|
|
|
14448
|
-
var _excluded$
|
|
15051
|
+
var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
14449
15052
|
|
|
14450
|
-
var _templateObject$
|
|
14451
|
-
var Container$
|
|
15053
|
+
var _templateObject$1P;
|
|
15054
|
+
var Container$1a = styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n background: ", ";\n z-index: 100;\n display: flex;\n flex-direction: column;\n"])), function (_ref) {
|
|
14452
15055
|
var theme = _ref.theme;
|
|
14453
15056
|
return theme.styles.global.mainMenu.background;
|
|
14454
15057
|
});
|
|
@@ -14464,7 +15067,7 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
|
|
|
14464
15067
|
loggedInUser = _ref2.loggedInUser,
|
|
14465
15068
|
onLogout = _ref2.onLogout,
|
|
14466
15069
|
onLanguageToggle = _ref2.onLanguageToggle,
|
|
14467
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
15070
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
|
|
14468
15071
|
|
|
14469
15072
|
var _useContext = useContext(TabContext),
|
|
14470
15073
|
setSelected = _useContext.setSelected;
|
|
@@ -14472,7 +15075,7 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
|
|
|
14472
15075
|
var handleCloseMenu = useCallback(function () {
|
|
14473
15076
|
setSelected(closeId);
|
|
14474
15077
|
}, [closeId, setSelected]);
|
|
14475
|
-
return React__default.createElement(Container$
|
|
15078
|
+
return React__default.createElement(Container$1a, null, React__default.createElement(UserMenu, Object.assign({}, _extends({
|
|
14476
15079
|
hasLanguage: hasLanguage,
|
|
14477
15080
|
hasLogout: hasLogout,
|
|
14478
15081
|
logoutLink: logoutLink,
|
|
@@ -14487,19 +15090,19 @@ var MobileUserMenu = function MobileUserMenu(_ref2) {
|
|
|
14487
15090
|
})));
|
|
14488
15091
|
};
|
|
14489
15092
|
|
|
14490
|
-
var _excluded$
|
|
15093
|
+
var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
|
|
14491
15094
|
|
|
14492
|
-
var _templateObject$
|
|
15095
|
+
var _templateObject$1Q, _templateObject2$1A;
|
|
14493
15096
|
var CLOSE_ID = 'closeMenu';
|
|
14494
15097
|
var NOTI_TAB = 'notifications';
|
|
14495
15098
|
var USER_TAB = 'user';
|
|
14496
15099
|
var MENU_TAB = 'menu';
|
|
14497
15100
|
var CUSTOM_TAB = 'custom';
|
|
14498
|
-
var Container$
|
|
15101
|
+
var Container$1b = styled.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) {
|
|
14499
15102
|
var theme = _ref.theme;
|
|
14500
15103
|
return theme.styles.global.mainMenu.background.backgroundColor;
|
|
14501
15104
|
});
|
|
14502
|
-
var HeaderContainer = styled.div(_templateObject2$
|
|
15105
|
+
var HeaderContainer = styled.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) {
|
|
14503
15106
|
var theme = _ref2.theme;
|
|
14504
15107
|
return theme.colors.divider;
|
|
14505
15108
|
}, TabListWrapper);
|
|
@@ -14524,9 +15127,9 @@ var MobileNavbar = function MobileNavbar(_ref3) {
|
|
|
14524
15127
|
customDrawer = _ref3.customDrawer,
|
|
14525
15128
|
onLogout = _ref3.onLogout,
|
|
14526
15129
|
onLanguageToggle = _ref3.onLanguageToggle,
|
|
14527
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
15130
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$N);
|
|
14528
15131
|
|
|
14529
|
-
return React__default.createElement(Container$
|
|
15132
|
+
return React__default.createElement(Container$1b, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
|
|
14530
15133
|
home: home,
|
|
14531
15134
|
logoMark: logoMark
|
|
14532
15135
|
}, {
|
|
@@ -14583,7 +15186,7 @@ var MobileNavbar = function MobileNavbar(_ref3) {
|
|
|
14583
15186
|
})))));
|
|
14584
15187
|
};
|
|
14585
15188
|
|
|
14586
|
-
var _excluded$
|
|
15189
|
+
var _excluded$O = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
|
|
14587
15190
|
|
|
14588
15191
|
var GlobalUI = function GlobalUI(_ref) {
|
|
14589
15192
|
var content = _ref.content,
|
|
@@ -14599,7 +15202,7 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14599
15202
|
legacyLayout = _ref.legacyLayout,
|
|
14600
15203
|
children = _ref.children,
|
|
14601
15204
|
onMenuToggle = _ref.onMenuToggle,
|
|
14602
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
15205
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
|
|
14603
15206
|
|
|
14604
15207
|
var _useBreakpoints = useBreakpoints(),
|
|
14605
15208
|
isLarge = _useBreakpoints.isLarge;
|
|
@@ -14627,18 +15230,18 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14627
15230
|
}, props))), React__default.createElement(ContentArea, null, children));
|
|
14628
15231
|
};
|
|
14629
15232
|
|
|
14630
|
-
var _excluded$
|
|
15233
|
+
var _excluded$P = ["children"];
|
|
14631
15234
|
|
|
14632
|
-
var _templateObject$
|
|
14633
|
-
var Container$
|
|
14634
|
-
var LogoContainer = styled.div(_templateObject2$
|
|
14635
|
-
var LogoTopText = styled.div(_templateObject3$
|
|
14636
|
-
var LogoBottomText = styled.div(_templateObject4$
|
|
14637
|
-
var SidebarBox = styled.div(_templateObject5$
|
|
14638
|
-
var SidebarHeading = styled.div(_templateObject6$
|
|
14639
|
-
var SidebarLinkHeading = styled.div(_templateObject7$
|
|
14640
|
-
var BackLink$1 = styled(Link)(_templateObject8$
|
|
14641
|
-
var SLink = styled(Link)(_templateObject9$
|
|
15235
|
+
var _templateObject$1R, _templateObject2$1B, _templateObject3$1n, _templateObject4$1d, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$F, _templateObject9$x;
|
|
15236
|
+
var Container$1c = styled.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"])));
|
|
15237
|
+
var LogoContainer = styled.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"])));
|
|
15238
|
+
var LogoTopText = styled.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"])));
|
|
15239
|
+
var LogoBottomText = styled.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"])));
|
|
15240
|
+
var SidebarBox = styled.div(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
15241
|
+
var SidebarHeading = styled.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"])));
|
|
15242
|
+
var SidebarLinkHeading = styled.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"])));
|
|
15243
|
+
var BackLink$1 = styled(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"])));
|
|
15244
|
+
var SLink = styled(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"])));
|
|
14642
15245
|
var SidebarLink = function SidebarLink(_ref) {
|
|
14643
15246
|
var title = _ref.title,
|
|
14644
15247
|
to = _ref.to;
|
|
@@ -14654,10 +15257,10 @@ var Logo$2 = function Logo(_ref2) {
|
|
|
14654
15257
|
|
|
14655
15258
|
var Sidebar = function Sidebar(_ref3) {
|
|
14656
15259
|
var children = _ref3.children,
|
|
14657
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
15260
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$P);
|
|
14658
15261
|
|
|
14659
|
-
return React__default.createElement(Container$
|
|
15262
|
+
return React__default.createElement(Container$1c, Object.assign({}, props), children);
|
|
14660
15263
|
};
|
|
14661
15264
|
|
|
14662
|
-
export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink$1 as BackLink, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content$1 as Content, ContentLayout, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper, TextArea, TextAreaField, TextField,
|
|
15265
|
+
export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink$1 as BackLink, BaseStyles, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, ButtonsStack, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content$1 as Content, ContentLayout, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, FlexContentPlaceholder, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, SplitLayout, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper$1 as TagListWrapper, TextArea, TextAreaField, TextField, ThemeVariables, TopBar, TypeTable, UtilityHeader, WebRTCPlayer as WebRTCClient, index as defaultTheme, isDateInterval, isFilterItem, resetButtonStyles, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePTZ, usePoll, useThemeToggle, useTitle, useTo };
|
|
14663
15266
|
//# sourceMappingURL=index.modern.js.map
|