@gympass/yoga 7.91.0 → 7.92.0

package/cjs/Button/native/Link.js

@@ -73,9 +73,13 @@ const Link = (0, import_styled_components.default)(import_Button.Label)`
   const state = secondary ? "secondary" : "primary";
   return `
       color: ${link.font[state].color};
+      text-decoration: underline;
+      text-decoration-color: ${link.font[state].color};
 
-      ${disabled ? `color: ${link.font.disabled.color};` : ""}
-      ${!disabled && pressed ? `color: ${(0, import_yoga_common.hexToRgb)(link.font[state].color, 0.75)};` : ""}
+      ${disabled ? `color: ${link.font.disabled.color};
+            text-decoration-color: ${link.font.disabled.color};` : ""}
+      ${!disabled && pressed ? `color: ${(0, import_yoga_common.hexToRgb)(link.font[state].color, 0.75)};
+            text-decoration-color: ${(0, import_yoga_common.hexToRgb)(link.font[state].color, 0.75)};` : ""}
     `;
 }}
 `;

package/cjs/Button/native/Text.js

@@ -67,7 +67,11 @@ var import_yoga_common = require("@gympass/yoga-common");
 var import_withTouchable = __toESM(require("./withTouchable"));
 var import_Button = require("./Button");
 const LabelText = (0, import_styled_components.default)(import_Button.Label)`
-  ${({ color }) => `color: ${color};`}
+  ${({ color }) => `
+    color: ${color};
+    text-decoration: underline;
+    text-decoration-color: ${color};
+  `},
 `;
 const ButtonContainerText = (0, import_styled_components.default)(import_Button.ButtonContainer)`
   ${({

package/cjs/Button/web/Link.js

@@ -84,12 +84,18 @@ const Link = (0, import_styled_components.default)(import_Button.default)`
       border: none;
       border-radius: 0;
       color: ${button.types.link.font[state].color};
+      text-decoration: underline;
+      text-decoration-color: ${button.types.link.font[state].color};
 
       svg {
         margin-right: ${button.types.link.icon.margin.right}px;
         fill: ${button.types.link.font[state].color};
       }
 
+      &:not([disabled]):link {
+        text-decoration: underline;
+      }
+
       &:disabled,
       &:not([disabled]):hover,
       &:not([disabled]):focus,
@@ -101,6 +107,11 @@ const Link = (0, import_styled_components.default)(import_Button.default)`
       &:not([disabled]):hover  {
         color: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.5)};
 
+        text-decoration-color: ${(0, import_yoga_common.hexToRgb)(
+    button.types.link.font[state].color,
+    0.5
+  )};
+
         svg {
           fill: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.5)};
         }
@@ -109,6 +120,11 @@ const Link = (0, import_styled_components.default)(import_Button.default)`
       &:not([disabled]):focus, &:not([disabled]):active {
         color: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.75)};
 
+        text-decoration-color: ${(0, import_yoga_common.hexToRgb)(
+    button.types.link.font[state].color,
+    0.75
+  )};
+
         svg {
           fill: ${(0, import_yoga_common.hexToRgb)(button.types.link.font[state].color, 0.75)};
         }
@@ -117,6 +133,9 @@ const Link = (0, import_styled_components.default)(import_Button.default)`
       &:disabled {
         color: ${button.types.link.font.disabled.color};
 
+        text-decoration: underline;
+        text-decoration-color: ${button.types.link.font.disabled.color};
+
         svg {
           fill: ${button.types.link.font.disabled.color};
         }

package/cjs/Button/web/Text.js

@@ -82,11 +82,17 @@ const StyledButton = (0, import_styled_components.default)(import_Button.default
       background-color: ${button.types.text.backgroundColor};
       border-color: ${button.types.text.backgroundColor};
       color: ${colors[state]};
+      text-decoration: underline;
+      text-decoration-color: ${button.types.link.font[state].color};
 
       svg {
         fill: ${colors[state]};
       }
 
+      &:not([disabled]):link {
+        text-decoration: underline;
+      }
+
       &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {
         background-color: ${button.types.text.backgroundColor};
         box-shadow: none;
@@ -94,6 +100,9 @@ const StyledButton = (0, import_styled_components.default)(import_Button.default
 
       &:not([disabled]):hover {
         color: ${(0, import_yoga_common.hexToRgb)(colors[state], 0.5)};
+
+        text-decoration-color: ${(0, import_yoga_common.hexToRgb)(colors[state], 0.5)};
+
         svg {
           fill: ${(0, import_yoga_common.hexToRgb)(colors[state], 0.5)};
         }
@@ -101,6 +110,9 @@ const StyledButton = (0, import_styled_components.default)(import_Button.default
 
       &:not([disabled]):focus, &:not([disabled]):active {
         color: ${(0, import_yoga_common.hexToRgb)(colors[state], 0.75)};
+
+        text-decoration-color: ${(0, import_yoga_common.hexToRgb)(colors[state], 0.75)};
+
         svg {
           fill: ${(0, import_yoga_common.hexToRgb)(colors[state], 0.75)};
         }
@@ -108,12 +120,18 @@ const StyledButton = (0, import_styled_components.default)(import_Button.default
 
       ${inverted ? `
           color: ${colors.white};
