@appquality/unguess-design-system 2.10.67 → 2.10.70

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v2.10.70 (Thu Aug 04 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(item-container): Update label color ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.69 (Tue Aug 02 2022)
+
+#### 🐛 Bug Fix
+
+- feat(item-with-media): add new item content to handle media [#78](https://github.com/AppQuality/unguess-design-system/pull/78) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 2
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.10.68 (Tue Aug 02 2022)
+
+#### 🐛 Bug Fix
+
+- feat(item-with-media): add new item content to handle media ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.10.67 (Fri Jul 29 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -18,6 +18,7 @@ export * from "./stories/counter";
 export * from "./stories/drawers";
 export * as DropdownField from "./stories/dropdowns/field";
 export * from "./stories/dropdowns/item";
+export * from "./stories/dropdowns/item-content";
 export * from "./stories/dropdowns/menu";
 export * from "./stories/dropdowns/multiselect";
 export * from "./stories/dropdowns/select";

package/build/index.js

@@ -257,12 +257,14 @@ var gradients = {
 var _a, _b, _c, _d, _e, _f, _g$3, _h;
 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: {
         imgMaxHeight: "214px",
+    }, autocomplete: {
+        thumbSize: "60px",
     } });
 
 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 }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$1e || (templateObject_1$1e = __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);
-var templateObject_1$1e;
+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);
+var templateObject_1$1f;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -277,14 +279,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
-var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1d || (templateObject_1$1d = __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) {
+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) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontSizes.sm;
 });
-var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n   font-size: ", ";\n"], ["\n   font-size: ", ";\n"])), function (_a) {
+var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n   font-size: ", ";\n"], ["\n   font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontSizes.md;
 });
@@ -298,9 +300,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
 var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
 Alert.Title = UgAlertTitle;
 Alert.Close = reactNotifications.Close;
-var templateObject_1$1d, templateObject_2$u;
+var templateObject_1$1e, templateObject_2$v;
 
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  text-transform: uppercase;\n\n  ", "\n"], ["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
+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) {
     return props.avatarType &&
         props.avatarType !== "image" &&
         "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -324,7 +326,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$1c;
+var templateObject_1$1d;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -355,7 +357,7 @@ var getThemeStyle = function (props) {
     }
     return theme;
 };
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -373,7 +375,7 @@ var Button = function (props) {
 };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$1b;
+var templateObject_1$1c;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -403,7 +405,7 @@ Used for this:
 **/
 var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
 
-var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1a || (templateObject_1$1a = __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) {
+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) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -424,7 +426,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
     - To group related content
  */
 var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
-var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$t || (templateObject_2$t = __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) {
+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) {
     var theme = _a.theme;
     return theme.borderRadii.xl;
 }, function (_a) {
@@ -441,7 +443,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
     return "".concat(theme.space.xl, " ").concat(theme.space.md);
 });
 var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
-var templateObject_1$1a, templateObject_2$t;
+var templateObject_1$1b, templateObject_2$u;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -656,7 +658,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   })));
 };
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  border-radius: ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
+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) {
     return props.isLight ?
         "\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  ");
 });
@@ -674,22 +676,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
    - To communicate a typing status, use Inline instead
  */
 var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
-var templateObject_1$19;
+var templateObject_1$1a;
 
-var CardMeta = styled__default["default"].div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardMeta = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
     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    ");
 });
-var templateObject_1$18;
+var templateObject_1$19;
 
-var CardThumbnail = styled__default["default"].div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardThumbnail = styled__default["default"].div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
     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  ");
 });
 CardThumbnail.defaultProps = {
     align: "left"
 };
