@gympass/yoga 7.108.3 → 7.108.5

package/cjs/Card/native/Card/Card.js

@@ -140,13 +140,16 @@ const RibbonText = (0, import_styled_components.default)(import_Text.default.Tin
     color: ${variant ? white : dark};
   `}
 `;
-const Card = import_react.default.forwardRef((_a, ref) => {
-  var _b = _a, { ribbon, children } = _b, rest = __objRest(_b, ["ribbon", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardShadow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardStyled, __spreadProps(__spreadValues({ ref }, rest), { children: [
-    Object.keys(ribbon).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ribbon, { variant: ribbon.variant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonText, { variant: ribbon.variant, children: ribbon.text }) }),
-    children
-  ] })) });
-});
+const Card = import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { ribbon, children, hasShadow } = _b, rest = __objRest(_b, ["ribbon", "children", "hasShadow"]);
+    const CardWrapper = hasShadow ? CardShadow : import_Box.default;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardStyled, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      Object.keys(ribbon).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ribbon, { variant: ribbon.variant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RibbonText, { variant: ribbon.variant, children: ribbon.text }) }),
+      children
+    ] })) });
+  }
+);
 Card.propTypes = {
   /** text: the content inside the Card Ribbon
    * variant: style the card following the theme (primary, secondary, vibin,
@@ -198,12 +201,15 @@ Card.propTypes = {
     "light",
     "clear",
     "white"
-  ])
+  ]),
+  /** applies a shadow to the card (enabled by default) */
+  hasShadow: import_prop_types.bool
 };
 Card.defaultProps = {
   ribbon: {},
   children: null,
-  variant: ""
+  variant: "",
+  hasShadow: true
 };
 Card.displayName = "Card";
 var Card_default = Card;

package/cjs/Card/native/EventCard/EventCard.js

@@ -71,14 +71,15 @@ var import_Card = __toESM(require("../Card"));
 var import_Text = __toESM(require("../../../Text"));
 var import_Box = __toESM(require("../../../Box"));
 var import_Button = __toESM(require("../../../Button"));
-const { spacing, radii, lineHeights } = import_themeReader.default;
-const Event = (0, import_styled_components.default)(import_Card.default)`
+const { spacing, radii, lineHeights, colors, borders } = import_themeReader.default;
+const Event = (0, import_styled_components.default)(import_Card.default).attrs({ hasShadow: false })`
   flex-direction: row;
   height: 104px;
   border-radius: ${radii.regular}px;
   padding: ${spacing.zero};
   width: 280px;
   margin-right: ${spacing.xxsmall};
+
   ${({ small }) => small ? import_styled_components.css`
           width: ${spacing.xxxlarge}px;
         ` : ""}
@@ -87,9 +88,22 @@ const DateInfo = (0, import_styled_components.default)(import_Box.default)`
   justify-content: center;
   align-items: center;
   width: 56px;
+
+  ${({ small, active }) => small ? import_styled_components.css`
+          border: ${borders.small}px solid
+            ${active ? colors.primary : colors.elements.lineAndBorders};
+          border-radius: ${radii.regular}px;
+        ` : import_styled_components.css`
+          border: ${borders.small}px solid ${colors.primary};
+          border-top-left-radius: ${radii.regular}px;
+          border-bottom-left-radius: ${radii.regular}px;
+        `}
 `;
 const EventInfo = (0, import_styled_components.default)(import_Box.default)`
   flex: 1;
+  border-top-right-radius: ${radii.regular}px;
+  border-bottom-right-radius: ${radii.regular}px;
+  border: ${borders.small}px solid ${colors.elements.lineAndBorders};
 `;
 const Top = (0, import_styled_components.default)(import_Box.default)`
   justify-content: center;
@@ -134,7 +148,7 @@ const SmallCard = ({
   active,
   event,
   onPress
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DateInfo, { small: true, pv: "medium", bg: active ? "primary" : "white", children: [
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DateInfo, { small: true, active, pv: "medium", bg: active ? "primary" : "white", children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Top, { children: onPress ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Indicator,
     {
@@ -174,7 +188,7 @@ const FullCard = (0, import_styled_components.withTheme)(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Time, { fill: icon.fill, style: { marginRight: 5 } }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Tiny, { children: event.time })
         ] }),
-        !!link && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonLink, { onPress: onLinkPress, small: true, children: link })
+        !!link && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonLink, { onPress: onLinkPress, small: true, secondary: true, children: link })
       ] })
     ] })
   ] })

package/cjs/Card/web/Card/Card.js

@@ -61,29 +61,35 @@ __export(Card_exports, {
 });
 module.exports = __toCommonJS(Card_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_prop_types = require("prop-types");
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_prop_types = require("prop-types");
 var import_Text = __toESM(require("../../../Text"));
 const CardStyled = import_styled_components.default.section`
   ${({
+  hasShadow,
   variant,
   theme: {
     yoga: {
+      spacing,
       colors: { [variant]: color },
       components: { card }
     }
   }
 }) => `
-  padding: 
-    ${card.padding.top}px 
-    ${card.padding.right}px 
-    ${card.padding.bottom}px 
-    ${card.padding.left}px;
-
+  ${hasShadow ? `
+          padding: 
+            ${card.padding.top}px 
+            ${card.padding.right}px
+            ${card.padding.bottom}px 
+            ${card.padding.left}px;
+          box-shadow: ${card.elevation};
+        ` : `
+          padding: ${spacing.zero}px;
+          box-shadow: none;
+        `}
   border-radius: ${card.radii}px;
   background-color: ${variant ? color : card.backgroundColor};
-  box-shadow: ${card.elevation};
 `}
 `;
 const Ribbon = (0, import_styled_components.default)(import_Text.default.Tiny)`
