@gympass/yoga 7.87.1 → 7.88.0

package/esm/Button/web/Text.js

@@ -1,37 +1,126 @@
-var _templateObject;
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { hexToRgb } from '@gympass/yoga-common';
-import { bool } from 'prop-types';
-import Button from './Button';
-var StyledButton = styled(Button)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var secondary = _ref.secondary,
-      inverted = _ref.inverted,
-      _ref$theme$yoga = _ref.theme.yoga,
-      colors = _ref$theme$yoga.colors,
-      button = _ref$theme$yoga.components.button;
-  var state = secondary ? 'secondary' : 'primary';
-  return "\n      background-color: " + button.types.text.backgroundColor + ";\n      border-color: " + button.types.text.backgroundColor + ";\n      color: " + colors[state] + ";\n\n      svg {\n        fill: " + colors[state] + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {\n        background-color: " + button.types.text.backgroundColor + ";\n        box-shadow: none;\n      }\n\n      &:not([disabled]):hover {\n        color: " + hexToRgb(colors[state], 0.5) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + hexToRgb(colors[state], 0.75) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.75) + ";\n        }\n      }\n\n      " + (inverted ? "\n          color: " + colors.white + ";\n          svg {\n            fill: " + colors.white + ";\n          }\n\n          &:not([disabled]):hover {\n            color: " + hexToRgb(colors.white, 0.5) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.5) + ";\n            }\n          }\n\n          &:not([disabled]):focus, &:not([disabled]):active {\n            color: " + hexToRgb(colors.white, 0.75) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.75) + ";\n            }\n          }\n        " : '') + "\n\n      &:disabled {\n        background-color: " + button.types.text.backgroundColor + ";\n        border-color: " + button.types.text.backgroundColor + ";\n        color: " + button.types.text.disabled + ";\n        svg {\n          fill: " + button.types.text.disabled + ";\n        }\n      }\n    ";
-});
-var ButtonText = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var rest = _extends({}, _ref2);
-
-  var props = Object.fromEntries(Object.entries(rest).filter(function (_ref3) {
-    var key = _ref3[0];
-    return key !== 'isLoading';
-  }));
-  var secondary = props.secondary,
-      inverted = props.inverted;
-  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, props, {
-    secondary: secondary,
-    inverted: inverted,
-    ref: ref
-  }));
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { hexToRgb } from "@gympass/yoga-common";
+import { bool } from "prop-types";
+import Button from "./Button";
+const StyledButton = styled(Button)`
+  ${({
+  secondary,
+  inverted,
+  theme: {
+    yoga: {
+      colors,
+      components: { button }
+    }
+  }
+}) => {
+  const state = secondary ? "secondary" : "primary";
+  return `
+      background-color: ${button.types.text.backgroundColor};
+      border-color: ${button.types.text.backgroundColor};
+      color: ${colors[state]};
+
+      svg {
+        fill: ${colors[state]};
+      }
+
+      &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {
+        background-color: ${button.types.text.backgroundColor};
+        box-shadow: none;
+      }
+
+      &:not([disabled]):hover {
+        color: ${hexToRgb(colors[state], 0.5)};
+        svg {
+          fill: ${hexToRgb(colors[state], 0.5)};
+        }
+      }
+
+      &:not([disabled]):focus, &:not([disabled]):active {
+        color: ${hexToRgb(colors[state], 0.75)};
+        svg {
+          fill: ${hexToRgb(colors[state], 0.75)};
+        }
+      }
+
+      ${inverted ? `
+          color: ${colors.white};
+          svg {
+            fill: ${colors.white};
+          }
+
+          &:not([disabled]):hover {
+            color: ${hexToRgb(colors.white, 0.5)};
+            svg {
+              fill: ${hexToRgb(colors.white, 0.5)};
+            }
+          }
+
+          &:not([disabled]):focus, &:not([disabled]):active {
+            color: ${hexToRgb(colors.white, 0.75)};
+            svg {
+              fill: ${hexToRgb(colors.white, 0.75)};
+            }
+          }
+        ` : ""}
+
+      &:disabled {
+        background-color: ${button.types.text.backgroundColor};
+        border-color: ${button.types.text.backgroundColor};
+        color: ${button.types.text.disabled};
+        svg {
+          fill: ${button.types.text.disabled};
+        }
+      }
+    `;
+}}
+`;
+const ButtonText = forwardRef((_a, ref) => {
+  var rest = __objRest(_a, []);
+  const props = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key !== "isLoading")
+  );
+  const { secondary, inverted } = props;
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    __spreadProps(__spreadValues({}, props), {
+      secondary,
+      inverted,
+      ref
+    })
+  );
 });
 ButtonText.propTypes = {
   inverted: bool,
@@ -41,5 +130,8 @@ ButtonText.defaultProps = {
   inverted: false,
   secondary: false
 };
-ButtonText.displayName = 'Button.Text';
-export default ButtonText;
+ButtonText.displayName = "Button.Text";
+var Text_default = ButtonText;
+export {
+  Text_default as default
+};

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

@@ -1,15 +1,12 @@
-var _templateObject;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import styled from 'styled-components';
-import { node } from 'prop-types';
-import Box from '../../../Box';
-var Actions = styled(Box).attrs({
-  as: 'footer'
-})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+import styled from "styled-components";
+import { node } from "prop-types";
+import Box from "../../../Box";
+const Actions = styled(Box).attrs({ as: "footer" })``;
 Actions.propTypes = {
   children: node.isRequired
 };
-Actions.displayName = 'Card.Actions';
-export default Actions;
+Actions.displayName = "Card.Actions";
+var Actions_default = Actions;
+export {
+  Actions_default as default
+};

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

@@ -1,47 +1,98 @@
-var _excluded = ["ribbon", "children"];
-
-var _templateObject, _templateObject2;
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 Text from "../../../Text";
+const CardStyled = styled.section`
+  ${({
+  variant,
+  theme: {
+    yoga: {
+      colors: { [variant]: color },
+      components: { card }
+    }
+  }
+}) => `
+  padding: 
+    ${card.padding.top}px 
+    ${card.padding.right}px 
+    ${card.padding.bottom}px 
+    ${card.padding.left}px;
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+  border-radius: ${card.radii}px;
+  background-color: ${variant ? color : card.backgroundColor};
+  box-shadow: ${card.elevation};
+`}
+`;
+const Ribbon = styled(Text.Tiny)`
+  ${({
+  variant,
+  theme: {
+    yoga: {
+      components: { card },
+      spacing,
+      colors: { elements, [variant]: color, white, text }
+    }
+  }
+}) => `
+  display: inline-block;
+  top: ${card.padding.top}px;
+  left: 0;
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+  margin-left: -${card.padding.left}px;
+  margin-bottom: ${card.padding.bottom}px;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  padding: 
+    ${spacing.xxxsmall}px
+    ${spacing.xsmall}px
+    ${spacing.xxxsmall}px
+    ${spacing.small}px;
+  
+  border-top-right-radius: ${card.ribbon.radius}px;
+  border-bottom-right-radius: ${card.ribbon.radius}px;
 
-import React from 'react';
-import styled from 'styled-components';
-import { string, shape, oneOf, node } from 'prop-types';
-import Text from '../../../Text';
-var CardStyled = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var variant = _ref.variant,
-      _ref$theme$yoga = _ref.theme.yoga,
-      color = _ref$theme$yoga.colors[variant],
-      card = _ref$theme$yoga.components.card;
-  return "\n  padding: \n    " + card.padding.top + "px \n    " + card.padding.right + "px \n    " + card.padding.bottom + "px \n    " + card.padding.left + "px;\n\n  border-radius: " + card.radii + "px;\n  background-color: " + (variant ? color : card.backgroundColor) + ";\n  box-shadow: " + card.elevation + ";\n";
-});
-var Ribbon = styled(Text.Tiny)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var variant = _ref2.variant,
-      _ref2$theme$yoga = _ref2.theme.yoga,
-      card = _ref2$theme$yoga.components.card,
-      spacing = _ref2$theme$yoga.spacing,
-      _ref2$theme$yoga$colo = _ref2$theme$yoga.colors,
-      elements = _ref2$theme$yoga$colo.elements,
-      color = _ref2$theme$yoga$colo[variant],
-      white = _ref2$theme$yoga$colo.white,
-      text = _ref2$theme$yoga$colo.text;
-  return "\n  display: inline-block;\n  top: " + card.padding.top + "px;\n  left: 0;\n\n  margin-left: -" + card.padding.left + "px;\n  margin-bottom: " + card.padding.bottom + "px;\n\n  padding: \n    " + spacing.xxxsmall + "px\n    " + spacing.xsmall + "px\n    " + spacing.xxxsmall + "px\n    " + spacing.small + "px;\n  \n  border-top-right-radius: " + card.ribbon.radius + "px;\n  border-bottom-right-radius: " + card.ribbon.radius + "px;\n\n  background-color: " + (variant ? color : elements.backgroundAndDisabled) + ";\n\n  color: " + (variant ? white : text.primary) + ";\n  ";
-});
-var Card = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var ribbon = _ref3.ribbon,
-      children = _ref3.children,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+  background-color: ${variant ? color : elements.backgroundAndDisabled};
 
