@gympass/yoga 7.117.3 → 7.119.0

package/cjs/Dialog/web/Dialog.js

@@ -1,9 +1,7 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -21,7 +19,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -64,11 +61,13 @@ module.exports = __toCommonJS(Dialog_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var import_react_focus_lock = __toESM(require("react-focus-lock"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_prop_types = require("prop-types");
 var import_yoga_icons = require("@gympass/yoga-icons");
 var import_hooks = require("../../hooks");
 var import__ = require("../..");
+var import_utils = require("./utils");
 const StyledDialog = (0, import_styled_components.default)(import__.Card)`
   ${({
   onClose,
@@ -136,10 +135,33 @@ const CloseButton = (0, import_styled_components.default)(import__.Button.Icon)`
 `;
 const Dialog = import_react.default.forwardRef(
   (_a, forwardedRef) => {
-    var _b = _a, { isOpen, hideCloseButton, children, dialogId, onClose, zIndex } = _b, props = __objRest(_b, ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"]);
+    var _b = _a, {
+      isOpen,
+      hideCloseButton,
+      children,
+      dialogId,
+      onClose,
+      zIndex,
+      closeLabel,
+      className
+    } = _b, props = __objRest(_b, [
+      "isOpen",
+      "hideCloseButton",
+      "children",
+      "dialogId",
+      "onClose",
+      "zIndex",
+      "closeLabel",
+      "className"
+    ]);
     const dialogRef = (0, import_hooks.useCombinedRefs)(forwardedRef);
     const dialogElement = (0, import_hooks.usePortal)(dialogId != null ? dialogId : "dialog");
     const isCloseButtonVisible = onClose && !hideCloseButton;
+    const lockProps = __spreadValues({
+      role: "dialog",
+      "aria-modal": true,
+      onClose
+    }, props);
     const closeDialog = (0, import_react.useCallback)(
       (e) => {
         if (dialogRef.current === e.target && isOpen && onClose) {
@@ -170,18 +192,30 @@ const Dialog = import_react.default.forwardRef(
           onClose,
           ref: dialogRef,
           zIndex,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledDialog, __spreadProps(__spreadValues({ onClose }, props), { children: [
-            isCloseButtonVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              CloseButton,
-              {
-                icon: import_yoga_icons.Close,
-                inverted: true,
-                secondary: true,
-                onClick: onClose
-              }
-            ) }),
-            children
-          ] }))
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_react_focus_lock.default,
+            {
+              as: StyledDialog,
+              lockProps,
+              returnFocus: true,
+              disabled: !isOpen,
+              className,
+              onActivation: import_utils.focusOnFirstProgrammaticFocusableElement,
+              children: [
+                isCloseButtonVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  CloseButton,
+                  {
+                    "aria-label": closeLabel,
+                    icon: import_yoga_icons.Close,
+                    inverted: true,
+                    secondary: true,
+                    onClick: onClose
+                  }
+                ) }),
+                children
+              ]
+            }
+          )
         }
       ),
       dialogElement
@@ -197,6 +231,8 @@ Dialog.propTypes = {
   hideCloseButton: import_prop_types.bool,
   /** Function to close the dialog. */
   onClose: import_prop_types.func,
+  closeLabel: import_prop_types.string,
+  className: import_prop_types.string,
   zIndex: import_prop_types.number,
   children: import_prop_types.node.isRequired
 };
@@ -204,6 +240,8 @@ Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
   onClose: void 0,
+  closeLabel: void 0,
+  className: void 0,
   zIndex: 3,
   dialogId: void 0
 };

package/cjs/Dialog/web/Dialog.test.js

@@ -66,9 +66,9 @@ describe("<Dialog />", () => {
   it("should render with close button", () => {
     const onCloseMock = jest.fn();
     (0, import_react2.render)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { isOpen: true, onClose: onCloseMock, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Header, { children: "Title" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { isOpen: true, onClose: onCloseMock, closeLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Header, { children: "Title" }) }) })
     );
-    const button = import_react2.screen.getByRole("button");
+    const button = import_react2.screen.getByRole("button", { name: "Close" });
     import_react2.fireEvent.click(button);
     expect(onCloseMock).toHaveBeenCalledTimes(1);
   });
@@ -89,4 +89,10 @@ describe("<Dialog />", () => {
     expect(import_react2.screen.getByText("Title")).toBeInTheDocument();
     expect(import_react2.screen.getByText("Second Title")).toBeInTheDocument();
   });
+  it("should focus on the title when dialog is opened", () => {
+    (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { isOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Header, { children: "Add e-mail" }) }) })
+    );
+    expect(document.activeElement).toHaveTextContent("Add e-mail");
+  });
 });

package/cjs/Dialog/web/Header.js

@@ -48,6 +48,6 @@ module.exports = __toCommonJS(Header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_Text = __toESM(require("../../Text"));
-const Header = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, __spreadValues({ bold: true, as: "header", ta: "center", mb: "large" }, props));
+const Header = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, __spreadValues({ bold: true, as: "h2", ta: "center", mb: "large", tabIndex: -1 }, props));
 Header.displayName = "Dialog.Header";
 var Header_default = Header;

package/cjs/Dialog/web/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  focusOnFirstProgrammaticFocusableElement: () => focusOnFirstProgrammaticFocusableElement
+});
+module.exports = __toCommonJS(utils_exports);
+function focusOnFirstProgrammaticFocusableElement(container) {
+  const element = container.querySelector('[tabindex="-1"]');
+  element == null ? void 0 : element.focus();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  focusOnFirstProgrammaticFocusableElement
+});

package/cjs/Feedback/web/Feedback.js

@@ -91,6 +91,7 @@ function Feedback(_a) {
   const iconProps = VARIANT_ICONS[variant];
   let primaryButton;
   let secondaryButton;
+  let captionElement;
   let titleElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledFeedback.Title, { children: title });
   function defineCompoundComponents() {
     import_react.default.Children.forEach(children, (child) => {
@@ -100,6 +101,8 @@ function Feedback(_a) {
         secondaryButton = child;
       if (isChildFromComponent(child, import_StyledFeedback.Title))
         titleElement = child;
+      if (isChildFromComponent(child, import_StyledFeedback.Caption))
+        captionElement = child;
     });
   }
   defineCompoundComponents();
@@ -128,6 +131,7 @@ function Feedback(_a) {
           titleElement,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { mt: "small", color: "deep", children: description })
         ] }),
+        captionElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "medium", children: captionElement }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_StyledFeedback.Actions, { mt: "xxxlarge", children: [
           primaryButton,
           secondaryButton

package/cjs/Feedback/web/Feedback.test.js

@@ -30,6 +30,7 @@ function renderWithTheme(ui) {
 }
 const title = "Welcome to Yoga";
 const description = "Enjoy your membership!";
+const caption = "Caption Description here.";
 describe("<Feedback />", () => {
   it("should render the title and description", () => {
     const { getByText } = renderWithTheme(
@@ -44,6 +45,12 @@ describe("<Feedback />", () => {
     );
     expect(getByRole("heading", { name: title })).toBeTruthy();
   });
+  it("should render caption children", () => {
+    const { getByText } = renderWithTheme(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback, { variant: "success", title, description, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.Caption, { children: caption }) })
+    );
+    expect(getByText(caption)).toBeTruthy();
+  });
   it("should render the buttons", () => {
     const { getByRole } = renderWithTheme(
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Feedback, { variant: "success", title, description, children: [
@@ -54,6 +61,18 @@ describe("<Feedback />", () => {
     expect(getByRole("button", { name: "Ok" })).toBeTruthy();
     expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
   });
+  it("should render title, description, buttons and caption", () => {
+    const { getByText, getByRole } = renderWithTheme(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Feedback, { variant: "success", description: "Enjoy your membership!", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.Caption, { children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.PrimaryButton, { children: "Ok" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.SecondaryButton, { children: "Cancel" })
+      ] })
+    );
+    expect(getByText(caption)).toBeTruthy();
+    expect(getByRole("button", { name: "Ok" })).toBeTruthy();
+    expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
+  });
   it("should render correctly when not centered vertically", () => {
     const { baseElement } = renderWithTheme(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/cjs/Feedback/web/StyledFeedback.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var StyledFeedback_exports = {};
 __export(StyledFeedback_exports, {
   Actions: () => Actions,
+  Caption: () => Caption,
   Content: () => Content,
   PrimaryButton: () => PrimaryButton,
   SecondaryButton: () => SecondaryButton,
@@ -120,12 +121,26 @@ const PrimaryButton = (0, import_styled_components.default)(import_Button.defaul
 const SecondaryButton = (0, import_styled_components.default)(import_Button.default.Text)`
   ${buttonsStyles}
 `;
+const Caption = (0, import_styled_components.default)(import_Text.default.Body1).attrs(() => ({
+  as: "p",
+  bold: true
+}))`
+  ${({
+  theme: {
+    yoga: { colors }
+  }
+}) => import_styled_components.css`
+      color: ${colors.text.secondary};
+    `}}
+`;
 Title.displayName = "Feedback.Title";
 PrimaryButton.displayName = "Feedback.PrimaryButton";
 SecondaryButton.displayName = "Feedback.SecondaryButton";
+Caption.displayName = "Feedback.Caption";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Actions,
+  Caption,
   Content,
   PrimaryButton,
   SecondaryButton,

package/cjs/Feedback/web/index.js

@@ -36,4 +36,5 @@ var import_StyledFeedback = require("./StyledFeedback");
 import_Feedback.default.Title = import_StyledFeedback.Title;
 import_Feedback.default.PrimaryButton = import_StyledFeedback.PrimaryButton;
 import_Feedback.default.SecondaryButton = import_StyledFeedback.SecondaryButton;
+import_Feedback.default.Caption = import_StyledFeedback.Caption;
 var web_default = import_Feedback.default;

package/esm/Dialog/web/Dialog.js

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -32,11 +29,13 @@ var __objRest = (source, exclude) => {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
+import FocusLock from "react-focus-lock";
 import styled, { css } from "styled-components";
 import { func, bool, node, number, string } from "prop-types";
 import { Close } from "@gympass/yoga-icons";
 import { usePortal, useCombinedRefs } from "../../hooks";
 import { Button, Card, Box } from "../..";
+import { focusOnFirstProgrammaticFocusableElement } from "./utils";
 const StyledDialog = styled(Card)`
   ${({
   onClose,
@@ -104,10 +103,33 @@ const CloseButton = styled(Button.Icon)`
 `;
 const Dialog = React.forwardRef(
   (_a, forwardedRef) => {
-    var _b = _a, { isOpen, hideCloseButton, children, dialogId, onClose, zIndex } = _b, props = __objRest(_b, ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"]);
+    var _b = _a, {
+      isOpen,
+      hideCloseButton,
+      children,
+      dialogId,
+      onClose,
+      zIndex,
+      closeLabel,
+      className
+    } = _b, props = __objRest(_b, [
+      "isOpen",
+      "hideCloseButton",
+      "children",
+      "dialogId",
+      "onClose",
+      "zIndex",
+      "closeLabel",
+      "className"
+    ]);
     const dialogRef = useCombinedRefs(forwardedRef);
     const dialogElement = usePortal(dialogId != null ? dialogId : "dialog");
     const isCloseButtonVisible = onClose && !hideCloseButton;
+    const lockProps = __spreadValues({
+      role: "dialog",
+      "aria-modal": true,
+      onClose
+    }, props);
     const closeDialog = useCallback(
       (e) => {
         if (dialogRef.current === e.target && isOpen && onClose) {
@@ -138,18 +160,30 @@ const Dialog = React.forwardRef(
           onClose,
           ref: dialogRef,
           zIndex,
-          children: /* @__PURE__ */ jsxs(StyledDialog, __spreadProps(__spreadValues({ onClose }, props), { children: [
-            isCloseButtonVisible && /* @__PURE__ */ jsx(Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ jsx(
-              CloseButton,
-              {
-                icon: Close,
-                inverted: true,
-                secondary: true,
-                onClick: onClose
-              }
-            ) }),
-            children
-          ] }))
+          children: /* @__PURE__ */ jsxs(
+            FocusLock,
+            {
+              as: StyledDialog,
+              lockProps,
+              returnFocus: true,
+              disabled: !isOpen,
+              className,
+              onActivation: focusOnFirstProgrammaticFocusableElement,
+              children: [
+                isCloseButtonVisible && /* @__PURE__ */ jsx(Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ jsx(
+                  CloseButton,
+                  {
+                    "aria-label": closeLabel,
+                    icon: Close,
+                    inverted: true,
+                    secondary: true,
+                    onClick: onClose
+                  }
+                ) }),
+                children
+              ]
+            }
+          )
         }
       ),
       dialogElement
@@ -165,6 +199,8 @@ Dialog.propTypes = {
   hideCloseButton: bool,
   /** Function to close the dialog. */
   onClose: func,
+  closeLabel: string,
+  className: string,
   zIndex: number,
   children: node.isRequired
 };
@@ -172,6 +208,8 @@ Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
   onClose: void 0,
+  closeLabel: void 0,
+  className: void 0,
   zIndex: 3,
   dialogId: void 0
 };

package/esm/Dialog/web/Dialog.test.js

@@ -43,9 +43,9 @@ describe("<Dialog />", () => {
   it("should render with close button", () => {
     const onCloseMock = jest.fn();
     render(
-      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dialog, { isOpen: true, onClose: onCloseMock, children: /* @__PURE__ */ jsx(Dialog.Header, { children: "Title" }) }) })
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dialog, { isOpen: true, onClose: onCloseMock, closeLabel: "Close", children: /* @__PURE__ */ jsx(Dialog.Header, { children: "Title" }) }) })
     );
-    const button = screen.getByRole("button");
+    const button = screen.getByRole("button", { name: "Close" });
     fireEvent.click(button);
     expect(onCloseMock).toHaveBeenCalledTimes(1);
   });
@@ -66,4 +66,10 @@ describe("<Dialog />", () => {
     expect(screen.getByText("Title")).toBeInTheDocument();
     expect(screen.getByText("Second Title")).toBeInTheDocument();
   });
+  it("should focus on the title when dialog is opened", () => {
+    render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dialog, { isOpen: true, children: /* @__PURE__ */ jsx(Dialog.Header, { children: "Add e-mail" }) }) })
+    );
+    expect(document.activeElement).toHaveTextContent("Add e-mail");
+  });
 });