-var templateObject_1$17;
+var templateObject_1$18;
 
 /**
  *  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({
 var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
 var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
 
-var Label$1 = styled__default["default"](SM)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Label$2 = styled__default["default"](SM)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 });
-var Title$3 = styled__default["default"](LG)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.colors.primaryHue;
 }, function (_a) {
@@ -715,24 +717,24 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$s || (templateObje
     var theme = _a.theme;
     return theme.space.xxs;
 });
-var Description$2 = styled__default["default"](MD)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.xxs;
 });
-var Container$1 = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var Container$2 = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, align = _a.align;
     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  ");
 });
-var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign({}, props)); };
-CardHeader.Label = Label$1;
+var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign({}, props)); };
+CardHeader.Label = Label$2;
 CardHeader.Title = Title$3;
-CardHeader.Text = Description$2;
-var templateObject_1$16, templateObject_2$s, templateObject_3$i, templateObject_4$b;
+CardHeader.Text = Description$3;
+var templateObject_1$17, templateObject_2$t, templateObject_3$j, templateObject_4$c;
 
-var Divider = styled__default["default"].div(templateObject_1$15 || (templateObject_1$15 = __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) {
+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) {
     var theme = _a.theme;
     return theme.space.base * 3;
 }, function (_a) {
@@ -742,15 +744,15 @@ var Divider = styled__default["default"].div(templateObject_1$15 || (templateObj
     var theme = _a.theme;
     return theme.palette.grey["300"];
 });
-var Footer$2 = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __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"])));
-var Container = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+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"])));
+var Container$1 = styled__default["default"].div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
     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    ");
 });
-var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
-var templateObject_1$15, templateObject_2$r, templateObject_3$h;
+var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
+var templateObject_1$16, templateObject_2$s, templateObject_3$i;
 
-var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$14 || (templateObject_1$14 = __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) {
+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) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -776,7 +778,7 @@ SpecialCard.Meta = CardMeta;
 SpecialCard.Thumb = CardThumbnail;
 SpecialCard.Header = CardHeader;
 SpecialCard.Footer = CardFooter;
-var templateObject_1$14;
+var templateObject_1$15;
 
 var CampaignCardSkeleton = function () {
     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) {
             return SvgCampaignFunctional;
     }
 };
-var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n"], ["\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.palette.grey["700"];
 });
-var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$q || (templateObject_2$q = __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) {
+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) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -826,7 +828,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$q || (temp
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["500"];
 });
@@ -836,9 +838,9 @@ var CampaignCard = function (_a) {
     var PillIcon = getTypeDataIcon(type);
     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, {})] })] })));
 };
-var templateObject_1$13, templateObject_2$q, templateObject_3$g;
+var templateObject_1$14, templateObject_2$r, templateObject_3$h;
 
-var StyledTagNew = styled__default["default"](Tag)(templateObject_1$12 || (templateObject_1$12 = __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) {
+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) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -855,16 +857,16 @@ var ProductCard = function (props) {
     var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
     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 })) }))] })));
 };
-var templateObject_1$12;
+var templateObject_1$13;
 
-var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", "px;\n"], ["\n  color: ", ";\n  margin-bottom: ", "px;\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
-var ServiceTitle = styled__default["default"](LG)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", "px;\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  margin-bottom: ", "px;\n  font-weight: ", ";\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.palette.blue[600];
 }, function (_a) {
@@ -874,15 +876,15 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$p || (templat
     var theme = _a.theme;
     return theme.fontWeights.semibold;
 });
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.space.xs;
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.xs;
 });
-var CardContent = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __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"])));
-var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$5 || (templateObject_5$5 = __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) {
+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"])));
+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) {
     var theme = _a.theme;
     return theme.space.base;
 }, function (_a) {
@@ -909,15 +911,15 @@ var ServiceCard = function (props) {
     var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
     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)); }) })))] })] })));
 };
-var templateObject_1$11, templateObject_2$p, templateObject_3$f, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1;
+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;
 
-var ButtonsWrap = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __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"])));
+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"])));
 var InfoCard = function (props) {
     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; }) }) })))] })));
 };
-var templateObject_1$10;
+var templateObject_1$11;
 
-var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$$ || (templateObject_1$$ = __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) {
+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) {
     var theme = _a.theme;
     return theme.space.xl;
 }, function (_a) {
@@ -928,7 +930,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
  * Title is a basic component used to display a title. Often used in card headers.
  */
 var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