-  return /*#__PURE__*/React.createElement(CardStyled, _extends({
-    ref: ref
-  }, rest), Object.keys(ribbon).length > 0 && /*#__PURE__*/React.createElement(Ribbon, {
-    variant: ribbon.variant,
-    as: "span"
-  }, ribbon.text), children);
+  color: ${variant ? white : text.primary};
+  `}
+`;
+const Card = React.forwardRef((_a, ref) => {
+  var _b = _a, { ribbon, children } = _b, rest = __objRest(_b, ["ribbon", "children"]);
+  return /* @__PURE__ */ jsxs(CardStyled, __spreadProps(__spreadValues({ ref }, rest), { children: [
+    Object.keys(ribbon).length > 0 && /* @__PURE__ */ jsx(Ribbon, { variant: ribbon.variant, as: "span", children: ribbon.text }),
+    children
+  ] }));
 });
 Card.propTypes = {
   /** text: the content inside the Card Ribbon.
@@ -50,7 +101,26 @@ Card.propTypes = {
    * medium, light, clear, white) */
   ribbon: shape({
     text: string,
-    variant: oneOf(['', 'primary', 'secondary', 'vibin', 'hope', 'energy', 'relax', 'peace', 'verve', 'uplift', 'deepPurple', 'stamina', 'dark', 'medium', 'deep', 'light', 'clear', 'white'])
+    variant: oneOf([
+      "",
+      "primary",
+      "secondary",
+      "vibin",
+      "hope",
+      "energy",
+      "relax",
+      "peace",
+      "verve",
+      "uplift",
+      "deepPurple",
+      "stamina",
+      "dark",
+      "medium",
+      "deep",
+      "light",
+      "clear",
+      "white"
+    ])
   }),
   children: node
 };
