@appquality/unguess-design-system 2.8.18 → 2.8.19

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v2.8.19 (Thu Apr 14 2022)
+
+#### 🐛 Bug Fix
+
+- feat(sidebar): add vertical scroll [#33](https://github.com/AppQuality/unguess-design-system/pull/33) ([@marcbon](https://github.com/marcbon))
+- feat(mediainput): add rich input component with mediaIcon support [#34](https://github.com/AppQuality/unguess-design-system/pull/34) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 2
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.8.18 (Thu Apr 14 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -19,6 +19,7 @@ export * from "./stories/dropdowns/select";
 export * from "./stories/forms/checkbox";
 export * as FormField from "./stories/forms/field";
 export * from "./stories/forms/input";
+export * from "./stories/forms/mediaInput";
 export * from "./stories/forms/radio";
 export * from "./stories/forms/textarea";
 export * from "./stories/forms/toggle";

package/build/index.js

@@ -232,8 +232,8 @@ var gradients = {
 
 var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px" }), components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }), shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
-var templateObject_1$N;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
+var templateObject_1$O;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -249,7 +249,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
 // import useWindowSize from "../../hooks/useWindowSize";
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
 });
 /**
@@ -272,7 +272,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$M;
+var templateObject_1$N;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -293,7 +293,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
  */
 var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
 
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -305,7 +305,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
 var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$L;
+var templateObject_1$M;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -358,13 +358,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
 /**
    * A Label is used to specify a title for an input.
    * <hr>
    **/
 var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
-var templateObject_1$K;
+var templateObject_1$L;
 
 var _g$4, _path$p, _path2$7, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
 
@@ -593,8 +593,8 @@ var getTypeData = function (type) {
             };
     }
 };
-var Wrapper = styled__default["default"](Card)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), theme.palette.grey["700"]);
+var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
+var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), theme.palette.grey["700"]);
 var StyledTagNew = styled__default["default"](Tag)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
@@ -624,7 +624,7 @@ var CampaignCard = function (props) {
     return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
                         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$J, templateObject_2$b, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$K, templateObject_2$c, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -830,7 +830,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var StyledTag = styled__default["default"](Tag)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+var StyledTag = styled__default["default"](Tag)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.regular;
 }, function (_a) {
@@ -866,24 +866,24 @@ 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, {})] }) }), props.children, props.counter !== undefined && jsxRuntime.jsx("span", { children: props.counter })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$I;
+var templateObject_1$J;
 
-var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
-var templateObject_1$H;
+var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
+var templateObject_1$I;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$G || (templateObject_1$G = __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$H || (templateObject_1$H = __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 theme = _a.theme;
     return theme.palette.blue[100];
 });
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$G;
+var templateObject_1$H;
 
-var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
+var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
 /**
    * A Menu is a wrapper for items elements
    **/
@@ -896,7 +896,7 @@ var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta,
 var MediaBody = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaBody, __assign({}, props)); };
 var MediaFigure = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaFigure, __assign({}, props)); };
 var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
-var templateObject_1$F;
+var templateObject_1$G;
 
 /**
  * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
@@ -907,7 +907,7 @@ var templateObject_1$F;
  */
 var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
 
-var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.isPrimary &&
         "\n      background-color: ".concat(props.theme.palette.blue[600], ";\n      color: white;\n      & svg[data-garden-id=\"forms.media_figure\"] {\n         color: white;\n      }\n   ");
 });
@@ -924,9 +924,9 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
 var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
 var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
 var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
-var templateObject_1$E;
+var templateObject_1$F;
 
-var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
    * <hr>
@@ -938,14 +938,14 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
    *  - To let users activate an option that takes effect immediately, use a Toggle instead
    **/
 var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
-var templateObject_1$D;
+var templateObject_1$E;
 
-var UgField = styled__default["default"](reactForms.Field)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
+var UgField = styled__default["default"](reactForms.Field)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
 /**
    * A Field is a wrapper for input elements
    **/
 var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
-var templateObject_1$C;
+var templateObject_1$D;
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -953,7 +953,7 @@ var index = /*#__PURE__*/Object.freeze({
     Hint: reactForms.Hint
 });
 
