@mw-kit/mw-ui 1.1.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Input/components/Select/interfaces.d.ts +6 -8
- package/dist/components/Loader/interfaces.d.ts +1 -0
- package/dist/components/Menu/interfaces.d.ts +1 -0
- package/dist/components/ScrollContainer/interfaces.d.ts +1 -0
- package/dist/components/Zoom/index.d.ts +4 -0
- package/dist/components/Zoom/interfaces.d.ts +9 -0
- package/dist/components/Zoom/styles.d.ts +7 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.js +290 -183
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +290 -184
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -227,21 +227,23 @@ var getSpacings = function getSpacings(value, defaults) {
|
|
|
227
227
|
return values.top + " " + values.right + " " + values.bottom + " " + values.left;
|
|
228
228
|
};
|
|
229
229
|
|
|
230
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
230
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
231
231
|
var loader = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n"])));
|
|
232
232
|
var Loader = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
233
233
|
var size = _ref.size,
|
|
234
234
|
borderSize = _ref.borderSize,
|
|
235
235
|
bgColor = _ref.bgColor,
|
|
236
236
|
color = _ref.color,
|
|
237
|
-
theme = _ref.theme
|
|
237
|
+
theme = _ref.theme,
|
|
238
|
+
filled = _ref.filled;
|
|
238
239
|
size = size || theme.spacings.s4;
|
|
239
240
|
borderSize = borderSize || "calc(" + size + " * 0.0757)";
|
|
240
241
|
color = color || 'blue';
|
|
241
242
|
bgColor = bgColor || color;
|
|
242
243
|
var beforeColor = isKeyOf(theme.colors, bgColor) ? theme.getColor(bgColor, 25) : color;
|
|
243
244
|
var afterColor = isKeyOf(theme.colors, color) ? theme.getColor(color) : color;
|
|
244
|
-
|
|
245
|
+
var fill = !filled ? styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""]))) : styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n background-color: ", ";\n width: 100%;\n height: 100%;\n "])), theme.colors.white);
|
|
246
|
+
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n ", "\n\n pointer-events: none;\n\n ::before,\n ::after {\n position: absolute;\n content: '';\n\n top: calc(50% - ", " / 2);\n left: calc(50% - ", " / 2);\n width: ", ";\n height: ", ";\n border-radius: 50%;\n border-width: ", ";\n border-style: solid;\n }\n\n ::before {\n border-color: ", ";\n }\n\n ::after {\n animation: ", " 0.6s linear;\n animation-iteration-count: infinite;\n border-color: ", " transparent transparent;\n }\n "])), fill, size, size, size, size, borderSize, beforeColor, loader, afterColor);
|
|
245
247
|
});
|
|
246
248
|
|
|
247
249
|
var sizes = {
|
|
@@ -261,7 +263,7 @@ var fontSizes = {
|
|
|
261
263
|
default: '14px'
|
|
262
264
|
};
|
|
263
265
|
|
|
264
|
-
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
266
|
+
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
265
267
|
var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n padding: 0\n ", ";\n font-family: 'Lato', sans-serif;\n font-weight: ", ";\n border-radius: 4px;\n position: relative;\n user-select: none;\n\n font-size: ", ";\n\n height: ", ";\n\n background-color: ", ";\n\n border: ", ";\n\n color: ", ";\n\n :disabled {\n ", "\n }\n\n :hover {\n cursor: ", ";\n\n ", "\n }\n\n :active {\n ", ";\n }\n\n ", "\n"])), function (_ref) {
|
|
266
268
|
var theme = _ref.theme,
|
|
267
269
|
appearance = _ref.appearance;
|
|
@@ -337,9 +339,9 @@ var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _t
|
|
|
337
339
|
theme = _ref10.theme;
|
|
338
340
|
|
|
339
341
|
if (appearance === 'bordered') {
|
|
340
|
-
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n border: 1px solid ", ";\n "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
|
|
342
|
+
return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n color: ", ";\n border: 1px solid ", ";\n "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
|
|
341
343
|
} else if (['link', 'bordeless'].includes(appearance)) {
|
|
342
|
-
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n color: ", ";\n "])), theme.colors.blue);
|
|
344
|
+
return styled.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n color: ", ";\n "])), theme.colors.blue);
|
|
343
345
|
}
|
|
344
346
|
|
|
345
347
|
return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), theme.getColor(color || 'blue', 70));
|
|
@@ -11679,7 +11681,7 @@ var icons = {
|
|
|
11679
11681
|
zoom_out: SvgZoomOut
|
|
11680
11682
|
};
|
|
11681
11683
|
|
|
11682
|
-
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$
|
|
11684
|
+
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2;
|
|
11683
11685
|
var SemanticIcon = styled__default(semanticUiReact.Icon)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n &.icon,\n &.icon:before {\n margin: 0;\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n\n ", "\n\n ", "\n }\n\n &.icon:before {\n height: 100%;\n }\n"])), function (_ref) {
|
|
11684
11686
|
var fontcolor = _ref.fontcolor;
|
|
11685
11687
|
return fontcolor;
|
|
@@ -11692,13 +11694,13 @@ var SemanticIcon = styled__default(semanticUiReact.Icon)(_templateObject$2 || (_
|
|
|
11692
11694
|
if (!height) return;
|
|
11693
11695
|
return styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n height: ", ";\n "])), height, height);
|
|
11694
11696
|
});
|
|
11695
|
-
var SVGContainer = styled__default.div(_templateObject4$
|
|
11697
|
+
var SVGContainer = styled__default.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n > svg {\n &,\n * {\n stroke: ", ";\n\n ", "\n }\n }\n"])), function (_ref4) {
|
|
11696
11698
|
var color = _ref4.color;
|
|
11697
11699
|
return color;
|
|
11698
11700
|
}, function (_ref5) {
|
|
11699
11701
|
var strokeWidth = _ref5.strokeWidth;
|
|
11700
11702
|
if (!strokeWidth) return;
|
|
11701
|
-
return styled.css(_templateObject5$
|
|
11703
|
+
return styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n stroke-width: ", ";\n "])), strokeWidth);
|
|
11702
11704
|
});
|
|
11703
11705
|
|
|
11704
11706
|
var getColor = function getColor(c) {
|
|
@@ -11807,7 +11809,7 @@ var EllipsisContainer$1 = function EllipsisContainer$1(props) {
|
|
|
11807
11809
|
}));
|
|
11808
11810
|
};
|
|
11809
11811
|
|
|
11810
|
-
var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$
|
|
11812
|
+
var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3;
|
|
11811
11813
|
var Container$1 = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n ", ";\n\n padding-right: calc(", " / 2);\n display: flex;\n width: 100%;\n display: flex;\n flex-direction: column;\n"])), function (_ref) {
|
|
11812
11814
|
var theme = _ref.theme;
|
|
11813
11815
|
return theme.useTypography('p');
|
|
@@ -11832,12 +11834,14 @@ var OverflowContainer = styled__default.div(_templateObject2$3 || (_templateObje
|
|
|
11832
11834
|
var spacing = _ref7.spacing,
|
|
11833
11835
|
theme = _ref7.theme;
|
|
11834
11836
|
var value = getSpacings(spacing || '0', '0').split(' ');
|
|
11835
|
-
return styled.css(_templateObject4$
|
|
11837
|
+
return styled.css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n padding: ", " calc(", " * 1.5) ", "\n ", ";\n "])), value[0], theme.spacings.s1, value[2], value[3]);
|
|
11836
11838
|
});
|
|
11839
|
+
var RelativeContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n flex: 1;\n"])));
|
|
11837
11840
|
|
|
11838
11841
|
var ScrollContainer = function ScrollContainer(props) {
|
|
11839
11842
|
var before = props.before,
|
|
11840
|
-
after = props.after
|
|
11843
|
+
after = props.after,
|
|
11844
|
+
loading = props.loading;
|
|
11841
11845
|
|
|
11842
11846
|
var onScrollEnd = props.onScrollEnd || function () {};
|
|
11843
11847
|
|
|
@@ -11863,17 +11867,19 @@ var ScrollContainer = function ScrollContainer(props) {
|
|
|
11863
11867
|
|
|
11864
11868
|
var _onScroll = props.onScroll || function () {};
|
|
11865
11869
|
|
|
11866
|
-
var htmlProps = filterObject(props, ['onScrollEnd', 'before', 'after']);
|
|
11867
|
-
return React__default.createElement(Container$1, null, before, React__default.createElement(OverflowContainer, Object.assign({}, htmlProps, {
|
|
11870
|
+
var htmlProps = filterObject(props, ['onScrollEnd', 'before', 'after', 'loading']);
|
|
11871
|
+
return React__default.createElement(Container$1, null, before, React__default.createElement(RelativeContainer, null, React__default.createElement(OverflowContainer, Object.assign({}, htmlProps, {
|
|
11868
11872
|
onScroll: function onScroll(event) {
|
|
11869
11873
|
_onScroll(event);
|
|
11870
11874
|
|
|
11871
11875
|
_onScroll2(event);
|
|
11872
11876
|
}
|
|
11877
|
+
})), loading && React__default.createElement(Loader, {
|
|
11878
|
+
filled: true
|
|
11873
11879
|
})), after);
|
|
11874
11880
|
};
|
|
11875
11881
|
|
|
11876
|
-
var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$
|
|
11882
|
+
var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
11877
11883
|
var positions = {
|
|
11878
11884
|
'top right': function topRight(_ref) {
|
|
11879
11885
|
var left = _ref.left;
|
|
@@ -11889,11 +11895,11 @@ var positions = {
|
|
|
11889
11895
|
},
|
|
11890
11896
|
'bottom left': function bottomLeft(_ref4) {
|
|
11891
11897
|
var right = _ref4.right;
|
|
11892
|
-
return styled.css(_templateObject4$
|
|
11898
|
+
return styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n bottom: 0;\n right: ", ";\n "])), right || '100%');
|
|
11893
11899
|
},
|
|
11894
11900
|
'right top': function rightTop(_ref5) {
|
|
11895
11901
|
var bottom = _ref5.bottom;
|
|
11896
|
-
return styled.css(_templateObject5$
|
|
11902
|
+
return styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n bottom: ", ";\n right: 0;\n "])), bottom || '100%');
|
|
11897
11903
|
},
|
|
11898
11904
|
'right bottom': function rightBottom(_ref6) {
|
|
11899
11905
|
var top = _ref6.top;
|
|
@@ -11992,7 +11998,7 @@ var AbsoluteContainer = function AbsoluteContainer(props) {
|
|
|
11992
11998
|
}), React__default.createElement("div", null, props.children));
|
|
11993
11999
|
};
|
|
11994
12000
|
|
|
11995
|
-
var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$
|
|
12001
|
+
var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$5, _templateObject5$5, _templateObject6$2, _templateObject7$2, _templateObject8$2;
|
|
11996
12002
|
var Option = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n ", ";\n line-height: ", ";\n display: flex;\n\n > :nth-child(1) {\n flex: 1;\n }\n\n ", ";\n\n :hover {\n background-color: ", ";\n }\n"])), function (_ref) {
|
|
11997
12003
|
var theme = _ref.theme;
|
|
11998
12004
|
return theme.useTypography('p');
|
|
@@ -12011,13 +12017,13 @@ var Option = styled__default.div(_templateObject$7 || (_templateObject$7 = _tagg
|
|
|
12011
12017
|
var theme = _ref4.theme;
|
|
12012
12018
|
return theme.colors.iceWhite;
|
|
12013
12019
|
});
|
|
12014
|
-
var Container$3 = styled__default(AbsoluteContainer)(_templateObject4$
|
|
12020
|
+
var Container$3 = styled__default(AbsoluteContainer)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n > div {\n > div:nth-child(1) {\n background-color: ", ";\n border-radius: 4px;\n }\n\n ", "\n\n ", "\n }\n"])), function (_ref5) {
|
|
12015
12021
|
var theme = _ref5.theme;
|
|
12016
12022
|
return theme.colors.white;
|
|
12017
12023
|
}, function (_ref6) {
|
|
12018
12024
|
var bordered = _ref6.bordered;
|
|
12019
12025
|
if (!bordered) return;
|
|
12020
|
-
return styled.css(_templateObject5$
|
|
12026
|
+
return styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n ", " {\n :not(:last-child) {\n border-bottom: 1px solid\n ", ";\n }\n }\n "])), Option, function (_ref7) {
|
|
12021
12027
|
var theme = _ref7.theme;
|
|
12022
12028
|
return theme.getColor('greyishBlue', 10);
|
|
12023
12029
|
});
|
|
@@ -12060,7 +12066,8 @@ var Menu = function Menu(props) {
|
|
|
12060
12066
|
before = _props.before,
|
|
12061
12067
|
after = _props.after,
|
|
12062
12068
|
scrollHeight = _props.scrollHeight,
|
|
12063
|
-
scrollSpacing = _props.scrollSpacing
|
|
12069
|
+
scrollSpacing = _props.scrollSpacing,
|
|
12070
|
+
loading = _props.loading;
|
|
12064
12071
|
|
|
12065
12072
|
var _useState = React.useState(-1),
|
|
12066
12073
|
activeOption = _useState[0],
|
|
@@ -12108,7 +12115,8 @@ var Menu = function Menu(props) {
|
|
|
12108
12115
|
before: before,
|
|
12109
12116
|
after: after,
|
|
12110
12117
|
height: scrollHeight,
|
|
12111
|
-
spacing: scrollSpacing
|
|
12118
|
+
spacing: scrollSpacing,
|
|
12119
|
+
loading: loading
|
|
12112
12120
|
}, options.map(function (option, index) {
|
|
12113
12121
|
var _option = _extends({}, option),
|
|
12114
12122
|
delimiter = _option.delimiter,
|
|
@@ -12181,7 +12189,7 @@ var Menu = function Menu(props) {
|
|
|
12181
12189
|
})), getSubmenu(activeOption));
|
|
12182
12190
|
};
|
|
12183
12191
|
|
|
12184
|
-
var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$
|
|
12192
|
+
var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$6, _templateObject5$6, _templateObject6$3;
|
|
12185
12193
|
var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n div {\n border-radius: 50%;\n width: ", ";\n height: ", ";\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n }\n\n span {\n display: inline-block;\n margin-left: 8px;\n color: ", ";\n }\n"])), function (_ref) {
|
|
12186
12194
|
var props = _ref.props;
|
|
12187
12195
|
return props.size === 'medium' ? '15px' : '6px';
|
|
@@ -12202,13 +12210,13 @@ var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 =
|
|
|
12202
12210
|
});
|
|
12203
12211
|
}, function (_ref7) {
|
|
12204
12212
|
var props = _ref7.props;
|
|
12205
|
-
return props.type === 'danger' && styled.css(_templateObject4$
|
|
12213
|
+
return props.type === 'danger' && styled.css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), function (_ref8) {
|
|
12206
12214
|
var theme = _ref8.theme;
|
|
12207
12215
|
return theme.colors.warningRed;
|
|
12208
12216
|
});
|
|
12209
12217
|
}, function (_ref9) {
|
|
12210
12218
|
var props = _ref9.props;
|
|
12211
|
-
return props.type === 'success' && styled.css(_templateObject5$
|
|
12219
|
+
return props.type === 'success' && styled.css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), function (_ref10) {
|
|
12212
12220
|
var theme = _ref10.theme;
|
|
12213
12221
|
return theme.colors.green;
|
|
12214
12222
|
});
|
|
@@ -12228,7 +12236,7 @@ var Indicator = function Indicator(props) {
|
|
|
12228
12236
|
}, React__default.createElement("div", null), React__default.createElement("span", null, " ", props.description, " "));
|
|
12229
12237
|
};
|
|
12230
12238
|
|
|
12231
|
-
var _templateObject$9, _templateObject2$7, _templateObject3$7, _templateObject4$
|
|
12239
|
+
var _templateObject$9, _templateObject2$7, _templateObject3$7, _templateObject4$7, _templateObject5$7, _templateObject6$4, _templateObject7$3;
|
|
12232
12240
|
var Container$5 = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n span {\n display: inline-block;\n margin-left: 7px;\n color: #000000cc;\n }\n"])));
|
|
12233
12241
|
var Progress = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n width: 64px;\n height: 12px;\n border: 1px solid #e4e4e4;\n div {\n width: ", ";\n max-width: 64px;\n height: 100%;\n ", "\n\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) {
|
|
12234
12242
|
return props.value + "%";
|
|
@@ -12238,12 +12246,12 @@ var Progress = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _
|
|
|
12238
12246
|
return theme.colors.warningGray;
|
|
12239
12247
|
});
|
|
12240
12248
|
}, function (props) {
|
|
12241
|
-
return props.type === 'info' && styled.css(_templateObject4$
|
|
12249
|
+
return props.type === 'info' && styled.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), function (_ref2) {
|
|
12242
12250
|
var theme = _ref2.theme;
|
|
12243
12251
|
return theme.colors.blue;
|
|
12244
12252
|
});
|
|
12245
12253
|
}, function (props) {
|
|
12246
|
-
return props.type === 'danger' && styled.css(_templateObject5$
|
|
12254
|
+
return props.type === 'danger' && styled.css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n "])), function (_ref3) {
|
|
12247
12255
|
var theme = _ref3.theme;
|
|
12248
12256
|
return theme.colors.warningRed;
|
|
12249
12257
|
});
|
|
@@ -12298,7 +12306,7 @@ function SvgClose(props) {
|
|
|
12298
12306
|
})));
|
|
12299
12307
|
}
|
|
12300
12308
|
|
|
12301
|
-
var _templateObject$a, _templateObject2$8, _templateObject3$8, _templateObject4$
|
|
12309
|
+
var _templateObject$a, _templateObject2$8, _templateObject3$8, _templateObject4$8, _templateObject5$8, _templateObject6$5;
|
|
12302
12310
|
var Container$6 = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n display: block;\n border-bottom-style: solid;\n\n ", "\n"])), function (_ref) {
|
|
12303
12311
|
var theme = _ref.theme,
|
|
12304
12312
|
internal = _ref.internal;
|
|
@@ -12307,9 +12315,9 @@ var Container$6 = styled__default.div(_templateObject$a || (_templateObject$a =
|
|
|
12307
12315
|
var Tabs = styled__default.ul(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n user-select: none;\n list-style: none;\n display: inline-flex;\n gap: 1px;\n padding: 0;\n margin: 0;\n\n ", "\n"])), function (_ref2) {
|
|
12308
12316
|
var theme = _ref2.theme,
|
|
12309
12317
|
internal = _ref2.internal;
|
|
12310
|
-
return styled.css(_templateObject4$
|
|
12318
|
+
return styled.css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n height: ", ";\n box-shadow: 0 0 10px 0 ", ";\n "])), internal ? '41px' : '49px', theme.getColor('black', 10));
|
|
12311
12319
|
});
|
|
12312
|
-
var Tab = styled__default.li(_templateObject5$
|
|
12320
|
+
var Tab = styled__default.li(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 4px 4px 0 0;\n\n svg {\n transform: scale(calc(18 / 24));\n stroke-width: 2px;\n }\n\n ", "\n"])), function (_ref3) {
|
|
12313
12321
|
var theme = _ref3.theme,
|
|
12314
12322
|
active = _ref3.active;
|
|
12315
12323
|
return styled.css(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n padding: 0 ", ";\n gap: ", ";\n\n span {\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n\n color: ", ";\n }\n\n svg {\n stroke: ", ";\n\n &:hover {\n stroke: ", ";\n }\n }\n "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s2, theme.spacings.s2, theme.typographies.h2.fontFamily, theme.typographies.h2.fontSize, theme.typographies.h2.fontWeight, theme.colors[active ? 'white' : 'darkBlue'], theme.colors[active ? 'white' : 'darkBlue'], theme.colors.red);
|
|
@@ -12401,7 +12409,7 @@ var getMask = function getMask(mask) {
|
|
|
12401
12409
|
};
|
|
12402
12410
|
};
|
|
12403
12411
|
|
|
12404
|
-
var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$
|
|
12412
|
+
var _templateObject$b, _templateObject2$9, _templateObject3$9, _templateObject4$9, _templateObject5$9, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12$1;
|
|
12405
12413
|
var IconContainer = styled__default.button(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: calc(", " + 1px);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 17px;\n\n background-color: transparent;\n border: none;\n box-shadow: none;\n padding: 0;\n\n ", "\n"])), function (_ref) {
|
|
12406
12414
|
var theme = _ref.theme;
|
|
12407
12415
|
return theme.spacings.s2;
|
|
@@ -12411,7 +12419,7 @@ var IconContainer = styled__default.button(_templateObject$b || (_templateObject
|
|
|
12411
12419
|
if (!onClick || disabled) return;
|
|
12412
12420
|
return styled.css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n "])));
|
|
12413
12421
|
});
|
|
12414
|
-
var Input = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n\n line-height: 17px;\n\n ::placeholder {\n color: ", ";\n\n line-height: 17px;\n\n ", "\n }\n\n width: 100%;\n box-sizing: border-box;\n\n padding: ", ";\n\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: 4px;\n\n background-color: ", ";\n\n box-shadow: none;\n outline: none;\n\n ", "\n"])), function (_ref3) {
|
|
12422
|
+
var Input = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n\n line-height: 17px;\n\n ::placeholder {\n color: ", ";\n\n line-height: 17px;\n\n ", "\n }\n\n width: 100%;\n box-sizing: border-box;\n\n padding: ", ";\n\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: 4px;\n\n background-color: ", ";\n\n box-shadow: none;\n outline: none;\n\n ", "\n\n ", "\n"])), function (_ref3) {
|
|
12415
12423
|
var theme = _ref3.theme;
|
|
12416
12424
|
return theme.useTypography('p');
|
|
12417
12425
|
}, function (_ref4) {
|
|
@@ -12426,13 +12434,13 @@ var Input = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _t
|
|
|
12426
12434
|
var placeholder = _ref6.placeholder;
|
|
12427
12435
|
|
|
12428
12436
|
if (placeholder !== '••••••••') {
|
|
12429
|
-
return styled.css(_templateObject4$
|
|
12437
|
+
return styled.css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n ", ";\n opacity: 1;\n "])), function (_ref7) {
|
|
12430
12438
|
var theme = _ref7.theme;
|
|
12431
12439
|
return theme.useTypography('p');
|
|
12432
12440
|
});
|
|
12433
12441
|
}
|
|
12434
12442
|
|
|
12435
|
-
return styled.css(_templateObject5$
|
|
12443
|
+
return styled.css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n font-size: 14px;\n letter-spacing: 0px;\n "])));
|
|
12436
12444
|
}, function (_ref8) {
|
|
12437
12445
|
var theme = _ref8.theme;
|
|
12438
12446
|
return theme.spacings.s2 + " " + theme.spacings.s3;
|
|
@@ -12448,49 +12456,55 @@ var Input = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _t
|
|
|
12448
12456
|
var arrows = _ref11.arrows;
|
|
12449
12457
|
if (arrows) return;
|
|
12450
12458
|
return styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n /* Chrome, Safari, Edge, Opera */\n :-webkit-outer-spin-button,\n :-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n -moz-appearance: textfield;\n "])));
|
|
12459
|
+
}, function (_ref12) {
|
|
12460
|
+
var readOnly = _ref12.readOnly,
|
|
12461
|
+
onClick = _ref12.onClick,
|
|
12462
|
+
disabled = _ref12.disabled;
|
|
12463
|
+
if (!readOnly) return;
|
|
12464
|
+
return styled.css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n cursor: ", ";\n "])), !onClick || disabled ? 'unset' : 'pointer');
|
|
12451
12465
|
});
|
|
12452
|
-
var Label = styled__default.label(
|
|
12453
|
-
var theme = _ref12.theme;
|
|
12454
|
-
return theme.useTypography('p');
|
|
12455
|
-
}, function (_ref13) {
|
|
12466
|
+
var Label = styled__default.label(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n\n width: ", ";\n box-sizing: border-box;\n position: relative;\n display: block;\n\n ", "\n\n > div:first-child {\n display: inline-block;\n margin-bottom: ", ";\n\n ", "\n }\n\n ", "\n"])), function (_ref13) {
|
|
12456
12467
|
var theme = _ref13.theme;
|
|
12457
|
-
return theme.
|
|
12468
|
+
return theme.useTypography('p');
|
|
12458
12469
|
}, function (_ref14) {
|
|
12459
|
-
var
|
|
12460
|
-
return
|
|
12470
|
+
var theme = _ref14.theme;
|
|
12471
|
+
return theme.colors.greyishBlue;
|
|
12461
12472
|
}, function (_ref15) {
|
|
12462
|
-
var
|
|
12463
|
-
|
|
12464
|
-
return styled.css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
12473
|
+
var width = _ref15.width;
|
|
12474
|
+
return width || '100%';
|
|
12465
12475
|
}, function (_ref16) {
|
|
12466
|
-
var
|
|
12467
|
-
return
|
|
12476
|
+
var disabled = _ref16.disabled;
|
|
12477
|
+
if (!disabled) return;
|
|
12478
|
+
return styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
12468
12479
|
}, function (_ref17) {
|
|
12469
|
-
var
|
|
12470
|
-
|
|
12471
|
-
return styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n :after {\n content: ' *';\n }\n "])));
|
|
12480
|
+
var theme = _ref17.theme;
|
|
12481
|
+
return theme.spacings.s1;
|
|
12472
12482
|
}, function (_ref18) {
|
|
12473
|
-
var
|
|
12483
|
+
var required = _ref18.required;
|
|
12484
|
+
if (!required) return;
|
|
12485
|
+
return styled.css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n :after {\n content: ' *';\n }\n "])));
|
|
12486
|
+
}, function (_ref19) {
|
|
12487
|
+
var icon = _ref19.icon;
|
|
12474
12488
|
if (!icon) return;
|
|
12475
12489
|
var width = icon.width,
|
|
12476
12490
|
position = icon.position;
|
|
12477
12491
|
|
|
12478
12492
|
if (position === 'right') {
|
|
12479
|
-
return styled.css(
|
|
12480
|
-
var theme = _ref19.theme;
|
|
12481
|
-
return theme.spacings.s3;
|
|
12482
|
-
}, Input, function (_ref20) {
|
|
12493
|
+
return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n > ", " {\n width: ", ";\n right: calc(", " / 2);\n }\n\n > ", " {\n padding-right: calc(", " + ", ");\n }\n "])), IconContainer, width, function (_ref20) {
|
|
12483
12494
|
var theme = _ref20.theme;
|
|
12484
12495
|
return theme.spacings.s3;
|
|
12496
|
+
}, Input, function (_ref21) {
|
|
12497
|
+
var theme = _ref21.theme;
|
|
12498
|
+
return theme.spacings.s3;
|
|
12485
12499
|
}, width);
|
|
12486
12500
|
}
|
|
12487
12501
|
|
|
12488
|
-
return styled.css(
|
|
12489
|
-
var theme = _ref21.theme;
|
|
12490
|
-
return theme.spacings.s3;
|
|
12491
|
-
}, Input, function (_ref22) {
|
|
12502
|
+
return styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n > ", " {\n width: ", ";\n left: calc(", " / 2);\n }\n\n > ", " {\n padding-left: calc(", " + ", ");\n }\n "])), IconContainer, width, function (_ref22) {
|
|
12492
12503
|
var theme = _ref22.theme;
|
|
12493
12504
|
return theme.spacings.s3;
|
|
12505
|
+
}, Input, function (_ref23) {
|
|
12506
|
+
var theme = _ref23.theme;
|
|
12507
|
+
return theme.spacings.s3;
|
|
12494
12508
|
}, width);
|
|
12495
12509
|
});
|
|
12496
12510
|
|
|
@@ -12639,7 +12653,7 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
|
|
|
12639
12653
|
});
|
|
12640
12654
|
Input$1.displayName = 'Input';
|
|
12641
12655
|
|
|
12642
|
-
var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$
|
|
12656
|
+
var _templateObject$c, _templateObject2$a, _templateObject3$a, _templateObject4$a, _templateObject5$a, _templateObject6$7, _templateObject7$5;
|
|
12643
12657
|
var width = '17px';
|
|
12644
12658
|
var Checkmark = styled__default.span(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0px;\n left: 0;\n height: ", ";\n width: ", ";\n background-color: ", ";\n\n border-style: solid;\n border-color: ", ";\n border-width: 1px;\n border-radius: 4px;\n\n transition-property: border-color;\n transition-duration: 0.25s;\n transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n :after {\n content: '';\n position: absolute;\n\n left: 50%;\n top: 50%;\n height: 0;\n width: 0;\n\n border-style: solid;\n border-color: ", ";\n border-width: 0;\n transform: rotate(45deg);\n\n transition-property: width height border-width top left;\n transition-duration: 0.25s;\n transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n }\n"])), width, width, function (_ref) {
|
|
12645
12659
|
var theme = _ref.theme;
|
|
@@ -12702,10 +12716,10 @@ var Label$1 = styled__default.label(_templateObject2$a || (_templateObject2$a =
|
|
|
12702
12716
|
var disabled = _ref6.disabled;
|
|
12703
12717
|
|
|
12704
12718
|
if (!disabled) {
|
|
12705
|
-
return styled.css(_templateObject4$
|
|
12719
|
+
return styled.css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n "])));
|
|
12706
12720
|
}
|
|
12707
12721
|
|
|
12708
|
-
return styled.css(_templateObject5$
|
|
12722
|
+
return styled.css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
12709
12723
|
}, width, function (_ref7) {
|
|
12710
12724
|
var theme = _ref7.theme;
|
|
12711
12725
|
return theme.spacings.s1;
|
|
@@ -12883,7 +12897,7 @@ var Time = React__default.forwardRef(function (props, ref) {
|
|
|
12883
12897
|
});
|
|
12884
12898
|
Time.displayName = 'Time';
|
|
12885
12899
|
|
|
12886
|
-
var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$
|
|
12900
|
+
var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$b, _templateObject5$b, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1;
|
|
12887
12901
|
var Container$7 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n display: inline-block;\n background-color: ", ";\n padding: ", ";\n\n > div:nth-child(1) {\n border: 1px solid ", ";\n margin-bottom: ", ";\n }\n"])), function (_ref) {
|
|
12888
12902
|
var theme = _ref.theme;
|
|
12889
12903
|
return theme.colors.white;
|
|
@@ -12902,11 +12916,11 @@ var AbsoluteContainer$1 = styled__default(AbsoluteContainer)(_templateObject2$b
|
|
|
12902
12916
|
return theme.spacings.s3 + " " + theme.spacings.s3 + " " + theme.spacings.s1 + " " + theme.spacings.s3;
|
|
12903
12917
|
});
|
|
12904
12918
|
var Footer = styled__default.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
12905
|
-
var MonthContainer = styled__default.div(_templateObject4$
|
|
12919
|
+
var MonthContainer = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n > div {\n margin: ", " 0;\n }\n"])), function (_ref6) {
|
|
12906
12920
|
var theme = _ref6.theme;
|
|
12907
12921
|
return theme.spacings.s1;
|
|
12908
12922
|
});
|
|
12909
|
-
var NavBtn = styled__default.button(_templateObject5$
|
|
12923
|
+
var NavBtn = styled__default.button(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n ", "\n line-height: 14px;\n width: 32px;\n height: 32px;\n box-shadow: none;\n border: 0.5px solid transparent;\n background-color: transparent;\n cursor: pointer;\n border: none;\n\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n :disabled {\n visibility: hidden;\n }\n"])), function (_ref7) {
|
|
12910
12924
|
var theme = _ref7.theme;
|
|
12911
12925
|
return theme.useTypography('p');
|
|
12912
12926
|
});
|
|
@@ -12952,7 +12966,7 @@ var DayContainer = styled__default.button(_templateObject8$4 || (_templateObject
|
|
|
12952
12966
|
theme = _ref17.theme;
|
|
12953
12967
|
|
|
12954
12968
|
if (active !== 1) {
|
|
12955
|
-
return styled.css(_templateObject12$
|
|
12969
|
+
return styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n :not(:disabled) {\n :hover {\n border-color: ", ";\n color: ", ";\n }\n }\n "])), function (_ref18) {
|
|
12956
12970
|
var theme = _ref18.theme;
|
|
12957
12971
|
return theme.colors.blue;
|
|
12958
12972
|
}, function (_ref19) {
|
|
@@ -13222,7 +13236,7 @@ var Calendar = function Calendar(props) {
|
|
|
13222
13236
|
var JSDate = Date;
|
|
13223
13237
|
|
|
13224
13238
|
var _templateObject$e;
|
|
13225
|
-
var RelativeContainer = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
13239
|
+
var RelativeContainer$1 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
13226
13240
|
|
|
13227
13241
|
var isLeapYear = function isLeapYear(year) {
|
|
13228
13242
|
if (year % 4 !== 0) return false;else if (year % 100 !== 0) return true;else if (year % 400 !== 0) return false;else return true;
|
|
@@ -13340,7 +13354,7 @@ var Date$1 = React__default.forwardRef(function (props, ref) {
|
|
|
13340
13354
|
}
|
|
13341
13355
|
} : undefined;
|
|
13342
13356
|
var inputProps = filterObject(props, ['picker', 'min', 'max']);
|
|
13343
|
-
return React__default.createElement(RelativeContainer, {
|
|
13357
|
+
return React__default.createElement(RelativeContainer$1, {
|
|
13344
13358
|
ref: useOnClickOut(function () {
|
|
13345
13359
|
return setOpen(false);
|
|
13346
13360
|
})
|
|
@@ -13375,13 +13389,13 @@ var useContext = function useContext() {
|
|
|
13375
13389
|
return React__default.useContext(Provider);
|
|
13376
13390
|
};
|
|
13377
13391
|
|
|
13378
|
-
var _templateObject$f, _templateObject2$c, _templateObject3$c, _templateObject4$
|
|
13379
|
-
var RelativeContainer$
|
|
13392
|
+
var _templateObject$f, _templateObject2$c, _templateObject3$c, _templateObject4$c;
|
|
13393
|
+
var RelativeContainer$2 = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
13380
13394
|
var HeaderContainer = styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
13381
13395
|
var theme = _ref.theme;
|
|
13382
13396
|
return styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n padding: ", " calc(", " * 0.75)\n ", " ", ";\n "])), theme.spacings.s3, theme.spacings.s3, theme.spacings.s1, theme.spacings.s3);
|
|
13383
13397
|
});
|
|
13384
|
-
var SelectAllContainer = styled__default.div(_templateObject4$
|
|
13398
|
+
var SelectAllContainer = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n display: flex;\n justify-content: space-between;\n"])), function (_ref2) {
|
|
13385
13399
|
var theme = _ref2.theme;
|
|
13386
13400
|
return theme.spacings.s1;
|
|
13387
13401
|
});
|
|
@@ -13389,20 +13403,22 @@ var SelectAllContainer = styled__default.div(_templateObject4$b || (_templateObj
|
|
|
13389
13403
|
var Header$1 = function Header() {
|
|
13390
13404
|
var context = useContext();
|
|
13391
13405
|
|
|
13406
|
+
if (!context.props.search) {
|
|
13407
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
13408
|
+
}
|
|
13409
|
+
|
|
13392
13410
|
var _useState = React.useState(''),
|
|
13393
13411
|
search = _useState[0],
|
|
13394
13412
|
setSearch = _useState[1];
|
|
13395
13413
|
|
|
13396
|
-
|
|
13397
|
-
|
|
13398
|
-
|
|
13399
|
-
|
|
13400
|
-
|
|
13401
|
-
|
|
13402
|
-
|
|
13403
|
-
|
|
13404
|
-
setSearched = context.setSearched,
|
|
13405
|
-
setPage = context.setPage;
|
|
13414
|
+
var _context$checked = context.checked,
|
|
13415
|
+
checked = _context$checked[0],
|
|
13416
|
+
setChecked = _context$checked[1],
|
|
13417
|
+
_context$search = context.search,
|
|
13418
|
+
searched = _context$search[0],
|
|
13419
|
+
setSearched = _context$search[1],
|
|
13420
|
+
loading = context.loading,
|
|
13421
|
+
options = context.options;
|
|
13406
13422
|
|
|
13407
13423
|
var onClick = function onClick() {
|
|
13408
13424
|
setChecked(function (prev) {
|
|
@@ -13414,7 +13430,11 @@ var Header$1 = function Header() {
|
|
|
13414
13430
|
|
|
13415
13431
|
var onSearch = function onSearch() {
|
|
13416
13432
|
setSearched(search);
|
|
13417
|
-
|
|
13433
|
+
};
|
|
13434
|
+
|
|
13435
|
+
var onClear = function onClear() {
|
|
13436
|
+
setSearch('');
|
|
13437
|
+
setSearched('');
|
|
13418
13438
|
};
|
|
13419
13439
|
|
|
13420
13440
|
return React__default.createElement(HeaderContainer, null, context.props.type === 'select-multiple' && context.props.selectAll && React__default.createElement(SelectAllContainer, null, React__default.createElement("b", null, "Selecionados (", checked.length, ")"), React__default.createElement(Button$1, {
|
|
@@ -13429,14 +13449,15 @@ var Header$1 = function Header() {
|
|
|
13429
13449
|
setValue: setSearch,
|
|
13430
13450
|
value: search,
|
|
13431
13451
|
onPressEnter: onSearch,
|
|
13432
|
-
clearable: search !== '' && search === searched,
|
|
13452
|
+
clearable: search !== '' && search === searched ? onClear : undefined,
|
|
13433
13453
|
icon: {
|
|
13434
13454
|
icon: {
|
|
13435
13455
|
type: 'feather',
|
|
13436
13456
|
icon: 'search'
|
|
13437
13457
|
},
|
|
13438
13458
|
onClick: onSearch
|
|
13439
|
-
}
|
|
13459
|
+
},
|
|
13460
|
+
loading: loading
|
|
13440
13461
|
}));
|
|
13441
13462
|
};
|
|
13442
13463
|
|
|
@@ -13444,7 +13465,8 @@ var Footer$1 = function Footer() {
|
|
|
13444
13465
|
var context = useContext();
|
|
13445
13466
|
if (context.props.type !== 'select-multiple') return React__default.createElement(React__default.Fragment, null);
|
|
13446
13467
|
var setValue = context.props.setValue,
|
|
13447
|
-
checked = context.checked,
|
|
13468
|
+
_context$checked = context.checked,
|
|
13469
|
+
checked = _context$checked[0],
|
|
13448
13470
|
setOpen = context.setOpen;
|
|
13449
13471
|
|
|
13450
13472
|
var onClick = function onClick() {
|
|
@@ -13462,9 +13484,9 @@ var Footer$1 = function Footer() {
|
|
|
13462
13484
|
});
|
|
13463
13485
|
};
|
|
13464
13486
|
|
|
13465
|
-
var getOptions = function getOptions(props, checked, setChecked) {
|
|
13487
|
+
var getOptions = function getOptions(props, options, checked, setChecked) {
|
|
13466
13488
|
if (props.type === 'select-multiple') {
|
|
13467
|
-
return
|
|
13489
|
+
return options.map(function (option) {
|
|
13468
13490
|
var label = isString(option.label) ? {
|
|
13469
13491
|
text: option.label,
|
|
13470
13492
|
element: option.label
|
|
@@ -13503,7 +13525,7 @@ var getOptions = function getOptions(props, checked, setChecked) {
|
|
|
13503
13525
|
});
|
|
13504
13526
|
}
|
|
13505
13527
|
|
|
13506
|
-
return
|
|
13528
|
+
return options.map(function (option) {
|
|
13507
13529
|
var label = isString(option.label) ? {
|
|
13508
13530
|
text: option.label,
|
|
13509
13531
|
element: option.label
|
|
@@ -13523,35 +13545,46 @@ var getOptions = function getOptions(props, checked, setChecked) {
|
|
|
13523
13545
|
var Select = React__default.forwardRef(function (props, ref) {
|
|
13524
13546
|
var position = props.position,
|
|
13525
13547
|
disableAutoPosition = props.disableAutoPosition,
|
|
13526
|
-
loader = props.loader,
|
|
13527
13548
|
type = props.type;
|
|
13528
13549
|
|
|
13529
|
-
var _useState = React.useState(
|
|
13530
|
-
|
|
13531
|
-
|
|
13550
|
+
var _useState = React.useState([]),
|
|
13551
|
+
options = _useState[0],
|
|
13552
|
+
setOptions = _useState[1];
|
|
13532
13553
|
|
|
13533
|
-
var _useState2 = React.useState(
|
|
13534
|
-
|
|
13535
|
-
|
|
13554
|
+
var _useState2 = React.useState(false),
|
|
13555
|
+
_loading = _useState2[0],
|
|
13556
|
+
setLoading = _useState2[1];
|
|
13536
13557
|
|
|
13537
|
-
var _useState3 = React.useState(
|
|
13538
|
-
|
|
13539
|
-
|
|
13558
|
+
var _useState3 = React.useState(''),
|
|
13559
|
+
search = _useState3[0],
|
|
13560
|
+
_setSearch = _useState3[1];
|
|
13540
13561
|
|
|
13541
|
-
var _useState4 = React.useState(
|
|
13542
|
-
|
|
13543
|
-
|
|
13562
|
+
var _useState4 = React.useState(1),
|
|
13563
|
+
page = _useState4[0],
|
|
13564
|
+
setPage = _useState4[1];
|
|
13544
13565
|
|
|
13545
13566
|
var _useState5 = React.useState(false),
|
|
13546
|
-
|
|
13547
|
-
|
|
13567
|
+
lastPage = _useState5[0],
|
|
13568
|
+
setLastPage = _useState5[1];
|
|
13569
|
+
|
|
13570
|
+
var _useState6 = React.useState(false),
|
|
13571
|
+
open = _useState6[0],
|
|
13572
|
+
setOpen = _useState6[1];
|
|
13573
|
+
|
|
13574
|
+
var _useState7 = React.useState(Array.isArray(props.value) ? [].concat(props.value) : []),
|
|
13575
|
+
checked = _useState7[0],
|
|
13576
|
+
setChecked = _useState7[1];
|
|
13548
13577
|
|
|
13549
|
-
var
|
|
13550
|
-
checked = _useState6[0],
|
|
13551
|
-
setChecked = _useState6[1];
|
|
13578
|
+
var loading = props.loading || _loading;
|
|
13552
13579
|
|
|
13553
|
-
var
|
|
13554
|
-
|
|
13580
|
+
var setSearch = function setSearch(value) {
|
|
13581
|
+
_setSearch(value);
|
|
13582
|
+
|
|
13583
|
+
setPage(1);
|
|
13584
|
+
};
|
|
13585
|
+
|
|
13586
|
+
var parsedOptions = getOptions(props, options, checked, setChecked);
|
|
13587
|
+
var inputProps = filterObject(props, ['type', 'onScrollEnd', 'position', 'disableAutoPosition', 'value']);
|
|
13555
13588
|
|
|
13556
13589
|
if (props.type === 'select-multiple') {
|
|
13557
13590
|
if (props.value.length > 0) {
|
|
@@ -13560,7 +13593,7 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13560
13593
|
inputProps.value = '';
|
|
13561
13594
|
}
|
|
13562
13595
|
} else {
|
|
13563
|
-
var selected =
|
|
13596
|
+
var selected = parsedOptions.find(function (option) {
|
|
13564
13597
|
return option.data.value === props.value;
|
|
13565
13598
|
});
|
|
13566
13599
|
inputProps.value = selected ? selected.label.text : '';
|
|
@@ -13569,7 +13602,7 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13569
13602
|
var _onScrollEnd = props.onScrollEnd || function () {};
|
|
13570
13603
|
|
|
13571
13604
|
var onScrollEnd = function onScrollEnd() {
|
|
13572
|
-
if (!lastPage) {
|
|
13605
|
+
if (!lastPage && !loading) {
|
|
13573
13606
|
setPage(function (prev) {
|
|
13574
13607
|
return prev + 1;
|
|
13575
13608
|
});
|
|
@@ -13582,14 +13615,14 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13582
13615
|
try {
|
|
13583
13616
|
if (!props.loader) return Promise.resolve();
|
|
13584
13617
|
setLoading(true);
|
|
13585
|
-
return Promise.resolve(props.loader(
|
|
13618
|
+
return Promise.resolve(props.loader(search, page)).then(function (optionsResult) {
|
|
13586
13619
|
if (Array.isArray(optionsResult)) {
|
|
13587
|
-
|
|
13620
|
+
setOptions(page === 1 ? optionsResult : function (prev) {
|
|
13588
13621
|
return prev.concat(optionsResult);
|
|
13589
13622
|
});
|
|
13590
13623
|
setLastPage(true);
|
|
13591
13624
|
} else {
|
|
13592
|
-
|
|
13625
|
+
setOptions(page === 1 ? optionsResult.options : function (prev) {
|
|
13593
13626
|
return prev.concat(optionsResult.options);
|
|
13594
13627
|
});
|
|
13595
13628
|
setLastPage(optionsResult.lastPage);
|
|
@@ -13600,7 +13633,7 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13600
13633
|
} catch (e) {
|
|
13601
13634
|
return Promise.reject(e);
|
|
13602
13635
|
}
|
|
13603
|
-
}, [
|
|
13636
|
+
}, [search, page]);
|
|
13604
13637
|
React.useEffect(function () {
|
|
13605
13638
|
onSubmit();
|
|
13606
13639
|
}, [onSubmit]);
|
|
@@ -13608,13 +13641,12 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13608
13641
|
value: {
|
|
13609
13642
|
props: props,
|
|
13610
13643
|
setOpen: setOpen,
|
|
13611
|
-
checked: checked,
|
|
13612
|
-
|
|
13613
|
-
|
|
13614
|
-
|
|
13615
|
-
setSearched: setSearched
|
|
13644
|
+
checked: [checked, setChecked],
|
|
13645
|
+
search: [search, setSearch],
|
|
13646
|
+
loading: loading,
|
|
13647
|
+
options: options
|
|
13616
13648
|
}
|
|
13617
|
-
}, React__default.createElement(RelativeContainer$
|
|
13649
|
+
}, React__default.createElement(RelativeContainer$2, {
|
|
13618
13650
|
ref: useOnClickOut(function () {
|
|
13619
13651
|
return setOpen(false);
|
|
13620
13652
|
})
|
|
@@ -13626,7 +13658,7 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13626
13658
|
return !prev;
|
|
13627
13659
|
});
|
|
13628
13660
|
},
|
|
13629
|
-
loading:
|
|
13661
|
+
loading: loading,
|
|
13630
13662
|
icon: {
|
|
13631
13663
|
position: 'right',
|
|
13632
13664
|
icon: {
|
|
@@ -13641,7 +13673,7 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13641
13673
|
close: function close() {
|
|
13642
13674
|
return setOpen(false);
|
|
13643
13675
|
},
|
|
13644
|
-
options:
|
|
13676
|
+
options: parsedOptions,
|
|
13645
13677
|
onScrollEnd: onScrollEnd,
|
|
13646
13678
|
width: '100%',
|
|
13647
13679
|
bordered: true,
|
|
@@ -13653,7 +13685,8 @@ var Select = React__default.forwardRef(function (props, ref) {
|
|
|
13653
13685
|
},
|
|
13654
13686
|
before: React__default.createElement(Header$1, null),
|
|
13655
13687
|
after: React__default.createElement(Footer$1, null),
|
|
13656
|
-
scrollHeight:
|
|
13688
|
+
scrollHeight: props.search ? '135px' : '165px',
|
|
13689
|
+
loading: loading
|
|
13657
13690
|
})));
|
|
13658
13691
|
});
|
|
13659
13692
|
Select.displayName = 'Select';
|
|
@@ -13900,7 +13933,7 @@ var countries = {
|
|
|
13900
13933
|
|
|
13901
13934
|
var _templateObject$h, _templateObject2$e, _templateObject3$d;
|
|
13902
13935
|
var IconContainer$1 = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n > i.icon {\n margin-top: -1px;\n }\n"])));
|
|
13903
|
-
var RelativeContainer$
|
|
13936
|
+
var RelativeContainer$3 = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
13904
13937
|
var Label$2 = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n ", "\n\n color: ", ";\n\n display: flex;\n gap: ", ";\n\n > span {\n color: ", ";\n }\n"])), function (_ref) {
|
|
13905
13938
|
var theme = _ref.theme;
|
|
13906
13939
|
return theme.useTypography('p');
|
|
@@ -14017,7 +14050,7 @@ var Phone = React__default.forwardRef(function (props, ref) {
|
|
|
14017
14050
|
var v = inputValue.replace(/\D+/g, '').substring(0, country.charLimit);
|
|
14018
14051
|
setValue(country.ddi + " " + v);
|
|
14019
14052
|
}, [inputValue]);
|
|
14020
|
-
return React__default.createElement(RelativeContainer$
|
|
14053
|
+
return React__default.createElement(RelativeContainer$3, {
|
|
14021
14054
|
ref: useOnClickOut(function () {
|
|
14022
14055
|
return setOpen(false);
|
|
14023
14056
|
})
|
|
@@ -14058,8 +14091,8 @@ var Phone = React__default.forwardRef(function (props, ref) {
|
|
|
14058
14091
|
});
|
|
14059
14092
|
Phone.displayName = 'Phone';
|
|
14060
14093
|
|
|
14061
|
-
var _templateObject$i, _templateObject2$f, _templateObject3$e, _templateObject4$
|
|
14062
|
-
var RelativeContainer$
|
|
14094
|
+
var _templateObject$i, _templateObject2$f, _templateObject3$e, _templateObject4$d, _templateObject5$c, _templateObject6$9;
|
|
14095
|
+
var RelativeContainer$4 = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n position: relative;\n\n input {\n color: transparent;\n }\n"])));
|
|
14063
14096
|
var Container$8 = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 1px;\n left: 1px;\n width: calc(100% - 2px - ", ");\n height: 33px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ", ";\n border-radius: 4px;\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
14064
14097
|
var iconWidth = _ref.iconWidth,
|
|
14065
14098
|
theme = _ref.theme;
|
|
@@ -14075,9 +14108,9 @@ var Container$8 = styled__default.div(_templateObject2$f || (_templateObject2$f
|
|
|
14075
14108
|
}, function (_ref4) {
|
|
14076
14109
|
var disabled = _ref4.disabled;
|
|
14077
14110
|
if (!disabled) return;
|
|
14078
|
-
return styled.css(_templateObject4$
|
|
14111
|
+
return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
14079
14112
|
});
|
|
14080
|
-
var Button$3 = styled__default.button(_templateObject5$
|
|
14113
|
+
var Button$3 = styled__default.button(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n display: flex;\n background-color: transparent;\n border: none;\n padding: 0;\n box-shadow: none;\n\n ", ";\n"])), function (_ref5) {
|
|
14081
14114
|
var onClick = _ref5.onClick;
|
|
14082
14115
|
if (!onClick) return;
|
|
14083
14116
|
return styled.css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n :not(:disabled) {\n cursor: pointer;\n }\n "])));
|
|
@@ -14132,7 +14165,7 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
|
|
|
14132
14165
|
}
|
|
14133
14166
|
} : undefined;
|
|
14134
14167
|
var inputProps = filterObject(props, ['picker', 'min', 'max']);
|
|
14135
|
-
return React__default.createElement(RelativeContainer$
|
|
14168
|
+
return React__default.createElement(RelativeContainer$4, {
|
|
14136
14169
|
ref: useOnClickOut(function () {
|
|
14137
14170
|
return setOpen(false);
|
|
14138
14171
|
})
|
|
@@ -14191,7 +14224,7 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
|
|
|
14191
14224
|
});
|
|
14192
14225
|
DatePicker.displayName = 'DatePicker';
|
|
14193
14226
|
|
|
14194
|
-
var _templateObject$j, _templateObject2$g, _templateObject3$f, _templateObject4$
|
|
14227
|
+
var _templateObject$j, _templateObject2$g, _templateObject3$f, _templateObject4$e, _templateObject5$d, _templateObject6$a, _templateObject7$7;
|
|
14195
14228
|
var LabelContainer = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n ", "\n line-height: 14px;\n display: flex;\n align-items: center;\n"])), function (_ref) {
|
|
14196
14229
|
var theme = _ref.theme;
|
|
14197
14230
|
return theme.useTypography('p');
|
|
@@ -14206,11 +14239,11 @@ var Label$3 = styled__default.label(_templateObject2$g || (_templateObject2$g =
|
|
|
14206
14239
|
return styled.css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n > span {\n cursor: pointer;\n }\n "])));
|
|
14207
14240
|
}
|
|
14208
14241
|
|
|
14209
|
-
return styled.css(_templateObject4$
|
|
14242
|
+
return styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
14210
14243
|
}, function (_ref4) {
|
|
14211
14244
|
var required = _ref4.required;
|
|
14212
14245
|
if (!required) return;
|
|
14213
|
-
return styled.css(_templateObject5$
|
|
14246
|
+
return styled.css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n > ", " {\n :after {\n content: '*';\n }\n }\n "])), LabelContainer);
|
|
14214
14247
|
}, function (_ref5) {
|
|
14215
14248
|
var invalid = _ref5.invalid;
|
|
14216
14249
|
|
|
@@ -14269,7 +14302,7 @@ var Switch = function Switch(props) {
|
|
|
14269
14302
|
})), React__default.createElement("span", null), label && React__default.createElement(LabelContainer, null, label));
|
|
14270
14303
|
};
|
|
14271
14304
|
|
|
14272
|
-
var _templateObject$k, _templateObject2$h, _templateObject3$g, _templateObject4$
|
|
14305
|
+
var _templateObject$k, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$e, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15, _templateObject16;
|
|
14273
14306
|
var bullet = styled.css(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n appearance: none;\n width: ", ";\n height: ", ";\n border-radius: 100%;\n border-width: 1px;\n border-style: solid;\n background-color: ", ";\n box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
|
|
14274
14307
|
var theme = _ref.theme;
|
|
14275
14308
|
return theme.spacings.s4;
|
|
@@ -14293,14 +14326,14 @@ var Label$4 = styled__default.label(_templateObject3$g || (_templateObject3$g =
|
|
|
14293
14326
|
}, function (_ref7) {
|
|
14294
14327
|
var disabled = _ref7.disabled;
|
|
14295
14328
|
if (!disabled) return;
|
|
14296
|
-
return styled.css(_templateObject4$
|
|
14329
|
+
return styled.css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
14297
14330
|
}, function (_ref8) {
|
|
14298
14331
|
var theme = _ref8.theme;
|
|
14299
14332
|
return theme.spacings.s1;
|
|
14300
14333
|
}, function (_ref9) {
|
|
14301
14334
|
var required = _ref9.required;
|
|
14302
14335
|
if (!required) return;
|
|
14303
|
-
return styled.css(_templateObject5$
|
|
14336
|
+
return styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n :after {\n content: ' *';\n }\n "])));
|
|
14304
14337
|
});
|
|
14305
14338
|
var InputContainer = styled__default.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n gap: 6px;\n\n > div {\n position: relative;\n }\n\n ", "\n"])), function (_ref10) {
|
|
14306
14339
|
var theme = _ref10.theme,
|
|
@@ -14320,7 +14353,7 @@ var LabelsContainer = styled__default.div(_templateObject10$4 || (_templateObjec
|
|
|
14320
14353
|
return styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: column-reverse;\n }\n\n ", " {\n :after {\n bottom: calc(100% + 10.5px);\n }\n }\n\n ", " {\n align-items: start;\n }\n "])), InputContainer, Marker, MinMaxLabelContainer);
|
|
14321
14354
|
}
|
|
14322
14355
|
|
|
14323
|
-
return styled.css(_templateObject12$
|
|
14356
|
+
return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: column;\n }\n\n ", " {\n :after {\n top: calc(100% + 8px);\n }\n }\n\n ", " {\n align-items: end;\n }\n "])), InputContainer, Marker, MinMaxLabelContainer);
|
|
14324
14357
|
});
|
|
14325
14358
|
var SelectedArea = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n\n height: 3px;\n width: 100%;\n position: absolute;\n bottom: calc(50% - 2px);\n left: 0;\n display: flex;\n z-index: 1;\n\n > span {\n width: ", "%;\n display: block;\n box-sizing: border-box;\n height: 100%;\n }\n"])), function (_ref12) {
|
|
14326
14359
|
var theme = _ref12.theme;
|
|
@@ -14479,7 +14512,7 @@ var Range = React__default.forwardRef(function (props, ref) {
|
|
|
14479
14512
|
});
|
|
14480
14513
|
Range.displayName = 'input';
|
|
14481
14514
|
|
|
14482
|
-
var _templateObject$l, _templateObject2$i, _templateObject3$h, _templateObject4$
|
|
14515
|
+
var _templateObject$l, _templateObject2$i, _templateObject3$h, _templateObject4$g, _templateObject5$f, _templateObject6$c, _templateObject7$9;
|
|
14483
14516
|
var LabelContainer$1 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n align-items: center;\n"])), function (_ref) {
|
|
14484
14517
|
var theme = _ref.theme;
|
|
14485
14518
|
return theme.useTypography('p');
|
|
@@ -14494,11 +14527,11 @@ var Label$5 = styled__default.label(_templateObject2$i || (_templateObject2$i =
|
|
|
14494
14527
|
return styled.css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n > span {\n cursor: pointer;\n }\n "])));
|
|
14495
14528
|
}
|
|
14496
14529
|
|
|
14497
|
-
return styled.css(_templateObject4$
|
|
14530
|
+
return styled.css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
14498
14531
|
}, function (_ref4) {
|
|
14499
14532
|
var required = _ref4.required;
|
|
14500
14533
|
if (!required) return;
|
|
14501
|
-
return styled.css(_templateObject5$
|
|
14534
|
+
return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n > ", " {\n :after {\n content: ' *';\n }\n }\n "])), LabelContainer$1);
|
|
14502
14535
|
}, function (_ref5) {
|
|
14503
14536
|
var invalid = _ref5.invalid;
|
|
14504
14537
|
|
|
@@ -14656,7 +14689,7 @@ var widths = {
|
|
|
14656
14689
|
default: '642.5px'
|
|
14657
14690
|
};
|
|
14658
14691
|
|
|
14659
|
-
var _templateObject$m, _templateObject2$j, _templateObject3$i, _templateObject4$
|
|
14692
|
+
var _templateObject$m, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$g, _templateObject6$d, _templateObject7$a, _templateObject8$6, _templateObject9$5, _templateObject10$5;
|
|
14660
14693
|
var Background = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n backdrop-filter: blur(3px);\n background-color: ", ";\n"])), function (_ref) {
|
|
14661
14694
|
var theme = _ref.theme;
|
|
14662
14695
|
return theme.getColor('black', 25);
|
|
@@ -14667,9 +14700,9 @@ var Header$2 = styled__default.div(_templateObject3$i || (_templateObject3$i = _
|
|
|
14667
14700
|
colors = _ref2$theme.colors,
|
|
14668
14701
|
spacings = _ref2$theme.spacings,
|
|
14669
14702
|
useTypography = _ref2$theme.useTypography;
|
|
14670
|
-
return styled.css(_templateObject4$
|
|
14703
|
+
return styled.css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid ", ";\n padding: ", ";\n\n ", "\n "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
|
|
14671
14704
|
});
|
|
14672
|
-
var Footer$2 = styled__default.div(_templateObject5$
|
|
14705
|
+
var Footer$2 = styled__default.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n ", "\n"])), function (_ref3) {
|
|
14673
14706
|
var _ref3$theme = _ref3.theme,
|
|
14674
14707
|
spacings = _ref3$theme.spacings,
|
|
14675
14708
|
colors = _ref3$theme.colors;
|
|
@@ -14885,15 +14918,15 @@ Modal$1.ConfirmDelete = ConfirmDelete;
|
|
|
14885
14918
|
Modal$1.ConfirmEdit = ConfirmSuccess;
|
|
14886
14919
|
Modal$1.Audit = Audit;
|
|
14887
14920
|
|
|
14888
|
-
var _templateObject$q, _templateObject2$k, _templateObject3$j, _templateObject4$
|
|
14921
|
+
var _templateObject$q, _templateObject2$k, _templateObject3$j, _templateObject4$i, _templateObject5$h, _templateObject6$e, _templateObject7$b, _templateObject8$7, _templateObject9$6, _templateObject10$6;
|
|
14889
14922
|
var Container$a = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n width: 100%;\n background: #fff;\n border: 1px solid #d4d4d5;\n border-radius: 4px;\n border-left-width: 5px;\n padding: 14px;\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n\n ", "\n ", "\n"])), function (props) {
|
|
14890
14923
|
return props.size === 'mini' && styled.css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n width: 394px;\n height: 99px;\n "])));
|
|
14891
14924
|
}, function (props) {
|
|
14892
14925
|
return props.size === 'small' && styled.css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n width: 394px;\n height: 131px;\n "])));
|
|
14893
14926
|
}, function (props) {
|
|
14894
|
-
return props.size === 'medium' && styled.css(_templateObject4$
|
|
14927
|
+
return props.size === 'medium' && styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n width: 394px;\n "])));
|
|
14895
14928
|
}, function (props) {
|
|
14896
|
-
return props.size === 'big' && styled.css(_templateObject5$
|
|
14929
|
+
return props.size === 'big' && styled.css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n width: 414px;\n height: 324px;\n "])));
|
|
14897
14930
|
}, function (props) {
|
|
14898
14931
|
return props.borderType === 'info' && styled.css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n border-left-color: #4d6dbe;\n "])));
|
|
14899
14932
|
}, function (props) {
|
|
@@ -14915,7 +14948,7 @@ var Card = function Card(_ref) {
|
|
|
14915
14948
|
return React__default.createElement(Container$a, Object.assign({}, rest), children);
|
|
14916
14949
|
};
|
|
14917
14950
|
|
|
14918
|
-
var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$
|
|
14951
|
+
var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$j, _templateObject5$i, _templateObject6$f;
|
|
14919
14952
|
var Container$b = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n border-radius: 4px;\n width: ", ";\n height: 88px;\n border: 1px solid transparent;\n position: relative;\n\n ", "\n\n ", "\n\n ", "\n\n svg {\n cursor: pointer;\n position: absolute;\n top: 14px;\n right: 14px;\n width: 13px;\n height: 13px;\n }\n"])), function (props) {
|
|
14920
14953
|
return props.size === 'large' ? '837px' : '460px';
|
|
14921
14954
|
}, function (props) {
|
|
@@ -14923,9 +14956,9 @@ var Container$b = styled__default.div(_templateObject$r || (_templateObject$r =
|
|
|
14923
14956
|
}, function (props) {
|
|
14924
14957
|
return props.color === 'error' && styled.css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n background-color: #fff6f6;\n opacity: 1;\n border-color: #973937;\n h4 {\n color: #973937;\n }\n p {\n color: #973937;\n }\n "])));
|
|
14925
14958
|
}, function (props) {
|
|
14926
|
-
return props.color === 'warning' && styled.css(_templateObject4$
|
|
14959
|
+
return props.color === 'warning' && styled.css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n background-color: #fffaf3;\n opacity: 1;\n border-color: #ccbea0;\n h4 {\n color: #7a4d05;\n }\n p {\n color: #7a4d05cc;\n }\n "])));
|
|
14927
14960
|
});
|
|
14928
|
-
var IconContainer$2 = styled__default.div(_templateObject5$
|
|
14961
|
+
var IconContainer$2 = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 14px 14px 0 0;\n margin: 0;\n"])));
|
|
14929
14962
|
var IconContent = styled__default.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n width: 100%;\n padding: 13px 0 21px 28px;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n h4 {\n margin-bottom: 7px;\n font-size: 18p;\n }\n p {\n margin: 0;\n font-size: 14px;\n max-width: 380px;\n }\n"])));
|
|
14930
14963
|
|
|
14931
14964
|
var Toast = function Toast(props) {
|
|
@@ -15044,12 +15077,12 @@ var CalendarInterval = function CalendarInterval(props) {
|
|
|
15044
15077
|
})));
|
|
15045
15078
|
};
|
|
15046
15079
|
|
|
15047
|
-
var _templateObject$t, _templateObject2$m, _templateObject3$l, _templateObject4$
|
|
15080
|
+
var _templateObject$t, _templateObject2$m, _templateObject3$l, _templateObject4$k, _templateObject5$j, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$7, _templateObject10$7, _templateObject11$4;
|
|
15048
15081
|
var Container$d = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 300px;\n position: absolute;\n padding: 14px;\n"])));
|
|
15049
15082
|
var Header$3 = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
15050
15083
|
var HeaderImage = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n width: 43px;\n height: 44px;\n background-color: #ebebeb;\n"])));
|
|
15051
|
-
var HeaderContent = styled__default.div(_templateObject4$
|
|
15052
|
-
var MainContent = styled__default.div(_templateObject5$
|
|
15084
|
+
var HeaderContent = styled__default.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n"])));
|
|
15085
|
+
var MainContent = styled__default.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n margin-top: 8px;\n"])));
|
|
15053
15086
|
var HeaderLine = styled__default.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 14px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15054
15087
|
return props.height;
|
|
15055
15088
|
}, function (props) {
|
|
@@ -15096,7 +15129,7 @@ var Template1 = function Template1(props) {
|
|
|
15096
15129
|
})));
|
|
15097
15130
|
};
|
|
15098
15131
|
|
|
15099
|
-
var _templateObject$u, _templateObject2$n, _templateObject3$m, _templateObject4$
|
|
15132
|
+
var _templateObject$u, _templateObject2$n, _templateObject3$m, _templateObject4$l, _templateObject5$k;
|
|
15100
15133
|
var HeaderLine$1 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 14px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15101
15134
|
return props.height;
|
|
15102
15135
|
}, function (props) {
|
|
@@ -15104,17 +15137,17 @@ var HeaderLine$1 = styled__default.div(_templateObject$u || (_templateObject$u =
|
|
|
15104
15137
|
}, function (props) {
|
|
15105
15138
|
return props.size === 'small' && styled.css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15106
15139
|
}, function (props) {
|
|
15107
|
-
return props.size === 'medium' && styled.css(_templateObject4$
|
|
15140
|
+
return props.size === 'medium' && styled.css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n width: 45%;\n "])));
|
|
15108
15141
|
}, function (props) {
|
|
15109
|
-
return props.size === 'large' && styled.css(_templateObject5$
|
|
15142
|
+
return props.size === 'large' && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n width: 75%;\n "])));
|
|
15110
15143
|
});
|
|
15111
15144
|
|
|
15112
|
-
var _templateObject$v, _templateObject2$o, _templateObject3$n, _templateObject4$
|
|
15145
|
+
var _templateObject$v, _templateObject2$o, _templateObject3$n, _templateObject4$m, _templateObject5$l, _templateObject6$h, _templateObject7$d, _templateObject8$9;
|
|
15113
15146
|
var Container$e = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-height: 100%;\n position: absolute;\n padding: 14px;\n"])));
|
|
15114
15147
|
var Template2Container = styled__default(Container$e)(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n background: #fff;\n border: 2px solid #ebebeb;\n"])));
|
|
15115
15148
|
var Header$4 = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
15116
|
-
var HeaderImage$1 = styled__default.div(_templateObject4$
|
|
15117
|
-
var HeaderContent$1 = styled__default.div(_templateObject5$
|
|
15149
|
+
var HeaderImage$1 = styled__default.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n width: 43px;\n height: 44px;\n background-color: #ebebeb;\n"])));
|
|
15150
|
+
var HeaderContent$1 = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n"])));
|
|
15118
15151
|
var MainContent$1 = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n margin-top: 8px;\n"])));
|
|
15119
15152
|
var MainLine$1 = styled__default(HeaderLine$1)(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n margin-bottom: 14px;\n margin-left: 0;\n"])));
|
|
15120
15153
|
var HeaderLine$2 = styled__default(HeaderLine$1)(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose([""])));
|
|
@@ -15172,16 +15205,16 @@ var Template3 = function Template3(props) {
|
|
|
15172
15205
|
}));
|
|
15173
15206
|
};
|
|
15174
15207
|
|
|
15175
|
-
var _templateObject$x, _templateObject2$q, _templateObject3$p, _templateObject4$
|
|
15208
|
+
var _templateObject$x, _templateObject2$q, _templateObject3$p, _templateObject4$n, _templateObject5$m, _templateObject6$i, _templateObject7$e, _templateObject8$a;
|
|
15176
15209
|
var Container$g = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-height: 100%;\n position: absolute;\n padding: 14px;\n"])));
|
|
15177
15210
|
var HeaderLine$3 = styled__default.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 14px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15178
15211
|
return props.height;
|
|
15179
15212
|
}, function (props) {
|
|
15180
15213
|
return props.size === 'mini' && styled.css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 15%;\n "])));
|
|
15181
15214
|
}, function (props) {
|
|
15182
|
-
return props.size === 'small' && styled.css(_templateObject4$
|
|
15215
|
+
return props.size === 'small' && styled.css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15183
15216
|
}, function (props) {
|
|
15184
|
-
return props.size === 'medium' && styled.css(_templateObject5$
|
|
15217
|
+
return props.size === 'medium' && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n width: 45%;\n "])));
|
|
15185
15218
|
}, function (props) {
|
|
15186
15219
|
return props.size === 'large' && styled.css(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n width: 75%;\n "])));
|
|
15187
15220
|
});
|
|
@@ -15239,15 +15272,15 @@ var Template4 = function Template4(props) {
|
|
|
15239
15272
|
}));
|
|
15240
15273
|
};
|
|
15241
15274
|
|
|
15242
|
-
var _templateObject$y, _templateObject2$r, _templateObject3$q, _templateObject4$
|
|
15275
|
+
var _templateObject$y, _templateObject2$r, _templateObject3$q, _templateObject4$o, _templateObject5$n, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$8;
|
|
15243
15276
|
var Container$h = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 746px;\n height: 169px;\n border: 1px solid #e6e6e7;\n border-radius: 4px;\n padding: 14px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
15244
15277
|
var Circle = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n width: 141px;\n height: 141px;\n background-color: #dddedf;\n border-radius: 50%;\n"])));
|
|
15245
15278
|
var HeaderLine$4 = styled__default.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 14px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15246
15279
|
return props.height;
|
|
15247
15280
|
}, function (props) {
|
|
15248
|
-
return props.size === 'mini' && styled.css(_templateObject4$
|
|
15281
|
+
return props.size === 'mini' && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n width: 15%;\n "])));
|
|
15249
15282
|
}, function (props) {
|
|
15250
|
-
return props.size === 'small' && styled.css(_templateObject5$
|
|
15283
|
+
return props.size === 'small' && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15251
15284
|
}, function (props) {
|
|
15252
15285
|
return props.size === 'medium' && styled.css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n width: 45%;\n "])));
|
|
15253
15286
|
}, function (props) {
|
|
@@ -15287,14 +15320,14 @@ var Template5 = function Template5(props) {
|
|
|
15287
15320
|
})));
|
|
15288
15321
|
};
|
|
15289
15322
|
|
|
15290
|
-
var _templateObject$z, _templateObject2$s, _templateObject3$r, _templateObject4$
|
|
15323
|
+
var _templateObject$z, _templateObject2$s, _templateObject3$r, _templateObject4$p, _templateObject5$o, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$9;
|
|
15291
15324
|
var Container$i = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n width: 395px;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #f5f5f5;\n"])));
|
|
15292
15325
|
var Header$5 = styled__default.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 14px;\n"])));
|
|
15293
15326
|
var Footer$3 = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n width: 100%;\n border-top: 1px solid #b1b1b3;\n height: 50px;\n"])));
|
|
15294
|
-
var HeaderLine$5 = styled__default.div(_templateObject4$
|
|
15327
|
+
var HeaderLine$5 = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 14px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15295
15328
|
return props.height;
|
|
15296
15329
|
}, function (props) {
|
|
15297
|
-
return props.size === 'mini' && styled.css(_templateObject5$
|
|
15330
|
+
return props.size === 'mini' && styled.css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n width: 15%;\n "])));
|
|
15298
15331
|
}, function (props) {
|
|
15299
15332
|
return props.size === 'small' && styled.css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15300
15333
|
}, function (props) {
|
|
@@ -15330,15 +15363,15 @@ var Template6 = function Template6(props) {
|
|
|
15330
15363
|
})));
|
|
15331
15364
|
};
|
|
15332
15365
|
|
|
15333
|
-
var _templateObject$A, _templateObject2$t, _templateObject3$s, _templateObject4$
|
|
15366
|
+
var _templateObject$A, _templateObject2$t, _templateObject3$s, _templateObject4$q, _templateObject5$p, _templateObject6$l, _templateObject7$h, _templateObject8$d, _templateObject9$a, _templateObject10$8;
|
|
15334
15367
|
var Container$j = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n width: 395px;\n height: 110px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
|
|
15335
15368
|
var Header$6 = styled__default.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 14px;\n width: 100%;\n"])));
|
|
15336
15369
|
var HeaderLine$6 = styled__default.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 14px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15337
15370
|
return props.height;
|
|
15338
15371
|
}, function (props) {
|
|
15339
|
-
return props.size === 'mini' && styled.css(_templateObject4$
|
|
15372
|
+
return props.size === 'mini' && styled.css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n width: 15%;\n "])));
|
|
15340
15373
|
}, function (props) {
|
|
15341
|
-
return props.size === 'small' && styled.css(_templateObject5$
|
|
15374
|
+
return props.size === 'small' && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15342
15375
|
}, function (props) {
|
|
15343
15376
|
return props.size === 'medium' && styled.css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n width: 45%;\n "])));
|
|
15344
15377
|
}, function (props) {
|
|
@@ -15364,15 +15397,15 @@ var Template7 = function Template7(props) {
|
|
|
15364
15397
|
})), React__default.createElement(Main, null, React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null)));
|
|
15365
15398
|
};
|
|
15366
15399
|
|
|
15367
|
-
var _templateObject$B, _templateObject2$u, _templateObject3$t, _templateObject4$
|
|
15400
|
+
var _templateObject$B, _templateObject2$u, _templateObject3$t, _templateObject4$r, _templateObject5$q, _templateObject6$m, _templateObject7$i, _templateObject8$e, _templateObject9$b;
|
|
15368
15401
|
var Container$k = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n width: 395px;\n height: 110px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
|
|
15369
15402
|
var Header$7 = styled__default.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 14px;\n width: 100%;\n"])));
|
|
15370
15403
|
var HeaderLine$7 = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 14px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15371
15404
|
return props.height;
|
|
15372
15405
|
}, function (props) {
|
|
15373
|
-
return props.size === 'mini' && styled.css(_templateObject4$
|
|
15406
|
+
return props.size === 'mini' && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n width: 15%;\n "])));
|
|
15374
15407
|
}, function (props) {
|
|
15375
|
-
return props.size === 'small' && styled.css(_templateObject5$
|
|
15408
|
+
return props.size === 'small' && styled.css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15376
15409
|
}, function (props) {
|
|
15377
15410
|
return props.size === 'medium' && styled.css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n width: 45%;\n "])));
|
|
15378
15411
|
}, function (props) {
|
|
@@ -15407,15 +15440,15 @@ var Template8 = function Template8(props) {
|
|
|
15407
15440
|
})));
|
|
15408
15441
|
};
|
|
15409
15442
|
|
|
15410
|
-
var _templateObject$C, _templateObject2$v, _templateObject3$u, _templateObject4$
|
|
15443
|
+
var _templateObject$C, _templateObject2$v, _templateObject3$u, _templateObject4$s, _templateObject5$r, _templateObject6$n, _templateObject7$j, _templateObject8$f, _templateObject9$c, _templateObject10$9;
|
|
15411
15444
|
var Container$l = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n width: 395px;\n height: 245px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
|
|
15412
15445
|
var Header$8 = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 14px;\n width: 100%;\n"])));
|
|
15413
15446
|
var HeaderLine$8 = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 7px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15414
15447
|
return props.height;
|
|
15415
15448
|
}, function (props) {
|
|
15416
|
-
return props.size === 'mini' && styled.css(_templateObject4$
|
|
15449
|
+
return props.size === 'mini' && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n width: 15%;\n "])));
|
|
15417
15450
|
}, function (props) {
|
|
15418
|
-
return props.size === 'small' && styled.css(_templateObject5$
|
|
15451
|
+
return props.size === 'small' && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15419
15452
|
}, function (props) {
|
|
15420
15453
|
return props.size === 'medium' && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n width: 45%;\n "])));
|
|
15421
15454
|
}, function (props) {
|
|
@@ -15446,15 +15479,15 @@ var Template8$1 = function Template8(props) {
|
|
|
15446
15479
|
})), React__default.createElement(Main$2, null, React__default.createElement(Circle$2, null)));
|
|
15447
15480
|
};
|
|
15448
15481
|
|
|
15449
|
-
var _templateObject$D, _templateObject2$w, _templateObject3$v, _templateObject4$
|
|
15482
|
+
var _templateObject$D, _templateObject2$w, _templateObject3$v, _templateObject4$t, _templateObject5$s, _templateObject6$o, _templateObject7$k, _templateObject8$g, _templateObject9$d, _templateObject10$a, _templateObject11$5;
|
|
15450
15483
|
var Container$m = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n width: 395px;\n height: 245px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
|
|
15451
15484
|
var Header$9 = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 14px;\n width: 100%;\n"])));
|
|
15452
15485
|
var HeaderLine$9 = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n height: ", ";\n background-color: #ebebeb;\n margin-left: 7px;\n\n & + div {\n margin-top: 7px;\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
15453
15486
|
return props.height;
|
|
15454
15487
|
}, function (props) {
|
|
15455
|
-
return props.size === 'mini' && styled.css(_templateObject4$
|
|
15488
|
+
return props.size === 'mini' && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n width: 15%;\n "])));
|
|
15456
15489
|
}, function (props) {
|
|
15457
|
-
return props.size === 'small' && styled.css(_templateObject5$
|
|
15490
|
+
return props.size === 'small' && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n width: 25%;\n "])));
|
|
15458
15491
|
}, function (props) {
|
|
15459
15492
|
return props.size === 'medium' && styled.css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n width: 45%;\n "])));
|
|
15460
15493
|
}, function (props) {
|
|
@@ -15590,6 +15623,79 @@ var Placeholder = function Placeholder(props) {
|
|
|
15590
15623
|
}
|
|
15591
15624
|
};
|
|
15592
15625
|
|
|
15626
|
+
var _templateObject$E, _templateObject2$x, _templateObject3$w, _templateObject4$u, _templateObject5$t;
|
|
15627
|
+
var Image = styled__default.img(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 100%;\n"])));
|
|
15628
|
+
var Container$n = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n\n &,\n ", " {\n width: ", ";\n\n height: ", ";\n }\n"])), Image, function (_ref) {
|
|
15629
|
+
var width = _ref.width;
|
|
15630
|
+
|
|
15631
|
+
switch (typeof width) {
|
|
15632
|
+
case 'string':
|
|
15633
|
+
return width;
|
|
15634
|
+
|
|
15635
|
+
case 'number':
|
|
15636
|
+
return width + "px";
|
|
15637
|
+
|
|
15638
|
+
default:
|
|
15639
|
+
return 'auto';
|
|
15640
|
+
}
|
|
15641
|
+
}, function (_ref2) {
|
|
15642
|
+
var height = _ref2.height;
|
|
15643
|
+
|
|
15644
|
+
switch (typeof height) {
|
|
15645
|
+
case 'string':
|
|
15646
|
+
return height;
|
|
15647
|
+
|
|
15648
|
+
case 'number':
|
|
15649
|
+
return height + "px";
|
|
15650
|
+
|
|
15651
|
+
default:
|
|
15652
|
+
return 'auto';
|
|
15653
|
+
}
|
|
15654
|
+
});
|
|
15655
|
+
var Dimmer = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s;\n cursor: pointer;\n\n :hover {\n opacity: 1;\n }\n"])), function (_ref3) {
|
|
15656
|
+
var theme = _ref3.theme;
|
|
15657
|
+
return theme.getColor('greyishBlue', 50);
|
|
15658
|
+
});
|
|
15659
|
+
var Button$4 = styled__default(Button$1)(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n"])), function (_ref4) {
|
|
15660
|
+
var theme = _ref4.theme;
|
|
15661
|
+
return theme.getColor('white', 50);
|
|
15662
|
+
});
|
|
15663
|
+
var ModalContent = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n\n img {\n max-height: 100%;\n max-width: 100%;\n }\n"])));
|
|
15664
|
+
|
|
15665
|
+
var _excluded$3 = ["src", "defaultClickOptions"];
|
|
15666
|
+
|
|
15667
|
+
var Zoom = function Zoom(props) {
|
|
15668
|
+
var src = props.src,
|
|
15669
|
+
imgProps = _objectWithoutPropertiesLoose(props, _excluded$3);
|
|
15670
|
+
|
|
15671
|
+
var _useState = React.useState(false),
|
|
15672
|
+
modalOpened = _useState[0],
|
|
15673
|
+
setModalOpened = _useState[1];
|
|
15674
|
+
|
|
15675
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$n, Object.assign({}, imgProps, {
|
|
15676
|
+
onClick: function onClick() {
|
|
15677
|
+
return setModalOpened(true);
|
|
15678
|
+
}
|
|
15679
|
+
}), React__default.createElement(Image, {
|
|
15680
|
+
src: src,
|
|
15681
|
+
alt: 'zoom'
|
|
15682
|
+
}), React__default.createElement(Dimmer, null, React__default.createElement(Button$4, {
|
|
15683
|
+
content: 'Zoom',
|
|
15684
|
+
color: 'white',
|
|
15685
|
+
onClick: function onClick() {
|
|
15686
|
+
return setModalOpened(true);
|
|
15687
|
+
}
|
|
15688
|
+
}))), React__default.createElement(Modal$1, {
|
|
15689
|
+
openState: [modalOpened, setModalOpened],
|
|
15690
|
+
size: 'large',
|
|
15691
|
+
title: 'Zoom',
|
|
15692
|
+
closeOnClickOutside: true
|
|
15693
|
+
}, React__default.createElement(ModalContent, null, React__default.createElement("img", {
|
|
15694
|
+
src: src,
|
|
15695
|
+
alt: 'zoom'
|
|
15696
|
+
}))));
|
|
15697
|
+
};
|
|
15698
|
+
|
|
15593
15699
|
var theme = {
|
|
15594
15700
|
sizes: sizes,
|
|
15595
15701
|
fontSizes: fontSizes
|
|
@@ -15599,14 +15705,14 @@ var theme$1 = {
|
|
|
15599
15705
|
button: theme
|
|
15600
15706
|
};
|
|
15601
15707
|
|
|
15602
|
-
var _templateObject$
|
|
15603
|
-
var FontStyles = styled.createGlobalStyle(_templateObject$
|
|
15708
|
+
var _templateObject$F;
|
|
15709
|
+
var FontStyles = styled.createGlobalStyle(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n"])));
|
|
15604
15710
|
|
|
15605
15711
|
var Globals = function Globals() {
|
|
15606
15712
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(FontStyles, null));
|
|
15607
15713
|
};
|
|
15608
15714
|
|
|
15609
|
-
var _templateObject$
|
|
15715
|
+
var _templateObject$G;
|
|
15610
15716
|
|
|
15611
15717
|
var getColor$1 = function getColor(color, opacity) {
|
|
15612
15718
|
if (opacity === void 0) {
|
|
@@ -15621,7 +15727,7 @@ var useTypography = function useTypography(typography) {
|
|
|
15621
15727
|
fontFamily = _typographies$typogra.fontFamily,
|
|
15622
15728
|
fontWeight = _typographies$typogra.fontWeight,
|
|
15623
15729
|
fontSize = _typographies$typogra.fontSize;
|
|
15624
|
-
return styled.css(_templateObject$
|
|
15730
|
+
return styled.css(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n "])), fontFamily, fontWeight, fontSize);
|
|
15625
15731
|
};
|
|
15626
15732
|
|
|
15627
15733
|
var isDarkColor = function isDarkColor(color, ifDark, ifLight) {
|
|
@@ -15693,5 +15799,6 @@ exports.MwScrollContainer = ScrollContainer;
|
|
|
15693
15799
|
exports.MwTabs = Tabs$1;
|
|
15694
15800
|
exports.MwTextArea = TextArea;
|
|
15695
15801
|
exports.MwToast = Toast;
|
|
15802
|
+
exports.MwZoom = Zoom;
|
|
15696
15803
|
exports.ThemeProvider = ThemeProvider;
|
|
15697
15804
|
//# sourceMappingURL=index.js.map
|