@appquality/unguess-design-system 2.10.13 → 2.10.16

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v2.10.16 (Fri May 06 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(alerts): add missing export ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.10.15 (Fri May 06 2022)
+
+#### 🐛 Bug Fix
+
+- feat(alerts): add alerts component + styling [#51](https://github.com/AppQuality/unguess-design-system/pull/51) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.10.14 (Fri May 06 2022)
+
+#### 🐛 Bug Fix
+
+- style(stepper): update spaces and content color [#50](https://github.com/AppQuality/unguess-design-system/pull/50) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.13 (Thu May 05 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -1,5 +1,6 @@
 import { GlobalStyle } from "./stories/shared/globalStyle";
 export * from "./stories/accordions";
+export * from "./stories/alerts";
 export * from "./stories/avatar";
 export * from "./stories/breadcrumbs";
 export * from "./stories/buttons/anchor";

package/build/index.js

@@ -7,10 +7,10 @@ require('@zendeskgarden/css-bedrock');
 var reactTheming = require('@zendeskgarden/react-theming');
 var jsxRuntime = require('react/jsx-runtime');
 var reactAccordions = require('@zendeskgarden/react-accordions');
+var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactAvatars = require('@zendeskgarden/react-avatars');
 var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
 var reactButtons = require('@zendeskgarden/react-buttons');
-var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactTags = require('@zendeskgarden/react-tags');
 var reactForms = require('@zendeskgarden/react-forms');
 var React = require('react');
@@ -241,10 +241,10 @@ var gradients = {
 var _a, _b, _c, _d, _e, _f;
 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" }) }), notification: __assign(__assign({}, (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.notification), { card: __assign(__assign({}, (_f = (_e = reactTheming.DEFAULT_THEME.components) === null || _e === void 0 ? void 0 : _e.notification) === null || _f === void 0 ? void 0 : _f.well), { padding: "16px" }) }) });
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[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 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[400] }), 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$U || (templateObject_1$U = __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  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  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$U;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$V || (templateObject_1$V = __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  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  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$V;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -259,6 +259,22 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
+var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[700];
+});
+/**
+ * Breadcrumbs mark and communicate a user’s location in the product.
+ * <hr>
+ * Used for this:
+    - To show the user where they are in a nested navigation
+    - To provide a quick way to navigate to ancestor pages
+ */
+var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
+Alert.Title = reactNotifications.Title;
+Alert.Close = reactNotifications.Close;
+var templateObject_1$U;
+
 // import useWindowSize from "../../hooks/useWindowSize";
 var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.avatarType &&
@@ -630,7 +646,7 @@ var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTem
     var theme = _a.theme;
     return (theme.rtl ? "flex-end" : "flex-start");
 });
-var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
+var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -643,7 +659,7 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var templateObject_1$O, templateObject_2$i, templateObject_3$c, templateObject_4$8;
+var templateObject_1$O, templateObject_2$i, templateObject_3$c, templateObject_4$9;
 
 var getStatusIcon = function (status) {
     switch (status) {
@@ -685,7 +701,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$b || (temp
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontSizes.sm;
 }, function (_a) {
@@ -729,7 +745,7 @@ var CampaignCard = function (props) {
     }
     return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { 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(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
-var templateObject_1$N, templateObject_2$h, templateObject_3$b, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$N, templateObject_2$h, templateObject_3$b, templateObject_4$8, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
 
 var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -764,7 +780,7 @@ var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$a || (tem
     var theme = _a.theme;
     return theme.palette.grey["500"];
 });
-var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"])), function (_a) {
+var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["600"];
 }, function (_a) {
@@ -792,7 +808,7 @@ var ProductCard = function (props) {
     }
     return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, __assign({ onClick: props.onCtaClick }, { 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(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] })), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
 };
-var templateObject_1$M, templateObject_2$g, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$M, templateObject_2$g, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1146,7 +1162,7 @@ var LabelWrapper = styled__default["default"](Label)(templateObject_3$9 || (temp
     var theme = _a.theme;
     return theme.palette.grey[600];
 });
-var StyledLabel = styled__default["default"](Label)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+var StyledLabel = styled__default["default"](Label)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
@@ -1158,7 +1174,7 @@ var CheckboxCard = function (props) {
     };
     return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper$1, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
 };
-var templateObject_1$G, templateObject_2$f, templateObject_3$9, templateObject_4$5;
+var templateObject_1$G, templateObject_2$f, templateObject_3$9, templateObject_4$6;
 
 var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 /**
@@ -1249,7 +1265,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
     var theme = _a.theme;
     return theme.colors.primaryHue;
 });
-var Circle = styled__default["default"].div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"], ["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"])), function (_a) {
+var Circle = styled__default["default"].div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"], ["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -1277,7 +1293,7 @@ var RadioCard = function (_a) {
     var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
     return (jsxRuntime.jsxs(StyledCard, __assign({}, card, props, { className: props.checked ? "card-active" : "", onClick: function () { props.onChecked && props.onChecked(props.value); } }, { children: [jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })), jsxRuntime.jsx(IconWrapper, { children: (iconActive && props.checked) ? iconActive : icon }), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsx(StyledText, { children: props.label })] })));
 };
-var templateObject_1$B, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2;
+var templateObject_1$B, templateObject_2$d, templateObject_3$8, templateObject_4$5, templateObject_5$2;
 
 var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
 /**
@@ -1885,7 +1901,7 @@ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$6 ||
     var theme = _a.theme;
     return theme.palette.grey["100"];
 });
-var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  padding: ", "px ", "px;\n"], ["\n  padding: ", "px ", "px;\n"])), function (_a) {
+var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  padding: ", "px ", "px;\n"], ["\n  padding: ", "px ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 4;
 }, function (_a) {
@@ -1899,7 +1915,7 @@ ModalFullScreen.Body = StyledBody$4;
 ModalFullScreen.Footer = StyledFooter;
 ModalFullScreen.Close = StyledModalClose;
 ModalFullScreen.FooterItem = FooterItem;
-var templateObject_1$f, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$1;
+var templateObject_1$f, templateObject_2$8, templateObject_3$6, templateObject_4$4, templateObject_5$1;
 
 /**
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -1987,7 +2003,7 @@ var IconContainer = styled__default["default"].div(templateObject_3$5 || (templa
     var theme = _a.theme;
     return theme.space.sm;
 });
-var MenuItemBody = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), flexStart);
+var MenuItemBody = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), flexStart);
 var MenuItem = function (_a) {
     var children = _a.children, selectedItem = _a.selectedItem, content = _a.content, props = __rest(_a, ["children", "selectedItem", "content"]);
     var isActive = selectedItem && selectedItem === props.value;
@@ -1996,7 +2012,7 @@ var MenuItem = function (_a) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
 };
-var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$2;
+var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$3;
 
 var _path$3;
 
@@ -2079,7 +2095,7 @@ var StyledBody$2 = styled__default["default"].div(templateObject_3$4 || (templat
     var theme = _a.theme;
     return theme.space.base * 4;
 });
-var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (_a) {
+var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 4;
 });
@@ -2099,7 +2115,7 @@ var HelpItem = function (props) {
     var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
 };
-var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$1, templateObject_5, templateObject_6;
+var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$2, templateObject_5, templateObject_6;
 
 function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
@@ -2272,6 +2288,13 @@ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObje
     return props.activeIndex !== undefined &&
         "\n      ".concat(UgStep, ":nth-child(").concat(props.activeIndex + 1, ")  {\n        \n        div[data-garden-id=\"accordions.step_icon\"] {\n            background-color: ").concat(props.theme.palette.blue[600], ";\n            color: white;\n        }\n\n        ").concat(UgLabel, " {\n            font-weight: 500;\n            color: ").concat(props.theme.palette.blue[600], ";\n        }\n      }\n    ");
 });
+var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  padding: ", ";\n  margin-top: 0;\n  margin-bottom: 0;\n  > div { \n    color: ", "; \n  }\n"], ["\n  padding: ", ";\n  margin-top: 0;\n  margin-bottom: 0;\n  > div { \n    color: ", "; \n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.space.sm, " ").concat(theme.space.sm, " ").concat(theme.space.sm, " 24px");
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[600];
+});
 /**
  * A Stepper guides users through steps of a task in sequential order.
 
@@ -2281,8 +2304,8 @@ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObje
 var Stepper = function (props) { return jsxRuntime.jsx(UgStepper, __assign({}, props)); };
 Stepper.Step = UgStep;
 Stepper.Label = UgLabel;
-Stepper.Content = UgStepper.Content;
-var templateObject_1$4, templateObject_2$2, templateObject_3$1;
+Stepper.Content = UgContent;
+var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1;
 
 var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
 /**
@@ -2391,6 +2414,7 @@ Object.defineProperty(exports, 'ModalClose', {
     get: function () { return reactModals.Close; }
 });
 exports.Accordion = Accordion;
+exports.Alert = Alert;
 exports.Anchor = Anchor;
 exports.AppHeader = AppHeader;
 exports.Autocomplete = Autocomplete;

package/build/stories/alerts/_types.d.ts

@@ -0,0 +1,5 @@
+import { IAlertProps } from '@zendeskgarden/react-notifications';
+export interface AlertArgs extends IAlertProps {
+    /** Applies alert type styles */
+    type: 'success' | 'warning' | 'error' | 'info';
+}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { AlertArgs } from './_types';
+/**
+ * Breadcrumbs mark and communicate a user’s location in the product.
+ * <hr>
+ * Used for this:
+    - To show the user where they are in a nested navigation
+    - To provide a quick way to navigate to ancestor pages
+ */
+declare const Alert: {
+    (props: AlertArgs): JSX.Element;
+    Title: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-notifications/dist/typings/elements/content/Title").ITitleProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Alert };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { AlertArgs } from "./_types";
+export declare const Default: Story<AlertArgs>;
+declare const _default: ComponentMeta<{
+    (props: AlertArgs): JSX.Element;
+    Title: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-notifications/dist/typings/elements/content/Title").ITitleProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;
+export default _default;

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

@@ -10,6 +10,6 @@ declare const Stepper: {
     (props: StepperArgs): JSX.Element;
     Step: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>, any, {}, never>;
     Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-accordions").IStepperLabelProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-    Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 };
 export { Stepper };

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

@@ -10,6 +10,6 @@ declare const _default: ComponentMeta<{
     (props: StepperArgs): JSX.Element;
     Step: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>, any, {}, never>;
     Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-accordions").IStepperLabelProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-    Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 }>;
 export default _default;

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

@@ -1,12 +1,12 @@
 declare const theme: {
     colors: {
         primaryHue: string;
+        warningHue: string;
+        successHue: string;
+        dangerHue: string;
         base: "light" | "dark";
         background: string;
         foreground: string;
-        dangerHue: string;
-        warningHue: string;
-        successHue: string;
         neutralHue: string;
         chromeHue: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.13",
+  "version": "2.10.16",
   "dependencies": {
     "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",