@appquality/unguess-design-system 2.10.13 → 2.10.14

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.10.14 (Fri May 06 2022)
+
+#### 🐛 Bug Fix
+
+- style(stepper): update spaces and content color [#50](https://github.com/AppQuality/unguess-design-system/pull/50) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.13 (Thu May 05 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -630,7 +630,7 @@ var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTem
     var theme = _a.theme;
     return (theme.rtl ? "flex-end" : "flex-start");
 });
-var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
+var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -643,7 +643,7 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var templateObject_1$O, templateObject_2$i, templateObject_3$c, templateObject_4$8;
+var templateObject_1$O, templateObject_2$i, templateObject_3$c, templateObject_4$9;
 
 var getStatusIcon = function (status) {
     switch (status) {
@@ -685,7 +685,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$b || (temp
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontSizes.sm;
 }, function (_a) {
@@ -729,7 +729,7 @@ var CampaignCard = function (props) {
     }
     return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
-var templateObject_1$N, templateObject_2$h, templateObject_3$b, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$N, templateObject_2$h, templateObject_3$b, templateObject_4$8, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
 
 var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -764,7 +764,7 @@ var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$a || (tem
     var theme = _a.theme;
     return theme.palette.grey["500"];
 });
-var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"])), function (_a) {
+var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["600"];
 }, function (_a) {
@@ -792,7 +792,7 @@ var ProductCard = function (props) {
     }
     return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, __assign({ onClick: props.onCtaClick }, { children: [isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))), props.icon && jsxRuntime.jsx(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] })), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
 };
-var templateObject_1$M, templateObject_2$g, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$M, templateObject_2$g, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1146,7 +1146,7 @@ var LabelWrapper = styled__default["default"](Label)(templateObject_3$9 || (temp
     var theme = _a.theme;
     return theme.palette.grey[600];
 });
-var StyledLabel = styled__default["default"](Label)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+var StyledLabel = styled__default["default"](Label)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
@@ -1158,7 +1158,7 @@ var CheckboxCard = function (props) {
     };
     return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper$1, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
 };
-var templateObject_1$G, templateObject_2$f, templateObject_3$9, templateObject_4$5;
+var templateObject_1$G, templateObject_2$f, templateObject_3$9, templateObject_4$6;
 
 var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 /**
@@ -1249,7 +1249,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
     var theme = _a.theme;
     return theme.colors.primaryHue;
 });
-var Circle = styled__default["default"].div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"], ["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"])), function (_a) {
+var Circle = styled__default["default"].div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"], ["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -1277,7 +1277,7 @@ var RadioCard = function (_a) {
     var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
     return (jsxRuntime.jsxs(StyledCard, __assign({}, card, props, { className: props.checked ? "card-active" : "", onClick: function () { props.onChecked && props.onChecked(props.value); } }, { children: [jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })), jsxRuntime.jsx(IconWrapper, { children: (iconActive && props.checked) ? iconActive : icon }), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsx(StyledText, { children: props.label })] })));
 };
-var templateObject_1$B, templateObject_2$d, templateObject_3$8, templateObject_4$4, templateObject_5$2;
+var templateObject_1$B, templateObject_2$d, templateObject_3$8, templateObject_4$5, templateObject_5$2;
 
 var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
 /**
@@ -1885,7 +1885,7 @@ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$6 ||
     var theme = _a.theme;
     return theme.palette.grey["100"];
 });
-var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  padding: ", "px ", "px;\n"], ["\n  padding: ", "px ", "px;\n"])), function (_a) {
+var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  padding: ", "px ", "px;\n"], ["\n  padding: ", "px ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 4;
 }, function (_a) {
@@ -1899,7 +1899,7 @@ ModalFullScreen.Body = StyledBody$4;
 ModalFullScreen.Footer = StyledFooter;
 ModalFullScreen.Close = StyledModalClose;
 ModalFullScreen.FooterItem = FooterItem;
-var templateObject_1$f, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$1;
+var templateObject_1$f, templateObject_2$8, templateObject_3$6, templateObject_4$4, templateObject_5$1;
 
 /**
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -1987,7 +1987,7 @@ var IconContainer = styled__default["default"].div(templateObject_3$5 || (templa
     var theme = _a.theme;
     return theme.space.sm;
 });
-var MenuItemBody = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), flexStart);
+var MenuItemBody = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), flexStart);
 var MenuItem = function (_a) {
     var children = _a.children, selectedItem = _a.selectedItem, content = _a.content, props = __rest(_a, ["children", "selectedItem", "content"]);
     var isActive = selectedItem && selectedItem === props.value;
@@ -1996,7 +1996,7 @@ var MenuItem = function (_a) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
 };
-var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$2;
+var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$3;
 
 var _path$3;
 
@@ -2079,7 +2079,7 @@ var StyledBody$2 = styled__default["default"].div(templateObject_3$4 || (templat
     var theme = _a.theme;
     return theme.space.base * 4;
 });
-var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (_a) {
+var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 4;
 });
@@ -2099,7 +2099,7 @@ var HelpItem = function (props) {
     var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
 };
-var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$1, templateObject_5, templateObject_6;
+var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$2, templateObject_5, templateObject_6;
 
 function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
@@ -2272,6 +2272,13 @@ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObje
     return props.activeIndex !== undefined &&
         "\n      ".concat(UgStep, ":nth-child(").concat(props.activeIndex + 1, ")  {\n        \n        div[data-garden-id=\"accordions.step_icon\"] {\n            background-color: ").concat(props.theme.palette.blue[600], ";\n            color: white;\n        }\n\n        ").concat(UgLabel, " {\n            font-weight: 500;\n            color: ").concat(props.theme.palette.blue[600], ";\n        }\n      }\n    ");
 });
+var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  padding: ", ";\n  margin-top: 0;\n  margin-bottom: 0;\n  > div { \n    color: ", "; \n  }\n"], ["\n  padding: ", ";\n  margin-top: 0;\n  margin-bottom: 0;\n  > div { \n    color: ", "; \n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.space.sm, " ").concat(theme.space.sm, " ").concat(theme.space.sm, " 24px");
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[600];
+});
 /**
  * A Stepper guides users through steps of a task in sequential order.
 
@@ -2281,8 +2288,8 @@ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObje
 var Stepper = function (props) { return jsxRuntime.jsx(UgStepper, __assign({}, props)); };
 Stepper.Step = UgStep;
 Stepper.Label = UgLabel;
-Stepper.Content = UgStepper.Content;
-var templateObject_1$4, templateObject_2$2, templateObject_3$1;
+Stepper.Content = UgContent;
+var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1;
 
 var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
 /**

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

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

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

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

package/package.json

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