@gympass/yoga 7.87.1 → 7.88.1

package/esm/Result/native/TinyTextIcon.js

@@ -1,18 +1,29 @@
-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); }
-
-import React from 'react';
-import Box from '../../Box';
-import Icon from '../../Icon';
-
-var TinyTextIcon = function TinyTextIcon(props) {
-  return /*#__PURE__*/React.createElement(Box, {
-    height: "xsmall",
-    width: "xsmall"
-  }, /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
-    size: "xsmall",
-    mt: "2px"
-  })));
+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));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import Box from "../../Box";
+import Icon from "../../Icon";
+const TinyTextIcon = (props) => /* @__PURE__ */ jsx(Box, { height: "xsmall", width: "xsmall", children: /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, props), { size: "xsmall", mt: "2px" })) });
 TinyTextIcon.propTypes = Icon.propTypes;
-export default TinyTextIcon;
+var TinyTextIcon_default = TinyTextIcon;
+export {
+  TinyTextIcon_default as default
+};

package/esm/Result/native/index.js

@@ -1,2 +1,5 @@
-import Result from './Result';
-export default Result;
+import Result from "./Result";
+var native_default = Result;
+export {
+  native_default as default
+};

package/esm/Skeleton/Skeleton.theme.js

@@ -1,24 +1,22 @@
-var Skeleton = function Skeleton(_ref) {
-  var lineHeights = _ref.lineHeights,
-      radii = _ref.radii;
-  return {
-    border: {
-      circular: radii.circle
-    },
-    height: {
-      text: {
-        h1: lineHeights.huge,
-        h2: lineHeights.xxxlarge,
-        h3: lineHeights.xxlarge,
-        h4: lineHeights.xlarge,
-        h5: lineHeights.large,
-        body1: lineHeights.medium,
-        body2: lineHeights.small,
-        overline: lineHeights.xsmall,
-        exception: lineHeights.xxsmall
-      }
+const Skeleton = ({ lineHeights, radii }) => ({
+  border: {
+    circular: radii.circle
+  },
+  height: {
+    text: {
+      h1: lineHeights.huge,
+      h2: lineHeights.xxxlarge,
+      h3: lineHeights.xxlarge,
+      h4: lineHeights.xlarge,
+      h5: lineHeights.large,
+      body1: lineHeights.medium,
+      body2: lineHeights.small,
+      overline: lineHeights.xsmall,
+      exception: lineHeights.xxsmall
     }
-  };
+  }
+});
+var Skeleton_theme_default = Skeleton;
+export {
+  Skeleton_theme_default as default
 };
-
-export default Skeleton;

package/esm/Skeleton/index.js

@@ -1,2 +1,5 @@
-import Skeleton from './web';
-export default Skeleton;
+import Skeleton from "./web";
+var Skeleton_default = Skeleton;
+export {
+  Skeleton_default as default
+};

package/esm/Skeleton/index.native.js

@@ -1,2 +1,5 @@
-import Skeleton from './native';
-export default Skeleton;
+import Skeleton from "./native";
+var index_native_default = Skeleton;
+export {
+  index_native_default as default
+};

package/esm/Skeleton/native/Skeleton.js

@@ -1,94 +1,142 @@
-var _excluded = ["animation"];
-
-var _templateObject;
-
-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; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+var __defProp = Object.defineProperty;
+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 __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 { checkPropTypes, oneOf } from "prop-types";
+import React, { useEffect, useState } from "react";
+import { Animated, Easing } from "react-native";
+import styled from "styled-components";
+import { margins, widths, heights } from "@gympass/yoga-system";
+const StyledSkeleton = styled.View`
+  display: flex;
+  align-items: center;
 
-import { checkPropTypes, oneOf } from 'prop-types';
-import React, { useEffect, useState } from 'react';
-import { Animated, Easing } from 'react-native';
-import styled from 'styled-components';
-import { margins, widths, heights } from '@gympass/yoga-system';
-var StyledSkeleton = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  ", "\n\n   ", "\n"])), margins, widths, heights, function (_ref) {
-  var type = _ref.type,
-      variant = _ref.variant,
-      _ref$theme$yoga = _ref.theme.yoga,
-      colors = _ref$theme$yoga.colors,
-      _ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
-      borderRadius = _ref$theme$yoga$compo.border[type],
-      _ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
-  _ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
-  var height = _ref$theme$yoga$compo2[variant];
-  return "\n    background-color: " + colors.elements.backgroundAndDisabled + ";\n    " + (borderRadius ? "border-radius: " + borderRadius + "px;" : '') + "\n    " + (height ? "height: " + height + "px;" : '') + "\n  ";
-});
+  ${margins}
 
-function Skeleton(_ref2) {
-  var _ref2$animation = _ref2.animation,
-      animation = _ref2$animation === void 0 ? 'pulse' : _ref2$animation,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  ${widths}
 
-  var _useState = useState(new Animated.Value(0.4)),
-      opacity = _useState[0];
+  ${heights}
 
-  useEffect(function () {
+   ${({
+  type,
+  variant,
+  theme: {
+    yoga: {
+      colors,
+      components: {
+        skeleton: {
+          border: { [type]: borderRadius },
+          height: { [type]: { [variant]: height } = {} }
+        }
+      }
+    }
+  }
+}) => `
+    background-color: ${colors.elements.backgroundAndDisabled};
+    ${borderRadius ? `border-radius: ${borderRadius}px;` : ""}
+    ${height ? `height: ${height}px;` : ""}
+  `}
+`;
+function Skeleton(_a) {
+  var _b = _a, { animation = "pulse" } = _b, props = __objRest(_b, ["animation"]);
+  const [opacity] = useState(new Animated.Value(0.4));
+  useEffect(() => {
     if (animation) {
-      Animated.loop(Animated.sequence([Animated.timing(opacity, {
-        toValue: 1,
-        delay: 500,
-        duration: 1000,
-        easing: Easing.inOut(Easing.linear),
-        useNativeDriver: true
-      }), Animated.timing(opacity, {
-        toValue: 0.4,
-        duration: 500,
-        easing: Easing.inOut(Easing.linear),
-        useNativeDriver: true
-      })])).start();
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(opacity, {
+            toValue: 1,
+            delay: 500,
+            duration: 1e3,
+            easing: Easing.inOut(Easing.linear),
+            useNativeDriver: true
+          }),
+          Animated.timing(opacity, {
+            toValue: 0.4,
+            duration: 500,
+            easing: Easing.inOut(Easing.linear),
+            useNativeDriver: true
+          })
+        ])
+      ).start();
     }
   }, [opacity]);
