scorer-ui-kit 2.10.2 → 2.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Global/index.d.ts +1 -0
- package/dist/Layouts/index.d.ts +4 -2
- package/dist/Misc/atoms/Tag.d.ts +1 -0
- package/dist/Pages/atoms/PageTitle.d.ts +1 -0
- package/dist/Pages/molecules/PageHeader.d.ts +3 -0
- package/dist/index.js +273 -213
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +273 -213
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -9606,7 +9606,7 @@ var LineReducer = (function (state, action) {
|
|
|
9606
9606
|
}
|
|
9607
9607
|
});
|
|
9608
9608
|
|
|
9609
|
-
var _templateObject$11, _templateObject2$U, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$v, _templateObject7$u;
|
|
9609
|
+
var _templateObject$11, _templateObject2$U, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$v, _templateObject7$u, _templateObject8$p;
|
|
9610
9610
|
var ICON_SIZE = 24;
|
|
9611
9611
|
var GAP_LEFT = 20;
|
|
9612
9612
|
var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
|
|
@@ -9620,6 +9620,7 @@ var Title$3 = styled.h1(_templateObject4$I || (_templateObject4$I = _taggedTempl
|
|
|
9620
9620
|
var AreaTitleCss = css(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 18px;\n font-weight: 600;\n text-decoration: none;\n color: var(--grey-11);\n"])));
|
|
9621
9621
|
var AreaTitle = styled.div(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n ", "\n"])), AreaTitleCss);
|
|
9622
9622
|
var AreaLinkTitle = styled(Link)(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n ", "\n &:hover {\n text-decoration: underline;\n }\n"])), AreaTitleCss);
|
|
9623
|
+
var AreaButton = styled.button(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n &:hover {\n text-decoration: underline;\n }\n"])), resetButtonStyles, AreaTitleCss);
|
|
9623
9624
|
var PageTitle = function PageTitle(_ref2) {
|
|
9624
9625
|
var title = _ref2.title,
|
|
9625
9626
|
icon = _ref2.icon,
|
|
@@ -9632,7 +9633,8 @@ var PageTitle = function PageTitle(_ref2) {
|
|
|
9632
9633
|
_ref2$areaTitleBottom = _ref2.areaTitleBottom,
|
|
9633
9634
|
areaTitleBottom = _ref2$areaTitleBottom === void 0 ? false : _ref2$areaTitleBottom,
|
|
9634
9635
|
_ref2$iconColor = _ref2.iconColor,
|
|
9635
|
-
iconColor = _ref2$iconColor === void 0 ? 'dimmed' : _ref2$iconColor
|
|
9636
|
+
iconColor = _ref2$iconColor === void 0 ? 'dimmed' : _ref2$iconColor,
|
|
9637
|
+
onAreaClick = _ref2.onAreaClick;
|
|
9636
9638
|
useTitle(title, hideAreaInDocTitle ? undefined : areaTitle || '', undefined, updateDocTitle);
|
|
9637
9639
|
return React__default.createElement(Container$F, null, icon ? React__default.createElement(IconContainer$2, null, React__default.createElement(Icon, Object.assign({
|
|
9638
9640
|
size: ICON_SIZE,
|
|
@@ -9641,9 +9643,12 @@ var PageTitle = function PageTitle(_ref2) {
|
|
|
9641
9643
|
icon: icon
|
|
9642
9644
|
}))) : null, React__default.createElement(TitlesWrapper, {
|
|
9643
9645
|
areaTitleBottom: areaTitleBottom
|
|
9644
|
-
}, areaTitle &&
|
|
9646
|
+
}, areaTitle && onAreaClick ? React__default.createElement(AreaButton, {
|
|
9647
|
+
onClick: onAreaClick,
|
|
9648
|
+
type: "button"
|
|
9649
|
+
}, areaTitle) : areaTitle && areaHref ? React__default.createElement(AreaLinkTitle, {
|
|
9645
9650
|
to: areaHref
|
|
9646
|
-
}, areaTitle) : areaTitle
|
|
9651
|
+
}, areaTitle) : areaTitle ? React__default.createElement(AreaTitle, null, areaTitle) : null, React__default.createElement(Title$3, null, title)));
|
|
9647
9652
|
};
|
|
9648
9653
|
|
|
9649
9654
|
var _templateObject$12;
|
|
@@ -9653,26 +9658,27 @@ var IntroductionText = function IntroductionText(_ref) {
|
|
|
9653
9658
|
return React__default.createElement(Container$G, null, children);
|
|
9654
9659
|
};
|
|
9655
9660
|
|
|
9656
|
-
var _excluded$C = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
|
|
9657
|
-
var _templateObject$13, _templateObject2$V, _templateObject3$Q, _templateObject4$J, _templateObject5$E, _templateObject6$w, _templateObject7$v;
|
|
9661
|
+
var _excluded$C = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize", "onTagClick"];
|
|
9662
|
+
var _templateObject$13, _templateObject2$V, _templateObject3$Q, _templateObject4$J, _templateObject5$E, _templateObject6$w, _templateObject7$v, _templateObject8$q;
|
|
9658
9663
|
var TextContainer$2 = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
9659
9664
|
var StyledLink = styled(Link)(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n"])));
|
|
9660
|
-
var
|
|
9665
|
+
var StyledButton$5 = styled.button(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n ", ";\n text-decoration: none;\n display: flex;\n"])), resetButtonStyles);
|
|
9666
|
+
var TagWrapper = styled.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n font-size: ", "px;\n font-weight: 500;\n color: var(--grey-11);\n padding: 4px 10px;\n\n ", ";\n\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n gap: 8px;\n\n ", ";\n\n ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n ", ";\n"])), function (_ref) {
|
|
9661
9667
|
var size = _ref.size;
|
|
9662
9668
|
return size;
|
|
9663
9669
|
}, function (_ref2) {
|
|
9664
9670
|
var noBorder = _ref2.noBorder;
|
|
9665
|
-
return !noBorder && css(
|
|
9671
|
+
return !noBorder && css(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n border: solid 1px var(--grey-8);\n border-radius: 3px;\n "])));
|
|
9666
9672
|
}, function (_ref3) {
|
|
9667
9673
|
var tagSize = _ref3.tagSize;
|
|
9668
|
-
return tagSize === 'compact' && css(
|
|
9674
|
+
return tagSize === 'compact' && css(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n padding: 2px 6px;\n gap: 4px;\n "])));
|
|
9669
9675
|
}, function (_ref4) {
|
|
9670
9676
|
var tagSize = _ref4.tagSize;
|
|
9671
|
-
return tagSize === 'default' && css(
|
|
9677
|
+
return tagSize === 'default' && css(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n padding: 3px 8px;\n "])));
|
|
9672
9678
|
}, IconWrapper, function (_ref5) {
|
|
9673
9679
|
var hoverColor = _ref5.hoverColor,
|
|
9674
9680
|
enableHover = _ref5.enableHover;
|
|
9675
|
-
return enableHover && css(
|
|
9681
|
+
return enableHover && css(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n &:hover {\n cursor: pointer;\n border-color: var(--", ");\n color: var(--", ");\n ", " {\n [stroke]{\n stroke: var(--", ");\n }\n }\n }\n "])), hoverColor, hoverColor, IconWrapper, hoverColor);
|
|
9676
9682
|
});
|
|
9677
9683
|
var Tag = function Tag(_ref6) {
|
|
9678
9684
|
var _ref6$icon = _ref6.icon,
|
|
@@ -9687,6 +9693,7 @@ var Tag = function Tag(_ref6) {
|
|
|
9687
9693
|
_ref6$noBorder = _ref6.noBorder,
|
|
9688
9694
|
noBorder = _ref6$noBorder === void 0 ? false : _ref6$noBorder,
|
|
9689
9695
|
tagSize = _ref6.tagSize,
|
|
9696
|
+
onTagClick = _ref6.onTagClick,
|
|
9690
9697
|
props = _objectWithoutPropertiesLoose(_ref6, _excluded$C);
|
|
9691
9698
|
var iconTagSize = useMemo(function () {
|
|
9692
9699
|
return tagSize === 'compact' ? 8 : 10;
|
|
@@ -9697,7 +9704,7 @@ var Tag = function Tag(_ref6) {
|
|
|
9697
9704
|
var renderTag = function renderTag() {
|
|
9698
9705
|
return React__default.createElement(TagWrapper, {
|
|
9699
9706
|
hoverColor: 'primary',
|
|
9700
|
-
enableHover: linkTo ? true : false,
|
|
9707
|
+
enableHover: onTagClick || linkTo ? true : false,
|
|
9701
9708
|
size: tagSize ? textTagSize : size,
|
|
9702
9709
|
tagSize: tagSize,
|
|
9703
9710
|
noBorder: noBorder
|
|
@@ -9707,12 +9714,15 @@ var Tag = function Tag(_ref6) {
|
|
|
9707
9714
|
weight: weight
|
|
9708
9715
|
}, props)), React__default.createElement(TextContainer$2, null, label));
|
|
9709
9716
|
};
|
|
9710
|
-
return
|
|
9717
|
+
return onTagClick ? React__default.createElement(StyledButton$5, {
|
|
9718
|
+
onClick: onTagClick,
|
|
9719
|
+
type: "button"
|
|
9720
|
+
}, renderTag()) : linkTo ? React__default.createElement(StyledLink, {
|
|
9711
9721
|
to: linkTo
|
|
9712
9722
|
}, renderTag()) : renderTag();
|
|
9713
9723
|
};
|
|
9714
9724
|
|
|
9715
|
-
var _templateObject$14, _templateObject2$W, _templateObject3$R, _templateObject4$K, _templateObject5$F, _templateObject6$x;
|
|
9725
|
+
var _templateObject$14, _templateObject2$W, _templateObject3$R, _templateObject4$K, _templateObject5$F, _templateObject6$x, _templateObject7$w;
|
|
9716
9726
|
var Container$H = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n gap: 32px;\n"])));
|
|
9717
9727
|
var LeftPanel = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n"])));
|
|
9718
9728
|
var IntroductionTextWrapper = styled.div(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n max-width: 648px;\n"])));
|
|
@@ -9721,6 +9731,7 @@ var RightPanel = styled.div(_templateObject4$K || (_templateObject4$K = _taggedT
|
|
|
9721
9731
|
return iconLeftPanel && css(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n padding-top: 32px;\n "])));
|
|
9722
9732
|
}, deviceMediaQuery.large);
|
|
9723
9733
|
var TagListWrapper = styled.div(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: flex-start;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 5px;\n margin-top: 29px;\n"])));
|
|
9734
|
+
var BottomLeft = styled.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose([""])));
|
|
9724
9735
|
var PageHeader = function PageHeader(_ref2) {
|
|
9725
9736
|
var title = _ref2.title,
|
|
9726
9737
|
icon = _ref2.icon,
|
|
@@ -9734,7 +9745,9 @@ var PageHeader = function PageHeader(_ref2) {
|
|
|
9734
9745
|
hideAreaInDocTitle = _ref2.hideAreaInDocTitle,
|
|
9735
9746
|
tagList = _ref2.tagList,
|
|
9736
9747
|
areaTitleBottom = _ref2.areaTitleBottom,
|
|
9737
|
-
rightContent = _ref2.rightContent
|
|
9748
|
+
rightContent = _ref2.rightContent,
|
|
9749
|
+
bottomLeftContent = _ref2.bottomLeftContent,
|
|
9750
|
+
onAreaClick = _ref2.onAreaClick;
|
|
9738
9751
|
return React__default.createElement(Container$H, null, React__default.createElement(LeftPanel, null, React__default.createElement(PageTitle, Object.assign({
|
|
9739
9752
|
iconColor: iconColor
|
|
9740
9753
|
}, {
|
|
@@ -9744,11 +9757,14 @@ var PageHeader = function PageHeader(_ref2) {
|
|
|
9744
9757
|
areaTitle: areaTitle,
|
|
9745
9758
|
updateDocTitle: updateDocTitle,
|
|
9746
9759
|
hideAreaInDocTitle: hideAreaInDocTitle,
|
|
9747
|
-
areaTitleBottom: areaTitleBottom
|
|
9760
|
+
areaTitleBottom: areaTitleBottom,
|
|
9761
|
+
onAreaClick: onAreaClick,
|
|
9762
|
+
bottomLeftContent: bottomLeftContent
|
|
9748
9763
|
})), !tagList ? null : React__default.createElement(TagListWrapper, null, tagList.map(function (_ref3) {
|
|
9749
9764
|
var icon = _ref3.icon,
|
|
9750
9765
|
label = _ref3.label,
|
|
9751
|
-
linkTo = _ref3.linkTo
|
|
9766
|
+
linkTo = _ref3.linkTo,
|
|
9767
|
+
onTagClick = _ref3.onTagClick;
|
|
9752
9768
|
return React__default.createElement(Tag, Object.assign({
|
|
9753
9769
|
key: "tag-",
|
|
9754
9770
|
icon: icon || '',
|
|
@@ -9756,9 +9772,10 @@ var PageHeader = function PageHeader(_ref2) {
|
|
|
9756
9772
|
tagSize: 'compact'
|
|
9757
9773
|
}, {
|
|
9758
9774
|
label: label,
|
|
9759
|
-
linkTo: linkTo
|
|
9775
|
+
linkTo: linkTo,
|
|
9776
|
+
onTagClick: onTagClick
|
|
9760
9777
|
}));
|
|
9761
|
-
})), introductionText ? React__default.createElement(IntroductionTextWrapper, null, React__default.createElement(IntroductionText, null, introductionText)) : null), rightContent ? React__default.createElement(RightPanel, {
|
|
9778
|
+
})), introductionText ? React__default.createElement(IntroductionTextWrapper, null, React__default.createElement(IntroductionText, null, introductionText)) : null, React__default.createElement(BottomLeft, null, bottomLeftContent)), rightContent ? React__default.createElement(RightPanel, {
|
|
9762
9779
|
iconLeftPanel: !!icon
|
|
9763
9780
|
}, rightContent) : null);
|
|
9764
9781
|
};
|
|
@@ -9774,7 +9791,7 @@ var MultilineContent = function MultilineContent(_ref) {
|
|
|
9774
9791
|
}));
|
|
9775
9792
|
};
|
|
9776
9793
|
|
|
9777
|
-
var _templateObject$16, _templateObject2$X, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$y, _templateObject7$
|
|
9794
|
+
var _templateObject$16, _templateObject2$X, _templateObject3$S, _templateObject4$L, _templateObject5$G, _templateObject6$y, _templateObject7$x;
|
|
9778
9795
|
var Container$J = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n position: relative;\n height: inherit;\n background: grey;\n border-radius: 3px;\n overflow: hidden;\n width: 55px;\n height: auto;\n opacity: 0.65;\n margin-right: 10px;\n\n &::after {\n content: '';\n display: block;\n padding-bottom: 75%;\n ", "\n }\n\n ", "\n\n &:hover {\n cursor: pointer;\n\n ", "\n }\n\n"])), function (_ref) {
|
|
9779
9796
|
var aspect = _ref.aspect;
|
|
9780
9797
|
return aspect === '16:9' && css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n padding-left: 56.25%;\n "])));
|
|
@@ -9788,7 +9805,7 @@ var Container$J = styled.div(_templateObject$16 || (_templateObject$16 = _tagged
|
|
|
9788
9805
|
});
|
|
9789
9806
|
var ImageWrapper = styled.img(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n"])));
|
|
9790
9807
|
var NoImageWrapper = styled.div(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n height: 41px;\n width: 55px;\n object-fit: cover;\n display: block;\n"])));
|
|
9791
|
-
var PlayableDrop = styled.div(_templateObject7$
|
|
9808
|
+
var PlayableDrop = styled.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--black-a1);\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n display: flex;\n svg {\n padding-left: 2px;\n path {\n stroke: var(--white-1);\n }\n }\n };\n"])), IconWrapper);
|
|
9792
9809
|
var TableRowThumbnail = function TableRowThumbnail(_ref4) {
|
|
9793
9810
|
var _ref4$hoverZoom = _ref4.hoverZoom,
|
|
9794
9811
|
hoverZoom = _ref4$hoverZoom === void 0 ? true : _ref4$hoverZoom,
|
|
@@ -9913,7 +9930,7 @@ var TypeTableDeviceStatus = function TypeTableDeviceStatus(_ref2) {
|
|
|
9913
9930
|
});
|
|
9914
9931
|
};
|
|
9915
9932
|
|
|
9916
|
-
var _templateObject$18, _templateObject2$Z, _templateObject3$T, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$
|
|
9933
|
+
var _templateObject$18, _templateObject2$Z, _templateObject3$T, _templateObject4$M, _templateObject5$H, _templateObject6$z, _templateObject7$y, _templateObject8$r, _templateObject9$k, _templateObject10$g, _templateObject11$a;
|
|
9917
9934
|
var CopyToClipboard = styled.button(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n\n cursor: pointer;\n opacity: 0;\n\n position: absolute;\n right: 0;\n top: 14px;\n width: 20px;\n height: 20px;\n background: transparent;\n border: none;\n outline: none;\n\n ", "\n\n svg {\n display: block;\n }\n\n &:hover {\n opacity: 1 !important;\n }\n\n"])), function (_ref) {
|
|
9918
9935
|
var theme = _ref.theme;
|
|
9919
9936
|
return theme && css(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n transition: ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.easeOut);
|
|
@@ -9931,9 +9948,9 @@ var CellContainer = styled.div(_templateObject3$T || (_templateObject3$T = _tagg
|
|
|
9931
9948
|
}, function (_ref4) {
|
|
9932
9949
|
var styles = _ref4.theme.styles,
|
|
9933
9950
|
hideDivider = _ref4.hideDivider;
|
|
9934
|
-
return !hideDivider && css(_templateObject7$
|
|
9951
|
+
return !hideDivider && css(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0px;\n position: absolute;\n }\n "])), styles.tables.rows.divider);
|
|
9935
9952
|
});
|
|
9936
|
-
var UnitText = styled.span(_templateObject8$
|
|
9953
|
+
var UnitText = styled.span(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref5) {
|
|
9937
9954
|
var theme = _ref5.theme;
|
|
9938
9955
|
return css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n ", ";\n "])), theme.typography.table.columnData['unit']);
|
|
9939
9956
|
});
|
|
@@ -10096,7 +10113,7 @@ var TableHeaderTitle = function TableHeaderTitle(_ref4) {
|
|
|
10096
10113
|
}), header);
|
|
10097
10114
|
};
|
|
10098
10115
|
|
|
10099
|
-
var _templateObject$1b, _templateObject2$10, _templateObject3$V, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$
|
|
10116
|
+
var _templateObject$1b, _templateObject2$10, _templateObject3$V, _templateObject4$O, _templateObject5$I, _templateObject6$A, _templateObject7$z, _templateObject8$s, _templateObject9$l, _templateObject10$h, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$7, _templateObject15$5, _templateObject16$4, _templateObject17$4;
|
|
10100
10117
|
var HeaderRow = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n display: table-row;\n height: 50px;\n"])));
|
|
10101
10118
|
var HeaderItem = styled.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n display: table-cell;\n height: inherit;\n vertical-align:top;\n line-height: 20px;\n position: relative;\n font-family: ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (p) {
|
|
10102
10119
|
return p.theme.fontFamily.ui;
|
|
@@ -10112,12 +10129,12 @@ var HeaderItem = styled.div(_templateObject2$10 || (_templateObject2$10 = _tagge
|
|
|
10112
10129
|
return p.fixedWidth && css(_templateObject6$A || (_templateObject6$A = _taggedTemplateLiteralLoose(["\n width: ", "px;\n "])), p.fixedWidth);
|
|
10113
10130
|
}, function (_ref3) {
|
|
10114
10131
|
var minWidth = _ref3.minWidth;
|
|
10115
|
-
return minWidth && css(_templateObject7$
|
|
10132
|
+
return minWidth && css(_templateObject7$z || (_templateObject7$z = _taggedTemplateLiteralLoose(["\n min-width:", "px;\n "])), minWidth);
|
|
10116
10133
|
}, function (_ref4) {
|
|
10117
10134
|
var styles = _ref4.theme.styles,
|
|
10118
10135
|
headerStyle = _ref4.headerStyle,
|
|
10119
10136
|
isSortActive = _ref4.isSortActive;
|
|
10120
|
-
return headerStyle === 'subHeader' && css(_templateObject8$
|
|
10137
|
+
return headerStyle === 'subHeader' && css(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n padding-bottom: 15px;\n\n &::after {\n ", ";\n content: '';\n display: block;\n height: 1px;\n left: ", ";\n right: 0;\n width: ", ";\n bottom: 0px;\n position: absolute;\n }\n"])), styles.tables.header.divider, isSortActive ? '-15px' : '0', isSortActive ? 'calc(100% + 15px)' : '100%');
|
|
10121
10138
|
});
|
|
10122
10139
|
var TitleItems = styled.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", ";\n"])), function (_ref5) {
|
|
10123
10140
|
var alignment = _ref5.alignment;
|
|
@@ -10353,17 +10370,17 @@ var TypeTable = function TypeTable(_ref4) {
|
|
|
10353
10370
|
};
|
|
10354
10371
|
|
|
10355
10372
|
var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
|
|
10356
|
-
var _templateObject$1d, _templateObject2$12, _templateObject3$X, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$
|
|
10373
|
+
var _templateObject$1d, _templateObject2$12, _templateObject3$X, _templateObject4$Q, _templateObject5$K, _templateObject6$B, _templateObject7$A, _templateObject8$t, _templateObject9$m, _templateObject10$i;
|
|
10357
10374
|
var Container$M = styled.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n position: relative;\n ", "\n"])), function (_ref) {
|
|
10358
10375
|
var theme = _ref.theme;
|
|
10359
10376
|
return css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
10360
10377
|
});
|
|
10361
|
-
var StyledButton$
|
|
10378
|
+
var StyledButton$6 = styled(Button)(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10362
10379
|
var StyledLoadingButton = styled(ButtonWithLoading)(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n"])));
|
|
10363
10380
|
var StyledLink$1 = styled(Link)(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
|
|
10364
|
-
var EditContainer = styled.div(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: var(--grey-2);\n z-index: 99;\n position: absolute;\n bottom: -15px;\n left: -11px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n margin:0;\n span {\n margin: 0;\n }\n }\n ", " {\n margin-left: 5px;\n }\n ", " {\n margin-left: 5px;\n }\n"])), StyledLabel, StyledButton$
|
|
10365
|
-
var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$
|
|
10366
|
-
var TextContainer$3 = styled.div(_templateObject8$
|
|
10381
|
+
var EditContainer = styled.div(_templateObject6$B || (_templateObject6$B = _taggedTemplateLiteralLoose(["\n min-width: 320px;\n background-color: var(--grey-2);\n z-index: 99;\n position: absolute;\n bottom: -15px;\n left: -11px;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n margin:0;\n span {\n margin: 0;\n }\n }\n ", " {\n margin-left: 5px;\n }\n ", " {\n margin-left: 5px;\n }\n"])), StyledLabel, StyledButton$6, StyledLoadingButton);
|
|
10382
|
+
var StyledIconButton$1 = styled(IconButton$2)(_templateObject7$A || (_templateObject7$A = _taggedTemplateLiteralLoose([""])));
|
|
10383
|
+
var TextContainer$3 = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 18px;\n\n ", "\n\n ", "\n\n ", " {\n opacity: 0;\n position: absolute;\n top: 7px;\n right: 0;\n };\n\n &:hover {\n ", " {\n opacity: 1;\n };\n }\n"])), function (_ref2) {
|
|
10367
10384
|
var alignment = _ref2.alignment;
|
|
10368
10385
|
return alignment === 'center' && css(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n justify-content: center;\n "])));
|
|
10369
10386
|
}, function (_ref3) {
|
|
@@ -10457,7 +10474,7 @@ var EditCell = function EditCell(_ref4) {
|
|
|
10457
10474
|
},
|
|
10458
10475
|
size: 'small',
|
|
10459
10476
|
loading: loading
|
|
10460
|
-
}, loading ? 'Saving' : 'Save'), !loading && React__default.createElement(StyledButton$
|
|
10477
|
+
}, loading ? 'Saving' : 'Save'), !loading && React__default.createElement(StyledButton$6, {
|
|
10461
10478
|
onClick: function onClick() {
|
|
10462
10479
|
return setIsEditMode(false);
|
|
10463
10480
|
},
|
|
@@ -12070,7 +12087,7 @@ var Controls = function Controls(_ref) {
|
|
|
12070
12087
|
};
|
|
12071
12088
|
|
|
12072
12089
|
var _excluded$E = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
|
|
12073
|
-
var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$X, _templateObject5$R, _templateObject6$D, _templateObject7$
|
|
12090
|
+
var _templateObject$1l, _templateObject2$19, _templateObject3$12, _templateObject4$X, _templateObject5$R, _templateObject6$D, _templateObject7$B, _templateObject8$u;
|
|
12074
12091
|
var Container$U = styled.div(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 170px;\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n position: relative;\n\n ", " {\n height: 100%;\n width: 100%;\n text-align: center;\n img, video {\n border-radius: 3px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n"])), MediaBoxWrapper);
|
|
12075
12092
|
var EmptyWithIcon = styled.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n ", "\n;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
12076
12093
|
var hasPadding = _ref.hasPadding;
|
|
@@ -12083,8 +12100,8 @@ var Notice = styled.div(_templateObject3$12 || (_templateObject3$12 = _taggedTem
|
|
|
12083
12100
|
var NoticeMessage = styled.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 10px;\n"])), EllipsisStyles);
|
|
12084
12101
|
var NoticeTitle = styled.div(_templateObject5$R || (_templateObject5$R = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 245px;\n font-size: 12px;\n"])), EllipsisStyles);
|
|
12085
12102
|
var NoticeIcon = styled.div(_templateObject6$D || (_templateObject6$D = _taggedTemplateLiteralLoose(["\n height: 20px;\n width: 20px;\n margin-left: 2px;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), IconWrapper);
|
|
12086
|
-
var NoticeTextGroup = styled.div(_templateObject7$
|
|
12087
|
-
var StatusLine = styled.div(_templateObject8$
|
|
12103
|
+
var NoticeTextGroup = styled.div(_templateObject7$B || (_templateObject7$B = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-left: 14px;\n"])));
|
|
12104
|
+
var StatusLine = styled.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 3px;\n width: 100%;\n"])), function (_ref3) {
|
|
12088
12105
|
var color = _ref3.color;
|
|
12089
12106
|
return color && "var(--" + color + ")";
|
|
12090
12107
|
});
|
|
@@ -12117,7 +12134,7 @@ var MediaStream = function MediaStream(_ref4) {
|
|
|
12117
12134
|
}));
|
|
12118
12135
|
};
|
|
12119
12136
|
|
|
12120
|
-
var _templateObject$1m, _templateObject2$1a, _templateObject3$13, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$
|
|
12137
|
+
var _templateObject$1m, _templateObject2$1a, _templateObject3$13, _templateObject4$Y, _templateObject5$S, _templateObject6$E, _templateObject7$C, _templateObject8$v, _templateObject9$n;
|
|
12121
12138
|
var Container$V = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 60px;\n"])));
|
|
12122
12139
|
var LeftData = styled.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding: 0 12px 0 12px;\n display: flex;\n\n ", " {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
12123
12140
|
var hasRightData = _ref.hasRightData;
|
|
@@ -12132,11 +12149,11 @@ var LeftTitle = styled.div(_templateObject6$E || (_templateObject6$E = _taggedTe
|
|
|
12132
12149
|
var hasMarginBottom = _ref3.hasMarginBottom;
|
|
12133
12150
|
return hasMarginBottom && "margin-bottom: 1px;";
|
|
12134
12151
|
});
|
|
12135
|
-
var LeftSubTitle = styled.div(_templateObject7$
|
|
12152
|
+
var LeftSubTitle = styled.div(_templateObject7$C || (_templateObject7$C = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n ", ";\n ", "\n\n color: var(--grey-11);\n font-size: 16px;\n"])), EllipsisStyles, function (_ref4) {
|
|
12136
12153
|
var hasRightData = _ref4.hasRightData;
|
|
12137
12154
|
return hasRightData ? "max-width: 140px;" : "max-width: 250px;";
|
|
12138
12155
|
});
|
|
12139
|
-
var Title$5 = styled.div(_templateObject8$
|
|
12156
|
+
var Title$5 = styled.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n ", ";\n max-width: 80px;\n color: var(--grey-a10);\n font-size: 10px;\n ", ";\n"])), EllipsisStyles, function (_ref5) {
|
|
12140
12157
|
var hasMarginBottom = _ref5.hasMarginBottom;
|
|
12141
12158
|
return hasMarginBottom && "margin-bottom: 6px;";
|
|
12142
12159
|
});
|
|
@@ -12292,7 +12309,7 @@ var ActionsBar = function ActionsBar(_ref3) {
|
|
|
12292
12309
|
}, finishTextButton))), React__default.createElement(SelectedResults, null, renderSelected(selectedTemplate, totalSelected, totalAvailable)));
|
|
12293
12310
|
};
|
|
12294
12311
|
|
|
12295
|
-
var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$
|
|
12312
|
+
var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$_, _templateObject5$U, _templateObject6$G, _templateObject7$D, _templateObject8$w, _templateObject9$o;
|
|
12296
12313
|
var WIDTH_PER_NUMBER = 12;
|
|
12297
12314
|
var PaginationContainer = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-top: 20px;\n padding-bottom: 20px;\n width: 100%;\n height: fit-content;\n margin-right: 10px;\n white-space: nowrap;\n gap: 40px;\n vertical-align: baseline;\n"])));
|
|
12298
12315
|
var StaticPageCount = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n font-size: 14px;\n color: var(--grey-8);\n height: 100%;\n text-align: left;\n padding-top: 1px;\n padding-right: 1px;\n"])));
|
|
@@ -12309,8 +12326,8 @@ var InputContainer$2 = styled.div(_templateObject5$U || (_templateObject5$U = _t
|
|
|
12309
12326
|
return borderColorState && "border: 1px solid var(--input-" + borderColorState + "-border-color)";
|
|
12310
12327
|
});
|
|
12311
12328
|
var GoButton = styled(Button)(_templateObject6$G || (_templateObject6$G = _taggedTemplateLiteralLoose(["\n height: 24px;\n padding: 0 8px;\n margin-left: 8px;\n"])));
|
|
12312
|
-
var ArrowWrapper = styled.div(_templateObject7$
|
|
12313
|
-
var ArrowButton = styled.button(_templateObject8$
|
|
12329
|
+
var ArrowWrapper = styled.div(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 0 8px;\n"])));
|
|
12330
|
+
var ArrowButton = styled.button(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n ", ";\n width: 40px;\n height: 40px;\n padding: 12px;\n border-radius: 3px;\n box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);\n border: solid 1px var(--input-default-border-color);\n background-color: var(grey-2);\n pointer-events: ", ";\n opacity: ", ";\n\n &:focus, &:hover {\n outline: 2px solid #838383;\n }\n"])), resetButtonStyles, function (_ref4) {
|
|
12314
12331
|
var active = _ref4.active;
|
|
12315
12332
|
return active ? 'auto' : 'none';
|
|
12316
12333
|
}, function (_ref5) {
|
|
@@ -12522,7 +12539,7 @@ var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObjec
|
|
|
12522
12539
|
var Container$X = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose([""])));
|
|
12523
12540
|
var Title$7 = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n font-size: 20px;\n font-weight: 400;\n text-align: left;\n text-shadow: 0px 0px 10px var(--white-a5);\n text-decoration: none;\n color: var(--grey-11);\n"])));
|
|
12524
12541
|
var MessageBox$1 = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 400;\n line-height: 25px;\n text-align: left;\n text-decoration: none;\n color: var(--grey-11);\n margin: 28px 0;\n"])));
|
|
12525
|
-
var StyledButton$
|
|
12542
|
+
var StyledButton$7 = styled(Button)(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
|
|
12526
12543
|
var ButtonsGroup$1 = styled.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n text-align: right;\n display: flex;\n justify-content: flex-end;\n"])));
|
|
12527
12544
|
var ConfirmationModal = function ConfirmationModal(_ref) {
|
|
12528
12545
|
var _ref$title = _ref.title,
|
|
@@ -12551,10 +12568,10 @@ var ConfirmationModal = function ConfirmationModal(_ref) {
|
|
|
12551
12568
|
rightButtonCallback();
|
|
12552
12569
|
setModalOpen(false);
|
|
12553
12570
|
};
|
|
12554
|
-
return React__default.createElement(Container$X, null, React__default.createElement(Title$7, null, title), React__default.createElement(MessageBox$1, null, message), React__default.createElement(ButtonsGroup$1, null, React__default.createElement(StyledButton$
|
|
12571
|
+
return React__default.createElement(Container$X, null, React__default.createElement(Title$7, null, title), React__default.createElement(MessageBox$1, null, message), React__default.createElement(ButtonsGroup$1, null, React__default.createElement(StyledButton$7, {
|
|
12555
12572
|
design: leftButtonDesign,
|
|
12556
12573
|
onClick: handlePrimaryBtn
|
|
12557
|
-
}, leftButtonText), React__default.createElement(StyledButton$
|
|
12574
|
+
}, leftButtonText), React__default.createElement(StyledButton$7, {
|
|
12558
12575
|
design: rightButtonDesign,
|
|
12559
12576
|
onClick: handleSecondaryBtn
|
|
12560
12577
|
}, rightButtonText)));
|
|
@@ -12597,46 +12614,66 @@ var UtilityHeaderShare = function UtilityHeaderShare(_ref) {
|
|
|
12597
12614
|
})), copyActionText);
|
|
12598
12615
|
};
|
|
12599
12616
|
|
|
12600
|
-
var _templateObject$1u, _templateObject2$1f, _templateObject3$17;
|
|
12617
|
+
var _templateObject$1u, _templateObject2$1f, _templateObject3$17, _templateObject4$10, _templateObject5$W, _templateObject6$H, _templateObject7$E;
|
|
12601
12618
|
var BackLinkIcon = styled.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n flex: 1;\n > div {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
12602
|
-
var
|
|
12619
|
+
var backLinkStyle = css(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n\n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n"])), BackLinkIcon, BackLinkIcon);
|
|
12620
|
+
var dividerStyle = css(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n content: '';\n display: inline-block;\n height: 12px;\n width: 1px;\n padding-left: 8px;\n border-right: 1px solid var(--grey-10);\n"])));
|
|
12621
|
+
var BackLink = styled(Link)(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n ", ";\n margin-left: ", ";\n\n ", "\n"])), backLinkStyle, function (props) {
|
|
12603
12622
|
return props.$iconInGutter ? '-24px' : '0';
|
|
12604
|
-
},
|
|
12623
|
+
}, function (_ref) {
|
|
12605
12624
|
var $showDivider = _ref.$showDivider;
|
|
12606
|
-
return $showDivider && css(
|
|
12607
|
-
});
|
|
12608
|
-
var
|
|
12609
|
-
|
|
12610
|
-
|
|
12611
|
-
|
|
12612
|
-
|
|
12613
|
-
|
|
12614
|
-
|
|
12615
|
-
|
|
12625
|
+
return $showDivider && css(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n &::after {\n ", ";\n }\n "])), dividerStyle);
|
|
12626
|
+
});
|
|
12627
|
+
var BackButton = styled.button(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n margin-left: ", ";\n\n ", "\n"])), resetButtonStyles, backLinkStyle, function (props) {
|
|
12628
|
+
return props.$iconInGutter ? '-24px' : '0';
|
|
12629
|
+
}, function (_ref2) {
|
|
12630
|
+
var $showDivider = _ref2.$showDivider;
|
|
12631
|
+
return $showDivider && css(_templateObject7$E || (_templateObject7$E = _taggedTemplateLiteralLoose(["\n &::after {\n ", ";\n }\n "])), dividerStyle);
|
|
12632
|
+
});
|
|
12633
|
+
var UtilityHeaderBack = function UtilityHeaderBack(_ref3) {
|
|
12634
|
+
var _ref3$show = _ref3.show,
|
|
12635
|
+
show = _ref3$show === void 0 ? true : _ref3$show,
|
|
12636
|
+
link = _ref3.link,
|
|
12637
|
+
_ref3$label = _ref3.label,
|
|
12638
|
+
label = _ref3$label === void 0 ? 'Back' : _ref3$label,
|
|
12639
|
+
$showDivider = _ref3.$showDivider,
|
|
12640
|
+
$iconInGutter = _ref3.$iconInGutter,
|
|
12641
|
+
onClick = _ref3.onClick;
|
|
12642
|
+
var innerContent = useMemo(function () {
|
|
12643
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(BackLinkIcon, null, React__default.createElement(Icon, {
|
|
12644
|
+
icon: "Back",
|
|
12645
|
+
size: 16,
|
|
12646
|
+
color: "grey-10"
|
|
12647
|
+
})), label);
|
|
12648
|
+
}, [label]);
|
|
12616
12649
|
if (!show) {
|
|
12617
12650
|
return null;
|
|
12618
12651
|
}
|
|
12619
|
-
return React__default.createElement(
|
|
12652
|
+
return React__default.createElement(React__default.Fragment, null, onClick ? React__default.createElement(BackButton, Object.assign({}, {
|
|
12653
|
+
$showDivider: $showDivider,
|
|
12654
|
+
$iconInGutter: $iconInGutter,
|
|
12655
|
+
onClick: onClick
|
|
12656
|
+
}), innerContent) : React__default.createElement(BackLink, Object.assign({
|
|
12620
12657
|
to: link
|
|
12621
12658
|
}, {
|
|
12622
12659
|
$showDivider: $showDivider,
|
|
12623
12660
|
$iconInGutter: $iconInGutter
|
|
12624
|
-
}),
|
|
12625
|
-
icon: "Back",
|
|
12626
|
-
size: 16,
|
|
12627
|
-
color: "grey-10"
|
|
12628
|
-
})), label);
|
|
12661
|
+
}), innerContent));
|
|
12629
12662
|
};
|
|
12630
12663
|
|
|
12631
|
-
var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$
|
|
12664
|
+
var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$11, _templateObject5$X, _templateObject6$I, _templateObject7$F, _templateObject8$x, _templateObject9$p, _templateObject10$j, _templateObject11$c, _templateObject12$a;
|
|
12632
12665
|
var Container$Y = styled.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n margin-top: var(--utility-header-padding-top);\n padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n height: 48px;\n width: 100%;\n display: flex;\n"])));
|
|
12633
12666
|
var LeftArea = styled.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
|
|
12634
12667
|
var Breadcrumbs = styled.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
12635
|
-
var Breadcrumb = styled.div(_templateObject4$
|
|
12636
|
-
var BreadcrumbIcon = styled.div(_templateObject5$
|
|
12637
|
-
var HomeIcon = styled(BreadcrumbIcon)(_templateObject6$
|
|
12638
|
-
var
|
|
12639
|
-
var
|
|
12668
|
+
var Breadcrumb = styled.div(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n\n"])));
|
|
12669
|
+
var BreadcrumbIcon = styled.div(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
12670
|
+
var HomeIcon = styled(BreadcrumbIcon)(_templateObject6$I || (_templateObject6$I = _taggedTemplateLiteralLoose(["\n padding-bottom: 1px;\n svg path {\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n"])));
|
|
12671
|
+
var BreadcrumbTextStyle = css(_templateObject7$F || (_templateObject7$F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n"])));
|
|
12672
|
+
var BreadCrumbStyle = css(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n ", ";\n transition: color var(--speed-normal) var(--easing-primary-out);\n\n &:hover {\n color: var(--grey-12);\n ", " svg {\n path {\n stroke: var(--grey-12);\n }\n }\n }\n"])), BreadcrumbTextStyle, HomeIcon);
|
|
12673
|
+
var BreadcrumbLink = styled(Link)(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n ", ";\n"])), BreadCrumbStyle);
|
|
12674
|
+
var BreadcrumbButton = styled.button(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n"])), resetButtonStyles, BreadCrumbStyle);
|
|
12675
|
+
var BreadcrumbText = styled.span(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n ", ";\n pointer-events: none;\n"])), BreadcrumbTextStyle);
|
|
12676
|
+
var RightArea = styled.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
|
|
12640
12677
|
var UtilityHeader = function UtilityHeader(_ref) {
|
|
12641
12678
|
var _ref$showBreadcrumbs = _ref.showBreadcrumbs,
|
|
12642
12679
|
showBreadcrumbs = _ref$showBreadcrumbs === void 0 ? true : _ref$showBreadcrumbs,
|
|
@@ -12656,18 +12693,23 @@ var UtilityHeader = function UtilityHeader(_ref) {
|
|
|
12656
12693
|
"$iconInGutter": iconInGutter
|
|
12657
12694
|
}, back)), hasBreadcrumbs ? React__default.createElement(Breadcrumbs, null, breadcrumbs.map(function (breadcrumb, index) {
|
|
12658
12695
|
var text = breadcrumb.text,
|
|
12659
|
-
href = breadcrumb.href
|
|
12696
|
+
href = breadcrumb.href,
|
|
12697
|
+
onClick = breadcrumb.onClick;
|
|
12660
12698
|
var isFirst = index === 0;
|
|
12661
12699
|
var isLast = index === breadcrumbs.length - 1;
|
|
12662
|
-
|
|
12663
|
-
key: index
|
|
12664
|
-
}, React__default.createElement(Breadcrumb, null, React__default.createElement(BreadcrumbLink, {
|
|
12665
|
-
to: href
|
|
12666
|
-
}, isFirst && showHomeIcon ? React__default.createElement(HomeIcon, null, React__default.createElement(Icon, {
|
|
12700
|
+
var innerContent = React__default.createElement(React__default.Fragment, null, isFirst && showHomeIcon ? React__default.createElement(HomeIcon, null, React__default.createElement(Icon, {
|
|
12667
12701
|
icon: "Home",
|
|
12668
12702
|
size: 11,
|
|
12669
12703
|
color: 'grey-10'
|
|
12670
|
-
})) : null, text)
|
|
12704
|
+
})) : null, text);
|
|
12705
|
+
return React__default.createElement(React__default.Fragment, {
|
|
12706
|
+
key: index
|
|
12707
|
+
}, React__default.createElement(Breadcrumb, null, onClick ? React__default.createElement(BreadcrumbButton, {
|
|
12708
|
+
onClick: onClick,
|
|
12709
|
+
type: "button"
|
|
12710
|
+
}, innerContent) : href ? React__default.createElement(BreadcrumbLink, {
|
|
12711
|
+
to: href
|
|
12712
|
+
}, innerContent) : React__default.createElement(BreadcrumbText, null, innerContent), !isLast ? React__default.createElement(BreadcrumbIcon, null, React__default.createElement(Icon, {
|
|
12671
12713
|
icon: "Right",
|
|
12672
12714
|
size: 6,
|
|
12673
12715
|
color: 'grey-8'
|
|
@@ -12692,12 +12734,12 @@ var Tabs = function Tabs(_ref) {
|
|
|
12692
12734
|
}, children);
|
|
12693
12735
|
};
|
|
12694
12736
|
|
|
12695
|
-
var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$
|
|
12737
|
+
var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y;
|
|
12696
12738
|
var Container$Z = styled.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
|
|
12697
12739
|
var HeaderArea = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n 24px\n var(--content-layout-padding-right)\n 32px\n var(--content-layout-padding-left);\n \n"])));
|
|
12698
12740
|
var TabArea = styled.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-4);\n"])));
|
|
12699
|
-
var TabAreaInner = styled.div(_templateObject4$
|
|
12700
|
-
var Content = styled.div(_templateObject5$
|
|
12741
|
+
var TabAreaInner = styled.div(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n flex: 1;\n width: 100%;\n padding: \n 0\n var(--content-layout-padding-right)\n 0\n var(--content-layout-padding-left);\n"])));
|
|
12742
|
+
var Content = styled.div(_templateObject5$Y || (_templateObject5$Y = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n var(--content-layout-padding-top)\n var(--content-layout-padding-right)\n var(--content-layout-padding-bottom)\n var(--content-layout-padding-left);\n\n display: flex;\n flex: 1;\n flex-direction: column;\n"])));
|
|
12701
12743
|
var ContentLayout = function ContentLayout(_ref) {
|
|
12702
12744
|
var _ref$layout = _ref.layout,
|
|
12703
12745
|
layout = _ref$layout === void 0 ? 'default' : _ref$layout,
|
|
@@ -12737,15 +12779,15 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
|
|
|
12737
12779
|
}, children));
|
|
12738
12780
|
};
|
|
12739
12781
|
|
|
12740
|
-
var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$
|
|
12782
|
+
var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$G, _templateObject8$y;
|
|
12741
12783
|
var Inner$1 = styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
12742
12784
|
var Line = styled.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
|
|
12743
12785
|
var IconContainer$3 = styled.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
|
|
12744
|
-
var IconDefault = styled.svg(_templateObject4$
|
|
12786
|
+
var IconDefault = styled.svg(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
|
|
12745
12787
|
var $layout = _ref.$layout;
|
|
12746
12788
|
return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
|
|
12747
12789
|
});
|
|
12748
|
-
var IconArrow = styled.svg(_templateObject5$
|
|
12790
|
+
var IconArrow = styled.svg(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n transform: rotate(0deg);\n ", ";\n"])), function (_ref2) {
|
|
12749
12791
|
var $direction = _ref2.$direction;
|
|
12750
12792
|
switch ($direction) {
|
|
12751
12793
|
case 'up':
|
|
@@ -12759,9 +12801,9 @@ var IconArrow = styled.svg(_templateObject5$Y || (_templateObject5$Y = _taggedTe
|
|
|
12759
12801
|
return 'transform: rotate(0deg);';
|
|
12760
12802
|
}
|
|
12761
12803
|
});
|
|
12762
|
-
var Container$_ = styled.div(_templateObject6$
|
|
12804
|
+
var Container$_ = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (_ref3) {
|
|
12763
12805
|
var $layout = _ref3.$layout;
|
|
12764
|
-
return $layout === 'horizontal' ? css(_templateObject7$
|
|
12806
|
+
return $layout === 'horizontal' ? css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n width: 16px;\n flex-direction: column;\n ", "{\n flex-direction: column;\n }\n\n ", "{\n width: 1px;\n }\n\n "])), Inner$1, Line) : css(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n height: 16px;\n flex-direction: row;\n ", "{\n flex-direction: row;\n }\n ", "{\n height: 1px;\n }\n "])), Inner$1, Line);
|
|
12765
12807
|
});
|
|
12766
12808
|
var ResizeLine = function ResizeLine(_ref4) {
|
|
12767
12809
|
var _ref4$state = _ref4.state,
|
|
@@ -12805,15 +12847,15 @@ var ResizeLine = function ResizeLine(_ref4) {
|
|
|
12805
12847
|
}))), React__default.createElement(Line, null)));
|
|
12806
12848
|
};
|
|
12807
12849
|
|
|
12808
|
-
var _templateObject$1z, _templateObject2$1k, _templateObject3$1b, _templateObject4$
|
|
12850
|
+
var _templateObject$1z, _templateObject2$1k, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$K, _templateObject7$H, _templateObject8$z, _templateObject9$q, _templateObject10$k, _templateObject11$d, _templateObject12$b, _templateObject13$9, _templateObject14$8, _templateObject15$6, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
|
|
12809
12851
|
var DebugData = styled.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 10;\n bottom: 20px;\n left: 20px;\n background: #ededed99;\n border: grey 1px solid;\n padding: 20px;\n line-height: 20px;\n font-size: 12px;\n div {\n display: block;\n }\n span {\n display: inline-block;\n width: 130px;\n font-weight: 600;\n }\n"])));
|
|
12810
12852
|
var MainArea = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
|
|
12811
12853
|
var $layout = _ref.$layout,
|
|
12812
12854
|
$minDimension = _ref.$minDimension;
|
|
12813
|
-
return $layout === 'vertical' ? css(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$
|
|
12855
|
+
return $layout === 'vertical' ? css(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
|
|
12814
12856
|
});
|
|
12815
|
-
var SideAreaInner = styled.div(_templateObject5$
|
|
12816
|
-
var SideArea = styled.div(_templateObject6$
|
|
12857
|
+
var SideAreaInner = styled.div(_templateObject5$_ || (_templateObject5$_ = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n height: 100%;\n transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
|
|
12858
|
+
var SideArea = styled.div(_templateObject6$K || (_templateObject6$K = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 0 0 ", "px;\n display: ", ";\n transition:\n min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n\n ", "\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref2) {
|
|
12817
12859
|
var $defaultSize = _ref2.$defaultSize;
|
|
12818
12860
|
return $defaultSize;
|
|
12819
12861
|
}, function (_ref3) {
|
|
@@ -12823,25 +12865,25 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
|
|
|
12823
12865
|
var $layout = _ref4.$layout,
|
|
12824
12866
|
$maxDimension = _ref4.$maxDimension,
|
|
12825
12867
|
$minDimension = _ref4.$minDimension;
|
|
12826
|
-
return $layout === 'vertical' ? css(_templateObject7$
|
|
12868
|
+
return $layout === 'vertical' ? css(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-height: ", "px;\n }\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : '0', $maxDimension ? "max-height: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension) : css(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n ", ";\n ", ";\n ", "{\n min-width: ", "px;\n }\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : '0', $maxDimension ? "max-width: " + $maxDimension + "px;" : 'none', SideAreaInner, $minDimension);
|
|
12827
12869
|
}, function (_ref5) {
|
|
12828
12870
|
var $layout = _ref5.$layout,
|
|
12829
12871
|
$collapseState = _ref5.$collapseState,
|
|
12830
12872
|
$minDimension = _ref5.$minDimension;
|
|
12831
|
-
return $collapseState === 'collapsing' ? css(_templateObject9$
|
|
12873
|
+
return $collapseState === 'collapsing' ? css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
|
|
12832
12874
|
}, function (_ref6) {
|
|
12833
12875
|
var $collapseState = _ref6.$collapseState;
|
|
12834
|
-
return $collapseState === 'collapsed' ? css(_templateObject10$
|
|
12876
|
+
return $collapseState === 'collapsed' ? css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
|
|
12835
12877
|
}, function (_ref7) {
|
|
12836
12878
|
var $layout = _ref7.$layout,
|
|
12837
12879
|
$collapseState = _ref7.$collapseState,
|
|
12838
12880
|
$minDimension = _ref7.$minDimension;
|
|
12839
|
-
return $collapseState === 'peeking' ? css(_templateObject11$
|
|
12881
|
+
return $collapseState === 'peeking' ? css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
12840
12882
|
}, function (_ref8) {
|
|
12841
12883
|
var $layout = _ref8.$layout,
|
|
12842
12884
|
$collapseState = _ref8.$collapseState,
|
|
12843
12885
|
$minDimension = _ref8.$minDimension;
|
|
12844
|
-
return $collapseState === 'opening' ? css(_templateObject12$
|
|
12886
|
+
return $collapseState === 'opening' ? css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", "{\n min-width: ", "px;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
|
|
12845
12887
|
});
|
|
12846
12888
|
var DragContainer = styled.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n flex: 0 0 ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: col-resize;\n\n > div {\n transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n }\n\n &:hover > div {\n opacity: 1;\n }\n\n ", "\n\n"])), function (_ref9) {
|
|
12847
12889
|
var $size = _ref9.$size;
|
|
@@ -13149,43 +13191,43 @@ var clampInt = function clampInt(value, lower, upper) {
|
|
|
13149
13191
|
return clampedInt;
|
|
13150
13192
|
};
|
|
13151
13193
|
|
|
13152
|
-
var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$
|
|
13194
|
+
var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$I;
|
|
13153
13195
|
var MOBILE_CLOSE_HEIGHT = 50;
|
|
13154
13196
|
var MOBILE_NAVBAR_HEIGHT = 68;
|
|
13155
13197
|
var Layout = styled.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
13156
13198
|
var MobileLayout = styled.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose([""])));
|
|
13157
13199
|
var Content$1 = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
|
|
13158
13200
|
var maxWidth = _ref.maxWidth;
|
|
13159
|
-
return maxWidth && css(_templateObject4$
|
|
13201
|
+
return maxWidth && css(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
|
|
13160
13202
|
});
|
|
13161
|
-
var MainContainer = styled.div(_templateObject5
|
|
13162
|
-
var ContentArea = styled.div(_templateObject6$
|
|
13203
|
+
var MainContainer = styled.div(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
|
|
13204
|
+
var ContentArea = styled.div(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n flex: 1;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n\n ", "\n"])), function (_ref2) {
|
|
13163
13205
|
var legacyLayout = _ref2.legacyLayout,
|
|
13164
13206
|
paddingOverride = _ref2.paddingOverride,
|
|
13165
13207
|
maxWidth = _ref2.maxWidth;
|
|
13166
|
-
return legacyLayout && css(_templateObject7$
|
|
13208
|
+
return legacyLayout && css(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
|
|
13167
13209
|
});
|
|
13168
13210
|
|
|
13169
|
-
var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$
|
|
13211
|
+
var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$l, _templateObject11$e, _templateObject12$c, _templateObject13$a, _templateObject14$9, _templateObject15$7;
|
|
13170
13212
|
var ContextTitle = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n opacity: 0;\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref) {
|
|
13171
13213
|
var compact = _ref.compact;
|
|
13172
13214
|
return compact && css(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
|
|
13173
13215
|
});
|
|
13174
13216
|
var ContextIcon$1 = styled.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n background-color: var(--global-menu-icon-background-default);\n transition: background-color var(--speed-fast) var(--easing-primary-out);\n \n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])));
|
|
13175
|
-
var ContextIndicator = styled.div(_templateObject4$
|
|
13176
|
-
var ContextActionBaseCSS$1 = css(_templateObject5
|
|
13177
|
-
var StyledAnchor = styled.a(_templateObject6$
|
|
13178
|
-
var ExternalIconWrapper = styled.div(_templateObject7$
|
|
13179
|
-
var ContextWrapper = styled.div(_templateObject8$
|
|
13217
|
+
var ContextIndicator = styled.div(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose(["\n width: 12px;\n height: 12px;\n flex: 0 0 14px;\n margin: 0 20px 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n \n opacity: 0;\n transition: opacity 0 var(--easing-primary-out);\n\n svg {\n display: block;\n height: 12px;\n width: 12px;\n }\n"])));
|
|
13218
|
+
var ContextActionBaseCSS$1 = css(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n font-family: var(--font-ui);\n font-weight: 500;\n font-size: 16px;\n color: var(--grey-11);\n\n &:hover{\n color: var(--grey-12);\n }\n"])));
|
|
13219
|
+
var StyledAnchor = styled.a(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
|
|
13220
|
+
var ExternalIconWrapper = styled.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
13221
|
+
var ContextWrapper = styled.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref2) {
|
|
13180
13222
|
var $menuOpen = _ref2.$menuOpen;
|
|
13181
|
-
return $menuOpen && css(_templateObject9$
|
|
13223
|
+
return $menuOpen && css(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
|
|
13182
13224
|
}, ContextIcon$1, IconWrapper);
|
|
13183
|
-
var ContextActionA = styled(Link)(_templateObject10$
|
|
13225
|
+
var ContextActionA = styled(Link)(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
|
|
13184
13226
|
var $menuOpen = _ref3.$menuOpen;
|
|
13185
|
-
return $menuOpen && css(_templateObject11$
|
|
13227
|
+
return $menuOpen && css(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
|
|
13186
13228
|
}, ContextIcon$1, IconWrapper, function (_ref4) {
|
|
13187
13229
|
var $isActive = _ref4.$isActive;
|
|
13188
|
-
return $isActive && css(_templateObject12$
|
|
13230
|
+
return $isActive && css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n color: var(--grey-12);\n\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
|
|
13189
13231
|
});
|
|
13190
13232
|
var ContextActionButton$1 = styled.button(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
|
|
13191
13233
|
var menuOpen = _ref5.menuOpen;
|
|
@@ -13365,20 +13407,20 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
13365
13407
|
};
|
|
13366
13408
|
};
|
|
13367
13409
|
|
|
13368
|
-
var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$
|
|
13410
|
+
var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$m, _templateObject11$f, _templateObject12$d, _templateObject13$b;
|
|
13369
13411
|
var Submenu = styled.ul(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
13370
13412
|
var SubmenuHeader = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
13371
13413
|
var SubmenuContainerInner = styled.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
13372
|
-
var SubmenuItemTitle = styled.span(_templateObject4$
|
|
13373
|
-
var SubmenuItemLink = styled(Link)(_templateObject5$
|
|
13374
|
-
var ExternalIconWrapper$1 = styled.div(_templateObject6$
|
|
13375
|
-
var SubmenuItemAnchor = styled.a(_templateObject7$
|
|
13376
|
-
var SubmenuItem = styled.li(_templateObject8$
|
|
13414
|
+
var SubmenuItemTitle = styled.span(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose(["\n display: block;\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n"])));
|
|
13415
|
+
var SubmenuItemLink = styled(Link)(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
|
|
13416
|
+
var ExternalIconWrapper$1 = styled.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
|
|
13417
|
+
var SubmenuItemAnchor = styled.a(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
|
|
13418
|
+
var SubmenuItem = styled.li(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
|
|
13377
13419
|
var isActive = _ref.isActive;
|
|
13378
|
-
return css(_templateObject9$
|
|
13420
|
+
return css(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
13379
13421
|
});
|
|
13380
|
-
var SubmenuContainer = styled.div(_templateObject11$
|
|
13381
|
-
var ContextContainer = styled.div(_templateObject12$
|
|
13422
|
+
var SubmenuContainer = styled.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
13423
|
+
var ContextContainer = styled.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
|
|
13382
13424
|
var mobileMenu = _ref2.mobileMenu;
|
|
13383
13425
|
return mobileMenu ? '30px' : '70px';
|
|
13384
13426
|
}, SubmenuContainer, function (_ref3) {
|
|
@@ -13474,23 +13516,23 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
13474
13516
|
return output;
|
|
13475
13517
|
};
|
|
13476
13518
|
|
|
13477
|
-
var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$
|
|
13519
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$n, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$a;
|
|
13478
13520
|
var Logo = styled(Link)(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
|
|
13479
13521
|
var LogoMark = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
|
|
13480
13522
|
var LogoType = styled.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
|
|
13481
|
-
var SVGObject = styled.object(_templateObject4$
|
|
13482
|
-
var SVGObjectText = styled.object(_templateObject5$
|
|
13483
|
-
var NavigationContainer = styled.div(_templateObject6$
|
|
13484
|
-
var MenuFooter = styled.div(_templateObject7$
|
|
13485
|
-
var FooterItemContainer = styled.div(_templateObject8$
|
|
13486
|
-
var PushContainer = styled.div(_templateObject9$
|
|
13523
|
+
var SVGObject = styled.object(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose([""])));
|
|
13524
|
+
var SVGObjectText = styled.object(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
|
|
13525
|
+
var NavigationContainer = styled.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose([""])));
|
|
13526
|
+
var MenuFooter = styled.div(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
|
|
13527
|
+
var FooterItemContainer = styled.div(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
|
|
13528
|
+
var PushContainer = styled.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
|
|
13487
13529
|
var isPinned = _ref.isPinned;
|
|
13488
|
-
return css(_templateObject10$
|
|
13530
|
+
return css(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
|
|
13489
13531
|
});
|
|
13490
|
-
var Container$10 = styled.div(_templateObject11$
|
|
13532
|
+
var Container$10 = styled.div(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref2) {
|
|
13491
13533
|
var open = _ref2.open,
|
|
13492
13534
|
desktopSize = _ref2.desktopSize;
|
|
13493
|
-
return css(_templateObject12$
|
|
13535
|
+
return css(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
13494
13536
|
});
|
|
13495
13537
|
var ContainerInner = styled.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
13496
13538
|
var MainMenu = function MainMenu(_ref3) {
|
|
@@ -13592,17 +13634,17 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13592
13634
|
})) : null))), document.body));
|
|
13593
13635
|
};
|
|
13594
13636
|
|
|
13595
|
-
var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObject4$
|
|
13637
|
+
var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObject4$19, _templateObject5$13, _templateObject6$P, _templateObject7$M, _templateObject8$D, _templateObject9$u, _templateObject10$o;
|
|
13596
13638
|
var MetaConatiner = styled.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n margin: 10px 10px;\n border: 1px solid var(--grey-3);\n background-color: var(--grey-a2);\n border-radius: 5px;\n &:active {\n box-shadow: 4px 4px var(--grey-a2);\n }\n"])));
|
|
13597
13639
|
var LabelTitle = styled.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: var(--font-ui);\n margin-top: 2px;\n"])));
|
|
13598
13640
|
var LabelContent = styled.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n font-size: 10px;\n padding-left: 10px;\n max-width: 200px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 4px 0 5px 0;\n white-space: nowrap;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n"])));
|
|
13599
|
-
var LabelNotes = styled.div(_templateObject4$
|
|
13600
|
-
var TitleContainer = styled.div(_templateObject5$
|
|
13601
|
-
var Container$11 = styled.div(_templateObject6$
|
|
13602
|
-
var TitleBox = styled.div(_templateObject7$
|
|
13603
|
-
var IconBox = styled.div(_templateObject8$
|
|
13604
|
-
var CopyTextBox = styled.pre(_templateObject9$
|
|
13605
|
-
var CopyBox = styled.div(_templateObject10$
|
|
13641
|
+
var LabelNotes = styled.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n font-family: var(--font-data);\n"])));
|
|
13642
|
+
var TitleContainer = styled.div(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap:6px;\n flex-direction: row;\n align-items: center;\n margin-left: 10px;\n margin: 3px 0 5px 10px;\n"])));
|
|
13643
|
+
var Container$11 = styled.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
|
|
13644
|
+
var TitleBox = styled.div(_templateObject7$M || (_templateObject7$M = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
13645
|
+
var IconBox = styled.div(_templateObject8$D || (_templateObject8$D = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$11);
|
|
13646
|
+
var CopyTextBox = styled.pre(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: var(--font-data);\n right:10px;\n margin-top: -23px;\n"])));
|
|
13647
|
+
var CopyBox = styled.div(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose(["\n"])));
|
|
13606
13648
|
var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
13607
13649
|
var item = _ref.item,
|
|
13608
13650
|
onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
|
|
@@ -13665,11 +13707,11 @@ var UserDrawerMeta = function UserDrawerMeta(_ref) {
|
|
|
13665
13707
|
}, notes) : null)));
|
|
13666
13708
|
};
|
|
13667
13709
|
|
|
13668
|
-
var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$
|
|
13710
|
+
var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$1a;
|
|
13669
13711
|
var Container$12 = styled.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid var(--dividing-line);\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])));
|
|
13670
13712
|
var ColumnContainer = styled.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
|
|
13671
13713
|
var Title$8 = styled.div(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
|
|
13672
|
-
var SubTitle$1 = styled.div(_templateObject4$
|
|
13714
|
+
var SubTitle$1 = styled.div(_templateObject4$1a || (_templateObject4$1a = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: 10px;\n line-height: 12px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n padding-top: 2px;\n opacity: 0.5;\n"])));
|
|
13673
13715
|
var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
13674
13716
|
var _ref$icon = _ref.icon,
|
|
13675
13717
|
icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
|
|
@@ -13686,21 +13728,21 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13686
13728
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13687
13729
|
};
|
|
13688
13730
|
|
|
13689
|
-
var _templateObject$1G, _templateObject2$1r, _templateObject3$1i, _templateObject4$
|
|
13731
|
+
var _templateObject$1G, _templateObject2$1r, _templateObject3$1i, _templateObject4$1b, _templateObject5$14, _templateObject6$Q, _templateObject7$N, _templateObject8$E, _templateObject9$v, _templateObject10$p, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$b;
|
|
13690
13732
|
var DrawerTop = styled.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose([""])));
|
|
13691
13733
|
var DrawerBottom = styled.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
|
|
13692
13734
|
var DrawerHeader = styled.h2(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n padding: 0;\n margin: 0 0 5px;\n"])));
|
|
13693
|
-
var CurrentUser = styled.div(_templateObject4$
|
|
13694
|
-
var UserOptions = styled.div(_templateObject5$
|
|
13695
|
-
var Logout = styled.div(_templateObject6$
|
|
13696
|
-
var LinkMenu = styled.ul(_templateObject7$
|
|
13697
|
-
var LinkMenuItem = styled.li(_templateObject8$
|
|
13698
|
-
var IconWrapperFooter = styled.div(_templateObject9$
|
|
13699
|
-
var LinkMenuItemA = styled(Link)(_templateObject10$
|
|
13735
|
+
var CurrentUser = styled.div(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n border-bottom: var(--dividing-line) 1px solid;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
|
|
13736
|
+
var UserOptions = styled.div(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
|
|
13737
|
+
var Logout = styled.div(_templateObject6$Q || (_templateObject6$Q = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
|
|
13738
|
+
var LinkMenu = styled.ul(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
|
|
13739
|
+
var LinkMenuItem = styled.li(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
|
|
13740
|
+
var IconWrapperFooter = styled.div(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n padding-right: 20px;\n"])));
|
|
13741
|
+
var LinkMenuItemA = styled(Link)(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 400;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
|
|
13700
13742
|
var isActive = _ref.isActive;
|
|
13701
|
-
return isActive && css(_templateObject11$
|
|
13743
|
+
return isActive && css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
|
|
13702
13744
|
});
|
|
13703
|
-
var FooterMeta = styled.div(_templateObject12$
|
|
13745
|
+
var FooterMeta = styled.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
|
|
13704
13746
|
var icon = _ref2.icon;
|
|
13705
13747
|
return icon !== '' ? '31px;' : '21px;';
|
|
13706
13748
|
});
|
|
@@ -13839,19 +13881,19 @@ var UserMenu = function UserMenu(_ref4) {
|
|
|
13839
13881
|
}, title)) : null));
|
|
13840
13882
|
};
|
|
13841
13883
|
|
|
13842
|
-
var _templateObject$1H, _templateObject2$1s, _templateObject3$1j, _templateObject4$
|
|
13884
|
+
var _templateObject$1H, _templateObject2$1s, _templateObject3$1j, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$O, _templateObject8$F;
|
|
13843
13885
|
var Container$13 = styled.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
|
|
13844
13886
|
var ImgWrapper = styled.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
|
|
13845
13887
|
var EmptyImg = styled.div(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
|
|
13846
|
-
var Image$2 = styled.div(_templateObject4$
|
|
13888
|
+
var Image$2 = styled.div(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-image: url(", ");\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n display: ", ";\n"])), function (p) {
|
|
13847
13889
|
return p.image;
|
|
13848
13890
|
}, function (p) {
|
|
13849
13891
|
return p.image ? 'block' : 'none';
|
|
13850
13892
|
});
|
|
13851
|
-
var InfoContainer = styled.div(_templateObject5$
|
|
13852
|
-
var Title$9 = styled.div(_templateObject6$
|
|
13853
|
-
var Message = styled.div(_templateObject7$
|
|
13854
|
-
var TimeMsg = styled.div(_templateObject8$
|
|
13893
|
+
var InfoContainer = styled.div(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
13894
|
+
var Title$9 = styled.div(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n font-weight: 500;\n color: var(--grey-11);\n"])));
|
|
13895
|
+
var Message = styled.div(_templateObject7$O || (_templateObject7$O = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n color: var(--grey-11);\n margin: 4px 0;\n height: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n vertical-align: middle;\n"])));
|
|
13896
|
+
var TimeMsg = styled.div(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n font-weight: 500;\n color: var(--grey-12);\n margin-top: 15px;\n"])));
|
|
13855
13897
|
var NotificationItem = function NotificationItem(_ref) {
|
|
13856
13898
|
var imgUrl = _ref.imgUrl,
|
|
13857
13899
|
title = _ref.title,
|
|
@@ -13888,32 +13930,35 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13888
13930
|
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')));
|
|
13889
13931
|
};
|
|
13890
13932
|
|
|
13891
|
-
var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$
|
|
13933
|
+
var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$P, _templateObject8$G, _templateObject9$w, _templateObject10$q, _templateObject11$i, _templateObject12$g, _templateObject13$e, _templateObject14$c, _templateObject15$8;
|
|
13892
13934
|
var CoreStyle = css(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 32px;\n padding: 8px;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n border-radius: 3px;\n\n font-family: Lato;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 85.714% */\n white-space: nowrap;\n\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
|
|
13893
13935
|
var ContainerStatic = styled.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13894
13936
|
var themeColor = _ref.themeColor;
|
|
13895
|
-
return themeColor ? css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject4$
|
|
13937
|
+
return themeColor ? css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13896
13938
|
});
|
|
13897
|
-
var DefaultText = styled.span(_templateObject5$
|
|
13898
|
-
var LinkText = styled.span(_templateObject6$
|
|
13899
|
-
var
|
|
13939
|
+
var DefaultText = styled.span(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
13940
|
+
var LinkText = styled.span(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose([""])));
|
|
13941
|
+
var InteractiveStyle = css(_templateObject7$P || (_templateObject7$P = _taggedTemplateLiteralLoose(["\n ", ";\n text-decoration: none;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"])), CoreStyle, function (_ref2) {
|
|
13900
13942
|
var themeColor = _ref2.themeColor;
|
|
13901
|
-
return themeColor ? css(_templateObject8$
|
|
13943
|
+
return themeColor ? css(_templateObject8$G || (_templateObject8$G = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13902
13944
|
}, function (_ref3) {
|
|
13903
13945
|
var themeColor = _ref3.themeColor;
|
|
13904
|
-
return themeColor ? css(_templateObject10$
|
|
13946
|
+
return themeColor ? css(_templateObject10$q || (_templateObject10$q = _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 "])));
|
|
13905
13947
|
});
|
|
13906
|
-
var
|
|
13948
|
+
var ContainerLinked = styled.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n a {\n ", ";\n }\n"])), InteractiveStyle);
|
|
13949
|
+
var ContainerButton = styled.div(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n button {\n ", ";\n ", ";\n }\n"])), resetButtonStyles, InteractiveStyle);
|
|
13950
|
+
var Container$15 = styled.div(_templateObject14$c || (_templateObject14$c = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13907
13951
|
var ready = _ref4.ready,
|
|
13908
13952
|
minWidth = _ref4.minWidth;
|
|
13909
|
-
return css(
|
|
13953
|
+
return css(_templateObject15$8 || (_templateObject15$8 = _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;");
|
|
13910
13954
|
});
|
|
13911
13955
|
var TopBarBadge = function TopBarBadge(_ref5) {
|
|
13912
13956
|
var text = _ref5.text,
|
|
13913
13957
|
color = _ref5.color,
|
|
13914
13958
|
linkHref = _ref5.linkHref,
|
|
13915
13959
|
linkTo = _ref5.linkTo,
|
|
13916
|
-
linkText = _ref5.linkText
|
|
13960
|
+
linkText = _ref5.linkText,
|
|
13961
|
+
onClick = _ref5.onClick;
|
|
13917
13962
|
var defaultTextRef = useRef();
|
|
13918
13963
|
var linkTextRef = useRef();
|
|
13919
13964
|
var _useState = useState(false),
|
|
@@ -13936,30 +13981,45 @@ var TopBarBadge = function TopBarBadge(_ref5) {
|
|
|
13936
13981
|
setReady(true);
|
|
13937
13982
|
}, 100);
|
|
13938
13983
|
}, [defaultTextRef, linkTextRef, text, linkText, setMinWidth, setReady]);
|
|
13939
|
-
var defaultTextElement =
|
|
13940
|
-
|
|
13941
|
-
|
|
13942
|
-
|
|
13943
|
-
|
|
13944
|
-
|
|
13945
|
-
|
|
13946
|
-
|
|
13947
|
-
|
|
13948
|
-
|
|
13949
|
-
|
|
13950
|
-
|
|
13951
|
-
|
|
13952
|
-
|
|
13953
|
-
|
|
13954
|
-
|
|
13955
|
-
|
|
13956
|
-
|
|
13957
|
-
|
|
13958
|
-
|
|
13959
|
-
|
|
13960
|
-
|
|
13961
|
-
|
|
13962
|
-
|
|
13984
|
+
var defaultTextElement = useMemo(function () {
|
|
13985
|
+
return React__default.createElement(DefaultText, {
|
|
13986
|
+
ref: defaultTextRef
|
|
13987
|
+
}, text);
|
|
13988
|
+
}, [text]);
|
|
13989
|
+
var linkTextElement = useMemo(function () {
|
|
13990
|
+
return onClick || linkTo || linkHref ? React__default.createElement(LinkText, {
|
|
13991
|
+
ref: linkTextRef
|
|
13992
|
+
}, linkText || text) : null;
|
|
13993
|
+
}, [onClick, linkTo, linkHref, linkText, text]);
|
|
13994
|
+
var renderContent = useMemo(function () {
|
|
13995
|
+
return !ready ? React__default.createElement(Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(Fragment, null, !hover ? defaultTextElement : linkTextElement);
|
|
13996
|
+
}, [ready, hover, defaultTextElement, linkTextElement]);
|
|
13997
|
+
var badgeComponent = useMemo(function () {
|
|
13998
|
+
if (onClick) {
|
|
13999
|
+
return React__default.createElement(ContainerButton, {
|
|
14000
|
+
themeColor: color
|
|
14001
|
+
}, React__default.createElement("button", {
|
|
14002
|
+
onClick: onClick,
|
|
14003
|
+
type: "button"
|
|
14004
|
+
}, renderContent));
|
|
14005
|
+
} else if (linkTo) {
|
|
14006
|
+
return React__default.createElement(ContainerLinked, {
|
|
14007
|
+
themeColor: color
|
|
14008
|
+
}, React__default.createElement(Link, {
|
|
14009
|
+
to: linkTo
|
|
14010
|
+
}, renderContent));
|
|
14011
|
+
} else if (linkHref) {
|
|
14012
|
+
return React__default.createElement(ContainerLinked, {
|
|
14013
|
+
themeColor: color
|
|
14014
|
+
}, React__default.createElement("a", {
|
|
14015
|
+
href: linkHref
|
|
14016
|
+
}, renderContent));
|
|
14017
|
+
} else {
|
|
14018
|
+
return React__default.createElement(ContainerStatic, {
|
|
14019
|
+
themeColor: color
|
|
14020
|
+
}, defaultTextElement);
|
|
14021
|
+
}
|
|
14022
|
+
}, [onClick, linkTo, linkHref, color, renderContent, defaultTextElement]);
|
|
13963
14023
|
return React__default.createElement(Container$15, Object.assign({}, {
|
|
13964
14024
|
ready: ready,
|
|
13965
14025
|
minWidth: minWidth
|
|
@@ -13973,27 +14033,27 @@ var TopBarBadge = function TopBarBadge(_ref5) {
|
|
|
13973
14033
|
}), badgeComponent);
|
|
13974
14034
|
};
|
|
13975
14035
|
|
|
13976
|
-
var _templateObject$1K, _templateObject2$1v, _templateObject3$1m, _templateObject4$
|
|
14036
|
+
var _templateObject$1K, _templateObject2$1v, _templateObject3$1m, _templateObject4$1e, _templateObject5$17, _templateObject6$T, _templateObject7$Q, _templateObject8$H, _templateObject9$x, _templateObject10$r, _templateObject11$j, _templateObject12$h, _templateObject13$f;
|
|
13977
14037
|
var Container$16 = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
|
|
13978
14038
|
var RightArea$1 = styled.div(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13979
14039
|
var SearchBar = styled.div(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
13980
|
-
var IconWrapper$4 = styled.div(_templateObject4$
|
|
13981
|
-
var SearchInput = styled.input(_templateObject5$
|
|
13982
|
-
var ButtonArea = styled.div(_templateObject6$
|
|
13983
|
-
var buttonClickAnimation = keyframes(_templateObject7$
|
|
14040
|
+
var IconWrapper$4 = styled.div(_templateObject4$1e || (_templateObject4$1e = _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"])));
|
|
14041
|
+
var SearchInput = styled.input(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-data);\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent;\n color: var(--grey-10);\n font-size: 14px;\n\n &::placeholder {\n font-family: var(--font-data);\n font-weight: 400;\n font-style: italic;\n font-size: 14px;\n color: var(--grey-8);\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), removeAutoFillStyle);
|
|
14042
|
+
var ButtonArea = styled.div(_templateObject6$T || (_templateObject6$T = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
|
|
14043
|
+
var buttonClickAnimation = keyframes(_templateObject7$Q || (_templateObject7$Q = _taggedTemplateLiteralLoose(["\n 0% {\n opacity:0.9;\n transform: scale(0.85);\n }\n 100% {\n opacity:1;\n transform: scale(1);\n }\n"])));
|
|
13984
14044
|
var DrawerToggle = styled.button.attrs({
|
|
13985
14045
|
type: 'button'
|
|
13986
|
-
})(_templateObject8$
|
|
14046
|
+
})(_templateObject8$H || (_templateObject8$H = _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) {
|
|
13987
14047
|
var isActive = _ref.isActive;
|
|
13988
|
-
return isActive && css(_templateObject9$
|
|
14048
|
+
return isActive && css(_templateObject9$x || (_templateObject9$x = _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);
|
|
13989
14049
|
});
|
|
13990
|
-
var DrawerPortalWrapper = styled.div(_templateObject10$
|
|
13991
|
-
var Drawer = styled.div(_templateObject11$
|
|
14050
|
+
var DrawerPortalWrapper = styled.div(_templateObject10$r || (_templateObject10$r = _taggedTemplateLiteralLoose([""])));
|
|
14051
|
+
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) {
|
|
13992
14052
|
var baseWidth = _ref2.baseWidth;
|
|
13993
14053
|
return baseWidth ? baseWidth : "200px";
|
|
13994
14054
|
}, function (_ref3) {
|
|
13995
14055
|
var isOpen = _ref3.isOpen;
|
|
13996
|
-
return isOpen && css(_templateObject12$
|
|
14056
|
+
return isOpen && css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13997
14057
|
});
|
|
13998
14058
|
var NotificationsContainer = styled.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13999
14059
|
var TopBar = function TopBar(_ref4) {
|
|
@@ -14190,7 +14250,7 @@ var TabContent = function TabContent(_ref) {
|
|
|
14190
14250
|
};
|
|
14191
14251
|
|
|
14192
14252
|
var _excluded$K = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
14193
|
-
var _templateObject$1O, _templateObject2$1x, _templateObject3$1o, _templateObject4$
|
|
14253
|
+
var _templateObject$1O, _templateObject2$1x, _templateObject3$1o, _templateObject4$1f;
|
|
14194
14254
|
var Container$18 = styled.button(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
14195
14255
|
var LinkTab = styled.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
|
|
14196
14256
|
var theme = _ref.theme;
|
|
@@ -14198,7 +14258,7 @@ var LinkTab = styled.div(_templateObject2$1x || (_templateObject2$1x = _taggedTe
|
|
|
14198
14258
|
}, function (_ref2) {
|
|
14199
14259
|
var isActive = _ref2.isActive,
|
|
14200
14260
|
theme = _ref2.theme;
|
|
14201
|
-
return isActive && css(_templateObject4$
|
|
14261
|
+
return isActive && css(_templateObject4$1f || (_templateObject4$1f = _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);
|
|
14202
14262
|
});
|
|
14203
14263
|
var MobileTab = function MobileTab(_ref3) {
|
|
14204
14264
|
var tabFor = _ref3.tabFor,
|
|
@@ -14228,23 +14288,23 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
14228
14288
|
};
|
|
14229
14289
|
|
|
14230
14290
|
var _excluded$L = ["icon", "title", "subtitle", "tabFor"];
|
|
14231
|
-
var _templateObject$1P, _templateObject2$1y, _templateObject3$1p, _templateObject4$
|
|
14291
|
+
var _templateObject$1P, _templateObject2$1y, _templateObject3$1p, _templateObject4$1g, _templateObject5$18, _templateObject6$U;
|
|
14232
14292
|
var Container$19 = styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
14233
14293
|
var active = _ref.active;
|
|
14234
14294
|
return active ? css(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
14235
14295
|
}, IconWrapper);
|
|
14236
|
-
var Title$a = styled.div(_templateObject4$
|
|
14296
|
+
var Title$a = styled.div(_templateObject4$1g || (_templateObject4$1g = _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) {
|
|
14237
14297
|
var theme = _ref2.theme;
|
|
14238
14298
|
return theme.fontFamily.ui;
|
|
14239
14299
|
}, function (_ref3) {
|
|
14240
14300
|
var active = _ref3.active;
|
|
14241
14301
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
14242
14302
|
});
|
|
14243
|
-
var SubTitle$2 = styled.div(_templateObject5$
|
|
14303
|
+
var SubTitle$2 = styled.div(_templateObject5$18 || (_templateObject5$18 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-family: ", ";\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n color: var(--grey-a10);\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref4) {
|
|
14244
14304
|
var theme = _ref4.theme;
|
|
14245
14305
|
return theme.fontFamily.data;
|
|
14246
14306
|
});
|
|
14247
|
-
var TextGroup$1 = styled.div(_templateObject6$
|
|
14307
|
+
var TextGroup$1 = styled.div(_templateObject6$U || (_templateObject6$U = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
|
|
14248
14308
|
var TabWithIcon = function TabWithIcon(_ref5) {
|
|
14249
14309
|
var icon = _ref5.icon,
|
|
14250
14310
|
title = _ref5.title,
|
|
@@ -14314,7 +14374,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
14314
14374
|
|
|
14315
14375
|
var _excluded$M = ["closeId", "closeText"];
|
|
14316
14376
|
var _templateObject$1R, _templateObject2$1A, _templateObject3$1q;
|
|
14317
|
-
var StyledButton$
|
|
14377
|
+
var StyledButton$8 = styled.button(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n ", "\n \n font-family: var(--font-ui);\n background-color: var(--global-element-background);\n border-top: 1px solid var(--dividing-line);\n font-weight: 400;\n color: var(--grey-10);\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
|
|
14318
14378
|
var IconContainer$4 = styled.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
|
|
14319
14379
|
var TextWrapper$1 = styled.div(_templateObject3$1q || (_templateObject3$1q = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
14320
14380
|
var CloseButton$1 = function CloseButton(_ref) {
|
|
@@ -14324,7 +14384,7 @@ var CloseButton$1 = function CloseButton(_ref) {
|
|
|
14324
14384
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
|
|
14325
14385
|
var _useContext = useContext(TabContext),
|
|
14326
14386
|
setSelected = _useContext.setSelected;
|
|
14327
|
-
return React__default.createElement(StyledButton$
|
|
14387
|
+
return React__default.createElement(StyledButton$8, Object.assign({
|
|
14328
14388
|
onClick: function onClick() {
|
|
14329
14389
|
return setSelected(closeId);
|
|
14330
14390
|
}
|
|
@@ -14594,16 +14654,16 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14594
14654
|
};
|
|
14595
14655
|
|
|
14596
14656
|
var _excluded$Q = ["children"];
|
|
14597
|
-
var _templateObject$1X, _templateObject2$1F, _templateObject3$1s, _templateObject4$
|
|
14657
|
+
var _templateObject$1X, _templateObject2$1F, _templateObject3$1s, _templateObject4$1h, _templateObject5$19, _templateObject6$V, _templateObject7$R, _templateObject8$I, _templateObject9$y;
|
|
14598
14658
|
var Container$1f = styled.div(_templateObject$1X || (_templateObject$1X = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
|
|
14599
14659
|
var LogoContainer = styled.div(_templateObject2$1F || (_templateObject2$1F = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
|
|
14600
14660
|
var LogoTopText = styled.div(_templateObject3$1s || (_templateObject3$1s = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
|
|
14601
|
-
var LogoBottomText = styled.div(_templateObject4$
|
|
14602
|
-
var SidebarBox = styled.div(_templateObject5$
|
|
14603
|
-
var SidebarHeading = styled.div(_templateObject6$
|
|
14604
|
-
var SidebarLinkHeading = styled.div(_templateObject7$
|
|
14605
|
-
var BackLink$1 = styled(Link)(_templateObject8$
|
|
14606
|
-
var SLink = styled(Link)(_templateObject9$
|
|
14661
|
+
var LogoBottomText = styled.div(_templateObject4$1h || (_templateObject4$1h = _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"])));
|
|
14662
|
+
var SidebarBox = styled.div(_templateObject5$19 || (_templateObject5$19 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
14663
|
+
var SidebarHeading = styled.div(_templateObject6$V || (_templateObject6$V = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
|
|
14664
|
+
var SidebarLinkHeading = styled.div(_templateObject7$R || (_templateObject7$R = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14665
|
+
var BackLink$1 = styled(Link)(_templateObject8$I || (_templateObject8$I = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14666
|
+
var SLink = styled(Link)(_templateObject9$y || (_templateObject9$y = _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"])));
|
|
14607
14667
|
var SidebarLink = function SidebarLink(_ref) {
|
|
14608
14668
|
var title = _ref.title,
|
|
14609
14669
|
to = _ref.to;
|