scorer-ui-kit 2.6.3 → 2.6.5
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/index.d.ts +2 -2
- package/dist/Filters/molecules/DatePicker.d.ts +5 -0
- package/dist/Global/atoms/TopBarBadge.d.ts +4 -0
- package/dist/Global/index.d.ts +8 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +249 -110
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +249 -110
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -2381,7 +2381,7 @@ var InputContainer$1 = styled.div(_templateObject2$d || (_templateObject2$d = _t
|
|
|
2381
2381
|
var hasAction = _ref2.hasAction;
|
|
2382
2382
|
return hasAction && css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 200px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput$1);
|
|
2383
2383
|
});
|
|
2384
|
-
var UnitKey = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n flex: 0 1;\n font-size: 12px;\n font-family: var(--font-ui);\n color: var(--input-color-unit);\n margin-top: 1px;\n"])));
|
|
2384
|
+
var UnitKey = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n flex: 0 1;\n font-size: 12px;\n font-family: var(--font-ui);\n color: var(--input-color-unit);\n margin-top: 1px;\n white-space: nowrap;\n"])));
|
|
2385
2385
|
var Container$6 = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n \n ", ";\n"])), function (_ref3) {
|
|
2386
2386
|
var fieldState = _ref3.fieldState;
|
|
2387
2387
|
return fieldState && css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n &:focus-within ", " {\n transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n box-shadow: 0 3px 3px var(--input-", "-focused-shadow-color, var(--input-", "-shadow-color));\n }\n "])), InputContainer$1, fieldState, fieldState);
|
|
@@ -5590,7 +5590,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5590
5590
|
})))));
|
|
5591
5591
|
};
|
|
5592
5592
|
|
|
5593
|
-
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24;
|
|
5593
|
+
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
|
|
5594
5594
|
var initializeInterval = function initializeInterval(day) {
|
|
5595
5595
|
return {
|
|
5596
5596
|
start: set(day, {
|
|
@@ -5611,13 +5611,13 @@ var CalendarArea = styled.div(_templateObject6$k || (_templateObject6$k = _tagge
|
|
|
5611
5611
|
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"])));
|
|
5612
5612
|
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"])));
|
|
5613
5613
|
var IconWrap$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5614
|
-
var PaginateMonth = styled.button(_templateObject10$8 || (_templateObject10$8 = _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
|
|
5614
|
+
var PaginateMonth = styled.button(_templateObject10$8 || (_templateObject10$8 = _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);
|
|
5615
5615
|
var CalBody = styled.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5616
5616
|
var CalRow = styled.div(_templateObject12$5 || (_templateObject12$5 = _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"])));
|
|
5617
5617
|
var CalHRow = styled(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
|
|
5618
|
-
var CalCell = styled.
|
|
5618
|
+
var CalCell = styled.button(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-12);\n font-family: var(--font-data);\n"])), resetButtonStyles);
|
|
5619
5619
|
var CalHCell = styled(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--grey-a11);\n"])));
|
|
5620
|
-
var CalCellB = styled(CalCell)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: relative;\n text-align: center;\n font-size: 14px;\n font-weight: 400;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref) {
|
|
5620
|
+
var CalCellB = styled(CalCell)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: relative;\n text-align: center;\n font-size: 14px;\n font-weight: 400;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n &:disabled {\n color: var(--grey-6);\n cursor: not-allowed;\n\n ", "\n\n ", ";\n }\n\n"])), function (_ref) {
|
|
5621
5621
|
var thisMonth = _ref.thisMonth;
|
|
5622
5622
|
return !thisMonth && css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n color: var(--grey-a8);\n "])));
|
|
5623
5623
|
}, function (_ref2) {
|
|
@@ -5625,7 +5625,7 @@ var CalCellB = styled(CalCell)(_templateObject16$1 || (_templateObject16$1 = _ta
|
|
|
5625
5625
|
return isToday && css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--primary-a7);\n "])));
|
|
5626
5626
|
}, function (_ref3) {
|
|
5627
5627
|
var state = _ref3.state;
|
|
5628
|
-
return state !== 'single' && state !== 'start' && state !== 'end' && css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5628
|
+
return state !== 'single' && state !== 'start' && state !== 'end' && css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover:enabled {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5629
5629
|
}, function (_ref4) {
|
|
5630
5630
|
var state = _ref4.state;
|
|
5631
5631
|
return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n background: var(--primary-9);\n color: var(--white-1);\n "])));
|
|
@@ -5641,6 +5641,12 @@ var CalCellB = styled(CalCell)(_templateObject16$1 || (_templateObject16$1 = _ta
|
|
|
5641
5641
|
}, function (_ref8) {
|
|
5642
5642
|
var state = _ref8.state;
|
|
5643
5643
|
return state === 'inside' && css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n background: var(--primary-a5);\n border-radius: 0;\n opacity: 1;\n\n &:nth-child(7n+1), &:nth-child(7n){\n &::after {\n background: var(--primary-a5);\n display: block;\n content: '';\n position: absolute;\n left: -10px;\n width: 10px;\n top: 0;\n height: 40px;\n }\n }\n\n &:nth-child(7n)::after {\n left: auto;\n right: -10px;\n }\n "])));
|
|
5644
|
+
}, function (_ref9) {
|
|
5645
|
+
var state = _ref9.state;
|
|
5646
|
+
return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n color: var(--white-1);\n background: var(--red-a9);\n "])));
|
|
5647
|
+
}, function (_ref10) {
|
|
5648
|
+
var state = _ref10.state;
|
|
5649
|
+
return state === 'inside' && css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n color: var(--white-1);\n background: var(--red-a7);\n &:nth-child(7n+1), &:nth-child(7n){\n &::after {\n background: var(--red-a7);\n }\n }\n "])));
|
|
5644
5650
|
});
|
|
5645
5651
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5646
5652
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
@@ -5656,26 +5662,27 @@ var isDateInterval = function isDateInterval(value) {
|
|
|
5656
5662
|
}
|
|
5657
5663
|
return value.start instanceof Date && value.end instanceof Date;
|
|
5658
5664
|
};
|
|
5659
|
-
var DatePicker = function DatePicker(
|
|
5660
|
-
var
|
|
5661
|
-
dateMode =
|
|
5662
|
-
|
|
5663
|
-
timeMode =
|
|
5664
|
-
|
|
5665
|
-
dateTimeTextUpper =
|
|
5666
|
-
|
|
5667
|
-
dateTimeTextLower =
|
|
5668
|
-
|
|
5669
|
-
timeZoneTitle =
|
|
5670
|
-
|
|
5671
|
-
timeZoneValueTitle =
|
|
5672
|
-
|
|
5673
|
-
hasEmptyValue =
|
|
5674
|
-
|
|
5675
|
-
updateCallback =
|
|
5676
|
-
initialValue =
|
|
5677
|
-
|
|
5678
|
-
lang =
|
|
5665
|
+
var DatePicker = function DatePicker(_ref11) {
|
|
5666
|
+
var _ref11$dateMode = _ref11.dateMode,
|
|
5667
|
+
dateMode = _ref11$dateMode === void 0 ? 'interval' : _ref11$dateMode,
|
|
5668
|
+
_ref11$timeMode = _ref11.timeMode,
|
|
5669
|
+
timeMode = _ref11$timeMode === void 0 ? 'interval' : _ref11$timeMode,
|
|
5670
|
+
_ref11$dateTimeTextUp = _ref11.dateTimeTextUpper,
|
|
5671
|
+
dateTimeTextUpper = _ref11$dateTimeTextUp === void 0 ? 'From' : _ref11$dateTimeTextUp,
|
|
5672
|
+
_ref11$dateTimeTextLo = _ref11.dateTimeTextLower,
|
|
5673
|
+
dateTimeTextLower = _ref11$dateTimeTextLo === void 0 ? 'To' : _ref11$dateTimeTextLo,
|
|
5674
|
+
_ref11$timeZoneTitle = _ref11.timeZoneTitle,
|
|
5675
|
+
timeZoneTitle = _ref11$timeZoneTitle === void 0 ? 'Timezone' : _ref11$timeZoneTitle,
|
|
5676
|
+
_ref11$timeZoneValueT = _ref11.timeZoneValueTitle,
|
|
5677
|
+
timeZoneValueTitle = _ref11$timeZoneValueT === void 0 ? 'JST' : _ref11$timeZoneValueT,
|
|
5678
|
+
_ref11$hasEmptyValue = _ref11.hasEmptyValue,
|
|
5679
|
+
hasEmptyValue = _ref11$hasEmptyValue === void 0 ? false : _ref11$hasEmptyValue,
|
|
5680
|
+
_ref11$updateCallback = _ref11.updateCallback,
|
|
5681
|
+
updateCallback = _ref11$updateCallback === void 0 ? function () {} : _ref11$updateCallback,
|
|
5682
|
+
initialValue = _ref11.initialValue,
|
|
5683
|
+
availableRange = _ref11.availableRange,
|
|
5684
|
+
_ref11$lang = _ref11.lang,
|
|
5685
|
+
lang = _ref11$lang === void 0 ? 'en' : _ref11$lang;
|
|
5679
5686
|
var _useState = useState(getInitialValue(hasEmptyValue, initialValue)),
|
|
5680
5687
|
selectedRange = _useState[0],
|
|
5681
5688
|
setSelectedRange = _useState[1];
|
|
@@ -5741,9 +5748,9 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5741
5748
|
}
|
|
5742
5749
|
}, [dateMode, selectedRange, targetedDate]);
|
|
5743
5750
|
useEffect(function () {
|
|
5744
|
-
var
|
|
5745
|
-
start =
|
|
5746
|
-
end =
|
|
5751
|
+
var _ref12 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5752
|
+
start = _ref12.start,
|
|
5753
|
+
end = _ref12.end;
|
|
5747
5754
|
if (timeMode === 'interval' && isAfter(add(start, {
|
|
5748
5755
|
minutes: 1
|
|
5749
5756
|
}), end)) {
|
|
@@ -5757,16 +5764,16 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5757
5764
|
}
|
|
5758
5765
|
}, [selectedRange, timeMode]);
|
|
5759
5766
|
var updateStartDate = useCallback(function (start) {
|
|
5760
|
-
var
|
|
5761
|
-
end =
|
|
5767
|
+
var _ref13 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5768
|
+
end = _ref13.end;
|
|
5762
5769
|
setSelectedRange({
|
|
5763
5770
|
start: start,
|
|
5764
5771
|
end: end
|
|
5765
5772
|
});
|
|
5766
5773
|
}, [selectedRange]);
|
|
5767
5774
|
var updateEndDate = useCallback(function (end) {
|
|
5768
|
-
var
|
|
5769
|
-
start =
|
|
5775
|
+
var _ref14 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5776
|
+
start = _ref14.start;
|
|
5770
5777
|
setSelectedRange({
|
|
5771
5778
|
start: start,
|
|
5772
5779
|
end: end
|
|
@@ -5791,6 +5798,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5791
5798
|
setDateCallback: updateEndDate
|
|
5792
5799
|
})), React__default.createElement(TimeZoneOption, null, React__default.createElement(TimeZoneLabel, null, timeZoneTitle), React__default.createElement(TimeZoneValue, null, timeZoneValueTitle))), React__default.createElement(CalendarArea, null, React__default.createElement(CalendarHeader, null, React__default.createElement(PaginateMonth, {
|
|
5793
5800
|
type: 'button',
|
|
5801
|
+
disabled: isPrevMonthOutOfRange(focusedMonth, availableRange),
|
|
5794
5802
|
onClick: function onClick() {
|
|
5795
5803
|
return setFocusedMonth(addMonths(focusedMonth, -1));
|
|
5796
5804
|
}
|
|
@@ -5804,6 +5812,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5804
5812
|
locale: lang === 'ja' ? ja : enUS
|
|
5805
5813
|
})), React__default.createElement(PaginateMonth, {
|
|
5806
5814
|
type: 'button',
|
|
5815
|
+
disabled: isNextMonthOutOfRange(focusedMonth, availableRange),
|
|
5807
5816
|
onClick: function onClick() {
|
|
5808
5817
|
return setFocusedMonth(addMonths(focusedMonth, 1));
|
|
5809
5818
|
}
|
|
@@ -5827,6 +5836,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5827
5836
|
}, days.map(function (day, index) {
|
|
5828
5837
|
return React__default.createElement(CalCellB, {
|
|
5829
5838
|
key: index,
|
|
5839
|
+
disabled: isDayOutOfRange(day, availableRange),
|
|
5830
5840
|
onClick: function onClick() {
|
|
5831
5841
|
return onCellClick(day);
|
|
5832
5842
|
},
|
|
@@ -5878,6 +5888,48 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
|
|
|
5878
5888
|
var validInitial = initialValue ? initialValue : initializeInterval(startOfDay(new Date()));
|
|
5879
5889
|
return validInitial instanceof Date ? initializeInterval(validInitial) : validInitial;
|
|
5880
5890
|
};
|
|
5891
|
+
var isPrevMonthOutOfRange = function isPrevMonthOutOfRange(focusedMonth, availableRange) {
|
|
5892
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.start)) return false;
|
|
5893
|
+
try {
|
|
5894
|
+
var startYear = availableRange.start.getFullYear();
|
|
5895
|
+
var startMonth = availableRange.start.getMonth();
|
|
5896
|
+
if (focusedMonth.getFullYear() < startYear || focusedMonth.getFullYear() === startYear && focusedMonth.getMonth() <= startMonth) {
|
|
5897
|
+
return true;
|
|
5898
|
+
}
|
|
5899
|
+
} catch (error) {
|
|
5900
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5901
|
+
}
|
|
5902
|
+
return false;
|
|
5903
|
+
};
|
|
5904
|
+
var isNextMonthOutOfRange = function isNextMonthOutOfRange(focusedMonth, availableRange) {
|
|
5905
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.end)) return false;
|
|
5906
|
+
try {
|
|
5907
|
+
var endYear = availableRange.end.getFullYear();
|
|
5908
|
+
var endMonth = availableRange.end.getMonth();
|
|
5909
|
+
if (focusedMonth.getFullYear() > endYear || focusedMonth.getFullYear() === endYear && focusedMonth.getMonth() >= endMonth) {
|
|
5910
|
+
return true;
|
|
5911
|
+
}
|
|
5912
|
+
} catch (error) {
|
|
5913
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5914
|
+
}
|
|
5915
|
+
return false;
|
|
5916
|
+
};
|
|
5917
|
+
var isDayOutOfRange = function isDayOutOfRange(currentDay, availableRange) {
|
|
5918
|
+
if (!availableRange) return false;
|
|
5919
|
+
var start = availableRange.start,
|
|
5920
|
+
end = availableRange.end;
|
|
5921
|
+
try {
|
|
5922
|
+
if (start && currentDay < start && !isSameDay(currentDay, start)) {
|
|
5923
|
+
return true;
|
|
5924
|
+
}
|
|
5925
|
+
if (end && currentDay > end && !isSameDay(currentDay, end)) {
|
|
5926
|
+
return true;
|
|
5927
|
+
}
|
|
5928
|
+
} catch (error) {
|
|
5929
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5930
|
+
}
|
|
5931
|
+
return false;
|
|
5932
|
+
};
|
|
5881
5933
|
|
|
5882
5934
|
var _excluded$n = ["children"];
|
|
5883
5935
|
var _templateObject$H, _templateObject2$A;
|
|
@@ -13344,28 +13396,114 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13344
13396
|
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')));
|
|
13345
13397
|
};
|
|
13346
13398
|
|
|
13347
|
-
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g;
|
|
13348
|
-
var
|
|
13349
|
-
var
|
|
13350
|
-
var
|
|
13351
|
-
|
|
13352
|
-
|
|
13353
|
-
var
|
|
13399
|
+
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$e;
|
|
13400
|
+
var CoreStyle = css(_templateObject$1G || (_templateObject$1G = _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"])));
|
|
13401
|
+
var ContainerStatic = styled.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13402
|
+
var themeColor = _ref.themeColor;
|
|
13403
|
+
return themeColor ? css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13404
|
+
});
|
|
13405
|
+
var DefaultText = styled.span(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
13406
|
+
var LinkText = styled.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
|
|
13407
|
+
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) {
|
|
13408
|
+
var themeColor = _ref2.themeColor;
|
|
13409
|
+
return themeColor ? css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13410
|
+
}, function (_ref3) {
|
|
13411
|
+
var themeColor = _ref3.themeColor;
|
|
13412
|
+
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$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
|
|
13413
|
+
});
|
|
13414
|
+
var Container$15 = styled.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13415
|
+
var ready = _ref4.ready,
|
|
13416
|
+
minWidth = _ref4.minWidth;
|
|
13417
|
+
return css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n \n visibility: ", ";\n opacity: ", ";\n\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", ", ", "{\n /* Required to accurately measure container sizes and ensure hover doesn't resize. */\n ", ";\n }\n "])), ready ? 'visible' : 'hidden', ready ? '1' : '0', DefaultText, LinkText, ready && "min-width: " + minWidth + "px;");
|
|
13418
|
+
});
|
|
13419
|
+
var TopBarBadge = function TopBarBadge(_ref5) {
|
|
13420
|
+
var text = _ref5.text,
|
|
13421
|
+
color = _ref5.color,
|
|
13422
|
+
linkHref = _ref5.linkHref,
|
|
13423
|
+
linkTo = _ref5.linkTo,
|
|
13424
|
+
linkText = _ref5.linkText;
|
|
13425
|
+
var defaultTextRef = useRef();
|
|
13426
|
+
var linkTextRef = useRef();
|
|
13427
|
+
var _useState = useState(false),
|
|
13428
|
+
ready = _useState[0],
|
|
13429
|
+
setReady = _useState[1];
|
|
13430
|
+
var _useState2 = useState(false),
|
|
13431
|
+
hover = _useState2[0],
|
|
13432
|
+
setHover = _useState2[1];
|
|
13433
|
+
var _useState3 = useState(0),
|
|
13434
|
+
minWidth = _useState3[0],
|
|
13435
|
+
setMinWidth = _useState3[1];
|
|
13436
|
+
useEffect(function () {
|
|
13437
|
+
setReady(false);
|
|
13438
|
+
setTimeout(function () {
|
|
13439
|
+
var _linkTextRef$current;
|
|
13440
|
+
var defaultWidth = defaultTextRef.current.getBoundingClientRect().width;
|
|
13441
|
+
var linkWidth = ((_linkTextRef$current = linkTextRef.current) === null || _linkTextRef$current === void 0 ? void 0 : _linkTextRef$current.getBoundingClientRect().width) || 0;
|
|
13442
|
+
var largestWidth = defaultWidth >= linkWidth ? defaultWidth : linkWidth;
|
|
13443
|
+
setMinWidth(Math.ceil(largestWidth));
|
|
13444
|
+
setReady(true);
|
|
13445
|
+
}, 100);
|
|
13446
|
+
}, [defaultTextRef, linkTextRef, text, linkText, setMinWidth, setReady]);
|
|
13447
|
+
var defaultTextElement = React__default.createElement(DefaultText, {
|
|
13448
|
+
ref: defaultTextRef
|
|
13449
|
+
}, text);
|
|
13450
|
+
var linkTextElement = linkTo || linkHref ? React__default.createElement(LinkText, {
|
|
13451
|
+
ref: linkTextRef
|
|
13452
|
+
}, linkText || text) : null;
|
|
13453
|
+
var badgeComponent;
|
|
13454
|
+
if (linkTo) {
|
|
13455
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13456
|
+
themeColor: color
|
|
13457
|
+
}, React__default.createElement(Link, {
|
|
13458
|
+
to: linkTo
|
|
13459
|
+
}, !ready ? React__default.createElement(Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13460
|
+
} else if (linkHref) {
|
|
13461
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13462
|
+
themeColor: color
|
|
13463
|
+
}, React__default.createElement("a", {
|
|
13464
|
+
href: linkHref
|
|
13465
|
+
}, !ready ? React__default.createElement(Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13466
|
+
} else {
|
|
13467
|
+
badgeComponent = React__default.createElement(ContainerStatic, {
|
|
13468
|
+
themeColor: color
|
|
13469
|
+
}, defaultTextElement);
|
|
13470
|
+
}
|
|
13471
|
+
return React__default.createElement(Container$15, Object.assign({}, {
|
|
13472
|
+
ready: ready,
|
|
13473
|
+
minWidth: minWidth
|
|
13474
|
+
}, {
|
|
13475
|
+
onPointerEnter: function onPointerEnter() {
|
|
13476
|
+
return ready && setHover(true);
|
|
13477
|
+
},
|
|
13478
|
+
onPointerLeave: function onPointerLeave() {
|
|
13479
|
+
return ready && setHover(false);
|
|
13480
|
+
}
|
|
13481
|
+
}), badgeComponent);
|
|
13482
|
+
};
|
|
13483
|
+
|
|
13484
|
+
var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$q, _templateObject11$j, _templateObject12$h, _templateObject13$f;
|
|
13485
|
+
var Container$16 = styled.div(_templateObject$1H || (_templateObject$1H = _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"])));
|
|
13486
|
+
var RightArea$1 = styled.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13487
|
+
var SearchBar = styled.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
13488
|
+
var IconWrapper$4 = styled.div(_templateObject4$1c || (_templateObject4$1c = _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"])));
|
|
13489
|
+
var SearchInput = styled.input(_templateObject5$15 || (_templateObject5$15 = _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"])), removeAutoFillStyle);
|
|
13490
|
+
var ButtonArea = styled.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
|
|
13491
|
+
var buttonClickAnimation = keyframes(_templateObject7$O || (_templateObject7$O = _taggedTemplateLiteralLoose(["\n 0% {\n opacity:0.9;\n transform: scale(0.85);\n }\n 100% {\n opacity:1;\n transform: scale(1);\n }\n"])));
|
|
13354
13492
|
var DrawerToggle = styled.button.attrs({
|
|
13355
13493
|
type: 'button'
|
|
13356
|
-
})(
|
|
13494
|
+
})(_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) {
|
|
13357
13495
|
var isActive = _ref.isActive;
|
|
13358
|
-
return isActive && css(
|
|
13496
|
+
return isActive && css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
|
|
13359
13497
|
});
|
|
13360
|
-
var DrawerPortalWrapper = styled.div(
|
|
13361
|
-
var Drawer = styled.div(
|
|
13498
|
+
var DrawerPortalWrapper = styled.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
|
|
13499
|
+
var Drawer = styled.div(_templateObject11$j || (_templateObject11$j = _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) {
|
|
13362
13500
|
var baseWidth = _ref2.baseWidth;
|
|
13363
13501
|
return baseWidth ? baseWidth : "200px";
|
|
13364
13502
|
}, function (_ref3) {
|
|
13365
13503
|
var isOpen = _ref3.isOpen;
|
|
13366
|
-
return isOpen && css(
|
|
13504
|
+
return isOpen && css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13367
13505
|
});
|
|
13368
|
-
var NotificationsContainer = styled.div(
|
|
13506
|
+
var NotificationsContainer = styled.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13369
13507
|
var TopBar = function TopBar(_ref4) {
|
|
13370
13508
|
var _ref4$hasNotification = _ref4.hasNotifications,
|
|
13371
13509
|
hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
|
|
@@ -13416,7 +13554,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13416
13554
|
hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
|
|
13417
13555
|
copySuccessMessage = _ref4.copySuccessMessage,
|
|
13418
13556
|
includeCopyTitle = _ref4.includeCopyTitle,
|
|
13419
|
-
hasUserDrawerFooter = _ref4.hasUserDrawerFooter
|
|
13557
|
+
hasUserDrawerFooter = _ref4.hasUserDrawerFooter,
|
|
13558
|
+
badge = _ref4.badge;
|
|
13420
13559
|
var _useState = useState(null),
|
|
13421
13560
|
openDrawer = _useState[0],
|
|
13422
13561
|
setOpenDrawer = _useState[1];
|
|
@@ -13428,13 +13567,13 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13428
13567
|
return drawerKey;
|
|
13429
13568
|
});
|
|
13430
13569
|
};
|
|
13431
|
-
return React__default.createElement(Container$
|
|
13570
|
+
return React__default.createElement(Container$16, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
|
|
13432
13571
|
icon: 'Search',
|
|
13433
13572
|
size: 16,
|
|
13434
13573
|
color: 'grey-6'
|
|
13435
13574
|
})), React__default.createElement(SearchInput, {
|
|
13436
13575
|
placeholder: searchPlaceholder
|
|
13437
|
-
})) : React__default.createElement("div", null), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
|
|
13576
|
+
})) : React__default.createElement("div", null), React__default.createElement(RightArea$1, null, badge && React__default.createElement(TopBarBadge, Object.assign({}, badge)), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
|
|
13438
13577
|
isActive: openDrawer === 'custom',
|
|
13439
13578
|
onClick: function onClick() {
|
|
13440
13579
|
return toggleDrawers('custom');
|
|
@@ -13457,7 +13596,7 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13457
13596
|
icon: 'UserProfile',
|
|
13458
13597
|
size: 20,
|
|
13459
13598
|
color: 'dimmed'
|
|
13460
|
-
}))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13599
|
+
})))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13461
13600
|
isOpen: openDrawer === 'user'
|
|
13462
13601
|
}, React__default.createElement(UserMenu, Object.assign({}, {
|
|
13463
13602
|
hasLanguage: hasLanguage,
|
|
@@ -13494,8 +13633,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13494
13633
|
}, customDrawer.customComponent)), document.body));
|
|
13495
13634
|
};
|
|
13496
13635
|
|
|
13497
|
-
var _templateObject$
|
|
13498
|
-
var TabListWrapper = styled.div(_templateObject$
|
|
13636
|
+
var _templateObject$1I;
|
|
13637
|
+
var TabListWrapper = styled.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
|
|
13499
13638
|
var TabList = function TabList(_ref) {
|
|
13500
13639
|
var children = _ref.children,
|
|
13501
13640
|
defaultTabId = _ref.defaultTabId;
|
|
@@ -13508,11 +13647,11 @@ var TabList = function TabList(_ref) {
|
|
|
13508
13647
|
};
|
|
13509
13648
|
|
|
13510
13649
|
var _excluded$H = ["children", "tabFor", "onClick"];
|
|
13511
|
-
var _templateObject$
|
|
13512
|
-
var TabComponent = styled.div(_templateObject$
|
|
13513
|
-
var TabLabel = styled.label(_templateObject2$
|
|
13650
|
+
var _templateObject$1J, _templateObject2$1t, _templateObject3$1l;
|
|
13651
|
+
var TabComponent = styled.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
|
|
13652
|
+
var TabLabel = styled.label(_templateObject2$1t || (_templateObject2$1t = _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) {
|
|
13514
13653
|
var theme = _ref.theme;
|
|
13515
|
-
return css(_templateObject3$
|
|
13654
|
+
return css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
13516
13655
|
}, function (_ref2) {
|
|
13517
13656
|
var active = _ref2.active;
|
|
13518
13657
|
return active ? '600' : '500';
|
|
@@ -13543,27 +13682,27 @@ var Tab = function Tab(_ref5) {
|
|
|
13543
13682
|
};
|
|
13544
13683
|
|
|
13545
13684
|
var _excluded$I = ["children", "tabId"];
|
|
13546
|
-
var _templateObject$
|
|
13547
|
-
var Container$
|
|
13685
|
+
var _templateObject$1K;
|
|
13686
|
+
var Container$17 = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n"])));
|
|
13548
13687
|
var TabContent = function TabContent(_ref) {
|
|
13549
13688
|
var children = _ref.children,
|
|
13550
13689
|
tabId = _ref.tabId,
|
|
13551
13690
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
|
|
13552
13691
|
var _useContext = useContext(TabContext),
|
|
13553
13692
|
selected = _useContext.selected;
|
|
13554
|
-
return selected === tabId ? React__default.createElement(Container$
|
|
13693
|
+
return selected === tabId ? React__default.createElement(Container$17, Object.assign({}, props), children) : null;
|
|
13555
13694
|
};
|
|
13556
13695
|
|
|
13557
13696
|
var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
13558
|
-
var _templateObject$
|
|
13559
|
-
var Container$
|
|
13560
|
-
var LinkTab = styled.div(_templateObject2$
|
|
13697
|
+
var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1d;
|
|
13698
|
+
var Container$18 = styled.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
13699
|
+
var LinkTab = styled.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
|
|
13561
13700
|
var theme = _ref.theme;
|
|
13562
|
-
return css(_templateObject3$
|
|
13701
|
+
return css(_templateObject3$1m || (_templateObject3$1m = _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);
|
|
13563
13702
|
}, function (_ref2) {
|
|
13564
13703
|
var isActive = _ref2.isActive,
|
|
13565
13704
|
theme = _ref2.theme;
|
|
13566
|
-
return isActive && css(_templateObject4$
|
|
13705
|
+
return isActive && css(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.colors.menu.active, IconWrapper, theme.colors.menu.active);
|
|
13567
13706
|
});
|
|
13568
13707
|
var MobileTab = function MobileTab(_ref3) {
|
|
13569
13708
|
var tabFor = _ref3.tabFor,
|
|
@@ -13579,7 +13718,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13579
13718
|
var newValue = selected === tabId ? closeId : tabId;
|
|
13580
13719
|
setSelected(newValue);
|
|
13581
13720
|
}, [closeId, selected, setSelected]);
|
|
13582
|
-
return React__default.createElement(Container$
|
|
13721
|
+
return React__default.createElement(Container$18, Object.assign({}, props, {
|
|
13583
13722
|
onClick: function onClick() {
|
|
13584
13723
|
return onChangeTab(tabFor);
|
|
13585
13724
|
}
|
|
@@ -13593,23 +13732,23 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13593
13732
|
};
|
|
13594
13733
|
|
|
13595
13734
|
var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
|
|
13596
|
-
var _templateObject$
|
|
13597
|
-
var Container$
|
|
13735
|
+
var _templateObject$1M, _templateObject2$1v, _templateObject3$1n, _templateObject4$1e, _templateObject5$16, _templateObject6$T;
|
|
13736
|
+
var Container$19 = styled.div(_templateObject$1M || (_templateObject$1M = _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) {
|
|
13598
13737
|
var active = _ref.active;
|
|
13599
|
-
return active ? css(_templateObject2$
|
|
13738
|
+
return active ? css(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
13600
13739
|
}, IconWrapper);
|
|
13601
|
-
var Title$a = styled.div(_templateObject4$
|
|
13740
|
+
var Title$a = styled.div(_templateObject4$1e || (_templateObject4$1e = _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) {
|
|
13602
13741
|
var theme = _ref2.theme;
|
|
13603
13742
|
return theme.fontFamily.ui;
|
|
13604
13743
|
}, function (_ref3) {
|
|
13605
13744
|
var active = _ref3.active;
|
|
13606
13745
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
13607
13746
|
});
|
|
13608
|
-
var SubTitle$2 = styled.div(_templateObject5$
|
|
13747
|
+
var SubTitle$2 = styled.div(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-family: ", ";\n font-style: italic;\n color: var(--grey-a10);\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref4) {
|
|
13609
13748
|
var theme = _ref4.theme;
|
|
13610
13749
|
return theme.fontFamily.data;
|
|
13611
13750
|
});
|
|
13612
|
-
var TextGroup$1 = styled.div(_templateObject6$
|
|
13751
|
+
var TextGroup$1 = styled.div(_templateObject6$T || (_templateObject6$T = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
|
|
13613
13752
|
var TabWithIcon = function TabWithIcon(_ref5) {
|
|
13614
13753
|
var icon = _ref5.icon,
|
|
13615
13754
|
title = _ref5.title,
|
|
@@ -13623,7 +13762,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13623
13762
|
setSelected(tabId);
|
|
13624
13763
|
}, [setSelected]);
|
|
13625
13764
|
var active = selected === tabFor;
|
|
13626
|
-
return React__default.createElement(Container$
|
|
13765
|
+
return React__default.createElement(Container$19, Object.assign({}, {
|
|
13627
13766
|
active: active
|
|
13628
13767
|
}, props, {
|
|
13629
13768
|
onClick: function onClick() {
|
|
@@ -13640,9 +13779,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13640
13779
|
}), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
|
|
13641
13780
|
};
|
|
13642
13781
|
|
|
13643
|
-
var _templateObject$
|
|
13644
|
-
var Container$
|
|
13645
|
-
var TabListWrapper$1 = styled.div(_templateObject2$
|
|
13782
|
+
var _templateObject$1N, _templateObject2$1w;
|
|
13783
|
+
var Container$1a = styled.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
|
|
13784
|
+
var TabListWrapper$1 = styled.div(_templateObject2$1w || (_templateObject2$1w = _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) {
|
|
13646
13785
|
var paddingLeft = _ref.paddingLeft;
|
|
13647
13786
|
return paddingLeft ? paddingLeft : '87px';
|
|
13648
13787
|
});
|
|
@@ -13650,7 +13789,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13650
13789
|
var defaultTabId = _ref2.defaultTabId,
|
|
13651
13790
|
tabList = _ref2.tabList,
|
|
13652
13791
|
paddingLeft = _ref2.paddingLeft;
|
|
13653
|
-
return React__default.createElement(Container$
|
|
13792
|
+
return React__default.createElement(Container$1a, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
|
|
13654
13793
|
paddingLeft: paddingLeft
|
|
13655
13794
|
}), React__default.createElement(TabList, Object.assign({}, {
|
|
13656
13795
|
defaultTabId: defaultTabId
|
|
@@ -13678,10 +13817,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13678
13817
|
};
|
|
13679
13818
|
|
|
13680
13819
|
var _excluded$L = ["closeId", "closeText"];
|
|
13681
|
-
var _templateObject$
|
|
13682
|
-
var StyledButton$7 = styled.button(_templateObject$
|
|
13683
|
-
var IconContainer$4 = styled.div(_templateObject2$
|
|
13684
|
-
var TextWrapper$1 = styled.div(_templateObject3$
|
|
13820
|
+
var _templateObject$1O, _templateObject2$1x, _templateObject3$1o;
|
|
13821
|
+
var StyledButton$7 = styled.button(_templateObject$1O || (_templateObject$1O = _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);
|
|
13822
|
+
var IconContainer$4 = styled.div(_templateObject2$1x || (_templateObject2$1x = _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"])));
|
|
13823
|
+
var TextWrapper$1 = styled.div(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
13685
13824
|
var CloseButton$1 = function CloseButton(_ref) {
|
|
13686
13825
|
var closeId = _ref.closeId,
|
|
13687
13826
|
_ref$closeText = _ref.closeText,
|
|
@@ -13700,20 +13839,20 @@ var CloseButton$1 = function CloseButton(_ref) {
|
|
|
13700
13839
|
})), React__default.createElement(TextWrapper$1, null, closeText));
|
|
13701
13840
|
};
|
|
13702
13841
|
|
|
13703
|
-
var _templateObject$
|
|
13704
|
-
var Container$
|
|
13705
|
-
var ContentWrapper = styled.div(_templateObject2$
|
|
13842
|
+
var _templateObject$1P, _templateObject2$1y;
|
|
13843
|
+
var Container$1b = styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
|
|
13844
|
+
var ContentWrapper = styled.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
13706
13845
|
var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
13707
13846
|
var closeId = _ref.closeId,
|
|
13708
13847
|
children = _ref.children;
|
|
13709
13848
|
var _useContext = useContext(TabContext),
|
|
13710
13849
|
selected = _useContext.selected;
|
|
13711
|
-
return selected === closeId ? null : React__default.createElement(Container$
|
|
13850
|
+
return selected === closeId ? null : React__default.createElement(Container$1b, null, React__default.createElement(ContentWrapper, null, children));
|
|
13712
13851
|
};
|
|
13713
13852
|
|
|
13714
|
-
var _templateObject$
|
|
13715
|
-
var Container$
|
|
13716
|
-
var ItemWrapper = styled.div(_templateObject2$
|
|
13853
|
+
var _templateObject$1Q, _templateObject2$1z;
|
|
13854
|
+
var Container$1c = styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose([""])));
|
|
13855
|
+
var ItemWrapper = styled.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
|
|
13717
13856
|
var MobileMenu = function MobileMenu(_ref) {
|
|
13718
13857
|
var content = _ref.content,
|
|
13719
13858
|
supportUrl = _ref.supportUrl,
|
|
@@ -13736,7 +13875,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13736
13875
|
var handleCloseMenu = useCallback(function () {
|
|
13737
13876
|
setSelected(closeId);
|
|
13738
13877
|
}, [closeId, setSelected]);
|
|
13739
|
-
return React__default.createElement(Container$
|
|
13878
|
+
return React__default.createElement(Container$1c, null, content.items.map(function (item, key) {
|
|
13740
13879
|
return React__default.createElement(ItemWrapper, {
|
|
13741
13880
|
key: key,
|
|
13742
13881
|
"data-key": key
|
|
@@ -13762,10 +13901,10 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13762
13901
|
})));
|
|
13763
13902
|
};
|
|
13764
13903
|
|
|
13765
|
-
var _templateObject$
|
|
13766
|
-
var Logo$1 = styled(Link)(_templateObject$
|
|
13767
|
-
var LogoMark$1 = styled.div(_templateObject2$
|
|
13768
|
-
var SVGObject$1 = styled.object(_templateObject3$
|
|
13904
|
+
var _templateObject$1R, _templateObject2$1A, _templateObject3$1p;
|
|
13905
|
+
var Logo$1 = styled(Link)(_templateObject$1R || (_templateObject$1R = _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);
|
|
13906
|
+
var LogoMark$1 = styled.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
|
|
13907
|
+
var SVGObject$1 = styled.object(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose([""])));
|
|
13769
13908
|
var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
13770
13909
|
var _ref$home = _ref.home,
|
|
13771
13910
|
home = _ref$home === void 0 ? "/" : _ref$home,
|
|
@@ -13785,8 +13924,8 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
13785
13924
|
};
|
|
13786
13925
|
|
|
13787
13926
|
var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
13788
|
-
var _templateObject$
|
|
13789
|
-
var Container$
|
|
13927
|
+
var _templateObject$1S;
|
|
13928
|
+
var Container$1d = styled.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n \n z-index: 100;\n display: flex;\n flex-direction: column;\n"])));
|
|
13790
13929
|
var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
13791
13930
|
var closeId = _ref.closeId,
|
|
13792
13931
|
hasLanguage = _ref.hasLanguage,
|
|
@@ -13804,7 +13943,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13804
13943
|
var handleCloseMenu = useCallback(function () {
|
|
13805
13944
|
setSelected(closeId);
|
|
13806
13945
|
}, [closeId, setSelected]);
|
|
13807
|
-
return React__default.createElement(Container$
|
|
13946
|
+
return React__default.createElement(Container$1d, null, React__default.createElement(UserMenu, Object.assign({}, _extends({
|
|
13808
13947
|
hasLanguage: hasLanguage,
|
|
13809
13948
|
hasLogout: hasLogout,
|
|
13810
13949
|
logoutLink: logoutLink,
|
|
@@ -13820,14 +13959,14 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13820
13959
|
};
|
|
13821
13960
|
|
|
13822
13961
|
var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
|
|
13823
|
-
var _templateObject$
|
|
13962
|
+
var _templateObject$1T, _templateObject2$1B;
|
|
13824
13963
|
var CLOSE_ID = 'closeMenu';
|
|
13825
13964
|
var NOTI_TAB = 'notifications';
|
|
13826
13965
|
var USER_TAB = 'user';
|
|
13827
13966
|
var MENU_TAB = 'menu';
|
|
13828
13967
|
var CUSTOM_TAB = 'custom';
|
|
13829
|
-
var Container$
|
|
13830
|
-
var HeaderContainer = styled.div(_templateObject2$
|
|
13968
|
+
var Container$1e = styled.nav(_templateObject$1T || (_templateObject$1T = _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"])));
|
|
13969
|
+
var HeaderContainer = styled.div(_templateObject2$1B || (_templateObject2$1B = _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);
|
|
13831
13970
|
var MobileNavbar = function MobileNavbar(_ref) {
|
|
13832
13971
|
var content = _ref.content,
|
|
13833
13972
|
home = _ref.home,
|
|
@@ -13849,7 +13988,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
|
|
|
13849
13988
|
onLogout = _ref.onLogout,
|
|
13850
13989
|
onLanguageToggle = _ref.onLanguageToggle,
|
|
13851
13990
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
|
|
13852
|
-
return React__default.createElement(Container$
|
|
13991
|
+
return React__default.createElement(Container$1e, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
|
|
13853
13992
|
home: home,
|
|
13854
13993
|
logoMark: logoMark
|
|
13855
13994
|
}, {
|
|
@@ -13948,16 +14087,16 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
13948
14087
|
};
|
|
13949
14088
|
|
|
13950
14089
|
var _excluded$P = ["children"];
|
|
13951
|
-
var _templateObject$
|
|
13952
|
-
var Container$
|
|
13953
|
-
var LogoContainer = styled.div(_templateObject2$
|
|
13954
|
-
var LogoTopText = styled.div(_templateObject3$
|
|
13955
|
-
var LogoBottomText = styled.div(_templateObject4$
|
|
13956
|
-
var SidebarBox = styled.div(_templateObject5$
|
|
13957
|
-
var SidebarHeading = styled.div(_templateObject6$
|
|
13958
|
-
var SidebarLinkHeading = styled.div(_templateObject7$
|
|
13959
|
-
var BackLink$1 = styled(Link)(_templateObject8$
|
|
13960
|
-
var SLink = styled(Link)(_templateObject9$
|
|
14090
|
+
var _templateObject$1U, _templateObject2$1C, _templateObject3$1q, _templateObject4$1f, _templateObject5$17, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
|
|
14091
|
+
var Container$1f = styled.div(_templateObject$1U || (_templateObject$1U = _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"])));
|
|
14092
|
+
var LogoContainer = styled.div(_templateObject2$1C || (_templateObject2$1C = _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"])));
|
|
14093
|
+
var LogoTopText = styled.div(_templateObject3$1q || (_templateObject3$1q = _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"])));
|
|
14094
|
+
var LogoBottomText = styled.div(_templateObject4$1f || (_templateObject4$1f = _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"])));
|
|
14095
|
+
var SidebarBox = styled.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
14096
|
+
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"])));
|
|
14097
|
+
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"])));
|
|
14098
|
+
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"])));
|
|
14099
|
+
var SLink = styled(Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
|
|
13961
14100
|
var SidebarLink = function SidebarLink(_ref) {
|
|
13962
14101
|
var title = _ref.title,
|
|
13963
14102
|
to = _ref.to;
|
|
@@ -13973,7 +14112,7 @@ var Logo$2 = function Logo(_ref2) {
|
|
|
13973
14112
|
var Sidebar = function Sidebar(_ref3) {
|
|
13974
14113
|
var children = _ref3.children,
|
|
13975
14114
|
props = _objectWithoutPropertiesLoose(_ref3, _excluded$P);
|
|
13976
|
-
return React__default.createElement(Container$
|
|
14115
|
+
return React__default.createElement(Container$1f, Object.assign({}, props), children);
|
|
13977
14116
|
};
|
|
13978
14117
|
|
|
13979
14118
|
export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink$1 as BackLink, BaseStyles, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, ButtonsStack, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content$1 as Content, ContentLayout, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, FlexContentPlaceholder, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, SplitLayout, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper$1 as TagListWrapper, TextArea, TextAreaField, TextField, ThemeVariables, Tooltip, TopBar, TypeTable, UtilityHeader, WebRTCPlayer as WebRTCClient, index as defaultTheme, isDateInterval, isFilterItem, resetButtonStyles, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePTZ, usePoll, useThemeToggle, useTitle, useTo };
|