@appquality/unguess-design-system 2.8.36 → 2.10.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# v2.10.0 (Mon May 02 2022)
+
+#### 🚀 Enhancement
+
+- feat(stepper): add stepper component with unguess color scheme [#47](https://github.com/AppQuality/unguess-design-system/pull/47) ([@cannarocks](https://github.com/cannarocks))
+
+#### 🐛 Bug Fix
+
+- Cup 648 checkbox cards [#46](https://github.com/AppQuality/unguess-design-system/pull/46) ([@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 2
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.9.0 (Fri Apr 29 2022)
+
+#### 🚀 Enhancement
+
+- Cup 646 allow creation on select [#45](https://github.com/AppQuality/unguess-design-system/pull/45) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.8.37 (Thu Apr 28 2022)
+
+#### 🐛 Bug Fix
+
+- Cup 642 modal fullscreen [#44](https://github.com/AppQuality/unguess-design-system/pull/44) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.8.36 (Thu Apr 28 2022)
 
 #### ⚠️ Pushed to `master`

package/build/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare function useDebounce<T>(value: T, delay?: number): T;
+export default useDebounce;

package/build/index.d.ts

@@ -18,7 +18,9 @@ export * from "./stories/dropdowns/item";
 export * from "./stories/dropdowns/menu";
 export * from "./stories/dropdowns/multiselect";
 export * from "./stories/dropdowns/select";
+export * from "./stories/dropdowns/autocomplete";
 export * from "./stories/forms/checkbox";
+export * from "./stories/forms/checkbox/cards";
 export * as FormField from "./stories/forms/field";
 export * from "./stories/forms/input";
 export * from "./stories/forms/mediaInput";
@@ -50,6 +52,7 @@ export * from "./stories/navigation/chrome";
 export * from "./stories/notifications";
 export * from "./stories/pagination";
 export * from "./stories/profile-modal";
+export * from "./stories/stepper";
 export { Table, Head as TableHead, HeaderRow, HeaderCell, Body as TableBody, Row as TableRow, Cell as TableCell, Caption, } from "./stories/table";
 export { GroupRow, GroupedTable, } from "./stories/table/grouped";
 export * from "./stories/tags";

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$Q || (templateObject_1$Q = __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$Q;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$S || (templateObject_1$S = __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$S;
 
 /**
  * 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$P || (templateObject_1$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$R || (templateObject_1$R = __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$P;
+var templateObject_1$R;
 
 /**
  * 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$O || (templateObject_1$O = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$Q || (templateObject_1$Q = __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$O;
+var templateObject_1$Q;
 
 /**
 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 = styled__default["default"](reactForms.Label)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
+var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$P || (templateObject_1$P = __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$N;
+var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
+var templateObject_1$P;
 
 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$M || (templateObject_1$M = __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$O || (templateObject_1$O = __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,12 +592,33 @@ 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$M;
+var templateObject_1$O;
 
 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$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var flexColumnCenter = styled.css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
+var flexStart = styled.css(templateObject_3$a || (templateObject_3$a = __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$6 || (templateObject_4$6 = __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) {
+    var theme = _a.theme;
+    return theme.components.notification.card.padding;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["200"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shadows.boxShadow(theme);
+});
+var templateObject_1$N, templateObject_2$f, templateObject_3$a, templateObject_4$6;
+
 var getStatusIcon = function (status) {
     switch (status) {
         case "COMPLETED":
@@ -620,24 +641,12 @@ var getTypeDataIcon = function (type) {
             return SvgFunctionalTestRoundIcon;
     }
 };
-var Wrapper$1 = styled__default["default"](Card)(templateObject_1$L || (templateObject_1$L = __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) {
-    var theme = _a.theme;
-    return theme.components.notification.card.padding;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey["200"];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shadows.boxShadow(theme);
-});
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
+var Wrapper$1 = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cardStyle);
+var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$e || (templateObject_2$e = __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"];
 });
-var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"])), function (_a) {
+var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -650,7 +659,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$8 || (temp
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledLabel$1 = styled__default["default"](Label)(templateObject_4$4 || (templateObject_4$4 = __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$5 || (templateObject_4$5 = __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) {
@@ -692,11 +701,11 @@ var CampaignCard = function (props) {
     if (campaignTitle.length > 29) {
         campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
     }
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$1, __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$1, __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, {})] })] })));
+    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$L, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$M, templateObject_2$e, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
 
-var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __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$L || (templateObject_1$L = __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 theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -709,7 +718,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateOb
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var StyledTagNew = styled__default["default"](Tag)(templateObject_2$c || (templateObject_2$c = __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$d || (templateObject_2$d = __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) {
@@ -722,14 +731,14 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$c || (templa
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledLabel = styled__default["default"](Label)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$8 || (templateObject_3$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) {
     var theme = _a.theme;
     return theme.palette.grey["500"];
 });
-var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __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$4 || (templateObject_4$4 = __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) {
@@ -755,9 +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, __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, { 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$K, templateObject_2$c, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$L, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8;
 
 var Drawer = function (props) { return jsxRuntime.jsx(reactModals.DrawerModal, __assign({}, props)); };
 Drawer.Header = reactModals.DrawerModal.Header;
@@ -970,7 +979,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-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 StyledTag = styled__default["default"](Tag)(templateObject_1$K || (templateObject_1$K = __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) {
@@ -1006,24 +1015,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, counter !== undefined && jsxRuntime.jsx("span", { children: counter.toString() })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$J;
+var templateObject_1$K;
 
-var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
-var templateObject_1$I;
+var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
+var templateObject_1$J;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-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 UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$I || (templateObject_1$I = __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$H;
+var templateObject_1$I;
 
-var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n   width: auto !important;\n   min-width: 100%;\n"], ["\n   width: auto !important;\n   min-width: 100%;\n"])));
+var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$H || (templateObject_1$H = __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
    **/
@@ -1036,7 +1045,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$G;
+var templateObject_1$H;
 
 /**
  * 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.
@@ -1047,7 +1056,7 @@ var templateObject_1$G;
  */
 var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
 
-var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$G || (templateObject_1$G = __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   ");
 });
@@ -1064,9 +1073,20 @@ 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$F;
+var templateObject_1$G;
+
+/**
+ * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
+ * <hr>
+ * Used for this:
+    - To filter down a large list of options
+    - To quickly find a known option
+ * Not for this:
+    - To make more than one selection, use Multiselect instead
+ */
+var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autocomplete, __assign({}, props)); };
 
-var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
    * <hr>
@@ -1078,7 +1098,35 @@ 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$E;
+var templateObject_1$F;
+
+var StyledCard = styled__default["default"](Card)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"], ["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"])), cardStyle, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.blue[300];
+});
+var IconWrapper = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base;
+});
+var LabelWrapper = styled__default["default"](Label)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n   margin: ", "px auto;\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"], ["\n   margin: ", "px auto;\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[600];
+});
+var StyledLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base;
+});
+var CheckboxCard = function (props) {
+    var _a = React.useState(props.defaultChecked || false), checked = _a[0], setChecked = _a[1];
+    var handleToggle = function () {
+        setChecked(!checked);
+    };
+    return (jsxRuntime.jsxs(StyledCard, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
+};
+var templateObject_1$E, templateObject_2$c, templateObject_3$7, templateObject_4$3;
 
 var UgField = styled__default["default"](reactForms.Field)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
 /**
@@ -1795,25 +1843,17 @@ var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$d || (t
 var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
 var templateObject_1$d;
 
-var flexCenter = styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var flexColumnCenter = styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
-var flexStart = styled.css(templateObject_3$5 || (templateObject_3$5 = __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 templateObject_1$c, templateObject_2$7, templateObject_3$5;
-
 /**
  * 1. Allows an item to contain a positioned sub-menu.
  * 2. Reset stacking context for sub-menu css-arrows.
  **/
-var StyledItem = styled__default["default"].li(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: block;\n  position: relative; /* [1] */\n  z-index: 0; /* [2] */\n  cursor: ", ";\n  text-decoration: none;\n  line-height: ", "px;\n  word-wrap: break-word;\n  user-select: none;\n  &:first-child {\n    margin-top: ", "px;\n  }\n  &:last-child {\n    margin-bottom: ", "px;\n  }\n  &:focus {\n    outline: none;\n  }\n\n  width: fill-available;\n  ", "\n  height: ", ";\n  padding: ", " ", ";\n\n  ", ";\n\n  ", " {\n    right: ", ";\n    left: ", ";\n  }\n"], ["\n  display: block;\n  position: relative; /* [1] */\n  z-index: 0; /* [2] */\n  cursor: ", ";\n  text-decoration: none;\n  line-height: ", "px;\n  word-wrap: break-word;\n  user-select: none;\n  &:first-child {\n    margin-top: ", "px;\n  }\n  &:last-child {\n    margin-bottom: ", "px;\n  }\n  &:focus {\n    outline: none;\n  }\n\n  width: fill-available;\n  ", "\n  height: ", ";\n  padding: ", " ", ";\n\n  ", ";\n\n  ", " {\n    right: ", ";\n    left: ", ";\n  }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n  }"); }, StyledMenuItemIcon, function (props) {
+var StyledItem = styled__default["default"].li(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: block;\n  position: relative; /* [1] */\n  z-index: 0; /* [2] */\n  cursor: ", ";\n  text-decoration: none;\n  line-height: ", "px;\n  word-wrap: break-word;\n  user-select: none;\n  &:first-child {\n    margin-top: ", "px;\n  }\n  &:last-child {\n    margin-bottom: ", "px;\n  }\n  &:focus {\n    outline: none;\n  }\n\n  width: fill-available;\n  ", "\n  height: ", ";\n  padding: ", " ", ";\n\n  ", ";\n\n  ", " {\n    right: ", ";\n    left: ", ";\n  }\n"], ["\n  display: block;\n  position: relative; /* [1] */\n  z-index: 0; /* [2] */\n  cursor: ", ";\n  text-decoration: none;\n  line-height: ", "px;\n  word-wrap: break-word;\n  user-select: none;\n  &:first-child {\n    margin-top: ", "px;\n  }\n  &:last-child {\n    margin-bottom: ", "px;\n  }\n  &:focus {\n    outline: none;\n  }\n\n  width: fill-available;\n  ", "\n  height: ", ";\n  padding: ", " ", ";\n\n  ", ";\n\n  ", " {\n    right: ", ";\n    left: ", ";\n  }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n  }"); }, StyledMenuItemIcon, function (props) {
     return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
 }, function (props) {
     return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
 });
