@gympass/yoga 7.87.0 → 7.88.0

package/esm/Spinner/web/Spinner.js

@@ -1,46 +1,98 @@
-var _templateObject;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React from 'react';
-import styled, { withTheme } from 'styled-components';
-import { oneOf, string, oneOfType, number } from 'prop-types';
-import get from 'lodash.get';
-var StyledSpinner = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var color = _ref.color,
-      size = _ref.size;
-  return "\n    .spinner {\n      display: inline-block;\n      width: " + size + "px;\n      height: " + size + "px;\n      color: " + color + ";\n      animation: 1.4s linear 0s infinite normal none running rotation;\n    }\n    .circular {\n      display: block;\n      height: 100%;\n      width: 100%;\n    }\n    .path {\n      stroke-dasharray: 80px, 200px;\n      stroke-dashoffset: 0;\n      -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;\n      animation: 1.6s ease-in-out 0s infinite normal none running dash;\n      stroke-linecap: round;\n      stroke: " + color + ";\n    }\n    @keyframes rotation {\n      0% {\n          transform: rotate(0deg);\n      }\n      100% {\n          transform: rotate(360deg);\n      }\n    }\n    @keyframes dash {\n      0% {\n        stroke-dasharray: 1px, 200px;\n        stroke-dashoffset: 0;\n      }\n      50% {\n        stroke-dasharray: 100px, 200px;\n        stroke-dashoffset: -15px;\n      }\n      100% {\n        stroke-dasharray: 100px, 200px;\n        stroke-dashoffset: -125px;\n      }\n    }\n  ";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled, { withTheme } from "styled-components";
+import { oneOf, string, oneOfType, number } from "prop-types";
+import get from "lodash.get";
+const StyledSpinner = styled.span`
+  ${({ color, size }) => `
+    .spinner {
+      display: inline-block;
+      width: ${size}px;
+      height: ${size}px;
+      color: ${color};
+      animation: 1.4s linear 0s infinite normal none running rotation;
+    }
+    .circular {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    .path {
+      stroke-dasharray: 80px, 200px;
+      stroke-dashoffset: 0;
+      -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+      animation: 1.6s ease-in-out 0s infinite normal none running dash;
+      stroke-linecap: round;
+      stroke: ${color};
+    }
+    @keyframes rotation {
+      0% {
+          transform: rotate(0deg);
+      }
+      100% {
+          transform: rotate(360deg);
+      }
+    }
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1px, 200px;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 100px, 200px;
+        stroke-dashoffset: -15px;
+      }
+      100% {
+        stroke-dasharray: 100px, 200px;
+        stroke-dashoffset: -125px;
+      }
+    }
+  `}
+`;
+const Spinner = React.forwardRef(({ size, color, theme }, ref) => {
+  return /* @__PURE__ */ jsx(
+    StyledSpinner,
+    {
+      color: get(theme.yoga.colors, color, color),
+      size: get(theme.yoga.spacing, size, size),
+      ref,
+      "aria-label": "loading-icon",
+      children: /* @__PURE__ */ jsx("span", { className: "spinner", children: /* @__PURE__ */ jsx("svg", { className: "circular", viewBox: "22 22 44 44", children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "path",
+          fill: "none",
+          strokeWidth: "3.6",
+          cx: "44",
+          cy: "44",
+          r: "20.2"
+        }
+      ) }) })
+    }
+  );
 });
-var Spinner = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var size = _ref2.size,
-      color = _ref2.color,
-      theme = _ref2.theme;
-  return /*#__PURE__*/React.createElement(StyledSpinner, {
-    color: get(theme.yoga.colors, color, color),
-    size: get(theme.yoga.spacing, size, size),
-    ref: ref,
-    "aria-label": "loading-icon"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "spinner"
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: "circular",
-    viewBox: "22 22 44 44"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: "path",
-    fill: "none",
-    strokeWidth: "3.6",
-    cx: "44",
-    cy: "44",
-    r: "20.2"
-  }))));
-});
-var commonSizes = ['xxxsmall', 'xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge', 'huge', 'xhuge'];
+const commonSizes = [
+  "xxxsmall",
+  "xxsmall",
+  "xsmall",
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+  "xxlarge",
+  "xxxlarge",
+  "huge",
+  "xhuge"
+];
 Spinner.propTypes = {
   size: oneOfType([oneOf(commonSizes), string, number]),
   color: string
 };
 Spinner.defaultProps = {
-  size: 'medium',
-  color: 'primary'
+  size: "medium",
+  color: "primary"
+};
+var Spinner_default = withTheme(Spinner);
+export {
+  Spinner_default as default
 };
-export default withTheme(Spinner);

package/esm/Spinner/web/Spinner.test.js

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

package/esm/Spinner/web/index.js

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

package/esm/Stepper/web/Dots.js

