scorer-ui-kit 2.6.3 → 2.6.4
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 +248 -109
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +248 -109
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5593,7 +5593,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5593
5593
|
})))));
|
|
5594
5594
|
};
|
|
5595
5595
|
|
|
5596
|
-
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;
|
|
5596
|
+
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;
|
|
5597
5597
|
var initializeInterval = function initializeInterval(day) {
|
|
5598
5598
|
return {
|
|
5599
5599
|
start: dateFns.set(day, {
|
|
@@ -5614,13 +5614,13 @@ var CalendarArea = styled__default.div(_templateObject6$k || (_templateObject6$k
|
|
|
5614
5614
|
var CalendarHeader = styled__default.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"])));
|
|
5615
5615
|
var CurrentMonth = styled__default.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"])));
|
|
5616
5616
|
var IconWrap$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5617
|
-
var PaginateMonth = styled__default.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
|
|
5617
|
+
var PaginateMonth = styled__default.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);
|
|
5618
5618
|
var CalBody = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5619
5619
|
var CalRow = styled__default.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"])));
|
|
5620
5620
|
var CalHRow = styled__default(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
|
|
5621
|
-
var CalCell = styled__default.
|
|
5621
|
+
var CalCell = styled__default.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);
|
|
5622
5622
|
var CalHCell = styled__default(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--grey-a11);\n"])));
|
|
5623
|
-
var CalCellB = styled__default(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) {
|
|
5623
|
+
var CalCellB = styled__default(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) {
|
|
5624
5624
|
var thisMonth = _ref.thisMonth;
|
|
5625
5625
|
return !thisMonth && styled.css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n color: var(--grey-a8);\n "])));
|
|
5626
5626
|
}, function (_ref2) {
|
|
@@ -5628,7 +5628,7 @@ var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject1
|
|
|
5628
5628
|
return isToday && styled.css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--primary-a7);\n "])));
|
|
5629
5629
|
}, function (_ref3) {
|
|
5630
5630
|
var state = _ref3.state;
|
|
5631
|
-
return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5631
|
+
return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover:enabled {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5632
5632
|
}, function (_ref4) {
|
|
5633
5633
|
var state = _ref4.state;
|
|
5634
5634
|
return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n background: var(--primary-9);\n color: var(--white-1);\n "])));
|
|
@@ -5644,6 +5644,12 @@ var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject1
|
|
|
5644
5644
|
}, function (_ref8) {
|
|
5645
5645
|
var state = _ref8.state;
|
|
5646
5646
|
return state === 'inside' && styled.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 "])));
|
|
5647
|
+
}, function (_ref9) {
|
|
5648
|
+
var state = _ref9.state;
|
|
5649
|
+
return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n color: var(--white-1);\n background: var(--red-a9);\n "])));
|
|
5650
|
+
}, function (_ref10) {
|
|
5651
|
+
var state = _ref10.state;
|
|
5652
|
+
return state === 'inside' && styled.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 "])));
|
|
5647
5653
|
});
|
|
5648
5654
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5649
5655
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
@@ -5659,26 +5665,27 @@ var isDateInterval = function isDateInterval(value) {
|
|
|
5659
5665
|
}
|
|
5660
5666
|
return value.start instanceof Date && value.end instanceof Date;
|
|
5661
5667
|
};
|
|
5662
|
-
var DatePicker = function DatePicker(
|
|
5663
|
-
var
|
|
5664
|
-
dateMode =
|
|
5665
|
-
|
|
5666
|
-
timeMode =
|
|
5667
|
-
|
|
5668
|
-
dateTimeTextUpper =
|
|
5669
|
-
|
|
5670
|
-
dateTimeTextLower =
|
|
5671
|
-
|
|
5672
|
-
timeZoneTitle =
|
|
5673
|
-
|
|
5674
|
-
timeZoneValueTitle =
|
|
5675
|
-
|
|
5676
|
-
hasEmptyValue =
|
|
5677
|
-
|
|
5678
|
-
updateCallback =
|
|
5679
|
-
initialValue =
|
|
5680
|
-
|
|
5681
|
-
lang =
|
|
5668
|
+
var DatePicker = function DatePicker(_ref11) {
|
|
5669
|
+
var _ref11$dateMode = _ref11.dateMode,
|
|
5670
|
+
dateMode = _ref11$dateMode === void 0 ? 'interval' : _ref11$dateMode,
|
|
5671
|
+
_ref11$timeMode = _ref11.timeMode,
|
|
5672
|
+
timeMode = _ref11$timeMode === void 0 ? 'interval' : _ref11$timeMode,
|
|
5673
|
+
_ref11$dateTimeTextUp = _ref11.dateTimeTextUpper,
|
|
5674
|
+
dateTimeTextUpper = _ref11$dateTimeTextUp === void 0 ? 'From' : _ref11$dateTimeTextUp,
|
|
5675
|
+
_ref11$dateTimeTextLo = _ref11.dateTimeTextLower,
|
|
5676
|
+
dateTimeTextLower = _ref11$dateTimeTextLo === void 0 ? 'To' : _ref11$dateTimeTextLo,
|
|
5677
|
+
_ref11$timeZoneTitle = _ref11.timeZoneTitle,
|
|
5678
|
+
timeZoneTitle = _ref11$timeZoneTitle === void 0 ? 'Timezone' : _ref11$timeZoneTitle,
|
|
5679
|
+
_ref11$timeZoneValueT = _ref11.timeZoneValueTitle,
|
|
5680
|
+
timeZoneValueTitle = _ref11$timeZoneValueT === void 0 ? 'JST' : _ref11$timeZoneValueT,
|
|
5681
|
+
_ref11$hasEmptyValue = _ref11.hasEmptyValue,
|
|
5682
|
+
hasEmptyValue = _ref11$hasEmptyValue === void 0 ? false : _ref11$hasEmptyValue,
|
|
5683
|
+
_ref11$updateCallback = _ref11.updateCallback,
|
|
5684
|
+
updateCallback = _ref11$updateCallback === void 0 ? function () {} : _ref11$updateCallback,
|
|
5685
|
+
initialValue = _ref11.initialValue,
|
|
5686
|
+
availableRange = _ref11.availableRange,
|
|
5687
|
+
_ref11$lang = _ref11.lang,
|
|
5688
|
+
lang = _ref11$lang === void 0 ? 'en' : _ref11$lang;
|
|
5682
5689
|
var _useState = React.useState(getInitialValue(hasEmptyValue, initialValue)),
|
|
5683
5690
|
selectedRange = _useState[0],
|
|
5684
5691
|
setSelectedRange = _useState[1];
|
|
@@ -5744,9 +5751,9 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5744
5751
|
}
|
|
5745
5752
|
}, [dateMode, selectedRange, targetedDate]);
|
|
5746
5753
|
React.useEffect(function () {
|
|
5747
|
-
var
|
|
5748
|
-
start =
|
|
5749
|
-
end =
|
|
5754
|
+
var _ref12 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5755
|
+
start = _ref12.start,
|
|
5756
|
+
end = _ref12.end;
|
|
5750
5757
|
if (timeMode === 'interval' && dateFns.isAfter(dateFns.add(start, {
|
|
5751
5758
|
minutes: 1
|
|
5752
5759
|
}), end)) {
|
|
@@ -5760,16 +5767,16 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5760
5767
|
}
|
|
5761
5768
|
}, [selectedRange, timeMode]);
|
|
5762
5769
|
var updateStartDate = React.useCallback(function (start) {
|
|
5763
|
-
var
|
|
5764
|
-
end =
|
|
5770
|
+
var _ref13 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5771
|
+
end = _ref13.end;
|
|
5765
5772
|
setSelectedRange({
|
|
5766
5773
|
start: start,
|
|
5767
5774
|
end: end
|
|
5768
5775
|
});
|
|
5769
5776
|
}, [selectedRange]);
|
|
5770
5777
|
var updateEndDate = React.useCallback(function (end) {
|
|
5771
|
-
var
|
|
5772
|
-
start =
|
|
5778
|
+
var _ref14 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5779
|
+
start = _ref14.start;
|
|
5773
5780
|
setSelectedRange({
|
|
5774
5781
|
start: start,
|
|
5775
5782
|
end: end
|
|
@@ -5794,6 +5801,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5794
5801
|
setDateCallback: updateEndDate
|
|
5795
5802
|
})), 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, {
|
|
5796
5803
|
type: 'button',
|
|
5804
|
+
disabled: isPrevMonthOutOfRange(focusedMonth, availableRange),
|
|
5797
5805
|
onClick: function onClick() {
|
|
5798
5806
|
return setFocusedMonth(dateFns.addMonths(focusedMonth, -1));
|
|
5799
5807
|
}
|
|
@@ -5807,6 +5815,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5807
5815
|
locale: lang === 'ja' ? locale.ja : locale.enUS
|
|
5808
5816
|
})), React__default.createElement(PaginateMonth, {
|
|
5809
5817
|
type: 'button',
|
|
5818
|
+
disabled: isNextMonthOutOfRange(focusedMonth, availableRange),
|
|
5810
5819
|
onClick: function onClick() {
|
|
5811
5820
|
return setFocusedMonth(dateFns.addMonths(focusedMonth, 1));
|
|
5812
5821
|
}
|
|
@@ -5830,6 +5839,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5830
5839
|
}, days.map(function (day, index) {
|
|
5831
5840
|
return React__default.createElement(CalCellB, {
|
|
5832
5841
|
key: index,
|
|
5842
|
+
disabled: isDayOutOfRange(day, availableRange),
|
|
5833
5843
|
onClick: function onClick() {
|
|
5834
5844
|
return onCellClick(day);
|
|
5835
5845
|
},
|
|
@@ -5881,6 +5891,48 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
|
|
|
5881
5891
|
var validInitial = initialValue ? initialValue : initializeInterval(dateFns.startOfDay(new Date()));
|
|
5882
5892
|
return validInitial instanceof Date ? initializeInterval(validInitial) : validInitial;
|
|
5883
5893
|
};
|
|
5894
|
+
var isPrevMonthOutOfRange = function isPrevMonthOutOfRange(focusedMonth, availableRange) {
|
|
5895
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.start)) return false;
|
|
5896
|
+
try {
|
|
5897
|
+
var startYear = availableRange.start.getFullYear();
|
|
5898
|
+
var startMonth = availableRange.start.getMonth();
|
|
5899
|
+
if (focusedMonth.getFullYear() < startYear || focusedMonth.getFullYear() === startYear && focusedMonth.getMonth() <= startMonth) {
|
|
5900
|
+
return true;
|
|
5901
|
+
}
|
|
5902
|
+
} catch (error) {
|
|
5903
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5904
|
+
}
|
|
5905
|
+
return false;
|
|
5906
|
+
};
|
|
5907
|
+
var isNextMonthOutOfRange = function isNextMonthOutOfRange(focusedMonth, availableRange) {
|
|
5908
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.end)) return false;
|
|
5909
|
+
try {
|
|
5910
|
+
var endYear = availableRange.end.getFullYear();
|
|
5911
|
+
var endMonth = availableRange.end.getMonth();
|
|
5912
|
+
if (focusedMonth.getFullYear() > endYear || focusedMonth.getFullYear() === endYear && focusedMonth.getMonth() >= endMonth) {
|
|
5913
|
+
return true;
|
|
5914
|
+
}
|
|
5915
|
+
} catch (error) {
|
|
5916
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5917
|
+
}
|
|
5918
|
+
return false;
|
|
5919
|
+
};
|
|
5920
|
+
var isDayOutOfRange = function isDayOutOfRange(currentDay, availableRange) {
|
|
5921
|
+
if (!availableRange) return false;
|
|
5922
|
+
var start = availableRange.start,
|
|
5923
|
+
end = availableRange.end;
|
|
5924
|
+
try {
|
|
5925
|
+
if (start && currentDay < start && !dateFns.isSameDay(currentDay, start)) {
|
|
5926
|
+
return true;
|
|
5927
|
+
}
|
|
5928
|
+
if (end && currentDay > end && !dateFns.isSameDay(currentDay, end)) {
|
|
5929
|
+
return true;
|
|
5930
|
+
}
|
|
5931
|
+
} catch (error) {
|
|
5932
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5933
|
+
}
|
|
5934
|
+
return false;
|
|
5935
|
+
};
|
|
5884
5936
|
|
|
5885
5937
|
var _excluded$n = ["children"];
|
|
5886
5938
|
var _templateObject$H, _templateObject2$A;
|
|
@@ -13347,28 +13399,114 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13347
13399
|
return React__default.createElement(Container$14, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13348
13400
|
};
|
|
13349
13401
|
|
|
13350
|
-
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;
|
|
13351
|
-
var
|
|
13352
|
-
var
|
|
13353
|
-
var
|
|
13354
|
-
|
|
13355
|
-
|
|
13356
|
-
var
|
|
13402
|
+
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;
|
|
13403
|
+
var CoreStyle = styled.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"])));
|
|
13404
|
+
var ContainerStatic = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13405
|
+
var themeColor = _ref.themeColor;
|
|
13406
|
+
return themeColor ? styled.css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13407
|
+
});
|
|
13408
|
+
var DefaultText = styled__default.span(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
13409
|
+
var LinkText = styled__default.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
|
|
13410
|
+
var ContainerLinked = styled__default.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) {
|
|
13411
|
+
var themeColor = _ref2.themeColor;
|
|
13412
|
+
return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13413
|
+
}, function (_ref3) {
|
|
13414
|
+
var themeColor = _ref3.themeColor;
|
|
13415
|
+
return themeColor ? styled.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) : styled.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 "])));
|
|
13416
|
+
});
|
|
13417
|
+
var Container$15 = styled__default.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13418
|
+
var ready = _ref4.ready,
|
|
13419
|
+
minWidth = _ref4.minWidth;
|
|
13420
|
+
return styled.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;");
|
|
13421
|
+
});
|
|
13422
|
+
var TopBarBadge = function TopBarBadge(_ref5) {
|
|
13423
|
+
var text = _ref5.text,
|
|
13424
|
+
color = _ref5.color,
|
|
13425
|
+
linkHref = _ref5.linkHref,
|
|
13426
|
+
linkTo = _ref5.linkTo,
|
|
13427
|
+
linkText = _ref5.linkText;
|
|
13428
|
+
var defaultTextRef = React.useRef();
|
|
13429
|
+
var linkTextRef = React.useRef();
|
|
13430
|
+
var _useState = React.useState(false),
|
|
13431
|
+
ready = _useState[0],
|
|
13432
|
+
setReady = _useState[1];
|
|
13433
|
+
var _useState2 = React.useState(false),
|
|
13434
|
+
hover = _useState2[0],
|
|
13435
|
+
setHover = _useState2[1];
|
|
13436
|
+
var _useState3 = React.useState(0),
|
|
13437
|
+
minWidth = _useState3[0],
|
|
13438
|
+
setMinWidth = _useState3[1];
|
|
13439
|
+
React.useEffect(function () {
|
|
13440
|
+
setReady(false);
|
|
13441
|
+
setTimeout(function () {
|
|
13442
|
+
var _linkTextRef$current;
|
|
13443
|
+
var defaultWidth = defaultTextRef.current.getBoundingClientRect().width;
|
|
13444
|
+
var linkWidth = ((_linkTextRef$current = linkTextRef.current) === null || _linkTextRef$current === void 0 ? void 0 : _linkTextRef$current.getBoundingClientRect().width) || 0;
|
|
13445
|
+
var largestWidth = defaultWidth >= linkWidth ? defaultWidth : linkWidth;
|
|
13446
|
+
setMinWidth(Math.ceil(largestWidth));
|
|
13447
|
+
setReady(true);
|
|
13448
|
+
}, 100);
|
|
13449
|
+
}, [defaultTextRef, linkTextRef, text, linkText, setMinWidth, setReady]);
|
|
13450
|
+
var defaultTextElement = React__default.createElement(DefaultText, {
|
|
13451
|
+
ref: defaultTextRef
|
|
13452
|
+
}, text);
|
|
13453
|
+
var linkTextElement = linkTo || linkHref ? React__default.createElement(LinkText, {
|
|
13454
|
+
ref: linkTextRef
|
|
13455
|
+
}, linkText || text) : null;
|
|
13456
|
+
var badgeComponent;
|
|
13457
|
+
if (linkTo) {
|
|
13458
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13459
|
+
themeColor: color
|
|
13460
|
+
}, React__default.createElement(reactRouterDom.Link, {
|
|
13461
|
+
to: linkTo
|
|
13462
|
+
}, !ready ? React__default.createElement(React.Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(React.Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13463
|
+
} else if (linkHref) {
|
|
13464
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13465
|
+
themeColor: color
|
|
13466
|
+
}, React__default.createElement("a", {
|
|
13467
|
+
href: linkHref
|
|
13468
|
+
}, !ready ? React__default.createElement(React.Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(React.Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13469
|
+
} else {
|
|
13470
|
+
badgeComponent = React__default.createElement(ContainerStatic, {
|
|
13471
|
+
themeColor: color
|
|
13472
|
+
}, defaultTextElement);
|
|
13473
|
+
}
|
|
13474
|
+
return React__default.createElement(Container$15, Object.assign({}, {
|
|
13475
|
+
ready: ready,
|
|
13476
|
+
minWidth: minWidth
|
|
13477
|
+
}, {
|
|
13478
|
+
onPointerEnter: function onPointerEnter() {
|
|
13479
|
+
return ready && setHover(true);
|
|
13480
|
+
},
|
|
13481
|
+
onPointerLeave: function onPointerLeave() {
|
|
13482
|
+
return ready && setHover(false);
|
|
13483
|
+
}
|
|
13484
|
+
}), badgeComponent);
|
|
13485
|
+
};
|
|
13486
|
+
|
|
13487
|
+
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;
|
|
13488
|
+
var Container$16 = styled__default.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"])));
|
|
13489
|
+
var RightArea$1 = styled__default.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13490
|
+
var SearchBar = styled__default.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"])));
|
|
13491
|
+
var IconWrapper$4 = styled__default.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"])));
|
|
13492
|
+
var SearchInput = styled__default.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);
|
|
13493
|
+
var ButtonArea = styled__default.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
|
|
13494
|
+
var buttonClickAnimation = styled.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"])));
|
|
13357
13495
|
var DrawerToggle = styled__default.button.attrs({
|
|
13358
13496
|
type: 'button'
|
|
13359
|
-
})(
|
|
13497
|
+
})(_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) {
|
|
13360
13498
|
var isActive = _ref.isActive;
|
|
13361
|
-
return isActive && styled.css(
|
|
13499
|
+
return isActive && styled.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);
|
|
13362
13500
|
});
|
|
13363
|
-
var DrawerPortalWrapper = styled__default.div(
|
|
13364
|
-
var Drawer = styled__default.div(
|
|
13501
|
+
var DrawerPortalWrapper = styled__default.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
|
|
13502
|
+
var Drawer = styled__default.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) {
|
|
13365
13503
|
var baseWidth = _ref2.baseWidth;
|
|
13366
13504
|
return baseWidth ? baseWidth : "200px";
|
|
13367
13505
|
}, function (_ref3) {
|
|
13368
13506
|
var isOpen = _ref3.isOpen;
|
|
13369
|
-
return isOpen && styled.css(
|
|
13507
|
+
return isOpen && styled.css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13370
13508
|
});
|
|
13371
|
-
var NotificationsContainer = styled__default.div(
|
|
13509
|
+
var NotificationsContainer = styled__default.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13372
13510
|
var TopBar = function TopBar(_ref4) {
|
|
13373
13511
|
var _ref4$hasNotification = _ref4.hasNotifications,
|
|
13374
13512
|
hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
|
|
@@ -13419,7 +13557,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13419
13557
|
hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
|
|
13420
13558
|
copySuccessMessage = _ref4.copySuccessMessage,
|
|
13421
13559
|
includeCopyTitle = _ref4.includeCopyTitle,
|
|
13422
|
-
hasUserDrawerFooter = _ref4.hasUserDrawerFooter
|
|
13560
|
+
hasUserDrawerFooter = _ref4.hasUserDrawerFooter,
|
|
13561
|
+
badge = _ref4.badge;
|
|
13423
13562
|
var _useState = React.useState(null),
|
|
13424
13563
|
openDrawer = _useState[0],
|
|
13425
13564
|
setOpenDrawer = _useState[1];
|
|
@@ -13431,13 +13570,13 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13431
13570
|
return drawerKey;
|
|
13432
13571
|
});
|
|
13433
13572
|
};
|
|
13434
|
-
return React__default.createElement(Container$
|
|
13573
|
+
return React__default.createElement(Container$16, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
|
|
13435
13574
|
icon: 'Search',
|
|
13436
13575
|
size: 16,
|
|
13437
13576
|
color: 'grey-6'
|
|
13438
13577
|
})), React__default.createElement(SearchInput, {
|
|
13439
13578
|
placeholder: searchPlaceholder
|
|
13440
|
-
})) : React__default.createElement("div", null), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
|
|
13579
|
+
})) : 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, {
|
|
13441
13580
|
isActive: openDrawer === 'custom',
|
|
13442
13581
|
onClick: function onClick() {
|
|
13443
13582
|
return toggleDrawers('custom');
|
|
@@ -13460,7 +13599,7 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13460
13599
|
icon: 'UserProfile',
|
|
13461
13600
|
size: 20,
|
|
13462
13601
|
color: 'dimmed'
|
|
13463
|
-
}))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13602
|
+
})))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13464
13603
|
isOpen: openDrawer === 'user'
|
|
13465
13604
|
}, React__default.createElement(UserMenu, Object.assign({}, {
|
|
13466
13605
|
hasLanguage: hasLanguage,
|
|
@@ -13497,8 +13636,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13497
13636
|
}, customDrawer.customComponent)), document.body));
|
|
13498
13637
|
};
|
|
13499
13638
|
|
|
13500
|
-
var _templateObject$
|
|
13501
|
-
var TabListWrapper = styled__default.div(_templateObject$
|
|
13639
|
+
var _templateObject$1I;
|
|
13640
|
+
var TabListWrapper = styled__default.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
|
|
13502
13641
|
var TabList = function TabList(_ref) {
|
|
13503
13642
|
var children = _ref.children,
|
|
13504
13643
|
defaultTabId = _ref.defaultTabId;
|
|
@@ -13511,11 +13650,11 @@ var TabList = function TabList(_ref) {
|
|
|
13511
13650
|
};
|
|
13512
13651
|
|
|
13513
13652
|
var _excluded$H = ["children", "tabFor", "onClick"];
|
|
13514
|
-
var _templateObject$
|
|
13515
|
-
var TabComponent = styled__default.div(_templateObject$
|
|
13516
|
-
var TabLabel = styled__default.label(_templateObject2$
|
|
13653
|
+
var _templateObject$1J, _templateObject2$1t, _templateObject3$1l;
|
|
13654
|
+
var TabComponent = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
|
|
13655
|
+
var TabLabel = styled__default.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) {
|
|
13517
13656
|
var theme = _ref.theme;
|
|
13518
|
-
return styled.css(_templateObject3$
|
|
13657
|
+
return styled.css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
13519
13658
|
}, function (_ref2) {
|
|
13520
13659
|
var active = _ref2.active;
|
|
13521
13660
|
return active ? '600' : '500';
|
|
@@ -13546,27 +13685,27 @@ var Tab = function Tab(_ref5) {
|
|
|
13546
13685
|
};
|
|
13547
13686
|
|
|
13548
13687
|
var _excluded$I = ["children", "tabId"];
|
|
13549
|
-
var _templateObject$
|
|
13550
|
-
var Container$
|
|
13688
|
+
var _templateObject$1K;
|
|
13689
|
+
var Container$17 = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n"])));
|
|
13551
13690
|
var TabContent = function TabContent(_ref) {
|
|
13552
13691
|
var children = _ref.children,
|
|
13553
13692
|
tabId = _ref.tabId,
|
|
13554
13693
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
|
|
13555
13694
|
var _useContext = React.useContext(TabContext),
|
|
13556
13695
|
selected = _useContext.selected;
|
|
13557
|
-
return selected === tabId ? React__default.createElement(Container$
|
|
13696
|
+
return selected === tabId ? React__default.createElement(Container$17, Object.assign({}, props), children) : null;
|
|
13558
13697
|
};
|
|
13559
13698
|
|
|
13560
13699
|
var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
13561
|
-
var _templateObject$
|
|
13562
|
-
var Container$
|
|
13563
|
-
var LinkTab = styled__default.div(_templateObject2$
|
|
13700
|
+
var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1d;
|
|
13701
|
+
var Container$18 = styled__default.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
13702
|
+
var LinkTab = styled__default.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) {
|
|
13564
13703
|
var theme = _ref.theme;
|
|
13565
|
-
return styled.css(_templateObject3$
|
|
13704
|
+
return styled.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);
|
|
13566
13705
|
}, function (_ref2) {
|
|
13567
13706
|
var isActive = _ref2.isActive,
|
|
13568
13707
|
theme = _ref2.theme;
|
|
13569
|
-
return isActive && styled.css(_templateObject4$
|
|
13708
|
+
return isActive && styled.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);
|
|
13570
13709
|
});
|
|
13571
13710
|
var MobileTab = function MobileTab(_ref3) {
|
|
13572
13711
|
var tabFor = _ref3.tabFor,
|
|
@@ -13582,7 +13721,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13582
13721
|
var newValue = selected === tabId ? closeId : tabId;
|
|
13583
13722
|
setSelected(newValue);
|
|
13584
13723
|
}, [closeId, selected, setSelected]);
|
|
13585
|
-
return React__default.createElement(Container$
|
|
13724
|
+
return React__default.createElement(Container$18, Object.assign({}, props, {
|
|
13586
13725
|
onClick: function onClick() {
|
|
13587
13726
|
return onChangeTab(tabFor);
|
|
13588
13727
|
}
|
|
@@ -13596,23 +13735,23 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13596
13735
|
};
|
|
13597
13736
|
|
|
13598
13737
|
var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
|
|
13599
|
-
var _templateObject$
|
|
13600
|
-
var Container$
|
|
13738
|
+
var _templateObject$1M, _templateObject2$1v, _templateObject3$1n, _templateObject4$1e, _templateObject5$16, _templateObject6$T;
|
|
13739
|
+
var Container$19 = styled__default.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) {
|
|
13601
13740
|
var active = _ref.active;
|
|
13602
|
-
return active ? styled.css(_templateObject2$
|
|
13741
|
+
return active ? styled.css(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
13603
13742
|
}, IconWrapper);
|
|
13604
|
-
var Title$a = styled__default.div(_templateObject4$
|
|
13743
|
+
var Title$a = styled__default.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) {
|
|
13605
13744
|
var theme = _ref2.theme;
|
|
13606
13745
|
return theme.fontFamily.ui;
|
|
13607
13746
|
}, function (_ref3) {
|
|
13608
13747
|
var active = _ref3.active;
|
|
13609
13748
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
13610
13749
|
});
|
|
13611
|
-
var SubTitle$2 = styled__default.div(_templateObject5$
|
|
13750
|
+
var SubTitle$2 = styled__default.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) {
|
|
13612
13751
|
var theme = _ref4.theme;
|
|
13613
13752
|
return theme.fontFamily.data;
|
|
13614
13753
|
});
|
|
13615
|
-
var TextGroup$1 = styled__default.div(_templateObject6$
|
|
13754
|
+
var TextGroup$1 = styled__default.div(_templateObject6$T || (_templateObject6$T = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
|
|
13616
13755
|
var TabWithIcon = function TabWithIcon(_ref5) {
|
|
13617
13756
|
var icon = _ref5.icon,
|
|
13618
13757
|
title = _ref5.title,
|
|
@@ -13626,7 +13765,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13626
13765
|
setSelected(tabId);
|
|
13627
13766
|
}, [setSelected]);
|
|
13628
13767
|
var active = selected === tabFor;
|
|
13629
|
-
return React__default.createElement(Container$
|
|
13768
|
+
return React__default.createElement(Container$19, Object.assign({}, {
|
|
13630
13769
|
active: active
|
|
13631
13770
|
}, props, {
|
|
13632
13771
|
onClick: function onClick() {
|
|
@@ -13643,9 +13782,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13643
13782
|
}), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
|
|
13644
13783
|
};
|
|
13645
13784
|
|
|
13646
|
-
var _templateObject$
|
|
13647
|
-
var Container$
|
|
13648
|
-
var TabListWrapper$1 = styled__default.div(_templateObject2$
|
|
13785
|
+
var _templateObject$1N, _templateObject2$1w;
|
|
13786
|
+
var Container$1a = styled__default.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
|
|
13787
|
+
var TabListWrapper$1 = styled__default.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) {
|
|
13649
13788
|
var paddingLeft = _ref.paddingLeft;
|
|
13650
13789
|
return paddingLeft ? paddingLeft : '87px';
|
|
13651
13790
|
});
|
|
@@ -13653,7 +13792,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13653
13792
|
var defaultTabId = _ref2.defaultTabId,
|
|
13654
13793
|
tabList = _ref2.tabList,
|
|
13655
13794
|
paddingLeft = _ref2.paddingLeft;
|
|
13656
|
-
return React__default.createElement(Container$
|
|
13795
|
+
return React__default.createElement(Container$1a, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
|
|
13657
13796
|
paddingLeft: paddingLeft
|
|
13658
13797
|
}), React__default.createElement(TabList, Object.assign({}, {
|
|
13659
13798
|
defaultTabId: defaultTabId
|
|
@@ -13681,10 +13820,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13681
13820
|
};
|
|
13682
13821
|
|
|
13683
13822
|
var _excluded$L = ["closeId", "closeText"];
|
|
13684
|
-
var _templateObject$
|
|
13685
|
-
var StyledButton$7 = styled__default.button(_templateObject$
|
|
13686
|
-
var IconContainer$4 = styled__default.div(_templateObject2$
|
|
13687
|
-
var TextWrapper$1 = styled__default.div(_templateObject3$
|
|
13823
|
+
var _templateObject$1O, _templateObject2$1x, _templateObject3$1o;
|
|
13824
|
+
var StyledButton$7 = styled__default.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);
|
|
13825
|
+
var IconContainer$4 = styled__default.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"])));
|
|
13826
|
+
var TextWrapper$1 = styled__default.div(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
13688
13827
|
var CloseButton$1 = function CloseButton(_ref) {
|
|
13689
13828
|
var closeId = _ref.closeId,
|
|
13690
13829
|
_ref$closeText = _ref.closeText,
|
|
@@ -13703,20 +13842,20 @@ var CloseButton$1 = function CloseButton(_ref) {
|
|
|
13703
13842
|
})), React__default.createElement(TextWrapper$1, null, closeText));
|
|
13704
13843
|
};
|
|
13705
13844
|
|
|
13706
|
-
var _templateObject$
|
|
13707
|
-
var Container$
|
|
13708
|
-
var ContentWrapper = styled__default.div(_templateObject2$
|
|
13845
|
+
var _templateObject$1P, _templateObject2$1y;
|
|
13846
|
+
var Container$1b = styled__default.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);
|
|
13847
|
+
var ContentWrapper = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
13709
13848
|
var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
13710
13849
|
var closeId = _ref.closeId,
|
|
13711
13850
|
children = _ref.children;
|
|
13712
13851
|
var _useContext = React.useContext(TabContext),
|
|
13713
13852
|
selected = _useContext.selected;
|
|
13714
|
-
return selected === closeId ? null : React__default.createElement(Container$
|
|
13853
|
+
return selected === closeId ? null : React__default.createElement(Container$1b, null, React__default.createElement(ContentWrapper, null, children));
|
|
13715
13854
|
};
|
|
13716
13855
|
|
|
13717
|
-
var _templateObject$
|
|
13718
|
-
var Container$
|
|
13719
|
-
var ItemWrapper = styled__default.div(_templateObject2$
|
|
13856
|
+
var _templateObject$1Q, _templateObject2$1z;
|
|
13857
|
+
var Container$1c = styled__default.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose([""])));
|
|
13858
|
+
var ItemWrapper = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
|
|
13720
13859
|
var MobileMenu = function MobileMenu(_ref) {
|
|
13721
13860
|
var content = _ref.content,
|
|
13722
13861
|
supportUrl = _ref.supportUrl,
|
|
@@ -13739,7 +13878,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13739
13878
|
var handleCloseMenu = React.useCallback(function () {
|
|
13740
13879
|
setSelected(closeId);
|
|
13741
13880
|
}, [closeId, setSelected]);
|
|
13742
|
-
return React__default.createElement(Container$
|
|
13881
|
+
return React__default.createElement(Container$1c, null, content.items.map(function (item, key) {
|
|
13743
13882
|
return React__default.createElement(ItemWrapper, {
|
|
13744
13883
|
key: key,
|
|
13745
13884
|
"data-key": key
|
|
@@ -13765,10 +13904,10 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13765
13904
|
})));
|
|
13766
13905
|
};
|
|
13767
13906
|
|
|
13768
|
-
var _templateObject$
|
|
13769
|
-
var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$
|
|
13770
|
-
var LogoMark$1 = styled__default.div(_templateObject2$
|
|
13771
|
-
var SVGObject$1 = styled__default.object(_templateObject3$
|
|
13907
|
+
var _templateObject$1R, _templateObject2$1A, _templateObject3$1p;
|
|
13908
|
+
var Logo$1 = styled__default(reactRouterDom.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);
|
|
13909
|
+
var LogoMark$1 = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
|
|
13910
|
+
var SVGObject$1 = styled__default.object(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose([""])));
|
|
13772
13911
|
var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
13773
13912
|
var _ref$home = _ref.home,
|
|
13774
13913
|
home = _ref$home === void 0 ? "/" : _ref$home,
|
|
@@ -13788,8 +13927,8 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
13788
13927
|
};
|
|
13789
13928
|
|
|
13790
13929
|
var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
13791
|
-
var _templateObject$
|
|
13792
|
-
var Container$
|
|
13930
|
+
var _templateObject$1S;
|
|
13931
|
+
var Container$1d = styled__default.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"])));
|
|
13793
13932
|
var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
13794
13933
|
var closeId = _ref.closeId,
|
|
13795
13934
|
hasLanguage = _ref.hasLanguage,
|
|
@@ -13807,7 +13946,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13807
13946
|
var handleCloseMenu = React.useCallback(function () {
|
|
13808
13947
|
setSelected(closeId);
|
|
13809
13948
|
}, [closeId, setSelected]);
|
|
13810
|
-
return React__default.createElement(Container$
|
|
13949
|
+
return React__default.createElement(Container$1d, null, React__default.createElement(UserMenu, Object.assign({}, _extends({
|
|
13811
13950
|
hasLanguage: hasLanguage,
|
|
13812
13951
|
hasLogout: hasLogout,
|
|
13813
13952
|
logoutLink: logoutLink,
|
|
@@ -13823,14 +13962,14 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13823
13962
|
};
|
|
13824
13963
|
|
|
13825
13964
|
var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
|
|
13826
|
-
var _templateObject$
|
|
13965
|
+
var _templateObject$1T, _templateObject2$1B;
|
|
13827
13966
|
var CLOSE_ID = 'closeMenu';
|
|
13828
13967
|
var NOTI_TAB = 'notifications';
|
|
13829
13968
|
var USER_TAB = 'user';
|
|
13830
13969
|
var MENU_TAB = 'menu';
|
|
13831
13970
|
var CUSTOM_TAB = 'custom';
|
|
13832
|
-
var Container$
|
|
13833
|
-
var HeaderContainer = styled__default.div(_templateObject2$
|
|
13971
|
+
var Container$1e = styled__default.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"])));
|
|
13972
|
+
var HeaderContainer = styled__default.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);
|
|
13834
13973
|
var MobileNavbar = function MobileNavbar(_ref) {
|
|
13835
13974
|
var content = _ref.content,
|
|
13836
13975
|
home = _ref.home,
|
|
@@ -13852,7 +13991,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
|
|
|
13852
13991
|
onLogout = _ref.onLogout,
|
|
13853
13992
|
onLanguageToggle = _ref.onLanguageToggle,
|
|
13854
13993
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
|
|
13855
|
-
return React__default.createElement(Container$
|
|
13994
|
+
return React__default.createElement(Container$1e, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
|
|
13856
13995
|
home: home,
|
|
13857
13996
|
logoMark: logoMark
|
|
13858
13997
|
}, {
|
|
@@ -13951,16 +14090,16 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
13951
14090
|
};
|
|
13952
14091
|
|
|
13953
14092
|
var _excluded$P = ["children"];
|
|
13954
|
-
var _templateObject$
|
|
13955
|
-
var Container$
|
|
13956
|
-
var LogoContainer = styled__default.div(_templateObject2$
|
|
13957
|
-
var LogoTopText = styled__default.div(_templateObject3$
|
|
13958
|
-
var LogoBottomText = styled__default.div(_templateObject4$
|
|
13959
|
-
var SidebarBox = styled__default.div(_templateObject5$
|
|
13960
|
-
var SidebarHeading = styled__default.div(_templateObject6$
|
|
13961
|
-
var SidebarLinkHeading = styled__default.div(_templateObject7$
|
|
13962
|
-
var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$
|
|
13963
|
-
var SLink = styled__default(reactRouterDom.Link)(_templateObject9$
|
|
14093
|
+
var _templateObject$1U, _templateObject2$1C, _templateObject3$1q, _templateObject4$1f, _templateObject5$17, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
|
|
14094
|
+
var Container$1f = styled__default.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"])));
|
|
14095
|
+
var LogoContainer = styled__default.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"])));
|
|
14096
|
+
var LogoTopText = styled__default.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"])));
|
|
14097
|
+
var LogoBottomText = styled__default.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"])));
|
|
14098
|
+
var SidebarBox = styled__default.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
14099
|
+
var SidebarHeading = styled__default.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"])));
|
|
14100
|
+
var SidebarLinkHeading = styled__default.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"])));
|
|
14101
|
+
var BackLink$1 = styled__default(reactRouterDom.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"])));
|
|
14102
|
+
var SLink = styled__default(reactRouterDom.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"])));
|
|
13964
14103
|
var SidebarLink = function SidebarLink(_ref) {
|
|
13965
14104
|
var title = _ref.title,
|
|
13966
14105
|
to = _ref.to;
|
|
@@ -13976,7 +14115,7 @@ var Logo$2 = function Logo(_ref2) {
|
|
|
13976
14115
|
var Sidebar = function Sidebar(_ref3) {
|
|
13977
14116
|
var children = _ref3.children,
|
|
13978
14117
|
props = _objectWithoutPropertiesLoose(_ref3, _excluded$P);
|
|
13979
|
-
return React__default.createElement(Container$
|
|
14118
|
+
return React__default.createElement(Container$1f, Object.assign({}, props), children);
|
|
13980
14119
|
};
|
|
13981
14120
|
|
|
13982
14121
|
Object.defineProperty(exports, 'IconSVGs', {
|