-var StyledBody$3 = styled__default["default"].li(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
-var IconContainer = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: 3px;\n"], ["\n  margin-right: ", ";\n  margin-top: 3px;\n"])), function (_a) {
+var StyledBody$3 = styled__default["default"].li(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var IconContainer = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: 3px;\n"], ["\n  margin-right: ", ";\n  margin-top: 3px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.sm;
 });
@@ -1826,7 +1866,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$b, templateObject_2$6, templateObject_3$4, templateObject_4$2;
+var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$2;
 
 var _path$4;
 
@@ -1883,16 +1923,16 @@ var SvgInfoFill = function SvgInfoFill(props) {
   })));
 };
 
-var StyledButton$2 = styled__default["default"](Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n\n  ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n\n  ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(props.theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n  }"); });
+var StyledButton$2 = styled__default["default"](Button)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n\n  ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n\n  ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(props.theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n  }"); });
 var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
-var templateObject_1$a;
+var templateObject_1$b;
 
-var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
+var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject([""], [""])));
 /**
  *  Use Paragraph to render blocks of text with Garden styling.
  */
 var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
-var templateObject_1$9;
+var templateObject_1$a;
 
 var getInitials = function (name) {
     var names = name.split(" ");
@@ -1900,9 +1940,9 @@ var getInitials = function (name) {
     return initials;
 };
 
-var StyledButton$1 = styled__default["default"](Button)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(props.theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n  }"); });
-var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  color: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"], ["\n  color: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
-var StyledBody$2 = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  margin: ", "px\n    ", "px;\n"], ["\n  margin: ", "px\n    ", "px;\n"])), function (_a) {
+var StyledButton$1 = styled__default["default"](Button)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(props.theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n  }"); });
+var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  color: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"], ["\n  color: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
+var StyledBody$2 = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  margin: ", "px\n    ", "px;\n"], ["\n  margin: ", "px\n    ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -1929,7 +1969,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$8, templateObject_2$5, templateObject_3$3, templateObject_4$1, templateObject_5, templateObject_6;
+var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$1, templateObject_5, templateObject_6;
 
 var _path$1;
 
@@ -1979,30 +2019,30 @@ var SvgTranslationExists = function SvgTranslationExists(props) {
   })));
 };
 