@@ -1,44 +1,90 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React from 'react';
-import { number, arrayOf, string, bool } from 'prop-types';
-import styled, { css } from 'styled-components';
-import activeDot from '../activeDot';
-import Text from '../../Text';
-var Dot = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var stepper = _ref.theme.yoga.components.stepper;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    width: 15px;\n    height: 15px;\n\n    border-radius: ", "px;\n  "])), stepper.dot.radius);
-});
-var Label = styled(Text.Bold)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var stepper = _ref2.theme.yoga.components.stepper;
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    width: 95px;\n\n    font-size: ", "px;\n\n    transform: translateX(-50%);\n  "])), stepper.label.font.size);
-});
-var DotWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var active = _ref3.active,
-      secondary = _ref3.secondary,
-      stepper = _ref3.theme.yoga.components.stepper;
-  var state = secondary ? 'secondary' : 'active';
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      width: 15px;\n\n      text-align: center;\n\n      ", " {\n        position: absolute;\n        left: 50%;\n        top: 10px;\n\n        color: ", ";\n      }\n\n      ", " {\n        position: absolute;\n        top: -10px;\n\n        background-color: ", ";\n      }\n    "])), Label, active ? stepper.label.color[state] : stepper.label.color.inactive, Dot, active ? stepper.dot.backgroundColor[state] : stepper.dot.backgroundColor.inactive);
-});
-var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
-
-function Dots(_ref4) {
-  var activeStep = _ref4.activeStep,
-      labels = _ref4.labels,
-      secondary = _ref4.secondary;
-  return /*#__PURE__*/React.createElement(Wrapper, null, labels.map(function (label, index) {
-    return /*#__PURE__*/React.createElement(DotWrapper, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { number, arrayOf, string, bool } from "prop-types";
+import styled, { css } from "styled-components";
+import activeDot from "../activeDot";
+import Text from "../../Text";
+const Dot = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => css`
+    width: 15px;
+    height: 15px;
+
+    border-radius: ${stepper.dot.radius}px;
+  `}
+`;
+const Label = styled(Text.Bold)`
+  ${({
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => css`
+    width: 95px;
+
+    font-size: ${stepper.label.font.size}px;
+
+    transform: translateX(-50%);
+  `}
+`;
+const DotWrapper = styled.div`
+  ${({
+  active,
+  secondary,
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => {
+  const state = secondary ? "secondary" : "active";
+  return css`
+      position: relative;
+      width: 15px;
+
+      text-align: center;
+
+      ${Label} {
+        position: absolute;
+        left: 50%;
+        top: 10px;
+
+        color: ${active ? stepper.label.color[state] : stepper.label.color.inactive};
+      }
+
+      ${Dot} {
+        position: absolute;
+        top: -10px;
+
+        background-color: ${active ? stepper.dot.backgroundColor[state] : stepper.dot.backgroundColor.inactive};
+      }
+    `;
+}}
+`;
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+function Dots({ activeStep, labels, secondary }) {
+  return /* @__PURE__ */ jsx(Wrapper, { children: labels.map((label, index) => /* @__PURE__ */ jsxs(
+    DotWrapper,
+    {
       active: activeDot(index, activeStep),
-      secondary: secondary,
-      key: label
-    }, /*#__PURE__*/React.createElement(Dot, null), /*#__PURE__*/React.createElement(Label, {
-      as: "span"
-    }, label));
-  }));
+      secondary,
+      children: [
+        /* @__PURE__ */ jsx(Dot, {}),
+        /* @__PURE__ */ jsx(Label, { as: "span", children: label })
+      ]
+    },
+    label
+  )) });
 }
-
 Dots.propTypes = {
   activeStep: number,
   labels: arrayOf(string),
@@ -49,4 +95,7 @@ Dots.defaultProps = {
   labels: [],
   secondary: false
 };
-export default Dots;
+var Dots_default = Dots;
+export {
+  Dots_default as default
+};

package/esm/Stepper/web/Line.js

@@ -1,15 +1,31 @@
-var _templateObject, _templateObject2;
+import { number } from "prop-types";
+import styled, { css } from "styled-components";
+const Line = styled.div`
+  ${({
+  width,
+  secondary,
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => css`
+    width: 100%;
+    height: 4px;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+    background-color: ${stepper.line.backgroundColor.inactive};
 
-import { number } from 'prop-types';
-import styled, { css } from 'styled-components';
-var Line = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var width = _ref.width,
-      secondary = _ref.secondary,
-      stepper = _ref.theme.yoga.components.stepper;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n    height: 4px;\n\n    background-color: ", ";\n\n    &:after {\n      display: block;\n      content: '';\n\n      width: ", "%;\n      height: 4px;\n\n      background-color: ", ";\n    }\n  "])), stepper.line.backgroundColor.inactive, width, secondary ? stepper.line.backgroundColor.secondary : stepper.line.backgroundColor.active);
-});
+    &:after {
+      display: block;
+      content: '';
+
+      width: ${width}%;
+      height: 4px;
+
+      background-color: ${secondary ? stepper.line.backgroundColor.secondary : stepper.line.backgroundColor.active};
+    }
+  `}
+`;
 Line.propTypes = {
   activeStep: number,
   totalSteps: number
@@ -18,4 +34,7 @@ Line.defaultProps = {
   activeStep: 0,
   totalSteps: 0
 };
-export default Line;
+var Line_default = Line;
+export {
+  Line_default as default
+};

package/esm/Stepper/web/Step.js

@@ -1,19 +1,33 @@
-var _templateObject;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React from 'react';
-import { string } from 'prop-types';
-import styled from 'styled-components';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-
-var Step = function Step(props) {
-  return /*#__PURE__*/React.createElement(Wrapper, props);
+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 { string } from "prop-types";
+import styled from "styled-components";
+const Wrapper = styled.div`
+  width: 100%;
+`;
+const Step = (props) => /* @__PURE__ */ jsx(Wrapper, __spreadValues({}, props));
 Step.propTypes = {
   /** Label to be displayed below the stepper dot. */
   label: string.isRequired
 };
-Step.displayName = 'Stepper.Step';
-export default Step;
+Step.displayName = "Stepper.Step";
+var Step_default = Step;
+export {
+  Step_default as default
+};

package/esm/Stepper/web/Stepper.js

@@ -1,57 +1,101 @@
-var _excluded = ["children", "activeStep", "secondary"];
-
-var _templateObject, _templateObject2, _templateObject3;
-
-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; }
-
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { bool } from 'prop-types';
-import { limitChildren, typeOf } from '../../shared';
-import Dots from './Dots';
-import Line from './Line';
-import Step from './Step';
-var Root = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])));
-var LineWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var stepper = _ref.theme.yoga.components.stepper;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n    height: 46px;\n\n    padding: 0 ", "px 0 ", "px;\n  "])), stepper.padding.right, stepper.padding.left);
-});
-/** Stepper is responsible for the logic that drives a stepped workflow, it
-provides a wizard-like workflow by dividing content into logical steps. */
+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, { css } from "styled-components";
+import { bool } from "prop-types";
+import { limitChildren, typeOf } from "../../shared";
+import Dots from "./Dots";
+import Line from "./Line";
+import Step from "./Step";
+const Root = styled.div`
+  width: 100%;
 
-function Stepper(_ref2) {
-  var children = _ref2.children,
-      activeStep = _ref2.activeStep,
-      secondary = _ref2.secondary,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  * {
+    box-sizing: border-box;
+  }
+`;
+const LineWrapper = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => css`
+    width: 100%;
+    height: 46px;
 
-  return /*#__PURE__*/React.createElement(Root, rest, /*#__PURE__*/React.createElement(LineWrapper, null, /*#__PURE__*/React.createElement(Line, {
-    width: activeStep <= 0 ? 0 : activeStep / (React.Children.count(children) - 1) * 100,
-    secondary: secondary
-  }), /*#__PURE__*/React.createElement(Dots, {
-    activeStep: activeStep,
-    labels: React.Children.map(children, function (child) {
-      return child.props.label;
-    }),
-    secondary: secondary
-  })), React.Children.toArray(children)[activeStep]);
+    padding: 0 ${stepper.padding.right}px 0 ${stepper.padding.left}px;
+  `}
+`;
+function Stepper(_a) {
+  var _b = _a, { children, activeStep, secondary } = _b, rest = __objRest(_b, ["children", "activeStep", "secondary"]);
+  return /* @__PURE__ */ jsxs(Root, __spreadProps(__spreadValues({}, rest), { children: [
+    /* @__PURE__ */ jsxs(LineWrapper, { children: [
+      /* @__PURE__ */ jsx(
+        Line,
+        {
+          width: activeStep <= 0 ? 0 : activeStep / (React.Children.count(children) - 1) * 100,
+          secondary
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Dots,
+        {
+          activeStep,
+          labels: React.Children.map(children, (child) => child.props.label),
+          secondary
+        }
+      )
+    ] }),
+    React.Children.toArray(children)[activeStep]
+  ] }));
 }
-
-Stepper.displayName = 'Stepper';
+Stepper.displayName = "Stepper";
 Stepper.propTypes = {
   /** Must be a Stepper.Step component. */
   children: typeOf(Step),
-
   /** Controls the active step, it receive the index value for showing some
    * step. Starting from 0. */
   activeStep: limitChildren,
   secondary: bool
 };
 Stepper.defaultProps = {
-  children: undefined,
+  children: void 0,
   activeStep: 0,
   secondary: false
 };
-export default Stepper;
+var Stepper_default = Stepper;
+export {
+  Stepper_default as default
+};