-var templateObject_1$$;
+var templateObject_1$10;
 
 /**
  * Use Span to style and format inline text elements.
@@ -968,8 +970,8 @@ function useWindowSize() {
     return size;
 }
 
-var StyledSpan = styled__default["default"](Span)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject([""], [""])));
-var StyledTag = styled__default["default"](Tag)(templateObject_2$o || (templateObject_2$o = __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) {
+var StyledSpan = styled__default["default"](Span)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject([""], [""])));
+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) {
     var status = _a.status, theme = _a.theme;
     switch (status) {
         case "completed":
@@ -1003,9 +1005,9 @@ var Counter = function (props) {
     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() })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$_, templateObject_2$o;
+var templateObject_1$$, templateObject_2$p;
 
-var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: ", ") {\n    width: 100%;\n  }\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
@@ -1022,22 +1024,52 @@ Drawer.Body = reactModals.DrawerModal.Body;
 Drawer.Footer = reactModals.DrawerModal.Footer;
 Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
 Drawer.Close = reactModals.DrawerModal.Close;
-var templateObject_1$Z;
+var templateObject_1$_;
 
-var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject([""], [""])));
-var templateObject_1$Y;
+var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject([""], [""])));
+var templateObject_1$Z;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+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) {
     var theme = _a.theme;
     return theme.palette.blue[100];
 });
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$X;
+var templateObject_1$Y;
+
+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"])));
+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"])));
+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) {
+    var theme = _a.theme;
+    return theme.space.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.components.autocomplete.thumbSize;
+});
+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) {
+    var theme = _a.theme;
+    return theme.fontWeights.medium;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[800];
+});
+var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[600];
+});
+var Image$1 = React.memo(function (_a) {
+    var src = _a.src;
+    return jsxRuntime.jsx("img", { src: src });
+});
+var ItemContent = function (props) {
+    var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
+    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, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
+};
+var templateObject_1$X, templateObject_2$o, templateObject_3$f, templateObject_4$a, templateObject_5$5;
 
 /**
    * A Menu is a wrapper for items elements
@@ -2964,6 +2996,7 @@ exports.IconButton = IconButton;
 exports.InfoCard = InfoCard;
 exports.Input = Input;
 exports.Item = Item;
+exports.ItemContent = ItemContent;
 exports.ItemMeta = ItemMeta;
 exports.LG = LG;
 exports.Label = Label;

package/build/stories/dropdowns/autocomplete/index.stories.d.ts

@@ -4,5 +4,6 @@ interface AutocompleteStoryArgs extends AutocompleteArgs {
     allowNew?: boolean;
 }
 export declare const Default: Story<AutocompleteStoryArgs>;
+export declare const WithMedia: Story<AutocompleteStoryArgs>;
 declare const _default: ComponentMeta<(props: AutocompleteArgs) => JSX.Element>;
 export default _default;

package/build/stories/dropdowns/item-content/_types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+export interface ItemContentArgs extends HTMLAttributes<HTMLDivElement> {
+    /** Sets the thumb */
+    thumbSrc?: string;
+    /** Sets the description */
+    description?: string;
+    /** Sets the label */
+    label?: string;
+}

package/build/stories/dropdowns/item-content/index.d.ts

@@ -0,0 +1,3 @@
+import { ItemContentArgs } from "./_types";
+declare const ItemContent: (props: ItemContentArgs) => JSX.Element;
+export { ItemContent };

package/build/stories/theme/components.d.ts

@@ -4,4 +4,7 @@ export declare const components: {
     pageHeader: {
         imgMaxHeight: string;
     };
+    autocomplete: {
+        thumbSize: string;
+    };
 };

package/build/stories/theme/index.d.ts

@@ -192,6 +192,9 @@ declare const theme: {
         pageHeader: {
             imgMaxHeight: string;
         };
+        autocomplete: {
+            thumbSize: string;
+        };
     };
     shadows: {
         boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.67",
+  "version": "2.10.70",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",