-var StyledBody$1 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  margin: ", "px\n    ", "px;\n"], ["\n  margin: ", "px\n    ", "px;\n"])), function (_a) {
+var StyledBody$1 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  margin: ", "px\n    ", "px;\n"], ["\n  margin: ", "px\n    ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.base * 4;
 });
-var StyledButtonContainer = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n  & button { \n    justify-content: flex-start;\n  }\n"], ["\n  ", "\n  & button { \n    justify-content: flex-start;\n  }\n"])), flexStart);
-var StyledButton = styled__default["default"](Button)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(props.theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n  }"); });
+var StyledButtonContainer = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  ", "\n  & button { \n    justify-content: flex-start;\n  }\n"], ["\n  ", "\n  & button { \n    justify-content: flex-start;\n  }\n"])), flexStart);
+var StyledButton = styled__default["default"](Button)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(props.theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n  }"); });
 var LanguageItem = function (props) {
     var _a;
     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.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
 };
-var templateObject_1$7, templateObject_2$4, templateObject_3$2;
+var templateObject_1$8, templateObject_2$5, templateObject_3$3;
 
-var ProfileContainer = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n  padding-top: ", "px;\n  margin-bottom: ", "px;\n"], ["\n  ", "\n  padding-top: ", "px;\n  margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
+var ProfileContainer = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  ", "\n  padding-top: ", "px;\n  margin-bottom: ", "px;\n"], ["\n  ", "\n  padding-top: ", "px;\n  margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
     var theme = _a.theme;
     return theme.space.base * 2;
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 });
-var CompanyHolder = styled__default["default"](SM)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  text-transform: uppercase;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  color: ", ";\n"], ["\n  text-transform: uppercase;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  color: ", ";\n"])), function (_a) {
+var CompanyHolder = styled__default["default"](SM)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  text-transform: uppercase;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  color: ", ";\n"], ["\n  text-transform: uppercase;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 2;
 }, function (_a) {
@@ -2012,7 +2052,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$3 || (templa
     var theme = _a.theme;
     return theme.palette.blue["600"];
 });