@@ -153,11 +159,14 @@ Card.propTypes = {
       "white"
     ])
   }),
-  children: import_prop_types.node
+  children: import_prop_types.node,
+  /** applies a shadow to the card (enabled by default) */
+  hasShadow: import_prop_types.bool
 };
 Card.defaultProps = {
   ribbon: {},
-  children: null
+  children: null,
+  hasShadow: true
 };
 Card.displayName = "Card";
 var Card_default = Card;

package/cjs/Card/web/EventCard/EventCard.js

@@ -67,7 +67,7 @@ var import_prop_types = require("prop-types");
 var import_yoga_icons = require("@gympass/yoga-icons");
 var import_Card = __toESM(require("../Card"));
 var import_Text = require("../../../Text/web/Text");
-const Event = (0, import_styled_components.default)(import_Card.default)`
+const Event = (0, import_styled_components.default)(import_Card.default).attrs({ hasShadow: false })`
   display: flex;
   flex-direction: row;
 
@@ -79,8 +79,10 @@ const EventInfo = import_styled_components.default.div`
   ${({
   theme: {
     yoga: {
+      borders,
+      colors,
       components: {
-        card: { event }
+        card: { event, radii }
       }
     }
   }
@@ -88,6 +90,10 @@ const EventInfo = import_styled_components.default.div`
     padding: ${event.info.padding.top}px ${event.info.padding.right}px
       ${event.info.padding.bottom}px ${event.info.padding.left}px;
 
+    border: ${borders.small}px solid ${colors.elements.lineAndBorders};
+    border-top-right-radius: ${radii}px;
+    border-bottom-right-radius: ${radii}px;
+
     ${import_Text.TextRenderer}, ${import_Text.Text.Small} {
       display: -webkit-inline-box;
       overflow: hidden;
@@ -123,8 +129,9 @@ const DateInfo = import_styled_components.default.div`
   ${({
   theme: {
     yoga: {
+      borders,
       components: {
-        card: { event }
+        card: { event, radii }
       }
     }
   }
@@ -137,6 +144,9 @@ const DateInfo = import_styled_components.default.div`
 
     width: 56px;
     background-color: ${event.date.backgroundColor};
+    border: ${borders.small}px solid ${event.date.backgroundColor};
+    border-top-left-radius: ${radii}px;
+    border-bottom-left-radius: ${radii}px;
   `}
 `;
 const DayOfWeek = (0, import_styled_components.default)(import_Text.Text.Small)`

package/cjs/Card/web/PlanCard/Content.js

@@ -72,7 +72,7 @@ var import_Divider = __toESM(require("../../../Divider"));
 const Wrapper = (0, import_styled_components.default)(import_Content.default)`
   flex: 1;
 `;
-const Title = (0, import_styled_components.default)(import_Text.default.Medium)`
+const Title = (0, import_styled_components.default)(import_Text.default.Body1)`
   ${(props) => {
   const {
     components: { card, cardweb },
@@ -153,7 +153,7 @@ const PlanCardContent = (_a) => {
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues({}, rest), { children: [
     subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Subtitle.default, { children: subtitle }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { badgeColor, children: title }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { bold: true, badgeColor, children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, { children: description }),
     !!price && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Price, { children: [
       currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, { as: "sup", children: currency }),

package/esm/Card/native/Card/Card.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import styled from "styled-components";
-import { string, shape, oneOf, node } from "prop-types";
+import { string, shape, oneOf, node, bool } from "prop-types";
 import Text from "../../../Text";
 import Box from "../../../Box";
 const CardShadow = styled(Box).attrs(
@@ -109,13 +109,16 @@ const RibbonText = styled(Text.Tiny)`
     color: ${variant ? white : dark};
   `}
 `;
-const Card = React.forwardRef((_a, ref) => {
-  var _b = _a, { ribbon, children } = _b, rest = __objRest(_b, ["ribbon", "children"]);
-  return /* @__PURE__ */ jsx(CardShadow, { children: /* @__PURE__ */ jsxs(CardStyled, __spreadProps(__spreadValues({ ref }, rest), { children: [
-    Object.keys(ribbon).length > 0 && /* @__PURE__ */ jsx(Ribbon, { variant: ribbon.variant, children: /* @__PURE__ */ jsx(RibbonText, { variant: ribbon.variant, children: ribbon.text }) }),
-    children
-  ] })) });
-});
+const Card = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { ribbon, children, hasShadow } = _b, rest = __objRest(_b, ["ribbon", "children", "hasShadow"]);
+    const CardWrapper = hasShadow ? CardShadow : Box;
+    return /* @__PURE__ */ jsx(CardWrapper, { children: /* @__PURE__ */ jsxs(CardStyled, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      Object.keys(ribbon).length > 0 && /* @__PURE__ */ jsx(Ribbon, { variant: ribbon.variant, children: /* @__PURE__ */ jsx(RibbonText, { variant: ribbon.variant, children: ribbon.text }) }),
+      children
+    ] })) });
+  }
+);
 Card.propTypes = {
   /** text: the content inside the Card Ribbon
    * variant: style the card following the theme (primary, secondary, vibin,
@@ -167,12 +170,15 @@ Card.propTypes = {
     "light",
     "clear",
     "white"
-  ])
+  ]),
+  /** applies a shadow to the card (enabled by default) */
+  hasShadow: bool
 };
 Card.defaultProps = {
   ribbon: {},
   children: null,
-  variant: ""
+  variant: "",
+  hasShadow: true
 };
 Card.displayName = "Card";
 var Card_default = Card;