-var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
+var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -962,6 +962,17 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$B ||
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
+var templateObject_1$C;
+
+var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
+/**
+   * Media elements add even more context to an input.
+   * <hr>
+   * Used for this:
+   *  - To let the user enter data into a field
+   *  - To enter multiline text, use a Textarea
+   **/
+var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
 var templateObject_1$B;
 
 var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
@@ -1275,7 +1286,7 @@ var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templ
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
-var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  font-family: ", ";\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  font-family: ", ";\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  font-family: ", ";\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  font-family: ", ";\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["600"];
 }, function (_a) {
@@ -1295,7 +1306,7 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
 var BrandItem = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
 };
-var templateObject_1$p, templateObject_2$a, templateObject_3$5;
+var templateObject_1$p, templateObject_2$b, templateObject_3$5;
 
 var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.Headers.height);
 /**
@@ -1377,7 +1388,7 @@ var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props));
 var templateObject_1$l;
 
 var SelectedItemStyle = styled.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
-var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
+var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
     var theme = _a.theme;
     return theme.fonts.system;
 }, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
@@ -1388,7 +1399,7 @@ var NavItem = function (props) {
     // const { isExpanded } = props;
     return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
 };
-var templateObject_1$k, templateObject_2$9;
+var templateObject_1$k, templateObject_2$a;
 
 var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
 var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
@@ -1450,11 +1461,11 @@ var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign
 var templateObject_1$h;
 
 var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
-var UgNavItem = styled__default["default"](NavItem)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  flex-flow: column;\n  align-items: flex-start;\n"], ["\n  flex-flow: column;\n  align-items: flex-start;\n"])));
+var UgNavItem = styled__default["default"](NavItem)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  flex-flow: column;\n  align-items: flex-start;\n"], ["\n  flex-flow: column;\n  align-items: flex-start;\n"])));
 var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
-var templateObject_1$g, templateObject_2$8;
+var templateObject_1$g, templateObject_2$9;
 
 var _path$8;
 
@@ -1553,6 +1564,7 @@ var SvgToken = function SvgToken(props) {
 var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
 
 var TokenContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var ScrollingContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"])));
 /**
  * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
  * <br>
@@ -1568,10 +1580,10 @@ var Sidebar = function (props) {
         props.onNavToggle && props.onNavToggle(route);
         setNav(route);
     };
-    return (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), props.projects &&
-                props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
+    return (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
+                    props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
 };
-var templateObject_1$f;
+var templateObject_1$f, templateObject_2$8;
 
 /**
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -2105,6 +2117,7 @@ exports.MD = MD;
 exports.Main = Main;
 exports.MediaBody = MediaBody;
 exports.MediaFigure = MediaFigure;
+exports.MediaInput = MediaInput;
 exports.MediaItem = MediaItem;
 exports.Menu = Menu;
 exports.Message = Message;

package/build/stories/forms/mediaInput/_types.d.ts

@@ -0,0 +1,13 @@
+import { IMediaInputProps } from "@zendeskgarden/react-forms";
+export interface MediaInputArgs extends IMediaInputProps {
+    /** Applies compact styling */
+    isCompact?: boolean;
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Accepts a "start" icon to display */
+    start?: any;
+    /** Accepts an "end" icon to display */
+    end?: any;
+    /** Applies validation state styling */
+    validation?: 'success' | 'warning' | 'error';
+}

package/build/stories/forms/mediaInput/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MediaInputArgs } from "./_types";
+/**
+   * Media elements add even more context to an input.
+   * <hr>
+   * Used for this:
+   *  - To let the user enter data into a field
+   *  - To enter multiline text, use a Textarea
+   **/
+declare const MediaInput: (props: MediaInputArgs) => JSX.Element;
+export { MediaInput };

package/build/stories/forms/mediaInput/index.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { MediaInputArgs } from "./_types";
+export declare const Default: Story<MediaInputArgs>;
+export declare const Success: Story<MediaInputArgs>;
+export declare const Warning: Story<MediaInputArgs>;
+export declare const Error: Story<MediaInputArgs>;
+declare const _default: ComponentMeta<(props: MediaInputArgs) => JSX.Element>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.8.18",
+  "version": "2.8.19",
   "dependencies": {
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",