-var UserDetails = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"], ["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"])), function (_a) {
+var UserDetails = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"], ["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 4;
 }, function (_a) {
@@ -2023,9 +2063,9 @@ var UserContainer = function (props) {
     var _a;
     return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
 };
-var templateObject_1$6, templateObject_2$3, templateObject_3$1;
+var templateObject_1$7, templateObject_2$4, templateObject_3$2;
 
-var StyledList = styled__default["default"].ul(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n"], ["\n  padding: 0;\n  margin: 0;\n"])));
+var StyledList = styled__default["default"].ul(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n"], ["\n  padding: 0;\n  margin: 0;\n"])));
 var UserMenu = function (props) {
     var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
     var toggleItem = function (item) {
@@ -2033,7 +2073,7 @@ var UserMenu = function (props) {
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick ? props.onFeedbackClick() : console.log("feedback fired"); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) }))), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat, chatSupportLabel: props === null || props === void 0 ? void 0 : props.chatSupportLabel, copyLabel: props === null || props === void 0 ? void 0 : props.copyLabel }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
 };
-var templateObject_1$5;
+var templateObject_1$6;
 
 function debounce(callback, wait) {
     var timer;
@@ -2062,7 +2102,7 @@ function useWindowSize() {
     return size;
 }
 
-var StyledModal = styled__default["default"](Modal)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"], ["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"])), function (_a) {
+var StyledModal = styled__default["default"](Modal)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"], ["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.xxl;
 }, function (_a) {
@@ -2075,7 +2115,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$4 || (templ
     var theme = _a.theme;
     return theme.space.base * 3;
 });
-var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  margin: ", ";\n  padding: 0;\n"], ["\n  margin: ", ";\n  padding: 0;\n"])), function (_a) {
+var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  margin: ", ";\n  padding: 0;\n"], ["\n  margin: ", ";\n  padding: 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.xxs + " " + theme.space.xs;
 });
@@ -2100,7 +2140,37 @@ var ProfileModal = function (_a) {
     };
     return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
 };