-  return /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
-      opacity: opacity
-    }
-  }, /*#__PURE__*/React.createElement(StyledSkeleton, props));
+  return /* @__PURE__ */ jsx(Animated.View, { style: { opacity }, children: /* @__PURE__ */ jsx(StyledSkeleton, __spreadValues({}, props)) });
 }
-
 Skeleton.propTypes = {
   /**
    * Determines which type will be rendered. It can be
    * 'circular', 'rectangular' or 'text'.
    */
-  type: oneOf(['circular', 'rectangular', 'text']).isRequired,
-
+  type: oneOf(["circular", "rectangular", "text"]).isRequired,
   /**
    * style the skeleton following the theme (the variant prop can only be used assemble to type "text").
    * It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
    */
-  variant: function variant(props, propName, componentName) {
-    var type = props.type;
-
-    if (type !== 'text' && !!props[propName]) {
-      return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
+  variant: (props, propName, componentName) => {
+    const { type } = props;
+    if (type !== "text" && !!props[propName]) {
+      return new Error(
+        `The ${propName} prop must only be used when the type is equal to "text".`
+      );
     }
-
-    if (type === 'text') {
-      var _checkPropTypes;
-
-      return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
+    if (type === "text") {
+      return checkPropTypes(
+        {
+          [propName]: oneOf([
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "body1",
+            "body2",
+            "overline",
+            "exception"
+          ]).isRequired
+        },
+        props,
+        "prop",
+        componentName
+      );
     }
-
     return null;
   },
-
   /**
    * Determine if the animation will 'pulse' or false;
    */
-  animation: oneOf(['pulse', false])
+  animation: oneOf(["pulse", false])
 };
 Skeleton.defaultProps = {
-  variant: undefined,
-  animation: 'pulse'
+  variant: void 0,
+  animation: "pulse"
+};
+var Skeleton_default = Skeleton;
+export {
+  Skeleton_default as default
 };
-export default Skeleton;

package/esm/Skeleton/native/Skeleton.test.js

@@ -1,78 +1,40 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, Skeleton } from '../..';
-describe('<Skeleton />', function () {
-  it('should render the circular skeleton', function () {
-    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
-      type: "circular",
-      width: 64,
-      height: 64
-    }))),
-        toJSON = _render.toJSON;
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Skeleton } from "../..";
+describe("<Skeleton />", () => {
+  it("should render the circular skeleton", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "circular", width: 64, height: 64 }) })
+    );
     expect(toJSON()).toMatchSnapshot();
   });
-  it('should render the rectangular skeleton', function () {
-    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
-      type: "rectangular",
-      width: 400,
-      height: 200
-    }))),
-        toJSON = _render2.toJSON;
-
+  it("should render the rectangular skeleton", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "rectangular", width: 400, height: 200 }) })
+    );
     expect(toJSON()).toMatchSnapshot();
   });
-  it('should render the text skeleton', function () {
-    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "body1",
-      width: 61,
-      height: 32
-    }))),
-        toJSON = _render3.toJSON;
-
+  it("should render the text skeleton", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: 61, height: 32 }) })
+    );
     expect(toJSON()).toMatchSnapshot();
   });