package/esm/Card/native/EventCard/EventCard.js

@@ -40,14 +40,15 @@ import Card from "../Card";
 import Text from "../../../Text";
 import Box from "../../../Box";
 import Button from "../../../Button";
-const { spacing, radii, lineHeights } = theme;
-const Event = styled(Card)`
+const { spacing, radii, lineHeights, colors, borders } = theme;
+const Event = styled(Card).attrs({ hasShadow: false })`
   flex-direction: row;
   height: 104px;
   border-radius: ${radii.regular}px;
   padding: ${spacing.zero};
   width: 280px;
   margin-right: ${spacing.xxsmall};
+
   ${({ small }) => small ? css`
           width: ${spacing.xxxlarge}px;
         ` : ""}
@@ -56,9 +57,22 @@ const DateInfo = styled(Box)`
   justify-content: center;
   align-items: center;
   width: 56px;
+
+  ${({ small, active }) => small ? css`
+          border: ${borders.small}px solid
+            ${active ? colors.primary : colors.elements.lineAndBorders};
+          border-radius: ${radii.regular}px;
+        ` : css`
+          border: ${borders.small}px solid ${colors.primary};
+          border-top-left-radius: ${radii.regular}px;
+          border-bottom-left-radius: ${radii.regular}px;
+        `}
 `;
 const EventInfo = styled(Box)`
   flex: 1;
+  border-top-right-radius: ${radii.regular}px;
+  border-bottom-right-radius: ${radii.regular}px;
+  border: ${borders.small}px solid ${colors.elements.lineAndBorders};
 `;
 const Top = styled(Box)`
   justify-content: center;
@@ -103,7 +117,7 @@ const SmallCard = ({
   active,
   event,
   onPress
-}) => /* @__PURE__ */ jsxs(DateInfo, { small: true, pv: "medium", bg: active ? "primary" : "white", children: [
+}) => /* @__PURE__ */ jsxs(DateInfo, { small: true, active, pv: "medium", bg: active ? "primary" : "white", children: [
   /* @__PURE__ */ jsx(Top, { children: onPress ? /* @__PURE__ */ jsx(
     Indicator,
     {
@@ -143,7 +157,7 @@ const FullCard = withTheme(
           /* @__PURE__ */ jsx(Time, { fill: icon.fill, style: { marginRight: 5 } }),
           /* @__PURE__ */ jsx(Text.Tiny, { children: event.time })
         ] }),
-        !!link && /* @__PURE__ */ jsx(ButtonLink, { onPress: onLinkPress, small: true, children: link })
+        !!link && /* @__PURE__ */ jsx(ButtonLink, { onPress: onLinkPress, small: true, secondary: true, children: link })
       ] })
     ] })
   ] })

package/esm/Card/web/Card/Card.js

@@ -30,29 +30,35 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx, jsxs } from "react/jsx-runtime";
+import { node, oneOf, shape, string, bool } from "prop-types";
 import React from "react";
 import styled from "styled-components";
-import { string, shape, oneOf, node } from "prop-types";
 import Text from "../../../Text";
 const CardStyled = styled.section`
   ${({
+  hasShadow,
   variant,
   theme: {
     yoga: {
+      spacing,
       colors: { [variant]: color },
       components: { card }
     }
   }
 }) => `
-  padding: 
-    ${card.padding.top}px 
-    ${card.padding.right}px 
-    ${card.padding.bottom}px 
-    ${card.padding.left}px;
-
+  ${hasShadow ? `
+          padding: 
+            ${card.padding.top}px 
+            ${card.padding.right}px
+            ${card.padding.bottom}px 
+            ${card.padding.left}px;
+          box-shadow: ${card.elevation};
+        ` : `
+          padding: ${spacing.zero}px;
+          box-shadow: none;
+        `}
   border-radius: ${card.radii}px;
   background-color: ${variant ? color : card.backgroundColor};
-  box-shadow: ${card.elevation};
 `}
 `;
 const Ribbon = styled(Text.Tiny)`
