scorer-ui-kit 2.9.2 → 2.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Filters/FilterTypes.d.ts +11 -3
- package/dist/Filters/atoms/FilterDropHandler.d.ts +1 -1
- package/dist/Filters/atoms/FooterControls.d.ts +19 -0
- package/dist/Filters/index.d.ts +11 -2
- package/dist/Filters/molecules/DatePicker.d.ts +4 -12
- package/dist/Filters/molecules/DropdownDatePicker.d.ts +6 -6
- package/dist/Filters/molecules/FilterDropdown.d.ts +9 -2
- package/dist/Filters/molecules/FiltersResults.d.ts +3 -3
- package/dist/Form/atoms/Button.d.ts +1 -0
- package/dist/Form/atoms/ButtonWithIcon.d.ts +2 -1
- package/dist/Form/atoms/ButtonWithLoading.d.ts +0 -1
- package/dist/Form/atoms/Switch.d.ts +2 -1
- package/dist/Form/index.d.ts +4 -3
- package/dist/Icons/Icon.d.ts +2 -1
- package/dist/helpers/index.d.ts +5 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +777 -563
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +777 -563
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -1523,6 +1523,37 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
1523
1523
|
strings.raw = raw;
|
|
1524
1524
|
return strings;
|
|
1525
1525
|
}
|
|
1526
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
1527
|
+
if (!o) return;
|
|
1528
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
1529
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
1530
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
1531
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
1532
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
1533
|
+
}
|
|
1534
|
+
function _arrayLikeToArray(arr, len) {
|
|
1535
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
1536
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
1537
|
+
return arr2;
|
|
1538
|
+
}
|
|
1539
|
+
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
|
|
1540
|
+
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
|
|
1541
|
+
if (it) return (it = it.call(o)).next.bind(it);
|
|
1542
|
+
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
|
|
1543
|
+
if (it) o = it;
|
|
1544
|
+
var i = 0;
|
|
1545
|
+
return function () {
|
|
1546
|
+
if (i >= o.length) return {
|
|
1547
|
+
done: true
|
|
1548
|
+
};
|
|
1549
|
+
return {
|
|
1550
|
+
done: false,
|
|
1551
|
+
value: o[i++]
|
|
1552
|
+
};
|
|
1553
|
+
};
|
|
1554
|
+
}
|
|
1555
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
1556
|
+
}
|
|
1526
1557
|
|
|
1527
1558
|
var _templateObject;
|
|
1528
1559
|
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);
|
|
@@ -1531,16 +1562,16 @@ var _templateObject$1;
|
|
|
1531
1562
|
var animationVariables = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n :root {\n\n --easing-primary-in-out: cubic-bezier(0.76, 0, 0.24, 1);\n --easing-primary-in: cubic-bezier(0.5, 0, 0.75, 0);\n --easing-primary-out: cubic-bezier(0.25, 1, 0.5, 1);\n \n --speed-faster: 0.085s;\n --speed-fast: 0.175s;\n --speed-normal: 0.35s;\n --speed-slow: 0.7s;\n --speed-slower: 1.4s;\n --speed-slowest: 2.8s;\n \n }\n"])));
|
|
1532
1563
|
|
|
1533
1564
|
var _templateObject$2;
|
|
1534
|
-
var colorVariables = css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n .light-theme {\n --shadow-primary-default: var(--grey-a4);\n --shadow-primary-elevate: var(--primary-a5);\n\n --shadow-secondary-default: var(--grey-3);\n --shadow-secondary-elevate: var(--grey-a4);\n\n --shadow-warning-default: var(--grey-a4);\n --shadow-warning-elevate: var(--warning-a5);\n }\n\n .dark-theme {\n --shadow-primary-default: var(--primary-a2);\n --shadow-primary-elevate: var(--primary-a2);\n\n --shadow-secondary-default: var(--black-a8);\n --shadow-secondary-elevate: var(--primary-a4);\n\n --shadow-warning-default: var(--grey-a3);\n --shadow-warning-elevate: var(--warning-a7);\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n /* Spinner */\n --spinner-primary-base: var(--primary-6);\n --spinner-primary-top: var(--white-1);\n \n --spinner-secondary-base: var(--grey-8);\n --spinner-secondary-top: var(--white-1);\n \n --spinner-simple-base: var(--grey-a8);\n --spinner-simple-top: var(--white-1);\n \n --spinner-warning-base: var(--warning-8);\n --spinner-warning-top: var(--white-1);\n \n /* Global */\n --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n\n --primary-gradient-start: var(--primary-9);\n --primary-gradient-end: var(--primary-10);\n --primary-gradient: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));\n\n --secondary-gradient-start: var(--grey-5);\n --secondary-gradient-end: var(--grey-6);\n --secondary-gradient: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));\n\n --warning-gradient-start: var(--warning-9);\n --warning-gradient-end: var(--warning-10);\n --warning-gradient: linear-gradient(135deg, var(--warning-gradient-start), var(--warning-gradient-end));\n \n --dividing-line: var(--grey-4);\n --global-element-background: var(--grey-2);\n --global-menu-icon-background-default: transparent;\n --global-menu-icon-background-hover: var(--primary-8);\n --global-menu-icon-background-active: var(--primary-9);\n\n /* Inputs */\n --input-color-default: var(--grey-12);\n --input-color-disabled: var(--grey-10);\n --input-color-placeholder: var(--grey-10);\n --input-color-unit: var(--grey-10);\n \n --input-default-background-color: var(--grey-1);\n --input-default-border-color: var(--grey-6);\n --input-default-shadow-color: transparent;\n\n --input-default-focused-background-color: var(--grey-1);\n --input-default-focused-border-color: var(--grey-6);\n --input-default-focused-shadow-color: var(--grey-3);\n\n --input-disabled-background-color: var(--grey-3);\n --input-disabled-border-color: var(--grey-6);\n --input-disabled-shadow-color: transparent;\n\n --input-required-background-color: var(--grey-1);\n --input-required-border-color: var(--primary-6);\n --input-required-shadow-color: transparent;\n\n --input-required-focused-background-color: var(--grey-1);\n --input-required-focused-border-color: var(--primary-6);\n --input-required-focused-shadow-color: var(--grey-3);\n\n --input-valid-background-color: var(--grey-1);\n --input-valid-border-color: var(--success-9);\n --input-valid-shadow-color: transparent;\n\n --input-valid-focused-background-color: var(--grey-1);\n --input-valid-focused-border-color: var(--success-9);\n --input-valid-focused-shadow-color: var(--grey-3);\n\n --input-invalid-background-color: var(--grey-1);\n --input-invalid-border-color: var(--warning-9);\n --input-invalid-shadow-color: transparent;\n\n --input-invalid-focused-background-color: var(--grey-1);\n --input-invalid-focused-border-color: var(--warning-9);\n --input-invalid-focused-shadow-color: var(--grey-3);\n\n --input-processing-background-color: var(--grey-3)2;\n --input-processing-border-color: var(--primary-10);\n --input-processing-shadow-color: transparent;\n\n --input-processing-focused-background-color: var(--grey-2);\n --input-processing-focused-border-color: var(--primary-10);\n --input-processing-focused-shadow-color: var(--grey-3);\n\n /* Input Icons */\n --input-lead-icon: var(--grey-12);\n --input-disabled-lead-icon: var(--grey-10);\n\n /* Checkboxes and Radio Buttons */\n --input-toggle-icon-color: var(--white-12);\n \n --input-toggle-unchecked-border-color: var(--grey-8);\n --input-toggle-unchecked-background-color: transparent;\n \n --input-toggle-checked-border-color: var(--primary-9);\n --input-toggle-checked-background-color: var(--primary-9);\n \n \n --input-toggle-unchecked-hover-border-color: var(--primary-9);\n --input-toggle-unchecked-hover-background-color: transparent;\n \n --input-toggle-checked-hover-border-color: var(--primary-7);\n --input-toggle-checked-hover-background-color: var(--primary-7);\n \n \n --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n --input-toggle-unchecked-disabled-background-color: transparent;\n\n --input-toggle-checked-disabled-border-color: var(--grey-7);\n --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n \n --input-toggle-intermediate-border-color: var(--primary-11);\n --input-toggle-intermediate-background-color: var(--primary-11);\n\n --input-toggle-intermediate-hover-border-color: var(--primary-11);\n --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n /* Labels */\n --input-label: var(--grey-11);\n --input-label-hover: var(--primary-8);\n --input-label-active: var(--grey-12);\n\n }\n\n /* Filters */\n .light-theme, .dark-theme {\n --filter-button-text-color: var(--grey-11);\n --filter-button-icon-color: var(--grey-10);\n --filter-button-background-color: var(--grey-2);\n --filter-button-stroke-color: var(--grey-a5);\n --filter-button-shadow-color: var(--primary-a3);\n\n --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n --filter-dropdown-background-color-fallback: var(--grey-3);\n --filter-dropdown-accent: var(--primary-a9); \n\n }\n\n .dark-theme {\n --filter-button-shadow-color: var(--black-a8);\n }\n\n /* Typography */\n .light-theme, .dark-theme {\n --label-color: var(--grey-11);\n }\n\n /* Buttons */\n .light-theme, .dark-theme {\n --button-background-color: var(--primary-9);\n --button-border-color: var(--primary-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-primary-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--primary-a3);\n --button-loading-area-background-color: var(--primary-a7);\n --button-loading-area-divider-color: var(--primary-a8);\n\n --button-hover-background-color: var(--primary-8);\n --button-hover-border-color: var(--primary-a6);\n --button-hover-inner-shadow-color: transparent;\n --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n --button-hover-text-color: var(--white-1);\n --button-hover-divider-color: var(--primary-a3);\n --button-hover-icon-area-background-color: var(--primary-a3);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n --button-active-divider-color: var(--primary-a3);\n --button-active-icon-area-background-color: var(--primary-a3);\n\n --button-gradient-start: var(--primary-gradient-start);\n --button-gradient-end: var(--primary-gradient-end);\n\n .button-design-secondary {\n --button-background-color: var(--grey-9);\n --button-border-color: var(--grey-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-secondary-default);\n --button-text-color: var(--grey-12);\n --button-divider-color: var(--grey-a3);\n \n --button-loading-area-background-color: var(--grey-a4);\n --button-loading-area-divider-color: var(--grey-a3);\n\n --button-hover-background-color: var(--grey-8);\n --button-hover-border-color: var(--grey-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--secondary-gradient-start);\n --button-gradient-end: var(--secondary-gradient-end);\n }\n\n .button-design-danger, .button-design-warning {\n --button-background-color: var(--warning-9);\n --button-border-color: var(--warning-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-warning-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--warning-9);\n\n --button-loading-area-background-color: var(--warning-a7);\n --button-loading-area-divider-color: var(--warning-a9);\n\n --button-hover-background-color: var(--warning-8);\n --button-hover-border-color: var(--warning-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n \n --button-gradient-start: var(--warning-gradient-start);\n --button-gradient-end: var(--warning-gradient-end);\n }\n\n }\n\n /* Switches */\n .light-theme, .dark-theme {\n // Background\n --switch-default-off-background: var(--grey-4);\n --switch-default-on-background: var(--primary-9);\n --switch-default-danger-background: var(--warning-9);\n\n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-8);\n --switch-disabled-danger-background: var(--warning-8);\n \n // Border\n --switch-default-off-border: var(--grey-7);\n --switch-default-on-border: var(--primary-9);\n --switch-default-danger-border: var(--warning-9);\n \n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-a6);\n --switch-disabled-danger-border: var(--warning-a6);\n \n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n \n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-a9);\n --switch-disabled-danger-inner: var(--warning-a9);\n \n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-11);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n\n --switch-special-failure-background: var(--warning-8);\n --switch-special-failure-border: var(--warning-9);\n --switch-special-failure-inner: var(--white-12);\n --switch-special-failure-icon: var(--warning-8);\n\n }\n\n .light-theme {\n // Background\n --switch-default-off-background: var(--grey-2);\n --switch-default-on-background: var(--primary-7);\n --switch-default-danger-background: var(--warning-9);\n \n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-6);\n --switch-disabled-danger-background: var(--warning-8);\n\n // Border\n --switch-default-off-border: var(--grey-6);\n --switch-default-on-border: var(--primary-7);\n --switch-default-danger-border: var(--warning-9);\n \n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-7);\n --switch-disabled-danger-border: var(--warning-a5);\n \n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n\n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-9);\n --switch-disabled-danger-inner: var(--warning-a8);\n \n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-8);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n }\n\n"])));
|
|
1565
|
+
var colorVariables = css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n .light-theme {\n /* --- Light Mode --- */\n --primary-1: #fcfdff;\n --primary-2: #f5f9ff;\n --primary-3: #eaf3ff;\n --primary-4: #dbecff;\n --primary-5: #c9e2ff;\n --primary-6: #b5d5ff;\n --primary-7: #9bc3fa;\n --primary-8: #76aaf4;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #3c6eb3;\n --primary-12: #0b3162;\n --primary-a1: #0055ff03;\n --primary-a2: #0066ff0a;\n --primary-a3: #006eff15;\n --primary-a4: #0079ff24;\n --primary-a5: #0077ff36;\n --primary-a6: #016fff4a;\n --primary-a7: #0066f364;\n --primary-a8: #0061eb89;\n --primary-a9: #006bff7f;\n --primary-a10: #0062e98a;\n --primary-a11: #00429cc3;\n --primary-a12: #00285bf4;\n\n --secondary-1: #fafefd;\n --secondary-2: #f1fcfa;\n --secondary-3: #e7f9f5;\n --secondary-4: #d9f3ee;\n --secondary-5: #c7ebe5;\n --secondary-6: #afdfd7;\n --secondary-7: #8dcec3;\n --secondary-8: #53b9ab;\n --secondary-9: #12a594;\n --secondary-10: #0e9888;\n --secondary-11: #067a6f;\n --secondary-12: #10302b;\n --secondary-a1: #05cd9b05;\n --secondary-a2: #01c8a40e;\n --secondary-a3: #02c09718;\n --secondary-a4: #02af8c26;\n --secondary-a5: #00a48938;\n --secondary-a6: #00998050;\n --secondary-a7: #01927a72;\n --secondary-a8: #009783ac;\n --secondary-a9: #009e8ced;\n --secondary-a10: #009281f1;\n --secondary-a11: #00776bf9;\n --secondary-a12: #00221def;\n\n --grey-1: #fcfcfd;\n --grey-2: #f9f9fb;\n --grey-3: #f0f0f3;\n --grey-4: #e8e8ec;\n --grey-5: #e0e1e6;\n --grey-6: #d9d9e0e0;\n --grey-7: #cdced6;\n --grey-8: #b9bbc6;\n --grey-9: #8b8d98;\n --grey-10: #80838d;\n --grey-11: #717989;\n --grey-12: #5a6671;\n --grey-a1: #00005503;\n --grey-a2: #00005506;\n --grey-a3: #00003310;\n --grey-a4: #00002d17;\n --grey-a5: #0009321f;\n --grey-a6: #00002f26;\n --grey-a7: #00062e32;\n --grey-a8: #00083046;\n --grey-a9: #00051d74;\n --grey-a10: #00071b7f;\n --grey-a11: #020b1d9f;\n --grey-a12: #020b1de3;\n\n --green-1: #fbfefc;\n --green-2: #f2fcf5;\n --green-3: #e9f9ee;\n --green-4: #ddf3e4;\n --green-5: #ccebd7;\n --green-6: #b4dfc4;\n --green-7: #92ceac;\n --green-8: #5bb98c;\n --green-9: #30a46c;\n --green-10: #299764;\n --green-11: #18794e;\n --green-12: #153226;\n --green-a1: #05c04304;\n --green-a2: #00c43b0d;\n --green-a3: #02ba3c16;\n --green-a4: #01a63522;\n --green-a5: #009b3633;\n --green-a6: #0193364b;\n --green-a7: #008c3d6d;\n --green-a8: #00934ca4;\n --green-a9: #008f4acf;\n --green-a10: #008346d6;\n --green-a11: #006b3be7;\n --green-a12: #002012ea;\n\n --orange-1: #fefcfb;\n --orange-2: #fef8f4;\n --orange-3: #fff1e7;\n --orange-4: #ffe8d7;\n --orange-5: #ffdcc3;\n --orange-6: #ffcca7;\n --orange-7: #ffb381;\n --orange-8: #fa934e;\n --orange-9: #f76808;\n --orange-10: #ed5f00;\n --orange-11: #bd4b00;\n --orange-12: #451e11;\n --orange-a1: #c0430504;\n --orange-a2: #e860050b;\n --orange-a3: #ff6c0318;\n --orange-a4: #ff6e0028;\n --orange-a5: #ff6b013c;\n --orange-a6: #ff6b0158;\n --orange-a7: #ff66017e;\n --orange-a8: #f86300b1;\n --orange-a9: #f76300f7;\n --orange-a10: #ed5b00fa;\n --orange-a11: #bc4800fa;\n --orange-a12: #380e00ee;\n\n --red-1: #fefcfc;\n --red-2: #fdf8f8;\n --red-3: #faedec;\n --red-4: #fddfdd;\n --red-5: #f8d2d0;\n --red-6: #f1c3c1;\n --red-7: #e6b1ae;\n --red-8: #da9996;\n --red-9: #d16565;\n --red-10: #c45859;\n --red-11: #b64d4e;\n --red-12: #592525;\n --red-a1: #aa000003;\n --red-a2: #b7000007;\n --red-a3: #bc0e0013;\n --red-a4: #f00f0022;\n --red-a5: #da0b002f;\n --red-a6: #c609003e;\n --red-a7: #b10a0051;\n --red-a8: #a6080069;\n --red-a9: #b300009a;\n --red-a10: #a50002a7;\n --red-a11: #970002b2;\n --red-a12: #3d0000da;\n\n }\n\n .dark-theme {\n /* --- Dark mode --- */\n --primary-1: #000;\n --primary-2: #09121e;\n --primary-3: #0e2341;\n --primary-4: #0c2f5d;\n --primary-5: #153c70;\n --primary-6: #214a81;\n --primary-7: #2d5a97;\n --primary-8: #366bb5;\n --primary-9: #80b5ff;\n --primary-10: #75aaf3;\n --primary-11: #81b7ff;\n --primary-12: #cee3ff;\n --primary-a1: #0000;\n --primary-a2: #4d99ff1e;\n --primary-a3: #378aff41;\n --primary-a4: #2181ff5d;\n --primary-a5: #3089ff70;\n --primary-a6: #4293ff81;\n --primary-a7: #4c98ff97;\n --primary-a8: #4c97ffb5;\n --primary-a9: #80b5ff;\n --primary-a10: #7bb2fff3;\n --primary-a11: #81b7ff;\n --primary-a12: #cee3ff;\n\n --secondary-1: #091915;\n --secondary-2: #04201b;\n --secondary-3: #062923;\n --secondary-4: #07312b;\n --secondary-5: #083932;\n --secondary-6: #09443c;\n --secondary-7: #0b544a;\n --secondary-8: #0c6d62;\n --secondary-9: #12a594;\n --secondary-10: #10b3a3;\n --secondary-11: #0ac5b3;\n --secondary-12: #e1faf4;\n --secondary-a1: #0000;\n --secondary-a2: #00fbd508;\n --secondary-a3: #00fddc12;\n --secondary-a4: #00fde81b;\n --secondary-a5: #02fee424;\n --secondary-a6: #09ffe630;\n --secondary-a7: #11ffe342;\n --secondary-a8: #11ffe75d;\n --secondary-a9: #18ffe49b;\n --secondary-a10: #13ffe7ab;\n --secondary-a11: #0affe7bf;\n --secondary-a12: #e6fff9fa;\n\n --grey-1: #111113;\n --grey-2: #18191b;\n --grey-3: #212225;\n --grey-4: #272a2d;\n --grey-5: #2e3135;\n --grey-6: #363a3f;\n --grey-7: #43484e;\n --grey-8: #5a6169;\n --grey-9: #696e77;\n --grey-10: #777b84;\n --grey-11: #9a9fa7;\n --grey-12: #d5d8dc;\n --grey-a1: #0000;\n --grey-a2: #d8f4f609;\n --grey-a3: #ddeaf814;\n --grey-a4: #d3edf81d;\n --grey-a5: #d9edfe25;\n --grey-a6: #d6ebfd30;\n --grey-a7: #d9edff40;\n --grey-a8: #d9edff5d;\n --grey-a9: #dfebfd6d;\n --grey-a10: #e5edfd7b;\n --grey-a11: #f1f7feb5;\n --grey-a12: #fcfdffef;\n\n --green-1: #0d1912;\n --green-2: #0c1f17;\n --green-3: #0f291e;\n --green-4: #113123;\n --green-5: #133929;\n --green-6: #164430;\n --green-7: #1b543a;\n --green-8: #236e4a;\n --green-9: #30a46c;\n --green-10: #3cb179;\n --green-11: #4cc38a;\n --green-12: #e5fbeb;\n --green-a1: #0000;\n --green-a2: #00f7ca07;\n --green-a3: #2afebe12;\n --green-a4: #33feb31b;\n --green-a5: #38feb524;\n --green-a6: #3dffb130;\n --green-a7: #43ffad42;\n --green-a8: #49ffaa5e;\n --green-a9: #47ffa69a;\n --green-a10: #54ffafa9;\n --green-a11: #62ffb3bd;\n --green-a12: #eafff0fa;\n\n --orange-1: #1f1206;\n --orange-2: #2b1400;\n --orange-3: #391a03;\n --orange-4: #441f04;\n --orange-5: #4f2305;\n --orange-6: #5f2a06;\n --orange-7: #763205;\n --orange-8: #943e00;\n --orange-9: #f76808;\n --orange-10: #ff802b;\n --orange-11: #ff8b3e;\n --orange-12: #feeadd;\n --orange-a1: #0000;\n --orange-a2: #fd37000e;\n --orange-a3: #fd54001e;\n --orange-a4: #fe61002a;\n --orange-a5: #fe620137;\n --orange-a6: #ff650649;\n --orange-a7: #ff640363;\n --orange-a8: #fe660085;\n --orange-a9: #ff6b08f6;\n --orange-a10: #ff842cfa;\n --orange-a11: #ff8c3ffa;\n --orange-a12: #ffeee1fa;\n\n --red-1: #150f0f;\n --red-2: #1e1413;\n --red-3: #361717;\n --red-4: #49191a;\n --red-5: #582122;\n --red-6: #692e2e;\n --red-7: #813e3e;\n --red-8: #a75252;\n --red-9: #d16565;\n --red-10: #c35959;\n --red-11: #ff9795;\n --red-12: #f9d5d3;\n --red-a1: #de000005;\n --red-a2: #fe48360e;\n --red-a3: #fd383828;\n --red-a4: #ff33383c;\n --red-a5: #fd464a4d;\n --red-a6: #fd5f5f5f;\n --red-a7: #ff717178;\n --red-a8: #ff7878a1;\n --red-a9: #ff7979ce;\n --red-a10: #ff7272bf;\n --red-a11: #ff9795ef;\n --red-a12: #ffdad8f9;\n\n }\n\n .light-theme, .dark-theme {\n\n /* --- Constant Colors --- */\n // The should not change between light and dark.\n --white: #FFFFFF;\n --white-1: var(--white);\n --white-2: var(--white);\n --white-3: var(--white);\n --white-4: var(--white);\n --white-5: var(--white);\n --white-6: var(--white);\n --white-7: var(--white);\n --white-8: var(--white);\n --white-9: var(--white);\n --white-10: var(--white);\n --white-11: var(--white);\n --white-12: var(--white);\n\n --white-a1: #fff0;\n --white-a2: #ffffff03;\n --white-a3: #ffffff09;\n --white-a4: #ffffff0e;\n --white-a5: #ffffff16;\n --white-a6: #ffffff20;\n --white-a7: #ffffff2d;\n --white-a8: #ffffff3f;\n --white-a9: #ffffff62;\n --white-a10: #ffffff72;\n --white-a11: #ffffff97;\n --white-a12: #ffffffeb;\n\n --black: #000;\n --black-1: var(--black);\n --black-2: var(--black);\n --black-3: var(--black);\n --black-4: var(--black);\n --black-5: var(--black);\n --black-6: var(--black);\n --black-7: var(--black);\n --black-8: var(--black);\n --black-9: var(--black);\n --black-10: var(--black);\n --black-11: var(--black);\n --black-12: var(--black);\n\n --black-a1: #00000003;\n --black-a2: #00000007;\n --black-a3: #0000000c;\n --black-a4: #00000012;\n --black-a5: #00000017;\n --black-a6: #0000001d;\n --black-a7: #00000024;\n --black-a8: #00000038;\n --black-a9: #00000070;\n --black-a10: #0000007a;\n --black-a11: #00000090;\n --black-a12: #000000e8;\n\n }\n\n\n /** --- Color Aliases --- */\n // Used for state based variable names that can be detached later from base colors if needed.\n .light-theme, .dark-theme {\n\n --info-1: var(--secondary-1);\n --info-2: var(--secondary-2);\n --info-3: var(--secondary-3);\n --info-4: var(--secondary-4);\n --info-5: var(--secondary-5);\n --info-6: var(--secondary-6);\n --info-7: var(--secondary-7);\n --info-8: var(--secondary-8);\n --info-9: var(--secondary-9);\n --info-10: var(--secondary-10);\n --info-11: var(--secondary-11);\n --info-12: var(--secondary-12);\n --info-a1: var(--secondary-a1);\n --info-a2: var(--secondary-a2);\n --info-a3: var(--secondary-a3);\n --info-a4: var(--secondary-a4);\n --info-a5: var(--secondary-a5);\n --info-a6: var(--secondary-a6);\n --info-a7: var(--secondary-a7);\n --info-a8: var(--secondary-a8);\n --info-a9: var(--secondary-a9);\n --info-a10: var(--secondary-a10);\n --info-a11: var(--secondary-a11);\n --info-a12: var(--secondary-a12);\n\n --success-1: var(--green-1);\n --success-2: var(--green-2);\n --success-3: var(--green-3);\n --success-4: var(--green-4);\n --success-5: var(--green-5);\n --success-6: var(--green-6);\n --success-7: var(--green-7);\n --success-8: var(--green-8);\n --success-9: var(--green-9);\n --success-10: var(--green-10);\n --success-11: var(--green-11);\n --success-12: var(--green-12);\n --success-a1: var(--green-a1);\n --success-a2: var(--green-a2);\n --success-a3: var(--green-a3);\n --success-a4: var(--green-a4);\n --success-a5: var(--green-a5);\n --success-a6: var(--green-a6);\n --success-a7: var(--green-a7);\n --success-a8: var(--green-a8);\n --success-a9: var(--green-a9);\n --success-a10: var(--green-a10);\n --success-a11: var(--green-a11);\n --success-a12: var(--green-a12);\n\n --caution-1: var(--orange-1);\n --caution-2: var(--orange-2);\n --caution-3: var(--orange-3);\n --caution-4: var(--orange-4);\n --caution-5: var(--orange-5);\n --caution-6: var(--orange-6);\n --caution-7: var(--orange-7);\n --caution-8: var(--orange-8);\n --caution-9: var(--orange-9);\n --caution-10: var(--orange-10);\n --caution-11: var(--orange-11);\n --caution-12: var(--orange-12);\n --caution-a1: var(--orange-a1);\n --caution-a2: var(--orange-a2);\n --caution-a3: var(--orange-a3);\n --caution-a4: var(--orange-a4);\n --caution-a5: var(--orange-a5);\n --caution-a6: var(--orange-a6);\n --caution-a7: var(--orange-a7);\n --caution-a8: var(--orange-a8);\n --caution-a9: var(--orange-a9);\n --caution-a10: var(--orange-a10);\n --caution-a11: var(--orange-a11);\n --caution-a12: var(--orange-a12);\n\n --warning-1: var(--red-1);\n --warning-2: var(--red-2);\n --warning-3: var(--red-3);\n --warning-4: var(--red-4);\n --warning-5: var(--red-5);\n --warning-6: var(--red-6);\n --warning-7: var(--red-7);\n --warning-8: var(--red-8);\n --warning-9: var(--red-9);\n --warning-10: var(--red-10);\n --warning-11: var(--red-11);\n --warning-12: var(--red-12);\n --warning-a1: var(--red-a1);\n --warning-a2: var(--red-a2);\n --warning-a3: var(--red-a3);\n --warning-a4: var(--red-a4);\n --warning-a5: var(--red-a5);\n --warning-a6: var(--red-a6);\n --warning-a7: var(--red-a7);\n --warning-a8: var(--red-a8);\n --warning-a9: var(--red-a9);\n --warning-a10: var(--red-a10);\n --warning-a11: var(--red-a11);\n --warning-a12: var(--red-a12);\n\n }\n\n .light-theme {\n --shadow-primary-default: var(--grey-a4);\n --shadow-primary-elevate: var(--primary-a5);\n\n --shadow-secondary-default: var(--grey-3);\n --shadow-secondary-elevate: var(--grey-a4);\n\n --shadow-warning-default: var(--grey-a4);\n --shadow-warning-elevate: var(--warning-a5);\n }\n\n .dark-theme {\n --shadow-primary-default: var(--primary-a2);\n --shadow-primary-elevate: var(--primary-a2);\n\n --shadow-secondary-default: var(--black-a8);\n --shadow-secondary-elevate: var(--primary-a4);\n\n --shadow-warning-default: var(--grey-a3);\n --shadow-warning-elevate: var(--warning-a7);\n }\n\n /* --- Component Aliases --- */\n // For specific component uses within the UI Kit.\n .light-theme, .dark-theme {\n /* feedback */\n --error: var(--warning-8);\n --info: var(--primary-7);\n --neutral: var(--grey-9);\n --success: var(--success-8);\n --warning: var(--caution-8);\n\n /* tooltip */\n --tooltip-warning: var(--warning-a9);\n --tooltip-warning-arrow: var(--warning-9);\n --tooltip-warning-border: var(--warning-a7);\n\n --tooltip-success: var(--success-9);\n --tooltip-success-arrow: var(--success-8);\n --tooltip-success-border: var(--success-a7);\n\n --tooltip-info: var(--primary-8);\n --tooltip-info-arrow: var(--primary-8);\n --tooltip-info-border: var(--primary-a8);\n\n --tooltip-neutral: var(--grey-8);\n --tooltip-neutral-arrow: var(--grey-7);\n --tooltip-neutral-border: var(--grey-7);\n\n /* icons */\n --inverse: var(--white-1);\n --mono: var(--grey-12);\n --dimmed: var(--grey-11);\n --subtle: var(--grey-10);\n --primary: var(--primary-9);\n --danger: var(--warning-9);\n\n /* Spinner */\n --spinner-primary-base: var(--primary-6);\n --spinner-primary-top: var(--white-1);\n\n --spinner-secondary-base: var(--grey-8);\n --spinner-secondary-top: var(--white-1);\n\n --spinner-simple-base: var(--grey-a8);\n --spinner-simple-top: var(--white-1);\n\n --spinner-warning-base: var(--warning-8);\n --spinner-warning-top: var(--white-1);\n\n /* Global */\n --main-background-gradient: radial-gradient(200% 200% at 50% -10%, var(--grey-2) 0%, var(--grey-3) 100%);\n --main-background-color: var(--grey-3);\n\n --primary-gradient-start: var(--primary-9);\n --primary-gradient-end: var(--primary-10);\n --primary-gradient: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));\n\n --secondary-gradient-start: var(--grey-5);\n --secondary-gradient-end: var(--grey-6);\n --secondary-gradient: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));\n\n --warning-gradient-start: var(--warning-9);\n --warning-gradient-end: var(--warning-10);\n --warning-gradient: linear-gradient(135deg, var(--warning-gradient-start), var(--warning-gradient-end));\n\n --dividing-line: var(--grey-4);\n --global-element-background: var(--grey-2);\n --global-menu-icon-background-default: transparent;\n --global-menu-icon-background-hover: var(--primary-8);\n --global-menu-icon-background-active: var(--primary-9);\n\n /* Inputs */\n --input-color-default: var(--grey-12);\n --input-color-disabled: var(--grey-10);\n --input-color-placeholder: var(--grey-10);\n --input-color-unit: var(--grey-10);\n\n --input-default-background-color: var(--grey-1);\n --input-default-border-color: var(--grey-6);\n --input-default-shadow-color: transparent;\n\n --input-default-focused-background-color: var(--grey-1);\n --input-default-focused-border-color: var(--grey-6);\n --input-default-focused-shadow-color: var(--grey-3);\n\n --input-disabled-background-color: var(--grey-3);\n --input-disabled-border-color: var(--grey-6);\n --input-disabled-shadow-color: transparent;\n\n --input-required-background-color: var(--grey-1);\n --input-required-border-color: var(--primary-6);\n --input-required-shadow-color: transparent;\n\n --input-required-focused-background-color: var(--grey-1);\n --input-required-focused-border-color: var(--primary-6);\n --input-required-focused-shadow-color: var(--grey-3);\n\n --input-valid-background-color: var(--grey-1);\n --input-valid-border-color: var(--success-9);\n --input-valid-shadow-color: transparent;\n\n --input-valid-focused-background-color: var(--grey-1);\n --input-valid-focused-border-color: var(--success-9);\n --input-valid-focused-shadow-color: var(--grey-3);\n\n --input-invalid-background-color: var(--grey-1);\n --input-invalid-border-color: var(--warning-9);\n --input-invalid-shadow-color: transparent;\n\n --input-invalid-focused-background-color: var(--grey-1);\n --input-invalid-focused-border-color: var(--warning-9);\n --input-invalid-focused-shadow-color: var(--grey-3);\n\n --input-processing-background-color: var(--grey-3)2;\n --input-processing-border-color: var(--primary-10);\n --input-processing-shadow-color: transparent;\n\n --input-processing-focused-background-color: var(--grey-2);\n --input-processing-focused-border-color: var(--primary-10);\n --input-processing-focused-shadow-color: var(--grey-3);\n\n /* Input Icons */\n --input-lead-icon: var(--grey-12);\n --input-disabled-lead-icon: var(--grey-10);\n\n /* Checkboxes and Radio Buttons */\n --input-toggle-icon-color: var(--white-12);\n\n --input-toggle-unchecked-border-color: var(--grey-8);\n --input-toggle-unchecked-background-color: transparent;\n\n --input-toggle-checked-border-color: var(--primary-9);\n --input-toggle-checked-background-color: var(--primary-9);\n\n\n --input-toggle-unchecked-hover-border-color: var(--primary-9);\n --input-toggle-unchecked-hover-background-color: transparent;\n\n --input-toggle-checked-hover-border-color: var(--primary-7);\n --input-toggle-checked-hover-background-color: var(--primary-7);\n\n\n --input-toggle-unchecked-disabled-border-color: var(--grey-7);\n --input-toggle-unchecked-disabled-background-color: transparent;\n\n --input-toggle-checked-disabled-border-color: var(--grey-7);\n --input-toggle-checked-disabled-background-color: var(--grey-7);\n\n\n --input-toggle-intermediate-border-color: var(--primary-11);\n --input-toggle-intermediate-background-color: var(--primary-11);\n\n --input-toggle-intermediate-hover-border-color: var(--primary-11);\n --input-toggle-intermediate-hover-background-color: var(--primary-11);\n\n --input-toggle-intermediate-disabled-border-color: var(--grey-7);\n --input-toggle-intermediate-disabled-background-color: var(--grey-7);\n\n /* Labels */\n --input-label: var(--grey-11);\n --input-label-hover: var(--primary-8);\n --input-label-active: var(--grey-12);\n\n }\n\n /* Filters */\n .light-theme, .dark-theme {\n --filter-button-text-color: var(--grey-11);\n --filter-button-icon-color: var(--grey-10);\n --filter-button-background-color: var(--grey-2);\n --filter-button-stroke-color: var(--grey-a5);\n --filter-button-shadow-color: var(--primary-a3);\n\n --filter-dropdown-background-color: color-mix(in srgb, var(--grey-1) 82%, transparent);\n --filter-dropdown-background-color-fallback: var(--grey-3);\n --filter-dropdown-accent: var(--primary-a9);\n\n }\n\n .dark-theme {\n --filter-button-shadow-color: var(--black-a8);\n }\n\n /* Typography */\n .light-theme, .dark-theme {\n --label-color: var(--grey-11);\n }\n\n /* Buttons */\n .light-theme, .dark-theme {\n --button-background-color: var(--primary-9);\n --button-border-color: var(--primary-9);\n --button-border-width: 1px;\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-primary-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--primary-a3);\n\n --button-loading-area-background-color: var(--primary-a7);\n --button-loading-area-divider-color: var(--primary-a8);\n --button-loading-text-color: var(--white-1);\n --button-disabled-border-color: var(--button-border-color);\n --button-disabled-text-color: var(--white-1);\n\n --button-hover-background-color: var(--primary-8);\n --button-hover-border-color: var(--primary-a6);\n --button-hover-inner-shadow-color: transparent;\n --button-hover-drop-shadow-color: var(--shadow-primary-elevate);\n --button-hover-text-color: var(--white-1);\n --button-hover-divider-color: var(--primary-a3);\n --button-hover-icon-area-background-color: var(--primary-a3);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n --button-active-divider-color: var(--primary-a3);\n --button-active-icon-area-background-color: var(--primary-a3);\n\n --button-gradient-start: var(--primary-gradient-start);\n --button-gradient-end: var(--primary-gradient-end);\n\n .button-design-secondary {\n --button-background-color: var(--grey-9);\n --button-border-color: var(--grey-6);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-secondary-default);\n --button-text-color: var(--grey-12);\n --button-divider-color: var(--grey-a3);\n\n --button-loading-area-background-color: var(--grey-a4);\n --button-loading-area-divider-color: var(--grey-a3);\n --button-disabled-border-color: var(--button-border-color);\n\n --button-hover-background-color: var(--grey-8);\n --button-hover-border-color: var(--grey-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-secondary-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n\n --button-gradient-start: var(--secondary-gradient-start);\n --button-gradient-end: var(--secondary-gradient-end);\n }\n\n .button-design-danger, .button-design-warning {\n --button-background-color: var(--warning-9);\n --button-border-color: var(--warning-9);\n --button-inner-shadow-color: transparent;\n --button-drop-shadow-color: var(--shadow-warning-default);\n --button-text-color: var(--white-1);\n --button-divider-color: var(--warning-9);\n\n --button-loading-area-background-color: var(--warning-a7);\n --button-loading-area-divider-color: var(--warning-a9);\n --button-disabled-border-color: var(--button-border-color);\n\n --button-hover-background-color: var(--warning-8);\n --button-hover-border-color: var(--warning-a6);\n --button-hover-inner-shadow-color: var(--white-a8);\n --button-hover-drop-shadow-color: var(--shadow-warning-elevate);\n --button-hover-text-color: var(--white-1);\n\n --button-active-background-color: var(--button-hover-background-color);\n --button-active-border-color: var(--button-hover-border-color);\n --button-active-inner-shadow-color: var(--button-hover-inner-shadow-color);\n --button-active-drop-shadow-color: var(--button-hover-drop-shadow-color);\n --button-active-text-color: var(--white-1);\n\n --button-gradient-start: var(--warning-gradient-start);\n --button-gradient-end: var(--warning-gradient-end);\n }\n\n .button-design-text-only {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-inner-shadow-color: transparent;\n --button-gradient-start: transparent;\n --button-gradient-end: transparent;\n --button-drop-shadow-color: transparent;\n --button-text-color: var(--grey-12);\n --button-divider-color: transparent;\n\n --button-loading-area-background-color: transparent;\n --button-loading-area-divider-color: transparent;\n --button-loading-text-color: var(--grey-8);\n --button-disabled-border-color: transparent;\n --button-disabled-text-color: var(--grey-8);\n\n --button-hover-background-color: transparent;\n --button-hover-border-color: transparent;\n --button-hover-text-color: var(--primary-9);\n --button-hover-drop-shadow-color: transparent;\n --button-hover-inner-shadow-color: transparent;\n\n --button-active-inner-shadow-color: transparent;\n --button-active-drop-shadow-color: transparent;\n --button-active-background-color: transparent;\n --button-active-border-color: transparent;\n --button-active-text-color: var(--primary-10);\n }\n\n .button-design-outline {\n --button-background-color: transparent;\n --button-border-color: var(--grey-11);\n --button-border-width: 2px;\n --button-inner-shadow-color: transparent;\n --button-gradient-start: transparent;\n --button-gradient-end: transparent;\n --button-drop-shadow-color: var(--grey-a3);\n --button-divider-color: var(--grey-a3);\n --button-text-color: var(--grey-12);\n\n --button-loading-area-background-color: transparent;\n --button-loading-area-divider-color: var(--grey-a3);\n --button-loading-text-color: var(--grey-10);\n --button-disabled-border-color: var(--grey-a6);\n --button-disabled-text-color: var(--grey-12);\n\n --button-hover-background-color: transparent;\n --button-hover-border-color: var(--primary-9);\n --button-hover-text-color: var(--primary-9);\n --button-hover-drop-shadow-color: var(--grey-a4);\n --button-hover-inner-shadow-color: transparent;\n\n --button-active-inner-shadow-color: transparent;\n --button-active-drop-shadow-color: transparent;\n --button-active-background-color: transparent;\n --button-active-border-color: var(--primary-11);\n --button-active-text-color: var(--primary-11);\n }\n\n }\n\n /* Switches */\n .light-theme, .dark-theme {\n // Background\n --switch-default-off-background: var(--grey-4);\n --switch-default-on-background: var(--primary-9);\n --switch-default-danger-background: var(--warning-9);\n\n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-8);\n --switch-disabled-danger-background: var(--warning-8);\n\n // Border\n --switch-default-off-border: var(--grey-7);\n --switch-default-on-border: var(--primary-9);\n --switch-default-danger-border: var(--warning-9);\n\n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-a6);\n --switch-disabled-danger-border: var(--warning-a6);\n\n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n\n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-a9);\n --switch-disabled-danger-inner: var(--warning-a9);\n\n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-11);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n\n --switch-special-failure-background: var(--warning-8);\n --switch-special-failure-border: var(--warning-9);\n --switch-special-failure-inner: var(--white-12);\n --switch-special-failure-icon: var(--warning-8);\n\n }\n\n .light-theme {\n // Background\n --switch-default-off-background: var(--grey-2);\n --switch-default-on-background: var(--primary-7);\n --switch-default-danger-background: var(--warning-9);\n\n --switch-disabled-off-background: var(--grey-3);\n --switch-disabled-on-background: var(--primary-6);\n --switch-disabled-danger-background: var(--warning-8);\n\n // Border\n --switch-default-off-border: var(--grey-6);\n --switch-default-on-border: var(--primary-7);\n --switch-default-danger-border: var(--warning-9);\n\n --switch-disabled-off-border: var(--grey-6);\n --switch-disabled-on-border: var(--primary-7);\n --switch-disabled-danger-border: var(--warning-a5);\n\n // Inner\n --switch-default-off-inner: var(--primary-9);\n --switch-default-on-inner: var(--white-12);\n --switch-default-danger-inner: var(--white-12);\n\n --switch-disabled-off-inner: var(--grey-7);\n --switch-disabled-on-inner: var(--primary-9);\n --switch-disabled-danger-inner: var(--warning-a8);\n\n // Special States\n --switch-special-locked-background: var(--grey-3);\n --switch-special-locked-border: var(--grey-8);\n --switch-special-locked-inner: transparent;\n --switch-special-locked-icon: var(--grey-11);\n }\n\n"])));
|
|
1535
1566
|
|
|
1536
1567
|
var _templateObject$3;
|
|
1537
|
-
var ThemeVariables = createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --input-height: 40px;\n --input-compact-height: 32px;\n --input-required-dot-display: inline-block;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n
|
|
1568
|
+
var ThemeVariables = createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\n ", ";\n ", ";\n ", ";\n\n :root {\n\n --font-ui: Monorale, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n --font-data: Lato, Hiragino Sans, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4\u30B7\u30C3\u30AF\", Hiragino Kaku Gothic ProN, \"\u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 ProN W3\", Roboto, YuGothic, \"\u6E38\u30B4\u30B7\u30C3\u30AF\", Meiryo, \"\u30E1\u30A4\u30EA\u30AA\", sans-serif;\n\n --common-height: 32px;\n\n --font-size: 14px;\n\n --global-menu-width-closed: 80px;\n --global-menu-width-open: 280px;\n\n --input-height: 40px;\n --input-compact-height: 32px;\n --input-required-dot-display: inline-block;\n\n --button-font-size: 14px;\n --button-height: 32px;\n --button-h-padding: 8px;\n --button-h-padding-outline: 7px;\n --button-lift-default-x: 0px;\n --button-lift-default-y: 2px;\n --button-lift-default-blur: 4px;\n --button-lift-default-spread: 2px;\n\n --button-icon-size: 14px;\n --button-icon-h-padding: 8px;\n\n // Inputs\n --input-box-shadow-x: 0;\n --input-box-shadow-y: 0;\n --input-box-shadow-blur: 0;\n --input-box-shadow-spread: 0;\n\n --input-focused-box-shadow-x: 0;\n --input-focused-box-shadow-y: 3px;\n --input-focused-box-shadow-blur: 3px;\n --input-focused-box-shadow-spread: 0;\n\n // Switches\n --switch-height: 24px;\n --switch-width: 40px;\n --switch-border-width: 2px;\n --switch-inner-size: 16px;\n --switch-intent-offset: 3px;\n\n // Labels\n --label-font: var(--font-ui);\n --label-font-size: 14px;\n --label-weight: 500;\n\n }\n\n .button-size-xsmall {\n --button-font-size: 12px;\n --button-height: 20px;\n --button-h-padding: 4px;\n --button-h-padding-outline: 3px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 4px;\n }\n\n .button-size-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-h-padding-outline: 3px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .button-size-large {\n --button-font-size: 16px;\n --button-height: 40px;\n --button-h-padding: 8px;\n --button-h-padding-outline: 7px;\n --button-icon-size: 16px;\n --button-icon-h-padding: 8px;\n }\n\n\n\n .split-button-primary {\n --border-color: var(--primary-9);\n --border-active-color: var(--primary-11);\n --toggle-icon-border: var(--primary-9);\n --gradient-1: #72C3EE;\n --gradient-2: #5CACEE;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--primary-a3);\n --button-active-bg: var(--primary-10);\n --toggle-icon-hover-bg: var(--white-a7);\n --toggle-icon-active-bg: var(--black-a6);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-secondary {\n --border-color: var(--grey-7);\n --border-active-color: var(--grey-7);\n --toggle-icon-border: var(--grey-6);\n --gradient-1: #2E3135;\n --gradient-2: #363A3F;\n --button-lift-default-color: rgba(221, 234, 248, 0.08);\n --text-color: var(--grey-12);\n --text-disabled-color: var(--grey-a11);\n --button-hover-bg: var(--grey-a6);\n --button-active-bg: var(--grey-a3);\n --toggle-icon-hover-bg: var(--grey-a6);\n --toggle-icon-active-bg: var(--grey-a3);\n --toggle-icon: var(--grey-12);\n --toggle-icon-active: var(--grey-a11);\n --toggle-icon-disabled: var(--grey-10);\n }\n\n .split-button-danger {\n --border-color: var(--warning-10);\n --border-active-color: var(--warning-10);\n --toggle-icon-border: var(--warning-9);\n --gradient-1: #D16565;\n --gradient-2: #E76F6F;\n --button-lift-default-color: rgba(255, 113, 113, 0.47);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--warning-a7);\n --button-active-bg: var(--warning-8);\n --toggle-icon-hover-bg: var(--warning-a7);\n --toggle-icon-active-bg: var(--warning-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-custom {\n --border-color: var(--info-10);\n --border-active-color: var(--info-10);\n --toggle-icon-border: var(--info-9);\n --gradient-1: var(--info-10);\n --gradient-2: var(--info-9);\n --button-lift-default-color: var(--info-a3);\n --text-color: var(--white-a12);\n --text-disabled-color: var(--white-a11);\n --button-hover-bg: var(--info-a7);\n --button-active-bg: var(--info-8);\n --toggle-icon-hover-bg: var(--info-a7);\n --toggle-icon-active-bg: var(--info-a5);\n --toggle-icon: var(--white-a12);\n --toggle-icon-active: var(--white-a11);\n --toggle-icon-disabled: var(--white-a10);\n }\n\n .split-button-size-small {\n --button-font-size: 12px;\n --button-height: 24px;\n --button-h-padding: 4px;\n --button-icon-size: 12px;\n --button-icon-h-padding: 8px;\n }\n\n .split-button-size-large {\n --button-font-size: 16px;\n --button-height: 40px;\n --button-h-padding: 8px;\n --button-icon-size: 16px;\n --button-icon-h-padding: 8px;\n }\n\n"])), layoutVariables, animationVariables, colorVariables);
|
|
1538
1569
|
|
|
1539
1570
|
var _templateObject$4;
|
|
1540
|
-
var BaseStyles = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n text-rendering: geometricPrecision
|
|
1571
|
+
var BaseStyles = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\n * , body{\n box-sizing: border-box;\n text-rendering: geometricPrecision;\n }\n body, html , #root {\n min-width: 100%;\n min-height: 100vh;\n margin: 0;\n }\n\n body {\n font-family: var(--font-ui);\n color: var(--grey-11);\n background: var(--main-background-gradient);\n background-attachment: fixed;\n }\n\n"])));
|
|
1541
1572
|
|
|
1542
1573
|
var _templateObject$5, _templateObject2, _templateObject3;
|
|
1543
|
-
var wrapperCss = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n
|
|
1574
|
+
var wrapperCss = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\n line-height: 0;\n\n svg {\n overflow: visible;\n vector-effect: non-scaling-stroke;\n\n line, path, circle, ellipse, foreignObject, polygon, polyline, rect, text, textPath, tspan {\n vector-effect: non-scaling-stroke;\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n }\n"])));
|
|
1544
1575
|
var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1545
1576
|
var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), wrapperCss);
|
|
1546
1577
|
var Icon = function Icon(_ref) {
|
|
@@ -1922,48 +1953,56 @@ var Tooltip = function Tooltip(_ref6) {
|
|
|
1922
1953
|
}), message)), document.body);
|
|
1923
1954
|
};
|
|
1924
1955
|
|
|
1925
|
-
var _excluded = ["design", "size", "shadow", "noPadding", "children"];
|
|
1926
|
-
var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1;
|
|
1956
|
+
var _excluded = ["design", "size", "shadow", "noPadding", "loading", "children"];
|
|
1957
|
+
var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1;
|
|
1927
1958
|
var activeAnimation = function activeAnimation(shadow) {
|
|
1928
|
-
var animation = keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n 0% {\n box-shadow
|
|
1959
|
+
var animation = keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n 0% {\n box-shadow:\n 0 0px 0px var(--button-hover-inner-shadow-color) inset\n ", ";\n }\n\n 75% {\n box-shadow:\n 0 0 24px var(--button-active-inner-shadow-color) inset\n ", ";\n }\n\n 100% {\n box-shadow:\n 0 0 16px var(--button-active-inner-shadow-color) inset\n ", ";\n }\n "])), shadow ? ', 0 4px 8px var(--button-hover-drop-shadow-color)' : '', shadow ? ', 0 4px 6px var(--button-active-drop-shadow-color)' : '', shadow ? ', 0 4px 6px var(--button-active-drop-shadow-color)' : '');
|
|
1929
1960
|
return animation;
|
|
1930
1961
|
};
|
|
1931
|
-
var StyledButton = styled.button(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-family: var(--font-ui);\n height: var(--button-height);\n font-size: var(--button-font-size);\n color: var(--button-text-color);\n font-weight: 600;\n
|
|
1932
|
-
var $noPadding = _ref.$noPadding
|
|
1933
|
-
|
|
1962
|
+
var StyledButton = styled.button(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-family: var(--font-ui);\n height: var(--button-height);\n font-size: var(--button-font-size);\n color: var(--button-text-color);\n font-weight: 600;\n\n ", "\n\n overflow: hidden;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n border-radius: 3px;\n border: var(--button-border-width) solid var(--button-border-color);\n background: linear-gradient(135deg, transparent, transparent, var(--button-gradient-start), var(--button-gradient-end));\n background-color: var(--button-background-color);\n background-size: 400%;\n background-position: 99%;\n\n ", "\n\n transition:\n border-color var(--speed-normal) var(--easing-primary-in-out),\n background-color var(--speed-normal) var(--easing-primary-in-out),\n background-position var(--speed-normal) var(--easing-primary-out),\n background-size var(--speed-normal) var(--easing-primary-out),\n box-shadow var(--speed-normal) var(--easing-primary-out),\n opacity var(--speed-normal) var(--easing-primary-out),\n color var(--speed-normal) var(--easing-primary-in-out);\n\n &:hover:enabled {\n background-position: 1%;\n background-color: var(--button-hover-background-color);\n border-color: var(--button-hover-border-color);\n color: var(--button-hover-text-color);\n\n ", "\n }\n\n &:active:enabled {\n background-color: var(--button-active-background-color);\n border-color: var(--button-active-border-color);\n color: var(--button-active-text-color);\n ", ";\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 50%;\n color: var(--button-disabled-text-color);\n border-color: var(--button-disabled-border-color, transparent);\n }\n\n ", ";\n\n button + button {\n margin-left: 20px;\n }\n\n"])), function (_ref) {
|
|
1963
|
+
var $noPadding = _ref.$noPadding,
|
|
1964
|
+
isOutline = _ref.isOutline;
|
|
1965
|
+
return $noPadding ? css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n padding: 0px;\n "]))) : css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n padding: ", ";\n "])), isOutline ? "var(--button-h-padding-outline)" : "var(--button-h-padding)");
|
|
1934
1966
|
}, function (_ref2) {
|
|
1935
1967
|
var $shadow = _ref2.$shadow;
|
|
1936
|
-
return $shadow ? css(
|
|
1968
|
+
return $shadow ? css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n box-shadow:\n 0 2px 4px 2px var(--button-drop-shadow-color),\n 0 0 0 var(--button-inner-shadow-color) inset;\n "]))) : css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n box-shadow: 0 0 0 var(--button-inner-shadow-color) inset;\n "])));
|
|
1937
1969
|
}, function (_ref3) {
|
|
1938
1970
|
var $shadow = _ref3.$shadow;
|
|
1939
|
-
return $shadow ? css(
|
|
1971
|
+
return $shadow ? css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n box-shadow:\n 0 4px 8px var(--button-hover-drop-shadow-color),\n 0 0 5px var(--button-hover-inner-shadow-color) inset;\n "]))) : css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n box-shadow: 0 0 5px var(--button-hover-inner-shadow-color) inset;\n "])));
|
|
1940
1972
|
}, function (_ref4) {
|
|
1941
1973
|
var $shadow = _ref4.$shadow;
|
|
1942
|
-
return css(
|
|
1974
|
+
return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n animation: var(--speed-normal) var(--easing-primary-in-out) ", " forwards;\n "])), function () {
|
|
1943
1975
|
return activeAnimation($shadow);
|
|
1944
1976
|
});
|
|
1977
|
+
}, function (_ref5) {
|
|
1978
|
+
var $loading = _ref5.$loading;
|
|
1979
|
+
return $loading && css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n &:disabled {\n opacity: 1;\n cursor: wait;\n color: var(--button-loading-text-color);\n }\n "])));
|
|
1945
1980
|
});
|
|
1946
|
-
var Button = function Button(
|
|
1947
|
-
var
|
|
1948
|
-
design =
|
|
1949
|
-
|
|
1950
|
-
size =
|
|
1951
|
-
|
|
1952
|
-
shadow =
|
|
1953
|
-
|
|
1954
|
-
noPadding =
|
|
1955
|
-
|
|
1956
|
-
|
|
1981
|
+
var Button = function Button(_ref6) {
|
|
1982
|
+
var _ref6$design = _ref6.design,
|
|
1983
|
+
design = _ref6$design === void 0 ? 'primary' : _ref6$design,
|
|
1984
|
+
_ref6$size = _ref6.size,
|
|
1985
|
+
size = _ref6$size === void 0 ? 'normal' : _ref6$size,
|
|
1986
|
+
_ref6$shadow = _ref6.shadow,
|
|
1987
|
+
shadow = _ref6$shadow === void 0 ? false : _ref6$shadow,
|
|
1988
|
+
_ref6$noPadding = _ref6.noPadding,
|
|
1989
|
+
noPadding = _ref6$noPadding === void 0 ? false : _ref6$noPadding,
|
|
1990
|
+
_ref6$loading = _ref6.loading,
|
|
1991
|
+
loading = _ref6$loading === void 0 ? false : _ref6$loading,
|
|
1992
|
+
children = _ref6.children,
|
|
1993
|
+
props = _objectWithoutPropertiesLoose(_ref6, _excluded);
|
|
1957
1994
|
design === 'danger' ? console.warn('Button.tsx - Warning, the design prop value danger is being deprecated. Use warning instead.') : null;
|
|
1958
1995
|
return React__default.createElement(StyledButton, Object.assign({
|
|
1959
1996
|
type: 'button',
|
|
1997
|
+
isOutline: design === 'outline',
|
|
1960
1998
|
className: "button-design-" + design + " button-size-" + size
|
|
1961
1999
|
}, {
|
|
1962
2000
|
design: design,
|
|
1963
2001
|
size: size
|
|
1964
2002
|
}, {
|
|
1965
2003
|
"$noPadding": noPadding,
|
|
1966
|
-
"$shadow": shadow
|
|
2004
|
+
"$shadow": shadow,
|
|
2005
|
+
"$loading": loading
|
|
1967
2006
|
}, props), children);
|
|
1968
2007
|
};
|
|
1969
2008
|
|
|
@@ -2045,58 +2084,72 @@ var Spinner = function Spinner(_ref6) {
|
|
|
2045
2084
|
}));
|
|
2046
2085
|
};
|
|
2047
2086
|
|
|
2048
|
-
var _excluded$1 = ["design", "size", "loading", "shadow", "onClick", "disabled", "position", "icon", "children"];
|
|
2049
|
-
var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$
|
|
2050
|
-
var Container$2 = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n display: inline;\n
|
|
2051
|
-
|
|
2052
|
-
|
|
2087
|
+
var _excluded$1 = ["design", "size", "loading", "shadow", "onClick", "disabled", "position", "icon", "weight", "children"];
|
|
2088
|
+
var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11;
|
|
2089
|
+
var Container$2 = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n display: inline;\n"])));
|
|
2090
|
+
var TextContainer = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n padding: 0 var(--button-h-padding);\n transition: padding var(--speed-slow) var(--easing-primary-in-out);\n font-weight: ", ";\n"])), function (_ref) {
|
|
2091
|
+
var weight = _ref.weight;
|
|
2092
|
+
return weight === 'light' ? '500' : '600';
|
|
2053
2093
|
});
|
|
2054
|
-
var
|
|
2055
|
-
var
|
|
2056
|
-
var
|
|
2057
|
-
var IconArea = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n flex: 0 0 calc((var(--button-h-padding)* 2) + var(--button-icon-size));\n border: 0px solid var(--button-divider-color);\n padding: 0 var(--button-h-padding);\n\n ", "\n \n ", "{\n svg {\n display:block;\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n path, rect, circle, d {\n stroke: var(--button-text-color);\n }\n }\n }\n\n ", ", ", "{\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n }\n\n ", ";\n \n"])), function (_ref2) {
|
|
2094
|
+
var IconContainer = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n opacity: 1;\n"])));
|
|
2095
|
+
var SpinnerContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n background-color: var(--button-loading-area-background-color);\n\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n opacity: 0;\n"])));
|
|
2096
|
+
var IconArea = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n flex: 0 0 calc((var(--button-h-padding)* 2) + var(--button-icon-size));\n border: 0px solid var(--button-divider-color);\n padding: 0 var(--button-h-padding);\n\n ", "\n\n ", "{\n svg {\n display:block;\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n path, rect, circle, d {\n stroke: var(--button-text-color);\n }\n }\n }\n\n ", ", ", "{\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n }\n\n ", ";\n\n"])), function (_ref2) {
|
|
2058
2097
|
var position = _ref2.position;
|
|
2059
|
-
return css(
|
|
2098
|
+
return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n order: ", ";\n ", ";\n "])), position && position === 'left' ? 0 : 2, position === 'left' ? "border-right-width: 1px;" : "border-left-width: 1px;");
|
|
2060
2099
|
}, IconContainer, IconContainer, SpinnerContainer, function (_ref3) {
|
|
2061
2100
|
var $loading = _ref3.$loading;
|
|
2062
|
-
return $loading && css(
|
|
2063
|
-
});
|
|
2064
|
-
var InnerContainer = styled.div(
|
|
2065
|
-
var
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2101
|
+
return $loading && css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n border-color: var(--button-loading-area-divider-color);\n\n ", "{\n opacity: 1;\n }\n\n ", "{\n opacity: 0;\n };\n "])), SpinnerContainer, IconContainer);
|
|
2102
|
+
});
|
|
2103
|
+
var InnerContainer = styled.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n height: inherit;\n\n &:hover {\n ", ";\n }\n\n &:active{\n ", ";\n }\n\n ", ";\n"])), function (_ref4) {
|
|
2104
|
+
var disabled = _ref4.disabled;
|
|
2105
|
+
return !disabled && css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n ", "{\n svg {\n path, rect, circle, d {\n stroke: var(--button-hover-text-color);\n }\n }\n }\n "])), IconContainer);
|
|
2106
|
+
}, function (_ref5) {
|
|
2107
|
+
var disabled = _ref5.disabled;
|
|
2108
|
+
return !disabled && css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n ", "{\n svg {\n path, rect, circle, d {\n stroke: var(--button-active-text-color);\n }\n }\n }\n "])), IconContainer);
|
|
2109
|
+
}, function (_ref6) {
|
|
2110
|
+
var disabled = _ref6.disabled;
|
|
2111
|
+
return disabled && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "{\n svg {\n path, rect, circle, d {\n stroke: var(--button-disabled-text-color);\n }\n }\n }\n "])), IconContainer);
|
|
2112
|
+
});
|
|
2113
|
+
var ButtonWithIcon = function ButtonWithIcon(_ref7) {
|
|
2114
|
+
var _ref7$design = _ref7.design,
|
|
2115
|
+
design = _ref7$design === void 0 ? 'primary' : _ref7$design,
|
|
2116
|
+
_ref7$size = _ref7.size,
|
|
2117
|
+
size = _ref7$size === void 0 ? 'normal' : _ref7$size,
|
|
2118
|
+
_ref7$loading = _ref7.loading,
|
|
2119
|
+
loading = _ref7$loading === void 0 ? false : _ref7$loading,
|
|
2120
|
+
_ref7$shadow = _ref7.shadow,
|
|
2121
|
+
shadow = _ref7$shadow === void 0 ? false : _ref7$shadow,
|
|
2122
|
+
onClick = _ref7.onClick,
|
|
2123
|
+
disabled = _ref7.disabled,
|
|
2124
|
+
position = _ref7.position,
|
|
2125
|
+
icon = _ref7.icon,
|
|
2126
|
+
_ref7$weight = _ref7.weight,
|
|
2127
|
+
weight = _ref7$weight === void 0 ? 'regular' : _ref7$weight,
|
|
2128
|
+
children = _ref7.children,
|
|
2129
|
+
props = _objectWithoutPropertiesLoose(_ref7, _excluded$1);
|
|
2130
|
+
return React__default.createElement(Container$2, null, React__default.createElement(Button, Object.assign({
|
|
2131
|
+
noPadding: true,
|
|
2132
|
+
disabled: disabled || loading
|
|
2084
2133
|
}, {
|
|
2085
2134
|
design: design,
|
|
2086
2135
|
size: size,
|
|
2087
2136
|
shadow: shadow,
|
|
2088
2137
|
onClick: onClick,
|
|
2089
|
-
|
|
2090
|
-
}, props), React__default.createElement(InnerContainer,
|
|
2138
|
+
loading: loading
|
|
2139
|
+
}, props), React__default.createElement(InnerContainer, Object.assign({}, {
|
|
2140
|
+
disabled: disabled,
|
|
2141
|
+
loading: loading
|
|
2142
|
+
}), React__default.createElement(TextContainer, Object.assign({}, {
|
|
2091
2143
|
size: size,
|
|
2092
|
-
position: position
|
|
2144
|
+
position: position,
|
|
2145
|
+
weight: weight
|
|
2093
2146
|
}), children), React__default.createElement(IconArea, Object.assign({
|
|
2094
2147
|
"$loading": loading
|
|
2095
2148
|
}, {
|
|
2096
2149
|
position: position
|
|
2097
2150
|
}), React__default.createElement(IconContainer, null, React__default.createElement(Icon, {
|
|
2098
2151
|
icon: icon,
|
|
2099
|
-
weight:
|
|
2152
|
+
weight: weight
|
|
2100
2153
|
})), React__default.createElement(SpinnerContainer, null, React__default.createElement(Spinner, {
|
|
2101
2154
|
size: size === 'xsmall' || size === 'small' ? 'xsmall' : 'small',
|
|
2102
2155
|
styling: design
|
|
@@ -2104,43 +2157,40 @@ var ButtonWithIcon = function ButtonWithIcon(_ref4) {
|
|
|
2104
2157
|
};
|
|
2105
2158
|
|
|
2106
2159
|
var _excluded$2 = ["design", "size", "shadow", "onClick", "disabled", "position", "loading", "children"];
|
|
2107
|
-
var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3
|
|
2108
|
-
var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n display: inline;\n
|
|
2109
|
-
|
|
2110
|
-
|
|
2160
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5, _templateObject6$3, _templateObject7$3;
|
|
2161
|
+
var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n display: inline;\n"])));
|
|
2162
|
+
var TextContainer$1 = styled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 1;\n order: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n padding: 0 var(--button-h-padding);\n\n transition: padding var(--speed-slow) var(--easing-primary-in-out);\n"])));
|
|
2163
|
+
var LoadingContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n height: inherit;\n flex: 0 0 calc((var(--button-h-padding) * 2) + var(--button-icon-size));\n width: calc((var(--button-h-padding) * 2) + var(--button-icon-size));\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n opacity: 0;\n border: 0px solid var(--button-loading-area-divider-color);\n background-color: var(--button-loading-area-background-color);\n\n transition:\n flex var(--speed-slow) var(--easing-primary-in-out) var(--speed-slow),\n opacity var(--speed-slow) var(--easing-primary-in-out);\n\n ", "\n\n svg {\n display:block;\n }\n"])), function (_ref) {
|
|
2164
|
+
var position = _ref.position;
|
|
2165
|
+
return css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n order: ", ";\n ", ";\n "])), position && position === 'left' ? 0 : 2, position === 'left' ? "border-right-width: 1px;" : "border-left-width: 1px;");
|
|
2111
2166
|
});
|
|
2112
|
-
var
|
|
2113
|
-
var
|
|
2114
|
-
var
|
|
2115
|
-
return css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n order: ", ";\n ", ";\n "])), position && position === 'left' ? 0 : 2, position === 'left' ? "border-right-width: 1px;" : "border-left-width: 1px;");
|
|
2167
|
+
var InnerContainer$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex:1;\n height: inherit;\n\n ", "\n"])), function (_ref2) {
|
|
2168
|
+
var $loading = _ref2.$loading;
|
|
2169
|
+
return $loading ? css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n\n transition: margin var(--speed-slow) var(--easing-primary-in-out);\n\n ", "{\n opacity: 1;\n transition: flex var(--speed-slow) var(--easing-primary-in-out), opacity var(--speed-slow) var(--easing-primary-in-out) var(--speed-slow);\n }\n "])), LoadingContainer) : css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n ", "{\n flex: 0 0 0px;\n }\n "])), LoadingContainer);
|
|
2116
2170
|
});
|
|
2117
|
-
var
|
|
2118
|
-
var $
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
children = _ref4.children,
|
|
2133
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$2);
|
|
2134
|
-
return React__default.createElement(Container$3, {
|
|
2135
|
-
"$loading": loading
|
|
2136
|
-
}, React__default.createElement(Button, Object.assign({
|
|
2171
|
+
var ButtonWithLoading = function ButtonWithLoading(_ref3) {
|
|
2172
|
+
var _ref3$design = _ref3.design,
|
|
2173
|
+
design = _ref3$design === void 0 ? 'primary' : _ref3$design,
|
|
2174
|
+
_ref3$size = _ref3.size,
|
|
2175
|
+
size = _ref3$size === void 0 ? 'normal' : _ref3$size,
|
|
2176
|
+
_ref3$shadow = _ref3.shadow,
|
|
2177
|
+
shadow = _ref3$shadow === void 0 ? false : _ref3$shadow,
|
|
2178
|
+
onClick = _ref3.onClick,
|
|
2179
|
+
disabled = _ref3.disabled,
|
|
2180
|
+
position = _ref3.position,
|
|
2181
|
+
_ref3$loading = _ref3.loading,
|
|
2182
|
+
loading = _ref3$loading === void 0 ? false : _ref3$loading,
|
|
2183
|
+
children = _ref3.children,
|
|
2184
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
|
|
2185
|
+
return React__default.createElement(Container$3, null, React__default.createElement(Button, Object.assign({
|
|
2137
2186
|
noPadding: true,
|
|
2138
2187
|
disabled: disabled || loading
|
|
2139
2188
|
}, {
|
|
2140
2189
|
design: design,
|
|
2141
2190
|
size: size,
|
|
2142
2191
|
shadow: shadow,
|
|
2143
|
-
onClick: onClick
|
|
2192
|
+
onClick: onClick,
|
|
2193
|
+
loading: loading
|
|
2144
2194
|
}, rest), React__default.createElement(InnerContainer$1, Object.assign({
|
|
2145
2195
|
"$loading": loading
|
|
2146
2196
|
}, {
|
|
@@ -2224,7 +2274,7 @@ var ActionButtons = function ActionButtons(_ref4) {
|
|
|
2224
2274
|
};
|
|
2225
2275
|
|
|
2226
2276
|
var _excluded$4 = ["type", "placeholder", "defaultValue", "fieldState", "showFeedback", "feedbackMessage", "actionCallback", "actionIcon", "postfix"];
|
|
2227
|
-
var _templateObject$h, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$
|
|
2277
|
+
var _templateObject$h, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$7, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13;
|
|
2228
2278
|
var ActionContainer = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
2229
2279
|
var InputActionButton = styled.button.attrs({
|
|
2230
2280
|
type: "button"
|
|
@@ -2238,12 +2288,12 @@ var StyledInput = styled.input(_templateObject6$4 || (_templateObject6$4 = _tagg
|
|
|
2238
2288
|
});
|
|
2239
2289
|
var InputContainer = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n\n flex: 1;\n position: relative;\n\n ", "\n\n"])), function (_ref2) {
|
|
2240
2290
|
var hasAction = _ref2.hasAction;
|
|
2241
|
-
return hasAction && css(_templateObject9$
|
|
2291
|
+
return hasAction && css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 60px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput);
|
|
2242
2292
|
});
|
|
2243
|
-
var Container$5 = styled.div(_templateObject10$
|
|
2293
|
+
var Container$5 = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (_ref3) {
|
|
2244
2294
|
var fieldState = _ref3.fieldState,
|
|
2245
2295
|
showFeedback = _ref3.showFeedback;
|
|
2246
|
-
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n flex-direction: row;\n\n ", "{\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", ";\n\n }\n\n ", " {\n ", ";\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
|
|
2296
|
+
return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n flex-direction: row;\n\n ", "{\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", ";\n\n }\n\n ", " {\n ", ";\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
|
|
2247
2297
|
});
|
|
2248
2298
|
var Input = function Input(_ref4) {
|
|
2249
2299
|
var _ref4$type = _ref4.type,
|
|
@@ -2389,7 +2439,7 @@ var SmallInput = function SmallInput(_ref4) {
|
|
|
2389
2439
|
}, props)), unit ? React__default.createElement(UnitKey, null, unit) : null)));
|
|
2390
2440
|
};
|
|
2391
2441
|
|
|
2392
|
-
var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$
|
|
2442
|
+
var _templateObject$k, _templateObject2$e, _templateObject3$d, _templateObject4$c, _templateObject5$a, _templateObject6$6, _templateObject7$6, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15;
|
|
2393
2443
|
var SwitchPosition;
|
|
2394
2444
|
(function (SwitchPosition) {
|
|
2395
2445
|
SwitchPosition[SwitchPosition["Off"] = 0] = "Off";
|
|
@@ -2412,28 +2462,28 @@ var getPositionKey = function getPositionKey(switchPos) {
|
|
|
2412
2462
|
}
|
|
2413
2463
|
};
|
|
2414
2464
|
var RealInput = styled.input(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
2415
|
-
var SwitchOuter = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n border: var(--switch-border-width) solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n\n width: var(--switch-width);\n height: var(--switch-height);\n border-radius: calc(var(--switch-height) / 2);\n\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: calc(var(--switch-border-width) * -1);\n left: calc(var(--switch-border-width) * -1);\n bottom: calc(var(--switch-border-width) * -1);\n right: calc(var(--switch-border-width) * -1);\n pointer-events: none;\n border-radius: 12px;\n box-shadow
|
|
2416
|
-
var SwitchInner = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n --offset: calc(((var(--switch-height) - var(--switch-inner-size)) / 2) - var(--switch-border-width));\n --position-off: var(--offset);\n --position-on: calc(var(--switch-width) - var(--switch-inner-size) - (var(--switch-border-width)*2) - var(--offset));\n --position-neutral: calc((var(--switch-width) / 2) - (var(--switch-inner-size) / 2) - var(--offset));\n --position-locked: var(--offset);\n\n position: absolute;\n top: var(--offset);\n left: ", ";\n
|
|
2465
|
+
var SwitchOuter = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n border: var(--switch-border-width) solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n\n width: var(--switch-width);\n height: var(--switch-height);\n border-radius: calc(var(--switch-height) / 2);\n\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: calc(var(--switch-border-width) * -1);\n left: calc(var(--switch-border-width) * -1);\n bottom: calc(var(--switch-border-width) * -1);\n right: calc(var(--switch-border-width) * -1);\n pointer-events: none;\n border-radius: 12px;\n box-shadow:\n 0px 2px 2px 0px var(--grey-a4) inset,\n 0px -8px 8px 0px var(--grey-a2) inset,\n 0px 2px 4px var(--black-a4),\n 0px -2px 4px var(--white-a4);\n }\n"])));
|
|
2466
|
+
var SwitchInner = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n --offset: calc(((var(--switch-height) - var(--switch-inner-size)) / 2) - var(--switch-border-width));\n --position-off: var(--offset);\n --position-on: calc(var(--switch-width) - var(--switch-inner-size) - (var(--switch-border-width)*2) - var(--offset));\n --position-neutral: calc((var(--switch-width) / 2) - (var(--switch-inner-size) / 2) - var(--offset));\n --position-locked: var(--offset);\n\n position: absolute;\n top: var(--offset);\n left: ", ";\n\n box-sizing: border-box;\n height: var(--switch-inner-size);\n width: var(--switch-inner-size);\n border-radius: calc(var(--switch-inner-size) / 2);\n\n background-color: var(--switch-default-off-background);\n\n box-shadow:\n 0px 2px 4px 0px var(--black-a8),\n 0px 1px 2px 0px var(--white-a5) inset,\n 0px -1px 1px 0px var(--black-a5) inset;\n"])), function (_ref) {
|
|
2417
2467
|
var position = _ref.position;
|
|
2418
2468
|
return position && "var(--position-" + position + ")";
|
|
2419
2469
|
});
|
|
2420
2470
|
var LabelText$1 = styled.span(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose([""])));
|
|
2421
2471
|
var IconWrapper$1 = styled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n display: block;\n }\n"])));
|
|
2422
2472
|
var SpinnerWrapper = styled.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose([""])));
|
|
2423
|
-
var Container$7 = styled(StyledLabel)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n
|
|
2473
|
+
var Container$7 = styled(StyledLabel)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n\n ", "{\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n }\n\n ", "{\n ", ";\n\n transition:\n left var(--speed-fast) var(--easing-primary-in-out),\n border var(--speed-fast) var(--easing-primary-in-out),\n width var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n\n ", "\n\n ", ";\n\n }\n\n &:hover {\n ", "{\n left: ", ";\n }\n }\n"])), SwitchOuter, function (_ref2) {
|
|
2424
2474
|
var activeTheming = _ref2.activeTheming,
|
|
2425
2475
|
themeState = _ref2.themeState;
|
|
2426
2476
|
return css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n border-color: var(--switch-", "-", "-border);\n background-color: var(--switch-", "-", "-background);\n "])), themeState, activeTheming, themeState, activeTheming);
|
|
2427
2477
|
}, function (_ref3) {
|
|
2428
2478
|
var activeTheming = _ref3.activeTheming;
|
|
2429
|
-
return activeTheming === 'locked' && css(_templateObject9$
|
|
2479
|
+
return activeTheming === 'locked' && css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-special-locked-background);\n border-color: var(--switch-special-locked-border);\n "])));
|
|
2430
2480
|
}, function (_ref4) {
|
|
2431
2481
|
var activeTheming = _ref4.activeTheming;
|
|
2432
|
-
return activeTheming === 'failure' && css(_templateObject10$
|
|
2482
|
+
return activeTheming === 'failure' && css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-special-failure-background);\n border-color: var(--switch-special-failure-border);\n "])));
|
|
2433
2483
|
}, function (_ref5) {
|
|
2434
2484
|
var activeTheming = _ref5.activeTheming,
|
|
2435
2485
|
$loading = _ref5.$loading;
|
|
2436
|
-
return $loading && css(_templateObject11$
|
|
2486
|
+
return $loading && css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n background-color: var(--switch-default-", "-background);\n border-color: var(--switch-default-", "-border);\n "])), activeTheming, activeTheming);
|
|
2437
2487
|
}, SwitchInner, function (_ref6) {
|
|
2438
2488
|
var activeTheming = _ref6.activeTheming,
|
|
2439
2489
|
themeState = _ref6.themeState;
|
|
@@ -2457,7 +2507,7 @@ var isTypeSwitchState = function isTypeSwitchState(value) {
|
|
|
2457
2507
|
return value === 'default' || value === 'loading' || value === 'locked' || value === 'disabled' || value === 'failure';
|
|
2458
2508
|
};
|
|
2459
2509
|
var Switch = function Switch(_ref11) {
|
|
2460
|
-
var _inputRef$
|
|
2510
|
+
var _inputRef$current;
|
|
2461
2511
|
var _ref11$state = _ref11.state,
|
|
2462
2512
|
state = _ref11$state === void 0 ? 'default' : _ref11$state,
|
|
2463
2513
|
_ref11$leftTheme = _ref11.leftTheme,
|
|
@@ -2466,49 +2516,66 @@ var Switch = function Switch(_ref11) {
|
|
|
2466
2516
|
rightTheme = _ref11$rightTheme === void 0 ? 'on' : _ref11$rightTheme,
|
|
2467
2517
|
labelText = _ref11.labelText,
|
|
2468
2518
|
onChangeCallback = _ref11.onChangeCallback,
|
|
2469
|
-
|
|
2470
|
-
|
|
2519
|
+
checked = _ref11.checked,
|
|
2520
|
+
_ref11$defaultChecked = _ref11.defaultChecked,
|
|
2521
|
+
defaultChecked = _ref11$defaultChecked === void 0 ? false : _ref11$defaultChecked;
|
|
2522
|
+
var isControlled = checked !== undefined;
|
|
2523
|
+
var initialChecked = isControlled ? checked : defaultChecked;
|
|
2524
|
+
var initialPosition = initialChecked ? SwitchPosition.On : SwitchPosition.Off;
|
|
2525
|
+
var initialTheme = initialChecked ? rightTheme : leftTheme;
|
|
2526
|
+
var _useState = useState(defaultChecked),
|
|
2527
|
+
internalChecked = _useState[0],
|
|
2528
|
+
setInternalChecked = _useState[1];
|
|
2471
2529
|
var inputRef = useRef(null);
|
|
2472
2530
|
var innerRef = useRef(null);
|
|
2473
|
-
var
|
|
2474
|
-
position =
|
|
2475
|
-
setPosition =
|
|
2476
|
-
var
|
|
2477
|
-
activeTheming =
|
|
2478
|
-
setActiveTheming =
|
|
2479
|
-
var
|
|
2480
|
-
switchState =
|
|
2481
|
-
setSwitchState =
|
|
2482
|
-
var
|
|
2483
|
-
justUpdated =
|
|
2484
|
-
setJustUpdated =
|
|
2485
|
-
var
|
|
2486
|
-
innerSize =
|
|
2487
|
-
setInnerSize =
|
|
2531
|
+
var _useState2 = useState(initialPosition),
|
|
2532
|
+
position = _useState2[0],
|
|
2533
|
+
setPosition = _useState2[1];
|
|
2534
|
+
var _useState3 = useState(initialTheme),
|
|
2535
|
+
activeTheming = _useState3[0],
|
|
2536
|
+
setActiveTheming = _useState3[1];
|
|
2537
|
+
var _useState4 = useState('default'),
|
|
2538
|
+
switchState = _useState4[0],
|
|
2539
|
+
setSwitchState = _useState4[1];
|
|
2540
|
+
var _useState5 = useState(false),
|
|
2541
|
+
justUpdated = _useState5[0],
|
|
2542
|
+
setJustUpdated = _useState5[1];
|
|
2543
|
+
var _useState6 = useState(0),
|
|
2544
|
+
innerSize = _useState6[0],
|
|
2545
|
+
setInnerSize = _useState6[1];
|
|
2546
|
+
var updateSwitchPositionAndTheme = useCallback(function () {
|
|
2547
|
+
if (isControlled) {
|
|
2548
|
+
setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2549
|
+
setActiveTheming(checked ? rightTheme : leftTheme);
|
|
2550
|
+
} else if (inputRef.current) {
|
|
2551
|
+
inputRef.current.checked = internalChecked;
|
|
2552
|
+
setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2553
|
+
setActiveTheming(internalChecked ? rightTheme : leftTheme);
|
|
2554
|
+
}
|
|
2555
|
+
}, [checked, isControlled, internalChecked, leftTheme, rightTheme]);
|
|
2488
2556
|
useEffect(function () {
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
inputRef.current.checked = checked;
|
|
2492
|
-
}
|
|
2493
|
-
}, [checked]);
|
|
2557
|
+
updateSwitchPositionAndTheme();
|
|
2558
|
+
}, [updateSwitchPositionAndTheme]);
|
|
2494
2559
|
var positionSwitch = useCallback(function () {
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2560
|
+
if (isControlled) {
|
|
2561
|
+
setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2562
|
+
setActiveTheming(checked ? rightTheme : leftTheme);
|
|
2563
|
+
} else {
|
|
2564
|
+
setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
|
|
2565
|
+
setActiveTheming(internalChecked ? rightTheme : leftTheme);
|
|
2566
|
+
}
|
|
2567
|
+
}, [checked, isControlled, leftTheme, rightTheme, internalChecked]);
|
|
2568
|
+
var customOnChange = useCallback(function () {
|
|
2569
|
+
if (state === 'locked' || state === 'disabled') return;
|
|
2570
|
+
if (isControlled) {
|
|
2571
|
+
onChangeCallback === null || onChangeCallback === void 0 ? void 0 : onChangeCallback(!checked);
|
|
2572
|
+
} else {
|
|
2573
|
+
var newChecked = !internalChecked;
|
|
2574
|
+
setInternalChecked(newChecked);
|
|
2575
|
+
onChangeCallback === null || onChangeCallback === void 0 ? void 0 : onChangeCallback(newChecked);
|
|
2502
2576
|
}
|
|
2503
|
-
}, [setPosition, setActiveTheming, leftTheme, rightTheme, inputRef]);
|
|
2504
|
-
var customOnChange = function customOnChange() {
|
|
2505
2577
|
positionSwitch();
|
|
2506
|
-
|
|
2507
|
-
if (onChangeCallback) {
|
|
2508
|
-
var _inputRef$current3;
|
|
2509
|
-
onChangeCallback(((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.checked) || false);
|
|
2510
|
-
}
|
|
2511
|
-
};
|
|
2578
|
+
}, [isControlled, checked, internalChecked, onChangeCallback, state, positionSwitch]);
|
|
2512
2579
|
var updateThemeChoice = useCallback(function () {
|
|
2513
2580
|
if (position === SwitchPosition.On) {
|
|
2514
2581
|
setActiveTheming(rightTheme);
|
|
@@ -2548,7 +2615,7 @@ var Switch = function Switch(_ref11) {
|
|
|
2548
2615
|
useIntent: !justUpdated && (state === 'default' || state === 'failure'),
|
|
2549
2616
|
themeState: switchState,
|
|
2550
2617
|
position: position,
|
|
2551
|
-
checked: (_inputRef$
|
|
2618
|
+
checked: (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked
|
|
2552
2619
|
}, React__default.createElement(SwitchOuter, null, React__default.createElement(SwitchInner, {
|
|
2553
2620
|
position: getPositionKey(position),
|
|
2554
2621
|
ref: innerRef
|
|
@@ -2571,7 +2638,7 @@ var Switch = function Switch(_ref11) {
|
|
|
2571
2638
|
ref: inputRef,
|
|
2572
2639
|
type: 'checkbox',
|
|
2573
2640
|
disabled: state !== 'default' && state !== 'failure',
|
|
2574
|
-
defaultChecked: checked
|
|
2641
|
+
defaultChecked: !isControlled ? defaultChecked : checked
|
|
2575
2642
|
}));
|
|
2576
2643
|
};
|
|
2577
2644
|
var stateCheck = function stateCheck(state) {
|
|
@@ -2689,7 +2756,7 @@ function SvgNoImage() {
|
|
|
2689
2756
|
}));
|
|
2690
2757
|
}
|
|
2691
2758
|
|
|
2692
|
-
var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$
|
|
2759
|
+
var _templateObject$l, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$b, _templateObject6$7, _templateObject7$7, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$1;
|
|
2693
2760
|
var CheckboxState;
|
|
2694
2761
|
(function (CheckboxState) {
|
|
2695
2762
|
CheckboxState["Off"] = "off";
|
|
@@ -2710,7 +2777,7 @@ var Container$8 = styled.label(_templateObject5$b || (_templateObject5$b = _tagg
|
|
|
2710
2777
|
}, function (_ref3) {
|
|
2711
2778
|
var visualState = _ref3.visualState,
|
|
2712
2779
|
disabled = _ref3.disabled;
|
|
2713
|
-
return visualState === CheckboxState.On && css(_templateObject9$
|
|
2780
|
+
return visualState === CheckboxState.On && css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n /* Checked */ \n ", "{\n background-color: var(--input-toggle-checked-background-color);\n border-color: var(--input-toggle-checked-border-color);\n }\n /* Checked - Hover */\n ", ";\n\n /* Checked - Disabled */ \n ", "\n "])), CheckboxOuter, !disabled && css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n &:hover ", "{\n background-color: var(--input-toggle-checked-hover-background-color);\n border-color: var(--input-toggle-checked-hover-border-color);\n }"])), CheckboxOuter), disabled && css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n ", "{\n background-color: var(--input-toggle-checked-disabled-background-color);\n border-color: var(--input-toggle-checked-disabled-border-color);\n cursor: not-allowed;\n }\n ", "{\n opacity: 0.65;\n }\n "])), CheckboxOuter, IconWrapper$2));
|
|
2714
2781
|
}, function (_ref4) {
|
|
2715
2782
|
var visualState = _ref4.visualState,
|
|
2716
2783
|
disabled = _ref4.disabled;
|
|
@@ -2766,15 +2833,15 @@ var Checkbox = function Checkbox(_ref5) {
|
|
|
2766
2833
|
})), " ");
|
|
2767
2834
|
};
|
|
2768
2835
|
|
|
2769
|
-
var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$
|
|
2836
|
+
var _templateObject$m, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$c, _templateObject6$8, _templateObject7$8, _templateObject8$6, _templateObject9$6, _templateObject10$6;
|
|
2770
2837
|
var InnerRadio = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n user-select: none;\n"])));
|
|
2771
2838
|
var OuterRadio = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n user-select: none;\n\n ", ";\n"])), function (_ref) {
|
|
2772
2839
|
var isChecked = _ref.isChecked,
|
|
2773
2840
|
disabled = _ref.disabled;
|
|
2774
2841
|
return css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n border-color: var(--input-toggle-unchecked-border-color);\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n "])), !disabled && css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--input-toggle-unchecked-hover-border-color);\n }\n "]))), isChecked && !disabled && css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n border-color: var(--input-toggle-checked-border-color);\n ", " {\n background-color: var(--input-toggle-checked-background-color);\n }\n "])), InnerRadio), isChecked && !disabled && css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n &:hover {\n border-color: var(--input-toggle-checked-hover-border-color);\n ", " {\n background-color: var(--input-toggle-checked-hover-background-color);\n }\n }\n "])), InnerRadio), isChecked && disabled && css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-checked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-checked-disabled-background-color);\n }\n "])), InnerRadio), !isChecked && disabled && css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n border-color: var(--input-toggle-unchecked-disabled-border-color);\n ", " {\n background-color: var(--input-toggle-unchecked-disabled-background-color);\n }\n "])), InnerRadio));
|
|
2775
2842
|
});
|
|
2776
|
-
var HiddenInput = styled.input(_templateObject9$
|
|
2777
|
-
var Container$9 = styled.div(_templateObject10$
|
|
2843
|
+
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"])));
|
|
2844
|
+
var Container$9 = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n width: 18px;\n height: 18px;\n user-select: none;\n border-radius: 50%;\n"])));
|
|
2778
2845
|
var RadioButton = function RadioButton(_ref2) {
|
|
2779
2846
|
var id = _ref2.id,
|
|
2780
2847
|
value = _ref2.value,
|
|
@@ -2808,7 +2875,7 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2808
2875
|
};
|
|
2809
2876
|
|
|
2810
2877
|
var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
|
|
2811
|
-
var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$
|
|
2878
|
+
var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$7;
|
|
2812
2879
|
var FeedbackIcon$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n padding-top: 2px;\n"])));
|
|
2813
2880
|
var StyledTextArea = styled.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n\n color: var(--input-color-default);\n font-size: 14px;\n\n transition:\n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n &::placeholder {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), function (_ref) {
|
|
2814
2881
|
var fieldState = _ref.fieldState;
|
|
@@ -2819,7 +2886,7 @@ var FeedbackMessage$1 = styled.div(_templateObject5$d || (_templateObject5$d = _
|
|
|
2819
2886
|
var Container$a = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
|
|
2820
2887
|
var fieldState = _ref2.fieldState,
|
|
2821
2888
|
showFeedback = _ref2.showFeedback;
|
|
2822
|
-
return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject9$
|
|
2889
|
+
return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n display:none;\n "]))), FeedbackContainer$1, fieldState, fieldState);
|
|
2823
2890
|
});
|
|
2824
2891
|
var TextArea = function TextArea(_ref3) {
|
|
2825
2892
|
var _ref3$placeholder = _ref3.placeholder,
|
|
@@ -2874,7 +2941,7 @@ var TextArea = function TextArea(_ref3) {
|
|
|
2874
2941
|
};
|
|
2875
2942
|
|
|
2876
2943
|
var _excluded$8 = ["fieldState", "placeholder", "label", "icon", "isCompact", "defaultValue", "changeCallback", "children"];
|
|
2877
|
-
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$
|
|
2944
|
+
var _templateObject$o, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$e, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8;
|
|
2878
2945
|
var SelectWrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n width: 100%;\n"])));
|
|
2879
2946
|
var OpenIcon = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n right: ", ";\n pointer-events: none;\n"])), function (_ref) {
|
|
2880
2947
|
var isCompact = _ref.isCompact;
|
|
@@ -2894,7 +2961,7 @@ var StyledSelect = styled.select(_templateObject4$g || (_templateObject4$g = _ta
|
|
|
2894
2961
|
});
|
|
2895
2962
|
var Container$b = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n"])), function (_ref5) {
|
|
2896
2963
|
var activePlaceholder = _ref5.activePlaceholder;
|
|
2897
|
-
return activePlaceholder && css(_templateObject9$
|
|
2964
|
+
return activePlaceholder && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n ", " {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n font-weight: 400;\n }\n "])), StyledSelect);
|
|
2898
2965
|
});
|
|
2899
2966
|
var SelectField = function SelectField(_ref6) {
|
|
2900
2967
|
var _ref6$fieldState = _ref6.fieldState,
|
|
@@ -3040,9 +3107,21 @@ var areDatesEqual = function areDatesEqual(storedValue, currentDisplay) {
|
|
|
3040
3107
|
}
|
|
3041
3108
|
return false;
|
|
3042
3109
|
};
|
|
3110
|
+
var isDateInterval = function isDateInterval(value) {
|
|
3111
|
+
if (value === null || value === undefined) {
|
|
3112
|
+
return false;
|
|
3113
|
+
}
|
|
3114
|
+
if (value.start === null || value.start === undefined) {
|
|
3115
|
+
return false;
|
|
3116
|
+
}
|
|
3117
|
+
if (value.end === null || value.end === undefined) {
|
|
3118
|
+
return false;
|
|
3119
|
+
}
|
|
3120
|
+
return value.start instanceof Date && value.end instanceof Date;
|
|
3121
|
+
};
|
|
3043
3122
|
|
|
3044
3123
|
var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
|
|
3045
|
-
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$
|
|
3124
|
+
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$9, _templateObject10$7, _templateObject11$4, _templateObject12$3;
|
|
3046
3125
|
var ThumbDiameter = 16;
|
|
3047
3126
|
var SliderWrapper = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n position: relative;\n height: 30px;\n margin-top: 20px;\n ", ";\n"])), function (_ref) {
|
|
3048
3127
|
var theme = _ref.theme;
|
|
@@ -3071,10 +3150,10 @@ var MarkLabel = styled.span(_templateObject6$b || (_templateObject6$b = _taggedT
|
|
|
3071
3150
|
return alignment === 'right' && css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["transform: translateX(5%);"])));
|
|
3072
3151
|
}, function (_ref8) {
|
|
3073
3152
|
var alignment = _ref8.alignment;
|
|
3074
|
-
return alignment === 'left' && css(_templateObject9$
|
|
3153
|
+
return alignment === 'left' && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["transform: translateX(-95%);"])));
|
|
3075
3154
|
});
|
|
3076
|
-
var ThumbWrapper = styled.div(_templateObject10$
|
|
3077
|
-
var Thumb = styled.span(_templateObject11$
|
|
3155
|
+
var ThumbWrapper = styled.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-right: 16px;\n left: 0;\n top: 10px;\n width: calc(100% - ", "px);\n height: 2px;\n"])), ThumbDiameter);
|
|
3156
|
+
var Thumb = styled.span(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n width: ", "px;\n height: ", "px;\n border-radius: 8px;\n background-color: ", ";\n position: absolute;\n top: -7.5px;\n left: ", ";\n"])), ThumbDiameter, ThumbDiameter, function (_ref9) {
|
|
3078
3157
|
var theme = _ref9.theme,
|
|
3079
3158
|
bgColor = _ref9.bgColor;
|
|
3080
3159
|
return theme.colors.feedback[bgColor];
|
|
@@ -3846,7 +3925,7 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
|
|
|
3846
3925
|
return isDifferent;
|
|
3847
3926
|
};
|
|
3848
3927
|
|
|
3849
|
-
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$
|
|
3928
|
+
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$8, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
3850
3929
|
var CropLineStyle = css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
|
|
3851
3930
|
var TopLine = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
|
|
3852
3931
|
var RightLine = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
@@ -3857,11 +3936,11 @@ var PointN = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTempl
|
|
|
3857
3936
|
var isResizable = _ref.isResizable;
|
|
3858
3937
|
return isResizable && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
|
|
3859
3938
|
});
|
|
3860
|
-
var PointNW = styled.div(_templateObject9$
|
|
3939
|
+
var PointNW = styled.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n left: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref2) {
|
|
3861
3940
|
var isResizable = _ref2.isResizable;
|
|
3862
|
-
return isResizable && css(_templateObject10$
|
|
3941
|
+
return isResizable && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n cursor: nw-resize;\n "])));
|
|
3863
3942
|
});
|
|
3864
|
-
var PointNE = styled.div(_templateObject11$
|
|
3943
|
+
var PointNE = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n right: -5px;\n ", ";\n"])), resizeSquaresCss, function (_ref3) {
|
|
3865
3944
|
var isResizable = _ref3.isResizable;
|
|
3866
3945
|
return isResizable && css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n cursor: ne-resize;\n "])));
|
|
3867
3946
|
});
|
|
@@ -3923,7 +4002,7 @@ var CropArea = function CropArea(_ref9) {
|
|
|
3923
4002
|
})));
|
|
3924
4003
|
};
|
|
3925
4004
|
|
|
3926
|
-
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$
|
|
4005
|
+
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b;
|
|
3927
4006
|
var Container$g = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
|
|
3928
4007
|
var theme = _ref.theme;
|
|
3929
4008
|
return theme.fontFamily.ui;
|
|
@@ -3945,7 +4024,7 @@ var SelectedArea = styled.div(_templateObject8$b || (_templateObject8$b = _tagge
|
|
|
3945
4024
|
cropTop = _ref4.cropTop,
|
|
3946
4025
|
cropWidth = _ref4.cropWidth,
|
|
3947
4026
|
cropHeight = _ref4.cropHeight;
|
|
3948
|
-
return css(_templateObject9$
|
|
4027
|
+
return css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n "])), cropTop, cropLeft, cropWidth, cropHeight);
|
|
3949
4028
|
});
|
|
3950
4029
|
var viewDimensions = {
|
|
3951
4030
|
cropLeft: 0,
|
|
@@ -4209,7 +4288,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4209
4288
|
})))))), document.body);
|
|
4210
4289
|
};
|
|
4211
4290
|
|
|
4212
|
-
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$
|
|
4291
|
+
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c;
|
|
4213
4292
|
var CROP_HEIGHT_AREA = 500;
|
|
4214
4293
|
var CROP_WIDTH_AREA = 475;
|
|
4215
4294
|
var CANVAS_HEIGHT = 490;
|
|
@@ -4227,7 +4306,7 @@ var PreviewImage = styled.img(_templateObject5$j || (_templateObject5$j = _tagge
|
|
|
4227
4306
|
var PlaceholderText = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
|
|
4228
4307
|
var NoPhoto = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
|
|
4229
4308
|
var StyledInputFileButton = styled(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
4230
|
-
var ButtonsWrapper = styled.div(_templateObject9$
|
|
4309
|
+
var ButtonsWrapper = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
|
|
4231
4310
|
var AvatarUploader = function AvatarUploader(_ref2) {
|
|
4232
4311
|
var _ref2$title = _ref2.title,
|
|
4233
4312
|
title = _ref2$title === void 0 ? 'Photograph' : _ref2$title,
|
|
@@ -5673,7 +5752,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5673
5752
|
})))));
|
|
5674
5753
|
};
|
|
5675
5754
|
|
|
5676
|
-
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$
|
|
5755
|
+
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$d, _templateObject10$9, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
|
|
5677
5756
|
var initializeInterval = function initializeInterval(day) {
|
|
5678
5757
|
return {
|
|
5679
5758
|
start: set(day, {
|
|
@@ -5693,9 +5772,9 @@ var TimeZoneValue = styled.div(_templateObject5$p || (_templateObject5$p = _tagg
|
|
|
5693
5772
|
var CalendarArea = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
5694
5773
|
var CalendarHeader = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
|
|
5695
5774
|
var CurrentMonth = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n flex: 1;\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 20px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.5px;\n color: var(--primary-10);\n\n span {\n display: block;\n flex: 0;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.33px;\n }\n"])));
|
|
5696
|
-
var IconWrap$1 = styled.div(_templateObject9$
|
|
5697
|
-
var PaginateMonth = styled.button(_templateObject10$
|
|
5698
|
-
var CalBody = styled.div(_templateObject11$
|
|
5775
|
+
var IconWrap$1 = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5776
|
+
var PaginateMonth = styled.button(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 72px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n ", "{\n svg * {\n transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n }\n }\n\n &:hover:enabled {\n color: var(--grey-12);\n\n ", "{\n [stroke]{\n stroke: var(--grey-12);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n"])), IconWrap$1, IconWrap$1);
|
|
5777
|
+
var CalBody = styled.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5699
5778
|
var CalButtons = styled.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n padding: 4px;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-top: 1px solid var(--grey-6);\n"])));
|
|
5700
5779
|
var CalRightButtons = styled.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
5701
5780
|
var CalRow = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 40px);\n height: 40px;\n box-sizing: border-box;\n\n padding: 0 10px;\n"])));
|
|
@@ -5749,18 +5828,6 @@ var CalCellB = styled(CalCell)(_templateObject24 || (_templateObject24 = _tagged
|
|
|
5749
5828
|
});
|
|
5750
5829
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5751
5830
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
5752
|
-
var isDateInterval = function isDateInterval(value) {
|
|
5753
|
-
if (value === null || value === undefined) {
|
|
5754
|
-
return false;
|
|
5755
|
-
}
|
|
5756
|
-
if (value.start === null || value.start === undefined) {
|
|
5757
|
-
return false;
|
|
5758
|
-
}
|
|
5759
|
-
if (value.end === null || value.end === undefined) {
|
|
5760
|
-
return false;
|
|
5761
|
-
}
|
|
5762
|
-
return value.start instanceof Date && value.end instanceof Date;
|
|
5763
|
-
};
|
|
5764
5831
|
var DatePicker = function DatePicker(_ref15) {
|
|
5765
5832
|
var _ref15$dateMode = _ref15.dateMode,
|
|
5766
5833
|
dateMode = _ref15$dateMode === void 0 ? 'interval' : _ref15$dateMode,
|
|
@@ -6063,7 +6130,7 @@ var dayHasContent = function dayHasContent(currentDay, contentDays) {
|
|
|
6063
6130
|
|
|
6064
6131
|
var _excluded$n = ["children"];
|
|
6065
6132
|
var _templateObject$H, _templateObject2$A;
|
|
6066
|
-
var Container$p = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);\n background-color: var(--filter-dropdown-background-color-fallback);\n @supports( background-color: var(--filter-dropdown-background-color) ){\n background-color: var(--filter-dropdown-background-color);\n };\n\n backdrop-filter: blur(20px);\n border: var(--grey-6) 1px solid;\n border-radius: 3px;\n position: relative;\n display: inline-flex;\n overflow: visible;\n padding-top: 5px;\n\n &::before {\n content: '';\n background-color: var(--filter-dropdown-accent);\n border-radius: 3px 3px 0 0;\n box-shadow: 0px 5px 25px 0px var(--primary-a5);\n\n display: block;\n height: 5px;\n position: absolute;\n left: -1px;\n top: -1px;\n right: -1px;\n z-index: 1;\n }\n\n"])));
|
|
6133
|
+
var Container$p = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);\n background-color: var(--filter-dropdown-background-color-fallback);\n @supports( background-color: var(--filter-dropdown-background-color) ){\n background-color: var(--filter-dropdown-background-color);\n };\n\n backdrop-filter: blur(20px);\n border-right: 1px solid var(--grey-6);\n border-bottom: 1px solid var(--grey-6);\n border-left: 1px solid var(--grey-6);\n border-radius: 3px;\n position: relative;\n display: inline-flex;\n overflow: visible;\n padding-top: 5px;\n\n &::before {\n content: '';\n background-color: var(--filter-dropdown-accent);\n border-radius: 3px 3px 0 0;\n box-shadow: 0px 5px 25px 0px var(--primary-a5);\n\n display: block;\n height: 5px;\n position: absolute;\n left: -1px;\n top: -1px;\n right: -1px;\n z-index: 1;\n }\n\n"])));
|
|
6067
6134
|
var Inner = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n"])));
|
|
6068
6135
|
var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
6069
6136
|
var children = _ref.children,
|
|
@@ -6072,7 +6139,7 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
|
|
|
6072
6139
|
};
|
|
6073
6140
|
|
|
6074
6141
|
var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
|
|
6075
|
-
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$
|
|
6142
|
+
var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$t, _templateObject5$q, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$a;
|
|
6076
6143
|
var LeftIconWrapper$1 = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n ", ";\n padding: 0 6px;\n"])), function (_ref) {
|
|
6077
6144
|
var isSortAscending = _ref.isSortAscending;
|
|
6078
6145
|
return isSortAscending && css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
@@ -6099,8 +6166,8 @@ var StyledButton$4 = styled.button(_templateObject5$q || (_templateObject5$q = _
|
|
|
6099
6166
|
hasFlipArrow = _ref7.hasFlipArrow;
|
|
6100
6167
|
return isOpen && hasFlipArrow && css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-9);\n border: solid 1px var(--primary-9);\n color: var(--white-1);\n\n &, &:hover:enabled, &:active:enabled {\n color: var(--white-1);\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n }\n\n ", " ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n };\n "])), IconWrapper, FlipArrowContainer, IconWrapper);
|
|
6101
6168
|
});
|
|
6102
|
-
var InnerContainer$3 = styled.div(_templateObject9$
|
|
6103
|
-
var ButtonText = styled.div(_templateObject10$
|
|
6169
|
+
var InnerContainer$3 = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
6170
|
+
var ButtonText = styled.div(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose([""])));
|
|
6104
6171
|
var FilterButton = function FilterButton(_ref8) {
|
|
6105
6172
|
var icon = _ref8.icon,
|
|
6106
6173
|
_ref8$hasFlipArrow = _ref8.hasFlipArrow,
|
|
@@ -6137,7 +6204,7 @@ var FilterButton = function FilterButton(_ref8) {
|
|
|
6137
6204
|
};
|
|
6138
6205
|
|
|
6139
6206
|
var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
|
|
6140
|
-
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$
|
|
6207
|
+
var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$f, _templateObject10$b;
|
|
6141
6208
|
var Title$1 = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n display: block;\n color: var(--grey-12);\n font-size: 14px;\n font-weight: 500;\n user-select: none;\n pointer-events: none;\n white-space: nowrap;\n"])));
|
|
6142
6209
|
var FakeCheckbox = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n position: relative;\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border-width: 2px;\n border-style: solid;\n"])));
|
|
6143
6210
|
var FakeCheckboxInner = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n"])));
|
|
@@ -6147,7 +6214,7 @@ var FakeInnerRadio = styled.div(_templateObject6$m || (_templateObject6$m = _tag
|
|
|
6147
6214
|
var Container$q = styled.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n gap: 12px;\n\n ", ";\n"])), function (_ref) {
|
|
6148
6215
|
var selected = _ref.selected,
|
|
6149
6216
|
disabled = _ref.disabled;
|
|
6150
|
-
return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n ", ", ", " {\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-unchecked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-unchecked-background-color);\n }\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-out);\n }\n \n "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && css(_templateObject9$
|
|
6217
|
+
return css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n \n ", ", ", " {\n border-color: var(--input-toggle-unchecked-border-color);\n }\n\n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-unchecked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-unchecked-background-color);\n }\n }\n }\n\n ", ";\n\n ", ";\n\n ", ", ", " {\n transition: border-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", " {\n transition: background-color var(--speed-faster) var(--easing-primary-out);\n }\n\n ", "{\n transition: color var(--speed-faster) var(--easing-primary-out);\n }\n \n "])), FakeCheckbox, FakeRadioButton, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, selected && css(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n ", " {\n color: var(--input-label-active);\n font-weight: 600;\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-checked-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-checked-background-color);\n }\n }\n \n &:hover {\n cursor: pointer;\n ", " {\n color: var(--input-label-hover);\n }\n\n ", ", ", " {\n border-color: var(--input-toggle-checked-hover-border-color);\n ", ", ", " {\n background-color: var(--input-toggle-checked-hover-background-color);\n }\n }\n }\n \n\n "])), Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner, Title$1, FakeCheckbox, FakeRadioButton, FakeInnerRadio, FakeCheckboxInner), disabled && css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))), FakeCheckbox, FakeRadioButton, FakeInnerRadio, Title$1);
|
|
6151
6218
|
});
|
|
6152
6219
|
var FilterOption = function FilterOption(_ref2) {
|
|
6153
6220
|
var title = _ref2.title,
|
|
@@ -6181,10 +6248,10 @@ var Container$r = styled.div(_templateObject2$D || (_templateObject2$D = _tagged
|
|
|
6181
6248
|
disabled = _ref.disabled,
|
|
6182
6249
|
noBackground = _ref.noBackground,
|
|
6183
6250
|
width = _ref.width;
|
|
6184
|
-
return css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n\n transition: all var(--speed-normal) var(--easing-primary-in);\n gap: 6px;\n height: var(--input-compact-height);\n padding: 0;\n align-items: center;\n display: flex;\n border-radius: 3px;\n\n ", ";\n\n ", ";\n\n ", ";\n\n background-color: ", ";\n\n &:focus-within {\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 9px 0px ", ";\n }\n\n "])), hasBorder && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n padding: 0 8px;\n border: 1px solid var(--filter-button-stroke-color);\n box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n &:hover {\n border: var(--primary-7) 1px solid;\n box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n }\n ", "{\n padding: 0;\n }\n "])), IconContainer$1), disabled && css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
|
|
6251
|
+
return css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n\n transition: all var(--speed-normal) var(--easing-primary-in);\n gap: var(--search-input-container-gap, 6px);\n height: var(--input-compact-height);\n padding: 0;\n align-items: center;\n display: flex;\n border-radius: 3px;\n\n ", ";\n\n ", ";\n\n ", ";\n\n background-color: ", ";\n\n &:focus-within {\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 9px 0px ", ";\n }\n\n "])), hasBorder && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n padding: 0 8px;\n border: 1px solid var(--filter-button-stroke-color);\n box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n &:hover {\n border: var(--primary-7) 1px solid;\n box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n }\n ", "{\n padding: 0;\n }\n "])), IconContainer$1), disabled && css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
|
|
6185
6252
|
}, IconWrapper);
|
|
6186
6253
|
var CrossButton = styled.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n ", ";\n flex-shrink: 0;\n flex-grow: 0;\n flex-basis: auto;\n width: 26px;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), resetButtonStyles, IconWrapper);
|
|
6187
|
-
var StyledInput$2 = styled.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n color: var(--grey-12);\n\n &::placeholder {\n ", ";\n color: var(--grey-11);\n font-style: italic;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n\n &:disabled {\n cursor: not-allowed;\n }\n\n
|
|
6254
|
+
var StyledInput$2 = styled.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--search-input-font-family,var(--font-ui));\n font-size: var(--search-input-font-size, 12px);\n font-weight: 500;\n color: var(--grey-12);\n\n &::placeholder {\n ", ";\n color: var(--grey-11);\n font-style: italic;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n\n &:disabled {\n cursor: not-allowed;\n }\n\n border: none;\n height: 100%;\n width: 100%;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 3px;\n outline: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
|
|
6188
6255
|
var color = _ref2.color;
|
|
6189
6256
|
return color && "color: var(--" + color + ")";
|
|
6190
6257
|
});
|
|
@@ -6329,7 +6396,7 @@ var FilterDropHandler = forwardRef(function (_ref3, imperativeRef) {
|
|
|
6329
6396
|
});
|
|
6330
6397
|
});
|
|
6331
6398
|
}, [onToggleOpenCallback, openState.isOpen]);
|
|
6332
|
-
var
|
|
6399
|
+
var handleImperativeClose = useCallback(function () {
|
|
6333
6400
|
setOpenState(function (prev) {
|
|
6334
6401
|
var isOpen = false;
|
|
6335
6402
|
return _extends({}, prev, {
|
|
@@ -6339,7 +6406,7 @@ var FilterDropHandler = forwardRef(function (_ref3, imperativeRef) {
|
|
|
6339
6406
|
}, []);
|
|
6340
6407
|
useImperativeHandle(imperativeRef, function () {
|
|
6341
6408
|
return {
|
|
6342
|
-
|
|
6409
|
+
imperativeClose: handleImperativeClose
|
|
6343
6410
|
};
|
|
6344
6411
|
});
|
|
6345
6412
|
return React__default.createElement(Container$s, Object.assign({
|
|
@@ -6376,19 +6443,64 @@ var LoadingBox = function LoadingBox(_ref) {
|
|
|
6376
6443
|
}), React__default.createElement(LoadingText, null, loadingText));
|
|
6377
6444
|
};
|
|
6378
6445
|
|
|
6379
|
-
var
|
|
6380
|
-
var _templateObject$N
|
|
6381
|
-
var
|
|
6382
|
-
var
|
|
6383
|
-
var
|
|
6446
|
+
var _templateObject$N, _templateObject2$G, _templateObject3$B;
|
|
6447
|
+
var FooterContainer = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: flex;\n padding: 8px;\n justify-content: space-between;\n align-items: flex-start;\n border-top: 1px solid var(--grey-6);\n background: var(--grey-a2);\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);\n"])));
|
|
6448
|
+
var FooterLeftSection = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
6449
|
+
var FooterRightSection = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6450
|
+
var FooterControls = function FooterControls(_ref) {
|
|
6451
|
+
var _ref$resetText = _ref.resetText,
|
|
6452
|
+
resetText = _ref$resetText === void 0 ? 'Reset' : _ref$resetText,
|
|
6453
|
+
_ref$cancelText = _ref.cancelText,
|
|
6454
|
+
cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
|
|
6455
|
+
_ref$closeText = _ref.closeText,
|
|
6456
|
+
closeText = _ref$closeText === void 0 ? 'Close' : _ref$closeText,
|
|
6457
|
+
_ref$applyText = _ref.applyText,
|
|
6458
|
+
applyText = _ref$applyText === void 0 ? 'Apply' : _ref$applyText,
|
|
6459
|
+
_ref$hasReset = _ref.hasReset,
|
|
6460
|
+
hasReset = _ref$hasReset === void 0 ? false : _ref$hasReset,
|
|
6461
|
+
_ref$hasApply = _ref.hasApply,
|
|
6462
|
+
hasApply = _ref$hasApply === void 0 ? false : _ref$hasApply,
|
|
6463
|
+
_ref$disableApply = _ref.disableApply,
|
|
6464
|
+
disableApply = _ref$disableApply === void 0 ? false : _ref$disableApply,
|
|
6465
|
+
_ref$disableReset = _ref.disableReset,
|
|
6466
|
+
disableReset = _ref$disableReset === void 0 ? true : _ref$disableReset,
|
|
6467
|
+
_ref$onReset = _ref.onReset,
|
|
6468
|
+
onReset = _ref$onReset === void 0 ? function () {} : _ref$onReset,
|
|
6469
|
+
_ref$onCancel = _ref.onCancel,
|
|
6470
|
+
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
|
|
6471
|
+
_ref$onApply = _ref.onApply,
|
|
6472
|
+
onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply;
|
|
6473
|
+
return React__default.createElement(FooterContainer, null, React__default.createElement(FooterLeftSection, null, hasReset && React__default.createElement(Button, {
|
|
6474
|
+
size: 'small',
|
|
6475
|
+
design: "text-only",
|
|
6476
|
+
disabled: disableReset,
|
|
6477
|
+
onClick: onReset
|
|
6478
|
+
}, resetText)), hasApply && React__default.createElement(FooterRightSection, null, React__default.createElement(Button, {
|
|
6479
|
+
size: 'small',
|
|
6480
|
+
design: 'secondary',
|
|
6481
|
+
onClick: onCancel
|
|
6482
|
+
}, disableApply ? closeText : cancelText), React__default.createElement(Button, {
|
|
6483
|
+
size: 'small',
|
|
6484
|
+
onClick: onApply,
|
|
6485
|
+
disabled: disableApply
|
|
6486
|
+
}, applyText)));
|
|
6487
|
+
};
|
|
6488
|
+
|
|
6489
|
+
var _excluded$s = ["buttonIcon", "buttonText", "list", "selected", "disabled", "isLoading", "loadingText", "optionType", "hasOptionsFilter", "searchPlaceholder", "maxDisplayedItems", "searchResultText", "emptyResultText", "design", "resetText", "cancelText", "closeText", "applyText", "hasReset", "hasApply", "descendingText", "ascendingText", "isListAscending", "onSelect", "onResetCallback", "onCancelCallback"];
|
|
6490
|
+
var _templateObject$O, _templateObject2$H, _templateObject3$C, _templateObject4$x, _templateObject5$t, _templateObject6$o, _templateObject7$n, _templateObject8$k, _templateObject9$g, _templateObject10$c;
|
|
6491
|
+
var Container$u = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6492
|
+
var StyledFilterOption = styled(FilterOption)(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
|
|
6493
|
+
var OptionList = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n max-height: ", ";\n min-height: 40px;\n position: relative;\n overflow-y: auto;\n padding: 8px 0;\n\n ", " {\n height: 40px;\n padding-left: 16px;\n }\n"])), function (_ref) {
|
|
6384
6494
|
var moreItem = _ref.moreItem;
|
|
6385
6495
|
return moreItem ? '228px' : '196px';
|
|
6386
6496
|
}, StyledFilterOption);
|
|
6387
|
-
var ResultsContainer = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n min-width:
|
|
6388
|
-
var
|
|
6389
|
-
var
|
|
6390
|
-
var
|
|
6391
|
-
var
|
|
6497
|
+
var ResultsContainer = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n min-width: 252px;\n"])));
|
|
6498
|
+
var SortingButtonWrapper = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 24px;\n padding: 0px 8px;\n align-items: center;\n justify-content: left;\n gap: 8px;\n border-left: 1px solid var(--grey-6);\n width: auto;\n"])));
|
|
6499
|
+
var FilterResultsToolbar = styled.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 24px;\n padding-left: 16px;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n border-top: 1px solid var(--grey-5);\n border-bottom: 1px solid var(--grey-5);\n"])));
|
|
6500
|
+
var ResultCounter = styled.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n color: var(--grey-11);\n font-size: 12px;\n text-align: center;\n white-space: nowrap;\n &:lang(ja) {\n font-style: normal;\n }\n line-height: 12px;\n"])));
|
|
6501
|
+
var SearchWrapper = styled.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n --search-input-font-size: 14px;\n --search-input-font-family: var(--font-data);\n --search-input-container-gap: 10px;\n height: 40px;\n display: flex;\n align-items: center;\n padding: 4px 4px 4px 14px;\n"])));
|
|
6502
|
+
var EmptyResultText = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n display: block;\n height: 24px;\n color: var(--grey-11);\n font-weight: 700;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n height: inherit;\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
|
|
6503
|
+
var OptionListGradient = styled.div(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0px;\n height: 15px;\n background-image: linear-gradient(to bottom, transparent, var(--grey-3));\n width: 99%;\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n"])));
|
|
6392
6504
|
var isValueSelected = function isValueSelected(item, selected) {
|
|
6393
6505
|
var isItemSelected = false;
|
|
6394
6506
|
if (Array.isArray(selected)) {
|
|
@@ -6426,58 +6538,53 @@ var getNewSelected = function getNewSelected(item, selected, optionType) {
|
|
|
6426
6538
|
}
|
|
6427
6539
|
return item;
|
|
6428
6540
|
};
|
|
6429
|
-
var
|
|
6430
|
-
if (
|
|
6431
|
-
return
|
|
6541
|
+
var sortList = function sortList(unSortedList, isSortAscending) {
|
|
6542
|
+
if (unSortedList.length <= 1) {
|
|
6543
|
+
return unSortedList;
|
|
6432
6544
|
}
|
|
6433
|
-
|
|
6434
|
-
|
|
6545
|
+
var sorted = [].concat(unSortedList);
|
|
6546
|
+
var lang = document.documentElement.lang || 'en';
|
|
6547
|
+
sorted.sort(function (a, b) {
|
|
6548
|
+
var diff = a.text.localeCompare(b.text, lang);
|
|
6549
|
+
return isSortAscending ? diff : -diff;
|
|
6550
|
+
});
|
|
6551
|
+
return sorted;
|
|
6552
|
+
};
|
|
6553
|
+
var selectedOrderList = function selectedOrderList(list, maxItems, selected, isSortAscending) {
|
|
6554
|
+
if (list.length <= maxItems || selected === null) {
|
|
6555
|
+
return sortList(list, isSortAscending);
|
|
6435
6556
|
}
|
|
6436
6557
|
if (isFilterItem(selected)) {
|
|
6437
6558
|
var index = list.findIndex(function (item) {
|
|
6438
6559
|
return item.value === selected.value;
|
|
6439
6560
|
});
|
|
6440
|
-
if (index === -1) {
|
|
6441
|
-
return list;
|
|
6442
|
-
}
|
|
6443
|
-
if (index !== -1 && index < maxItems) {
|
|
6444
|
-
return list;
|
|
6561
|
+
if (index === -1 || index < maxItems) {
|
|
6562
|
+
return sortList(list, isSortAscending);
|
|
6445
6563
|
}
|
|
6446
6564
|
var newList = list.filter(function (item) {
|
|
6447
6565
|
return item.value !== selected.value;
|
|
6448
6566
|
});
|
|
6449
|
-
newList
|
|
6450
|
-
|
|
6567
|
+
var orderedList = sortList(newList, isSortAscending);
|
|
6568
|
+
orderedList.unshift(list[index]);
|
|
6569
|
+
return orderedList;
|
|
6451
6570
|
}
|
|
6452
6571
|
if (Array.isArray(selected)) {
|
|
6453
|
-
var
|
|
6454
|
-
|
|
6455
|
-
|
|
6456
|
-
|
|
6457
|
-
|
|
6458
|
-
|
|
6459
|
-
var
|
|
6460
|
-
|
|
6461
|
-
|
|
6462
|
-
|
|
6463
|
-
|
|
6464
|
-
}
|
|
6465
|
-
if (foundItem) {
|
|
6466
|
-
_newList.push(foundItem);
|
|
6467
|
-
}
|
|
6468
|
-
});
|
|
6469
|
-
selectedIndexList.sort(function (a, b) {
|
|
6470
|
-
return a - b;
|
|
6471
|
-
});
|
|
6472
|
-
var selectedIndex = 0;
|
|
6473
|
-
list.forEach(function (item, index) {
|
|
6474
|
-
if (index === selectedIndexList[selectedIndex]) {
|
|
6475
|
-
selectedIndex++;
|
|
6476
|
-
return;
|
|
6572
|
+
var selectedValues = new Set(selected.map(function (item) {
|
|
6573
|
+
return item.value;
|
|
6574
|
+
}));
|
|
6575
|
+
var selectedItems = [];
|
|
6576
|
+
var unselectedItems = [];
|
|
6577
|
+
for (var _iterator = _createForOfIteratorHelperLoose(list), _step; !(_step = _iterator()).done;) {
|
|
6578
|
+
var item = _step.value;
|
|
6579
|
+
if (selectedValues.has(item.value)) {
|
|
6580
|
+
selectedItems.push(item);
|
|
6581
|
+
} else {
|
|
6582
|
+
unselectedItems.push(item);
|
|
6477
6583
|
}
|
|
6478
|
-
|
|
6479
|
-
|
|
6480
|
-
|
|
6584
|
+
}
|
|
6585
|
+
var orderedSelected = sortList(selectedItems, isSortAscending);
|
|
6586
|
+
var unSelectedItems = sortList(unselectedItems, isSortAscending);
|
|
6587
|
+
return [].concat(orderedSelected, unSelectedItems);
|
|
6481
6588
|
}
|
|
6482
6589
|
return list;
|
|
6483
6590
|
};
|
|
@@ -6491,6 +6598,28 @@ var getResultText = function getResultText(template, visible, total) {
|
|
|
6491
6598
|
var newMessage = template.replace('[TOTAL]', "" + total);
|
|
6492
6599
|
return newMessage.replace('[VISIBLE]', "" + visible);
|
|
6493
6600
|
};
|
|
6601
|
+
var areSelectionsEqual = function areSelectionsEqual(tempSelected, selected) {
|
|
6602
|
+
if (tempSelected === null && selected === null) {
|
|
6603
|
+
return true;
|
|
6604
|
+
}
|
|
6605
|
+
if (tempSelected === null || selected === null) {
|
|
6606
|
+
return false;
|
|
6607
|
+
}
|
|
6608
|
+
if (Array.isArray(tempSelected) && Array.isArray(selected)) {
|
|
6609
|
+
if (tempSelected.length !== selected.length) {
|
|
6610
|
+
return false;
|
|
6611
|
+
}
|
|
6612
|
+
return tempSelected.every(function (tempItem) {
|
|
6613
|
+
return selected.some(function (selectedItem) {
|
|
6614
|
+
return selectedItem.value === tempItem.value;
|
|
6615
|
+
});
|
|
6616
|
+
});
|
|
6617
|
+
}
|
|
6618
|
+
if (Array.isArray(tempSelected) || Array.isArray(selected)) {
|
|
6619
|
+
return false;
|
|
6620
|
+
}
|
|
6621
|
+
return tempSelected.value === selected.value;
|
|
6622
|
+
};
|
|
6494
6623
|
var FilterDropdown = function FilterDropdown(_ref2) {
|
|
6495
6624
|
var buttonIcon = _ref2.buttonIcon,
|
|
6496
6625
|
buttonText = _ref2.buttonText,
|
|
@@ -6513,56 +6642,121 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6513
6642
|
emptyResultText = _ref2.emptyResultText,
|
|
6514
6643
|
_ref2$design = _ref2.design,
|
|
6515
6644
|
design = _ref2$design === void 0 ? 'default' : _ref2$design,
|
|
6645
|
+
resetText = _ref2.resetText,
|
|
6646
|
+
cancelText = _ref2.cancelText,
|
|
6647
|
+
closeText = _ref2.closeText,
|
|
6648
|
+
applyText = _ref2.applyText,
|
|
6649
|
+
hasReset = _ref2.hasReset,
|
|
6650
|
+
hasApply = _ref2.hasApply,
|
|
6651
|
+
_ref2$descendingText = _ref2.descendingText,
|
|
6652
|
+
descendingText = _ref2$descendingText === void 0 ? 'Descending' : _ref2$descendingText,
|
|
6653
|
+
_ref2$ascendingText = _ref2.ascendingText,
|
|
6654
|
+
ascendingText = _ref2$ascendingText === void 0 ? 'Ascending' : _ref2$ascendingText,
|
|
6655
|
+
_ref2$isListAscending = _ref2.isListAscending,
|
|
6656
|
+
isListAscending = _ref2$isListAscending === void 0 ? true : _ref2$isListAscending,
|
|
6516
6657
|
_ref2$onSelect = _ref2.onSelect,
|
|
6517
6658
|
onSelect = _ref2$onSelect === void 0 ? function () {} : _ref2$onSelect,
|
|
6659
|
+
_ref2$onResetCallback = _ref2.onResetCallback,
|
|
6660
|
+
onResetCallback = _ref2$onResetCallback === void 0 ? function () {} : _ref2$onResetCallback,
|
|
6661
|
+
_ref2$onCancelCallbac = _ref2.onCancelCallback,
|
|
6662
|
+
onCancelCallback = _ref2$onCancelCallbac === void 0 ? function () {} : _ref2$onCancelCallbac,
|
|
6518
6663
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
|
|
6519
|
-
var _useState = useState(
|
|
6520
|
-
|
|
6521
|
-
|
|
6522
|
-
var _useState2 = useState(
|
|
6523
|
-
|
|
6524
|
-
|
|
6664
|
+
var _useState = useState(isListAscending),
|
|
6665
|
+
isSortAscending = _useState[0],
|
|
6666
|
+
setIsSortAscending = _useState[1];
|
|
6667
|
+
var _useState2 = useState(selectedOrderList(list, maxDisplayedItems, selected, isSortAscending)),
|
|
6668
|
+
visibleList = _useState2[0],
|
|
6669
|
+
setVisibleList = _useState2[1];
|
|
6670
|
+
var _useState3 = useState(''),
|
|
6671
|
+
searchText = _useState3[0],
|
|
6672
|
+
setSearchText = _useState3[1];
|
|
6673
|
+
var _useState4 = useState(selected),
|
|
6674
|
+
tempSelected = _useState4[0],
|
|
6675
|
+
setTempSelected = _useState4[1];
|
|
6676
|
+
var dropdownHandlerRef = useRef(null);
|
|
6525
6677
|
var handleClose = useCallback(function () {
|
|
6526
|
-
|
|
6527
|
-
|
|
6528
|
-
}, [list, maxDisplayedItems, selected]);
|
|
6678
|
+
setVisibleList(selectedOrderList(list, maxDisplayedItems, tempSelected, isSortAscending));
|
|
6679
|
+
}, [isSortAscending, list, maxDisplayedItems, tempSelected]);
|
|
6529
6680
|
var handleToggleOpen = useCallback(function () {
|
|
6530
6681
|
setSearchText('');
|
|
6531
|
-
|
|
6532
|
-
|
|
6682
|
+
setTempSelected(selected);
|
|
6683
|
+
setIsSortAscending(isListAscending);
|
|
6684
|
+
setVisibleList(selectedOrderList(list, maxDisplayedItems, selected, isListAscending));
|
|
6685
|
+
}, [isListAscending, list, maxDisplayedItems, selected]);
|
|
6533
6686
|
var handleSelection = useCallback(function (item) {
|
|
6534
|
-
var newSelected = getNewSelected(item,
|
|
6535
|
-
|
|
6536
|
-
|
|
6687
|
+
var newSelected = getNewSelected(item, tempSelected, optionType);
|
|
6688
|
+
if (!hasApply) {
|
|
6689
|
+
onSelect(newSelected);
|
|
6690
|
+
}
|
|
6691
|
+
setTempSelected(newSelected);
|
|
6692
|
+
setVisibleList(selectedOrderList(list, maxDisplayedItems, newSelected, isSortAscending));
|
|
6693
|
+
setSearchText('');
|
|
6694
|
+
}, [tempSelected, optionType, hasApply, list, maxDisplayedItems, isSortAscending, onSelect]);
|
|
6537
6695
|
var handleInputFilter = useCallback(function (e) {
|
|
6538
6696
|
var value = e.target.value;
|
|
6539
6697
|
setSearchText(value);
|
|
6540
6698
|
if (value === '') {
|
|
6541
|
-
setVisibleList(selectedOrderList(list, maxDisplayedItems,
|
|
6699
|
+
setVisibleList(selectedOrderList(list, maxDisplayedItems, tempSelected, isSortAscending));
|
|
6542
6700
|
return;
|
|
6543
6701
|
}
|
|
6544
6702
|
var newValue = typeof value === 'number' ? value.toString(10) : value;
|
|
6545
6703
|
var newList = getFilteredList(list, newValue);
|
|
6546
|
-
setVisibleList(selectedOrderList(newList, maxDisplayedItems, null));
|
|
6547
|
-
}, [list, maxDisplayedItems,
|
|
6704
|
+
setVisibleList(selectedOrderList(newList, maxDisplayedItems, null, isSortAscending));
|
|
6705
|
+
}, [isSortAscending, list, maxDisplayedItems, tempSelected]);
|
|
6706
|
+
var handleCancel = useCallback(function () {
|
|
6707
|
+
var _dropdownHandlerRef$c;
|
|
6708
|
+
setTempSelected(selected);
|
|
6709
|
+
onCancelCallback();
|
|
6710
|
+
(_dropdownHandlerRef$c = dropdownHandlerRef.current) === null || _dropdownHandlerRef$c === void 0 ? void 0 : _dropdownHandlerRef$c.imperativeClose();
|
|
6711
|
+
}, [onCancelCallback, selected]);
|
|
6712
|
+
var handleApply = useCallback(function () {
|
|
6713
|
+
var _dropdownHandlerRef$c2;
|
|
6714
|
+
onSelect(tempSelected);
|
|
6715
|
+
(_dropdownHandlerRef$c2 = dropdownHandlerRef.current) === null || _dropdownHandlerRef$c2 === void 0 ? void 0 : _dropdownHandlerRef$c2.imperativeClose();
|
|
6716
|
+
}, [onSelect, tempSelected]);
|
|
6717
|
+
var handleReset = useCallback(function () {
|
|
6718
|
+
if (!hasApply) {
|
|
6719
|
+
onSelect(null);
|
|
6720
|
+
}
|
|
6721
|
+
setSearchText('');
|
|
6722
|
+
setVisibleList(selectedOrderList(list, maxDisplayedItems, null, isListAscending));
|
|
6723
|
+
setTempSelected(null);
|
|
6724
|
+
setIsSortAscending(isListAscending);
|
|
6725
|
+
onResetCallback();
|
|
6726
|
+
}, [hasApply, list, maxDisplayedItems, isListAscending, onResetCallback, onSelect]);
|
|
6727
|
+
var handleSort = useCallback(function () {
|
|
6728
|
+
setIsSortAscending(function (prev) {
|
|
6729
|
+
setVisibleList(selectedOrderList(list, maxDisplayedItems, tempSelected, !prev));
|
|
6730
|
+
return !prev;
|
|
6731
|
+
});
|
|
6732
|
+
}, [list, maxDisplayedItems, tempSelected]);
|
|
6548
6733
|
useEffect(function () {
|
|
6549
6734
|
var isActive = true;
|
|
6550
6735
|
if (isActive) {
|
|
6551
6736
|
setSearchText('');
|
|
6552
|
-
setVisibleList(selectedOrderList(list, maxDisplayedItems,
|
|
6737
|
+
setVisibleList(selectedOrderList(list, maxDisplayedItems, tempSelected, isSortAscending));
|
|
6553
6738
|
}
|
|
6554
6739
|
return function () {
|
|
6555
6740
|
isActive = false;
|
|
6556
6741
|
};
|
|
6557
|
-
}, [list, maxDisplayedItems,
|
|
6558
|
-
|
|
6742
|
+
}, [isSortAscending, list, maxDisplayedItems, tempSelected]);
|
|
6743
|
+
useEffect(function () {
|
|
6744
|
+
setTempSelected(selected);
|
|
6745
|
+
}, [selected]);
|
|
6746
|
+
var noChangeInSelection = useMemo(function () {
|
|
6747
|
+
return areSelectionsEqual(tempSelected, selected);
|
|
6748
|
+
}, [selected, tempSelected]);
|
|
6749
|
+
return React__default.createElement(Container$u, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({
|
|
6750
|
+
ref: dropdownHandlerRef
|
|
6751
|
+
}, {
|
|
6559
6752
|
buttonIcon: buttonIcon,
|
|
6560
6753
|
buttonText: buttonText,
|
|
6561
6754
|
disabled: disabled,
|
|
6562
6755
|
design: design
|
|
6563
6756
|
}, {
|
|
6564
6757
|
onCloseCallback: handleClose,
|
|
6565
|
-
onToggleOpenCallback: handleToggleOpen
|
|
6758
|
+
onToggleOpenCallback: handleToggleOpen,
|
|
6759
|
+
noCloseOnClickOutside: hasApply
|
|
6566
6760
|
}), React__default.createElement(FilterDropdownContainer, null, hasOptionsFilter && React__default.createElement(SearchWrapper, null, React__default.createElement(BasicSearchInput, {
|
|
6567
6761
|
type: 'text',
|
|
6568
6762
|
hasBorder: false,
|
|
@@ -6574,7 +6768,14 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6574
6768
|
noBackground: true
|
|
6575
6769
|
})), isLoading || !list ? React__default.createElement(LoadingBox, Object.assign({}, {
|
|
6576
6770
|
loadingText: loadingText
|
|
6577
|
-
})) : React__default.createElement(ResultsContainer, null, hasOptionsFilter && React__default.createElement(ResultCounter, null, getResultText(searchResultText, visibleList.length, list.length)), React__default.createElement(
|
|
6771
|
+
})) : React__default.createElement(ResultsContainer, null, hasOptionsFilter && React__default.createElement(FilterResultsToolbar, null, React__default.createElement(ResultCounter, null, getResultText(searchResultText, visibleList.length, list.length)), React__default.createElement(SortingButtonWrapper, null, React__default.createElement(ButtonWithIcon, {
|
|
6772
|
+
design: 'text-only',
|
|
6773
|
+
position: 'left',
|
|
6774
|
+
size: 'xsmall',
|
|
6775
|
+
weight: 'light',
|
|
6776
|
+
onClick: handleSort,
|
|
6777
|
+
icon: isSortAscending ? 'FilterAscending' : 'FilterDescending'
|
|
6778
|
+
}, isSortAscending ? ascendingText : descendingText))), React__default.createElement(OptionList, {
|
|
6578
6779
|
moreItem: list.length > 5
|
|
6579
6780
|
}, visibleList.length > 0 ? visibleList.map(function (item, index) {
|
|
6580
6781
|
var value = item.value;
|
|
@@ -6585,19 +6786,32 @@ var FilterDropdown = function FilterDropdown(_ref2) {
|
|
|
6585
6786
|
onClick: function onClick() {
|
|
6586
6787
|
return handleSelection(item);
|
|
6587
6788
|
},
|
|
6588
|
-
selected: isValueSelected(item,
|
|
6789
|
+
selected: isValueSelected(item, tempSelected)
|
|
6589
6790
|
}, {
|
|
6590
6791
|
optionType: optionType,
|
|
6591
6792
|
value: value
|
|
6592
6793
|
}));
|
|
6593
|
-
}) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(
|
|
6794
|
+
}) : React__default.createElement(EmptyResultText, null, emptyResultText)), list.length > 5 && React__default.createElement(OptionListGradient, null)), (hasApply || hasReset) && React__default.createElement(FooterControls, Object.assign({}, {
|
|
6795
|
+
hasApply: hasApply,
|
|
6796
|
+
hasReset: hasReset,
|
|
6797
|
+
resetText: resetText,
|
|
6798
|
+
cancelText: cancelText,
|
|
6799
|
+
closeText: closeText,
|
|
6800
|
+
applyText: applyText
|
|
6801
|
+
}, {
|
|
6802
|
+
onCancel: handleCancel,
|
|
6803
|
+
onApply: handleApply,
|
|
6804
|
+
disableApply: noChangeInSelection,
|
|
6805
|
+
onReset: handleReset,
|
|
6806
|
+
disableReset: tempSelected === null && isSortAscending === isListAscending && searchText === ''
|
|
6807
|
+
})))));
|
|
6594
6808
|
};
|
|
6595
6809
|
|
|
6596
6810
|
var _excluded$t = ["buttonText", "disabled", "list", "isLoading", "loadingText", "isSortAscending", "selected", "descendingText", "ascendingText", "design", "onSelect"];
|
|
6597
|
-
var _templateObject$
|
|
6598
|
-
var Container$v = styled.div(_templateObject$
|
|
6599
|
-
var StyledFilterOption$1 = styled(FilterOption)(_templateObject2$
|
|
6600
|
-
var OptionList$1 = styled.div(_templateObject3$
|
|
6811
|
+
var _templateObject$P, _templateObject2$I, _templateObject3$D, _templateObject4$y, _templateObject5$u, _templateObject6$p, _templateObject7$o;
|
|
6812
|
+
var Container$v = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6813
|
+
var StyledFilterOption$1 = styled(FilterOption)(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n letter-spacing: 0.2px;\n"])));
|
|
6814
|
+
var OptionList$1 = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n padding: 8px 0;\n ", " {\n height: 40px;\n padding: 16px;\n }\n"])), StyledFilterOption$1);
|
|
6601
6815
|
var OrderGroup = styled.div(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n display: flex;\n border-top: var(--grey-6) 1px solid;\n margin-top: 5px;\n\n button:first-child {\n border-right: var(--grey-6) 1px solid;\n }\n"])));
|
|
6602
6816
|
var OrderButton = styled.button(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n ", ";\n width: 100%;\n display: flex;\n align-items: center;\n font-family: var(--font-data);\n color: var(--grey-12);\n font-size: 14px;\n height: 40px;\n padding: 0 16px;\n gap: 12px;\n\n ", "\n"])), resetButtonStyles, function (_ref) {
|
|
6603
6817
|
var isSelected = _ref.isSelected;
|
|
@@ -6678,10 +6892,10 @@ var SortDropdown = function SortDropdown(_ref2) {
|
|
|
6678
6892
|
}))))));
|
|
6679
6893
|
};
|
|
6680
6894
|
|
|
6681
|
-
var _templateObject$
|
|
6682
|
-
var Container$w = styled.div(_templateObject$
|
|
6683
|
-
var ContextActionBaseCSS = css(_templateObject2$
|
|
6684
|
-
var ContextIcon = styled.div(_templateObject3$
|
|
6895
|
+
var _templateObject$Q, _templateObject2$J, _templateObject3$E, _templateObject4$z, _templateObject5$v, _templateObject6$q, _templateObject7$p, _templateObject8$l, _templateObject9$h, _templateObject10$d, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2;
|
|
6896
|
+
var Container$w = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n display: inline-block;\n position: relative;\n"])));
|
|
6897
|
+
var ContextActionBaseCSS = css(_templateObject2$J || (_templateObject2$J = _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"])));
|
|
6898
|
+
var ContextIcon = styled.div(_templateObject3$E || (_templateObject3$E = _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) {
|
|
6685
6899
|
var theme = _ref.theme;
|
|
6686
6900
|
return css(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-2);\n transition: background-color ", " ", ";\n "])), theme.animation.speed.fast, theme.animation.easing.primary.easeInOut);
|
|
6687
6901
|
});
|
|
@@ -6698,7 +6912,7 @@ var ContentBox$1 = styled.div(_templateObject8$l || (_templateObject8$l = _tagge
|
|
|
6698
6912
|
}, function (_ref5) {
|
|
6699
6913
|
var openState = _ref5.openState,
|
|
6700
6914
|
disabled = _ref5.disabled;
|
|
6701
|
-
return openState && css(_templateObject9$
|
|
6915
|
+
return openState && css(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n display: ", ";\n display: ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n "])), openState.isOpen ? 'inline-block' : 'none', disabled && 'none', openState.position === 'bottom-right' && css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n bottom: 0;\n left: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'bottom-left' && css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: 0;\n transform: translateY(calc(100% + 5px ));\n "]))), openState.position === 'top-left' && css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n top: 0;\n right: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))), openState.position === 'top-right' && css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n top: 0;\n left: 0;\n transform: translateY(calc( -100% - 5px ));\n "]))));
|
|
6702
6916
|
});
|
|
6703
6917
|
var ButtonWrapper$1 = styled.div(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
6704
6918
|
var GroupStyles = css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n width: auto;\n align-items: center;\n gap: 16px;\n"])));
|
|
@@ -6850,10 +7064,10 @@ var FilterLayout = function FilterLayout(_ref6) {
|
|
|
6850
7064
|
};
|
|
6851
7065
|
|
|
6852
7066
|
var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "contentDays", "cancelText", "applyText", "hasApply", "onCloseCallback", "onUpdateCallback", "onToggleCallback", "onCancelCallback", "onApplyCallback"];
|
|
6853
|
-
var _templateObject$
|
|
7067
|
+
var _templateObject$R;
|
|
6854
7068
|
var MIN_WIDTH = 470;
|
|
6855
7069
|
var MIN_HEIGHT = 360;
|
|
6856
|
-
var Container$x = styled.div(_templateObject$
|
|
7070
|
+
var Container$x = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose([""])));
|
|
6857
7071
|
var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
6858
7072
|
var buttonIcon = _ref.buttonIcon,
|
|
6859
7073
|
buttonText = _ref.buttonText,
|
|
@@ -6930,14 +7144,14 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
6930
7144
|
});
|
|
6931
7145
|
}
|
|
6932
7146
|
onCancelCallback();
|
|
6933
|
-
(_DropdownHandlerRef$c = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c === void 0 ? void 0 : _DropdownHandlerRef$c.
|
|
7147
|
+
(_DropdownHandlerRef$c = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c === void 0 ? void 0 : _DropdownHandlerRef$c.imperativeClose();
|
|
6934
7148
|
}, [onCancelCallback, selected]);
|
|
6935
7149
|
var handleOnApply = useCallback(function () {
|
|
6936
7150
|
var _DropdownHandlerRef$c2;
|
|
6937
7151
|
if (pickerValue.current && pickerValue.current !== selected) {
|
|
6938
7152
|
onApplyCallback(pickerValue.current);
|
|
6939
7153
|
}
|
|
6940
|
-
(_DropdownHandlerRef$c2 = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c2 === void 0 ? void 0 : _DropdownHandlerRef$c2.
|
|
7154
|
+
(_DropdownHandlerRef$c2 = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c2 === void 0 ? void 0 : _DropdownHandlerRef$c2.imperativeClose();
|
|
6941
7155
|
}, [onApplyCallback, selected]);
|
|
6942
7156
|
useEffect(function () {
|
|
6943
7157
|
var canUnmount = true;
|
|
@@ -6987,10 +7201,10 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
6987
7201
|
};
|
|
6988
7202
|
|
|
6989
7203
|
var _excluded$v = ["hasShowMore", "searchFilters", "datePickerFilters", "dropdownFilters", "showMoreText", "showLessText"];
|
|
6990
|
-
var _templateObject$
|
|
6991
|
-
var fadeInAnimation$1 = keyframes(_templateObject$
|
|
6992
|
-
var SearchInputWrapper = styled.div(_templateObject2$
|
|
6993
|
-
var CloseSearchInputWrapper = styled.div(_templateObject3$
|
|
7204
|
+
var _templateObject$S, _templateObject2$K, _templateObject3$F, _templateObject4$A, _templateObject5$w, _templateObject6$r, _templateObject7$q, _templateObject8$m;
|
|
7205
|
+
var fadeInAnimation$1 = keyframes(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n 0% {\n width: 50%;\n opacity: .5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n width: 100%;\n }\n"])));
|
|
7206
|
+
var SearchInputWrapper = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n flex: 1 1 200px;\n max-width: 320px;\n"])));
|
|
7207
|
+
var CloseSearchInputWrapper = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
|
|
6994
7208
|
var theme = _ref.theme;
|
|
6995
7209
|
return theme && css(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n animation: ", " ", " ", ";\n "])), fadeInAnimation$1, theme.animation.speed.slow, theme.animation.easing.primary.inOut);
|
|
6996
7210
|
});
|
|
@@ -7099,10 +7313,10 @@ var FilterInputs = function FilterInputs(_ref2) {
|
|
|
7099
7313
|
};
|
|
7100
7314
|
|
|
7101
7315
|
var _excluded$w = ["labelLists", "totalResults", "resultTextTemplate", "clearText", "resultsDateFormat", "onRemoveFilter", "onClearAll"];
|
|
7102
|
-
var _templateObject$
|
|
7103
|
-
var Container$z = styled.div(_templateObject$
|
|
7104
|
-
var ResultsTextWrapper = styled.div(_templateObject2$
|
|
7105
|
-
var FilterLabel = styled.div(_templateObject3$
|
|
7316
|
+
var _templateObject$T, _templateObject2$L, _templateObject3$G, _templateObject4$B, _templateObject5$x, _templateObject6$s, _templateObject7$r;
|
|
7317
|
+
var Container$z = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 12px;\n min-height: 22px;\n"])));
|
|
7318
|
+
var ResultsTextWrapper = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n color: var(--grey-9);\n"])));
|
|
7319
|
+
var FilterLabel = styled.div(_templateObject3$G || (_templateObject3$G = _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: var(--font-data);\n\n ", " {\n display: flex;\n align-items: center;\n }\n border-right: 1px solid var(--grey-8);\n"])), IconWrapper);
|
|
7106
7320
|
var FilterLabelText = styled.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n padding: ", ";\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 300px;\n"])), function (_ref) {
|
|
7107
7321
|
var hasIcon = _ref.hasIcon;
|
|
7108
7322
|
return hasIcon ? '0 15px 0 9px' : '0 15px 0 0';
|
|
@@ -7197,10 +7411,10 @@ var FiltersResults = function FiltersResults(_ref2) {
|
|
|
7197
7411
|
};
|
|
7198
7412
|
|
|
7199
7413
|
var _excluded$x = ["filtersTitle", "hasShowMore", "searchersConfig", "dropdownsConfig", "datePickersConfig", "showMoreText", "showLessText", "resultTextTemplate", "clearText", "totalResults", "singleFilter", "resultsDateFormat", "onChangeCallback"];
|
|
7200
|
-
var _templateObject$
|
|
7201
|
-
var Title$2 = styled.div(_templateObject$
|
|
7202
|
-
var StyledFilterResults = styled(FiltersResults)(_templateObject2$
|
|
7203
|
-
var Container$A = styled.div(_templateObject3$
|
|
7414
|
+
var _templateObject$U, _templateObject2$M, _templateObject3$H;
|
|
7415
|
+
var Title$2 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])));
|
|
7416
|
+
var StyledFilterResults = styled(FiltersResults)(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose([""])));
|
|
7417
|
+
var Container$A = styled.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n ", " {\n margin-top: 29px;\n min-height: 19px;\n }\n"])), StyledFilterResults);
|
|
7204
7418
|
var getDisableValue = function getDisableValue(filtersValues, singleFilter, filter) {
|
|
7205
7419
|
var disabled = false;
|
|
7206
7420
|
if (filter.disabled) {
|
|
@@ -7606,14 +7820,14 @@ var ToggleButton = function ToggleButton(_ref) {
|
|
|
7606
7820
|
}, props), categoryLabel && categoryLabel + ": ", "" + options[selectedIndex].text);
|
|
7607
7821
|
};
|
|
7608
7822
|
|
|
7609
|
-
var _templateObject$
|
|
7610
|
-
var Container$B = styled.div(_templateObject$
|
|
7611
|
-
var StatusCounter = styled.div(_templateObject2$
|
|
7823
|
+
var _templateObject$V, _templateObject2$N, _templateObject3$I;
|
|
7824
|
+
var Container$B = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"])));
|
|
7825
|
+
var StatusCounter = styled.div(_templateObject2$N || (_templateObject2$N = _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 transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n background-color: ", ";\n"])), function (_ref) {
|
|
7612
7826
|
var theme = _ref.theme,
|
|
7613
7827
|
color = _ref.color;
|
|
7614
7828
|
return color ? theme.colors.status[color] : 'var(--grey-5)';
|
|
7615
7829
|
});
|
|
7616
|
-
var StatusDot = styled.div(_templateObject3$
|
|
7830
|
+
var StatusDot = styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n top: -6px;\n right: -6px;\n transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n background-color: ", ";\n"])), function (_ref2) {
|
|
7617
7831
|
var theme = _ref2.theme,
|
|
7618
7832
|
color = _ref2.color;
|
|
7619
7833
|
return color ? theme.colors.status[color] : 'var(--grey-5)';
|
|
@@ -7635,10 +7849,10 @@ var StatusIcon = function StatusIcon(_ref3) {
|
|
|
7635
7849
|
}));
|
|
7636
7850
|
};
|
|
7637
7851
|
|
|
7638
|
-
var _templateObject$
|
|
7639
|
-
var HandleTouchReactionKeyframes = keyframes(_templateObject$
|
|
7640
|
-
var HandleMouseReactionKeyframes = keyframes(_templateObject2$
|
|
7641
|
-
var HandleBase = styled.svg(_templateObject3$
|
|
7852
|
+
var _templateObject$W, _templateObject2$O, _templateObject3$J, _templateObject4$C, _templateObject5$y, _templateObject6$t, _templateObject7$s, _templateObject8$n, _templateObject9$i, _templateObject10$e, _templateObject11$8, _templateObject12$7, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$3, _templateObject17$3;
|
|
7853
|
+
var HandleTouchReactionKeyframes = keyframes(_templateObject$W || (_templateObject$W = _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"])));
|
|
7854
|
+
var HandleMouseReactionKeyframes = keyframes(_templateObject2$O || (_templateObject2$O = _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"])));
|
|
7855
|
+
var HandleBase = styled.svg(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n touch-action: none;\n user-select: none;\n overflow: visible;\n cursor: pointer;\n fill: ", ";\n appearance: none;\n"])), function (_ref) {
|
|
7642
7856
|
var theme = _ref.theme,
|
|
7643
7857
|
styling = _ref.styling;
|
|
7644
7858
|
return theme.custom.lines[styling].handleBase.fill;
|
|
@@ -7660,17 +7874,17 @@ var HandleReactiveFill = styled.circle(_templateObject8$n || (_templateObject8$n
|
|
|
7660
7874
|
styling = _ref3.styling;
|
|
7661
7875
|
return theme.custom.lines[styling].handleReactiveFill.fill;
|
|
7662
7876
|
});
|
|
7663
|
-
var HandleReactiveRing = styled.circle(_templateObject9$
|
|
7877
|
+
var HandleReactiveRing = styled.circle(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref4) {
|
|
7664
7878
|
var theme = _ref4.theme,
|
|
7665
7879
|
styling = _ref4.styling;
|
|
7666
7880
|
return theme.custom.lines[styling].handleReactiveRing.stroke;
|
|
7667
7881
|
});
|
|
7668
|
-
var HandleContrastLayer = styled.circle(_templateObject10$
|
|
7882
|
+
var HandleContrastLayer = styled.circle(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n overflow: visible;\n mix-blend-mode: multiply;\n fill: none;\n stroke: ", ";\n"])), function (_ref5) {
|
|
7669
7883
|
var theme = _ref5.theme,
|
|
7670
7884
|
styling = _ref5.styling;
|
|
7671
7885
|
return theme.custom.lines[styling].handleContrastLayer.stroke;
|
|
7672
7886
|
});
|
|
7673
|
-
var HandleShadowLayer = styled.circle(_templateObject11$
|
|
7887
|
+
var HandleShadowLayer = styled.circle(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n mix-blend-mode: multiply;\n fill: url(#", ");\n"])), function (props) {
|
|
7674
7888
|
return props.fillID;
|
|
7675
7889
|
});
|
|
7676
7890
|
var GrabHandleIndexGroup = styled.g(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n pointer-events: none;\n ", ";\n\n"])), function (props) {
|
|
@@ -7868,8 +8082,8 @@ var HandleUnit = function HandleUnit(props) {
|
|
|
7868
8082
|
}, index + pointIndexOffset))));
|
|
7869
8083
|
};
|
|
7870
8084
|
|
|
7871
|
-
var _templateObject$
|
|
7872
|
-
var ContrastLine = styled.line(_templateObject$
|
|
8085
|
+
var _templateObject$X, _templateObject2$P, _templateObject3$K, _templateObject4$D, _templateObject5$z, _templateObject6$u, _templateObject7$t, _templateObject8$o, _templateObject9$j, _templateObject10$f, _templateObject11$9, _templateObject12$8, _templateObject13$7, _templateObject14$6;
|
|
8086
|
+
var ContrastLine = styled.line(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n mix-blend-mode: multiply;\n stroke-width: ", "px;\n stroke-opacity: ", ";\n cursor: pointer;\n"])), function (_ref) {
|
|
7873
8087
|
var theme = _ref.theme,
|
|
7874
8088
|
styling = _ref.styling;
|
|
7875
8089
|
return theme.custom.lines[styling].contrastLine.stroke;
|
|
@@ -7880,12 +8094,12 @@ var ContrastLine = styled.line(_templateObject$W || (_templateObject$W = _tagged
|
|
|
7880
8094
|
var showLineBorder = _ref3.showLineBorder;
|
|
7881
8095
|
return showLineBorder ? '0.35' : '0';
|
|
7882
8096
|
});
|
|
7883
|
-
var HighlightLine = styled.line(_templateObject2$
|
|
8097
|
+
var HighlightLine = styled.line(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n pointer-events: none;\n stroke: ", ";\n"])), function (_ref4) {
|
|
7884
8098
|
var theme = _ref4.theme,
|
|
7885
8099
|
styling = _ref4.styling;
|
|
7886
8100
|
return theme.custom.lines[styling].highlightLineBorder.stroke;
|
|
7887
8101
|
});
|
|
7888
|
-
var GrabHandle = styled.circle(_templateObject3$
|
|
8102
|
+
var GrabHandle = styled.circle(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n fill: ", ";\n stroke: ", ";\n opacity: 1;\n transition: opacity 250ms ease;\n cursor: grab;\n\n ", ";\n"])), function (_ref5) {
|
|
7889
8103
|
var theme = _ref5.theme,
|
|
7890
8104
|
styling = _ref5.styling;
|
|
7891
8105
|
return theme.custom.lines[styling].grabHandle.fill;
|
|
@@ -7910,14 +8124,14 @@ var LabelText$2 = styled.text(_templateObject8$o || (_templateObject8$o = _tagge
|
|
|
7910
8124
|
return theme.custom.lines[styling].label.fill;
|
|
7911
8125
|
}, function (_ref9) {
|
|
7912
8126
|
var showLabelShadow = _ref9.showLabelShadow;
|
|
7913
|
-
return showLabelShadow && css(_templateObject9$
|
|
8127
|
+
return showLabelShadow && css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n text-shadow:\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n "])));
|
|
7914
8128
|
});
|
|
7915
|
-
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$
|
|
8129
|
+
var GrabHandleContrast = styled(GrabHandle)(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n fill: none;\n stroke: ", ";\n"])), function (_ref10) {
|
|
7916
8130
|
var theme = _ref10.theme,
|
|
7917
8131
|
styling = _ref10.styling;
|
|
7918
8132
|
return theme.custom.lines[styling].grabHandleContrast.stroke;
|
|
7919
8133
|
});
|
|
7920
|
-
var GrabHandleGroup = styled.g(_templateObject11$
|
|
8134
|
+
var GrabHandleGroup = styled.g(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n\n ", ", ", " {\n transition: r 250ms ease;\n }\n\n ", ";\n"])), GrabHandle, GrabHandleContrast, function (props) {
|
|
7921
8135
|
return props.showIndex && css(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n ", ", ", " {\n pointer-events: none;\n r: ", ";\n }\n "])), GrabHandle, GrabHandleContrast, props.originalRadius * 1.75);
|
|
7922
8136
|
});
|
|
7923
8137
|
var DMCircle = styled.circle(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n fill: hsla(203, 100%, 35%, 0.49);\n cursor: pointer;\n"])));
|
|
@@ -8145,20 +8359,20 @@ var LineUnit = function LineUnit(props) {
|
|
|
8145
8359
|
|
|
8146
8360
|
var LineSetContext = createContext({});
|
|
8147
8361
|
|
|
8148
|
-
var _templateObject$
|
|
8149
|
-
var FilledPolygon = styled.polygon(_templateObject$
|
|
8362
|
+
var _templateObject$Y, _templateObject2$Q, _templateObject3$L, _templateObject4$E;
|
|
8363
|
+
var FilledPolygon = styled.polygon(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n fill: ", ";\n opacity: ", ";\n"])), function (_ref) {
|
|
8150
8364
|
var color = _ref.color;
|
|
8151
8365
|
return color;
|
|
8152
8366
|
}, function (_ref2) {
|
|
8153
8367
|
var opacity = _ref2.opacity;
|
|
8154
8368
|
return opacity;
|
|
8155
8369
|
});
|
|
8156
|
-
var Point = styled.circle(_templateObject2$
|
|
8370
|
+
var Point = styled.circle(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n fill: ", ";\n"])), function (_ref3) {
|
|
8157
8371
|
var theme = _ref3.theme,
|
|
8158
8372
|
styling = _ref3.styling;
|
|
8159
8373
|
return theme.custom.lines[styling].point.fill;
|
|
8160
8374
|
});
|
|
8161
|
-
var AreaLabelText = styled.text(_templateObject3$
|
|
8375
|
+
var AreaLabelText = styled.text(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n text-align: center;\n fill: ", ";\n font-weight: bold;\n transition: opacity 250ms ease;\n pointer-events: none;\n ", "\n"])), function (_ref4) {
|
|
8162
8376
|
var theme = _ref4.theme,
|
|
8163
8377
|
styling = _ref4.styling;
|
|
8164
8378
|
return theme.custom.lines[styling].label.fill;
|
|
@@ -8408,10 +8622,10 @@ var LineSet = function LineSet(_ref8) {
|
|
|
8408
8622
|
}));
|
|
8409
8623
|
};
|
|
8410
8624
|
|
|
8411
|
-
var _templateObject$
|
|
8412
|
-
var Container$C = styled.div(_templateObject$
|
|
8413
|
-
var LoadingOverlay$1 = styled.div(_templateObject2$
|
|
8414
|
-
var Frame = styled.svg(_templateObject3$
|
|
8625
|
+
var _templateObject$Z, _templateObject2$R, _templateObject3$M, _templateObject4$F, _templateObject5$A;
|
|
8626
|
+
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\n"])));
|
|
8627
|
+
var LoadingOverlay$1 = styled.div(_templateObject2$R || (_templateObject2$R = _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"])));
|
|
8628
|
+
var Frame = styled.svg(_templateObject3$M || (_templateObject3$M = _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) {
|
|
8415
8629
|
return props.transculent && css(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
8416
8630
|
});
|
|
8417
8631
|
var Image$1 = styled.img(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n object-fit: contain;\n width: 100%;\n height: 100%;\n"])));
|
|
@@ -8599,10 +8813,10 @@ var LineUI = function LineUI(_ref) {
|
|
|
8599
8813
|
};
|
|
8600
8814
|
|
|
8601
8815
|
var _excluded$z = ["loop", "autoPlay", "controls", "muted"];
|
|
8602
|
-
var _templateObject$
|
|
8603
|
-
var Container$D = styled.div(_templateObject$
|
|
8604
|
-
var Video$1 = styled.video(_templateObject2$
|
|
8605
|
-
var LoadingOverlay$2 = styled.div(_templateObject3$
|
|
8816
|
+
var _templateObject$_, _templateObject2$S, _templateObject3$N, _templateObject4$G, _templateObject5$B;
|
|
8817
|
+
var Container$D = styled.div(_templateObject$_ || (_templateObject$_ = _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"])));
|
|
8818
|
+
var Video$1 = styled.video(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
|
|
8819
|
+
var LoadingOverlay$2 = styled.div(_templateObject3$N || (_templateObject3$N = _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"])));
|
|
8606
8820
|
var Frame$1 = styled.svg(_templateObject4$G || (_templateObject4$G = _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) {
|
|
8607
8821
|
return props.transcalent && css(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
8608
8822
|
});
|
|
@@ -8808,8 +9022,8 @@ var LineUIVideo = function LineUIVideo(_ref) {
|
|
|
8808
9022
|
};
|
|
8809
9023
|
|
|
8810
9024
|
var _excluded$A = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
|
|
8811
|
-
var _templateObject
|
|
8812
|
-
var Video$2 = styled.video(_templateObject
|
|
9025
|
+
var _templateObject$$;
|
|
9026
|
+
var Video$2 = styled.video(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n /* width: 800px; */\n"])));
|
|
8813
9027
|
var WebRTCPlayer = function WebRTCPlayer(_ref) {
|
|
8814
9028
|
var _ref$id = _ref.id,
|
|
8815
9029
|
id = _ref$id === void 0 ? "1" : _ref$id,
|
|
@@ -9083,10 +9297,10 @@ function getPeerId(id) {
|
|
|
9083
9297
|
return 'WRP_' + id + '_' + Math.floor(Math.random() * (9000 - 10) + 10).toString();
|
|
9084
9298
|
}
|
|
9085
9299
|
|
|
9086
|
-
var _templateObject
|
|
9087
|
-
var Container$E = styled.div(_templateObject
|
|
9088
|
-
var Video$3 = styled(WebRTCPlayer)(_templateObject2$
|
|
9089
|
-
var LoadingOverlay$3 = styled.div(_templateObject3$
|
|
9300
|
+
var _templateObject$10, _templateObject2$T, _templateObject3$O, _templateObject4$H, _templateObject5$C;
|
|
9301
|
+
var Container$E = styled.div(_templateObject$10 || (_templateObject$10 = _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"])));
|
|
9302
|
+
var Video$3 = styled(WebRTCPlayer)(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n border-radius: 3px;\n background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
|
|
9303
|
+
var LoadingOverlay$3 = styled.div(_templateObject3$O || (_templateObject3$O = _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"])));
|
|
9090
9304
|
var Frame$2 = styled.svg(_templateObject4$H || (_templateObject4$H = _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) {
|
|
9091
9305
|
return props.transcalent && css(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n background: hsla(0deg, 0%, 0%, 35%);\n "])));
|
|
9092
9306
|
});
|
|
@@ -9392,16 +9606,16 @@ var LineReducer = (function (state, action) {
|
|
|
9392
9606
|
}
|
|
9393
9607
|
});
|
|
9394
9608
|
|
|
9395
|
-
var _templateObject$
|
|
9609
|
+
var _templateObject$11, _templateObject2$U, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$v, _templateObject7$u;
|
|
9396
9610
|
var ICON_SIZE = 24;
|
|
9397
9611
|
var GAP_LEFT = 20;
|
|
9398
9612
|
var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
|
|
9399
|
-
var Container$F = styled.div(_templateObject$
|
|
9400
|
-
var TitlesWrapper = styled.div(_templateObject2$
|
|
9613
|
+
var Container$F = styled.div(_templateObject$11 || (_templateObject$11 = _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);
|
|
9614
|
+
var TitlesWrapper = styled.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n flex-direction: ", ";\n gap: 4px;\n"])), function (_ref) {
|
|
9401
9615
|
var areaTitleBottom = _ref.areaTitleBottom;
|
|
9402
9616
|
return areaTitleBottom ? "column-reverse" : "column";
|
|
9403
9617
|
});
|
|
9404
|
-
var IconContainer$2 = styled.div(_templateObject3$
|
|
9618
|
+
var IconContainer$2 = styled.div(_templateObject3$P || (_templateObject3$P = _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);
|
|
9405
9619
|
var Title$3 = styled.h1(_templateObject4$I || (_templateObject4$I = _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"])));
|
|
9406
9620
|
var AreaTitleCss = css(_templateObject5$D || (_templateObject5$D = _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"])));
|
|
9407
9621
|
var AreaTitle = styled.div(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n ", "\n"])), AreaTitleCss);
|
|
@@ -9432,18 +9646,18 @@ var PageTitle = function PageTitle(_ref2) {
|
|
|
9432
9646
|
}, areaTitle) : areaTitle && React__default.createElement(AreaTitle, null, areaTitle), React__default.createElement(Title$3, null, title)));
|
|
9433
9647
|
};
|
|
9434
9648
|
|
|
9435
|
-
var _templateObject$
|
|
9436
|
-
var Container$G = styled.p(_templateObject$
|
|
9649
|
+
var _templateObject$12;
|
|
9650
|
+
var Container$G = styled.p(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n color: var(--grey-11);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; /* 142.857% */\n"])));
|
|
9437
9651
|
var IntroductionText = function IntroductionText(_ref) {
|
|
9438
9652
|
var children = _ref.children;
|
|
9439
9653
|
return React__default.createElement(Container$G, null, children);
|
|
9440
9654
|
};
|
|
9441
9655
|
|
|
9442
9656
|
var _excluded$C = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
|
|
9443
|
-
var _templateObject$
|
|
9444
|
-
var TextContainer$2 = styled.div(_templateObject$
|
|
9445
|
-
var StyledLink = styled(Link)(_templateObject2$
|
|
9446
|
-
var TagWrapper = styled.div(_templateObject3$
|
|
9657
|
+
var _templateObject$13, _templateObject2$V, _templateObject3$Q, _templateObject4$J, _templateObject5$E, _templateObject6$w, _templateObject7$v;
|
|
9658
|
+
var TextContainer$2 = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
9659
|
+
var StyledLink = styled(Link)(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n"])));
|
|
9660
|
+
var TagWrapper = styled.div(_templateObject3$Q || (_templateObject3$Q = _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) {
|
|
9447
9661
|
var size = _ref.size;
|
|
9448
9662
|
return size;
|
|
9449
9663
|
}, function (_ref2) {
|
|
@@ -9498,10 +9712,10 @@ var Tag = function Tag(_ref6) {
|
|
|
9498
9712
|
}, renderTag()) : renderTag();
|
|
9499
9713
|
};
|
|
9500
9714
|
|
|
9501
|
-
var _templateObject$
|
|
9502
|
-
var Container$H = styled.div(_templateObject$
|
|
9503
|
-
var LeftPanel = styled.div(_templateObject2$
|
|
9504
|
-
var IntroductionTextWrapper = styled.div(_templateObject3$
|
|
9715
|
+
var _templateObject$14, _templateObject2$W, _templateObject3$R, _templateObject4$K, _templateObject5$F, _templateObject6$x;
|
|
9716
|
+
var Container$H = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
|
|
9717
|
+
var LeftPanel = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n"])));
|
|
9718
|
+
var IntroductionTextWrapper = styled.div(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n max-width: 648px;\n"])));
|
|
9505
9719
|
var RightPanel = styled.div(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n padding-top: 0px;\n }\n\n"])), function (_ref) {
|
|
9506
9720
|
var iconLeftPanel = _ref.iconLeftPanel;
|
|
9507
9721
|
return iconLeftPanel && css(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
|
|
@@ -9549,8 +9763,8 @@ var PageHeader = function PageHeader(_ref2) {
|
|
|
9549
9763
|
}, rightContent) : null);
|
|
9550
9764
|
};
|
|
9551
9765
|
|
|
9552
|
-
var _templateObject$
|
|
9553
|
-
var Container$I = styled.div(_templateObject$
|
|
9766
|
+
var _templateObject$15;
|
|
9767
|
+
var Container$I = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9554
9768
|
var MultilineContent = function MultilineContent(_ref) {
|
|
9555
9769
|
var contentArray = _ref.contentArray;
|
|
9556
9770
|
return React__default.createElement(Container$I, null, contentArray.map(function (element, index) {
|
|
@@ -9560,13 +9774,13 @@ var MultilineContent = function MultilineContent(_ref) {
|
|
|
9560
9774
|
}));
|
|
9561
9775
|
};
|
|
9562
9776
|
|
|
9563
|
-
var _templateObject$
|
|
9564
|
-
var Container$J = styled.div(_templateObject$
|
|
9777
|
+
var _templateObject$16, _templateObject2$X, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$y, _templateObject7$w;
|
|
9778
|
+
var Container$J = styled.div(_templateObject$16 || (_templateObject$16 = _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) {
|
|
9565
9779
|
var aspect = _ref.aspect;
|
|
9566
|
-
return aspect === '16:9' && css(_templateObject2$
|
|
9780
|
+
return aspect === '16:9' && css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
|
|
9567
9781
|
}, function (_ref2) {
|
|
9568
9782
|
var theme = _ref2.theme;
|
|
9569
|
-
return theme && css(_templateObject3$
|
|
9783
|
+
return theme && css(_templateObject3$S || (_templateObject3$S = _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);
|
|
9570
9784
|
}, function (_ref3) {
|
|
9571
9785
|
var theme = _ref3.theme,
|
|
9572
9786
|
hoverZoom = _ref3.hoverZoom;
|
|
@@ -9685,11 +9899,11 @@ var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
|
9685
9899
|
})));
|
|
9686
9900
|
};
|
|
9687
9901
|
|
|
9688
|
-
var _templateObject$
|
|
9689
|
-
var Container$K = styled.div(_templateObject$
|
|
9902
|
+
var _templateObject$17, _templateObject2$Y;
|
|
9903
|
+
var Container$K = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n height: 42px;\n width: 4px;\n border-radius: 3px;\n display: block;\n\n ", "\n\n"])), function (_ref) {
|
|
9690
9904
|
var status = _ref.status,
|
|
9691
9905
|
colors = _ref.theme.colors;
|
|
9692
|
-
return css(_templateObject2$
|
|
9906
|
+
return css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n background: ", ";\n content:'", "';\n "])), colors.status[status], status);
|
|
9693
9907
|
});
|
|
9694
9908
|
var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
9695
9909
|
var _ref2$status = _ref2.status,
|
|
@@ -9699,12 +9913,12 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
|
9699
9913
|
});
|
|
9700
9914
|
};
|
|
9701
9915
|
|
|
9702
|
-
var _templateObject$
|
|
9703
|
-
var CopyToClipboard = styled.button(_templateObject$
|
|
9916
|
+
var _templateObject$18, _templateObject2$Z, _templateObject3$T, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$x, _templateObject8$p, _templateObject9$k, _templateObject10$g, _templateObject11$a;
|
|
9917
|
+
var CopyToClipboard = styled.button(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n\n cursor: pointer;\n opacity: 0;\n\n position: absolute;\n right: 0;\n top: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n outline: none;\n\n ", "\n\n svg {\n display: block;\n }\n\n &:hover {\n opacity: 1 !important;\n }\n\n"])), function (_ref) {
|
|
9704
9918
|
var theme = _ref.theme;
|
|
9705
|
-
return theme && css(_templateObject2$
|
|
9919
|
+
return theme && css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
9706
9920
|
});
|
|
9707
|
-
var CellContainer = styled.div(_templateObject3$
|
|
9921
|
+
var CellContainer = styled.div(_templateObject3$T || (_templateObject3$T = _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) {
|
|
9708
9922
|
return p.theme.fontFamily.data;
|
|
9709
9923
|
}, CopyToClipboard, function (_ref2) {
|
|
9710
9924
|
var theme = _ref2.theme,
|
|
@@ -9721,13 +9935,13 @@ var CellContainer = styled.div(_templateObject3$S || (_templateObject3$S = _tagg
|
|
|
9721
9935
|
});
|
|
9722
9936
|
var UnitText = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
|
|
9723
9937
|
var theme = _ref5.theme;
|
|
9724
|
-
return css(_templateObject9$
|
|
9938
|
+
return css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
9725
9939
|
});
|
|
9726
|
-
var StatusBlip = styled.div(_templateObject10$
|
|
9940
|
+
var StatusBlip = styled.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-right: 8px;\n ", "\n"])), function (_ref6) {
|
|
9727
9941
|
var _ref6$status = _ref6.status,
|
|
9728
9942
|
status = _ref6$status === void 0 ? 'neutral' : _ref6$status,
|
|
9729
9943
|
colors = _ref6.theme.colors;
|
|
9730
|
-
return css(_templateObject11$
|
|
9944
|
+
return css(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n background: ", ";\n "])), colors.status[status]);
|
|
9731
9945
|
});
|
|
9732
9946
|
var TypeTableCell = function TypeTableCell(_ref7) {
|
|
9733
9947
|
var _ref7$showUnit = _ref7.showUnit,
|
|
@@ -9768,10 +9982,10 @@ var TypeTableCell = function TypeTableCell(_ref7) {
|
|
|
9768
9982
|
})) : null);
|
|
9769
9983
|
};
|
|
9770
9984
|
|
|
9771
|
-
var _templateObject$
|
|
9772
|
-
var RowContainer = styled.div(_templateObject$
|
|
9985
|
+
var _templateObject$19, _templateObject2$_;
|
|
9986
|
+
var RowContainer = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n display: table-row;\n ", ";\n"])), function (_ref) {
|
|
9773
9987
|
var isEmpty = _ref.isEmpty;
|
|
9774
|
-
return isEmpty && css(_templateObject2$
|
|
9988
|
+
return isEmpty && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n visibility: hidden;\n "])));
|
|
9775
9989
|
});
|
|
9776
9990
|
var TypeTableRow = function TypeTableRow(_ref2) {
|
|
9777
9991
|
var _rowData$header, _rowData$header2, _rowData$header3, _rowData$header4, _rowData$header5, _rowData$header6;
|
|
@@ -9845,13 +10059,13 @@ var TypeTableRow = function TypeTableRow(_ref2) {
|
|
|
9845
10059
|
}));
|
|
9846
10060
|
};
|
|
9847
10061
|
|
|
9848
|
-
var _templateObject$
|
|
9849
|
-
var HeaderTitle = styled.div(_templateObject$
|
|
10062
|
+
var _templateObject$1a, _templateObject2$$, _templateObject3$U, _templateObject4$N;
|
|
10063
|
+
var HeaderTitle = styled.div(_templateObject$1a || (_templateObject$1a = _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) {
|
|
9850
10064
|
var ascending = _ref.ascending;
|
|
9851
|
-
return ascending && css(_templateObject2
|
|
10065
|
+
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 "])));
|
|
9852
10066
|
}, function (_ref2) {
|
|
9853
10067
|
var isSortActive = _ref2.isSortActive;
|
|
9854
|
-
return isSortActive && css(_templateObject3$
|
|
10068
|
+
return isSortActive && css(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose(["\n &:not(hover) {\n ", " {\n display: inline-flex;\n }\n }\n "])), IconWrapper);
|
|
9855
10069
|
}, function (_ref3) {
|
|
9856
10070
|
var styles = _ref3.theme.styles,
|
|
9857
10071
|
sortable = _ref3.sortable;
|
|
@@ -9882,13 +10096,13 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
9882
10096
|
}), header);
|
|
9883
10097
|
};
|
|
9884
10098
|
|
|
9885
|
-
var _templateObject$
|
|
9886
|
-
var HeaderRow = styled.div(_templateObject$
|
|
9887
|
-
var HeaderItem = styled.div(_templateObject2
|
|
10099
|
+
var _templateObject$1b, _templateObject2$10, _templateObject3$V, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$y, _templateObject8$q, _templateObject9$l, _templateObject10$h, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$7, _templateObject15$5, _templateObject16$4, _templateObject17$4;
|
|
10100
|
+
var HeaderRow = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
10101
|
+
var HeaderItem = styled.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
|
|
9888
10102
|
return p.theme.fontFamily.ui;
|
|
9889
10103
|
}, function (_ref) {
|
|
9890
10104
|
var hasCopyButton = _ref.hasCopyButton;
|
|
9891
|
-
return hasCopyButton && css(_templateObject3$
|
|
10105
|
+
return hasCopyButton && css(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose(["\n padding-right: 20px;\n "])));
|
|
9892
10106
|
}, function (_ref2) {
|
|
9893
10107
|
var theme = _ref2.theme,
|
|
9894
10108
|
alignment = _ref2.alignment,
|
|
@@ -9905,11 +10119,11 @@ var HeaderItem = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedT
|
|
|
9905
10119
|
isSortActive = _ref4.isSortActive;
|
|
9906
10120
|
return headerStyle === 'subHeader' && css(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
|
|
9907
10121
|
});
|
|
9908
|
-
var TitleItems = styled.div(_templateObject9$
|
|
10122
|
+
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) {
|
|
9909
10123
|
var alignment = _ref5.alignment;
|
|
9910
|
-
return alignment && css(_templateObject10$
|
|
10124
|
+
return alignment && css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n "])), alignment === 'right' ? 'align-items: flex-end' : null, alignment === 'center' ? 'align-items: center' : null);
|
|
9911
10125
|
});
|
|
9912
|
-
var GroupTitle = styled.div(_templateObject11$
|
|
10126
|
+
var GroupTitle = styled.div(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n margin-bottom: 4px;\n"])));
|
|
9913
10127
|
var Title$4 = styled.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n ", ";\n padding-left: 2px;\n padding-right: 8px;\n white-space: nowrap;\n"])), function (_ref6) {
|
|
9914
10128
|
var typography = _ref6.theme.typography;
|
|
9915
10129
|
return css(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), typography.tables.groupName);
|
|
@@ -10037,10 +10251,10 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
|
|
|
10037
10251
|
}));
|
|
10038
10252
|
};
|
|
10039
10253
|
|
|
10040
|
-
var _templateObject$
|
|
10041
|
-
var Container$L = styled.div(_templateObject$
|
|
10042
|
-
var TableContainer = styled.div(_templateObject2$
|
|
10043
|
-
var LoadingText$1 = styled.div(_templateObject3$
|
|
10254
|
+
var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J;
|
|
10255
|
+
var Container$L = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose([""])));
|
|
10256
|
+
var TableContainer = styled.div(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n display: table;\n width: 100%;\n position: relative;\n"])));
|
|
10257
|
+
var LoadingText$1 = styled.div(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose(["\n color: var(--grey-a11);\n"])));
|
|
10044
10258
|
var LoadingBox$1 = styled.div(_templateObject4$P || (_templateObject4$P = _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) {
|
|
10045
10259
|
var theme = _ref.theme;
|
|
10046
10260
|
return theme.colors["pureBase"];
|
|
@@ -10139,22 +10353,22 @@ var TypeTable = function TypeTable(_ref4) {
|
|
|
10139
10353
|
};
|
|
10140
10354
|
|
|
10141
10355
|
var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
10142
|
-
var _templateObject$
|
|
10143
|
-
var Container$M = styled.div(_templateObject$
|
|
10356
|
+
var _templateObject$1d, _templateObject2$12, _templateObject3$X, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$m, _templateObject10$i;
|
|
10357
|
+
var Container$M = styled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
10144
10358
|
var theme = _ref.theme;
|
|
10145
|
-
return css(_templateObject2$
|
|
10359
|
+
return css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
10146
10360
|
});
|
|
10147
|
-
var StyledButton$5 = styled(Button)(_templateObject3$
|
|
10361
|
+
var StyledButton$5 = styled(Button)(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10148
10362
|
var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10149
10363
|
var StyledLink$1 = styled(Link)(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
|
|
10150
10364
|
var EditContainer = styled.div(_templateObject6$B || (_templateObject6$B = _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);
|
|
10151
10365
|
var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose([""])));
|
|
10152
10366
|
var TextContainer$3 = styled.div(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
|
|
10153
10367
|
var alignment = _ref2.alignment;
|
|
10154
|
-
return alignment === 'center' && css(_templateObject9$
|
|
10368
|
+
return alignment === 'center' && css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
10155
10369
|
}, function (_ref3) {
|
|
10156
10370
|
var alignment = _ref3.alignment;
|
|
10157
|
-
return alignment === 'right' && css(_templateObject10$
|
|
10371
|
+
return alignment === 'right' && css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n justify-content: flex-end;\n"])));
|
|
10158
10372
|
}, StyledIconButton$1, StyledIconButton$1);
|
|
10159
10373
|
var EditCell = function EditCell(_ref4) {
|
|
10160
10374
|
var _ref4$type = _ref4.type,
|
|
@@ -10566,12 +10780,12 @@ var PTZProvider = function PTZProvider(_ref) {
|
|
|
10566
10780
|
}, children);
|
|
10567
10781
|
};
|
|
10568
10782
|
|
|
10569
|
-
var _templateObject$
|
|
10570
|
-
var Active = styled.g(_templateObject$
|
|
10783
|
+
var _templateObject$1e, _templateObject2$13, _templateObject3$Y, _templateObject4$R, _templateObject5$L;
|
|
10784
|
+
var Active = styled.g(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
10571
10785
|
var active = _ref.active;
|
|
10572
|
-
return active && css(_templateObject2$
|
|
10786
|
+
return active && css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10573
10787
|
});
|
|
10574
|
-
var Hover = styled.g(_templateObject3$
|
|
10788
|
+
var Hover = styled.g(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
10575
10789
|
var hover = _ref2.hover;
|
|
10576
10790
|
return hover && css(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10577
10791
|
});
|
|
@@ -10645,12 +10859,12 @@ var Up = function Up() {
|
|
|
10645
10859
|
})));
|
|
10646
10860
|
};
|
|
10647
10861
|
|
|
10648
|
-
var _templateObject$
|
|
10649
|
-
var Active$1 = styled.g(_templateObject$
|
|
10862
|
+
var _templateObject$1f, _templateObject2$14, _templateObject3$Z, _templateObject4$S, _templateObject5$M, _templateObject6$C;
|
|
10863
|
+
var Active$1 = styled.g(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
10650
10864
|
var active = _ref.active;
|
|
10651
|
-
return active && css(_templateObject2$
|
|
10865
|
+
return active && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10652
10866
|
});
|
|
10653
|
-
var Hover$1 = styled.g(_templateObject3$
|
|
10867
|
+
var Hover$1 = styled.g(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
10654
10868
|
var hover = _ref2.hover;
|
|
10655
10869
|
return hover && css(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10656
10870
|
});
|
|
@@ -10726,12 +10940,12 @@ var Down = function Down() {
|
|
|
10726
10940
|
})));
|
|
10727
10941
|
};
|
|
10728
10942
|
|
|
10729
|
-
var _templateObject$
|
|
10730
|
-
var Active$2 = styled.g(_templateObject$
|
|
10943
|
+
var _templateObject$1g, _templateObject2$15, _templateObject3$_, _templateObject4$T, _templateObject5$N;
|
|
10944
|
+
var Active$2 = styled.g(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
10731
10945
|
var active = _ref.active;
|
|
10732
|
-
return active && css(_templateObject2$
|
|
10946
|
+
return active && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10733
10947
|
});
|
|
10734
|
-
var Hover$2 = styled.g(_templateObject3$
|
|
10948
|
+
var Hover$2 = styled.g(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
10735
10949
|
var hover = _ref2.hover;
|
|
10736
10950
|
return hover && css(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10737
10951
|
});
|
|
@@ -10807,12 +11021,12 @@ var Left = function Left() {
|
|
|
10807
11021
|
})));
|
|
10808
11022
|
};
|
|
10809
11023
|
|
|
10810
|
-
var _templateObject$
|
|
10811
|
-
var Active$3 = styled.g(_templateObject$
|
|
11024
|
+
var _templateObject$1h, _templateObject2$16, _templateObject3$$, _templateObject4$U, _templateObject5$O;
|
|
11025
|
+
var Active$3 = styled.g(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
10812
11026
|
var active = _ref.active;
|
|
10813
|
-
return active && css(_templateObject2$
|
|
11027
|
+
return active && css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10814
11028
|
});
|
|
10815
|
-
var Hover$3 = styled.g(_templateObject3
|
|
11029
|
+
var Hover$3 = styled.g(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
10816
11030
|
var hover = _ref2.hover;
|
|
10817
11031
|
return hover && css(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
10818
11032
|
});
|
|
@@ -11701,12 +11915,12 @@ var ZoomBase = function ZoomBase(_ref) {
|
|
|
11701
11915
|
})), children));
|
|
11702
11916
|
};
|
|
11703
11917
|
|
|
11704
|
-
var _templateObject$
|
|
11705
|
-
var Active$4 = styled.g(_templateObject$
|
|
11918
|
+
var _templateObject$1i, _templateObject2$17, _templateObject3$10, _templateObject4$V, _templateObject5$P;
|
|
11919
|
+
var Active$4 = styled.g(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11706
11920
|
var active = _ref.active;
|
|
11707
|
-
return active && css(_templateObject2$
|
|
11921
|
+
return active && css(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11708
11922
|
});
|
|
11709
|
-
var Hover$4 = styled.g(_templateObject3
|
|
11923
|
+
var Hover$4 = styled.g(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11710
11924
|
var hover = _ref2.hover;
|
|
11711
11925
|
return hover && css(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11712
11926
|
});
|
|
@@ -11775,12 +11989,12 @@ var Up$1 = function Up() {
|
|
|
11775
11989
|
})));
|
|
11776
11990
|
};
|
|
11777
11991
|
|
|
11778
|
-
var _templateObject$
|
|
11779
|
-
var Active$5 = styled.g(_templateObject$
|
|
11992
|
+
var _templateObject$1j, _templateObject2$18, _templateObject3$11, _templateObject4$W, _templateObject5$Q;
|
|
11993
|
+
var Active$5 = styled.g(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n\n"])), function (_ref) {
|
|
11780
11994
|
var active = _ref.active;
|
|
11781
|
-
return active && css(_templateObject2$
|
|
11995
|
+
return active && css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11782
11996
|
});
|
|
11783
|
-
var Hover$5 = styled.g(_templateObject3$
|
|
11997
|
+
var Hover$5 = styled.g(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n opacity: 0;\n ", "\n"])), function (_ref2) {
|
|
11784
11998
|
var hover = _ref2.hover;
|
|
11785
11999
|
return hover && css(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["opacity: 1;"])));
|
|
11786
12000
|
});
|
|
@@ -11845,8 +12059,8 @@ var Up$2 = function Up() {
|
|
|
11845
12059
|
})));
|
|
11846
12060
|
};
|
|
11847
12061
|
|
|
11848
|
-
var _templateObject$
|
|
11849
|
-
var Container$T = styled.div(_templateObject$
|
|
12062
|
+
var _templateObject$1k;
|
|
12063
|
+
var Container$T = styled.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n flex-direction: column;\n"])));
|
|
11850
12064
|
var Controls = function Controls(_ref) {
|
|
11851
12065
|
var _ref$debug = _ref.debug,
|
|
11852
12066
|
debug = _ref$debug === void 0 ? false : _ref$debug;
|
|
@@ -11856,13 +12070,13 @@ var Controls = function Controls(_ref) {
|
|
|
11856
12070
|
};
|
|
11857
12071
|
|
|
11858
12072
|
var _excluded$E = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
|
|
11859
|
-
var _templateObject$
|
|
11860
|
-
var Container$U = styled.div(_templateObject$
|
|
11861
|
-
var EmptyWithIcon = styled.div(_templateObject2$
|
|
12073
|
+
var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$X, _templateObject5$R, _templateObject6$D, _templateObject7$A, _templateObject8$s;
|
|
12074
|
+
var Container$U = styled.div(_templateObject$1l || (_templateObject$1l = _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);
|
|
12075
|
+
var EmptyWithIcon = styled.div(_templateObject2$19 || (_templateObject2$19 = _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) {
|
|
11862
12076
|
var hasPadding = _ref.hasPadding;
|
|
11863
12077
|
return hasPadding && "\n padding-bottom: 43px\n ";
|
|
11864
12078
|
}, IconWrapper);
|
|
11865
|
-
var Notice = styled.div(_templateObject3$
|
|
12079
|
+
var Notice = styled.div(_templateObject3$12 || (_templateObject3$12 = _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) {
|
|
11866
12080
|
var color = _ref2.color;
|
|
11867
12081
|
return color && "var(--" + color + ")";
|
|
11868
12082
|
});
|
|
@@ -11903,11 +12117,11 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
11903
12117
|
}));
|
|
11904
12118
|
};
|
|
11905
12119
|
|
|
11906
|
-
var _templateObject$
|
|
11907
|
-
var Container$V = styled.div(_templateObject$
|
|
11908
|
-
var LeftData = styled.div(_templateObject2$
|
|
12120
|
+
var _templateObject$1m, _templateObject2$1a, _templateObject3$13, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$B, _templateObject8$t, _templateObject9$n;
|
|
12121
|
+
var Container$V = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
|
|
12122
|
+
var LeftData = styled.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
11909
12123
|
var hasRightData = _ref.hasRightData;
|
|
11910
|
-
return hasRightData && css(_templateObject3$
|
|
12124
|
+
return hasRightData && css(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 195px;\n "])));
|
|
11911
12125
|
}, IconWrapper);
|
|
11912
12126
|
var RightData = styled.div(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n padding: 0 12px 0 16px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
11913
12127
|
var DeviceDataGroup = styled.div(_templateObject5$S || (_templateObject5$S = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n justify-content: center;\n"])));
|
|
@@ -11926,7 +12140,7 @@ var Title$5 = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemp
|
|
|
11926
12140
|
var hasMarginBottom = _ref5.hasMarginBottom;
|
|
11927
12141
|
return hasMarginBottom && "margin-bottom: 6px;";
|
|
11928
12142
|
});
|
|
11929
|
-
var SubTitle = styled.div(_templateObject9$
|
|
12143
|
+
var SubTitle = styled.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-11);\n font-size: 12px;\n"])), EllipsisStyles);
|
|
11930
12144
|
var PanelMetaData = function PanelMetaData(_ref6) {
|
|
11931
12145
|
var _ref6$deviceIcon = _ref6.deviceIcon,
|
|
11932
12146
|
deviceIcon = _ref6$deviceIcon === void 0 ? 'Camera' : _ref6$deviceIcon,
|
|
@@ -11957,8 +12171,8 @@ var PanelMetaData = function PanelMetaData(_ref6) {
|
|
|
11957
12171
|
};
|
|
11958
12172
|
|
|
11959
12173
|
var _excluded$F = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
|
|
11960
|
-
var _templateObject$
|
|
11961
|
-
var CameraPanelWrapper = styled.div(_templateObject$
|
|
12174
|
+
var _templateObject$1n;
|
|
12175
|
+
var CameraPanelWrapper = styled.div(_templateObject$1n || (_templateObject$1n = _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) {
|
|
11962
12176
|
var hasOnClick = _ref.hasOnClick;
|
|
11963
12177
|
return hasOnClick && "\n cursor: pointer;\n ";
|
|
11964
12178
|
});
|
|
@@ -11974,8 +12188,8 @@ var NewComponent = function NewComponent(_ref2) {
|
|
|
11974
12188
|
}, props), React__default.createElement(MediaStream, Object.assign({}, streamProps)), customBottom ? customBottom : panelMetaData && React__default.createElement(PanelMetaData, Object.assign({}, panelMetaData)));
|
|
11975
12189
|
};
|
|
11976
12190
|
|
|
11977
|
-
var _templateObject$
|
|
11978
|
-
var CameraGrid = styled.div(_templateObject$
|
|
12191
|
+
var _templateObject$1o;
|
|
12192
|
+
var CameraGrid = styled.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(auto-fill, 300px);\n gap: 20px 20px;\n"])));
|
|
11979
12193
|
var CameraPanels = function CameraPanels(_ref) {
|
|
11980
12194
|
var panels = _ref.panels;
|
|
11981
12195
|
return React__default.createElement(CameraGrid, null, panels.map(function (props, index) {
|
|
@@ -11985,8 +12199,8 @@ var CameraPanels = function CameraPanels(_ref) {
|
|
|
11985
12199
|
}));
|
|
11986
12200
|
};
|
|
11987
12201
|
|
|
11988
|
-
var _templateObject$
|
|
11989
|
-
var TagListWrapper$1 = styled.div(_templateObject$
|
|
12202
|
+
var _templateObject$1p;
|
|
12203
|
+
var TagListWrapper$1 = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose(["\n display: flex;\n ", " {\n margin-right: 10px;\n margin-bottom: 6px;\n flex-shrink: 0;\n }\n flex-wrap: wrap;\n"])), TagWrapper);
|
|
11990
12204
|
var TagList = function TagList(_ref) {
|
|
11991
12205
|
var tagsConfig = _ref.tagsConfig;
|
|
11992
12206
|
return React__default.createElement(TagListWrapper$1, null, tagsConfig.map(function (tagProps, index) {
|
|
@@ -12028,13 +12242,13 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
|
|
|
12028
12242
|
};
|
|
12029
12243
|
|
|
12030
12244
|
var _excluded$H = ["design", "size", "position", "text"];
|
|
12031
|
-
var _templateObject$
|
|
12032
|
-
var Container$W = styled.div(_templateObject$
|
|
12033
|
-
var Title$6 = styled.div(_templateObject2$
|
|
12245
|
+
var _templateObject$1q, _templateObject2$1b, _templateObject3$14, _templateObject4$Z, _templateObject5$T, _templateObject6$F;
|
|
12246
|
+
var Container$W = styled.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose([""])));
|
|
12247
|
+
var Title$6 = styled.div(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n color: var(--grey-10);\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 17px;\n"])), function (_ref) {
|
|
12034
12248
|
var theme = _ref.theme;
|
|
12035
12249
|
return theme.fontFamily.ui;
|
|
12036
12250
|
});
|
|
12037
|
-
var ButtonsWrapper$2 = styled.div(_templateObject3$
|
|
12251
|
+
var ButtonsWrapper$2 = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12038
12252
|
var LeftButtons = styled.div(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n button {\n margin: 0 10px 10px 0;\n }\n"])));
|
|
12039
12253
|
var RightButtons = styled.div(_templateObject5$T || (_templateObject5$T = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
12040
12254
|
var SelectedResults = styled.div(_templateObject6$F || (_templateObject6$F = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n margin-top: 29px;\n min-height: 19px;\n color: var(--grey-10);\n font-size: 12px;\n"])), function (_ref2) {
|
|
@@ -12078,11 +12292,11 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12078
12292
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
12079
12293
|
};
|
|
12080
12294
|
|
|
12081
|
-
var _templateObject$
|
|
12295
|
+
var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$C, _templateObject8$u, _templateObject9$o;
|
|
12082
12296
|
var WIDTH_PER_NUMBER = 12;
|
|
12083
|
-
var PaginationContainer = styled.div(_templateObject$
|
|
12084
|
-
var StaticPageCount = styled.div(_templateObject2$
|
|
12085
|
-
var StyledInput$3 = styled.input(_templateObject3$
|
|
12297
|
+
var PaginationContainer = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-top: 20px;\n padding-bottom: 20px;\n width: 100%;\n height: fit-content;\n margin-right: 10px;\n white-space: nowrap;\n gap: 40px;\n vertical-align: baseline;\n"])));
|
|
12298
|
+
var StaticPageCount = styled.div(_templateObject2$1c || (_templateObject2$1c = _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"])));
|
|
12299
|
+
var StyledInput$3 = styled.input(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n ", ";\n color: var(--input-color-default);\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) {
|
|
12086
12300
|
var maxWidth = _ref.maxWidth;
|
|
12087
12301
|
return maxWidth ? maxWidth : '40px';
|
|
12088
12302
|
}, WIDTH_PER_NUMBER / 2);
|
|
@@ -12103,7 +12317,7 @@ var ArrowButton = styled.button(_templateObject8$u || (_templateObject8$u = _tag
|
|
|
12103
12317
|
var active = _ref5.active;
|
|
12104
12318
|
return active ? '1' : '0.5';
|
|
12105
12319
|
});
|
|
12106
|
-
var ItemsSelectWrapper = styled.div(_templateObject9$
|
|
12320
|
+
var ItemsSelectWrapper = styled.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", " {\n width: ", ";\n }\n"])), SelectWrapper, function (_ref6) {
|
|
12107
12321
|
var width = _ref6.width;
|
|
12108
12322
|
return width ? width : "60px";
|
|
12109
12323
|
});
|
|
@@ -12304,10 +12518,10 @@ var Pagination = function Pagination(props) {
|
|
|
12304
12518
|
})))));
|
|
12305
12519
|
};
|
|
12306
12520
|
|
|
12307
|
-
var _templateObject$
|
|
12308
|
-
var Container$X = styled.div(_templateObject$
|
|
12309
|
-
var Title$7 = styled.div(_templateObject2$
|
|
12310
|
-
var MessageBox$1 = styled.div(_templateObject3$
|
|
12521
|
+
var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V;
|
|
12522
|
+
var Container$X = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose([""])));
|
|
12523
|
+
var Title$7 = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n font-size: 20px;\n font-weight: 400;\n text-align: left;\n text-shadow: 0px 0px 10px var(--white-a5);\n text-decoration: none;\n color: var(--grey-11);\n"])));
|
|
12524
|
+
var MessageBox$1 = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 400;\n line-height: 25px;\n text-align: left;\n text-decoration: none;\n color: var(--grey-11);\n margin: 28px 0;\n"])));
|
|
12311
12525
|
var StyledButton$6 = styled(Button)(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
|
|
12312
12526
|
var ButtonsGroup$1 = styled.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n text-align: right;\n display: flex;\n justify-content: flex-end;\n"])));
|
|
12313
12527
|
var ConfirmationModal = function ConfirmationModal(_ref) {
|
|
@@ -12346,9 +12560,9 @@ var ConfirmationModal = function ConfirmationModal(_ref) {
|
|
|
12346
12560
|
}, rightButtonText)));
|
|
12347
12561
|
};
|
|
12348
12562
|
|
|
12349
|
-
var _templateObject$
|
|
12350
|
-
var ExtraActionIcon = styled.div(_templateObject$
|
|
12351
|
-
var ExtraAction = styled.button(_templateObject2$
|
|
12563
|
+
var _templateObject$1t, _templateObject2$1e;
|
|
12564
|
+
var ExtraActionIcon = styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
|
|
12565
|
+
var ExtraAction = styled.button(_templateObject2$1e || (_templateObject2$1e = _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);
|
|
12352
12566
|
var UtilityHeaderShare = function UtilityHeaderShare(_ref) {
|
|
12353
12567
|
var show = _ref.show,
|
|
12354
12568
|
link = _ref.link,
|
|
@@ -12383,13 +12597,13 @@ var UtilityHeaderShare = function UtilityHeaderShare(_ref) {
|
|
|
12383
12597
|
})), copyActionText);
|
|
12384
12598
|
};
|
|
12385
12599
|
|
|
12386
|
-
var _templateObject$
|
|
12387
|
-
var BackLinkIcon = styled.div(_templateObject$
|
|
12388
|
-
var BackLink = styled(Link)(_templateObject2$
|
|
12600
|
+
var _templateObject$1u, _templateObject2$1f, _templateObject3$17;
|
|
12601
|
+
var BackLinkIcon = styled.div(_templateObject$1u || (_templateObject$1u = _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"])));
|
|
12602
|
+
var BackLink = styled(Link)(_templateObject2$1f || (_templateObject2$1f = _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) {
|
|
12389
12603
|
return props.$iconInGutter ? '-24px' : '0';
|
|
12390
12604
|
}, BackLinkIcon, BackLinkIcon, function (_ref) {
|
|
12391
12605
|
var $showDivider = _ref.$showDivider;
|
|
12392
|
-
return $showDivider && css(_templateObject3$
|
|
12606
|
+
return $showDivider && css(_templateObject3$17 || (_templateObject3$17 = _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 "])));
|
|
12393
12607
|
});
|
|
12394
12608
|
var UtilityHeaderBack = function UtilityHeaderBack(_ref2) {
|
|
12395
12609
|
var _ref2$show = _ref2.show,
|
|
@@ -12414,10 +12628,10 @@ var UtilityHeaderBack = function UtilityHeaderBack(_ref2) {
|
|
|
12414
12628
|
})), label);
|
|
12415
12629
|
};
|
|
12416
12630
|
|
|
12417
|
-
var _templateObject$
|
|
12418
|
-
var Container$Y = styled.div(_templateObject$
|
|
12419
|
-
var LeftArea = styled.div(_templateObject2$
|
|
12420
|
-
var Breadcrumbs = styled.div(_templateObject3$
|
|
12631
|
+
var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$10, _templateObject5$W, _templateObject6$H, _templateObject7$D, _templateObject8$v;
|
|
12632
|
+
var Container$Y = styled.div(_templateObject$1v || (_templateObject$1v = _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"])));
|
|
12633
|
+
var LeftArea = styled.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
|
|
12634
|
+
var Breadcrumbs = styled.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
12421
12635
|
var Breadcrumb = styled.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n\n"])));
|
|
12422
12636
|
var BreadcrumbIcon = styled.div(_templateObject5$W || (_templateObject5$W = _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"])));
|
|
12423
12637
|
var HomeIcon = styled(BreadcrumbIcon)(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n padding-bottom: 1px;\n svg path {\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n"])));
|
|
@@ -12478,10 +12692,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
12478
12692
|
}, children);
|
|
12479
12693
|
};
|
|
12480
12694
|
|
|
12481
|
-
var _templateObject$
|
|
12482
|
-
var Container$Z = styled.div(_templateObject$
|
|
12483
|
-
var HeaderArea = styled.div(_templateObject2$
|
|
12484
|
-
var TabArea = styled.div(_templateObject3$
|
|
12695
|
+
var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$11, _templateObject5$X;
|
|
12696
|
+
var Container$Z = styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
|
|
12697
|
+
var HeaderArea = styled.div(_templateObject2$1h || (_templateObject2$1h = _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"])));
|
|
12698
|
+
var TabArea = styled.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-4);\n"])));
|
|
12485
12699
|
var TabAreaInner = styled.div(_templateObject4$11 || (_templateObject4$11 = _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"])));
|
|
12486
12700
|
var Content = styled.div(_templateObject5$X || (_templateObject5$X = _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"])));
|
|
12487
12701
|
var ContentLayout = function ContentLayout(_ref) {
|
|
@@ -12499,12 +12713,12 @@ var ContentLayout = function ContentLayout(_ref) {
|
|
|
12499
12713
|
}, 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));
|
|
12500
12714
|
};
|
|
12501
12715
|
|
|
12502
|
-
var _templateObject$
|
|
12503
|
-
var FullWidthContainer = styled.div(_templateObject$
|
|
12716
|
+
var _templateObject$1x, _templateObject2$1i;
|
|
12717
|
+
var FullWidthContainer = styled.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
|
|
12504
12718
|
var $contentHeight = _ref.$contentHeight;
|
|
12505
12719
|
return $contentHeight + 'px';
|
|
12506
12720
|
});
|
|
12507
|
-
var FullWidthInner = styled.div(_templateObject2$
|
|
12721
|
+
var FullWidthInner = styled.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n input {width: 100%;}\n"])));
|
|
12508
12722
|
var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
|
|
12509
12723
|
var children = _ref2.children;
|
|
12510
12724
|
var innerElement = useRef(null);
|
|
@@ -12523,10 +12737,10 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
|
|
|
12523
12737
|
}, children));
|
|
12524
12738
|
};
|
|
12525
12739
|
|
|
12526
|
-
var _templateObject$
|
|
12527
|
-
var Inner$1 = styled.div(_templateObject$
|
|
12528
|
-
var Line = styled.div(_templateObject2$
|
|
12529
|
-
var IconContainer$3 = styled.div(_templateObject3$
|
|
12740
|
+
var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$12, _templateObject5$Y, _templateObject6$I, _templateObject7$E, _templateObject8$w;
|
|
12741
|
+
var Inner$1 = styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
12742
|
+
var Line = styled.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
|
|
12743
|
+
var IconContainer$3 = styled.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
|
|
12530
12744
|
var IconDefault = styled.svg(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
|
|
12531
12745
|
var $layout = _ref.$layout;
|
|
12532
12746
|
return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
|
|
@@ -12591,12 +12805,12 @@ var ResizeLine = function ResizeLine(_ref4) {
|
|
|
12591
12805
|
}))), React__default.createElement(Line, null)));
|
|
12592
12806
|
};
|
|
12593
12807
|
|
|
12594
|
-
var _templateObject$
|
|
12595
|
-
var DebugData = styled.div(_templateObject$
|
|
12596
|
-
var MainArea = styled.div(_templateObject2$
|
|
12808
|
+
var _templateObject$1z, _templateObject2$1k, _templateObject3$1b, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$p, _templateObject10$j, _templateObject11$c, _templateObject12$a, _templateObject13$9, _templateObject14$8, _templateObject15$6, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
|
|
12809
|
+
var DebugData = styled.div(_templateObject$1z || (_templateObject$1z = _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"])));
|
|
12810
|
+
var MainArea = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
12597
12811
|
var $layout = _ref.$layout,
|
|
12598
12812
|
$minDimension = _ref.$minDimension;
|
|
12599
|
-
return $layout === 'vertical' ? css(_templateObject3$
|
|
12813
|
+
return $layout === 'vertical' ? css(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
|
|
12600
12814
|
});
|
|
12601
12815
|
var SideAreaInner = styled.div(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n height: 100%;\n transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
|
|
12602
12816
|
var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _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) {
|
|
@@ -12614,15 +12828,15 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
|
|
|
12614
12828
|
var $layout = _ref5.$layout,
|
|
12615
12829
|
$collapseState = _ref5.$collapseState,
|
|
12616
12830
|
$minDimension = _ref5.$minDimension;
|
|
12617
|
-
return $collapseState === 'collapsing' ? css(_templateObject9$
|
|
12831
|
+
return $collapseState === 'collapsing' ? css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
|
|
12618
12832
|
}, function (_ref6) {
|
|
12619
12833
|
var $collapseState = _ref6.$collapseState;
|
|
12620
|
-
return $collapseState === 'collapsed' ? css(_templateObject10$
|
|
12834
|
+
return $collapseState === 'collapsed' ? css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
12621
12835
|
}, function (_ref7) {
|
|
12622
12836
|
var $layout = _ref7.$layout,
|
|
12623
12837
|
$collapseState = _ref7.$collapseState,
|
|
12624
12838
|
$minDimension = _ref7.$minDimension;
|
|
12625
|
-
return $collapseState === 'peeking' ? css(_templateObject11$
|
|
12839
|
+
return $collapseState === 'peeking' ? css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
12626
12840
|
}, function (_ref8) {
|
|
12627
12841
|
var $layout = _ref8.$layout,
|
|
12628
12842
|
$collapseState = _ref8.$collapseState,
|
|
@@ -12935,12 +13149,12 @@ var clampInt = function clampInt(value, lower, upper) {
|
|
|
12935
13149
|
return clampedInt;
|
|
12936
13150
|
};
|
|
12937
13151
|
|
|
12938
|
-
var _templateObject$
|
|
13152
|
+
var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$14, _templateObject5$_, _templateObject6$K, _templateObject7$G;
|
|
12939
13153
|
var MOBILE_CLOSE_HEIGHT = 50;
|
|
12940
13154
|
var MOBILE_NAVBAR_HEIGHT = 68;
|
|
12941
|
-
var Layout = styled.div(_templateObject$
|
|
12942
|
-
var MobileLayout = styled.div(_templateObject2$
|
|
12943
|
-
var Content$1 = styled.div(_templateObject3$
|
|
13155
|
+
var Layout = styled.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
13156
|
+
var MobileLayout = styled.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose([""])));
|
|
13157
|
+
var Content$1 = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
|
|
12944
13158
|
var maxWidth = _ref.maxWidth;
|
|
12945
13159
|
return maxWidth && css(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
|
|
12946
13160
|
});
|
|
@@ -12952,23 +13166,23 @@ var ContentArea = styled.div(_templateObject6$K || (_templateObject6$K = _tagged
|
|
|
12952
13166
|
return legacyLayout && css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
|
|
12953
13167
|
});
|
|
12954
13168
|
|
|
12955
|
-
var _templateObject$
|
|
12956
|
-
var ContextTitle = styled.div(_templateObject$
|
|
13169
|
+
var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$q, _templateObject10$k, _templateObject11$d, _templateObject12$b, _templateObject13$a, _templateObject14$9, _templateObject15$7;
|
|
13170
|
+
var ContextTitle = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n opacity: 0;\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref) {
|
|
12957
13171
|
var compact = _ref.compact;
|
|
12958
|
-
return compact && css(_templateObject2$
|
|
13172
|
+
return compact && css(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
12959
13173
|
});
|
|
12960
|
-
var ContextIcon$1 = styled.div(_templateObject3$
|
|
13174
|
+
var ContextIcon$1 = styled.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n background-color: var(--global-menu-icon-background-default);\n transition: background-color var(--speed-fast) var(--easing-primary-out);\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"])));
|
|
12961
13175
|
var ContextIndicator = styled.div(_templateObject4$15 || (_templateObject4$15 = _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 opacity: 0;\n transition: opacity 0 var(--easing-primary-out);\n\n svg {\n display: block;\n height: 12px;\n width: 12px;\n }\n"])));
|
|
12962
13176
|
var ContextActionBaseCSS$1 = css(_templateObject5$$ || (_templateObject5$$ = _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 font-family: var(--font-ui);\n font-weight: 500;\n font-size: 16px;\n color: var(--grey-11);\n\n &:hover{\n color: var(--grey-12);\n }\n"])));
|
|
12963
13177
|
var StyledAnchor = styled.a(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
|
|
12964
13178
|
var ExternalIconWrapper = styled.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
12965
13179
|
var ContextWrapper = styled.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref2) {
|
|
12966
13180
|
var $menuOpen = _ref2.$menuOpen;
|
|
12967
|
-
return $menuOpen && css(_templateObject9$
|
|
13181
|
+
return $menuOpen && css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
12968
13182
|
}, ContextIcon$1, IconWrapper);
|
|
12969
|
-
var ContextActionA = styled(Link)(_templateObject10$
|
|
13183
|
+
var ContextActionA = styled(Link)(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
|
|
12970
13184
|
var $menuOpen = _ref3.$menuOpen;
|
|
12971
|
-
return $menuOpen && css(_templateObject11$
|
|
13185
|
+
return $menuOpen && css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
12972
13186
|
}, ContextIcon$1, IconWrapper, function (_ref4) {
|
|
12973
13187
|
var $isActive = _ref4.$isActive;
|
|
12974
13188
|
return $isActive && css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n color: var(--grey-12);\n\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
|
|
@@ -13151,19 +13365,19 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
13151
13365
|
};
|
|
13152
13366
|
};
|
|
13153
13367
|
|
|
13154
|
-
var _templateObject$
|
|
13155
|
-
var Submenu = styled.ul(_templateObject$
|
|
13156
|
-
var SubmenuHeader = styled.div(_templateObject2$
|
|
13157
|
-
var SubmenuContainerInner = styled.div(_templateObject3$
|
|
13368
|
+
var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$r, _templateObject10$l, _templateObject11$e, _templateObject12$c, _templateObject13$b;
|
|
13369
|
+
var Submenu = styled.ul(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
13370
|
+
var SubmenuHeader = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
13371
|
+
var SubmenuContainerInner = styled.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
13158
13372
|
var SubmenuItemTitle = styled.span(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose(["\n display: block;\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n"])));
|
|
13159
13373
|
var SubmenuItemLink = styled(Link)(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
|
|
13160
13374
|
var ExternalIconWrapper$1 = styled.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
13161
13375
|
var SubmenuItemAnchor = styled.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
13162
13376
|
var SubmenuItem = styled.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
|
|
13163
13377
|
var isActive = _ref.isActive;
|
|
13164
|
-
return css(_templateObject9$
|
|
13378
|
+
return css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
13165
13379
|
});
|
|
13166
|
-
var SubmenuContainer = styled.div(_templateObject11$
|
|
13380
|
+
var SubmenuContainer = styled.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
13167
13381
|
var ContextContainer = styled.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
|
|
13168
13382
|
var mobileMenu = _ref2.mobileMenu;
|
|
13169
13383
|
return mobileMenu ? '30px' : '70px';
|
|
@@ -13260,20 +13474,20 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
13260
13474
|
return output;
|
|
13261
13475
|
};
|
|
13262
13476
|
|
|
13263
|
-
var _templateObject$
|
|
13264
|
-
var Logo = styled(Link)(_templateObject$
|
|
13265
|
-
var LogoMark = styled.div(_templateObject2$
|
|
13266
|
-
var LogoType = styled.div(_templateObject3$
|
|
13477
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$s, _templateObject10$m, _templateObject11$f, _templateObject12$d, _templateObject13$c, _templateObject14$a;
|
|
13478
|
+
var Logo = styled(Link)(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
|
|
13479
|
+
var LogoMark = styled.div(_templateObject2$1o || (_templateObject2$1o = _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"])));
|
|
13480
|
+
var LogoType = styled.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
|
|
13267
13481
|
var SVGObject = styled.object(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose([""])));
|
|
13268
13482
|
var SVGObjectText = styled.object(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
|
|
13269
13483
|
var NavigationContainer = styled.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose([""])));
|
|
13270
13484
|
var MenuFooter = styled.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
|
|
13271
13485
|
var FooterItemContainer = styled.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
13272
|
-
var PushContainer = styled.div(_templateObject9$
|
|
13486
|
+
var PushContainer = styled.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
|
|
13273
13487
|
var isPinned = _ref.isPinned;
|
|
13274
|
-
return css(_templateObject10$
|
|
13488
|
+
return css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
|
|
13275
13489
|
});
|
|
13276
|
-
var Container$10 = styled.div(_templateObject11$
|
|
13490
|
+
var Container$10 = styled.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref2) {
|
|
13277
13491
|
var open = _ref2.open,
|
|
13278
13492
|
desktopSize = _ref2.desktopSize;
|
|
13279
13493
|
return css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
@@ -13378,17 +13592,17 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13378
13592
|
})) : null))), document.body));
|
|
13379
13593
|
};
|
|
13380
13594
|
|
|
13381
|
-
var _templateObject$
|
|
13382
|
-
var MetaConatiner = styled.div(_templateObject$
|
|
13383
|
-
var LabelTitle = styled.div(_templateObject2$
|
|
13384
|
-
var LabelContent = styled.div(_templateObject3$
|
|
13595
|
+
var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$t, _templateObject10$n;
|
|
13596
|
+
var MetaConatiner = styled.div(_templateObject$1E || (_templateObject$1E = _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"])));
|
|
13597
|
+
var LabelTitle = styled.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: var(--font-ui);\n margin-top: 2px;\n"])));
|
|
13598
|
+
var LabelContent = styled.div(_templateObject3$1g || (_templateObject3$1g = _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"])));
|
|
13385
13599
|
var LabelNotes = styled.div(_templateObject4$18 || (_templateObject4$18 = _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 font-family: var(--font-data);\n"])));
|
|
13386
13600
|
var TitleContainer = styled.div(_templateObject5$12 || (_templateObject5$12 = _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"])));
|
|
13387
13601
|
var Container$11 = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
|
|
13388
13602
|
var TitleBox = styled.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
13389
13603
|
var IconBox = styled.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$11);
|
|
13390
|
-
var CopyTextBox = styled.pre(_templateObject9$
|
|
13391
|
-
var CopyBox = styled.div(_templateObject10$
|
|
13604
|
+
var CopyTextBox = styled.pre(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: var(--font-data);\n right:10px;\n margin-top: -23px;\n"])));
|
|
13605
|
+
var CopyBox = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n"])));
|
|
13392
13606
|
var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
13393
13607
|
var item = _ref.item,
|
|
13394
13608
|
onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
|
|
@@ -13451,10 +13665,10 @@ var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
|
13451
13665
|
}, notes) : null)));
|
|
13452
13666
|
};
|
|
13453
13667
|
|
|
13454
|
-
var _templateObject$
|
|
13455
|
-
var Container$12 = styled.div(_templateObject$
|
|
13456
|
-
var ColumnContainer = styled.div(_templateObject2$
|
|
13457
|
-
var Title$8 = styled.div(_templateObject3$
|
|
13668
|
+
var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$19;
|
|
13669
|
+
var Container$12 = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid var(--dividing-line);\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])));
|
|
13670
|
+
var ColumnContainer = styled.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
|
|
13671
|
+
var Title$8 = styled.div(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
|
|
13458
13672
|
var SubTitle$1 = styled.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: 10px;\n line-height: 12px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n padding-top: 2px;\n opacity: 0.5;\n"])));
|
|
13459
13673
|
var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
13460
13674
|
var _ref$icon = _ref.icon,
|
|
@@ -13472,19 +13686,19 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13472
13686
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13473
13687
|
};
|
|
13474
13688
|
|
|
13475
|
-
var _templateObject$
|
|
13476
|
-
var DrawerTop = styled.div(_templateObject$
|
|
13477
|
-
var DrawerBottom = styled.div(_templateObject2$
|
|
13478
|
-
var DrawerHeader = styled.h2(_templateObject3$
|
|
13689
|
+
var _templateObject$1G, _templateObject2$1r, _templateObject3$1i, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$u, _templateObject10$o, _templateObject11$g, _templateObject12$e, _templateObject13$d, _templateObject14$b;
|
|
13690
|
+
var DrawerTop = styled.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose([""])));
|
|
13691
|
+
var DrawerBottom = styled.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
|
|
13692
|
+
var DrawerHeader = styled.h2(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n padding: 0;\n margin: 0 0 5px;\n"])));
|
|
13479
13693
|
var CurrentUser = styled.div(_templateObject4$1a || (_templateObject4$1a = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n border-bottom: var(--dividing-line) 1px solid;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
|
|
13480
13694
|
var UserOptions = styled.div(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
|
|
13481
13695
|
var Logout = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
|
|
13482
13696
|
var LinkMenu = styled.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
13483
13697
|
var LinkMenuItem = styled.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
13484
|
-
var IconWrapperFooter = styled.div(_templateObject9$
|
|
13485
|
-
var LinkMenuItemA = styled(Link)(_templateObject10$
|
|
13698
|
+
var IconWrapperFooter = styled.div(_templateObject9$u || (_templateObject9$u = _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"])));
|
|
13699
|
+
var LinkMenuItemA = styled(Link)(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 400;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
|
|
13486
13700
|
var isActive = _ref.isActive;
|
|
13487
|
-
return isActive && css(_templateObject11$
|
|
13701
|
+
return isActive && css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
|
|
13488
13702
|
});
|
|
13489
13703
|
var FooterMeta = styled.div(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
|
|
13490
13704
|
var icon = _ref2.icon;
|
|
@@ -13625,10 +13839,10 @@ var UserMenu = function UserMenu(_ref4) {
|
|
|
13625
13839
|
}, title)) : null));
|
|
13626
13840
|
};
|
|
13627
13841
|
|
|
13628
|
-
var _templateObject$
|
|
13629
|
-
var Container$13 = styled.div(_templateObject$
|
|
13630
|
-
var ImgWrapper = styled.div(_templateObject2$
|
|
13631
|
-
var EmptyImg = styled.div(_templateObject3$
|
|
13842
|
+
var _templateObject$1H, _templateObject2$1s, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$Q, _templateObject7$M, _templateObject8$D;
|
|
13843
|
+
var Container$13 = styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
|
|
13844
|
+
var ImgWrapper = styled.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
|
|
13845
|
+
var EmptyImg = styled.div(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
|
|
13632
13846
|
var Image$2 = styled.div(_templateObject4$1b || (_templateObject4$1b = _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) {
|
|
13633
13847
|
return p.image;
|
|
13634
13848
|
}, function (p) {
|
|
@@ -13648,10 +13862,10 @@ var NotificationItem = function NotificationItem(_ref) {
|
|
|
13648
13862
|
}) : 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)));
|
|
13649
13863
|
};
|
|
13650
13864
|
|
|
13651
|
-
var _templateObject$
|
|
13652
|
-
var Container$14 = styled.div(_templateObject$
|
|
13653
|
-
var StatusContainer = styled.h2(_templateObject2$
|
|
13654
|
-
var NotificationWrapper = styled.div(_templateObject3$
|
|
13865
|
+
var _templateObject$1I, _templateObject2$1t, _templateObject3$1k;
|
|
13866
|
+
var Container$14 = styled.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
13867
|
+
var StatusContainer = styled.h2(_templateObject2$1t || (_templateObject2$1t = _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: var(--dividing-line) 1px solid;\n margin: 0;\n"])));
|
|
13868
|
+
var NotificationWrapper = styled.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n border-bottom: var(--dividing-line) 1px solid;\n"])));
|
|
13655
13869
|
var renderNotifications = function renderNotifications(items, type) {
|
|
13656
13870
|
return items.map(function (item, index) {
|
|
13657
13871
|
return React__default.createElement(NotificationWrapper, {
|
|
@@ -13674,20 +13888,20 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13674
13888
|
return React__default.createElement(Container$14, null, unread && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13675
13889
|
};
|
|
13676
13890
|
|
|
13677
|
-
var _templateObject$
|
|
13678
|
-
var CoreStyle = css(_templateObject$
|
|
13679
|
-
var ContainerStatic = styled.div(_templateObject2$
|
|
13891
|
+
var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$v, _templateObject10$p, _templateObject11$h, _templateObject12$f, _templateObject13$e;
|
|
13892
|
+
var CoreStyle = css(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 32px;\n padding: 8px;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n border-radius: 3px;\n\n font-family: Lato;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 85.714% */\n white-space: nowrap;\n\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
|
|
13893
|
+
var ContainerStatic = styled.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13680
13894
|
var themeColor = _ref.themeColor;
|
|
13681
|
-
return themeColor ? css(_templateObject3$
|
|
13895
|
+
return themeColor ? css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13682
13896
|
});
|
|
13683
13897
|
var DefaultText = styled.span(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
13684
13898
|
var LinkText = styled.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
|
|
13685
13899
|
var ContainerLinked = styled.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n a {\n ", ";\n\n text-decoration: none;\n\n ", ";\n\n &:hover {\n ", ";\n }\n }\n"])), CoreStyle, function (_ref2) {
|
|
13686
13900
|
var themeColor = _ref2.themeColor;
|
|
13687
|
-
return themeColor ? css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$
|
|
13901
|
+
return themeColor ? css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13688
13902
|
}, function (_ref3) {
|
|
13689
13903
|
var themeColor = _ref3.themeColor;
|
|
13690
|
-
return themeColor ? css(_templateObject10$
|
|
13904
|
+
return themeColor ? css(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n background-color: var(--", "-9);\n border: 2px solid var(--", "-9);\n color: var(--white-12);\n "])), themeColor, themeColor) : css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
|
|
13691
13905
|
});
|
|
13692
13906
|
var Container$15 = styled.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13693
13907
|
var ready = _ref4.ready,
|
|
@@ -13759,10 +13973,10 @@ var TopBarBadge = function TopBarBadge(_ref5) {
|
|
|
13759
13973
|
}), badgeComponent);
|
|
13760
13974
|
};
|
|
13761
13975
|
|
|
13762
|
-
var _templateObject$
|
|
13763
|
-
var Container$16 = styled.div(_templateObject$
|
|
13764
|
-
var RightArea$1 = styled.div(_templateObject2$
|
|
13765
|
-
var SearchBar = styled.div(_templateObject3$
|
|
13976
|
+
var _templateObject$1K, _templateObject2$1v, _templateObject3$1m, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$w, _templateObject10$q, _templateObject11$i, _templateObject12$g, _templateObject13$f;
|
|
13977
|
+
var Container$16 = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
|
|
13978
|
+
var RightArea$1 = styled.div(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13979
|
+
var SearchBar = styled.div(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
13766
13980
|
var IconWrapper$4 = styled.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n flex: 0;\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"])));
|
|
13767
13981
|
var SearchInput = styled.input(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-data);\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent;\n color: var(--grey-10);\n font-size: 14px;\n\n &::placeholder {\n font-family: var(--font-data);\n font-weight: 400;\n font-style: italic;\n font-size: 14px;\n color: var(--grey-8);\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), removeAutoFillStyle);
|
|
13768
13982
|
var ButtonArea = styled.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
|
|
@@ -13771,10 +13985,10 @@ var DrawerToggle = styled.button.attrs({
|
|
|
13771
13985
|
type: 'button'
|
|
13772
13986
|
})(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n position: relative;\n flex: 0 56px;\n width: 56px;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: none;\n outline: none;\n cursor: pointer;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n height: 5px;\n background-color: transparent;\n border-radius: 2px 2px 0 0;\n }\n\n transition: background-color var(--speed-normal) var(--easing-primary-out);\n\n svg {\n transition: transform var(--speed-normal) var(--easing-primary-out);\n }\n\n &:hover {\n opacity: 0.9;\n &::after {\n background-color: var(--primary-6);\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
13773
13987
|
var isActive = _ref.isActive;
|
|
13774
|
-
return isActive && css(_templateObject9$
|
|
13988
|
+
return isActive && css(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
|
|
13775
13989
|
});
|
|
13776
|
-
var DrawerPortalWrapper = styled.div(_templateObject10$
|
|
13777
|
-
var Drawer = styled.div(_templateObject11$
|
|
13990
|
+
var DrawerPortalWrapper = styled.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
|
|
13991
|
+
var Drawer = styled.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n\n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
|
|
13778
13992
|
var baseWidth = _ref2.baseWidth;
|
|
13779
13993
|
return baseWidth ? baseWidth : "200px";
|
|
13780
13994
|
}, function (_ref3) {
|
|
@@ -13915,8 +14129,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13915
14129
|
}, customDrawer.customComponent)), document.body));
|
|
13916
14130
|
};
|
|
13917
14131
|
|
|
13918
|
-
var _templateObject$
|
|
13919
|
-
var TabListWrapper = styled.div(_templateObject$
|
|
14132
|
+
var _templateObject$1L;
|
|
14133
|
+
var TabListWrapper = styled.div(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
|
|
13920
14134
|
var TabList = function TabList(_ref) {
|
|
13921
14135
|
var children = _ref.children,
|
|
13922
14136
|
defaultTabId = _ref.defaultTabId;
|
|
@@ -13929,11 +14143,11 @@ var TabList = function TabList(_ref) {
|
|
|
13929
14143
|
};
|
|
13930
14144
|
|
|
13931
14145
|
var _excluded$I = ["children", "tabFor", "onClick"];
|
|
13932
|
-
var _templateObject$
|
|
13933
|
-
var TabComponent = styled.div(_templateObject$
|
|
13934
|
-
var TabLabel = styled.label(_templateObject2$
|
|
14146
|
+
var _templateObject$1M, _templateObject2$1w, _templateObject3$1n;
|
|
14147
|
+
var TabComponent = styled.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
|
|
14148
|
+
var TabLabel = styled.label(_templateObject2$1w || (_templateObject2$1w = _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) {
|
|
13935
14149
|
var theme = _ref.theme;
|
|
13936
|
-
return css(_templateObject3$
|
|
14150
|
+
return css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
13937
14151
|
}, function (_ref2) {
|
|
13938
14152
|
var active = _ref2.active;
|
|
13939
14153
|
return active ? '600' : '500';
|
|
@@ -13964,8 +14178,8 @@ var Tab = function Tab(_ref5) {
|
|
|
13964
14178
|
};
|
|
13965
14179
|
|
|
13966
14180
|
var _excluded$J = ["children", "tabId"];
|
|
13967
|
-
var _templateObject$
|
|
13968
|
-
var Container$17 = styled.div(_templateObject$
|
|
14181
|
+
var _templateObject$1N;
|
|
14182
|
+
var Container$17 = styled.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose(["\n"])));
|
|
13969
14183
|
var TabContent = function TabContent(_ref) {
|
|
13970
14184
|
var children = _ref.children,
|
|
13971
14185
|
tabId = _ref.tabId,
|
|
@@ -13976,11 +14190,11 @@ var TabContent = function TabContent(_ref) {
|
|
|
13976
14190
|
};
|
|
13977
14191
|
|
|
13978
14192
|
var _excluded$K = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
13979
|
-
var _templateObject$
|
|
13980
|
-
var Container$18 = styled.button(_templateObject$
|
|
13981
|
-
var LinkTab = styled.div(_templateObject2$
|
|
14193
|
+
var _templateObject$1O, _templateObject2$1x, _templateObject3$1o, _templateObject4$1e;
|
|
14194
|
+
var Container$18 = styled.button(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
14195
|
+
var LinkTab = styled.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
|
|
13982
14196
|
var theme = _ref.theme;
|
|
13983
|
-
return css(_templateObject3$
|
|
14197
|
+
return css(_templateObject3$1o || (_templateObject3$1o = _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);
|
|
13984
14198
|
}, function (_ref2) {
|
|
13985
14199
|
var isActive = _ref2.isActive,
|
|
13986
14200
|
theme = _ref2.theme;
|
|
@@ -14014,10 +14228,10 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14014
14228
|
};
|
|
14015
14229
|
|
|
14016
14230
|
var _excluded$L = ["icon", "title", "subtitle", "tabFor"];
|
|
14017
|
-
var _templateObject$
|
|
14018
|
-
var Container$19 = styled.div(_templateObject$
|
|
14231
|
+
var _templateObject$1P, _templateObject2$1y, _templateObject3$1p, _templateObject4$1f, _templateObject5$17, _templateObject6$T;
|
|
14232
|
+
var Container$19 = styled.div(_templateObject$1P || (_templateObject$1P = _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) {
|
|
14019
14233
|
var active = _ref.active;
|
|
14020
|
-
return active ? css(_templateObject2$
|
|
14234
|
+
return active ? css(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
14021
14235
|
}, IconWrapper);
|
|
14022
14236
|
var Title$a = styled.div(_templateObject4$1f || (_templateObject4$1f = _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) {
|
|
14023
14237
|
var theme = _ref2.theme;
|
|
@@ -14061,9 +14275,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
14061
14275
|
}), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
|
|
14062
14276
|
};
|
|
14063
14277
|
|
|
14064
|
-
var _templateObject$
|
|
14065
|
-
var Container$1a = styled.div(_templateObject$
|
|
14066
|
-
var TabListWrapper$1 = styled.div(_templateObject2$
|
|
14278
|
+
var _templateObject$1Q, _templateObject2$1z;
|
|
14279
|
+
var Container$1a = styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose([""])));
|
|
14280
|
+
var TabListWrapper$1 = styled.div(_templateObject2$1z || (_templateObject2$1z = _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) {
|
|
14067
14281
|
var paddingLeft = _ref.paddingLeft;
|
|
14068
14282
|
return paddingLeft ? paddingLeft : '87px';
|
|
14069
14283
|
});
|
|
@@ -14099,10 +14313,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
14099
14313
|
};
|
|
14100
14314
|
|
|
14101
14315
|
var _excluded$M = ["closeId", "closeText"];
|
|
14102
|
-
var _templateObject$
|
|
14103
|
-
var StyledButton$7 = styled.button(_templateObject$
|
|
14104
|
-
var IconContainer$4 = styled.div(_templateObject2$
|
|
14105
|
-
var TextWrapper$1 = styled.div(_templateObject3$
|
|
14316
|
+
var _templateObject$1R, _templateObject2$1A, _templateObject3$1q;
|
|
14317
|
+
var StyledButton$7 = styled.button(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n ", "\n \n font-family: var(--font-ui);\n background-color: var(--global-element-background);\n border-top: 1px solid var(--dividing-line);\n font-weight: 400;\n color: var(--grey-10);\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, MOBILE_CLOSE_HEIGHT);
|
|
14318
|
+
var IconContainer$4 = styled.div(_templateObject2$1A || (_templateObject2$1A = _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"])));
|
|
14319
|
+
var TextWrapper$1 = styled.div(_templateObject3$1q || (_templateObject3$1q = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
14106
14320
|
var CloseButton$1 = function CloseButton(_ref) {
|
|
14107
14321
|
var closeId = _ref.closeId,
|
|
14108
14322
|
_ref$closeText = _ref.closeText,
|
|
@@ -14121,9 +14335,9 @@ var CloseButton$1 = function CloseButton(_ref) {
|
|
|
14121
14335
|
})), React__default.createElement(TextWrapper$1, null, closeText));
|
|
14122
14336
|
};
|
|
14123
14337
|
|
|
14124
|
-
var _templateObject$
|
|
14125
|
-
var Container$1b = styled.div(_templateObject$
|
|
14126
|
-
var ContentWrapper = styled.div(_templateObject2$
|
|
14338
|
+
var _templateObject$1S, _templateObject2$1B;
|
|
14339
|
+
var Container$1b = styled.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
|
|
14340
|
+
var ContentWrapper = styled.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
14127
14341
|
var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
14128
14342
|
var closeId = _ref.closeId,
|
|
14129
14343
|
children = _ref.children;
|
|
@@ -14132,9 +14346,9 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
|
14132
14346
|
return selected === closeId ? null : React__default.createElement(Container$1b, null, React__default.createElement(ContentWrapper, null, children));
|
|
14133
14347
|
};
|
|
14134
14348
|
|
|
14135
|
-
var _templateObject$
|
|
14136
|
-
var Container$1c = styled.div(_templateObject$
|
|
14137
|
-
var ItemWrapper = styled.div(_templateObject2$
|
|
14349
|
+
var _templateObject$1T, _templateObject2$1C;
|
|
14350
|
+
var Container$1c = styled.div(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose([""])));
|
|
14351
|
+
var ItemWrapper = styled.div(_templateObject2$1C || (_templateObject2$1C = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
|
|
14138
14352
|
var MobileMenu = function MobileMenu(_ref) {
|
|
14139
14353
|
var content = _ref.content,
|
|
14140
14354
|
supportUrl = _ref.supportUrl,
|
|
@@ -14185,10 +14399,10 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
14185
14399
|
})));
|
|
14186
14400
|
};
|
|
14187
14401
|
|
|
14188
|
-
var _templateObject$
|
|
14189
|
-
var Logo$1 = styled(Link)(_templateObject$
|
|
14190
|
-
var LogoMark$1 = styled.div(_templateObject2$
|
|
14191
|
-
var SVGObject$1 = styled.object(_templateObject3$
|
|
14402
|
+
var _templateObject$1U, _templateObject2$1D, _templateObject3$1r;
|
|
14403
|
+
var Logo$1 = styled(Link)(_templateObject$1U || (_templateObject$1U = _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);
|
|
14404
|
+
var LogoMark$1 = styled.div(_templateObject2$1D || (_templateObject2$1D = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
|
|
14405
|
+
var SVGObject$1 = styled.object(_templateObject3$1r || (_templateObject3$1r = _taggedTemplateLiteralLoose([""])));
|
|
14192
14406
|
var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
14193
14407
|
var _ref$home = _ref.home,
|
|
14194
14408
|
home = _ref$home === void 0 ? "/" : _ref$home,
|
|
@@ -14208,8 +14422,8 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
14208
14422
|
};
|
|
14209
14423
|
|
|
14210
14424
|
var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
14211
|
-
var _templateObject$
|
|
14212
|
-
var Container$1d = styled.div(_templateObject$
|
|
14425
|
+
var _templateObject$1V;
|
|
14426
|
+
var Container$1d = styled.div(_templateObject$1V || (_templateObject$1V = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n\n z-index: 100;\n display: flex;\n flex-direction: column;\n"])));
|
|
14213
14427
|
var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
14214
14428
|
var closeId = _ref.closeId,
|
|
14215
14429
|
hasLanguage = _ref.hasLanguage,
|
|
@@ -14243,14 +14457,14 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
14243
14457
|
};
|
|
14244
14458
|
|
|
14245
14459
|
var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "supportText", "onLogout", "onLanguageToggle"];
|
|
14246
|
-
var _templateObject$
|
|
14460
|
+
var _templateObject$1W, _templateObject2$1E;
|
|
14247
14461
|
var CLOSE_ID = 'closeMenu';
|
|
14248
14462
|
var NOTI_TAB = 'notifications';
|
|
14249
14463
|
var USER_TAB = 'user';
|
|
14250
14464
|
var MENU_TAB = 'menu';
|
|
14251
14465
|
var CUSTOM_TAB = 'custom';
|
|
14252
|
-
var Container$1e = styled.nav(_templateObject$
|
|
14253
|
-
var HeaderContainer = styled.div(_templateObject2$
|
|
14466
|
+
var Container$1e = styled.nav(_templateObject$1W || (_templateObject$1W = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 99;\n"])));
|
|
14467
|
+
var HeaderContainer = styled.div(_templateObject2$1E || (_templateObject2$1E = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: ", "px;\n border-bottom: var(--dividing-line) 1px solid;\n\n ", " {\n flex-basis: 0;\n flex-grow: 3;\n }\n"])), MOBILE_NAVBAR_HEIGHT, TabListWrapper);
|
|
14254
14468
|
var MobileNavbar = function MobileNavbar(_ref) {
|
|
14255
14469
|
var content = _ref.content,
|
|
14256
14470
|
home = _ref.home,
|
|
@@ -14380,16 +14594,16 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14380
14594
|
};
|
|
14381
14595
|
|
|
14382
14596
|
var _excluded$Q = ["children"];
|
|
14383
|
-
var _templateObject$
|
|
14384
|
-
var Container$1f = styled.div(_templateObject$
|
|
14385
|
-
var LogoContainer = styled.div(_templateObject2$
|
|
14386
|
-
var LogoTopText = styled.div(_templateObject3$
|
|
14597
|
+
var _templateObject$1X, _templateObject2$1F, _templateObject3$1s, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$x;
|
|
14598
|
+
var Container$1f = styled.div(_templateObject$1X || (_templateObject$1X = _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"])));
|
|
14599
|
+
var LogoContainer = styled.div(_templateObject2$1F || (_templateObject2$1F = _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"])));
|
|
14600
|
+
var LogoTopText = styled.div(_templateObject3$1s || (_templateObject3$1s = _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"])));
|
|
14387
14601
|
var LogoBottomText = styled.div(_templateObject4$1g || (_templateObject4$1g = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 400;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
|
|
14388
14602
|
var SidebarBox = styled.div(_templateObject5$18 || (_templateObject5$18 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
14389
14603
|
var SidebarHeading = styled.div(_templateObject6$U || (_templateObject6$U = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
|
|
14390
14604
|
var SidebarLinkHeading = styled.div(_templateObject7$P || (_templateObject7$P = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14391
14605
|
var BackLink$1 = styled(Link)(_templateObject8$G || (_templateObject8$G = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14392
|
-
var SLink = styled(Link)(_templateObject9$
|
|
14606
|
+
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"])));
|
|
14393
14607
|
var SidebarLink = function SidebarLink(_ref) {
|
|
14394
14608
|
var title = _ref.title,
|
|
14395
14609
|
to = _ref.to;
|