@appquality/unguess-design-system 2.10.12 → 2.10.15

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# 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`
+
+- feat(hint): add hint component ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.12 (Thu May 05 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -241,7 +241,7 @@ 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;
@@ -369,11 +369,11 @@ var ContentCard = styled__default["default"](reactNotifications.Well)(templateOb
     - To group related content
  */
 var Card = function (props) { return jsxRuntime.jsx(ContentCard, __assign({}, props)); };
-var ContainerCard = styled__default["default"](Card)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+var ContainerCard = styled__default["default"](Card)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.xl;
 });
-var templateObject_1$R, templateObject_2$i;
+var templateObject_1$R, templateObject_2$j;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -625,12 +625,12 @@ var CampaignCardSkeleton = function () {
 };
 
 var flexCenter = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var flexColumnCenter = styled.css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
+var flexColumnCenter = styled.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
 var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"])), function (_a) {
     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 +643,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$h, 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) {
@@ -668,7 +668,7 @@ var getTypeDataIcon = function (type) {
     }
 };
 var Wrapper$1 = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cardStyle);
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
+var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["700"];
 });
@@ -685,7 +685,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 +729,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$g, 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;
@@ -744,7 +744,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateOb
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var StyledTagNew = styled__default["default"](Tag)(templateObject_2$f || (templateObject_2$f = __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_2$g || (templateObject_2$g = __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) {
@@ -764,7 +764,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 +792,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$f, 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.
@@ -1135,7 +1135,7 @@ var StyledCard$1 = styled__default["default"](Card)(templateObject_1$G || (templ
     var theme = _a.theme;
     return theme.palette.blue[300];
 });
-var IconWrapper$1 = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+var IconWrapper$1 = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
@@ -1146,7 +1146,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 +1158,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$e, 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([""], [""])));
 /**
@@ -1174,6 +1174,7 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
+var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -1182,7 +1183,7 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E ||
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$E;
+var templateObject_1$E, templateObject_2$e;
 
 var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
 /**
@@ -1248,7 +1249,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) {
@@ -1276,7 +1277,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([""], [""])));
 /**
@@ -1884,7 +1885,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) {
@@ -1898,7 +1899,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.
@@ -1986,7 +1987,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;
@@ -1995,7 +1996,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;
 
@@ -2078,7 +2079,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;
 });
@@ -2098,7 +2099,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); }
 
@@ -2271,6 +2272,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.
 
@@ -2280,8 +2288,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([""], [""])));
 /**
@@ -2433,6 +2441,7 @@ exports.HeaderItem = HeaderItem;
 exports.HeaderItemIcon = HeaderItemIcon;
 exports.HeaderItemText = HeaderItemText;
 exports.HeaderRow = HeaderRow;
+exports.Hint = Hint;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;

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/forms/input/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { InputArgs } from "./_types";
+declare const Hint: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -8,4 +9,4 @@ import { InputArgs } from "./_types";
    *  - To enter multiline text, use a Textarea
    **/
 declare const Input: (props: InputArgs) => JSX.Element;
-export { Input };
+export { Input, Hint };

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.12",
+  "version": "2.10.15",
   "dependencies": {
     "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",