@@ -58,5 +128,8 @@ Card.defaultProps = {
   ribbon: {},
   children: null
 };
-Card.displayName = 'Card';
-export default Card;
+Card.displayName = "Card";
+var Card_default = Card;
+export {
+  Card_default as default
+};

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

@@ -1,14 +1,19 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider, Button } from '../../..';
-import Card from '.';
-describe('<Card />', function () {
-  describe('Snapshots', function () {
-    it('should match snapshot with default Card', function () {
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Card.Header, null, "Hello World"), /*#__PURE__*/React.createElement(Card.Content, null, "It's fine here"), /*#__PURE__*/React.createElement(Card.Actions, null, /*#__PURE__*/React.createElement(Button, null, "Action's children must be Button"))))),
-          container = _render.container;
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import { ThemeProvider, Button } from "../../..";
+import Card from ".";
+describe("<Card />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot with default Card", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsx(Card.Header, { children: "Hello World" }),
+          /* @__PURE__ */ jsx(Card.Content, { children: "It's fine here" }),
+          /* @__PURE__ */ jsx(Card.Actions, { children: /* @__PURE__ */ jsx(Button, { children: "Action's children must be Button" }) })
+        ] }) })
+      );
       expect(container).toMatchSnapshot();
     });
   });
-});
+});

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

@@ -1,4 +1,7 @@
-import Box from '../../../Box';
-var Content = Box;
-Content.displayName = 'Card.Content';
-export default Content;
+import Box from "../../../Box";
+const Content = Box;
+Content.displayName = "Card.Content";
+var Content_default = Content;
+export {
+  Content_default as default
+};

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

@@ -1,11 +1,8 @@
-var _templateObject;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import styled from 'styled-components';
-import Box from '../../../Box';
-var Header = styled(Box).attrs({
-  as: 'header'
-})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
-Header.displayName = 'Card.Header';
-export default Header;
+import styled from "styled-components";
+import Box from "../../../Box";
+const Header = styled(Box).attrs({ as: "header" })``;
+Header.displayName = "Card.Header";
+var Header_default = Header;
+export {
+  Header_default as default
+};

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

@@ -1,8 +1,11 @@
-import Card from './Card';
-import Header from './Header';
-import Content from './Content';
-import Actions from './Actions';
+import Card from "./Card";
+import Header from "./Header";
+import Content from "./Content";
+import Actions from "./Actions";
 Card.Header = Header;
 Card.Content = Content;
 Card.Actions = Actions;
-export default Card;
+var Card_default = Card;
+export {
+  Card_default as default
+};