@commonsku/styles 1.17.8 → 1.17.10
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/index.cjs +317 -175
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +32 -1
- package/dist/index.mjs +313 -175
- package/dist/index.mjs.map +1 -1
- package/dist/styles/ErrorBoundary.d.ts.map +1 -1
- package/dist/styles/icons/CommonskuMainLogo.d.ts +12 -0
- package/dist/styles/icons/CommonskuMainLogo.d.ts.map +1 -0
- package/dist/styles/icons/EmptyStateArrow.d.ts +6 -0
- package/dist/styles/icons/EmptyStateArrow.d.ts.map +1 -0
- package/dist/styles/icons/SkubotLogo.d.ts +12 -0
- package/dist/styles/icons/SkubotLogo.d.ts.map +1 -0
- package/dist/styles/icons/SkubotSpinner.d.ts +13 -0
- package/dist/styles/icons/SkubotSpinner.d.ts.map +1 -0
- package/dist/styles/icons/index.d.ts +4 -0
- package/dist/styles/icons/index.d.ts.map +1 -1
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/ssr.d.ts +2 -0
- package/dist/utils/ssr.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -178,6 +178,7 @@ var win = typeof window !== 'undefined' ? window : {
|
|
|
178
178
|
pushState: function () { },
|
|
179
179
|
go: function () { },
|
|
180
180
|
back: function () { },
|
|
181
|
+
length: 1,
|
|
181
182
|
},
|
|
182
183
|
CustomEvent: function CustomEvent() {
|
|
183
184
|
return this;
|
|
@@ -213,11 +214,11 @@ var ssr = {
|
|
|
213
214
|
};
|
|
214
215
|
|
|
215
216
|
var media = {
|
|
216
|
-
xs: function (styles) { return "\n @media only screen and (min-width: 0px) {\n ".concat(typeof styles === 'string' ? css(templateObject_1$
|
|
217
|
-
sm: function (styles) { return "\n @media only screen and (min-width: 640px) {\n ".concat(typeof styles === 'string' ? css(templateObject_2$
|
|
217
|
+
xs: function (styles) { return "\n @media only screen and (min-width: 0px) {\n ".concat(typeof styles === 'string' ? css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n }\n "); },
|
|
218
|
+
sm: function (styles) { return "\n @media only screen and (min-width: 640px) {\n ".concat(typeof styles === 'string' ? css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n }\n "); },
|
|
218
219
|
md: function (styles) { return "\n @media only screen and (min-width: 768px) {\n ".concat(typeof styles === 'string' ? css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n }\n "); },
|
|
219
220
|
lg: function (styles) { return "\n @media only screen and (min-width: 1024px) {\n ".concat(typeof styles === 'string' ? css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n }\n "); },
|
|
220
|
-
xl: function (styles) { return "\n @media only screen and (min-width: 1280px) {\n ".concat(typeof styles === 'string' ? css(templateObject_5$
|
|
221
|
+
xl: function (styles) { return "\n @media only screen and (min-width: 1280px) {\n ".concat(typeof styles === 'string' ? css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n }\n "); },
|
|
221
222
|
};
|
|
222
223
|
var sizeMediaWidth = {
|
|
223
224
|
xs: '0px',
|
|
@@ -234,7 +235,7 @@ var sizeMedia = {
|
|
|
234
235
|
xl: "@media only screen and (min-width: ".concat(sizeMediaWidth.xl, ")"),
|
|
235
236
|
};
|
|
236
237
|
var sizes$1 = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
237
|
-
var templateObject_1$
|
|
238
|
+
var templateObject_1$Y, templateObject_2$z, templateObject_3$m, templateObject_4$g, templateObject_5$b;
|
|
238
239
|
|
|
239
240
|
var valIsValid = function (val) { return val !== null && val !== undefined && val !== ''; }; // not checking for 0
|
|
240
241
|
function isClientSide() {
|
|
@@ -386,7 +387,7 @@ var wait = function (time) {
|
|
|
386
387
|
};
|
|
387
388
|
};
|
|
388
389
|
|
|
389
|
-
var SharedStyles = css(templateObject_1$
|
|
390
|
+
var SharedStyles = css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n box-sizing: border-box;\n ", "\n"], ["\n box-sizing: border-box;\n ", "\n"])), function (p) { return map(pick(p, keys(SHARED_STYLE_MAPS)), function (v, k) {
|
|
390
391
|
return isUndefined(v) ? '' : SHARED_STYLE_MAPS[k](v);
|
|
391
392
|
}).join(''); });
|
|
392
393
|
var SHARED_STYLE_MAPS = {
|
|
@@ -428,8 +429,8 @@ var SHARED_STYLE_MAPS = {
|
|
|
428
429
|
// Custom Styles
|
|
429
430
|
custom: function (val) { return "".concat(val); },
|
|
430
431
|
};
|
|
431
|
-
var Wrapper$4 = styled.div(templateObject_2$
|
|
432
|
-
var templateObject_1$
|
|
432
|
+
var Wrapper$4 = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["", ""], ["", ""])), SharedStyles);
|
|
433
|
+
var templateObject_1$X, templateObject_2$y;
|
|
433
434
|
|
|
434
435
|
var primary1 = {
|
|
435
436
|
'10': '#F6FEFF',
|
|
@@ -604,7 +605,7 @@ errors['lightest'] = errors['10'];
|
|
|
604
605
|
errors['light'] = errors['30'];
|
|
605
606
|
errors['dark'] = errors['70'];
|
|
606
607
|
errors['darkest'] = errors['90'];
|
|
607
|
-
var colors = {
|
|
608
|
+
var colors$1 = {
|
|
608
609
|
primary1: primary1,
|
|
609
610
|
secondary1: secondary1,
|
|
610
611
|
secondary2: secondary2,
|
|
@@ -836,7 +837,7 @@ var SVG$1 = styled.svg.attrs(function (p) {
|
|
|
836
837
|
viewBox: p.viewBox || defaultSize.viewBox,
|
|
837
838
|
};
|
|
838
839
|
})(function (p) {
|
|
839
|
-
return css(templateObject_1$
|
|
840
|
+
return css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), SharedStyles);
|
|
840
841
|
}, function (p) {
|
|
841
842
|
var styles = {};
|
|
842
843
|
var iconSizes = p.iconSizes || iconSize;
|
|
@@ -850,7 +851,7 @@ var SVG$1 = styled.svg.attrs(function (p) {
|
|
|
850
851
|
styles['cursor'] = p.pointer ? 'pointer' : undefined;
|
|
851
852
|
return styles;
|
|
852
853
|
});
|
|
853
|
-
var templateObject_1$
|
|
854
|
+
var templateObject_1$W;
|
|
854
855
|
|
|
855
856
|
function TableIcon(_a) {
|
|
856
857
|
var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Calculate" : _d, props = __rest(_a, ["color", "size", "altText"]);
|
|
@@ -1224,7 +1225,7 @@ function createFontStyles(p) {
|
|
|
1224
1225
|
return "\n --skufont-".concat(k, ": ").concat(fontFamilies[k], ";\n --font-family-").concat(k, ": ").concat([fontFamilies[k]].concat(fontFamilies['fallbacks']).join(','), ";\n ");
|
|
1225
1226
|
}).join('');
|
|
1226
1227
|
}
|
|
1227
|
-
var GlobalStyle = createGlobalStyle(templateObject_1$
|
|
1228
|
+
var GlobalStyle = createGlobalStyle(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n:root {\n ", "\n ", "\n ", "\n}\n&&& {\n .commonsku-styles-select__input {\n input {\n height: auto;\n }\n }\n ", "\n}\n"], ["\n:root {\n ", "\n ", "\n ", "\n}\n&&& {\n .commonsku-styles-select__input {\n input {\n height: auto;\n }\n }\n ", "\n}\n"])), function (p) { return createFontStyles(p); }, function (p) { return parseColorVars(_.get(p, ['theme', 'colors'], {}), ''); }, function (p) {
|
|
1228
1229
|
if (!p.additionalStyles) {
|
|
1229
1230
|
return null;
|
|
1230
1231
|
}
|
|
@@ -1238,7 +1239,7 @@ var GlobalStyle = createGlobalStyle(templateObject_1$U || (templateObject_1$U =
|
|
|
1238
1239
|
return null;
|
|
1239
1240
|
}
|
|
1240
1241
|
}, datepickerStyles);
|
|
1241
|
-
var templateObject_1$
|
|
1242
|
+
var templateObject_1$V;
|
|
1242
1243
|
|
|
1243
1244
|
var fontFamilies = {
|
|
1244
1245
|
skuFontRegular: "'skufont-regular'",
|
|
@@ -1335,7 +1336,7 @@ var fontStyles = {
|
|
|
1335
1336
|
}
|
|
1336
1337
|
};
|
|
1337
1338
|
var themeOptions = {
|
|
1338
|
-
colors: colors,
|
|
1339
|
+
colors: colors$1,
|
|
1339
1340
|
fonts: fonts,
|
|
1340
1341
|
fontFamily: "".concat(fonts.join(",")),
|
|
1341
1342
|
fontFamilies: fontFamilies,
|
|
@@ -1363,7 +1364,7 @@ function getColor$1(color, def) {
|
|
|
1363
1364
|
if (!color) {
|
|
1364
1365
|
return '';
|
|
1365
1366
|
}
|
|
1366
|
-
return (_a = _.get(colors, color, _.get(colors, def || '', def))) !== null && _a !== void 0 ? _a : '';
|
|
1367
|
+
return (_a = _.get(colors$1, color, _.get(colors$1, def || '', def))) !== null && _a !== void 0 ? _a : '';
|
|
1367
1368
|
}
|
|
1368
1369
|
function getFontStyle(value, def) {
|
|
1369
1370
|
var _a;
|
|
@@ -1461,7 +1462,7 @@ function CircleProgressIcon(_a) {
|
|
|
1461
1462
|
var dashOffset = dashArray - dashArray * percentage / 100;
|
|
1462
1463
|
return React.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes, "aria-labelledby": "CircleProgressIcon" }, props),
|
|
1463
1464
|
React.createElement("title", { id: "CircleProgressIcon" }, text !== '' ? "".concat(text, " stage") : percentage ? "".concat(percentage, "% completed") : altText),
|
|
1464
|
-
React.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors.disabledButtonBorder, } }),
|
|
1465
|
+
React.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors$1.disabledButtonBorder, } }),
|
|
1465
1466
|
React.createElement("circle", { className: "circle-progress", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"), style: {
|
|
1466
1467
|
strokeDasharray: dashArray,
|
|
1467
1468
|
strokeDashoffset: dashOffset,
|
|
@@ -1473,14 +1474,14 @@ function CircleProgressIcon(_a) {
|
|
|
1473
1474
|
React.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: size === "small" || size === "tiny" ? ".6em" : size === "medium" ? ".8em" : "1em", fontWeight: 'bold', fill: textColor }, textStyle) }, text || "".concat(percentage, "%")));
|
|
1474
1475
|
}
|
|
1475
1476
|
|
|
1476
|
-
var SVG = styled.svg(templateObject_1$
|
|
1477
|
-
var templateObject_1$
|
|
1477
|
+
var SVG = styled.svg(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), SharedStyles);
|
|
1478
|
+
var templateObject_1$U;
|
|
1478
1479
|
|
|
1479
1480
|
function Loading(_a) {
|
|
1480
1481
|
var _b = _a.height, height = _b === void 0 ? 50 : _b, width = _a.width, _c = _a.animationDuration, animationDuration = _c === void 0 ? 1000 : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 14 : _d, _e = _a.barRadius, barRadius = _e === void 0 ? 2 : _e, _f = _a.colorful, colorful = _f === void 0 ? false : _f, _g = _a.bars, bars = _g === void 0 ? 4 : _g, _h = _a.viewBox, viewBox = _h === void 0 ? "10 0 51 50" : _h; _a.rotate; var startColor = _a.startColor, endColor = _a.endColor, props = __rest(_a, ["height", "width", "animationDuration", "barWidth", "barRadius", "colorful", "bars", "viewBox", "rotate", "startColor", "endColor"]);
|
|
1481
1482
|
var colorGradient = colorful
|
|
1482
|
-
? generateColor(startColor || colors.special1, endColor || colors.primary, bars)
|
|
1483
|
-
: generateColor(startColor || colors.primary, endColor || colors.primary0, bars);
|
|
1483
|
+
? generateColor(startColor || colors$1.special1, endColor || colors$1.primary, bars)
|
|
1484
|
+
: generateColor(startColor || colors$1.primary, endColor || colors$1.primary0, bars);
|
|
1484
1485
|
var generateBar = function (v) {
|
|
1485
1486
|
return (React.createElement("rect", { key: "bar_".concat(v), x: 19 * v, y: "0", width: barWidth || 14, height: height, fill: "#".concat(colorGradient[v]), rx: barRadius },
|
|
1486
1487
|
React.createElement("animate", { attributeName: "height", values: "50;10;50", begin: "".concat(v * 0.2, "s"), dur: "".concat(animationDuration / 1000, "s"), repeatCount: "indefinite" })));
|
|
@@ -1495,6 +1496,99 @@ function Loading(_a) {
|
|
|
1495
1496
|
return (React.createElement(SVG, __assign({ width: width ? "".concat(width, "px") : "100%", height: height ? "".concat(height, "px") : "100%", viewBox: viewBox, transform: "scale(1, -1) translate(0, -1)" }, props), generateBars()));
|
|
1496
1497
|
}
|
|
1497
1498
|
|
|
1499
|
+
var logoSizes = {
|
|
1500
|
+
small: {
|
|
1501
|
+
width: 24
|
|
1502
|
+
},
|
|
1503
|
+
medium: {
|
|
1504
|
+
width: 64
|
|
1505
|
+
},
|
|
1506
|
+
large: {
|
|
1507
|
+
width: 120
|
|
1508
|
+
},
|
|
1509
|
+
default: {
|
|
1510
|
+
width: 120
|
|
1511
|
+
}
|
|
1512
|
+
};
|
|
1513
|
+
var containerSizes = {
|
|
1514
|
+
small: {
|
|
1515
|
+
width: 48
|
|
1516
|
+
},
|
|
1517
|
+
medium: {
|
|
1518
|
+
width: 100
|
|
1519
|
+
},
|
|
1520
|
+
large: {
|
|
1521
|
+
width: 200
|
|
1522
|
+
},
|
|
1523
|
+
default: {
|
|
1524
|
+
width: 200
|
|
1525
|
+
}
|
|
1526
|
+
};
|
|
1527
|
+
var rotator = keyframes(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n"])));
|
|
1528
|
+
var colors = keyframes(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n 0% {\n stroke: #02c0da;\n }\n 25% {\n stroke: #02c0da;\n }\n 50% {\n stroke: #02c0da;\n }\n 75% {\n stroke: #02c0da;\n }\n 100% {\n stroke: #02c0da;\n }\n"], ["\n 0% {\n stroke: #02c0da;\n }\n 25% {\n stroke: #02c0da;\n }\n 50% {\n stroke: #02c0da;\n }\n 75% {\n stroke: #02c0da;\n }\n 100% {\n stroke: #02c0da;\n }\n"])));
|
|
1529
|
+
var dash = keyframes(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n"], ["\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n"])));
|
|
1530
|
+
var Container$1 = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n position: relative;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: relative;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (props) { return props.size + 'px' || '200px'; }, function (props) { return props.size + 'px' || '200px'; });
|
|
1531
|
+
var Spinner$1 = styled.svg(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n animation: ", " 1.4s linear infinite;\n"], ["\n animation: ", " 1.4s linear infinite;\n"])), rotator);
|
|
1532
|
+
var Path = styled.circle(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n fill: none;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-dasharray: 187;\n stroke-dashoffset: 0;\n transform-origin: center;\n animation: ", " 1.4s ease-in-out infinite, ", " 5.6s ease-in-out infinite;\n"], ["\n fill: none;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-dasharray: 187;\n stroke-dashoffset: 0;\n transform-origin: center;\n animation: ", " 1.4s ease-in-out infinite, ", " 5.6s ease-in-out infinite;\n"])), dash, colors);
|
|
1533
|
+
var Logo = styled.svg(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n"], ["\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n"])));
|
|
1534
|
+
function SkubotSpinner(_a) {
|
|
1535
|
+
var _b = _a.color, color = _b === void 0 ? '#00C1DE' : _b, _c = _a.size, size = _c === void 0 ? "default" : _c; _a.altText; var _e = _a.skubot, skubot = _e === void 0 ? true : _e; __rest(_a, ["color", "size", "altText", "skubot"]);
|
|
1536
|
+
return (React.createElement(Container$1, { size: containerSizes[size] ? containerSizes[size].width : 200 },
|
|
1537
|
+
React.createElement(Spinner$1, { width: '200px', height: '200px', viewBox: "0 0 66 66", xmlns: "http://www.w3.org/2000/svg" },
|
|
1538
|
+
React.createElement(Path, { cx: "33", cy: "33", r: "30" })),
|
|
1539
|
+
skubot ?
|
|
1540
|
+
React.createElement(Logo, { width: logoSizes[size] ? logoSizes[size].width : 120, viewBox: "0 0 100 54.9" },
|
|
1541
|
+
React.createElement("circle", { fill: color, cx: "2.7", cy: "30.2", r: "2.7" }),
|
|
1542
|
+
React.createElement("circle", { fill: color, cx: "97.3", cy: "30.2", r: "2.7" }),
|
|
1543
|
+
React.createElement("path", { fill: color, d: "M91,28.5c-0.1-2.3-0.4-4.6-0.8-6.8c-0.2-0.9-1-1.5-1.9-1.5h-6.8V9.7c0-1.4-0.8-2.5-1.7-2.5\n c-4.8-0.9-9.6-1.5-14.5-2V3.4c0-0.9-0.6-1.8-1.6-2C59.2,0.5,54.6,0,50,0c-4.6,0-9.2,0.5-13.6,1.4c-0.9,0.2-1.6,1-1.6,2v1.9\n c-4.8,0.4-9.7,1.1-14.5,2c-0.5,0-0.9,0.3-1.2,0.7c-0.3,0.4-0.5,1.1-0.5,1.7v10.4h-6.8c-0.9,0-1.8,0.6-1.9,1.5\n C9.4,24,9.1,26.2,9,28.5V31c0.1,2.3,0.4,4.6,0.8,6.8c0.2,0.9,1,1.5,1.9,1.5h6.8V50c0,1.4,0.8,2.5,1.7,2.5\n c9.8,1.6,19.8,2.5,29.7,2.5c9.9,0,19.8-0.8,29.7-2.5c0.5,0,0.9-0.3,1.2-0.7c0.3-0.4,0.5-1.1,0.5-1.7V39.4h6.8\n c0.9,0,1.8-0.6,1.9-1.5c0.5-2.3,0.8-4.5,0.8-6.8V28.5z M76.6,45.7c0,1.1-0.9,2-2,2c-16.3,2.5-32.9,2.5-49.3,0c-0.5,0-1-0.2-1.4-0.6\n c-0.4-0.4-0.6-0.8-0.6-1.4V13.8c0-1.1,0.9-2,2-2C33.5,10.6,41.8,10,50,10c8.2,0,16.5,0.6,24.6,1.8c0.5,0,1,0.2,1.4,0.6\n c0.4,0.4,0.6,0.8,0.6,1.4V45.7z" }),
|
|
1544
|
+
React.createElement("path", { fill: color, d: "M37.2,39L37.2,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C42.1,36.8,39.9,39,37.2,39z" }),
|
|
1545
|
+
React.createElement("path", { fill: color, d: "M62.8,39L62.8,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C67.8,36.8,65.5,39,62.8,39z" })) : null));
|
|
1546
|
+
}
|
|
1547
|
+
var templateObject_1$T, templateObject_2$x, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$a, templateObject_7$4;
|
|
1548
|
+
|
|
1549
|
+
function CommonskuMainLogo(_a) {
|
|
1550
|
+
var _b = _a.color, color = _b === void 0 ? '#00C1DE' : _b; _a.size; _a.altText; _a.width; __rest(_a, ["color", "size", "altText", "width"]);
|
|
1551
|
+
return (React.createElement("svg", { viewBox: "0 0 125 43.9" },
|
|
1552
|
+
React.createElement("g", null,
|
|
1553
|
+
React.createElement("path", { fill: color, d: "M1.8,33.7C3,32.5,4.4,31.9,6,31.9c0.9,0,1.7,0.2,2.5,0.6c0.8,0.4,1.3,0.8,1.7,1.2l0.5,0.6l-1.6,1.6\n\t\t\tc-0.1-0.1-0.2-0.3-0.4-0.5c-0.2-0.2-0.5-0.4-1-0.7c-0.5-0.3-1.1-0.5-1.7-0.5c-1,0-1.8,0.4-2.5,1.1c-0.7,0.7-1.1,1.6-1.1,2.7\n\t\t\tc0,1.1,0.4,2,1.1,2.7C4.2,41.4,5,41.7,6,41.7c0.6,0,1.2-0.2,1.7-0.5c0.5-0.3,0.9-0.6,1.2-0.9l0.4-0.4l1.6,1.6\n\t\t\tc0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.3,0.3-0.6,0.6c-0.3,0.3-0.6,0.5-1,0.7c-0.3,0.2-0.8,0.4-1.3,0.6c-0.5,0.2-1.1,0.3-1.7,0.3\n\t\t\tc-1.6,0-3-0.6-4.2-1.8C0.6,40.9,0,39.5,0,37.9C0,36.3,0.6,34.9,1.8,33.7z" }),
|
|
1554
|
+
React.createElement("path", { fill: color, d: "M13.6,33.7c1.2-1.2,2.6-1.8,4.2-1.8c1.6,0,3,0.6,4.2,1.8c1.2,1.2,1.8,2.6,1.8,4.2c0,1.6-0.6,3-1.8,4.2\n\t\t\ts-2.6,1.8-4.2,1.8c-1.6,0-3-0.6-4.2-1.8s-1.8-2.6-1.8-4.2C11.9,36.3,12.5,34.9,13.6,33.7z M20.4,35.2c-0.7-0.7-1.6-1.1-2.5-1.1\n\t\t\tc-1,0-1.8,0.4-2.5,1.1c-0.7,0.7-1.1,1.6-1.1,2.7c0,1.1,0.4,2,1.1,2.7c0.7,0.7,1.6,1.1,2.5,1.1c1,0,1.8-0.4,2.5-1.1\n\t\t\tc0.7-0.7,1.1-1.6,1.1-2.7C21.5,36.8,21.1,35.9,20.4,35.2z" }),
|
|
1555
|
+
React.createElement("path", { fill: color, d: "M40.7,36.9c0-0.9-0.2-1.7-0.6-2.1c-0.4-0.5-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5\n\t\t\tv6.2h-2.4v-6.7c0-0.9-0.2-1.7-0.6-2.1c-0.4-0.5-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4V32.1h2.4\n\t\t\tv1.2c0.1-0.1,0.2-0.2,0.4-0.4c0.2-0.2,0.5-0.4,1.1-0.6c0.5-0.3,1.1-0.4,1.7-0.4c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.3,1,0.5\n\t\t\tc0.2,0.2,0.5,0.4,0.7,0.6c0.2,0.2,0.3,0.4,0.4,0.5l0.1,0.2c0,0,0.1-0.1,0.2-0.2c0.1-0.1,0.2-0.2,0.5-0.5c0.2-0.2,0.5-0.4,0.8-0.6\n\t\t\tc0.3-0.2,0.6-0.3,1.1-0.5c0.5-0.1,0.9-0.2,1.4-0.2c1.3,0,2.4,0.4,3.2,1.3c0.8,0.9,1.2,2.1,1.2,3.8v6.7h-2.4V36.9z" }),
|
|
1556
|
+
React.createElement("path", { fill: color, d: "M60.8,36.9c0-0.9-0.2-1.7-0.6-2.1s-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4\n\t\t\tv-6.7c0-0.9-0.2-1.7-0.6-2.1c-0.4-0.5-1-0.7-1.8-0.7c-0.7,0-1.4,0.3-1.9,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4V32.1h2.4v1.2\n\t\t\tc0.1-0.1,0.2-0.2,0.4-0.4c0.2-0.2,0.5-0.4,1.1-0.6c0.5-0.3,1.1-0.4,1.7-0.4c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.3,1,0.5\n\t\t\tc0.2,0.2,0.5,0.4,0.7,0.6c0.2,0.2,0.3,0.4,0.4,0.5l0.1,0.2c0,0,0.1-0.1,0.2-0.2c0.1-0.1,0.2-0.2,0.5-0.5c0.2-0.2,0.5-0.4,0.8-0.6\n\t\t\tc0.3-0.2,0.6-0.3,1.1-0.5c0.5-0.1,0.9-0.2,1.4-0.2c1.3,0,2.4,0.4,3.2,1.3c0.8,0.9,1.2,2.1,1.2,3.8v6.7h-2.4V36.9z" }),
|
|
1557
|
+
React.createElement("path", { fill: color, d: "M67,33.7c1.2-1.2,2.6-1.8,4.2-1.8c1.6,0,3,0.6,4.2,1.8c1.2,1.2,1.8,2.6,1.8,4.2c0,1.6-0.6,3-1.8,4.2\n\t\t\ts-2.6,1.8-4.2,1.8c-1.6,0-3-0.6-4.2-1.8c-1.2-1.2-1.8-2.6-1.8-4.2C65.2,36.3,65.8,34.9,67,33.7z M73.7,35.2\n\t\t\tc-0.7-0.7-1.6-1.1-2.5-1.1c-1,0-1.8,0.4-2.5,1.1c-0.7,0.7-1.1,1.6-1.1,2.7c0,1.1,0.4,2,1.1,2.7c0.7,0.7,1.6,1.1,2.5,1.1\n\t\t\tc1,0,1.8-0.4,2.5-1.1c0.7-0.7,1.1-1.6,1.1-2.7C74.8,36.8,74.4,35.9,73.7,35.2z" }),
|
|
1558
|
+
React.createElement("path", { fill: color, d: "M81.6,33.3l0.2-0.2c0.1-0.1,0.2-0.2,0.4-0.3c0.2-0.2,0.5-0.3,0.7-0.4c0.3-0.1,0.6-0.2,1-0.4\n\t\t\tc0.4-0.1,0.8-0.2,1.2-0.2c1.4,0,2.5,0.5,3.4,1.4c0.9,0.9,1.3,2.1,1.3,3.7v6.7h-2.4v-6.7c0-0.8-0.3-1.5-0.8-2.1\n\t\t\tc-0.5-0.5-1.2-0.8-2-0.8c-0.9,0-1.6,0.3-2.2,0.9c-0.5,0.6-0.8,1.4-0.8,2.5v6.2h-2.4V32.1h2.4V33.3z" }),
|
|
1559
|
+
React.createElement("path", { fill: color, d: "M98.3,35c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.4-0.3-0.7-0.4c-0.4-0.2-0.8-0.3-1.1-0.3\n\t\t\tc-0.5,0-0.9,0.1-1.2,0.4c-0.3,0.2-0.5,0.5-0.5,0.8c0,0.3,0.1,0.6,0.4,0.8c0.3,0.2,0.7,0.4,1.1,0.5c0.4,0.1,0.9,0.3,1.4,0.4\n\t\t\tc0.5,0.2,1,0.4,1.4,0.6c0.4,0.2,0.8,0.6,1.1,1c0.3,0.5,0.4,1,0.4,1.6c0,1-0.4,1.8-1.2,2.5c-0.8,0.7-1.8,1.1-3.1,1.1\n\t\t\tc-0.6,0-1.1-0.1-1.6-0.2c-0.5-0.1-0.9-0.3-1.3-0.5s-0.6-0.4-0.9-0.6c-0.2-0.2-0.4-0.4-0.5-0.5l-0.2-0.2l1.6-1.6\n\t\t\tc0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.2,0.5,0.4,1,0.6c0.5,0.3,1,0.4,1.6,0.4c0.6,0,1.1-0.1,1.4-0.4c0.3-0.3,0.5-0.6,0.5-1\n\t\t\tc0-0.3-0.1-0.6-0.4-0.8c-0.3-0.2-0.7-0.4-1.1-0.5c-0.4-0.1-0.9-0.3-1.4-0.4c-0.5-0.2-1-0.4-1.4-0.6c-0.4-0.2-0.8-0.6-1.1-1\n\t\t\tc-0.3-0.5-0.4-1-0.4-1.6c0-0.9,0.4-1.7,1.2-2.3c0.8-0.7,1.7-1,2.9-1c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.2,1.1,0.4\n\t\t\tc0.3,0.2,0.5,0.3,0.7,0.5c0.2,0.2,0.4,0.3,0.5,0.4l0.2,0.2L98.3,35z" }),
|
|
1560
|
+
React.createElement("path", { fill: color, d: "M108.3,36.9l4.8,6.7h-2.6l-3.7-5.2l-1.8,1.9v3.2h-2.4V0h2.4v37.3l4.9-5.2h2.9L108.3,36.9z" }),
|
|
1561
|
+
React.createElement("path", { fill: color, d: "M122.6,42.5l-0.2,0.2c-0.1,0.1-0.2,0.2-0.4,0.3c-0.2,0.2-0.5,0.3-0.7,0.4c-0.3,0.1-0.6,0.2-1,0.3\n\t\t\tc-0.4,0.1-0.8,0.2-1.2,0.2c-1.4,0-2.5-0.5-3.4-1.4c-0.9-0.9-1.3-2.1-1.3-3.7v-6.7h2.4v6.7c0,0.8,0.3,1.5,0.8,2.1\n\t\t\tc0.5,0.5,1.2,0.8,2,0.8c0.9,0,1.6-0.3,2.2-0.9c0.5-0.6,0.8-1.4,0.8-2.5v-6.2h2.4v11.5h-2.4V42.5z" })),
|
|
1562
|
+
React.createElement("g", null,
|
|
1563
|
+
React.createElement("rect", { x: "6.8", y: "0", fill: color, width: "5.1", height: "27.1" }),
|
|
1564
|
+
React.createElement("rect", { x: "16.5", y: "0", fill: color, width: "2.7", height: "27.1" }),
|
|
1565
|
+
React.createElement("rect", { x: "33.3", y: "0", fill: color, width: "5", height: "27.1" }),
|
|
1566
|
+
React.createElement("rect", { x: "47.8", y: "0", fill: color, width: "4", height: "27.1" }),
|
|
1567
|
+
React.createElement("rect", { x: "71.3", y: "0", fill: color, width: "5.9", height: "27.1" }),
|
|
1568
|
+
React.createElement("rect", { x: "94.2", y: "0", fill: color, width: "4", height: "27.1" }),
|
|
1569
|
+
React.createElement("rect", { x: "114.4", y: "0", fill: color, width: "4", height: "27.1" }),
|
|
1570
|
+
React.createElement("rect", { x: "22.4", y: "0", fill: color, width: "5.9", height: "27.1" }),
|
|
1571
|
+
React.createElement("rect", { x: "41.6", y: "0", fill: color, width: "2.9", height: "27.1" }),
|
|
1572
|
+
React.createElement("rect", { x: "56.3", y: "0", fill: color, width: "5.3", height: "27.1" }),
|
|
1573
|
+
React.createElement("rect", { x: "81.6", y: "0", fill: color, width: "2.9", height: "27.1" }),
|
|
1574
|
+
React.createElement("rect", { x: "1.2", y: "0", fill: color, width: "2.9", height: "27.1" }),
|
|
1575
|
+
React.createElement("rect", { x: "65.2", y: "0", fill: color, width: "2.9", height: "27.1" }),
|
|
1576
|
+
React.createElement("rect", { x: "87.4", y: "0", fill: color, width: "2.9", height: "27.1" }),
|
|
1577
|
+
React.createElement("rect", { x: "107.9", y: "0", fill: color, width: "2.9", height: "27.1" }),
|
|
1578
|
+
React.createElement("rect", { x: "122.1", y: "0", fill: color, width: "2.9", height: "27.1" }),
|
|
1579
|
+
React.createElement("path", { fill: color, d: "M105,27.1h-2.4V0h2.4V27.1z" }))));
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
function SkubotLogo(_a) {
|
|
1583
|
+
var _b = _a.color, color = _b === void 0 ? '#00C1DE' : _b, _c = _a.width, width = _c === void 0 ? 64 : _c, _d = _a.height, height = _d === void 0 ? 64 : _d; _a.altText; __rest(_a, ["color", "width", "height", "altText"]);
|
|
1584
|
+
return (React.createElement(SVG$1, { width: width, height: height, viewBox: "0 0 100 54.9" },
|
|
1585
|
+
React.createElement("circle", { fill: color, cx: "2.7", cy: "30.2", r: "2.7" }),
|
|
1586
|
+
React.createElement("circle", { fill: color, cx: "97.3", cy: "30.2", r: "2.7" }),
|
|
1587
|
+
React.createElement("path", { fill: color, d: "M91,28.5c-0.1-2.3-0.4-4.6-0.8-6.8c-0.2-0.9-1-1.5-1.9-1.5h-6.8V9.7c0-1.4-0.8-2.5-1.7-2.5\n c-4.8-0.9-9.6-1.5-14.5-2V3.4c0-0.9-0.6-1.8-1.6-2C59.2,0.5,54.6,0,50,0c-4.6,0-9.2,0.5-13.6,1.4c-0.9,0.2-1.6,1-1.6,2v1.9\n c-4.8,0.4-9.7,1.1-14.5,2c-0.5,0-0.9,0.3-1.2,0.7c-0.3,0.4-0.5,1.1-0.5,1.7v10.4h-6.8c-0.9,0-1.8,0.6-1.9,1.5\n C9.4,24,9.1,26.2,9,28.5V31c0.1,2.3,0.4,4.6,0.8,6.8c0.2,0.9,1,1.5,1.9,1.5h6.8V50c0,1.4,0.8,2.5,1.7,2.5\n c9.8,1.6,19.8,2.5,29.7,2.5c9.9,0,19.8-0.8,29.7-2.5c0.5,0,0.9-0.3,1.2-0.7c0.3-0.4,0.5-1.1,0.5-1.7V39.4h6.8\n c0.9,0,1.8-0.6,1.9-1.5c0.5-2.3,0.8-4.5,0.8-6.8V28.5z M76.6,45.7c0,1.1-0.9,2-2,2c-16.3,2.5-32.9,2.5-49.3,0c-0.5,0-1-0.2-1.4-0.6\n c-0.4-0.4-0.6-0.8-0.6-1.4V13.8c0-1.1,0.9-2,2-2C33.5,10.6,41.8,10,50,10c8.2,0,16.5,0.6,24.6,1.8c0.5,0,1,0.2,1.4,0.6\n c0.4,0.4,0.6,0.8,0.6,1.4V45.7z" }),
|
|
1588
|
+
React.createElement("path", { fill: color, d: "M37.2,39L37.2,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C42.1,36.8,39.9,39,37.2,39z" }),
|
|
1589
|
+
React.createElement("path", { fill: color, d: "M62.8,39L62.8,39c-2.7,0-4.9-2.2-4.9-4.9v-7.8c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v7.8\n C67.8,36.8,65.5,39,62.8,39z" })));
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1498
1592
|
function SalesArrowIcon(_a) {
|
|
1499
1593
|
var _b = _a.color, color = _b === void 0 ? green.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.direction, direction = _d === void 0 ? "up" : _d, _e = _a.altText, altText = _e === void 0 ? "Up" : _e, props = __rest(_a, ["color", "size", "direction", "altText"]);
|
|
1500
1594
|
if (direction === "down") {
|
|
@@ -2779,6 +2873,45 @@ function SlideInIcon(_a) {
|
|
|
2779
2873
|
React.createElement("path", { d: "M3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999ZM3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999Z", fill: color }));
|
|
2780
2874
|
}
|
|
2781
2875
|
|
|
2876
|
+
function EmptyStateArrowIcon(_a) {
|
|
2877
|
+
var _b = _a.direction, direction = _b === void 0 ? "Up" : _b; _a.altText; var props = __rest(_a, ["direction", "altText"]);
|
|
2878
|
+
var d1, d2, x1, x2, y1, y2;
|
|
2879
|
+
var arrowColor = teal['30'];
|
|
2880
|
+
switch (direction) {
|
|
2881
|
+
case "down":
|
|
2882
|
+
d1 = "m9.239 20.009 2.704.784c.037.011.077.011.114 0l2.704-.784c.164-.048.304.114.207.24l-2.818 3.68a.196.196 0 0 1-.3 0l-2.818-3.68c-.097-.125.043-.288.207-.24Z";
|
|
2883
|
+
d2 = "M5.15 0c5.411 2.2 6.084 16.033 6.084 21h1.57c0-5.275 0-18.5 6.246-21H5.15Z";
|
|
2884
|
+
x1 = 12.636;
|
|
2885
|
+
x2 = 12.636;
|
|
2886
|
+
y1 = 19.98;
|
|
2887
|
+
y2 = 0;
|
|
2888
|
+
break;
|
|
2889
|
+
case "up":
|
|
2890
|
+
d1 = "m14.761 3.991-2.704-.784a.205.205 0 0 0-.114 0L9.24 3.99c-.164.048-.304-.115-.207-.24L11.85.07a.196.196 0 0 1 .3 0l2.818 3.68c.097.126-.043.288-.207.24Z";
|
|
2891
|
+
d2 = "M18.85 24c-5.411-2.2-6.084-16.033-6.084-21h-1.57c0 5.276 0 18.5-6.246 21h13.9Z";
|
|
2892
|
+
x1 = 11.364;
|
|
2893
|
+
x2 = 11.364;
|
|
2894
|
+
y1 = 4.02;
|
|
2895
|
+
y2 = 24;
|
|
2896
|
+
break;
|
|
2897
|
+
case "up-right":
|
|
2898
|
+
d1 = "m22.406 2.203-1.173-.394a.145.145 0 0 0-.092 0l-1.173.394c-.134.044-.247-.108-.169-.227l1.266-1.91a.146.146 0 0 1 .244 0l1.265 1.91c.079.119-.035.271-.168.227Z";
|
|
2899
|
+
d2 = "M6.389 23.515C16.608 15.176 21.225 7.772 21.657 1.721l-.877-.064c.357 2.992-8.819 10.581-19.247 15.372l4.856 6.486Z";
|
|
2900
|
+
x1 = 21.05;
|
|
2901
|
+
x2 = 14.656;
|
|
2902
|
+
y1 = 2.11;
|
|
2903
|
+
y2 = 12.611;
|
|
2904
|
+
break;
|
|
2905
|
+
}
|
|
2906
|
+
return React.createElement(SVG$1, __assign({ height: 500, width: 500, viewBox: "0 0 633 633", "aria-labelledby": "Arrow" }, props),
|
|
2907
|
+
React.createElement("path", { fill: arrowColor, d: d1 }),
|
|
2908
|
+
React.createElement("path", { fill: "url(#a)", d: d2 }),
|
|
2909
|
+
React.createElement("defs", null,
|
|
2910
|
+
React.createElement("linearGradient", { id: "a", x1: x1, x2: x2, y1: y1, y2: y2, gradientUnits: "userSpaceOnUse" },
|
|
2911
|
+
React.createElement("stop", { stopColor: arrowColor }),
|
|
2912
|
+
React.createElement("stop", { offset: 1, stopColor: arrowColor, stopOpacity: 0 }))));
|
|
2913
|
+
}
|
|
2914
|
+
|
|
2782
2915
|
function TagIcon(_a) {
|
|
2783
2916
|
var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c; _a.altText; var props = __rest(_a, ["color", "size", "altText"]);
|
|
2784
2917
|
return React.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "TagIcon" }, props),
|
|
@@ -2847,7 +2980,7 @@ var avatarColors = {
|
|
|
2847
2980
|
};
|
|
2848
2981
|
var AvatarWrapper = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n &&& {\n display: inline-block;\n vertical-align: top;\n overflow: hidden;\n margin: 0;\n ", "\n\n width: ", ";\n height: ", ";\n border-radius: ", ";\n text-align: center;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: inline-block;\n vertical-align: top;\n overflow: hidden;\n margin: 0;\n ", "\n\n width: ", ";\n height: ", ";\n border-radius: ", ";\n text-align: center;\n ", "\n ", "\n }\n"])), SharedStyles, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.shape; }, function (props) { var _a; return props.hasPic ? '' : "background: ".concat(get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'backgroundColor'], props.color), ";"); }, function (props) { var _a; return props.hasPic ? '' : "color: ".concat(get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'textColor'], props.color), ";"); });
|
|
2849
2982
|
var AvatarPic = styled.img(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n &&& {\n width: 100%;\n height: 100%;\n }\n"], ["\n &&& {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
2850
|
-
var AvatarInitials = styled.p(templateObject_3$
|
|
2983
|
+
var AvatarInitials = styled.p(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n &&& {\n margin: 0;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n font-family: 'skufont-bold', sans-serif;\n font-size: ", "\n"], ["\n &&& {\n margin: 0;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n font-family: 'skufont-bold', sans-serif;\n font-size: ", "\n"])), function (props) { var _a; return get(avatarSizes, [(_a = props.size) !== null && _a !== void 0 ? _a : 'small', 'fontSize'], props.size); });
|
|
2851
2984
|
var Avatar = function (_a) {
|
|
2852
2985
|
var pic = _a.pic, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.shape, shape = _c === void 0 ? 'square' : _c, color = _a.color, initials = _a.initials, icon = _a.icon, children = _a.children, props = __rest(_a, ["pic", "size", "shape", "color", "initials", "icon", "children"]);
|
|
2853
2986
|
if (pic) {
|
|
@@ -2863,7 +2996,7 @@ var Avatar = function (_a) {
|
|
|
2863
2996
|
React.createElement(AvatarInitials, { size: size }, initials !== null && initials !== void 0 ? initials : children));
|
|
2864
2997
|
}
|
|
2865
2998
|
};
|
|
2866
|
-
var templateObject_1$R, templateObject_2$v, templateObject_3$
|
|
2999
|
+
var templateObject_1$R, templateObject_2$v, templateObject_3$k;
|
|
2867
3000
|
|
|
2868
3001
|
var getTotalCols = function (p) { return p.totalCols || 12; };
|
|
2869
3002
|
var SizerCss = css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n ", "\n ", "\n\n ", "\n ", ";\n ", "\n"], ["\n ", "\n ", "\n ", "\n\n ", "\n ", ";\n ", "\n"])), function (props) { return props.start ? "\n justify-content: flex-start;\n text-align: left;\n " : ''; }, function (props) { return props.center ? "\n justify-content: center;\n text-align: center;\n " : ''; }, function (props) { return props.end ? "\n justify-content: flex-end;\n text-align: right;\n " : ''; }, function (props) { return props.offset && "margin-left: ".concat(props.offset / getTotalCols(props) * 100, "%;"); }, function (props) { return props.collapse && typeof (props.collapse) === 'string' && media[props.collapse]("\n display: none;\n "); }, function (props) {
|
|
@@ -2915,14 +3048,14 @@ var Row = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateO
|
|
|
2915
3048
|
var Col = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n &&& {\n padding: ", ";\n flex: 12;\n flex-grow: 1;\n box-sizing: border-box;\n ", "\n ", "\n }\n"], ["\n &&& {\n padding: ", ";\n flex: 12;\n flex-grow: 1;\n box-sizing: border-box;\n ", "\n ", "\n }\n"])), function (props) { return props.padded ? '0.5rem' : 'initial'; }, SizerCss, SharedStyles);
|
|
2916
3049
|
var templateObject_1$P, templateObject_2$t;
|
|
2917
3050
|
|
|
2918
|
-
var headingStyle = css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"], ["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"])), function (props) { return getThemeColor(props, 'texttitle', colors.texttitle); });
|
|
3051
|
+
var headingStyle = css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"], ["\n font-family: \"skufont-demibold\", sans-serif;\n color: ", ";\n font-weight: bold;\n"])), function (props) { return getThemeColor(props, 'texttitle', colors$1.texttitle); });
|
|
2919
3052
|
var H1 = styled.h1(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n &&& {\n font-size: 30px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 30px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
|
|
2920
|
-
var H2 = styled.h2(templateObject_3$
|
|
2921
|
-
var H3 = styled.h3(templateObject_4$
|
|
3053
|
+
var H2 = styled.h2(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
|
|
3054
|
+
var H3 = styled.h3(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 25px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
|
|
2922
3055
|
var H4 = styled.h4(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n &&& {\n font-size: 23px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 23px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
|
|
2923
3056
|
var H5 = styled.h5(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n &&& {\n font-size: 20px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 20px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
|
|
2924
3057
|
var H6 = styled.h6(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n &&& {\n font-size: 18px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"], ["\n &&& {\n font-size: 18px;\n border-bottom: ", ";\n ", "\n ", "\n }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
|
|
2925
|
-
var templateObject_1$O, templateObject_2$s, templateObject_3$
|
|
3058
|
+
var templateObject_1$O, templateObject_2$s, templateObject_3$j, templateObject_4$e, templateObject_5$9, templateObject_6$9, templateObject_7$3;
|
|
2926
3059
|
|
|
2927
3060
|
var StyledBox = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n background: white;\n margin-top: 20px;\n box-shadow: ", ";\n border-radius: 5px;\n padding: 20px ", "px;\n ", "\n"], ["\n background: white;\n margin-top: 20px;\n box-shadow: ", ";\n border-radius: 5px;\n padding: 20px ", "px;\n ", "\n"])), function (props) { return props.borderless ? 0 : "0 2px 4px rgba(0, 0, 0, 0.07)"; }, function (props) { return props.padded ? 20 : 0; }, SharedStyles);
|
|
2928
3061
|
var Box = function (_a) {
|
|
@@ -2937,13 +3070,13 @@ var Box = function (_a) {
|
|
|
2937
3070
|
};
|
|
2938
3071
|
var templateObject_1$N;
|
|
2939
3072
|
|
|
2940
|
-
var Background = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"], ["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'bggray', colors.bggray); }, function (props) { return props.padded ? 20 : 0; }, function (props) { return props.fillWindow ? "100vh" : 0; }, SharedStyles);
|
|
3073
|
+
var Background = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"], ["\n &&& {\n background: ", ";\n padding: 20px ", "px;\n min-height: ", ";\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'bggray', colors$1.bggray); }, function (props) { return props.padded ? 20 : 0; }, function (props) { return props.fillWindow ? "100vh" : 0; }, SharedStyles);
|
|
2941
3074
|
var templateObject_1$M;
|
|
2942
3075
|
|
|
2943
|
-
var StyledDropArea = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"], ["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); }, function (props) { return getThemeColor(props, 'bgblue', colors.bgblue); }, function (props) { return getColor(props); }, SharedStyles);
|
|
2944
|
-
var PlaceHolder = styled.label(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"], ["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); });
|
|
2945
|
-
var ThumbsContainer = styled.aside(templateObject_3$
|
|
2946
|
-
var Thumb = styled.div(templateObject_4$
|
|
3076
|
+
var StyledDropArea = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"], ["\n &&& {\n padding: 20px;\n border: 2px dashed ", "; \n cursor: pointer;\n border-radius: 5px;\n &:hover {\n background-color: ", ";\n }\n border-color: ", ";\n outline: none;\n transition: border .24s ease-in-out;\n width: 100%;\n ", "\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors$1.primary); }, function (props) { return getThemeColor(props, 'bgblue', colors$1.bgblue); }, function (props) { return getColor(props); }, SharedStyles);
|
|
3077
|
+
var PlaceHolder = styled.label(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"], ["\n &&& {\n color: ", ";\n text-align: center;\n width: 100%;\n display: block;\n }\n"])), function (props) { return getThemeColor(props, 'primary', colors$1.primary); });
|
|
3078
|
+
var ThumbsContainer = styled.aside(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n &&& {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 16px;\n }\n"], ["\n &&& {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 16px;\n }\n"])));
|
|
3079
|
+
var Thumb = styled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n border-radius: 2px;\n border: 1px solid #eaeaea ", ";\n margin-bottom: 8px;\n margin-right: 8px;\n width: 100px;\n height: 100px;\n padding: 4px;\n box-sizing: border-box;\n }\n"], ["\n &&& {\n display: inline-flex;\n border-radius: 2px;\n border: 1px solid #eaeaea ", ";\n margin-bottom: 8px;\n margin-right: 8px;\n width: 100px;\n height: 100px;\n padding: 4px;\n box-sizing: border-box;\n }\n"])), function (props) { return getThemeColor(props, 'bggray', colors$1.bggray); });
|
|
2947
3080
|
var ThumbInner = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n &&& {\n display: flex;\n min-width: 0px;\n overflow: hidden;\n }\n"], ["\n &&& {\n display: flex;\n min-width: 0px;\n overflow: hidden;\n }\n"])));
|
|
2948
3081
|
var ImgPreview = styled.img(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n &&& {\n display: block;\n width: auto;\n height: 100%;\n }\n"], ["\n &&& {\n display: block;\n width: auto;\n height: 100%;\n }\n"])));
|
|
2949
3082
|
var DropArea = function (_a) {
|
|
@@ -3002,7 +3135,7 @@ function DropzonedPreviews(_a) {
|
|
|
3002
3135
|
? React.createElement(ThumbsContainer, null, thumbs)
|
|
3003
3136
|
: React.createElement(PlaceHolder, null, placeholder))));
|
|
3004
3137
|
}
|
|
3005
|
-
var templateObject_1$L, templateObject_2$r, templateObject_3$
|
|
3138
|
+
var templateObject_1$L, templateObject_2$r, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$8;
|
|
3006
3139
|
|
|
3007
3140
|
/*
|
|
3008
3141
|
|
|
@@ -3080,18 +3213,18 @@ var getSizeStyle$1 = function (style, defaults) {
|
|
|
3080
3213
|
};
|
|
3081
3214
|
};
|
|
3082
3215
|
var getVariantStyles = function (props, variant) {
|
|
3083
|
-
var white = getThemeColor(props, 'neutrals.white', colors.neutrals.white);
|
|
3084
|
-
var disabled = getThemeColor(props, 'neutrals.50', colors.errors['50']);
|
|
3085
|
-
var disabledText = getThemeColor(props, 'neutrals.70', colors.errors['70']);
|
|
3086
|
-
var primary = getThemeColor(props, 'primary1.main', colors.primary1.main);
|
|
3087
|
-
var primaryDark = getThemeColor(props, 'primary1.75', colors.primary1['75']);
|
|
3088
|
-
var primaryLight = getThemeColor(props, 'primary1.20', colors.primary1['20']);
|
|
3089
|
-
var cta = getThemeColor(props, 'secondary1.main', colors.secondary1.main);
|
|
3090
|
-
var ctaDark = getThemeColor(props, 'secondary1.80', colors.secondary1['80']);
|
|
3216
|
+
var white = getThemeColor(props, 'neutrals.white', colors$1.neutrals.white);
|
|
3217
|
+
var disabled = getThemeColor(props, 'neutrals.50', colors$1.errors['50']);
|
|
3218
|
+
var disabledText = getThemeColor(props, 'neutrals.70', colors$1.errors['70']);
|
|
3219
|
+
var primary = getThemeColor(props, 'primary1.main', colors$1.primary1.main);
|
|
3220
|
+
var primaryDark = getThemeColor(props, 'primary1.75', colors$1.primary1['75']);
|
|
3221
|
+
var primaryLight = getThemeColor(props, 'primary1.20', colors$1.primary1['20']);
|
|
3222
|
+
var cta = getThemeColor(props, 'secondary1.main', colors$1.secondary1.main);
|
|
3223
|
+
var ctaDark = getThemeColor(props, 'secondary1.80', colors$1.secondary1['80']);
|
|
3091
3224
|
// const ctaLight = getThemeColor(props, 'secondary1.20', colors.secondary1['20']);
|
|
3092
|
-
var error = getThemeColor(props, 'errors.main', colors.errors.main);
|
|
3093
|
-
var errorLight = getThemeColor(props, 'errors.10', colors.errors['10']);
|
|
3094
|
-
var errorDark = getThemeColor(props, 'errors.70', colors.errors['70']);
|
|
3225
|
+
var error = getThemeColor(props, 'errors.main', colors$1.errors.main);
|
|
3226
|
+
var errorLight = getThemeColor(props, 'errors.10', colors$1.errors['10']);
|
|
3227
|
+
var errorDark = getThemeColor(props, 'errors.70', colors$1.errors['70']);
|
|
3095
3228
|
var customColor = props.variantColor || white;
|
|
3096
3229
|
var customBorderColor = props.variantBorderColor;
|
|
3097
3230
|
var customBg = props.variantBg;
|
|
@@ -3301,12 +3434,12 @@ var getVariantStyles = function (props, variant) {
|
|
|
3301
3434
|
var Button = styled.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n &&& {\n border: 3px solid white;\n border-radius: ", ";\n background: ", ";\n color: ", ";\n border-color: ", ";\n font-size: ", ";\n line-height: ", ";\n padding: ", ";\n font-family: ", ";\n cursor: pointer;\n vertical-align: top;\n /*\n &:focus {\n outline: none;\n opacity: .9;\n box-shadow: 0 0 8px ", ";\n }\n */\n &:disabled {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n cursor: default;\n opacity: 0.5;\n ", "\n }\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n border: 3px solid white;\n border-radius: ", ";\n background: ", ";\n color: ", ";\n border-color: ", ";\n font-size: ", ";\n line-height: ", ";\n padding: ", ";\n font-family: ", ";\n cursor: pointer;\n vertical-align: top;\n /*\n &:focus {\n outline: none;\n opacity: .9;\n box-shadow: 0 0 8px ", ";\n }\n */\n &:disabled {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n cursor: default;\n opacity: 0.5;\n ", "\n }\n ", "\n ", "\n ", "\n }\n"])), function (props) { return props.size && sizes[props.size] ? sizes[props.size].borderRadius : '4px'; }, function (_a) {
|
|
3302
3435
|
var secondary = _a.secondary, cta = _a.cta, props = __rest(_a, ["secondary", "cta"]);
|
|
3303
3436
|
return secondary ? "transparent" :
|
|
3304
|
-
cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.teal.main);
|
|
3305
|
-
}, function (props) { return props.secondary ? getThemeColor(props, 'primary', colors.primary) : "white"; }, function (props) { return props.cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.teal.main); }, getSizeStyle$1('font-size', '1rem'), getSizeStyle$1('line-height', '1.5rem'), function (p) { return getSizeStyle$1('padding', '12px 25px'); }, getSizeStyle$1('font-family', "'skufont-demibold', sans-serif"), function (_a) {
|
|
3437
|
+
cta ? getThemeColor(props, 'cta', colors$1.cta) : getThemeColor(props, 'primary', colors$1.teal.main);
|
|
3438
|
+
}, function (props) { return props.secondary ? getThemeColor(props, 'primary', colors$1.primary) : "white"; }, function (props) { return props.cta ? getThemeColor(props, 'cta', colors$1.cta) : getThemeColor(props, 'primary', colors$1.teal.main); }, getSizeStyle$1('font-size', '1rem'), getSizeStyle$1('line-height', '1.5rem'), function (p) { return getSizeStyle$1('padding', '12px 25px'); }, getSizeStyle$1('font-family', "'skufont-demibold', sans-serif"), function (_a) {
|
|
3306
3439
|
var secondary = _a.secondary, cta = _a.cta, props = __rest(_a, ["secondary", "cta"]);
|
|
3307
|
-
return secondary ? getThemeColor(props, 'primary', colors.primary) :
|
|
3308
|
-
cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.primary);
|
|
3309
|
-
}, function (props) { return getThemeColor(props, 'disabledButton', colors.disabledButton); }, function (props) { return getThemeColor(props, 'disabledButtonBorder', colors.disabledButtonBorder); }, function (props) { return getThemeColor(props, 'primary', colors.primary); }, function (p) { return getVariantStyles(p, 'disabled'); }, function (p) { var _a; return getVariantStyles(p, p.disabled ? 'disabled' : ((_a = p.variant) !== null && _a !== void 0 ? _a : (p.secondary ? 'secondary' : (p.cta ? 'cta' : 'primary')))); }, SharedStyles, SizerCss);
|
|
3440
|
+
return secondary ? getThemeColor(props, 'primary', colors$1.primary) :
|
|
3441
|
+
cta ? getThemeColor(props, 'cta', colors$1.cta) : getThemeColor(props, 'primary', colors$1.primary);
|
|
3442
|
+
}, function (props) { return getThemeColor(props, 'disabledButton', colors$1.disabledButton); }, function (props) { return getThemeColor(props, 'disabledButtonBorder', colors$1.disabledButtonBorder); }, function (props) { return getThemeColor(props, 'primary', colors$1.primary); }, function (p) { return getVariantStyles(p, 'disabled'); }, function (p) { var _a; return getVariantStyles(p, p.disabled ? 'disabled' : ((_a = p.variant) !== null && _a !== void 0 ? _a : (p.secondary ? 'secondary' : (p.cta ? 'cta' : 'primary')))); }, SharedStyles, SizerCss);
|
|
3310
3443
|
var ButtonsGroup = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n &&& {\n display: inline-block;\n max-width: 100%;\n margin-bottom: 10px;\n margin-right: 100px;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: inline-block;\n max-width: 100%;\n margin-bottom: 10px;\n margin-right: 100px;\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
|
|
3311
3444
|
var presets = {
|
|
3312
3445
|
edit: {
|
|
@@ -3457,8 +3590,8 @@ var templateObject_1$J;
|
|
|
3457
3590
|
|
|
3458
3591
|
var InputIconLabel = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n&&& {\n box-sizing: border-box;\n width: 40px;\n height: ", "px;\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: 1rem;\n color: white;\n font-size: 18px;\n text-align: center;\n line-height: 1.5rem;\n padding: 6px;\n\n :hover {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n}\n"], ["\n&&& {\n box-sizing: border-box;\n width: 40px;\n height: ", "px;\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: 1rem;\n color: white;\n font-size: 18px;\n text-align: center;\n line-height: 1.5rem;\n padding: 6px;\n\n :hover {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n}\n"])), function (p) { return p.error ? 38 : 36; }, function (p) {
|
|
3459
3592
|
return p.error
|
|
3460
|
-
? getThemeColor(p, 'errors.main', colors.errors.main)
|
|
3461
|
-
: getThemeColor(p, 'input.iconWrapper.background', colors.input.iconWrapper.background);
|
|
3593
|
+
? getThemeColor(p, 'errors.main', colors$1.errors.main)
|
|
3594
|
+
: getThemeColor(p, 'input.iconWrapper.background', colors$1.input.iconWrapper.background);
|
|
3462
3595
|
}, function (p) { return p.iconPosition === 'right' ? '0 3px 3px 0' : '3px 0 0 3px'; }, function (p) { return getThemeColor(p, 'input.iconWrapper.hover.background'); }, function (p) { return p.isHover
|
|
3463
3596
|
? "background: ".concat(getThemeColor(p, 'input.iconWrapper.hover.background'), ";")
|
|
3464
3597
|
: ''; }, function (p) { return p.isActive
|
|
@@ -3483,7 +3616,7 @@ var InputIconLabelContainer = styled.div(templateObject_2$p || (templateObject_2
|
|
|
3483
3616
|
},
|
|
3484
3617
|
};
|
|
3485
3618
|
});
|
|
3486
|
-
var Input = styled.input(templateObject_3$
|
|
3619
|
+
var Input = styled.input(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n &&& {\n ", "\n }\n ", "\n"], ["\n &&& {\n ", "\n }\n ", "\n"])), function (p) {
|
|
3487
3620
|
var styles = {
|
|
3488
3621
|
marginBottom: p.noMargin ? 0 : "1rem",
|
|
3489
3622
|
fontSize: '1rem',
|
|
@@ -3553,11 +3686,11 @@ var LabeledIconInput = React.forwardRef(function (_a, ref) {
|
|
|
3553
3686
|
var containerRef = useRef(null);
|
|
3554
3687
|
var _g = useState(false), isActive = _g[0], setIsActive = _g[1];
|
|
3555
3688
|
var _h = useState(false), isHovering = _h[0], setIsHovering = _h[1];
|
|
3556
|
-
var activeBorderColor = getThemeColor(props, 'input.active.border', colors.input.active.border);
|
|
3557
|
-
var activeTextColor = colors.input.active.text;
|
|
3558
|
-
var errorBorderColor = getThemeColor(props, 'input.error.border', colors.input.error.border);
|
|
3559
|
-
var disabledBackground = colors.input.disabled.background;
|
|
3560
|
-
var disabledTextColor = colors.input.disabled.text;
|
|
3689
|
+
var activeBorderColor = getThemeColor(props, 'input.active.border', colors$1.input.active.border);
|
|
3690
|
+
var activeTextColor = colors$1.input.active.text;
|
|
3691
|
+
var errorBorderColor = getThemeColor(props, 'input.error.border', colors$1.input.error.border);
|
|
3692
|
+
var disabledBackground = colors$1.input.disabled.background;
|
|
3693
|
+
var disabledTextColor = colors$1.input.disabled.text;
|
|
3561
3694
|
var activeStyles = !isActive ? {} : {
|
|
3562
3695
|
borderColor: error ? errorBorderColor : activeBorderColor,
|
|
3563
3696
|
color: getThemeColor(props, 'input.active.text', activeTextColor),
|
|
@@ -3585,16 +3718,16 @@ var LabeledIconInput = React.forwardRef(function (_a, ref) {
|
|
|
3585
3718
|
iconProps['color'] = errorBorderColor;
|
|
3586
3719
|
}
|
|
3587
3720
|
else if (disabled) {
|
|
3588
|
-
iconProps['fill'] = colors.input.icon.disabled.fill;
|
|
3589
|
-
iconProps['color'] = colors.input.icon.disabled.fill;
|
|
3721
|
+
iconProps['fill'] = colors$1.input.icon.disabled.fill;
|
|
3722
|
+
iconProps['color'] = colors$1.input.icon.disabled.fill;
|
|
3590
3723
|
}
|
|
3591
3724
|
else if (isHovering) {
|
|
3592
|
-
iconProps['fill'] = colors.input.icon.hover.fill;
|
|
3593
|
-
iconProps['color'] = colors.input.icon.hover.fill;
|
|
3725
|
+
iconProps['fill'] = colors$1.input.icon.hover.fill;
|
|
3726
|
+
iconProps['color'] = colors$1.input.icon.hover.fill;
|
|
3594
3727
|
}
|
|
3595
3728
|
else if (isActive) {
|
|
3596
|
-
iconProps['fill'] = colors.input.icon.active.fill;
|
|
3597
|
-
iconProps['color'] = colors.input.icon.active.fill;
|
|
3729
|
+
iconProps['fill'] = colors$1.input.icon.active.fill;
|
|
3730
|
+
iconProps['color'] = colors$1.input.icon.active.fill;
|
|
3598
3731
|
}
|
|
3599
3732
|
return React.cloneElement(Icon, iconProps);
|
|
3600
3733
|
}, [Icon, error, disabled, errorBorderColor, isActive, isHovering, iconColor]);
|
|
@@ -3622,9 +3755,9 @@ var LabeledIconInput = React.forwardRef(function (_a, ref) {
|
|
|
3622
3755
|
}, style: __assign(__assign(__assign(__assign({}, activeStyles), errorStyles), disabledStyles), (props.style || {})), onMouseOver: function () { return setIsHovering(true); }, onMouseLeave: function () { return setIsHovering(false); } }),
|
|
3623
3756
|
iconPosition !== 'right' ? React.createElement(InputIconLabel, { style: __assign({ marginBottom: 0 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering }, NewIcon) : null,
|
|
3624
3757
|
React.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, readOnly: readOnly, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
|
|
3625
|
-
iconPosition === 'right' ? React.createElement(InputIconLabel, { style: { marginBottom: 0, padding: 6
|
|
3758
|
+
iconPosition === 'right' ? React.createElement(InputIconLabel, { style: __assign({ marginBottom: 0, padding: 6 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
|
|
3626
3759
|
});
|
|
3627
|
-
var CheckboxLabel = styled.label(templateObject_4$
|
|
3760
|
+
var CheckboxLabel = styled.label(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n position: relative;\n margin-bottom: 12px;\n margin-right: 24px;\n cursor: ", ";\n font-size: ", ";\n color: ", ";\n font-family: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-weight: normal;\n line-height: ", ";\n box-sizing: border-box;\n opacity: ", ";\n &:focus {\n outline: 0;\n }\n }\n"], ["\n &&& {\n display: inline-flex;\n position: relative;\n margin-bottom: 12px;\n margin-right: 24px;\n cursor: ", ";\n font-size: ", ";\n color: ", ";\n font-family: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-weight: normal;\n line-height: ", ";\n box-sizing: border-box;\n opacity: ", ";\n &:focus {\n outline: 0;\n }\n }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
|
|
3628
3761
|
var RadioLabel = styled(CheckboxLabel)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n &&& {\n padding-left: 32px;\n }\n"], ["\n &&& {\n padding-left: 32px;\n }\n"])));
|
|
3629
3762
|
var Radio = styled.input(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n &&& {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:checked {\n background-color: white;\n display: block;\n }\n &:hover {\n background-color: #02c0da;\n }\n ", "\n ", "\n }\n"], ["\n &&& {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:checked {\n background-color: white;\n display: block;\n }\n &:hover {\n background-color: #02c0da;\n }\n ", "\n ", "\n }\n"])), function (props) { return props.isHovering && "background-color: #02c0da;"; }, SharedStyles);
|
|
3630
3763
|
var CheckMark = styled.span(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 23px;\n width: 23px;\n background-color: ", ";\n opacity: ", ";\n filter: ", ";\n border: 2px solid #02c0da;\n border-radius: 4px;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:hover {\n background-color: ", ";\n }\n &::after {\n content: \"\";\n position: absolute;\n left: 9px;\n top: 5px;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n box-sizing: border-box;\n display: ", ";\n }\n ", "\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 23px;\n width: 23px;\n background-color: ", ";\n opacity: ", ";\n filter: ", ";\n border: 2px solid #02c0da;\n border-radius: 4px;\n box-sizing: border-box;\n &:focus {\n outline: 0;\n }\n &:hover {\n background-color: ", ";\n }\n &::after {\n content: \"\";\n position: absolute;\n left: 9px;\n top: 5px;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 3px 3px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n box-sizing: border-box;\n display: ", ";\n }\n ", "\n"])), function (props) { return ((props.isHovering || props.checked) && !props.disabled) ? '#02c0da' : 'white'; }, function (props) { return props.disabled ? 0.7 : 1; }, function (props) { return props.disabled ? "grayscale(100%)" : "none"; }, function (props) { return props.disabled ? "white" : "#02c0da"; }, function (props) { return props.checked ? 'block' : 'none'; }, SharedStyles);
|
|
@@ -3651,7 +3784,7 @@ var LabeledRadioInButton = function (_a) {
|
|
|
3651
3784
|
var label = _a.label; _a.name; var checked = _a.checked, disabled = _a.disabled, readOnly = _a.readOnly, defaultValue = _a.defaultValue; _a.labelStyle; _a.radioIconStyle; var flexGrow = _a.flexGrow, onChange = _a.onChange; __rest(_a, ["label", "name", "checked", "disabled", "readOnly", "defaultValue", "labelStyle", "radioIconStyle", "flexGrow", "onChange"]);
|
|
3652
3785
|
return (React.createElement(LabeledRadio, { label: label, checked: checked, disabled: disabled, onChange: onChange, readOnly: readOnly, defaultValue: defaultValue, labelStyle: {
|
|
3653
3786
|
padding: "13px 40px",
|
|
3654
|
-
backgroundColor: disabled ? neutrals['40'] : checked ? colors.white : teal['20'],
|
|
3787
|
+
backgroundColor: disabled ? neutrals['40'] : checked ? colors$1.white : teal['20'],
|
|
3655
3788
|
border: disabled ? "solid 3px ".concat(neutrals['40']) : checked ? "solid 3px ".concat(teal.main) : "solid 3px ".concat(teal['20']),
|
|
3656
3789
|
borderRadius: "200px",
|
|
3657
3790
|
color: disabled ? neutrals['70'] : teal.main,
|
|
@@ -3681,7 +3814,7 @@ var LabeledCheckbox = React.forwardRef(function (_a, ref) {
|
|
|
3681
3814
|
label,
|
|
3682
3815
|
React.createElement(Radio, __assign({ ref: ref, name: name, type: "checkbox", checked: checked, isHovering: isHovering, onChange: disabled ? undefined : onChange }, props))));
|
|
3683
3816
|
});
|
|
3684
|
-
var templateObject_1$I, templateObject_2$p, templateObject_3$
|
|
3817
|
+
var templateObject_1$I, templateObject_2$p, templateObject_3$h, templateObject_4$c, templateObject_5$7, templateObject_6$7, templateObject_7$2, templateObject_8$2;
|
|
3685
3818
|
|
|
3686
3819
|
var Padding = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: 20px;\n ", "\n"], ["\n padding: 20px;\n ", "\n"])), SharedStyles);
|
|
3687
3820
|
var templateObject_1$H;
|
|
@@ -3750,23 +3883,23 @@ function skuSelectStyles(props) {
|
|
|
3750
3883
|
return __assign(__assign({}, provided), props.containerStyles);
|
|
3751
3884
|
},
|
|
3752
3885
|
clearIndicator: function (provided, state) {
|
|
3753
|
-
return __assign(__assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
|
|
3754
|
-
color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color),
|
|
3886
|
+
return __assign(__assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors$1.select.clearIcon.color), ':hover': {
|
|
3887
|
+
color: getThemeColor(props, 'select.clearIcon.color', colors$1.select.clearIcon.color),
|
|
3755
3888
|
} }), props.clearIndicatorStyles);
|
|
3756
3889
|
},
|
|
3757
3890
|
dropdownIndicator: function (provided, state) {
|
|
3758
3891
|
var styles = {
|
|
3759
3892
|
color: props.error
|
|
3760
|
-
? getThemeColor(props, 'select.dropdownIcon.error.color', colors.select.dropdownIcon.error.color)
|
|
3761
|
-
: getThemeColor(props, 'select.dropdownIcon.color', colors.select.dropdownIcon.color),
|
|
3893
|
+
? getThemeColor(props, 'select.dropdownIcon.error.color', colors$1.select.dropdownIcon.error.color)
|
|
3894
|
+
: getThemeColor(props, 'select.dropdownIcon.color', colors$1.select.dropdownIcon.color),
|
|
3762
3895
|
':hover': {
|
|
3763
3896
|
color: props.error
|
|
3764
|
-
? getThemeColor(props, 'select.dropdownIcon.error.color', colors.select.dropdownIcon.error.color)
|
|
3765
|
-
: getThemeColor(props, 'select.dropdownIcon.color', colors.select.dropdownIcon.color),
|
|
3897
|
+
? getThemeColor(props, 'select.dropdownIcon.error.color', colors$1.select.dropdownIcon.error.color)
|
|
3898
|
+
: getThemeColor(props, 'select.dropdownIcon.color', colors$1.select.dropdownIcon.color),
|
|
3766
3899
|
},
|
|
3767
3900
|
};
|
|
3768
3901
|
if (state.isDisabled) {
|
|
3769
|
-
styles['color'] = getThemeColor(props, 'select.dropdownIcon.disabled', colors.select.dropdownIcon.disabled);
|
|
3902
|
+
styles['color'] = getThemeColor(props, 'select.dropdownIcon.disabled', colors$1.select.dropdownIcon.disabled);
|
|
3770
3903
|
}
|
|
3771
3904
|
return __assign(__assign(__assign({}, provided), styles), props.dropdownIndicatorStyles);
|
|
3772
3905
|
},
|
|
@@ -3776,8 +3909,8 @@ function skuSelectStyles(props) {
|
|
|
3776
3909
|
},
|
|
3777
3910
|
input: function (provided, state) {
|
|
3778
3911
|
return __assign(__assign(__assign({}, provided), { height: 'auto', borderColor: props.error
|
|
3779
|
-
? getThemeColor(props, 'select.error.border', colors.select.error.border)
|
|
3780
|
-
: getThemeColor(props, 'select.border', colors.select.border) }), props.inputStyles);
|
|
3912
|
+
? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
|
|
3913
|
+
: getThemeColor(props, 'select.border', colors$1.select.border) }), props.inputStyles);
|
|
3781
3914
|
},
|
|
3782
3915
|
control: function (provided, state) {
|
|
3783
3916
|
var styles = {
|
|
@@ -3787,8 +3920,8 @@ function skuSelectStyles(props) {
|
|
|
3787
3920
|
styles['borderWidth'] = '1px';
|
|
3788
3921
|
styles['borderStyle'] = 'solid';
|
|
3789
3922
|
styles['borderColor'] = props.error
|
|
3790
|
-
? getThemeColor(props, 'select.error.border', colors.select.error.border)
|
|
3791
|
-
: getThemeColor(props, 'select.active.border', colors.select.active.border);
|
|
3923
|
+
? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
|
|
3924
|
+
: getThemeColor(props, 'select.active.border', colors$1.select.active.border);
|
|
3792
3925
|
styles['boxShadow'] = "\n 1px 1px 0px ".concat(styles['borderColor'], ",\n -1px -1px 0px ").concat(styles['borderColor'], ",\n 1px -1px 0px ").concat(styles['borderColor'], ",\n -1px 1px 0px ").concat(styles['borderColor'], "\n ");
|
|
3793
3926
|
if (state.selectProps.menuPlacement === 'bottom') {
|
|
3794
3927
|
styles['borderBottomRightRadius'] = 0;
|
|
@@ -3802,31 +3935,31 @@ function skuSelectStyles(props) {
|
|
|
3802
3935
|
else if (!state.menuIsOpen && state.isFocused) {
|
|
3803
3936
|
styles['borderWidth'] = '1px';
|
|
3804
3937
|
styles['borderColor'] = props.error
|
|
3805
|
-
? getThemeColor(props, 'select.error.border', colors.select.error.border)
|
|
3806
|
-
: getThemeColor(props, 'select.active.border', colors.select.active.border);
|
|
3938
|
+
? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
|
|
3939
|
+
: getThemeColor(props, 'select.active.border', colors$1.select.active.border);
|
|
3807
3940
|
styles['boxShadow'] = "0 0 0 1px ".concat(props.error
|
|
3808
|
-
? getThemeColor(props, 'select.error.border', colors.select.error.border)
|
|
3809
|
-
: getThemeColor(props, 'select.active.border', colors.select.active.border));
|
|
3941
|
+
? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
|
|
3942
|
+
: getThemeColor(props, 'select.active.border', colors$1.select.active.border));
|
|
3810
3943
|
}
|
|
3811
3944
|
else if (state.isDisabled) {
|
|
3812
|
-
styles['backgroundColor'] = getThemeColor(props, 'select.disabled.background', colors.select.disabled.background);
|
|
3813
|
-
styles['borderColor'] = getThemeColor(props, 'select.disabled.border', colors.select.disabled.border);
|
|
3945
|
+
styles['backgroundColor'] = getThemeColor(props, 'select.disabled.background', colors$1.select.disabled.background);
|
|
3946
|
+
styles['borderColor'] = getThemeColor(props, 'select.disabled.border', colors$1.select.disabled.border);
|
|
3814
3947
|
}
|
|
3815
3948
|
else {
|
|
3816
3949
|
styles['borderColor'] = props.error
|
|
3817
|
-
? getThemeColor(props, 'select.error.border', colors.select.error.border)
|
|
3950
|
+
? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
|
|
3818
3951
|
: provided.borderColor;
|
|
3819
3952
|
}
|
|
3820
3953
|
return (__assign(__assign(__assign(__assign({}, provided), styles), { ':hover': {
|
|
3821
3954
|
borderColor: props.error
|
|
3822
|
-
? getThemeColor(props, 'select.error.border', colors.select.error.border)
|
|
3823
|
-
: getThemeColor(props, 'select.active.border', colors.select.active.border),
|
|
3955
|
+
? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
|
|
3956
|
+
: getThemeColor(props, 'select.active.border', colors$1.select.active.border),
|
|
3824
3957
|
} }), props.controlStyles));
|
|
3825
3958
|
},
|
|
3826
3959
|
menu: function (provided, state) {
|
|
3827
3960
|
var borderColor = props.error
|
|
3828
|
-
? getThemeColor(props, 'select.error.border', colors.select.error.border)
|
|
3829
|
-
: getThemeColor(props, 'select.active.border', colors.select.active.border);
|
|
3961
|
+
? getThemeColor(props, 'select.error.border', colors$1.select.error.border)
|
|
3962
|
+
: getThemeColor(props, 'select.active.border', colors$1.select.active.border);
|
|
3830
3963
|
var styles = {
|
|
3831
3964
|
zIndex: 10,
|
|
3832
3965
|
position: props.menuRelative ? 'relative' : provided.position,
|
|
@@ -3868,7 +4001,7 @@ function skuSelectStyles(props) {
|
|
|
3868
4001
|
},
|
|
3869
4002
|
};
|
|
3870
4003
|
}
|
|
3871
|
-
var skuSelectThemeByProps = function (props) { return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors.primary0), primary75: getThemeColor(props, 'primary0', colors.primary0), primary50: getThemeColor(props, 'primary10', colors.primary10), primary: getThemeColor(props, 'primary', colors.primary), neutral20: getThemeColor(props, 'select.border', colors.select.border), neutral30: getThemeColor(props, 'select.border', colors.select.border), neutral80: getThemeColor(props, 'textbody', colors.textbody), neutral90: getThemeColor(props, 'textbody', colors.textbody) }) })); }; };
|
|
4004
|
+
var skuSelectThemeByProps = function (props) { return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors$1.primary0), primary75: getThemeColor(props, 'primary0', colors$1.primary0), primary50: getThemeColor(props, 'primary10', colors$1.primary10), primary: getThemeColor(props, 'primary', colors$1.primary), neutral20: getThemeColor(props, 'select.border', colors$1.select.border), neutral30: getThemeColor(props, 'select.border', colors$1.select.border), neutral80: getThemeColor(props, 'textbody', colors$1.textbody), neutral90: getThemeColor(props, 'textbody', colors$1.textbody) }) })); }; };
|
|
3872
4005
|
// duplicate styles to overide .resku global styles
|
|
3873
4006
|
// : React.ForwardRefExoticComponent<SKUSelectProps & React.RefAttributes<BaseSelect>>
|
|
3874
4007
|
// React.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | ... 27 more ... | "form"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & React.RefAttributes<...>>
|
|
@@ -3975,8 +4108,8 @@ var SidePanel = function (_a) {
|
|
|
3975
4108
|
backdrop && visible ? React.createElement(Backdrop, null) : null);
|
|
3976
4109
|
};
|
|
3977
4110
|
var NameAndPosition = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: inline-block;\n width: 90%;\n"], ["\n display: inline-block;\n width: 90%;\n"])));
|
|
3978
|
-
var Name = styled.div(templateObject_3$
|
|
3979
|
-
var Position = styled.div(templateObject_4$
|
|
4111
|
+
var Name = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
4112
|
+
var Position = styled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-size: .8em;\n"], ["\n font-size: .8em;\n"])));
|
|
3980
4113
|
var Email = styled.a(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: .8em;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n"], ["\n font-size: .8em;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n"])));
|
|
3981
4114
|
var Contact = styled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n &&& {\n display: flex;\n flex-basis: 50%;\n margin-bottom: 15px;\n ", "\n }\n"], ["\n &&& {\n display: flex;\n flex-basis: 50%;\n margin-bottom: 15px;\n ", "\n }\n"])), SizerCss);
|
|
3982
4115
|
var PanelContact = function (_a) {
|
|
@@ -4013,12 +4146,12 @@ var PanelTileContact = function (_a) {
|
|
|
4013
4146
|
p.phone_extension && 'x' + p.phone_extension) : '';
|
|
4014
4147
|
}) : null)));
|
|
4015
4148
|
};
|
|
4016
|
-
var templateObject_1$C, templateObject_2$m, templateObject_3$
|
|
4149
|
+
var templateObject_1$C, templateObject_2$m, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$6;
|
|
4017
4150
|
|
|
4018
4151
|
var sharedStyle = css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n line-height: 1.125rem;\n box-sizing: border-box;\n"], ["\n line-height: 1.125rem;\n box-sizing: border-box;\n"])));
|
|
4019
4152
|
var optionalPadding = css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n &:first-child {\n padding-left: ", ";\n }\n\n &:last-child {\n padding-right: ", ";\n }\n"], ["\n &:first-child {\n padding-left: ", ";\n }\n\n &:last-child {\n padding-right: ", ";\n }\n"])), function (props) { return props.padded ? "20px" : "inherit"; }, function (props) { return props.padded ? "20px" : "inherit"; });
|
|
4020
|
-
var Table = styled.table.attrs(function () { return ({ cellPadding: 0, cellSpacing: 0 }); })(templateObject_3$
|
|
4021
|
-
var TH = styled.th(templateObject_4$
|
|
4153
|
+
var Table = styled.table.attrs(function () { return ({ cellPadding: 0, cellSpacing: 0 }); })(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n &&& {\n background-color: white;\n border: none;\n border-spacing: 0;\n width: 100%;\n table-layout: auto;\n display: table;\n font-family: 'skufont-regular', sans-serif;\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n background-color: white;\n border: none;\n border-spacing: 0;\n width: 100%;\n table-layout: auto;\n display: table;\n font-family: 'skufont-regular', sans-serif;\n ", "\n ", "\n ", "\n }\n"])), sharedStyle, SizerCss, SharedStyles);
|
|
4154
|
+
var TH = styled.th(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n &&& {\n background-color: #dae9ee;\n border: none;\n border-spacing: 0;\n color: ", ";\n font-size: 1rem;\n padding: 0.5rem 0.625rem 0.625rem;\n display: table-cell;\n text-align: left;\n font-family: \"skufont-demibold\", sans-serif;\n ", "\n &:hover {\n background-color: ", ";\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n background-color: #dae9ee;\n border: none;\n border-spacing: 0;\n color: ", ";\n font-size: 1rem;\n padding: 0.5rem 0.625rem 0.625rem;\n display: table-cell;\n text-align: left;\n font-family: \"skufont-demibold\", sans-serif;\n ", "\n &:hover {\n background-color: ", ";\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) { return props.clickable ? "#00889B" : "#123952"; }, function (props) { return props.sticky ? "position: sticky; top: ".concat(props.stickyTop ? props.stickyTop : 0, ";") : null; }, function (props) { return props.clickable ? "#d2e6ec" : "#dae9ee"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
|
|
4022
4155
|
var TD$1 = styled.td(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n &&& {\n border: 0;\n color: #52585c;\n font-size: .875rem;\n line-height: 1.75rem;\n display: table-cell;\n padding: 0.5625rem 0.625rem;\n &:hover {\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n &&& {\n border: 0;\n color: #52585c;\n font-size: .875rem;\n line-height: 1.75rem;\n display: table-cell;\n padding: 0.5625rem 0.625rem;\n &:hover {\n cursor: ", ";\n }\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
|
|
4023
4156
|
var TR = styled.tr(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n &&& {\n ", "\n &:hover {\n background: #EDF2F4;\n }\n ", "\n }\n"], ["\n &&& {\n ", "\n &:hover {\n background: #EDF2F4;\n }\n ", "\n }\n"])), SizerCss, function (p) { return p.selected && 'background: #EDF2F4;'; });
|
|
4024
4157
|
var THead = styled.thead(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n &&& {\n ", "\n }\n"], ["\n &&& {\n ", "\n }\n"])), SizerCss);
|
|
@@ -4040,7 +4173,7 @@ var THSorted = function (_a) {
|
|
|
4040
4173
|
" ",
|
|
4041
4174
|
children));
|
|
4042
4175
|
};
|
|
4043
|
-
var templateObject_1$B, templateObject_2$l, templateObject_3$
|
|
4176
|
+
var templateObject_1$B, templateObject_2$l, templateObject_3$f, templateObject_4$a, templateObject_5$5, templateObject_6$5, templateObject_7$1, templateObject_8$1, templateObject_9$1;
|
|
4044
4177
|
|
|
4045
4178
|
var useClickOutside = function (props) {
|
|
4046
4179
|
var ref = props.ref, _a = props.eventType, eventType = _a === void 0 ? 'mousedown' : _a, onClick = props.onClick, onCleanup = props.onCleanup;
|
|
@@ -4295,8 +4428,8 @@ var useFallbackRef = function (forwardedRef) {
|
|
|
4295
4428
|
|
|
4296
4429
|
var Overlay = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n &&& {\n position: fixed;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n background: rgba(42, 56, 63, 0.45);\n display: flex;\n z-index: ", ";\n margin-left: auto;\n margin-right: auto;\n }\n"], ["\n &&& {\n position: fixed;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n background: rgba(42, 56, 63, 0.45);\n display: flex;\n z-index: ", ";\n margin-left: auto;\n margin-right: auto;\n }\n"])), function (p) { return p.zIndex || 999; });
|
|
4297
4430
|
var PopupWindow = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n &&& {\n width: ", ";\n height: ", "; \n margin: 0 !important;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: fixed;\n ", "\n overflow-y: hidden;\n display: block;\n z-index: ", ";\n\n padding: ", ";\n border: 1px solid #CCD5DA;\n background-color: #fefefe;\n border-radius: 3px;\n\n &:last-child {\n margin-bottom: 0;\n }\n .popup-content {\n overflow-y: auto;\n height: 90%;\n }\n ", "\n ", "\n }\n"], ["\n &&& {\n width: ", ";\n height: ", "; \n margin: 0 !important;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: fixed;\n ", "\n overflow-y: hidden;\n display: block;\n z-index: ", ";\n\n padding: ", ";\n border: 1px solid #CCD5DA;\n background-color: #fefefe;\n border-radius: 3px;\n\n &:last-child {\n margin-bottom: 0;\n }\n .popup-content {\n overflow-y: auto;\n height: 90%;\n }\n ", "\n ", "\n }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '90%'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '75%'; }, function (props) { return props.height ? '' : 'max-height: 700px;'; }, function (p) { return p.zIndex || 1006; }, function (props) { var _a; return (_a = props.padding) !== null && _a !== void 0 ? _a : '1rem'; }, SharedStyles, SizerCss);
|
|
4298
|
-
var PopupHeader = styled.div(templateObject_3$
|
|
4299
|
-
var ChevronButton = styled(ChevronIcon)(templateObject_4$
|
|
4431
|
+
var PopupHeader = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n &&& {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n background: white;\n padding: 3px;\n z-index: 99;\n .title {\n font-size: 1.8rem;\n font-weight: 500;\n text-align: left;\n align-self: center;\n padding-top: 3px;\n padding-left: 3px;\n border-bottom: none;\n font-family: \"skufont-demibold\",sans-serif;\n color: #123952;\n }\n ", "\n ", "\n }\n"], ["\n &&& {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n background: white;\n padding: 3px;\n z-index: 99;\n .title {\n font-size: 1.8rem;\n font-weight: 500;\n text-align: left;\n align-self: center;\n padding-top: 3px;\n padding-left: 3px;\n border-bottom: none;\n font-family: \"skufont-demibold\",sans-serif;\n color: #123952;\n }\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
|
|
4432
|
+
var ChevronButton = styled(ChevronIcon)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n && {\n position: absolute;\n width: 120px;\n height: 120px;\n ", "\n top: calc(50% - 120px/2 + 22.5px);\n }\n"], ["\n && {\n position: absolute;\n width: 120px;\n height: 120px;\n ", "\n top: calc(50% - 120px/2 + 22.5px);\n }\n"])), function (props) { return props.left ? 'left: 0px;' : 'right: 0px;'; });
|
|
4300
4433
|
var PopupContainer = function (_a) {
|
|
4301
4434
|
var children = _a.children;
|
|
4302
4435
|
var ref = React.useRef(document$1.createElement('div'));
|
|
@@ -4369,12 +4502,12 @@ var ChevronPopupWindow = React.forwardRef(function (props, ref) {
|
|
|
4369
4502
|
var ChevronPopup = function (props) {
|
|
4370
4503
|
return React.createElement(Popup, __assign({ PopupWindowComponent: ChevronPopupWindow }, props));
|
|
4371
4504
|
};
|
|
4372
|
-
var templateObject_1$A, templateObject_2$k, templateObject_3$
|
|
4505
|
+
var templateObject_1$A, templateObject_2$k, templateObject_3$e, templateObject_4$9;
|
|
4373
4506
|
|
|
4374
4507
|
var GridTableContainer = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n width:", ";\n margin-top: 24px;\n margin-bottom: 24px;\n background: white;\n overflow: scroll;\n .droppable {\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n }\n ", "\n"], ["\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n width:", ";\n margin-top: 24px;\n margin-bottom: 24px;\n background: white;\n overflow: scroll;\n .droppable {\n display:grid;\n grid-template-rows: ", ";\n grid-gap: ", ";\n }\n ", "\n"])), function (props) { return props.gridTemplateRows ? props.gridTemplateRows : 'auto'; }, function (props) { return props.gridRowGap ? props.gridRowGap : "16px"; }, function (props) { return props.width ? props.width : '100%'; }, function (props) { return props.gridTemplateRows ? props.gridTemplateRows : 'auto'; }, function (props) { return props.gridRowGap ? props.gridRowGap : "16px"; }, SharedStyles);
|
|
4375
4508
|
var GridRow = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display:grid;\n grid-template-columns: ", ";\n grid-gap: ", ";\n width:100%;\n background: white;\n ", "\n"], ["\n display:grid;\n grid-template-columns: ", ";\n grid-gap: ", ";\n width:100%;\n background: white;\n ", "\n"])), function (props) { return props.gridTemplateColumns; }, function (props) { return props.gridColumnGap ? props.gridColumnGap : "16px"; }, SharedStyles);
|
|
4376
|
-
var GridCell = styled.div(templateObject_3$
|
|
4377
|
-
var FieldError = styled.p(templateObject_4$
|
|
4509
|
+
var GridCell = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject([" \n background: white;\n width: ", ";\n font-family: ", ";\n color: ", ";\n text-align: ", ";\n"], [" \n background: white;\n width: ", ";\n font-family: ", ";\n color: ", ";\n text-align: ", ";\n"])), function (props) { return props.width ? props.width : 'auto'; }, function (props) { return props.header ? themeOptions.fontFamilies.bold : fontStyles.p.medium; }, function (props) { return props.header ? errors.main : neutrals.bodyText; }, function (props) { return props.centerContent ? 'center' : 'left'; });
|
|
4510
|
+
var FieldError = styled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n margin:0;\n"], ["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n margin:0;\n"])), fontStyles.p.small.fontFamily, fontStyles.p.small.fontSize, errors['40']);
|
|
4378
4511
|
var defaultTransform = function (v) { return v.target ? v.target.value : v.currentTarget ? v.currentTarget.value : v.value; };
|
|
4379
4512
|
var Column = function (_a) {
|
|
4380
4513
|
_a.name; var title = _a.title; _a.children; var centerContent = _a.centerContent; _a.transform;
|
|
@@ -4557,14 +4690,14 @@ function GridTable(_a) {
|
|
|
4557
4690
|
Adding && NewRow,
|
|
4558
4691
|
onAdd && !Adding && AddNew)));
|
|
4559
4692
|
}
|
|
4560
|
-
var templateObject_1$z, templateObject_2$j, templateObject_3$
|
|
4693
|
+
var templateObject_1$z, templateObject_2$j, templateObject_3$d, templateObject_4$8;
|
|
4561
4694
|
|
|
4562
4695
|
var tabSizes = {
|
|
4563
4696
|
small: css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n font-size: 0.9rem;\n padding: 0.5rem 5px;\n margin: 0;\n "], ["\n font-size: 0.9rem;\n padding: 0.5rem 5px;\n margin: 0;\n "]))),
|
|
4564
4697
|
medium: css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-size: inherit;\n padding: 1rem 12px;\n margin: 0 15px 0 0;\n "], ["\n font-size: inherit;\n padding: 1rem 12px;\n margin: 0 15px 0 0;\n "]))),
|
|
4565
4698
|
};
|
|
4566
|
-
var TabBar = styled.ul(templateObject_3$
|
|
4567
|
-
var Tab = styled.li(templateObject_4$
|
|
4699
|
+
var TabBar = styled.ul(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n &&& {\n display: block;\n font-size: 16px;\n font-family: 'skufont-demibold', sans-serif;\n margin: 0;\n margin-bottom: ", ";\n padding: 0;\n ", "\n }\n"], ["\n &&& {\n display: block;\n font-size: 16px;\n font-family: 'skufont-demibold', sans-serif;\n margin: 0;\n margin-bottom: ", ";\n padding: 0;\n ", "\n }\n"])), function (props) { return props.padded ? "20px" : 0; }, SharedStyles);
|
|
4700
|
+
var Tab = styled.li(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &&& {\n cursor: pointer;\n display: inline-block;\n border-bottom: ", ";\n color: #222222;\n opacity: ", ";\n list-style: none;\n margin-bottom: 0 !important;\n position: relative;\n padding: 1rem 12px;\n margin-right: 15px;\n ", "\n\n ", "\n }\n"], ["\n &&& {\n cursor: pointer;\n display: inline-block;\n border-bottom: ", ";\n color: #222222;\n opacity: ", ";\n list-style: none;\n margin-bottom: 0 !important;\n position: relative;\n padding: 1rem 12px;\n margin-right: 15px;\n ", "\n\n ", "\n }\n"
|
|
4568
4701
|
/*
|
|
4569
4702
|
|
|
4570
4703
|
Here's how you use this:
|
|
@@ -4594,7 +4727,7 @@ var Tab = styled.li(templateObject_4$8 || (templateObject_4$8 = __makeTemplateOb
|
|
|
4594
4727
|
// </div>
|
|
4595
4728
|
// }
|
|
4596
4729
|
])), function (props) { return props.selected
|
|
4597
|
-
? "5px solid ".concat(props.variant === 'secondary' ? colors.secondary1.main : colors.primary1.main)
|
|
4730
|
+
? "5px solid ".concat(props.variant === 'secondary' ? colors$1.secondary1.main : colors$1.primary1.main)
|
|
4598
4731
|
: "none"; }, function (props) { return props.selected ? "1" : ".5"; }, SharedStyles, function (props) { var _a; return tabSizes[(_a = props.size) !== null && _a !== void 0 ? _a : 'medium']; });
|
|
4599
4732
|
var Tabs = /** @class */ (function (_super) {
|
|
4600
4733
|
__extends(Tabs, _super);
|
|
@@ -4652,7 +4785,7 @@ var Tabs = /** @class */ (function (_super) {
|
|
|
4652
4785
|
};
|
|
4653
4786
|
return Tabs;
|
|
4654
4787
|
}(Component));
|
|
4655
|
-
var templateObject_1$y, templateObject_2$i, templateObject_3$
|
|
4788
|
+
var templateObject_1$y, templateObject_2$i, templateObject_3$c, templateObject_4$7;
|
|
4656
4789
|
|
|
4657
4790
|
var toggleSizes$1 = {
|
|
4658
4791
|
small: {
|
|
@@ -4690,8 +4823,8 @@ var getSizeStyle = function (style, defaults) {
|
|
|
4690
4823
|
};
|
|
4691
4824
|
};
|
|
4692
4825
|
var Wrapper$3 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n max-width: 600px;\n justify-content: flex-start;\n width: 100%; \n }"], ["\n &&& {\n display: inline-flex;\n max-width: 600px;\n justify-content: flex-start;\n width: 100%; \n }"])));
|
|
4693
|
-
var Container = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"], ["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"])), function (props) { return getThemeColor(props, 'teal.20', colors.teal['20']); }, function (props) { return props.stretch ? "100%" : "auto"; }, SharedStyles);
|
|
4694
|
-
var ToggleLink = styled.a(templateObject_3$
|
|
4826
|
+
var Container = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"], ["\n &&& {\n background: ", ";\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n width: ", ";\n ", "\n }"])), function (props) { return getThemeColor(props, 'teal.20', colors$1.teal['20']); }, function (props) { return props.stretch ? "100%" : "auto"; }, SharedStyles);
|
|
4827
|
+
var ToggleLink = styled.a(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n &&& {\n font-family: 'skufont-medium', sans-serif;\n font-size: ", ";\n border-radius: 30px;\n display: flex;\n align-content: center;\n padding: ", ";\n height: auto;\n line-height: ", ";\n width: ", ";\n justify-content: center;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n ", "\n }"], ["\n &&& {\n font-family: 'skufont-medium', sans-serif;\n font-size: ", ";\n border-radius: 30px;\n display: flex;\n align-content: center;\n padding: ", ";\n height: auto;\n line-height: ", ";\n width: ", ";\n justify-content: center;\n cursor: pointer;\n background-color: ", ";\n color: ", ";\n ", "\n }"])), function (props) { return getSizeStyle('font-size', '1rem')({ size: props.size }); }, function (props) { return getSizeStyle('padding', '8px 16px')({ size: props.size }); }, function (props) { return getSizeStyle('line-height', '24px')({ size: props.size }); }, function (props) { return props.stretch ? "50%" : "auto"; }, function (props) { return props.selected ? getThemeColor(props, 'teal.main', colors$1.teal.main) : getThemeColor(props, 'teal.20', colors$1.teal['20']); }, function (props) { return props.selected ? "white" : getThemeColor(props, 'teal.main', colors$1.teal.main); }, SharedStyles);
|
|
4695
4828
|
var Toggle = function (_a) {
|
|
4696
4829
|
var _b = _a.size, size = _b === void 0 ? 'medium' : _b, props = __rest(_a, ["size"]);
|
|
4697
4830
|
return React.createElement(Wrapper$3, __assign({ size: size }, props),
|
|
@@ -4699,7 +4832,7 @@ var Toggle = function (_a) {
|
|
|
4699
4832
|
return React.cloneElement(child, { size: size });
|
|
4700
4833
|
})));
|
|
4701
4834
|
};
|
|
4702
|
-
var templateObject_1$x, templateObject_2$h, templateObject_3$
|
|
4835
|
+
var templateObject_1$x, templateObject_2$h, templateObject_3$b;
|
|
4703
4836
|
|
|
4704
4837
|
var Textarea = styled.textarea(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), function (p) {
|
|
4705
4838
|
var styles = {
|
|
@@ -4791,8 +4924,8 @@ var templateObject_1$u;
|
|
|
4791
4924
|
|
|
4792
4925
|
var ProductInfo = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: 100%;\n background: rgba(0, 0, 0, 0.55) !important;\n position: absolute;\n left: 0;\n bottom: 0;\n opacity: 1;\n color: #fff;\n padding: 10px;\n font-size: 14px;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n height: 110px;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"], ["\n width: 100%;\n background: rgba(0, 0, 0, 0.55) !important;\n position: absolute;\n left: 0;\n bottom: 0;\n opacity: 1;\n color: #fff;\n padding: 10px;\n font-size: 14px;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n height: 110px;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"])));
|
|
4793
4926
|
var ProductName = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 1.2rem;\n font-weight: bold;\n display: none;\n"], ["\n font-size: 1.2rem;\n font-weight: bold;\n display: none;\n"])));
|
|
4794
|
-
var SupplierName = styled.div(templateObject_3$
|
|
4795
|
-
var ProductWrapper = styled.div(templateObject_4$
|
|
4927
|
+
var SupplierName = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-size: .9rem;\n font-weight: bold;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n font-size: .9rem;\n font-weight: bold;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
|
|
4928
|
+
var ProductWrapper = styled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 100%;\n height: 17rem;\n overflow: hidden;\n background-image: url(\"", "\");\n background-repeat: no-repeat;\n background-position: center top;\n background-size: cover;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n &:hover ", " {\n height: 100%;\n }\n &:hover ", " {\n display: block;\n }\n &:hover ", " {\n overflow: visible;\n white-space: normal;\n }\n ", "\n"], ["\n width: 100%;\n height: 17rem;\n overflow: hidden;\n background-image: url(\"", "\");\n background-repeat: no-repeat;\n background-position: center top;\n background-size: cover;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n &:hover ", " {\n height: 100%;\n }\n &:hover ", " {\n display: block;\n }\n &:hover ", " {\n overflow: visible;\n white-space: normal;\n }\n ", "\n"])), function (props) { return props.picture; }, ProductInfo, ProductName, SupplierName, SharedStyles);
|
|
4796
4929
|
var Product = function (props) {
|
|
4797
4930
|
return React.createElement(ProductWrapper, __assign({}, props),
|
|
4798
4931
|
React.createElement(ProductInfo, null,
|
|
@@ -4803,12 +4936,12 @@ var Product = function (props) {
|
|
|
4803
4936
|
props.price && props.currency ? props.currency + "$" + props.price : null,
|
|
4804
4937
|
props.rating ? React.createElement(StarRating, { rating: props.rating }) : null));
|
|
4805
4938
|
};
|
|
4806
|
-
var templateObject_1$t, templateObject_2$g, templateObject_3$
|
|
4939
|
+
var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$6;
|
|
4807
4940
|
|
|
4808
4941
|
var ArtworkName = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n font-size: .9rem;\n font-weight: bold;\n"], ["\n font-size: .9rem;\n font-weight: bold;\n"])));
|
|
4809
|
-
var UpdateDate = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n color: ", ";\n"])), function (props) { return getThemeFontSize(props, 'tiny'); }, function (props) { return getThemeColor(props, 'textbody', colors.textbody); });
|
|
4810
|
-
var ArtworkControls = styled.div(templateObject_3$
|
|
4811
|
-
var ArtworkInfo = styled.div(templateObject_4$
|
|
4942
|
+
var UpdateDate = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n color: ", ";\n"])), function (props) { return getThemeFontSize(props, 'tiny'); }, function (props) { return getThemeColor(props, 'textbody', colors$1.textbody); });
|
|
4943
|
+
var ArtworkControls = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n padding: 10px;\n width: 100%;\n box-sizing: border-box;\n opacity: 0;\n transition: .3s all;\n"], ["\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n padding: 10px;\n width: 100%;\n box-sizing: border-box;\n opacity: 0;\n transition: .3s all;\n"])));
|
|
4944
|
+
var ArtworkInfo = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n padding-left: ", ";\n width: 100%;\n position: absolute;\n height: 3rem;\n left: 0;\n ", " : 0;\n opacity: 1;\n color: black;\n font-size: 14px;\n box-sizing: border-box;\n word-wrap: break-word;\n -moz-box-sizing: border-box;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n"], ["\n padding-left: ", ";\n width: 100%;\n position: absolute;\n height: 3rem;\n left: 0;\n ", " : 0;\n opacity: 1;\n color: black;\n font-size: 14px;\n box-sizing: border-box;\n word-wrap: break-word;\n -moz-box-sizing: border-box;\n -webkit-transition: height .2s ease;\n -moz-transition: height .2s ease;\n transition: height .2s ease;\n z-index: 1;\n"])), function (props) { return props.withPicture ? 0 : "4vw !important"; }, function (props) { return props.withPicture ? "bottom" : "top"; });
|
|
4812
4945
|
var ArtworkWrapper = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n min-height: 4rem;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n\n &:hover ", " {\n opacity: 1;\n }\n ", "\n"], ["\n width: 100%;\n height: ", ";\n min-height: 4rem;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n\n &:hover ", " {\n opacity: 1;\n }\n ", "\n"])), function (props) { return props.cssHeight > 0 ? props.cssHeight + "vw" : "auto"; }, ArtworkControls, SharedStyles);
|
|
4813
4946
|
var ArtworkPicture = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n width: 100%;\n height: calc(", "vw - 3.5rem);\n overflow: hidden;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);\n\n &:hover ", " {\n opacity: 1;\n }\n"], ["\n width: 100%;\n height: calc(", "vw - 3.5rem);\n overflow: hidden;\n position: relative;\n line-height: 1.5em;\n cursor: pointer;\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) { return props.cssHeight; }, ArtworkControls);
|
|
4814
4947
|
function truncate(filename, max) {
|
|
@@ -4847,12 +4980,12 @@ var Artwork = function (_a) {
|
|
|
4847
4980
|
"Updated ",
|
|
4848
4981
|
props.date) : null));
|
|
4849
4982
|
};
|
|
4850
|
-
var templateObject_1$s, templateObject_2$f, templateObject_3$
|
|
4983
|
+
var templateObject_1$s, templateObject_2$f, templateObject_3$9, templateObject_4$5, templateObject_5$4, templateObject_6$4;
|
|
4851
4984
|
|
|
4852
4985
|
var TaskLabel = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["display: flex; min-height: 25px; ", ""], ["display: flex; min-height: 25px; ", ""])), function (p) { return p.hasCheckbox ? "width: calc(100% - 24px);" : ''; });
|
|
4853
4986
|
var TaskName = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["flex-grow: 1; font-size:13px;"], ["flex-grow: 1; font-size:13px;"])));
|
|
4854
|
-
var StyledTask = styled.div(templateObject_3$
|
|
4855
|
-
var TaskBody = styled.div(templateObject_4$
|
|
4987
|
+
var StyledTask = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["margin-bottom: 1.5em; ", ""], ["margin-bottom: 1.5em; ", ""])), SharedStyles);
|
|
4988
|
+
var TaskBody = styled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["margin-left:34px;"], ["margin-left:34px;"])));
|
|
4856
4989
|
var Task = function (_a) {
|
|
4857
4990
|
var taskName = _a.taskName, date = _a.date; _a.done; var assignee = _a.assignee, taskBody = _a.taskBody, _b = _a.initialChecked, initialChecked = _b === void 0 ? false : _b, onClickCheckbox = _a.onClickCheckbox, props = __rest(_a, ["taskName", "date", "done", "assignee", "taskBody", "initialChecked", "onClickCheckbox"]);
|
|
4858
4991
|
var _c = useState(initialChecked), checked = _c[0], setChecked = _c[1];
|
|
@@ -4925,19 +5058,19 @@ var CalendarTask = React.forwardRef(function (_a, ref) {
|
|
|
4925
5058
|
assignee ? "for " + assignee : null,
|
|
4926
5059
|
assignee ? "on " : null)));
|
|
4927
5060
|
});
|
|
4928
|
-
var templateObject_1$r, templateObject_2$e, templateObject_3$
|
|
5061
|
+
var templateObject_1$r, templateObject_2$e, templateObject_3$8, templateObject_4$4, templateObject_5$3, templateObject_6$3;
|
|
4929
5062
|
|
|
4930
|
-
var PublisherWrapper = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"], ["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"])), function (props) { return getThemeColor(props, "bgblue", colors.bgblue); });
|
|
5063
|
+
var PublisherWrapper = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"], ["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"])), function (props) { return getThemeColor(props, "bgblue", colors$1.bgblue); });
|
|
4931
5064
|
var Publisher = function (props) {
|
|
4932
5065
|
return React.createElement(PublisherWrapper, null,
|
|
4933
5066
|
React.createElement(Textarea, { placeholder: "Post a note about this project" }));
|
|
4934
5067
|
};
|
|
4935
5068
|
var PostWrapper = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""], ["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""])), SharedStyles);
|
|
4936
|
-
var WidePart = styled.div(templateObject_3$
|
|
4937
|
-
var Date$1 = styled.span(templateObject_4$
|
|
5069
|
+
var WidePart = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["flex-grow:1;"], ["flex-grow:1;"])));
|
|
5070
|
+
var Date$1 = styled.span(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["color: ", "; display: inline-block;"], ["color: ", "; display: inline-block;"])), function (props) { return getThemeColor(props, "textbody", colors$1.textbody); });
|
|
4938
5071
|
var Action = styled.a(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["display: inline-block; margin-left: 10px;"], ["display: inline-block; margin-left: 10px;"])));
|
|
4939
|
-
var Author = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "], ["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "texttitle", colors.texttitle); });
|
|
4940
|
-
var Subject = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "], ["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
|
|
5072
|
+
var Author = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "], ["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "texttitle", colors$1.texttitle); });
|
|
5073
|
+
var Subject = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "], ["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "textbody", colors$1.textbody); });
|
|
4941
5074
|
var TopLine = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["display:flex;"], ["display:flex;"])));
|
|
4942
5075
|
var PostFooter = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["font-size:.9em;"], ["font-size:.9em;"])));
|
|
4943
5076
|
var Comments = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["margin-top: 1em;"], ["margin-top: 1em;"])));
|
|
@@ -4955,12 +5088,10 @@ var FeedPost = function (props) {
|
|
|
4955
5088
|
props.comments && props.comments.length > 0 ?
|
|
4956
5089
|
React.createElement(Comments, null, props.comments) : null));
|
|
4957
5090
|
};
|
|
4958
|
-
var templateObject_1$q, templateObject_2$d, templateObject_3$
|
|
5091
|
+
var templateObject_1$q, templateObject_2$d, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
4959
5092
|
|
|
4960
|
-
var Wrapper$1 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n
|
|
4961
|
-
var ErrorTextContainer = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n
|
|
4962
|
-
var BotContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n max-width: 450px;\n text-align: center;\n border-radius: 10px;\n font-size: 2em;\n padding: 40px;\n\n margin-right: auto;\n @media only screen and (max-width: 700px) {\n margin-left: auto;\n margin-top: 20px;\n }\n\n @media only screen and (min-width: 701px) {\n margin-left: 5px;\n }\n"], ["\n max-width: 450px;\n text-align: center;\n border-radius: 10px;\n font-size: 2em;\n padding: 40px;\n\n margin-right: auto;\n @media only screen and (max-width: 700px) {\n margin-left: auto;\n margin-top: 20px;\n }\n\n @media only screen and (min-width: 701px) {\n margin-left: 5px;\n }\n"])));
|
|
4963
|
-
var BotImg = styled.img(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin-top: 20px;\n padding: 0;\n margin: 0;\n max-width: 450px;\n"], ["\n margin-top: 20px;\n padding: 0;\n margin: 0;\n max-width: 450px;\n"])));
|
|
5093
|
+
var Wrapper$1 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n &&& {\n text-align: center;\n font-family: \"TT Norms Pro\", sans-serif;\n background: white;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ", " \n }\n"], ["\n &&& {\n text-align: center;\n font-family: \"TT Norms Pro\", sans-serif;\n background: white;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n ", " \n }\n"])), SharedStyles);
|
|
5094
|
+
var ErrorTextContainer = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: 100px 50px;\n margin-top: 100px;\n\n @media only screen and (max-width: 700px) {\n margin-right: auto;\n }\n\n @media only screen and (min-width: 701px) {\n margin-right: 10px;\n }\n"], ["\n padding: 100px 50px;\n margin-top: 100px;\n\n @media only screen and (max-width: 700px) {\n margin-right: auto;\n }\n\n @media only screen and (min-width: 701px) {\n margin-right: 10px;\n }\n"])));
|
|
4964
5095
|
var ErrorBoundary = /** @class */ (function (_super) {
|
|
4965
5096
|
__extends(ErrorBoundary, _super);
|
|
4966
5097
|
function ErrorBoundary(props) {
|
|
@@ -4973,22 +5104,29 @@ var ErrorBoundary = /** @class */ (function (_super) {
|
|
|
4973
5104
|
console.log({ error: error, info: info });
|
|
4974
5105
|
};
|
|
4975
5106
|
ErrorBoundary.prototype.render = function () {
|
|
5107
|
+
var goBack = function () {
|
|
5108
|
+
window$1.history.back();
|
|
5109
|
+
};
|
|
5110
|
+
var isNewTab = window$1.history.length === 1;
|
|
4976
5111
|
if (this.state.hasError) {
|
|
4977
5112
|
return (React.createElement(Wrapper$1, __assign({}, this.props),
|
|
4978
|
-
React.createElement(
|
|
4979
|
-
React.createElement(
|
|
4980
|
-
|
|
4981
|
-
|
|
4982
|
-
|
|
4983
|
-
|
|
4984
|
-
|
|
4985
|
-
React.createElement(
|
|
5113
|
+
React.createElement(ErrorTextContainer, null,
|
|
5114
|
+
React.createElement("b", { style: { color: '#2A4D63', fontSize: '64px' } }, "Sorry, something went wrong."),
|
|
5115
|
+
React.createElement("br", null),
|
|
5116
|
+
React.createElement("p", { style: { color: '#597486', fontSize: '24px', fontStyle: 'normal', lineHeight: '40px', fontWeight: 400, position: 'relative', zIndex: 100 } }, " We\u2019ve been notified about the error and will get it resolved shortly."),
|
|
5117
|
+
React.createElement("br", null),
|
|
5118
|
+
React.createElement("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' } },
|
|
5119
|
+
React.createElement(Button, { variant: "primary", size: "medium", id: "goBackButton", onClick: goBack, style: { marginRight: '25px', zIndex: 100, display: isNewTab ? 'none' : 'table-cell' } }, "Back to previous page"),
|
|
5120
|
+
React.createElement(Button, { variant: "text", size: "medium", style: { zIndex: 100 }, onClick: function (e) { return window$1.location.href = "/"; } }, "Go to homepage"))),
|
|
5121
|
+
React.createElement("div", { style: { position: 'absolute', bottom: '0', width: '100%' } },
|
|
5122
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "310", viewBox: "0 0 1510 310", fill: "none", preserveAspectRatio: "none" },
|
|
5123
|
+
React.createElement("path", { d: "M858 52.2161C498 -49.6986 200.667 20.7424 0 68.7022V310H1510V52.2166L1508.43 52.7138C1352.99 101.997 1202.45 149.728 858 52.2161Z", fill: "#EDF4F7" })))));
|
|
4986
5124
|
}
|
|
4987
5125
|
return this.props.children;
|
|
4988
5126
|
};
|
|
4989
5127
|
return ErrorBoundary;
|
|
4990
5128
|
}(Component));
|
|
4991
|
-
var templateObject_1$p, templateObject_2$c
|
|
5129
|
+
var templateObject_1$p, templateObject_2$c;
|
|
4992
5130
|
|
|
4993
5131
|
var CustomDateInput = forwardRef(function (_a, ref) {
|
|
4994
5132
|
var error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable, props = __rest(_a, ["error", "noMargin", "onClick", "isClearable"]);
|
|
@@ -5084,7 +5222,7 @@ var Dropdown = function (_a) {
|
|
|
5084
5222
|
};
|
|
5085
5223
|
var templateObject_1$o, templateObject_2$b, templateObject_3$6;
|
|
5086
5224
|
|
|
5087
|
-
var Badge = styled.span(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"], ["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"])), function (p) { return p.color === 'cta' ? colors.cta : p.color === 'grey' ? colors.primary0 : colors.primary; }, function (p) { return p.color === 'grey' ? colors.primary100 : colors.white; }, SharedStyles);
|
|
5225
|
+
var Badge = styled.span(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"], ["\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: 12px;\n font-weight: 700;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n background-color: ", ";\n color: ", ";\n border-radius: 10px;\n ", "\n"])), function (p) { return p.color === 'cta' ? colors$1.cta : p.color === 'grey' ? colors$1.primary0 : colors$1.primary; }, function (p) { return p.color === 'grey' ? colors$1.primary100 : colors$1.white; }, SharedStyles);
|
|
5088
5226
|
var templateObject_1$n;
|
|
5089
5227
|
|
|
5090
5228
|
var verticalScrollbarWidth = function () {
|
|
@@ -6087,8 +6225,8 @@ Transition.EXITING = EXITING;
|
|
|
6087
6225
|
var Transition$1 = Transition;
|
|
6088
6226
|
|
|
6089
6227
|
var CollapseStyled = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n&&& {\n .collapsed:not(.show) {\n display: none;\n }\n\n .collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n transition: height ", "s ease;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .collapsing {\n transition: none;\n }\n }\n}\n"], ["\n&&& {\n .collapsed:not(.show) {\n display: none;\n }\n\n .collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n transition: height ", "s ease;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .collapsing {\n transition: none;\n }\n }\n}\n"])), function (p) { return p.duration ? p.duration / 1000 : '0.35'; });
|
|
6090
|
-
var CollapseWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"], ["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"])), colors.primary0);
|
|
6091
|
-
var CollapsiblePanelTitle = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"], ["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"])), colors.primary0, colors.primary);
|
|
6228
|
+
var CollapseWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"], ["\n&&& {\n border: 1px solid ", ";\n border-radius: 5px;\n}\n"])), colors$1.primary0);
|
|
6229
|
+
var CollapsiblePanelTitle = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"], ["\n&&& {\n background: #f3f6f7;\n border-bottom: 1px solid ", ";\n color: ", ";\n padding: 20px;\n cursor: pointer;\n}\n"])), colors$1.primary0, colors$1.primary);
|
|
6092
6230
|
var transitionStatusToClass = {
|
|
6093
6231
|
entering: 'collapsing',
|
|
6094
6232
|
entered: 'collapsed show',
|
|
@@ -6272,7 +6410,7 @@ function Thermometer(_a) {
|
|
|
6272
6410
|
setValue1Width((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
|
|
6273
6411
|
}, []);
|
|
6274
6412
|
return (React.createElement("div", __assign({}, props),
|
|
6275
|
-
title ? React.createElement(Text, { style: { fontWeight: 'bold', fontSize: 18, color: colors.neutrals.bodyText } }, title) : null,
|
|
6413
|
+
title ? React.createElement(Text, { style: { fontWeight: 'bold', fontSize: 18, color: colors$1.neutrals.bodyText } }, title) : null,
|
|
6276
6414
|
React.createElement("div", { style: { paddingBottom: 20, paddingTop: 5 } },
|
|
6277
6415
|
React.createElement("span", { ref: measureTargetRef, style: {
|
|
6278
6416
|
position: 'absolute',
|
|
@@ -6284,13 +6422,13 @@ function Thermometer(_a) {
|
|
|
6284
6422
|
React.createElement("span", { ref: measureValue1Ref, style: {
|
|
6285
6423
|
position: 'absolute',
|
|
6286
6424
|
paddingRight: 5,
|
|
6287
|
-
color: labelTextColor || colors.secondary3.main,
|
|
6425
|
+
color: labelTextColor || colors$1.secondary3.main,
|
|
6288
6426
|
} },
|
|
6289
6427
|
value1Label + " $",
|
|
6290
6428
|
React.createElement(Number$1, { commas: true, decimalPoints: 0, num: value1 }))),
|
|
6291
6429
|
React.createElement("div", { ref: measureContainerRef },
|
|
6292
6430
|
React.createElement(ProgressWrapper, { style: { marginTop: 10, background: isSecondary ? '#FFF9C5' : '#C9FDE5' } },
|
|
6293
|
-
React.createElement(ProgressBar, { target: target, value: value1, color: barColor || colors.secondary3.main, offset: calcVal1Width(), elementWidth: value1Width })))));
|
|
6431
|
+
React.createElement(ProgressBar, { target: target, value: value1, color: barColor || colors$1.secondary3.main, offset: calcVal1Width(), elementWidth: value1Width })))));
|
|
6294
6432
|
}
|
|
6295
6433
|
var templateObject_1$g, templateObject_2$4;
|
|
6296
6434
|
|
|
@@ -6312,7 +6450,7 @@ function LightIndicatorLight(_a) {
|
|
|
6312
6450
|
React.createElement("defs", null,
|
|
6313
6451
|
React.createElement("radialGradient", { id: lightID, cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: gradientTransform }, litOrNot)));
|
|
6314
6452
|
}
|
|
6315
|
-
var LightIndicatorText = styled.p(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.large ? themeOptions.fontStyles.p.medium.fontSize : themeOptions.fontStyles.p.small.fontSize; }, themeOptions.fontStyles.p.small.fontFamily, themeOptions.fontStyles.p.small.lineHeight, function (props) { return props.LightIndicatorTextColor ? colors.neutrals.bodyText : colors.neutrals[70]; });
|
|
6453
|
+
var LightIndicatorText = styled.p(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.large ? themeOptions.fontStyles.p.medium.fontSize : themeOptions.fontStyles.p.small.fontSize; }, themeOptions.fontStyles.p.small.fontFamily, themeOptions.fontStyles.p.small.lineHeight, function (props) { return props.LightIndicatorTextColor ? colors$1.neutrals.bodyText : colors$1.neutrals[70]; });
|
|
6316
6454
|
var LightIndicatorContainer = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n max-width: 100%;\n margin-bottom: 8px;\n margin-right: 16px;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n max-width: 100%;\n margin-bottom: 8px;\n margin-right: 16px;\n ", "\n ", "\n }\n"])), SharedStyles, SizerCss);
|
|
6317
6455
|
function LightIndicator(_a) {
|
|
6318
6456
|
var _b = _a.name, name = _b === void 0 ? "Name this Indicator" : _b, _c = _a.on, on = _c === void 0 ? false : _c, _d = _a.large, large = _d === void 0 ? false : _d, _e = _a.textProps, textProps = _e === void 0 ? {} : _e, props = __rest(_a, ["name", "on", "large", "textProps"]);
|
|
@@ -6322,7 +6460,7 @@ function LightIndicator(_a) {
|
|
|
6322
6460
|
}
|
|
6323
6461
|
var templateObject_1$f, templateObject_2$3;
|
|
6324
6462
|
|
|
6325
|
-
var DefaultStarText = styled.p(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.clicked ? 1 : props.hover ? 0.8 : 0; }, themeOptions.fontStyles.p.medium.fontSize, themeOptions.fontStyles.p.medium.fontFamily, themeOptions.fontStyles.p.medium.lineHeight, function (props) { return props.clicked ? props.color : colors.neutrals[60]; });
|
|
6463
|
+
var DefaultStarText = styled.p(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"], ["\n &&& {\n opacity: ", ";\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n max-width: 180px;\n margin-top:0;\n margin-bottom:0;\n };\n"])), function (props) { return props.clicked ? 1 : props.hover ? 0.8 : 0; }, themeOptions.fontStyles.p.medium.fontSize, themeOptions.fontStyles.p.medium.fontFamily, themeOptions.fontStyles.p.medium.lineHeight, function (props) { return props.clicked ? props.color : colors$1.neutrals[60]; });
|
|
6326
6464
|
var DefaultStarContainer = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n width: ", ";\n margin-bottom: 16px;\n margin-right: 16px;\n cursor: pointer;\n ", "\n ", "\n }\n"], ["\n &&& {\n display: flex;\n vertical-align: middle;\n align-items: top;\n width: ", ";\n margin-bottom: 16px;\n margin-right: 16px;\n cursor: pointer;\n ", "\n ", "\n }\n"])), function (props) { return props.width ? props.width : props.noText ? '24px' : '128px'; }, SharedStyles, SizerCss);
|
|
6327
6465
|
function DefaultStar(_a) {
|
|
6328
6466
|
var _b = _a.initialSelected, initialSelected = _b === void 0 ? false : _b, _c = _a.forceSelected, forceSelected = _c === void 0 ? false : _c, hoverText = _a.hoverText, _d = _a.noText, noText = _d === void 0 ? false : _d, _e = _a.children, children = _e === void 0 ? "Default" : _e, width = _a.width, _f = _a.color, color = _f === void 0 ? teal.main : _f; __rest(_a, ["initialSelected", "forceSelected", "hoverText", "noText", "children", "width", "color"]);
|
|
@@ -6348,9 +6486,9 @@ function DoneButton(_a) {
|
|
|
6348
6486
|
return (React.createElement(Button, __assign({ variant: variant, size: size }, Props), "Done"));
|
|
6349
6487
|
}
|
|
6350
6488
|
|
|
6351
|
-
var StyledLink = styled.a(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.color || colors.teal.main; }, function (props) { return props.flexShrink ? "flex-shrink: 0;" : null; }, SharedStyles, SizerCss, function (props) { return props.hoverColor ? props.hoverColor : colors.teal.dark; });
|
|
6489
|
+
var StyledLink = styled.a(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"], ["\n &&& {\n font-size: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n display: flex;\n ", ";\n ", "\n ", "\n &:hover {\n color: ", ";\n }\n } \n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.color || colors$1.teal.main; }, function (props) { return props.flexShrink ? "flex-shrink: 0;" : null; }, SharedStyles, SizerCss, function (props) { return props.hoverColor ? props.hoverColor : colors$1.teal.dark; });
|
|
6352
6490
|
function LinkWithIcon(_a) {
|
|
6353
|
-
var Icon = _a.Icon, href = _a.href, children = _a.children, _b = _a.color, color = _b === void 0 ? colors.teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? colors.teal.dark : _c, _d = _a.flexShrink, flexShrink = _d === void 0 ? false : _d, iconProps = _a.iconProps, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["Icon", "href", "children", "color", "hoverColor", "flexShrink", "iconProps", "style"]);
|
|
6491
|
+
var Icon = _a.Icon, href = _a.href, children = _a.children, _b = _a.color, color = _b === void 0 ? colors$1.teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? colors$1.teal.dark : _c, _d = _a.flexShrink, flexShrink = _d === void 0 ? false : _d, iconProps = _a.iconProps, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["Icon", "href", "children", "color", "hoverColor", "flexShrink", "iconProps", "style"]);
|
|
6354
6492
|
var _f = useState(false), isHover = _f[0], setHover = _f[1];
|
|
6355
6493
|
var RenderIcon = React.useMemo(function () {
|
|
6356
6494
|
if (!Icon) {
|
|
@@ -6380,29 +6518,29 @@ var NotificationExtraContent = memo(function (props) {
|
|
|
6380
6518
|
var NotificationIcon = memo(function (props) {
|
|
6381
6519
|
var alertType = props.alertType;
|
|
6382
6520
|
if (alertType === "success") {
|
|
6383
|
-
return React.createElement(CompletedCheckmarkIcon, { color: colors.green.dark, mr: 8, style: { flexShrink: 0 } });
|
|
6521
|
+
return React.createElement(CompletedCheckmarkIcon, { color: colors$1.green.dark, mr: 8, style: { flexShrink: 0 } });
|
|
6384
6522
|
}
|
|
6385
6523
|
else if (alertType === "error") {
|
|
6386
|
-
return React.createElement(AlertIcon, { color: colors.errors.dark, mr: 8, style: { flexShrink: 0 } });
|
|
6524
|
+
return React.createElement(AlertIcon, { color: colors$1.errors.dark, mr: 8, style: { flexShrink: 0 } });
|
|
6387
6525
|
}
|
|
6388
|
-
return React.createElement(InfoIcon, { color: colors.navy.dark, mr: 8, style: { flexShrink: 0 } });
|
|
6526
|
+
return React.createElement(InfoIcon, { color: colors$1.navy.dark, mr: 8, style: { flexShrink: 0 } });
|
|
6389
6527
|
});
|
|
6390
6528
|
var notificationVariantStyles = function (alertType) {
|
|
6391
6529
|
switch (alertType) {
|
|
6392
6530
|
case "neutral":
|
|
6393
6531
|
return {
|
|
6394
|
-
backgroundColor: colors.navy.lightest,
|
|
6395
|
-
color: colors.navy.dark,
|
|
6532
|
+
backgroundColor: colors$1.navy.lightest,
|
|
6533
|
+
color: colors$1.navy.dark,
|
|
6396
6534
|
};
|
|
6397
6535
|
case "success":
|
|
6398
6536
|
return {
|
|
6399
|
-
backgroundColor: colors.green.lightest,
|
|
6400
|
-
color: colors.green.darkest,
|
|
6537
|
+
backgroundColor: colors$1.green.lightest,
|
|
6538
|
+
color: colors$1.green.darkest,
|
|
6401
6539
|
};
|
|
6402
6540
|
case "error":
|
|
6403
6541
|
return {
|
|
6404
|
-
backgroundColor: colors.errors.lightest,
|
|
6405
|
-
color: colors.errors.dark,
|
|
6542
|
+
backgroundColor: colors$1.errors.lightest,
|
|
6543
|
+
color: colors$1.errors.dark,
|
|
6406
6544
|
};
|
|
6407
6545
|
default:
|
|
6408
6546
|
return {};
|
|
@@ -6987,8 +7125,8 @@ var BaseCollapsible = function (props) {
|
|
|
6987
7125
|
setHeight(0);
|
|
6988
7126
|
}, [isOpen]);
|
|
6989
7127
|
return (React.createElement("div", { style: style },
|
|
6990
|
-
React.createElement(Row, { style: __assign({ alignItems: 'center', padding: 10, paddingTop: 12, paddingBottom: 8, background: isOpen ? colors.white : colors.teal[20], borderRadius: isOpen ? 25 : 2000, flex: 'none', order: 1, flexGrow: 0 }, (isOpen
|
|
6991
|
-
? { border: "3px solid ".concat(colors.teal.main) }
|
|
7128
|
+
React.createElement(Row, { style: __assign({ alignItems: 'center', padding: 10, paddingTop: 12, paddingBottom: 8, background: isOpen ? colors$1.white : colors$1.teal[20], borderRadius: isOpen ? 25 : 2000, flex: 'none', order: 1, flexGrow: 0 }, (isOpen
|
|
7129
|
+
? { border: "3px solid ".concat(colors$1.teal.main) }
|
|
6992
7130
|
: {})) },
|
|
6993
7131
|
React.createElement(CollapsibleHeader, { isOpen: isOpen, handleToggle: handleToggle, controls: controls }, header || label),
|
|
6994
7132
|
React.createElement(Col, { xs: true, style: {
|
|
@@ -7031,7 +7169,7 @@ var CollapsibleLabel = function (props) {
|
|
|
7031
7169
|
}
|
|
7032
7170
|
if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
|
|
7033
7171
|
return React.createElement("span", { style: {
|
|
7034
|
-
color: colors.teal.main,
|
|
7172
|
+
color: colors$1.teal.main,
|
|
7035
7173
|
fontFamily: fontFamilies.bold,
|
|
7036
7174
|
fontStyle: 'normal',
|
|
7037
7175
|
fontWeight: 500,
|
|
@@ -7059,7 +7197,7 @@ var CollapsibleControls = function (props) {
|
|
|
7059
7197
|
}
|
|
7060
7198
|
if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
|
|
7061
7199
|
return React.createElement("span", { style: {
|
|
7062
|
-
color: colors.teal.main,
|
|
7200
|
+
color: colors$1.teal.main,
|
|
7063
7201
|
fontFamily: fontFamilies.bold,
|
|
7064
7202
|
fontStyle: 'normal',
|
|
7065
7203
|
fontWeight: 500,
|
|
@@ -7084,7 +7222,7 @@ var ConfirmPopup = function (props) {
|
|
|
7084
7222
|
fontFamily: fontStyles.p.medium.fontFamily,
|
|
7085
7223
|
fontSize: fontStyles.p.medium.fontSize,
|
|
7086
7224
|
lineHeight: fontStyles.p.medium.lineHeight,
|
|
7087
|
-
color: colors.neutrals.bodyText
|
|
7225
|
+
color: colors$1.neutrals.bodyText
|
|
7088
7226
|
} }, confirmText),
|
|
7089
7227
|
React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
|
|
7090
7228
|
React.createElement(Button, { size: "medium", variant: 'secondary', mr: 24, onClick: function () {
|
|
@@ -7124,8 +7262,8 @@ var PopupTitle = function (_a) {
|
|
|
7124
7262
|
var PopupContent = function (_a) {
|
|
7125
7263
|
var children = _a.children;
|
|
7126
7264
|
return (React.createElement("div", { style: {
|
|
7127
|
-
background: colors.errors[10],
|
|
7128
|
-
color: colors.errors.main,
|
|
7265
|
+
background: colors$1.errors[10],
|
|
7266
|
+
color: colors$1.errors.main,
|
|
7129
7267
|
padding: 16,
|
|
7130
7268
|
} },
|
|
7131
7269
|
React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
|
|
@@ -7134,12 +7272,12 @@ var PopupContent = function (_a) {
|
|
|
7134
7272
|
verticalAlign: 'middle',
|
|
7135
7273
|
alignSelf: 'center',
|
|
7136
7274
|
} },
|
|
7137
|
-
React.createElement(AlertIcon, { size: 'medium', color: colors.errors[70] })),
|
|
7275
|
+
React.createElement(AlertIcon, { size: 'medium', color: colors$1.errors[70] })),
|
|
7138
7276
|
React.createElement("div", { style: {
|
|
7139
7277
|
fontFamily: 'var(--font-family-regular)',
|
|
7140
7278
|
fontSize: fontStyles.p.large.fontSize,
|
|
7141
7279
|
lineHeight: fontStyles.p.medium.lineHeight,
|
|
7142
|
-
color: colors.errors.main,
|
|
7280
|
+
color: colors$1.errors.main,
|
|
7143
7281
|
} }, children))));
|
|
7144
7282
|
};
|
|
7145
7283
|
|
|
@@ -7175,7 +7313,7 @@ var CalendarDaysBody = function (_a) {
|
|
|
7175
7313
|
var DaysHeaderWrapper = styled(Row)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n text-transform: uppercase;\n font-weight: 400;\n color: #ccc;\n font-size: 70%;\n padding: 0.75em 0 !important;\n border-bottom: 1px solid #eee;\n"], ["\n text-transform: uppercase;\n font-weight: 400;\n color: #ccc;\n font-size: 70%;\n padding: 0.75em 0 !important;\n border-bottom: 1px solid #eee;\n"])));
|
|
7176
7314
|
var templateObject_1$6;
|
|
7177
7315
|
|
|
7178
|
-
var StyledDayText = styled(Text)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return props.selected ? "\n border-radius: 15px;\n background: ".concat(colors.cta, ";\n color: white;\n font-weight: bold;\n padding: 0 5px;\n ") : ''; });
|
|
7316
|
+
var StyledDayText = styled(Text)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return props.selected ? "\n border-radius: 15px;\n background: ".concat(colors$1.cta, ";\n color: white;\n font-weight: bold;\n padding: 0 5px;\n ") : ''; });
|
|
7179
7317
|
var templateObject_1$5;
|
|
7180
7318
|
|
|
7181
7319
|
var CalendarDaysHeader = function (_a) {
|
|
@@ -7213,11 +7351,11 @@ var DefaultCalendarHeader = function (_a) {
|
|
|
7213
7351
|
React.createElement(Row, null,
|
|
7214
7352
|
React.createElement(LabeledCheckbox, { label: "Weekends", checked: true })))),
|
|
7215
7353
|
React.createElement(Col, { padded: true },
|
|
7216
|
-
React.createElement("div", { style: { cursor: 'pointer', color: colors.primary, }, onClick: onPrevWeek }, "< Prev Week")),
|
|
7354
|
+
React.createElement("div", { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onPrevWeek }, "< Prev Week")),
|
|
7217
7355
|
React.createElement(Col, { center: true, padded: true },
|
|
7218
|
-
React.createElement("span", { style: { color: colors.disabledButton } }, format(currentMonth, "MMM yyyy"))),
|
|
7356
|
+
React.createElement("span", { style: { color: colors$1.disabledButton } }, format(currentMonth, "MMM yyyy"))),
|
|
7219
7357
|
React.createElement(Col, { end: true, padded: true },
|
|
7220
|
-
React.createElement("div", { style: { cursor: 'pointer', color: colors.primary, }, onClick: onNextWeek }, "Next Week >"))));
|
|
7358
|
+
React.createElement("div", { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onNextWeek }, "Next Week >"))));
|
|
7221
7359
|
};
|
|
7222
7360
|
|
|
7223
7361
|
var TasksCalendarDayBody = function (_a) {
|
|
@@ -7289,7 +7427,7 @@ var CalendarIconDatePicker = React.forwardRef(function (_a, ref) {
|
|
|
7289
7427
|
textAlign: 'center',
|
|
7290
7428
|
borderRadius: 5,
|
|
7291
7429
|
cursor: 'pointer',
|
|
7292
|
-
color: colors.disabledButton,
|
|
7430
|
+
color: colors$1.disabledButton,
|
|
7293
7431
|
} })));
|
|
7294
7432
|
});
|
|
7295
7433
|
var TasksCalendarHeader = function (_a) {
|
|
@@ -7331,7 +7469,7 @@ var TasksCalendarHeader = function (_a) {
|
|
|
7331
7469
|
}
|
|
7332
7470
|
} })),
|
|
7333
7471
|
React.createElement("span", null,
|
|
7334
|
-
React.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary, verticalAlign: 'middle' }, onClick: onPrevWeek },
|
|
7472
|
+
React.createElement(WeekNav, { style: { cursor: 'pointer', color: colors$1.primary, verticalAlign: 'middle' }, onClick: onPrevWeek },
|
|
7335
7473
|
React.createElement(ChevronIcon, { direction: "left", size: 'large' })),
|
|
7336
7474
|
React.createElement(WeekNav, { as: Button, variant: "text", size: "primary-light", style: { verticalAlign: "middle", padding: "10px 0px", }, py: 5, onClick: function () {
|
|
7337
7475
|
if (isCurrentWeek) {
|
|
@@ -7339,7 +7477,7 @@ var TasksCalendarHeader = function (_a) {
|
|
|
7339
7477
|
}
|
|
7340
7478
|
onResetDate();
|
|
7341
7479
|
} }, "Today"),
|
|
7342
|
-
React.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary1.main, verticalAlign: 'middle' }, onClick: onNextWeek },
|
|
7480
|
+
React.createElement(WeekNav, { style: { cursor: 'pointer', color: colors$1.primary1.main, verticalAlign: 'middle' }, onClick: onNextWeek },
|
|
7343
7481
|
React.createElement(ChevronIcon, { size: "large" })))),
|
|
7344
7482
|
React.createElement(Col, { start: 1, xs: true, md: 8, padded: true },
|
|
7345
7483
|
React.createElement(Tabs, { size: "medium", tabs: tabs })),
|
|
@@ -7347,7 +7485,7 @@ var TasksCalendarHeader = function (_a) {
|
|
|
7347
7485
|
React.createElement(Link, { as: "span", onClick: onClickAddTask, style: {
|
|
7348
7486
|
marginRight: 10,
|
|
7349
7487
|
verticalAlign: 'bottom',
|
|
7350
|
-
color: colors.primary1.main,
|
|
7488
|
+
color: colors$1.primary1.main,
|
|
7351
7489
|
fontFamily: [themeOptions.fontFamilies.regular].concat(themeOptions.fontFamilies.fallbacks).join(','),
|
|
7352
7490
|
fontWeight: 600,
|
|
7353
7491
|
} }, "+ Add Task")
|
|
@@ -7653,7 +7791,7 @@ var SimpleWindowedTableStyles = styled.div(templateObject_1$1 || (templateObject
|
|
|
7653
7791
|
"border: ".concat(typeof p.bordered === 'string'
|
|
7654
7792
|
? p.bordered
|
|
7655
7793
|
: "1px solid ".concat(getThemeColor(p, 'tableBorder', '#edf2f5')), ";")
|
|
7656
|
-
: ''; }, colors.disabledButtonBorder, colors.disabledButtonBorder, function (p) { return p.hoverRowBg ?
|
|
7794
|
+
: ''; }, colors$1.disabledButtonBorder, colors$1.disabledButtonBorder, function (p) { return p.hoverRowBg ?
|
|
7657
7795
|
".tr:not(.header.tr, .table-footer.tr):hover {\n background: ".concat(typeof p.hoverRowBg === 'string'
|
|
7658
7796
|
? p.hoverRowBg
|
|
7659
7797
|
: getThemeColor(p, 'tableHeaderBg', '#F6FEFF'), ";\n }") : ''; }, function (p) { return p.selectedRowIndex && p.selectedRowStyle ?
|
|
@@ -7775,7 +7913,7 @@ var createAnimationLeftStyle = function (p) {
|
|
|
7775
7913
|
};
|
|
7776
7914
|
var ContainerStyled = styled(Csku)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &&& {\n position: relative;\n background: ", ";\n width: ", ";\n padding: 0.35rem;\n border-radius: 1.8rem;\n cursor: pointer;\n transition: background .3s;\n\n @keyframes switch-slide-to-right {\n from { left: 0; }\n to {\n left: ", ";\n }\n }\n \n @keyframes switch-slide-to-left {\n from {\n left: ", ";\n }\n to { left: 0; }\n }\n }"], ["\n &&& {\n position: relative;\n background: ", ";\n width: ", ";\n padding: 0.35rem;\n border-radius: 1.8rem;\n cursor: pointer;\n transition: background .3s;\n\n @keyframes switch-slide-to-right {\n from { left: 0; }\n to {\n left: ", ";\n }\n }\n \n @keyframes switch-slide-to-left {\n from {\n left: ", ";\n }\n to { left: 0; }\n }\n }"])), function (p) { return p.selected
|
|
7777
7915
|
? getThemeColor(p, 'teal.main', 'var(--color-primary1-main)')
|
|
7778
|
-
: getThemeColor(p, 'teal.20', colors.teal['20']); }, function (p) { return p.stretch
|
|
7916
|
+
: getThemeColor(p, 'teal.20', colors$1.teal['20']); }, function (p) { return p.stretch
|
|
7779
7917
|
? '100%'
|
|
7780
7918
|
: "".concat(stripUnit(toggleSizes[p.size || 'medium'].height) * 2.5, "px"); }, createAnimationLeftStyle, createAnimationLeftStyle);
|
|
7781
7919
|
var ToggleSwitchDotStyled = styled(Csku)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &&& {\n position: relative;\n background: #FFFFFF;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n\n animation: ", ";\n }\n"], ["\n &&& {\n position: relative;\n background: #FFFFFF;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n\n animation: ", ";\n }\n"])), function (p) { return toggleSizes[p.size || 'medium'].height; }, function (p) { return toggleSizes[p.size || 'medium'].height; }, function (p) { return p.selected
|
|
@@ -7842,5 +7980,5 @@ var Dropzone = React.forwardRef(function (_a, ref) {
|
|
|
7842
7980
|
React.createElement(RenderChild, { parseProps: parseChildProps }, children))));
|
|
7843
7981
|
});
|
|
7844
7982
|
|
|
7845
|
-
export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
|
|
7983
|
+
export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent$2 as DropDownContent, Dropdown, DropdownItem$2 as DropdownItem, Dropzone, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, RenderChild, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, SkubotLogo, SkubotSpinner, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown$2 as StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG$1 as SvgIcon, TBody, TD$1 as TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchStyled, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper$4 as Wrapper, XIcon, colors$1 as colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor$1 as getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
|
|
7846
7984
|
//# sourceMappingURL=index.mjs.map
|