package/esm/Dialog/web/Header.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import Text from "../../Text";
-const Header = (props) => /* @__PURE__ */ jsx(Text.H4, __spreadValues({ bold: true, as: "header", ta: "center", mb: "large" }, props));
+const Header = (props) => /* @__PURE__ */ jsx(Text.H4, __spreadValues({ bold: true, as: "h2", ta: "center", mb: "large", tabIndex: -1 }, props));
 Header.displayName = "Dialog.Header";
 var Header_default = Header;
 export {

package/esm/Dialog/web/utils.js

@@ -0,0 +1,7 @@
+function focusOnFirstProgrammaticFocusableElement(container) {
+  const element = container.querySelector('[tabindex="-1"]');
+  element == null ? void 0 : element.focus();
+}
+export {
+  focusOnFirstProgrammaticFocusableElement
+};

package/esm/Feedback/web/Feedback.js

@@ -42,7 +42,8 @@ import {
   Title,
   PrimaryButton,
   SecondaryButton,
-  TextContainer
+  TextContainer,
+  Caption
 } from "./StyledFeedback";
 const ICON_SIZE = 64;
 const VARIANT_ICONS = {
@@ -67,6 +68,7 @@ function Feedback(_a) {
   const iconProps = VARIANT_ICONS[variant];
   let primaryButton;
   let secondaryButton;
+  let captionElement;
   let titleElement = /* @__PURE__ */ jsx(Title, { children: title });
   function defineCompoundComponents() {
     React.Children.forEach(children, (child) => {
@@ -76,6 +78,8 @@ function Feedback(_a) {
         secondaryButton = child;
       if (isChildFromComponent(child, Title))
         titleElement = child;
+      if (isChildFromComponent(child, Caption))
+        captionElement = child;
     });
   }
   defineCompoundComponents();
@@ -104,6 +108,7 @@ function Feedback(_a) {
           titleElement,
           /* @__PURE__ */ jsx(Text.Body1, { mt: "small", color: "deep", children: description })
         ] }),
+        captionElement ? /* @__PURE__ */ jsx(Box, { mt: "medium", children: captionElement }) : null,
         /* @__PURE__ */ jsxs(Actions, { mt: "xxxlarge", children: [
           primaryButton,
           secondaryButton

package/esm/Feedback/web/Feedback.test.js

@@ -7,6 +7,7 @@ function renderWithTheme(ui) {
 }
 const title = "Welcome to Yoga";
 const description = "Enjoy your membership!";
+const caption = "Caption Description here.";
 describe("<Feedback />", () => {
   it("should render the title and description", () => {
     const { getByText } = renderWithTheme(
@@ -21,6 +22,12 @@ describe("<Feedback />", () => {
     );
     expect(getByRole("heading", { name: title })).toBeTruthy();
   });
+  it("should render caption children", () => {
+    const { getByText } = renderWithTheme(
+      /* @__PURE__ */ jsx(Feedback, { variant: "success", title, description, children: /* @__PURE__ */ jsx(Feedback.Caption, { children: caption }) })
+    );
+    expect(getByText(caption)).toBeTruthy();
+  });
   it("should render the buttons", () => {
     const { getByRole } = renderWithTheme(
       /* @__PURE__ */ jsxs(Feedback, { variant: "success", title, description, children: [
@@ -31,6 +38,18 @@ describe("<Feedback />", () => {
     expect(getByRole("button", { name: "Ok" })).toBeTruthy();
     expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
   });
+  it("should render title, description, buttons and caption", () => {
+    const { getByText, getByRole } = renderWithTheme(
+      /* @__PURE__ */ jsxs(Feedback, { variant: "success", description: "Enjoy your membership!", children: [
+        /* @__PURE__ */ jsx(Feedback.Caption, { children: caption }),
+        /* @__PURE__ */ jsx(Feedback.PrimaryButton, { children: "Ok" }),
+        /* @__PURE__ */ jsx(Feedback.SecondaryButton, { children: "Cancel" })
+      ] })
+    );
+    expect(getByText(caption)).toBeTruthy();
+    expect(getByRole("button", { name: "Ok" })).toBeTruthy();
+    expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
+  });
   it("should render correctly when not centered vertically", () => {
     const { baseElement } = renderWithTheme(
       /* @__PURE__ */ jsx(

package/esm/Feedback/web/StyledFeedback.js

@@ -82,11 +82,25 @@ const PrimaryButton = styled(Button)`
 const SecondaryButton = styled(Button.Text)`
   ${buttonsStyles}
 `;
+const Caption = styled(Text.Body1).attrs(() => ({
+  as: "p",
+  bold: true
+}))`
+  ${({
+  theme: {
+    yoga: { colors }
+  }
+}) => css`
+      color: ${colors.text.secondary};
+    `}}
+`;
 Title.displayName = "Feedback.Title";
 PrimaryButton.displayName = "Feedback.PrimaryButton";
 SecondaryButton.displayName = "Feedback.SecondaryButton";
+Caption.displayName = "Feedback.Caption";
 export {
   Actions,
+  Caption,
   Content,
   PrimaryButton,
   SecondaryButton,

package/esm/Feedback/web/index.js

@@ -1,8 +1,14 @@
 import Feedback from "./Feedback";
-import { Title, PrimaryButton, SecondaryButton } from "./StyledFeedback";
+import {
+  Title,
+  PrimaryButton,
+  SecondaryButton,
+  Caption
+} from "./StyledFeedback";
 Feedback.Title = Title;
 Feedback.PrimaryButton = PrimaryButton;
 Feedback.SecondaryButton = SecondaryButton;
+Feedback.Caption = Caption;
 var web_default = Feedback;
 export {
   web_default as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.117.3",
+  "version": "7.119.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -41,6 +41,7 @@
     "prop-types": "^15.7.2",
     "proxy-polyfill": "^0.3.1",
     "rc-slider": "^8.7.1",
+    "react-focus-lock": "^2.13.2",
     "react-google-font-loader": "^1.1.0",
     "react-phone-input-2": "^2.15.1"
   },
@@ -57,7 +58,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "61cbcba7b713f568b43052529cb76fe354a6d42f",
+  "gitHead": "14c7d64e2380f7edaf06dcbe5953b516ee6edea5",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"