+
+          text-decoration-color: ${colors.white};
+
           svg {
             fill: ${colors.white};
           }
 
           &:not([disabled]):hover {
             color: ${(0, import_yoga_common.hexToRgb)(colors.white, 0.5)};
+
+            text-decoration-color: ${(0, import_yoga_common.hexToRgb)(colors.white, 0.5)};
+
             svg {
               fill: ${(0, import_yoga_common.hexToRgb)(colors.white, 0.5)};
             }
@@ -121,6 +139,9 @@ const StyledButton = (0, import_styled_components.default)(import_Button.default
 
           &:not([disabled]):focus, &:not([disabled]):active {
             color: ${(0, import_yoga_common.hexToRgb)(colors.white, 0.75)};
+
+            text-decoration-color: ${(0, import_yoga_common.hexToRgb)(colors.white, 0.75)};
+
             svg {
               fill: ${(0, import_yoga_common.hexToRgb)(colors.white, 0.75)};
             }
@@ -131,6 +152,10 @@ const StyledButton = (0, import_styled_components.default)(import_Button.default
         background-color: ${button.types.text.backgroundColor};
         border-color: ${button.types.text.backgroundColor};
         color: ${button.types.text.disabled};
+
+        text-decoration: underline;
+        text-decoration-color: ${button.types.text.disabled};
+
         svg {
           fill: ${button.types.text.disabled};
         }

package/cjs/Feedback/web/Feedback.js

@@ -71,16 +71,16 @@ var import_StyledFeedback = require("./StyledFeedback");
 const ICON_SIZE = 64;
 const VARIANT_ICONS = {
   success: {
-    as: import_yoga_icons.CheckedFull,
-    fill: "hope"
+    as: import_yoga_icons.Success
   },
   informative: {
-    as: import_yoga_icons.Info,
-    fill: "relax"
+    as: import_yoga_icons.Information
   },
   attention: {
-    as: import_yoga_icons.AlertTriangle,
-    fill: "brandingVerve"
+    as: import_yoga_icons.Attention
+  },
+  delayed: {
+    as: import_yoga_icons.Delayed
   }
 };
 function isChildFromComponent(child, component) {
@@ -121,7 +121,7 @@ function Feedback(_a) {
           __spreadProps(__spreadValues({}, iconProps), {
             size: ICON_SIZE,
             mb: "large",
-            "data-testid": "feedback-icon"
+            "data-testid": `feedback-icon-${variant}`
           })
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_StyledFeedback.TextContainer, { children: [

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

@@ -72,7 +72,7 @@ describe("<Feedback />", () => {
     const { getByTestId } = renderWithTheme(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback, { variant: "success", title, description })
     );
-    expect(getByTestId("feedback-icon")).toMatchSnapshot();
+    expect(getByTestId("feedback-icon-success")).toMatchSnapshot();
   });
   it("should render the icon for informative variant", () => {
     const { getByTestId } = renderWithTheme(
@@ -85,12 +85,18 @@ describe("<Feedback />", () => {
         }
       )
     );
-    expect(getByTestId("feedback-icon")).toMatchSnapshot();
+    expect(getByTestId("feedback-icon-informative")).toMatchSnapshot();
   });
   it("should render the icon for attention variant", () => {
     const { getByTestId } = renderWithTheme(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback, { variant: "attention", title, description })
     );
-    expect(getByTestId("feedback-icon")).toMatchSnapshot();
+    expect(getByTestId("feedback-icon-attention")).toMatchSnapshot();
+  });
+  it("should render the icon for delayed variant", () => {
+    const { getByTestId } = renderWithTheme(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback, { variant: "delayed", title, description })
+    );
+    expect(getByTestId("feedback-icon-delayed")).toMatchSnapshot();
   });
 });

package/esm/Button/native/Link.js

@@ -42,9 +42,13 @@ const Link = styled(Label)`
   const state = secondary ? "secondary" : "primary";
   return `
       color: ${link.font[state].color};
+      text-decoration: underline;
+      text-decoration-color: ${link.font[state].color};
 
-      ${disabled ? `color: ${link.font.disabled.color};` : ""}
-      ${!disabled && pressed ? `color: ${hexToRgb(link.font[state].color, 0.75)};` : ""}
+      ${disabled ? `color: ${link.font.disabled.color};
+            text-decoration-color: ${link.font.disabled.color};` : ""}
+      ${!disabled && pressed ? `color: ${hexToRgb(link.font[state].color, 0.75)};
+            text-decoration-color: ${hexToRgb(link.font[state].color, 0.75)};` : ""}
     `;
 }}
 `;

package/esm/Button/native/Text.js

@@ -36,7 +36,11 @@ import { hexToRgb } from "@gympass/yoga-common";
 import withTouchable from "./withTouchable";
 import { Label, ButtonContainer } from "./Button";
 const LabelText = styled(Label)`
-  ${({ color }) => `color: ${color};`}
+  ${({ color }) => `
+    color: ${color};
+    text-decoration: underline;
+    text-decoration-color: ${color};
+  `},
 `;
 const ButtonContainerText = styled(ButtonContainer)`
   ${({

package/esm/Button/web/Link.js

@@ -53,12 +53,18 @@ const Link = styled(Button)`
       border: none;
       border-radius: 0;
       color: ${button.types.link.font[state].color};
+      text-decoration: underline;
+      text-decoration-color: ${button.types.link.font[state].color};
 
       svg {
         margin-right: ${button.types.link.icon.margin.right}px;
         fill: ${button.types.link.font[state].color};
       }
 
+      &:not([disabled]):link {
+        text-decoration: underline;
+      }
+
       &:disabled,
       &:not([disabled]):hover,
       &:not([disabled]):focus,
@@ -70,6 +76,11 @@ const Link = styled(Button)`
       &:not([disabled]):hover  {
         color: ${hexToRgb(button.types.link.font[state].color, 0.5)};
 
+        text-decoration-color: ${hexToRgb(
+    button.types.link.font[state].color,
+    0.5
+  )};
+
         svg {
           fill: ${hexToRgb(button.types.link.font[state].color, 0.5)};
         }
@@ -78,6 +89,11 @@ const Link = styled(Button)`
       &:not([disabled]):focus, &:not([disabled]):active {
         color: ${hexToRgb(button.types.link.font[state].color, 0.75)};
 
+        text-decoration-color: ${hexToRgb(
+    button.types.link.font[state].color,
+    0.75
+  )};
+
         svg {
           fill: ${hexToRgb(button.types.link.font[state].color, 0.75)};
         }
@@ -86,6 +102,9 @@ const Link = styled(Button)`
       &:disabled {
         color: ${button.types.link.font.disabled.color};
 
+        text-decoration: underline;
+        text-decoration-color: ${button.types.link.font.disabled.color};
+
         svg {
           fill: ${button.types.link.font.disabled.color};
         }

package/esm/Button/web/Text.js

@@ -51,11 +51,17 @@ const StyledButton = styled(Button)`
       background-color: ${button.types.text.backgroundColor};
       border-color: ${button.types.text.backgroundColor};
       color: ${colors[state]};
+      text-decoration: underline;
+      text-decoration-color: ${button.types.link.font[state].color};
 
       svg {
         fill: ${colors[state]};
       }
 
+      &:not([disabled]):link {
+        text-decoration: underline;
+      }
+
       &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {
         background-color: ${button.types.text.backgroundColor};
         box-shadow: none;
@@ -63,6 +69,9 @@ const StyledButton = styled(Button)`
 
       &:not([disabled]):hover {
         color: ${hexToRgb(colors[state], 0.5)};
+
+        text-decoration-color: ${hexToRgb(colors[state], 0.5)};
+
         svg {
           fill: ${hexToRgb(colors[state], 0.5)};
         }
@@ -70,6 +79,9 @@ const StyledButton = styled(Button)`
 
       &:not([disabled]):focus, &:not([disabled]):active {
         color: ${hexToRgb(colors[state], 0.75)};
+
+        text-decoration-color: ${hexToRgb(colors[state], 0.75)};
+
         svg {
           fill: ${hexToRgb(colors[state], 0.75)};
         }
@@ -77,12 +89,18 @@ const StyledButton = styled(Button)`
 
       ${inverted ? `
           color: ${colors.white};
+
+          text-decoration-color: ${colors.white};
+
           svg {
             fill: ${colors.white};
           }
 
           &:not([disabled]):hover {
             color: ${hexToRgb(colors.white, 0.5)};
+
+            text-decoration-color: ${hexToRgb(colors.white, 0.5)};
+
             svg {
               fill: ${hexToRgb(colors.white, 0.5)};
             }
@@ -90,6 +108,9 @@ const StyledButton = styled(Button)`
 
           &:not([disabled]):focus, &:not([disabled]):active {
             color: ${hexToRgb(colors.white, 0.75)};
+
+            text-decoration-color: ${hexToRgb(colors.white, 0.75)};
+
             svg {
               fill: ${hexToRgb(colors.white, 0.75)};
             }
@@ -100,6 +121,10 @@ const StyledButton = styled(Button)`
         background-color: ${button.types.text.backgroundColor};
         border-color: ${button.types.text.backgroundColor};
         color: ${button.types.text.disabled};
+
+        text-decoration: underline;
+        text-decoration-color: ${button.types.text.disabled};
+
         svg {
           fill: ${button.types.text.disabled};
         }

package/esm/Feedback/web/Feedback.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { arrayOf, node, oneOf, oneOfType, string, bool } from "prop-types";
 import React from "react";
-import { CheckedFull, Info, AlertTriangle } from "@gympass/yoga-icons";
+import { Attention, Delayed, Information, Success } from "@gympass/yoga-icons";
 import Icon from "../../Icon";
 import Box from "../../Box";
 import Text from "../../Text";
@@ -47,16 +47,16 @@ import {
 const ICON_SIZE = 64;
 const VARIANT_ICONS = {
   success: {
-    as: CheckedFull,
-    fill: "hope"
+    as: Success
   },
   informative: {
-    as: Info,
-    fill: "relax"
+    as: Information
   },
   attention: {
-    as: AlertTriangle,
-    fill: "brandingVerve"
+    as: Attention
+  },
+  delayed: {
+    as: Delayed
   }
 };
 function isChildFromComponent(child, component) {
@@ -97,7 +97,7 @@ function Feedback(_a) {
           __spreadProps(__spreadValues({}, iconProps), {
             size: ICON_SIZE,
             mb: "large",
-            "data-testid": "feedback-icon"
+            "data-testid": `feedback-icon-${variant}`
           })
         ),
         /* @__PURE__ */ jsxs(TextContainer, { children: [

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

@@ -49,7 +49,7 @@ describe("<Feedback />", () => {
     const { getByTestId } = renderWithTheme(
       /* @__PURE__ */ jsx(Feedback, { variant: "success", title, description })
     );
-    expect(getByTestId("feedback-icon")).toMatchSnapshot();
+    expect(getByTestId("feedback-icon-success")).toMatchSnapshot();
   });
   it("should render the icon for informative variant", () => {
     const { getByTestId } = renderWithTheme(
@@ -62,12 +62,18 @@ describe("<Feedback />", () => {
         }
       )
     );
-    expect(getByTestId("feedback-icon")).toMatchSnapshot();
+    expect(getByTestId("feedback-icon-informative")).toMatchSnapshot();
   });
   it("should render the icon for attention variant", () => {
     const { getByTestId } = renderWithTheme(
       /* @__PURE__ */ jsx(Feedback, { variant: "attention", title, description })
     );
-    expect(getByTestId("feedback-icon")).toMatchSnapshot();
+    expect(getByTestId("feedback-icon-attention")).toMatchSnapshot();
+  });
+  it("should render the icon for delayed variant", () => {
+    const { getByTestId } = renderWithTheme(
+      /* @__PURE__ */ jsx(Feedback, { variant: "delayed", title, description })
+    );
+    expect(getByTestId("feedback-icon-delayed")).toMatchSnapshot();
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.91.0",
+  "version": "7.92.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@gympass/yoga-common": "^1.3.0",
     "@gympass/yoga-helpers": "^1.0.4",
-    "@gympass/yoga-icons": "^1.17.0",
+    "@gympass/yoga-icons": "^1.18.0",
     "@gympass/yoga-illustrations": "^0.5.2",
     "@gympass/yoga-system": "^0.11.1",
     "@gympass/yoga-tokens": "^3.2.2",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "7a0f5076e3001d2739d4e4bf161124cd4e020496",
+  "gitHead": "d3d44375e5ab0b126e8df60bd41618494f10e935",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"