@@ -122,11 +128,14 @@ Card.propTypes = {
       "white"
     ])
   }),
-  children: node
+  children: node,
+  /** applies a shadow to the card (enabled by default) */
+  hasShadow: bool
 };
 Card.defaultProps = {
   ribbon: {},
-  children: null
+  children: null,
+  hasShadow: true
 };
 Card.displayName = "Card";
 var Card_default = Card;

package/esm/Card/web/EventCard/EventCard.js

@@ -36,7 +36,7 @@ import { shape, string } from "prop-types";
 import { Time } from "@gympass/yoga-icons";
 import Card from "../Card";
 import { TextRenderer, Text } from "../../../Text/web/Text";
-const Event = styled(Card)`
+const Event = styled(Card).attrs({ hasShadow: false })`
   display: flex;
   flex-direction: row;
 
@@ -48,8 +48,10 @@ const EventInfo = styled.div`
   ${({
   theme: {
     yoga: {
+      borders,
+      colors,
       components: {
-        card: { event }
+        card: { event, radii }
       }
     }
   }
@@ -57,6 +59,10 @@ const EventInfo = styled.div`
     padding: ${event.info.padding.top}px ${event.info.padding.right}px
       ${event.info.padding.bottom}px ${event.info.padding.left}px;
 
+    border: ${borders.small}px solid ${colors.elements.lineAndBorders};
+    border-top-right-radius: ${radii}px;
+    border-bottom-right-radius: ${radii}px;
+
     ${TextRenderer}, ${Text.Small} {
       display: -webkit-inline-box;
       overflow: hidden;
@@ -92,8 +98,9 @@ const DateInfo = styled.div`
   ${({
   theme: {
     yoga: {
+      borders,
       components: {
-        card: { event }
+        card: { event, radii }
       }
     }
   }
@@ -106,6 +113,9 @@ const DateInfo = styled.div`
 
     width: 56px;
     background-color: ${event.date.backgroundColor};
+    border: ${borders.small}px solid ${event.date.backgroundColor};
+    border-top-left-radius: ${radii}px;
+    border-bottom-left-radius: ${radii}px;
   `}
 `;
 const DayOfWeek = styled(Text.Small)`

package/esm/Card/web/PlanCard/Content.js

@@ -41,7 +41,7 @@ import Divider from "../../../Divider";
 const Wrapper = styled(Content)`
   flex: 1;
 `;
-const Title = styled(Text.Medium)`
+const Title = styled(Text.Body1)`
   ${(props) => {
   const {
     components: { card, cardweb },
@@ -122,7 +122,7 @@ const PlanCardContent = (_a) => {
   ]);
   return /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues({}, rest), { children: [
     subtitle && /* @__PURE__ */ jsx(Subtitle, { children: subtitle }),
-    title && /* @__PURE__ */ jsx(Title, { badgeColor, children: title }),
+    title && /* @__PURE__ */ jsx(Title, { bold: true, badgeColor, children: title }),
     description && /* @__PURE__ */ jsx(Description, { children: description }),
     !!price && /* @__PURE__ */ jsxs(Price, { children: [
       currency && /* @__PURE__ */ jsx(Text.H4, { as: "sup", children: currency }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.108.3",
+  "version": "7.108.5",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "87f494a36913a74665bc2cc73da684ed399d23bd",
+  "gitHead": "28f54c98eae07e1b15f6cd6b670fe2dee2fe7cc1",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"