-var templateObject_1$4, templateObject_2$2;
+var templateObject_1$5, templateObject_2$3;
+
+var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  svg {\n    color: ", ";\n  }\n"], ["\n  svg {\n    color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.green[700];
+});
+var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
+var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  ", "\n\n  div[data-garden-id=\"accordions.step_icon\"] {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n\n  ", "\n"], ["\n  ", "\n\n  div[data-garden-id=\"accordions.step_icon\"] {\n    background-color: ", ";\n    color: ", ";\n    font-weight: bold;\n  }\n\n  ", "\n"])), function (props) {
+    console.log("Active index: ", props.activeIndex);
+    return "";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[200];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[800];
+}, function (props) {
+    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    ");
+});
+/**
+ * A Stepper guides users through steps of a task in sequential order.
+
+ * Used for this:
+    - For multi-step flows that must be completed in order
+ */
+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;
 
 var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
 /**
@@ -2211,6 +2281,7 @@ Object.defineProperty(exports, 'ModalClose', {
 exports.Accordion = Accordion;
 exports.Anchor = Anchor;
 exports.AppHeader = AppHeader;
+exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Blockquote = Blockquote;
 exports.Body = Body$1;
@@ -2225,6 +2296,7 @@ exports.CardBody = CardBody$1;
 exports.CardFooter = CardFooter$1;
 exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
+exports.CheckboxCard = CheckboxCard;
 exports.Chrome = Chrome;
 exports.Close = Close;
 exports.Code = Code;
@@ -2295,6 +2367,7 @@ exports.Skeleton = Skeleton;
 exports.Span = Span;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
+exports.Stepper = Stepper;
 exports.Table = Table;
 exports.TableBody = Body;
 exports.TableCell = Cell;

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

@@ -0,0 +1,3 @@
+import { IAutocompleteProps } from "@zendeskgarden/react-dropdowns";
+export interface AutocompleteArgs extends IAutocompleteProps {
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AutocompleteArgs } from "./_types";
+/**
+ * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
+ * <hr>
+ * Used for this:
+    - To filter down a large list of options
+    - To quickly find a known option
+ * Not for this:
+    - To make more than one selection, use Multiselect instead
+ */
+declare const Autocomplete: (props: AutocompleteArgs) => JSX.Element;
+export { Autocomplete };

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { AutocompleteArgs } from "./_types";
+interface AutocompleteStoryArgs extends AutocompleteArgs {
+    allowNew?: boolean;
+}
+export declare const Default: Story<AutocompleteStoryArgs>;
+declare const _default: ComponentMeta<(props: AutocompleteArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/checkbox/cards/_types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CardProps } from "../../../cards/_types";
+import { CheckboxArgs } from "../_types";
+export interface CheckboxCardArgs extends CheckboxArgs {
+    card?: CardProps;
+    label: string;
+    icon: React.ReactNode;
+    iconActive?: React.ReactNode;
+}

package/build/stories/forms/checkbox/cards/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckboxCardArgs } from "./_types";
+declare const CheckboxCard: (props: CheckboxCardArgs) => JSX.Element;
+export { CheckboxCard };

package/build/stories/forms/checkbox/cards/index.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CheckboxCardArgs } from "./_types";
+interface FormProps {
+    cards: CheckboxCardArgs[];
+    form: {
+        onSubmit: (e: any) => void;
+    };
+}
+export declare const SingleCard: Story<CheckboxCardArgs>;
+export declare const MultipleCards: Story<FormProps>;
+declare const _default: ComponentMeta<(props: CheckboxCardArgs) => JSX.Element>;
+export default _default;

package/build/stories/modals/fullscreen/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ModalArgs } from "../_types";
+declare const ModalFullScreen: {
+    (props: ModalArgs): JSX.Element;
+    Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-modals/dist/typings/elements/Header").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Body: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Footer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Close: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { ModalFullScreen };

package/build/stories/modals/fullscreen/index.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ModalArgs } from "../_types";
+import { ComponentMeta, Story } from "@storybook/react";
+interface ModalStoryArgs extends ModalArgs {
+    breadcrumbs?: any;
+    isDanger?: boolean;
+}
+export declare const Default: Story<ModalStoryArgs>;
+declare const _default: ComponentMeta<{
+    (props: ModalArgs): JSX.Element;
+    Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-modals/dist/typings/elements/Header").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Body: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Footer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Close: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IStepperProps, IStepperLabelProps } from "@zendeskgarden/react-accordions";
+export interface StepperArgs extends IStepperProps {
+    /** Defines the currently active step, starting at 0 */
+    activeIndex?: number;
+    /** Applies horizontal layout styling */
+    isHorizontal?: boolean;
+}
+export interface StepperLabelArgs extends IStepperLabelProps {
+    /** Replaces the label number with an icon */
+    icon?: React.ReactNode;
+    /** Hides the label text */
+    isHidden?: boolean;
+}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { StepperArgs } from "./_types";
+/**
+ * A Stepper guides users through steps of a task in sequential order.
+
+ * Used for this:
+    - For multi-step flows that must be completed in order
+ */
+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>>;
+};
+export { Stepper };

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { StepperArgs } from "./_types";
+interface StepperStoryProps extends StepperArgs {
+    currentStep: number;
+}
+export declare const Default: Story<StepperStoryProps>;
+export declare const SeparateContent: Story<StepperStoryProps>;
+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>>;
+}>;
+export default _default;

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

@@ -1,3 +1,4 @@
 export declare const flexCenter: import("styled-components").FlattenSimpleInterpolation;
 export declare const flexColumnCenter: import("styled-components").FlattenSimpleInterpolation;
 export declare const flexStart: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const cardStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/package.json

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