@gympass/yoga 7.87.1 → 7.88.1

package/esm/Feedback/web/StyledFeedback.js

@@ -1,34 +1,92 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+import styled, { css } from "styled-components";
+import Box from "../../Box";
+import Button from "../../Button";
+import Text from "../../Text";
+const Content = styled.div`
+  width: 100%;
+  @media (min-width: 769px) {
+    margin: auto;
+  }
+`;
+const TextContainer = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: { feedback }
+    }
+  }
+}) => css`
+      max-width: 100%;
+      @media (min-width: 769px) {
+        max-width: ${feedback.text.maxWidth}px;
+      }
+    `}}
+`;
+const Title = styled(Text.H4).attrs(() => ({
+  as: "p"
+}))`
+  ${({
+  theme: {
+    yoga: { fontSizes }
+  }
+}) => css`
+      @media (min-width: 769px) {
+        font-size: ${fontSizes.huge}px;
+        line-height: ${fontSizes.huge}px;
+      }
+    `}}
+`;
+const Actions = styled(Box)`
+  ${({
+  theme: {
+    yoga: { spacing }
+  }
+}) => css`
+      display: flex;
+      flex-direction: column;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+      @media (min-width: 769px) {
+        flex-direction: row;
+        margin-top: ${spacing.xxlarge}px;
+      }
+    `}}
+`;
+const buttonsStyles = css`
+  ${({
+  theme: {
+    yoga: { spacing }
+  }
+}) => css`
+      width: 100%;
 
-import styled, { css } from 'styled-components';
-import Box from '../../Box';
-import Button from '../../Button';
-import Text from '../../Text';
-export var Content = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  @media (min-width: 769px) {\n    margin: auto;\n  }\n"])));
-export var TextContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref) {
-  var feedback = _ref.theme.yoga.components.feedback;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      max-width: 100%;\n      @media (min-width: 769px) {\n        max-width: ", "px;\n      }\n    "])), feedback.text.maxWidth);
-});
-export var Title = styled(Text.H4).attrs(function () {
-  return {
-    as: 'p'
-  };
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref2) {
-  var fontSizes = _ref2.theme.yoga.fontSizes;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      @media (min-width: 769px) {\n        font-size: ", "px;\n        line-height: ", "px;\n      }\n    "])), fontSizes.huge, fontSizes.huge);
-});
-export var Actions = styled(Box)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref3) {
-  var spacing = _ref3.theme.yoga.spacing;
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      flex-direction: column;\n\n      @media (min-width: 769px) {\n        flex-direction: row;\n        margin-top: ", "px;\n      }\n    "])), spacing.xxlarge);
-});
-var buttonsStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref4) {
-  var spacing = _ref4.theme.yoga.spacing;
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n\n      :last-child(:not(:first-child)) {\n        margin-top: ", "px;\n      }\n\n      @media (min-width: 769px) {\n        width: auto;\n\n        :last-child(:not(:first-child)) {\n          margin-top: 0;\n          margin-left: ", "px;\n        }\n      }\n    "])), spacing.small, spacing.large);
-});
-export var PrimaryButton = styled(Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
-export var SecondaryButton = styled(Button.Text)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
-Title.displayName = 'Feedback.Title';
-PrimaryButton.displayName = 'Feedback.PrimaryButton';
-SecondaryButton.displayName = 'Feedback.SecondaryButton';
+      :last-child(:not(:first-child)) {
+        margin-top: ${spacing.small}px;
+      }
+
+      @media (min-width: 769px) {
+        width: auto;
+
+        :last-child(:not(:first-child)) {
+          margin-top: 0;
+          margin-left: ${spacing.large}px;
+        }
+      }
+    `}}
+`;
+const PrimaryButton = styled(Button)`
+  ${buttonsStyles}
+`;
+const SecondaryButton = styled(Button.Text)`
+  ${buttonsStyles}
+`;
+Title.displayName = "Feedback.Title";
+PrimaryButton.displayName = "Feedback.PrimaryButton";
+SecondaryButton.displayName = "Feedback.SecondaryButton";
+export {
+  Actions,
+  Content,
+  PrimaryButton,
+  SecondaryButton,
+  TextContainer,
+  Title
+};

package/esm/Feedback/web/index.js

@@ -1,6 +1,9 @@
-import Feedback from './Feedback';
-import { Title, PrimaryButton, SecondaryButton } from './StyledFeedback';
+import Feedback from "./Feedback";
+import { Title, PrimaryButton, SecondaryButton } from "./StyledFeedback";
 Feedback.Title = Title;
 Feedback.PrimaryButton = PrimaryButton;
 Feedback.SecondaryButton = SecondaryButton;
-export default Feedback;
+var web_default = Feedback;
+export {
+  web_default as default
+};

package/esm/Grid/Grid.theme.js

@@ -1,23 +1,23 @@
-var Grid = function Grid() {
-  return {
-    gutter: {
-      desktop: 24,
-      mobile: 16
-    },
-    container: {
-      width: 1600,
-      margin: {
-        desktop: {
-          left: 71,
-          right: 71
-        },
-        mobile: {
-          left: 20,
-          right: 20
-        }
+const Grid = () => ({
+  gutter: {
+    desktop: 24,
+    mobile: 16
+  },
+  container: {
+    width: 1600,
+    margin: {
+      desktop: {
+        left: 71,
+        right: 71
+      },
+      mobile: {
+        left: 20,
+        right: 20
       }
     }
-  };
+  }
+});
+var Grid_theme_default = Grid;
+export {
+  Grid_theme_default as default
 };
-
-export default Grid;

package/esm/Grid/index.js

@@ -1,2 +1,7 @@
-import { Container, Row, Col, Hide } from './web';
-export { Container, Row, Col, Hide };
+import { Container, Row, Col, Hide } from "./web";
+export {
+  Col,
+  Container,
+  Hide,
+  Row
+};

package/esm/Grid/web/Col.js

@@ -1,42 +1,35 @@
-var _templateObject, _templateObject2, _templateObject3;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import { number, arrayOf, oneOf } from 'prop-types';
-import styled from 'styled-components';
-import tokens from '@gympass/yoga-tokens';
-import { media } from '@gympass/yoga-helpers';
-var breakpoints = tokens.breakpoints;
-
-var columnPosition = function columnPosition(props) {
-  var breakpointKeys = Object.keys(breakpoints);
-  var position = breakpointKeys.filter(function (breakpoint) {
-    return props[breakpoint];
-  }).map(function (filteredBreakpoint) {
-    return media[filteredBreakpoint](_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        grid-column-end: span ", ";\n      "])), props[filteredBreakpoint] || 12);
-  });
-  var starts = breakpointKeys.filter(function (breakpoint) {
-    return props[breakpoint + "-start"];
-  }).map(function (start) {
-    return media[start](_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        grid-column-start: ", ";\n      "])), props[start + "-start"]);
-  });
-  return [].concat(position, starts);
+import { number, arrayOf, oneOf } from "prop-types";
+import styled from "styled-components";
+import tokens from "@gympass/yoga-tokens";
+import { media } from "@gympass/yoga-helpers";
+const { breakpoints } = tokens;
+const columnPosition = (props) => {
+  const breakpointKeys = Object.keys(breakpoints);
+  const position = breakpointKeys.filter((breakpoint) => props[breakpoint]).map(
+    (filteredBreakpoint) => media[filteredBreakpoint]`
+        grid-column-end: span ${props[filteredBreakpoint] || 12};
+      `
+  );
+  const starts = breakpointKeys.filter((breakpoint) => props[`${breakpoint}-start`]).map(
+    (start) => media[start]`
+        grid-column-start: ${props[`${start}-start`]};
+      `
+  );
+  return [...position, ...starts];
 };
+const hideColumn = (hideProp) => hideProp.map((breakpoint) => media.hide[breakpoint]);
+const Col = styled.div`
+  box-sizing: border-box;
 
