@appquality/unguess-design-system 2.10.2 → 2.10.5

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v2.10.5 (Wed May 04 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(dropdowns-menu): remove width auto for all dropdowns menu ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.10.4 (Tue May 03 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(product-card): add onClick on card body too ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.3 (Tue May 03 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(drawers): remove duplicated component ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.2 (Tue May 03 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -10,9 +10,9 @@ export * from "./stories/buttons/split-button";
 export * from "./stories/cards";
 export * from "./stories/campaign-cards";
 export * from "./stories/product-cards";
-export * from "./stories/drawers";
 export * from "./stories/close";
 export * from "./stories/counter";
+export * from "./stories/drawers";
 export * as DropdownField from "./stories/dropdowns/field";
 export * from "./stories/dropdowns/item";
 export * from "./stories/dropdowns/menu";

package/build/index.js

@@ -236,8 +236,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
 
 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 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$T || (templateObject_1$T = __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$T;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -253,7 +253,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$T || (templateObject_1$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.avatarType &&
         props.avatarType !== "image" &&
         "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -278,7 +278,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$T;
+var templateObject_1$S;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -299,7 +299,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$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -311,7 +311,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$S;
+var templateObject_1$R;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -364,13 +364,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
+var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
 /**
    * A Label is used to specify a title for an input.
    * <hr>
    **/
 var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
-var templateObject_1$R;
+var templateObject_1$Q;
 
 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;
 
@@ -577,7 +577,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
   })));
 };
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
 /**
  * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
  * <hr>
@@ -592,13 +592,13 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
    - To communicate a typing status, use Inline instead
  */
 var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
-var templateObject_1$Q;
+var templateObject_1$P;
 
 var CampaignCardSkeleton = function () {
     return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
 };
 
-var flexCenter = styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+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 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;
@@ -617,7 +617,7 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var templateObject_1$P, templateObject_2$h, templateObject_3$c, templateObject_4$8;
+var templateObject_1$O, templateObject_2$h, templateObject_3$c, templateObject_4$8;
 
 var getStatusIcon = function (status) {
     switch (status) {
@@ -641,7 +641,7 @@ var getTypeDataIcon = function (type) {
             return SvgFunctionalTestRoundIcon;
     }
 };
-var Wrapper$1 = styled__default["default"](Card)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cardStyle);
+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 theme = _a.theme;
     return theme.palette.grey["700"];
@@ -703,9 +703,9 @@ 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$O, 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$g, templateObject_3$b, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
 
-var Wrapper = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __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  cursor: pointer;\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\n  cursor: pointer;\n"])), function (_a) {
+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;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -756,7 +756,7 @@ var IconContainer$1 = styled__default["default"].div(templateObject_6$1 || (temp
     var theme = _a.theme;
     return theme.components.notification.card.padding;
 });
-var CardBody = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var CardBody = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n"])));
 var CardFooter = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var ProductCard = function (props) {
     var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
@@ -764,16 +764,9 @@ var ProductCard = function (props) {
     if (productTitle.length > 42) {
         productTitleCut = "".concat(productTitle.substring(0, 39), "...");
     }
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, { 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 })) })] })));
+    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$N, templateObject_2$f, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
-
-var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
-Drawer.Header = reactModals.DrawerModal.Header;
-Drawer.Body = reactModals.DrawerModal.Body;
-Drawer.Footer = reactModals.DrawerModal.Footer;
-Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
-Drawer.Close = reactModals.DrawerModal.Close;
+var templateObject_1$M, templateObject_2$f, templateObject_3$a, templateObject_4$6, 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.
@@ -979,7 +972,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var StyledTag = styled__default["default"](Tag)(templateObject_1$M || (templateObject_1$M = __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$L || (templateObject_1$L = __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) {
@@ -1015,28 +1008,41 @@ 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, counter !== undefined && jsxRuntime.jsx("span", { children: counter.toString() })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$M;
-
-var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
 var templateObject_1$L;
 
+/**
+ * A Drawer is a container for supplementary content that is anchored to the edge of a page.
+ * <hr>
+ * Used for this:
+    - To display information or actions that are supplementary to the screen’s primary content
+    - To display a list of actions that affect the screen’s content, such as filtering data
+ */
+var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
+Drawer.Header = reactModals.DrawerModal.Header;
+Drawer.Body = reactModals.DrawerModal.Body;
+Drawer.Footer = reactModals.DrawerModal.Footer;
+Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
+Drawer.Close = reactModals.DrawerModal.Close;
+
+var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
+var templateObject_1$K;
+
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$K || (templateObject_1$K = __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$J || (templateObject_1$J = __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$K;
+var templateObject_1$J;
 
-var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n   width: auto !important;\n   min-width: 100%;\n"], ["\n   width: auto !important;\n   min-width: 100%;\n"])));
 /**
    * A Menu is a wrapper for items elements
    **/
-var Menu = function (props) { return jsxRuntime.jsx(UgMenu, __assign({}, props)); };
+var Menu = function (props) { return jsxRuntime.jsx(reactDropdowns.Menu, __assign({}, props)); };
 // Extras
 var PreviousItem = function (props) { return jsxRuntime.jsx(reactDropdowns.PreviousItem, __assign({}, props)); };
 var Separator = function (props) { return jsxRuntime.jsx(reactDropdowns.Separator, __assign({}, props)); };
@@ -1044,8 +1050,7 @@ var NextItem = function (props) { return jsxRuntime.jsx(reactDropdowns.NextItem,
 var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta, __assign({}, props)); };
 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$J;
+var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
 
 /**
  * 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.

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

@@ -1,5 +1,12 @@
 /// <reference types="react" />
 import { DrawerArgs } from "./_types";
+/**
+ * A Drawer is a container for supplementary content that is anchored to the edge of a page.
+ * <hr>
+ * Used for this:
+    - To display information or actions that are supplementary to the screen’s primary content
+    - To display a list of actions that affect the screen’s content, such as filtering data
+ */
 declare const Drawer: {
     (props: DrawerArgs): JSX.Element;
     Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

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

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

@@ -1,30 +0,0 @@
-import { IDrawerModalProps } from "@zendeskgarden/react-modals";
-import { KeyboardEvent, MouseEvent } from "react";
-export interface DrawerArgs extends IDrawerModalProps {
-    /**
-     * Opens the modal
-     */
-    isOpen?: boolean;
-    /**
-     * Passes HTML attributes to the backdrop element
-     */
-    backdropProps?: any;
-    /**
-     * Handles close actions. Can be triggered from the backdrop and from the close icon.
-     *
-     * @param {Object} event The DOM event that triggered the close action
-     */
-    onClose?: (event: KeyboardEvent | MouseEvent) => void;
-    /**
-     * Defines the DOM element that the modal will attatch to
-     */
-    appendToNode?: Element;
-    /**
-     * Directs keyboard focus to the modal on mount
-     */
-    focusOnMount?: boolean;
-    /**
-     * Returns keyboard focus to the element that triggered the modal
-     */
-    restoreFocus?: boolean;
-}

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { DrawerArgs } from "./_types";
-declare const Drawer: {
-    (props: DrawerArgs): JSX.Element;
-    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
-    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
-};
-export { Drawer };

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { DrawerArgs } from "./_types";
-import { ComponentMeta, Story } from "@storybook/react";
-export declare const Default: Story<DrawerArgs>;
-declare const _default: ComponentMeta<{
-    (props: DrawerArgs): JSX.Element;
-    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
-    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
-}>;
-export default _default;

package/build/stories/drawer/loremIpsum.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const LoremIpsum: () => JSX.Element;