@gympass/yoga 7.96.2 → 7.97.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/cjs/Heading/Heading.theme.js

@@ -30,8 +30,8 @@ const Heading = ({ spacing, colors }) => ({
   height: spacing.xxxlarge,
   button: {
     color: colors.secondary,
-    width: spacing.xxlarge + spacing.xxxsmall,
-    height: spacing.xxlarge + spacing.xxxsmall,
+    width: spacing.xxlarge + spacing.xxsmall,
+    height: spacing.xxlarge + spacing.xxsmall,
     backgroundWidth: spacing.xxlarge,
     backgroundHeight: spacing.xxlarge,
     background: colors.elements.lineAndBorders

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/esm/Heading/Heading.theme.js

@@ -7,8 +7,8 @@ const Heading = ({ spacing, colors }) => ({
   height: spacing.xxxlarge,
   button: {
     color: colors.secondary,
-    width: spacing.xxlarge + spacing.xxxsmall,
-    height: spacing.xxlarge + spacing.xxxsmall,
+    width: spacing.xxlarge + spacing.xxsmall,
+    height: spacing.xxlarge + spacing.xxsmall,
     backgroundWidth: spacing.xxlarge,
     backgroundHeight: spacing.xxlarge,
     background: colors.elements.lineAndBorders

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.96.2",
+  "version": "7.97.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": "3c29667a48ee7711af163e79795737495861eda3",
+  "gitHead": "d408eb43f0ce85e44b67092d103df0f6ef343d8a",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"