-var hideColumn = function hideColumn(hideProp) {
-  return hideProp.map(function (breakpoint) {
-    return media.hide[breakpoint];
-  });
-};
+  min-width: 0;
+  min-height: 0;
+
+  ${(props) => columnPosition(props)}
 
-var Col = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n\n  min-width: 0;\n  min-height: 0;\n\n  ", "\n\n  ", "\n"])), function (props) {
-  return columnPosition(props);
-}, function (_ref) {
-  var hide = _ref.hide;
-  return hide ? hideColumn(hide) : '';
-});
+  ${({ hide }) => hide ? hideColumn(hide) : ""}
+`;
 Col.propTypes = {
-  hide: arrayOf(oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'])),
+  hide: arrayOf(oneOf(["xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"])),
   xxs: number,
   xs: number,
   sm: number,
@@ -45,32 +38,35 @@ Col.propTypes = {
   xl: number,
   xxl: number,
   xxxl: number,
-  'xxs-start': number,
-  'xs-start': number,
-  'sm-start': number,
-  'md-start': number,
-  'lg-start': number,
-  'xl-start': number,
-  'xxl-start': number,
-  'xxxl-start': number
+  "xxs-start": number,
+  "xs-start": number,
+  "sm-start": number,
+  "md-start": number,
+  "lg-start": number,
+  "xl-start": number,
+  "xxl-start": number,
+  "xxxl-start": number
 };
 Col.defaultProps = {
-  hide: undefined,
-  xxs: undefined,
-  xs: undefined,
-  sm: undefined,
-  md: undefined,
-  lg: undefined,
-  xl: undefined,
-  xxl: undefined,
-  xxxl: undefined,
-  'xxs-start': undefined,
-  'xs-start': undefined,
-  'sm-start': undefined,
-  'md-start': undefined,
-  'lg-start': undefined,
-  'xl-start': undefined,
-  'xxl-start': undefined,
-  'xxxl-start': undefined
+  hide: void 0,
+  xxs: void 0,
+  xs: void 0,
+  sm: void 0,
+  md: void 0,
+  lg: void 0,
+  xl: void 0,
+  xxl: void 0,
+  xxxl: void 0,
+  "xxs-start": void 0,
+  "xs-start": void 0,
+  "sm-start": void 0,
+  "md-start": void 0,
+  "lg-start": void 0,
+  "xl-start": void 0,
+  "xxl-start": void 0,
+  "xxxl-start": void 0
+};
+var Col_default = Col;
+export {
+  Col_default as default
 };
-export default Col;

package/esm/Grid/web/Col.test.js

@@ -1,48 +1,39 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '../..';
-import { Col } from '.';
-describe('<Col />', function () {
-  describe('Snapshots', function () {
-    it('should match snapshot with default Col', function () {
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, null))),
-          container = _render.container;
-
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import { ThemeProvider } from "../..";
+import { Col } from ".";
+describe("<Col />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot with default Col", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Col, {}) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should match snapshot with different Col size', function () {
-      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
-        xxs: 6
-      }))),
-          container = _render2.container;
-
+    it("should match snapshot with different Col size", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Col, { xxs: 6 }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should be the same column size from medium to xxxl', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
-        md: 6
-      }))),
-          container = _render3.container;
-
+    it("should be the same column size from medium to xxxl", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Col, { md: 6 }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should set column offsets', function () {
-      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
-        "md-start": 3,
-        md: 6
-      }))),
-          container = _render4.container;
-
+    it("should set column offsets", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Col, { "md-start": 3, md: 6 }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should hide Col in a xs and xm breakpoints', function () {
-      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
-        hide: ['xs', 'sm'],
-        md: 6
-      }))),
-          container = _render5.container;
-
+    it("should hide Col in a xs and xm breakpoints", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Col, { hide: ["xs", "sm"], md: 6 }) })
+      );
       expect(container).toMatchSnapshot();
     });
   });
-});
+});

package/esm/Grid/web/Container.js

@@ -1,26 +1,64 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import styled, { css } from 'styled-components';
-import { media } from '@gympass/yoga-helpers';
-var mobile = media.xxs(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var grid = _ref.theme.yoga.components.grid;
-  return "\n    margin-left: " + grid.container.margin.mobile.left + "px;\n    margin-right: " + grid.container.margin.mobile.right + "px;\n  ";
-});
-var desktop = media.lg(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var grid = _ref2.theme.yoga.components.grid;
-  return "\n    margin-left: " + grid.container.margin.desktop.left + "px;\n    margin-right: " + grid.container.margin.desktop.right + "px;\n  ";
-});
-var xxxlarge = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var _ref3$theme$yoga$brea = _ref3.theme.yoga.breakpoints.xxxl,
-      width = _ref3$theme$yoga$brea.width,
-      margin = _ref3$theme$yoga$brea.margin;
-  return "\n    @media (min-width: " + (width + margin * 2) + "px) {\n      margin-left: auto;\n      margin-right: auto;\n    }\n  ";
-});
-var Container = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  ", "\n"])), function (_ref4) {
-  var fluid = _ref4.fluid,
-      grid = _ref4.theme.yoga.components.grid;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), fluid ? 'max-width: 100%;' : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n          max-width: ", "px;\n          ", "\n          ", "\n          ", "\n        "])), grid.container.width, mobile, desktop, xxxlarge));
-});
-export default Container;
+import styled, { css } from "styled-components";
+import { media } from "@gympass/yoga-helpers";
+const mobile = media.xxs`
+  ${({
+  theme: {
+    yoga: {
+      components: { grid }
+    }
+  }
+}) => `
+    margin-left: ${grid.container.margin.mobile.left}px;
+    margin-right: ${grid.container.margin.mobile.right}px;
+  `}
+`;
+const desktop = media.lg`
+  ${({
+  theme: {
+    yoga: {
+      components: { grid }
+    }
+  }
+}) => `
+    margin-left: ${grid.container.margin.desktop.left}px;
+    margin-right: ${grid.container.margin.desktop.right}px;
+  `}
+`;
+const xxxlarge = css`
+  ${({
+  theme: {
+    yoga: {
+      breakpoints: {
+        xxxl: { width, margin }
+      }
+    }
+  }
+}) => `
+    @media (min-width: ${width + margin * 2}px) {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  `}
+`;
+const Container = styled.div`
+  box-sizing: border-box;
+  ${({
+  fluid,
+  theme: {
+    yoga: {
+      components: { grid }
+    }
+  }
+}) => css`
+    ${fluid ? "max-width: 100%;" : css`
+          max-width: ${grid.container.width}px;
+          ${mobile}
+          ${desktop}
+          ${xxxlarge}
+        `}
+  `}
+`;
+var Container_default = Container;
+export {
+  Container_default as default
+};

package/esm/Grid/web/Container.test.js

@@ -1,14 +1,15 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '../..';
-import { Container } from '.';
-describe('<Container />', function () {
-  describe('Snapshots', function () {
-    it('should match snapshot with default Container', function () {
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Container, null))),
-          container = _render.container;
-
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import { ThemeProvider } from "../..";
+import { Container } from ".";
+describe("<Container />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot with default Container", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Container, {}) })
+      );
       expect(container).toMatchSnapshot();
     });
   });
-});
+});

package/esm/Grid/web/Hide.js

@@ -1,25 +1,13 @@
-var _templateObject;
+import { bool } from "prop-types";
+import styled from "styled-components";
+import tokens from "@gympass/yoga-tokens";
+import { media } from "@gympass/yoga-helpers";
+const { breakpoints } = tokens;
+const Hide = styled.div`
+  ${(props) => Object.keys(props).filter((prop) => props[prop] && Object.keys(breakpoints).includes(prop)).map((breakpoint) => media.hide[breakpoint])}
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import { bool } from 'prop-types';
-import styled from 'styled-components';
-import tokens from '@gympass/yoga-tokens';
-import { media } from '@gympass/yoga-helpers';
-var breakpoints = tokens.breakpoints;
-var Hide = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n"])), function (props) {
-  return Object.keys(props).filter(function (prop) {
-    return props[prop] && Object.keys(breakpoints).includes(prop);
-  }).map(function (breakpoint) {
-    return media.hide[breakpoint];
-  });
-}, function (props) {
-  return Object.keys(props).filter(function (prop) {
-    return props[prop + "-start"];
-  }).map(function (breakpoint) {
-    return media.hide[breakpoint + "-start"];
-  });
-});
+  ${(props) => Object.keys(props).filter((prop) => props[`${prop}-start`]).map((breakpoint) => media.hide[`${breakpoint}-start`])}
+`;
 Hide.propTypes = {
   xxs: bool,
   xs: bool,
@@ -29,31 +17,34 @@ Hide.propTypes = {
   xl: bool,
   xxl: bool,
   xxxl: bool,
-  'xxs-start': bool,
-  'xs-start': bool,
-  'sm-start': bool,
-  'md-start': bool,
-  'lg-start': bool,
-  'xl-start': bool,
-  'xxl-start': bool,
-  'xxxl-start': bool
+  "xxs-start": bool,
+  "xs-start": bool,
+  "sm-start": bool,
+  "md-start": bool,
+  "lg-start": bool,
+  "xl-start": bool,
+  "xxl-start": bool,
+  "xxxl-start": bool
 };
 Hide.defaultProps = {
-  xxs: undefined,
-  xs: undefined,
-  sm: undefined,
-  md: undefined,
-  lg: undefined,
-  xl: undefined,
-  xxl: undefined,
-  xxxl: undefined,
-  'xxs-start': undefined,
-  'xs-start': undefined,
-  'sm-start': undefined,
-  'md-start': undefined,
-  'lg-start': undefined,
-  'xl-start': undefined,
-  'xxl-start': undefined,
-  'xxxl-start': undefined
+  xxs: void 0,
+  xs: void 0,
+  sm: void 0,
+  md: void 0,
+  lg: void 0,
+  xl: void 0,
+  xxl: void 0,
+  xxxl: void 0,
+  "xxs-start": void 0,
+  "xs-start": void 0,
+  "sm-start": void 0,
+  "md-start": void 0,
+  "lg-start": void 0,
+  "xl-start": void 0,
+  "xxl-start": void 0,
+  "xxxl-start": void 0
+};
+var Hide_default = Hide;
+export {
+  Hide_default as default
 };
-export default Hide;