-  it('should render all text skeleton variants correctly', function () {
-    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "h1",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "h2",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "h3",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "h4",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "h5",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "body1",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "body2",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "overline",
-      width: "100"
-    }), /*#__PURE__*/React.createElement(Skeleton, {
-      type: "text",
-      variant: "exception",
-      width: "100"
-    }))),
-        toJSON = _render4.toJSON;
-
+  it("should render all text skeleton variants correctly", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h1", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h2", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h3", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h4", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h5", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body2", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "overline", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "exception", width: "100" })
+      ] })
+    );
     expect(toJSON()).toMatchSnapshot();
   });
-});
+});

package/esm/Skeleton/native/index.js

@@ -1,2 +1,5 @@
-import Skeleton from './Skeleton';
-export default Skeleton;
+import Skeleton from "./Skeleton";
+var native_default = Skeleton;
+export {
+  native_default as default
+};

package/esm/Skeleton/web/Skeleton.js

@@ -1,64 +1,121 @@
-var _templateObject, _templateObject2, _templateObject3;
+var __defProp = Object.defineProperty;
+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;
+};
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { checkPropTypes, oneOf } from "prop-types";
+import styled, { css } from "styled-components";
+import { margins, widths, heights } from "@gympass/yoga-system";
+const StyledSkeleton = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${margins}
+
+  ${widths}
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  ${heights}
 
-import React from 'react';
-import { checkPropTypes, oneOf } from 'prop-types';
-import styled, { css } from 'styled-components';
-import { margins, widths, heights } from '@gympass/yoga-system';
-var StyledSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), margins, widths, heights, function (_ref) {
-  var type = _ref.type,
-      variant = _ref.variant,
-      _ref$animation = _ref.animation,
-      animation = _ref$animation === void 0 ? 'pulse' : _ref$animation,
-      _ref$theme$yoga = _ref.theme.yoga,
-      colors = _ref$theme$yoga.colors,
-      _ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
-      borderRadius = _ref$theme$yoga$compo.border[type],
-      _ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
-  _ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
-  var height = _ref$theme$yoga$compo2[variant];
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    ", "\n    ", "\n\n    ", "\n\n    @keyframes placeholderShimmer {\n      0%,\n      100% {\n        opacity: 1;\n      }\n      50% {\n        opacity: 0.4;\n      }\n    }\n  "])), colors.elements.backgroundAndDisabled, borderRadius ? "border-radius: " + borderRadius + "px;" : '', height ? "height: " + height + "px;" : '', animation && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      animation: placeholderShimmer 1.5s ease-in-out 0.5s infinite;\n    "]))));
-});
+  ${({
+  type,
+  variant,
+  animation = "pulse",
+  theme: {
+    yoga: {
+      colors,
+      components: {
+        skeleton: {
+          border: { [type]: borderRadius },
+          height: { [type]: { [variant]: height } = {} }
+        }
+      }
+    }
+  }
+}) => css`
+    background-color: ${colors.elements.backgroundAndDisabled};
+    ${borderRadius ? `border-radius: ${borderRadius}px;` : ""}
+    ${height ? `height: ${height}px;` : ""}
+
+    ${animation && css`
+      animation: placeholderShimmer 1.5s ease-in-out 0.5s infinite;
+    `}
 
+    @keyframes placeholderShimmer {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
+    }
+  `}
+`;
 function Skeleton(props) {
-  return /*#__PURE__*/React.createElement(StyledSkeleton, props);
+  return /* @__PURE__ */ jsx(StyledSkeleton, __spreadValues({}, props));
 }
-
 Skeleton.propTypes = {
   /**
    * Determines which type will be rendered. It can be
    * 'circular', 'rectangular' or 'text'.
    */
-  type: oneOf(['circular', 'rectangular', 'text']).isRequired,
-
+  type: oneOf(["circular", "rectangular", "text"]).isRequired,
   /**
    * style the skeleton following the theme (the variant prop can only be used assemble to type "text").
    * It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
    */
-  variant: function variant(props, propName, componentName) {
-    var type = props.type;
-
-    if (type !== 'text' && !!props[propName]) {
-      return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
+  variant: (props, propName, componentName) => {
+    const { type } = props;
+    if (type !== "text" && !!props[propName]) {
+      return new Error(
+        `The ${propName} prop must only be used when the type is equal to "text".`
+      );
     }
-
-    if (type === 'text') {
-      var _checkPropTypes;
-
-      return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
+    if (type === "text") {
+      return checkPropTypes(
+        {
+          [propName]: oneOf([
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "body1",
+            "body2",
+            "overline",
+            "exception"
+          ]).isRequired
+        },
+        props,
+        "prop",
+        componentName
+      );
     }
-
     return null;
   },
-
   /**
    * Determine if the animation will 'pulse' or false;
    */
-  animation: oneOf(['pulse', false])
+  animation: oneOf(["pulse", false])
 };
 Skeleton.defaultProps = {
-  variant: undefined,
-  animation: 'pulse'
+  variant: void 0,
+  animation: "pulse"
+};
+var Skeleton_default = Skeleton;
+export {
+  Skeleton_default as default
 };
-export default Skeleton;