@appquality/unguess-design-system 2.10.67 → 2.10.68
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/CHANGELOG.md +12 -0
- package/build/index.d.ts +1 -0
- package/build/index.js +91 -58
- package/build/stories/dropdowns/autocomplete/index.stories.d.ts +1 -0
- package/build/stories/dropdowns/item-content/_types.d.ts +9 -0
- package/build/stories/dropdowns/item-content/index.d.ts +3 -0
- package/build/stories/theme/components.d.ts +3 -0
- package/build/stories/theme/index.d.ts +3 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.10.68 (Tue Aug 02 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- feat(item-with-media): add new item content to handle media ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.10.67 (Fri Jul 29 2022)
|
|
2
14
|
|
|
3
15
|
#### ⚠️ Pushed to `master`
|
package/build/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export * from "./stories/counter";
|
|
|
18
18
|
export * from "./stories/drawers";
|
|
19
19
|
export * as DropdownField from "./stories/dropdowns/field";
|
|
20
20
|
export * from "./stories/dropdowns/item";
|
|
21
|
+
export * from "./stories/dropdowns/item-content";
|
|
21
22
|
export * from "./stories/dropdowns/menu";
|
|
22
23
|
export * from "./stories/dropdowns/multiselect";
|
|
23
24
|
export * from "./stories/dropdowns/select";
|
package/build/index.js
CHANGED
|
@@ -257,12 +257,14 @@ var gradients = {
|
|
|
257
257
|
var _a, _b, _c, _d, _e, _f, _g$3, _h;
|
|
258
258
|
var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
|
|
259
259
|
imgMaxHeight: "214px",
|
|
260
|
+
}, autocomplete: {
|
|
261
|
+
thumbSize: "60px",
|
|
260
262
|
} });
|
|
261
263
|
|
|
262
264
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
263
265
|
|
|
264
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
265
|
-
var templateObject_1$
|
|
266
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
|
|
267
|
+
var templateObject_1$1f;
|
|
266
268
|
|
|
267
269
|
/**
|
|
268
270
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -277,14 +279,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
|
|
|
277
279
|
Accordion.Label = reactAccordions.Accordion.Label;
|
|
278
280
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
279
281
|
|
|
280
|
-
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$
|
|
282
|
+
var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"], ["\n background-color: white;\n color: ", ";\n border-width: 2px;\n font-size: ", ";\n"])), function (_a) {
|
|
281
283
|
var theme = _a.theme;
|
|
282
284
|
return theme.palette.grey[700];
|
|
283
285
|
}, function (_a) {
|
|
284
286
|
var theme = _a.theme;
|
|
285
287
|
return theme.fontSizes.sm;
|
|
286
288
|
});
|
|
287
|
-
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$
|
|
289
|
+
var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n font-size: ", ";\n"], ["\n font-size: ", ";\n"])), function (_a) {
|
|
288
290
|
var theme = _a.theme;
|
|
289
291
|
return theme.fontSizes.md;
|
|
290
292
|
});
|
|
@@ -298,9 +300,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
|
|
|
298
300
|
var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
|
|
299
301
|
Alert.Title = UgAlertTitle;
|
|
300
302
|
Alert.Close = reactNotifications.Close;
|
|
301
|
-
var templateObject_1$
|
|
303
|
+
var templateObject_1$1e, templateObject_2$v;
|
|
302
304
|
|
|
303
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
305
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n"], ["\n text-transform: uppercase;\n\n ", "\n"])), function (props) {
|
|
304
306
|
return props.avatarType &&
|
|
305
307
|
props.avatarType !== "image" &&
|
|
306
308
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -324,7 +326,7 @@ var Avatar = function (props) {
|
|
|
324
326
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
325
327
|
};
|
|
326
328
|
Avatar.Text = UgAvatar.Text;
|
|
327
|
-
var templateObject_1$
|
|
329
|
+
var templateObject_1$1d;
|
|
328
330
|
|
|
329
331
|
/**
|
|
330
332
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -355,7 +357,7 @@ var getThemeStyle = function (props) {
|
|
|
355
357
|
}
|
|
356
358
|
return theme;
|
|
357
359
|
};
|
|
358
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
360
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject([""], [""])));
|
|
359
361
|
/**
|
|
360
362
|
* Buttons let users take action quickly.
|
|
361
363
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -373,7 +375,7 @@ var Button = function (props) {
|
|
|
373
375
|
};
|
|
374
376
|
Button.StartIcon = UgButton.StartIcon;
|
|
375
377
|
Button.EndIcon = UgButton.EndIcon;
|
|
376
|
-
var templateObject_1$
|
|
378
|
+
var templateObject_1$1c;
|
|
377
379
|
|
|
378
380
|
/**
|
|
379
381
|
A Button group lets users make a selection from a set of options.
|
|
@@ -403,7 +405,7 @@ Used for this:
|
|
|
403
405
|
**/
|
|
404
406
|
var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
|
|
405
407
|
|
|
406
|
-
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
408
|
+
var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n ", "\n"])), function (_a) {
|
|
407
409
|
var theme = _a.theme;
|
|
408
410
|
return theme.borderRadii.lg;
|
|
409
411
|
}, function (_a) {
|
|
@@ -424,7 +426,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
|
|
|
424
426
|
- To group related content
|
|
425
427
|
*/
|
|
426
428
|
var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
|
|
427
|
-
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$
|
|
429
|
+
var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
428
430
|
var theme = _a.theme;
|
|
429
431
|
return theme.borderRadii.xl;
|
|
430
432
|
}, function (_a) {
|
|
@@ -441,7 +443,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
|
|
|
441
443
|
return "".concat(theme.space.xl, " ").concat(theme.space.md);
|
|
442
444
|
});
|
|
443
445
|
var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
|
|
444
|
-
var templateObject_1$
|
|
446
|
+
var templateObject_1$1b, templateObject_2$u;
|
|
445
447
|
|
|
446
448
|
/**
|
|
447
449
|
* Tags let users categorize content using a keyword.
|
|
@@ -656,7 +658,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
|
|
|
656
658
|
})));
|
|
657
659
|
};
|
|
658
660
|
|
|
659
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
661
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n border-radius: ", ";\n ", "\n"], ["\n border-radius: ", ";\n ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
|
|
660
662
|
return props.isLight ?
|
|
661
663
|
"\n &:before {\n background-image: linear-gradient(45deg, transparent, ".concat(props.theme.palette.grey[200], ", transparent);\n }\n ") : "\n background-color: ".concat(props.theme.palette.grey[200], ";\n ");
|
|
662
664
|
});
|
|
@@ -674,22 +676,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
674
676
|
- To communicate a typing status, use Inline instead
|
|
675
677
|
*/
|
|
676
678
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
677
|
-
var templateObject_1$
|
|
679
|
+
var templateObject_1$1a;
|
|
678
680
|
|
|
679
|
-
var CardMeta = styled__default["default"].div(templateObject_1$
|
|
681
|
+
var CardMeta = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
680
682
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
|
|
681
683
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n height: ").concat(theme.space.base * 6, "px;\n padding: ").concat(theme.space.xxs, " 0;\n margin-bottom: ").concat(theme.space.xs, ";\n ");
|
|
682
684
|
});
|
|
683
|
-
var templateObject_1$
|
|
685
|
+
var templateObject_1$19;
|
|
684
686
|
|
|
685
|
-
var CardThumbnail = styled__default["default"].div(templateObject_1$
|
|
687
|
+
var CardThumbnail = styled__default["default"].div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
686
688
|
var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
|
|
687
689
|
return "\n display: flex;\n\n ".concat(!isStretched ? "max-width: ".concat(theme.space.base * 16, "px") : "", ";\n max-height: ").concat(isStretched ? '150px' : "".concat(theme.space.base * 16, "px"), ";\n ").concat(align === "left" ? "margin-right: auto;" : '', "\n ").concat(align === "right" ? "margin-left: auto;" : '', "\n ").concat(align === "center" || isStretched ? "margin: auto;" : '', "\n\n padding: ").concat(theme.space.xxs, " 0;\n\n svg {\n width: 100%;\n height: auto;\n }\n ");
|
|
688
690
|
});
|
|
689
691
|
CardThumbnail.defaultProps = {
|
|
690
692
|
align: "left"
|
|
691
693
|
};
|
|
692
|
-
var templateObject_1$
|
|
694
|
+
var templateObject_1$18;
|
|
693
695
|
|
|
694
696
|
/**
|
|
695
697
|
* Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
|
|
@@ -701,11 +703,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
|
|
|
701
703
|
var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
|
|
702
704
|
var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
|
|
703
705
|
|
|
704
|
-
var Label$
|
|
706
|
+
var Label$2 = styled__default["default"](SM)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
705
707
|
var theme = _a.theme;
|
|
706
708
|
return theme.palette.grey[500];
|
|
707
709
|
});
|
|
708
|
-
var Title$3 = styled__default["default"](LG)(templateObject_2$
|
|
710
|
+
var Title$3 = styled__default["default"](LG)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
709
711
|
var theme = _a.theme;
|
|
710
712
|
return theme.colors.primaryHue;
|
|
711
713
|
}, function (_a) {
|
|
@@ -715,24 +717,24 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$s || (templateObje
|
|
|
715
717
|
var theme = _a.theme;
|
|
716
718
|
return theme.space.xxs;
|
|
717
719
|
});
|
|
718
|
-
var Description$
|
|
720
|
+
var Description$3 = styled__default["default"](MD)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
719
721
|
var theme = _a.theme;
|
|
720
722
|
return theme.palette.grey[700];
|
|
721
723
|
}, function (_a) {
|
|
722
724
|
var theme = _a.theme;
|
|
723
725
|
return theme.space.xxs;
|
|
724
726
|
});
|
|
725
|
-
var Container$
|
|
727
|
+
var Container$2 = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
726
728
|
var theme = _a.theme, align = _a.align;
|
|
727
729
|
return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
|
|
728
730
|
});
|
|
729
|
-
var CardHeader = function (props) { return jsxRuntime.jsx(Container$
|
|
730
|
-
CardHeader.Label = Label$
|
|
731
|
+
var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign({}, props)); };
|
|
732
|
+
CardHeader.Label = Label$2;
|
|
731
733
|
CardHeader.Title = Title$3;
|
|
732
|
-
CardHeader.Text = Description$
|
|
733
|
-
var templateObject_1$
|
|
734
|
+
CardHeader.Text = Description$3;
|
|
735
|
+
var templateObject_1$17, templateObject_2$t, templateObject_3$j, templateObject_4$c;
|
|
734
736
|
|
|
735
|
-
var Divider = styled__default["default"].div(templateObject_1$
|
|
737
|
+
var Divider = styled__default["default"].div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
736
738
|
var theme = _a.theme;
|
|
737
739
|
return theme.space.base * 3;
|
|
738
740
|
}, function (_a) {
|
|
@@ -742,15 +744,15 @@ var Divider = styled__default["default"].div(templateObject_1$15 || (templateObj
|
|
|
742
744
|
var theme = _a.theme;
|
|
743
745
|
return theme.palette.grey["300"];
|
|
744
746
|
});
|
|
745
|
-
var Footer$2 = styled__default["default"].div(templateObject_2$
|
|
746
|
-
var Container = styled__default["default"].div(templateObject_3$
|
|
747
|
+
var Footer$2 = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
|
|
748
|
+
var Container$1 = styled__default["default"].div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
747
749
|
var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
|
|
748
750
|
return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
|
|
749
751
|
});
|
|
750
|
-
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
|
|
751
|
-
var templateObject_1$
|
|
752
|
+
var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
|
|
753
|
+
var templateObject_1$16, templateObject_2$s, templateObject_3$i;
|
|
752
754
|
|
|
753
|
-
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$
|
|
755
|
+
var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
|
|
754
756
|
var theme = _a.theme;
|
|
755
757
|
return theme.borderRadii.lg;
|
|
756
758
|
}, function (_a) {
|
|
@@ -776,7 +778,7 @@ SpecialCard.Meta = CardMeta;
|
|
|
776
778
|
SpecialCard.Thumb = CardThumbnail;
|
|
777
779
|
SpecialCard.Header = CardHeader;
|
|
778
780
|
SpecialCard.Footer = CardFooter;
|
|
779
|
-
var templateObject_1$
|
|
781
|
+
var templateObject_1$15;
|
|
780
782
|
|
|
781
783
|
var CampaignCardSkeleton = function () {
|
|
782
784
|
return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
@@ -809,11 +811,11 @@ var getTypeDataIcon = function (type) {
|
|
|
809
811
|
return SvgCampaignFunctional;
|
|
810
812
|
}
|
|
811
813
|
};
|
|
812
|
-
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$
|
|
814
|
+
var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n color: ", ";\n cursor: pointer;\n"], ["\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
|
|
813
815
|
var theme = _a.theme;
|
|
814
816
|
return theme.palette.grey["700"];
|
|
815
817
|
});
|
|
816
|
-
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$
|
|
818
|
+
var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
|
|
817
819
|
var theme = _a.theme;
|
|
818
820
|
return theme.space.base * 6;
|
|
819
821
|
}, function (_a) {
|
|
@@ -826,7 +828,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$q || (temp
|
|
|
826
828
|
var theme = _a.theme;
|
|
827
829
|
return theme.palette.white;
|
|
828
830
|
});
|
|
829
|
-
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$
|
|
831
|
+
var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
830
832
|
var theme = _a.theme;
|
|
831
833
|
return theme.palette.grey["500"];
|
|
832
834
|
});
|
|
@@ -836,9 +838,9 @@ var CampaignCard = function (_a) {
|
|
|
836
838
|
var PillIcon = getTypeDataIcon(type);
|
|
837
839
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
838
840
|
};
|
|
839
|
-
var templateObject_1$
|
|
841
|
+
var templateObject_1$14, templateObject_2$r, templateObject_3$h;
|
|
840
842
|
|
|
841
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$
|
|
843
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
|
|
842
844
|
var theme = _a.theme;
|
|
843
845
|
return theme.space.base * 6;
|
|
844
846
|
}, function (_a) {
|
|
@@ -855,16 +857,16 @@ var ProductCard = function (props) {
|
|
|
855
857
|
var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
|
|
856
858
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
|
|
857
859
|
};
|
|
858
|
-
var templateObject_1$
|
|
860
|
+
var templateObject_1$13;
|
|
859
861
|
|
|
860
|
-
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$
|
|
862
|
+
var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
861
863
|
var theme = _a.theme;
|
|
862
864
|
return theme.palette.grey[500];
|
|
863
865
|
}, function (_a) {
|
|
864
866
|
var theme = _a.theme;
|
|
865
867
|
return theme.space.base;
|
|
866
868
|
});
|
|
867
|
-
var ServiceTitle = styled__default["default"](LG)(templateObject_2$
|
|
869
|
+
var ServiceTitle = styled__default["default"](LG)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", "px;\n font-weight: ", ";\n"])), function (_a) {
|
|
868
870
|
var theme = _a.theme;
|
|
869
871
|
return theme.palette.blue[600];
|
|
870
872
|
}, function (_a) {
|
|
@@ -874,15 +876,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$p || (templat
|
|
|
874
876
|
var theme = _a.theme;
|
|
875
877
|
return theme.fontWeights.semibold;
|
|
876
878
|
});
|
|
877
|
-
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$
|
|
879
|
+
var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
878
880
|
var theme = _a.theme;
|
|
879
881
|
return theme.space.xs;
|
|
880
882
|
}, function (_a) {
|
|
881
883
|
var theme = _a.theme;
|
|
882
884
|
return theme.space.xs;
|
|
883
885
|
});
|
|
884
|
-
var CardContent = styled__default["default"].div(templateObject_4$
|
|
885
|
-
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$
|
|
886
|
+
var CardContent = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
|
|
887
|
+
var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
|
|
886
888
|
var theme = _a.theme;
|
|
887
889
|
return theme.space.base;
|
|
888
890
|
}, function (_a) {
|
|
@@ -909,15 +911,15 @@ var ServiceCard = function (props) {
|
|
|
909
911
|
var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
|
|
910
912
|
return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
|
|
911
913
|
};
|
|
912
|
-
var templateObject_1$
|
|
914
|
+
var templateObject_1$12, templateObject_2$q, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
|
|
913
915
|
|
|
914
|
-
var ButtonsWrap = styled__default["default"].div(templateObject_1$
|
|
916
|
+
var ButtonsWrap = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
915
917
|
var InfoCard = function (props) {
|
|
916
918
|
return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
|
|
917
919
|
};
|
|
918
|
-
var templateObject_1$
|
|
920
|
+
var templateObject_1$11;
|
|
919
921
|
|
|
920
|
-
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1
|
|
922
|
+
var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
921
923
|
var theme = _a.theme;
|
|
922
924
|
return theme.space.xl;
|
|
923
925
|
}, function (_a) {
|
|
@@ -928,7 +930,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
|
|
|
928
930
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
929
931
|
*/
|
|
930
932
|
var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
|
|
931
|
-
var templateObject_1
|
|
933
|
+
var templateObject_1$10;
|
|
932
934
|
|
|
933
935
|
/**
|
|
934
936
|
* Use Span to style and format inline text elements.
|
|
@@ -968,8 +970,8 @@ function useWindowSize() {
|
|
|
968
970
|
return size;
|
|
969
971
|
}
|
|
970
972
|
|
|
971
|
-
var StyledSpan = styled__default["default"](Span)(templateObject_1
|
|
972
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_2$
|
|
973
|
+
var StyledSpan = styled__default["default"](Span)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""])));
|
|
974
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n ", " {\n margin-left: ", ";\n color: ", ";\n font-weight: ", ";\n }\n"])), function (_a) {
|
|
973
975
|
var status = _a.status, theme = _a.theme;
|
|
974
976
|
switch (status) {
|
|
975
977
|
case "completed":
|
|
@@ -1003,9 +1005,9 @@ var Counter = function (props) {
|
|
|
1003
1005
|
return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
|
|
1004
1006
|
};
|
|
1005
1007
|
Counter.Avatar = StyledTag.Avatar;
|
|
1006
|
-
var templateObject_1
|
|
1008
|
+
var templateObject_1$$, templateObject_2$p;
|
|
1007
1009
|
|
|
1008
|
-
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$
|
|
1010
|
+
var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n @media (max-width: ", ") {\n width: 100%;\n }\n"], ["\n @media (max-width: ", ") {\n width: 100%;\n }\n"])), function (_a) {
|
|
1009
1011
|
var theme = _a.theme;
|
|
1010
1012
|
return theme.breakpoints.sm;
|
|
1011
1013
|
});
|
|
@@ -1022,22 +1024,52 @@ Drawer.Body = reactModals.DrawerModal.Body;
|
|
|
1022
1024
|
Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
1023
1025
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1024
1026
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1025
|
-
var templateObject_1$
|
|
1027
|
+
var templateObject_1$_;
|
|
1026
1028
|
|
|
1027
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1028
|
-
var templateObject_1$
|
|
1029
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject([""], [""])));
|
|
1030
|
+
var templateObject_1$Z;
|
|
1029
1031
|
|
|
1030
1032
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1031
1033
|
__proto__: null,
|
|
1032
1034
|
Field: Field$1
|
|
1033
1035
|
});
|
|
1034
1036
|
|
|
1035
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1037
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n\n > div {\n height: 100%;\n }\n\n &[disabled] * {\n opacity: 0.85;\n }\n\n &[disabled] svg {\n opacity: 0.5;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &[disabled]:hover {\n background-color: transparent;\n }\n"])), function (_a) {
|
|
1036
1038
|
var theme = _a.theme;
|
|
1037
1039
|
return theme.palette.blue[100];
|
|
1038
1040
|
});
|
|
1039
1041
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1040
|
-
var templateObject_1$
|
|
1042
|
+
var templateObject_1$Y;
|
|
1043
|
+
|
|
1044
|
+
var Container = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"])));
|
|
1045
|
+
var MetaContainer$1 = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"])));
|
|
1046
|
+
var ThumbContainer = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
|
|
1047
|
+
var theme = _a.theme;
|
|
1048
|
+
return theme.space.sm;
|
|
1049
|
+
}, function (_a) {
|
|
1050
|
+
var theme = _a.theme;
|
|
1051
|
+
return theme.components.autocomplete.thumbSize;
|
|
1052
|
+
});
|
|
1053
|
+
var Label$1 = styled__default["default"](MD)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
1054
|
+
var theme = _a.theme;
|
|
1055
|
+
return theme.fontWeights.medium;
|
|
1056
|
+
}, function (_a) {
|
|
1057
|
+
var theme = _a.theme;
|
|
1058
|
+
return theme.colors.primaryHue;
|
|
1059
|
+
});
|
|
1060
|
+
var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
1061
|
+
var theme = _a.theme;
|
|
1062
|
+
return theme.palette.grey[600];
|
|
1063
|
+
});
|
|
1064
|
+
var Image$1 = React.memo(function (_a) {
|
|
1065
|
+
var src = _a.src;
|
|
1066
|
+
return jsxRuntime.jsx("img", { src: src });
|
|
1067
|
+
});
|
|
1068
|
+
var ItemContent = function (props) {
|
|
1069
|
+
var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
|
|
1070
|
+
return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, { children: label }), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
|
|
1071
|
+
};
|
|
1072
|
+
var templateObject_1$X, templateObject_2$o, templateObject_3$f, templateObject_4$a, templateObject_5$5;
|
|
1041
1073
|
|
|
1042
1074
|
/**
|
|
1043
1075
|
* A Menu is a wrapper for items elements
|
|
@@ -2964,6 +2996,7 @@ exports.IconButton = IconButton;
|
|
|
2964
2996
|
exports.InfoCard = InfoCard;
|
|
2965
2997
|
exports.Input = Input;
|
|
2966
2998
|
exports.Item = Item;
|
|
2999
|
+
exports.ItemContent = ItemContent;
|
|
2967
3000
|
exports.ItemMeta = ItemMeta;
|
|
2968
3001
|
exports.LG = LG;
|
|
2969
3002
|
exports.Label = Label;
|
|
@@ -4,5 +4,6 @@ interface AutocompleteStoryArgs extends AutocompleteArgs {
|
|
|
4
4
|
allowNew?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export declare const Default: Story<AutocompleteStoryArgs>;
|
|
7
|
+
export declare const WithMedia: Story<AutocompleteStoryArgs>;
|
|
7
8
|
declare const _default: ComponentMeta<(props: AutocompleteArgs) => JSX.Element>;
|
|
8
9
|
export default _default;
|