@gympass/yoga 7.96.3 → 7.98.0

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

@@ -87,7 +87,7 @@ const Title = (0, import_styled_components.default)(import_Text.default.Medium)`
           content: '';
           height: 24px;
           width: 4px;
-          background-color: ${colors[props.badgeColor]};
+          background-color: ${colors[badgeColor] || badgeColor};
           border-top-right-radius: ${radii.xsmall}px;
           border-bottom-right-radius: ${radii.xsmall}px;
         }

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

@@ -94,7 +94,7 @@ const Plan = import_styled_components.default.article`
 const Border = import_styled_components.default.span`
   ${({ variant, hasRightMask, theme }) => {
   const { spacing, colors } = theme.yoga;
-  const color = colors[variant];
+  const color = colors[variant] || variant;
   const MASK_SIZE = 112;
   const baseMaskStyle = import_styled_components.css`
       position: absolute;
@@ -161,7 +161,7 @@ const DiscountWrapper = (0, import_styled_components.default)(import_Box.default
         top: ${PLAN_LINE_HEIGHT}px;
         background: transparent;
         border-top-right-radius: ${spacing.small}px;
-        box-shadow: ${colors[bg]} ${spacing.xsmall}px -1px;
+        box-shadow: ${colors[bg] || bg} ${spacing.xsmall}px -1px;
       }
     `;
 }}
@@ -178,28 +178,7 @@ function PlanCard(_a) {
 PlanCard.propTypes = {
   children: import_prop_types.node,
   discount: import_prop_types.string,
-  /** style the card border top color following the theme (primary, secondary,
-   * vibin, hope, energy, relax, peace, verve, uplift, deepPurple, deep,
-   * stamina, dark, medium, light, clear, white) */
-  variant: (0, import_prop_types.oneOf)([
-    "primary",
-    "secondary",
-    "vibin",
-    "hope",
-    "energy",
-    "relax",
-    "peace",
-    "verve",
-    "uplift",
-    "deepPurple",
-    "stamina",
-    "dark",
-    "medium",
-    "deep",
-    "light",
-    "clear",
-    "white"
-  ])
+  variant: import_prop_types.string
 };
 PlanCard.defaultProps = {
   children: void 0,

package/cjs/Dialog/web/Dialog.js

@@ -113,6 +113,27 @@ const Overlay = import_styled_components.default.div`
   background-color: rgba(35, 27, 34, 0.48);
   `}
 `;
+const CloseButton = (0, import_styled_components.default)(import__.Button.Icon)`
+  ${({ theme }) => {
+  const background = theme.yoga.colors.elements.lineAndBorders;
+  const containerSize = theme.yoga.spacing.xxlarge;
+  const svgSize = theme.yoga.spacing.medium;
+  return import_styled_components.css`
+      width: ${containerSize}px;
+      height: ${containerSize}px;
+      background-color: ${background};
+
+      svg {
+        width: ${svgSize}px;
+        height: ${svgSize}px;
+      }
+
+      &:active {
+        background-color: ${background};
+      }
+    `;
+}}
+`;
 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"]);
@@ -150,7 +171,15 @@ const Dialog = import_react.default.forwardRef(
           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)(import__.Button.Icon, { icon: import_yoga_icons.Close, inverted: true, onClick: onClose }) }),
+            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
           ] }))
         }

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

@@ -56,7 +56,7 @@ const Title = styled(Text.Medium)`
           content: '';
           height: 24px;
           width: 4px;
-          background-color: ${colors[props.badgeColor]};
+          background-color: ${colors[badgeColor] || badgeColor};
           border-top-right-radius: ${radii.xsmall}px;
           border-bottom-right-radius: ${radii.xsmall}px;
         }

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

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import styled, { css } from "styled-components";
-import { node, oneOf, string } from "prop-types";
+import { node, string } from "prop-types";
 import Box from "../../../Box";
 import Text from "../../../Text";
 const PLAN_LINE_HEIGHT = 4;
@@ -62,7 +62,7 @@ const Plan = styled.article`
 const Border = styled.span`
   ${({ variant, hasRightMask, theme }) => {
   const { spacing, colors } = theme.yoga;
-  const color = colors[variant];
+  const color = colors[variant] || variant;
   const MASK_SIZE = 112;
   const baseMaskStyle = css`
       position: absolute;
@@ -129,7 +129,7 @@ const DiscountWrapper = styled(Box).attrs({
         top: ${PLAN_LINE_HEIGHT}px;
         background: transparent;
         border-top-right-radius: ${spacing.small}px;
-        box-shadow: ${colors[bg]} ${spacing.xsmall}px -1px;
+        box-shadow: ${colors[bg] || bg} ${spacing.xsmall}px -1px;
       }
     `;
 }}
@@ -146,28 +146,7 @@ function PlanCard(_a) {
 PlanCard.propTypes = {
   children: node,
   discount: string,
-  /** style the card border top color following the theme (primary, secondary,
-   * vibin, hope, energy, relax, peace, verve, uplift, deepPurple, deep,
-   * stamina, dark, medium, light, clear, white) */
-  variant: oneOf([
-    "primary",
-    "secondary",
-    "vibin",
-    "hope",
-    "energy",
-    "relax",
-    "peace",
-    "verve",
-    "uplift",
-    "deepPurple",
-    "stamina",
-    "dark",
-    "medium",
-    "deep",
-    "light",
-    "clear",
-    "white"
-  ])
+  variant: string
 };
 PlanCard.defaultProps = {
   children: void 0,

package/esm/Dialog/web/Dialog.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import styled from "styled-components";
+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";
@@ -81,6 +81,27 @@ const Overlay = styled.div`
   background-color: rgba(35, 27, 34, 0.48);
   `}
 `;
+const CloseButton = styled(Button.Icon)`
+  ${({ theme }) => {
+  const background = theme.yoga.colors.elements.lineAndBorders;
+  const containerSize = theme.yoga.spacing.xxlarge;
+  const svgSize = theme.yoga.spacing.medium;
+  return css`
+      width: ${containerSize}px;
+      height: ${containerSize}px;
+      background-color: ${background};
+
+      svg {
+        width: ${svgSize}px;
+        height: ${svgSize}px;
+      }
+
+      &:active {
+        background-color: ${background};
+      }
+    `;
+}}
+`;
 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"]);
@@ -118,7 +139,15 @@ const Dialog = React.forwardRef(
           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(Button.Icon, { icon: Close, inverted: true, onClick: onClose }) }),
+            isCloseButtonVisible && /* @__PURE__ */ jsx(Box, { d: "flex", justifyContent: "flex-end", w: "100%", children: /* @__PURE__ */ jsx(
+              CloseButton,
+              {
+                icon: Close,
+                inverted: true,
+                secondary: true,
+                onClick: onClose
+              }
+            ) }),
             children
           ] }))
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.96.3",
+  "version": "7.98.0",
   "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": "418b3a3a47005087ec897b571ba4ce7f81b38070",
+  "gitHead": "511b2e36788eae68b789a32c4743bf786b1702ae",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/index.d.ts

@@ -133,13 +133,12 @@ declare namespace PlanCard {
     namespace propTypes {
         export { node as children };
         export { string as discount };
-        export const variant: prop_types.Requireable<string>;
+        export { string as variant };
     }
     namespace defaultProps {
-        export const children: undefined;
-        export const discount: undefined;
-        const variant_1: string;
-        export { variant_1 as variant };
+        const children: undefined;
+        const discount: undefined;
+        const variant: string;
     }
     const displayName: string;
 }