@gympass/yoga 7.77.0 → 7.78.0

package/cjs/Stepper/Stepper.theme.js

@@ -17,14 +17,16 @@ var Stepper = function Stepper(_ref) {
     line: {
       backgroundColor: {
         active: colors.primary,
-        inactive: colors.elements.backgroundAndDisabled
+        inactive: colors.elements.backgroundAndDisabled,
+        secondary: colors.medium
       }
     },
     dot: {
       radius: radii.circle,
       backgroundColor: {
         active: colors.primary,
-        inactive: colors.elements.backgroundAndDisabled
+        inactive: colors.elements.backgroundAndDisabled,
+        secondary: colors.medium
       }
     },
     label: {
@@ -34,7 +36,8 @@ var Stepper = function Stepper(_ref) {
       },
       color: {
         active: colors.primary,
-        inactive: colors.elements.selectionAndIcons
+        inactive: colors.elements.selectionAndIcons,
+        secondary: colors.medium
       }
     }
   };

package/cjs/Stepper/native/Dots.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _propTypes=require("prop-types");var _styledComponents=_interopRequireDefault(require("styled-components"));var _activeDot=_interopRequireDefault(require("../activeDot"));var _Text=_interopRequireDefault(require("../../Text"));var _templateObject,_templateObject2;var Wrapper=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  flex-direction: row;\n  justify-content: space-between;\n"])));var DotWrapper=_styledComponents["default"].View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  width: 15px;\n"])));var Dot=_styledComponents["default"].View(function(_ref){var active=_ref.active,stepper=_ref.theme.yoga.components.stepper;return"\n    width: 15px;\n    height: 15px;\n\n    margin-top: -6px;\n\n    border-radius: "+stepper.dot.radius+"px;\n    background-color: "+(active?stepper.dot.backgroundColor.active:stepper.dot.backgroundColor.inactive)+";\n  ";});var Label=(0,_styledComponents["default"])(_Text["default"].Bold)(function(_ref2){var active=_ref2.active,stepper=_ref2.theme.yoga.components.stepper;return"\n    width: 95px;\n    margin-top: 10px;\n    margin-left: -40px;\n\n    color: "+(active?stepper.label.color.active:stepper.label.color.inactive)+";\n\n    font-size: "+stepper.label.font.size+"px;\n    text-align: center;\n  ";});var Dots=function Dots(_ref3){var activeStep=_ref3.activeStep,labels=_ref3.labels;return _react["default"].createElement(Wrapper,null,labels.map(function(label,index){return _react["default"].createElement(DotWrapper,{key:label},_react["default"].createElement(Dot,{active:(0,_activeDot["default"])(index,activeStep)}),_react["default"].createElement(Label,{active:(0,_activeDot["default"])(index,activeStep)},label));}));};Dots.propTypes={activeStep:_propTypes.number,labels:(0,_propTypes.arrayOf)(_propTypes.string)};Dots.defaultProps={activeStep:0,labels:[]};var _default=Dots;exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _propTypes=require("prop-types");var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _Text=_interopRequireDefault(require("../../Text"));var _activeDot=_interopRequireDefault(require("../activeDot"));var _templateObject,_templateObject2,_templateObject3,_templateObject4;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Wrapper=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  flex-direction: row;\n  justify-content: space-between;\n"])));var DotWrapper=_styledComponents["default"].View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  width: 15px;\n"])));var Dot=_styledComponents["default"].View(function(_ref){var active=_ref.active,secondary=_ref.secondary,stepper=_ref.theme.yoga.components.stepper;var state=secondary?'secondary':'active';return(0,_styledComponents.css)(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n      width: 15px;\n      height: 15px;\n      margin-top: -6px;\n\n      border-radius: ","px;\n      background-color: ",";\n    "])),stepper.dot.radius,active?stepper.dot.backgroundColor[state]:stepper.dot.backgroundColor.inactive);});var Label=(0,_styledComponents["default"])(_Text["default"].Bold)(function(_ref2){var active=_ref2.active,secondary=_ref2.secondary,stepper=_ref2.theme.yoga.components.stepper;var state=secondary?'secondary':'active';return(0,_styledComponents.css)(_templateObject4||(_templateObject4=(0,_taggedTemplateLiteralLoose2["default"])(["\n      width: 95px;\n      margin-top: 10px;\n      margin-left: -40px;\n      color: ",";\n      font-size: ","px;\n      text-align: center;\n    "])),active?stepper.label.color[state]:stepper.label.color.inactive,stepper.label.font.size);});function Dots(_ref3){var activeStep=_ref3.activeStep,labels=_ref3.labels,secondary=_ref3.secondary;return _react["default"].createElement(Wrapper,null,labels.map(function(label,index){return _react["default"].createElement(DotWrapper,{key:label},_react["default"].createElement(Dot,{active:(0,_activeDot["default"])(index,activeStep),secondary:secondary}),_react["default"].createElement(Label,{active:(0,_activeDot["default"])(index,activeStep),secondary:secondary},label));}));}Dots.propTypes={activeStep:_propTypes.number,labels:(0,_propTypes.arrayOf)(_propTypes.string),secondary:_propTypes.bool};Dots.defaultProps={activeStep:0,labels:[],secondary:false};var _default=Dots;exports["default"]=_default;

package/cjs/Stepper/native/Line.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _propTypes=require("prop-types");var _styledComponents=_interopRequireDefault(require("styled-components"));var _templateObject;var Wrapper=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));var InactiveLine=_styledComponents["default"].View(function(_ref){var stepper=_ref.theme.yoga.components.stepper;return"\n  width: 100%;\n  height: 4px;\n\n  position: absolute;\n  top: 0;\n\n  background-color: "+stepper.line.backgroundColor.inactive+";\n";});var ActiveLine=_styledComponents["default"].View(function(_ref2){var width=_ref2.width,stepper=_ref2.theme.yoga.components.stepper;return"\n    position: absolute;\n    top: 0;\n\n    background-color: "+stepper.line.backgroundColor.active+";\n    width: "+width+"%;\n    height: 4px;\n";});var Line=function Line(_ref3){var activeStep=_ref3.activeStep,totalSteps=_ref3.totalSteps;return _react["default"].createElement(Wrapper,null,_react["default"].createElement(InactiveLine,null),_react["default"].createElement(ActiveLine,{width:activeStep<=0?0:activeStep/totalSteps*100}));};Line.propTypes={activeStep:_propTypes.number,totalSteps:_propTypes.number};Line.defaultProps={activeStep:0,totalSteps:0};var _default=Line;exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _propTypes=require("prop-types");var _styledComponents=_interopRequireDefault(require("styled-components"));var _templateObject;var Wrapper=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));var InactiveLine=_styledComponents["default"].View(function(_ref){var stepper=_ref.theme.yoga.components.stepper;return"\n  width: 100%;\n  height: 4px;\n\n  position: absolute;\n  top: 0;\n\n  background-color: "+stepper.line.backgroundColor.inactive+";\n";});var ActiveLine=_styledComponents["default"].View(function(_ref2){var width=_ref2.width,secondary=_ref2.secondary,stepper=_ref2.theme.yoga.components.stepper;return"\n    position: absolute;\n    top: 0;\n\n    background-color: "+(secondary?stepper.line.backgroundColor.secondary:stepper.line.backgroundColor.active)+";\n    width: "+width+"%;\n    height: 4px;\n";});function Line(_ref3){var activeStep=_ref3.activeStep,totalSteps=_ref3.totalSteps,secondary=_ref3.secondary;return _react["default"].createElement(Wrapper,null,_react["default"].createElement(InactiveLine,null),_react["default"].createElement(ActiveLine,{width:activeStep<=0?0:activeStep/totalSteps*100,secondary:secondary}));}Line.propTypes={activeStep:_propTypes.number,totalSteps:_propTypes.number,secondary:_propTypes.bool};Line.defaultProps={activeStep:0,totalSteps:0,secondary:false};var _default=Line;exports["default"]=_default;

package/cjs/Stepper/native/Stepper.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _shared=require("../../shared");var _Line=_interopRequireDefault(require("./Line"));var _Dots=_interopRequireDefault(require("./Dots"));var _Step=_interopRequireDefault(require("./Step"));var _excluded=["children","activeStep"];var _templateObject;var Wrapper=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n"])));var LineWrapper=_styledComponents["default"].View(function(_ref){var stepper=_ref.theme.yoga.components.stepper;return"\n  width: 100%;\n  padding: 0 "+stepper.padding.right+"px 0 "+stepper.padding.left+"px;\n";});var Stepper=function Stepper(_ref2){var children=_ref2.children,activeStep=_ref2.activeStep,rest=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);return _react["default"].createElement(Wrapper,rest,_react["default"].createElement(LineWrapper,null,_react["default"].createElement(_Line["default"],{activeStep:activeStep,totalSteps:_react["default"].Children.count(children)-1}),_react["default"].createElement(_Dots["default"],{activeStep:activeStep,labels:_react["default"].Children.map(children,function(child){return child.props.label;})})),_react["default"].Children.toArray(children)[activeStep]);};Stepper.displayName='Stepper';Stepper.propTypes={children:(0,_shared.typeOf)(_Step["default"]),activeStep:_shared.limitChildren};Stepper.defaultProps={children:undefined,activeStep:0};var _default=Stepper;exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _propTypes=require("prop-types");var _shared=require("../../shared");var _Line=_interopRequireDefault(require("./Line"));var _Dots=_interopRequireDefault(require("./Dots"));var _Step=_interopRequireDefault(require("./Step"));var _excluded=["children","activeStep","secondary"];var _templateObject;var Wrapper=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n"])));var LineWrapper=_styledComponents["default"].View(function(_ref){var stepper=_ref.theme.yoga.components.stepper;return"\n  width: 100%;\n  padding: 0 "+stepper.padding.right+"px 0 "+stepper.padding.left+"px;\n";});function Stepper(_ref2){var children=_ref2.children,activeStep=_ref2.activeStep,secondary=_ref2.secondary,rest=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);return _react["default"].createElement(Wrapper,rest,_react["default"].createElement(LineWrapper,null,_react["default"].createElement(_Line["default"],{activeStep:activeStep,totalSteps:_react["default"].Children.count(children)-1,secondary:secondary}),_react["default"].createElement(_Dots["default"],{activeStep:activeStep,labels:_react["default"].Children.map(children,function(child){return child.props.label;}),secondary:secondary})),_react["default"].Children.toArray(children)[activeStep]);}Stepper.displayName='Stepper';Stepper.propTypes={children:(0,_shared.typeOf)(_Step["default"]),activeStep:_shared.limitChildren,secondary:_propTypes.bool};Stepper.defaultProps={children:undefined,activeStep:0,secondary:false};var _default=Stepper;exports["default"]=_default;

package/cjs/Stepper/web/Dots.js

@@ -35,32 +35,38 @@ var Label = (0, _styledComponents["default"])(_Text["default"].Bold)(_templateOb
 
 var DotWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
   var active = _ref3.active,
+      secondary = _ref3.secondary,
       stepper = _ref3.theme.yoga.components.stepper;
-  return (0, _styledComponents.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.active : stepper.label.color.inactive, Dot, active ? stepper.dot.backgroundColor.active : stepper.dot.backgroundColor.inactive);
+  var state = secondary ? 'secondary' : 'active';
+  return (0, _styledComponents.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 = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
 
-var Dots = function Dots(_ref4) {
+function Dots(_ref4) {
   var activeStep = _ref4.activeStep,
-      labels = _ref4.labels;
+      labels = _ref4.labels,
+      secondary = _ref4.secondary;
   return /*#__PURE__*/_react["default"].createElement(Wrapper, null, labels.map(function (label, index) {
     return /*#__PURE__*/_react["default"].createElement(DotWrapper, {
       active: (0, _activeDot["default"])(index, activeStep),
+      secondary: secondary,
       key: label
     }, /*#__PURE__*/_react["default"].createElement(Dot, null), /*#__PURE__*/_react["default"].createElement(Label, {
       as: "span"
     }, label));
   }));
-};
+}
 
 Dots.propTypes = {
   activeStep: _propTypes.number,
-  labels: (0, _propTypes.arrayOf)(_propTypes.string)
+  labels: (0, _propTypes.arrayOf)(_propTypes.string),
+  secondary: _propTypes.bool
 };
 Dots.defaultProps = {
   activeStep: 0,
-  labels: []
+  labels: [],
+  secondary: false
 };
 var _default = Dots;
 exports["default"] = _default;

package/cjs/Stepper/web/Line.js

@@ -17,8 +17,9 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 var Line = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var width = _ref.width,
+      secondary = _ref.secondary,
       stepper = _ref.theme.yoga.components.stepper;
-  return (0, _styledComponents.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, stepper.line.backgroundColor.active);
+  return (0, _styledComponents.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);
 });
 
 Line.propTypes = {

package/cjs/Stepper/web/Stepper.js

@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _propTypes = require("prop-types");
+
 var _shared = require("../../shared");
 
 var _Dots = _interopRequireDefault(require("./Dots"));
@@ -15,7 +17,7 @@ var _Line = _interopRequireDefault(require("./Line"));
 
 var _Step = _interopRequireDefault(require("./Step"));
 
-var _excluded = ["children", "activeStep"];
+var _excluded = ["children", "activeStep", "secondary"];
 
 var _templateObject, _templateObject2, _templateObject3;
 
@@ -39,20 +41,23 @@ var LineWrapper = _styledComponents["default"].div(_templateObject2 || (_templat
 provides a wizard-like workflow by dividing content into logical steps. */
 
 
-var Stepper = function Stepper(_ref2) {
+function Stepper(_ref2) {
   var children = _ref2.children,
       activeStep = _ref2.activeStep,
+      secondary = _ref2.secondary,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(Root, rest, /*#__PURE__*/_react["default"].createElement(LineWrapper, null, /*#__PURE__*/_react["default"].createElement(_Line["default"], {
-    width: activeStep <= 0 ? 0 : activeStep / (_react["default"].Children.count(children) - 1) * 100
+    width: activeStep <= 0 ? 0 : activeStep / (_react["default"].Children.count(children) - 1) * 100,
+    secondary: secondary
   }), /*#__PURE__*/_react["default"].createElement(_Dots["default"], {
     activeStep: activeStep,
     labels: _react["default"].Children.map(children, function (child) {
       return child.props.label;
-    })
+    }),
+    secondary: secondary
   })), _react["default"].Children.toArray(children)[activeStep]);
-};
+}
 
 Stepper.displayName = 'Stepper';
 Stepper.propTypes = {
@@ -61,11 +66,13 @@ Stepper.propTypes = {
 
   /** Controls the active step, it receive the index value for showing some
    * step. Starting from 0. */
-  activeStep: _shared.limitChildren
+  activeStep: _shared.limitChildren,
+  secondary: _propTypes.bool
 };
 Stepper.defaultProps = {
   children: undefined,
-  activeStep: 0
+  activeStep: 0,
+  secondary: false
 };
 var _default = Stepper;
 exports["default"] = _default;

package/esm/Stepper/Stepper.theme.js

@@ -12,14 +12,16 @@ var Stepper = function Stepper(_ref) {
     line: {
       backgroundColor: {
         active: colors.primary,
-        inactive: colors.elements.backgroundAndDisabled
+        inactive: colors.elements.backgroundAndDisabled,
+        secondary: colors.medium
       }
     },
     dot: {
       radius: radii.circle,
       backgroundColor: {
         active: colors.primary,
-        inactive: colors.elements.backgroundAndDisabled
+        inactive: colors.elements.backgroundAndDisabled,
+        secondary: colors.medium
       }
     },
     label: {
@@ -29,7 +31,8 @@ var Stepper = function Stepper(_ref) {
       },
       color: {
         active: colors.primary,
-        inactive: colors.elements.selectionAndIcons
+        inactive: colors.elements.selectionAndIcons,
+        secondary: colors.medium
       }
     }
   };

package/esm/Stepper/native/Dots.js

@@ -1,45 +1,54 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
+import { arrayOf, bool, number, string } from 'prop-types';
 import React from 'react';
-import { number, arrayOf, string } from 'prop-types';
-import styled from 'styled-components';
-import activeDot from '../activeDot';
+import styled, { css } from 'styled-components';
 import Text from '../../Text';
+import activeDot from '../activeDot';
 var Wrapper = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 var DotWrapper = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 15px;\n"])));
 var Dot = styled.View(function (_ref) {
   var active = _ref.active,
+      secondary = _ref.secondary,
       stepper = _ref.theme.yoga.components.stepper;
-  return "\n    width: 15px;\n    height: 15px;\n\n    margin-top: -6px;\n\n    border-radius: " + stepper.dot.radius + "px;\n    background-color: " + (active ? stepper.dot.backgroundColor.active : stepper.dot.backgroundColor.inactive) + ";\n  ";
+  var state = secondary ? 'secondary' : 'active';
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: 15px;\n      height: 15px;\n      margin-top: -6px;\n\n      border-radius: ", "px;\n      background-color: ", ";\n    "])), stepper.dot.radius, active ? stepper.dot.backgroundColor[state] : stepper.dot.backgroundColor.inactive);
 });
 var Label = styled(Text.Bold)(function (_ref2) {
   var active = _ref2.active,
+      secondary = _ref2.secondary,
       stepper = _ref2.theme.yoga.components.stepper;
-  return "\n    width: 95px;\n    margin-top: 10px;\n    margin-left: -40px;\n\n    color: " + (active ? stepper.label.color.active : stepper.label.color.inactive) + ";\n\n    font-size: " + stepper.label.font.size + "px;\n    text-align: center;\n  ";
+  var state = secondary ? 'secondary' : 'active';
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: 95px;\n      margin-top: 10px;\n      margin-left: -40px;\n      color: ", ";\n      font-size: ", "px;\n      text-align: center;\n    "])), active ? stepper.label.color[state] : stepper.label.color.inactive, stepper.label.font.size);
 });
 
-var Dots = function Dots(_ref3) {
+function Dots(_ref3) {
   var activeStep = _ref3.activeStep,
-      labels = _ref3.labels;
+      labels = _ref3.labels,
+      secondary = _ref3.secondary;
   return /*#__PURE__*/React.createElement(Wrapper, null, labels.map(function (label, index) {
     return /*#__PURE__*/React.createElement(DotWrapper, {
       key: label
     }, /*#__PURE__*/React.createElement(Dot, {
-      active: activeDot(index, activeStep)
+      active: activeDot(index, activeStep),
+      secondary: secondary
     }), /*#__PURE__*/React.createElement(Label, {
-      active: activeDot(index, activeStep)
+      active: activeDot(index, activeStep),
+      secondary: secondary
     }, label));
   }));
-};
+}
 
 Dots.propTypes = {
   activeStep: number,
-  labels: arrayOf(string)
+  labels: arrayOf(string),
+  secondary: bool
 };
 Dots.defaultProps = {
   activeStep: 0,
-  labels: []
+  labels: [],
+  secondary: false
 };
 export default Dots;

package/esm/Stepper/native/Line.js

@@ -3,7 +3,7 @@ var _templateObject;
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React from 'react';
-import { number } from 'prop-types';
+import { bool, number } from 'prop-types';
 import styled from 'styled-components';
 var Wrapper = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var InactiveLine = styled.View(function (_ref) {
@@ -12,24 +12,29 @@ var InactiveLine = styled.View(function (_ref) {
 });
 var ActiveLine = styled.View(function (_ref2) {
   var width = _ref2.width,
+      secondary = _ref2.secondary,
       stepper = _ref2.theme.yoga.components.stepper;
-  return "\n    position: absolute;\n    top: 0;\n\n    background-color: " + stepper.line.backgroundColor.active + ";\n    width: " + width + "%;\n    height: 4px;\n";
+  return "\n    position: absolute;\n    top: 0;\n\n    background-color: " + (secondary ? stepper.line.backgroundColor.secondary : stepper.line.backgroundColor.active) + ";\n    width: " + width + "%;\n    height: 4px;\n";
 });
 
-var Line = function Line(_ref3) {
+function Line(_ref3) {
   var activeStep = _ref3.activeStep,
-      totalSteps = _ref3.totalSteps;
+      totalSteps = _ref3.totalSteps,
+      secondary = _ref3.secondary;
   return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(InactiveLine, null), /*#__PURE__*/React.createElement(ActiveLine, {
-    width: activeStep <= 0 ? 0 : activeStep / totalSteps * 100
+    width: activeStep <= 0 ? 0 : activeStep / totalSteps * 100,
+    secondary: secondary
   }));
-};
+}
 
 Line.propTypes = {
   activeStep: number,
-  totalSteps: number
+  totalSteps: number,
+  secondary: bool
 };
 Line.defaultProps = {
   activeStep: 0,
-  totalSteps: 0
+  totalSteps: 0,
+  secondary: false
 };
 export default Line;

package/esm/Stepper/native/Stepper.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "activeStep"];
+var _excluded = ["children", "activeStep", "secondary"];
 
 var _templateObject;
 
@@ -8,6 +8,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 import React from 'react';
 import styled from 'styled-components';
+import { bool } from 'prop-types';
 import { limitChildren, typeOf } from '../../shared';
 import Line from './Line';
 import Dots from './Dots';
@@ -20,21 +21,24 @@ var LineWrapper = styled.View(function (_ref) {
 /** Stepper is responsible for the logic that drives a stepped workflow, it
 provides a wizard-like workflow by dividing content into logical steps. */
 
-var Stepper = function Stepper(_ref2) {
+function Stepper(_ref2) {
   var children = _ref2.children,
       activeStep = _ref2.activeStep,
+      secondary = _ref2.secondary,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, rest, /*#__PURE__*/React.createElement(LineWrapper, null, /*#__PURE__*/React.createElement(Line, {
     activeStep: activeStep,
-    totalSteps: React.Children.count(children) - 1
+    totalSteps: React.Children.count(children) - 1,
+    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]);
-};
+}
 
 Stepper.displayName = 'Stepper';
 Stepper.propTypes = {
@@ -43,10 +47,14 @@ Stepper.propTypes = {
 
   /** Controls the active step, it receive the index value for showing some
    * step. Starting from 0. */
-  activeStep: limitChildren
+  activeStep: limitChildren,
+
+  /** Use secondary color */
+  secondary: bool
 };
 Stepper.defaultProps = {
   children: undefined,
-  activeStep: 0
+  activeStep: 0,
+  secondary: false
 };
 export default Stepper;

package/esm/Stepper/native/Stepper.test.js

@@ -20,9 +20,10 @@ describe('<Stepper />', function () {
 
       expect(toJSON(container)).toMatchSnapshot();
     });
-    it('should match snapshot with second step active', function () {
+    it('should match snapshot with first step active and secondary color', function () {
       var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
-        activeStep: 1
+        activeStep: 0,
+        secondary: true
       }, /*#__PURE__*/React.createElement(Stepper.Step, {
         label: "step one"
       }, /*#__PURE__*/React.createElement(Text, null, "step one content")), /*#__PURE__*/React.createElement(Stepper.Step, {
@@ -35,10 +36,25 @@ describe('<Stepper />', function () {
 
       expect(toJSON(container)).toMatchSnapshot();
     });
+    it('should match snapshot with second step active', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
+        activeStep: 1
+      }, /*#__PURE__*/React.createElement(Stepper.Step, {
+        label: "step one"
+      }, /*#__PURE__*/React.createElement(Text, null, "step one content")), /*#__PURE__*/React.createElement(Stepper.Step, {
+        label: "step two"
+      }, /*#__PURE__*/React.createElement(Text, null, "step two content")), /*#__PURE__*/React.createElement(Stepper.Step, {
+        label: "step three"
+      }, /*#__PURE__*/React.createElement(Text, null, "step three content"))))),
+          container = _render3.container,
+          toJSON = _render3.toJSON;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
   });
   describe('Steps', function () {
     it('should change the active step', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
         activeStep: 0
       }, /*#__PURE__*/React.createElement(Stepper.Step, {
         label: "step one"
@@ -47,8 +63,8 @@ describe('<Stepper />', function () {
       }, /*#__PURE__*/React.createElement(Text, null, "step two content")), /*#__PURE__*/React.createElement(Stepper.Step, {
         label: "step three"
       }, /*#__PURE__*/React.createElement(Text, null, "step three content"))))),
-          queryByText = _render3.queryByText,
-          rerender = _render3.rerender;
+          queryByText = _render4.queryByText,
+          rerender = _render4.rerender;
 
       expect(queryByText('step one content')).toBeTruthy();
       expect(queryByText('step two content')).toBeFalsy();

package/esm/Stepper/web/Dots.js

@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React from 'react';
-import { number, arrayOf, string } from 'prop-types';
+import { number, arrayOf, string, bool } from 'prop-types';
 import styled, { css } from 'styled-components';
 import activeDot from '../activeDot';
 import Text from '../../Text';
@@ -17,30 +17,36 @@ var Label = styled(Text.Bold)(_templateObject3 || (_templateObject3 = _taggedTem
 });
 var DotWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
   var active = _ref3.active,
+      secondary = _ref3.secondary,
       stepper = _ref3.theme.yoga.components.stepper;
-  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.active : stepper.label.color.inactive, Dot, active ? stepper.dot.backgroundColor.active : stepper.dot.backgroundColor.inactive);
+  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"])));
 
-var Dots = function Dots(_ref4) {
+function Dots(_ref4) {
   var activeStep = _ref4.activeStep,
-      labels = _ref4.labels;
+      labels = _ref4.labels,
+      secondary = _ref4.secondary;
   return /*#__PURE__*/React.createElement(Wrapper, null, labels.map(function (label, index) {
     return /*#__PURE__*/React.createElement(DotWrapper, {
       active: activeDot(index, activeStep),
+      secondary: secondary,
       key: label
     }, /*#__PURE__*/React.createElement(Dot, null), /*#__PURE__*/React.createElement(Label, {
       as: "span"
     }, label));
   }));
-};
+}
 
 Dots.propTypes = {
   activeStep: number,
-  labels: arrayOf(string)
+  labels: arrayOf(string),
+  secondary: bool
 };
 Dots.defaultProps = {
   activeStep: 0,
-  labels: []
+  labels: [],
+  secondary: false
 };
 export default Dots;

package/esm/Stepper/web/Line.js

@@ -6,8 +6,9 @@ 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, stepper.line.backgroundColor.active);
+  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);
 });
 Line.propTypes = {
   activeStep: number,

package/esm/Stepper/web/Stepper.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "activeStep"];
+var _excluded = ["children", "activeStep", "secondary"];
 
 var _templateObject, _templateObject2, _templateObject3;
 
@@ -8,6 +8,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 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';
@@ -20,20 +21,23 @@ var LineWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemp
 /** Stepper is responsible for the logic that drives a stepped workflow, it
 provides a wizard-like workflow by dividing content into logical steps. */
 
-var Stepper = function Stepper(_ref2) {
+function Stepper(_ref2) {
   var children = _ref2.children,
       activeStep = _ref2.activeStep,
+      secondary = _ref2.secondary,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   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
+    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]);
-};
+}
 
 Stepper.displayName = 'Stepper';
 Stepper.propTypes = {
@@ -42,10 +46,12 @@ Stepper.propTypes = {
 
   /** Controls the active step, it receive the index value for showing some
    * step. Starting from 0. */
-  activeStep: limitChildren
+  activeStep: limitChildren,
+  secondary: bool
 };
 Stepper.defaultProps = {
   children: undefined,
-  activeStep: 0
+  activeStep: 0,
+  secondary: false
 };
 export default Stepper;

package/esm/Stepper/web/Stepper.test.js

@@ -18,9 +18,10 @@ describe('<Stepper />', function () {
 
       expect(container).toMatchSnapshot();
     });
-    it('should match snapshot with second step active', function () {
+    it('should match snapshot with first step active and color secondary', function () {
       var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
-        activeStep: 1
+        activeStep: 0,
+        secondary: true
       }, /*#__PURE__*/React.createElement(Stepper.Step, {
         label: "step one"
       }, "step one content"), /*#__PURE__*/React.createElement(Stepper.Step, {
@@ -32,10 +33,24 @@ describe('<Stepper />', function () {
 
       expect(container).toMatchSnapshot();
     });
+    it('should match snapshot with second step active', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
+        activeStep: 1
+      }, /*#__PURE__*/React.createElement(Stepper.Step, {
+        label: "step one"
+      }, "step one content"), /*#__PURE__*/React.createElement(Stepper.Step, {
+        label: "step two"
+      }, "step two content"), /*#__PURE__*/React.createElement(Stepper.Step, {
+        label: "step three"
+      }, "step three content")))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
   });
   describe('Steps', function () {
     it('should change the active step', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
         activeStep: 0
       }, /*#__PURE__*/React.createElement(Stepper.Step, {
         label: "step one"
@@ -44,8 +59,8 @@ describe('<Stepper />', function () {
       }, "step two content"), /*#__PURE__*/React.createElement(Stepper.Step, {
         label: "step three"
       }, "step three content")))),
-          queryByText = _render3.queryByText,
-          rerender = _render3.rerender;
+          queryByText = _render4.queryByText,
+          rerender = _render4.rerender;
 
       expect(queryByText('step one content')).toBeTruthy();
       expect(queryByText('step two content')).toBeFalsy();

package/esm/Theme/index.native.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-named-as-default
 import ThemeProvider from './Provider';
 import yogaTheme from './theme';
 import theme from './helpers/themeReader';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.77.0",
+  "version": "7.78.0",
   "description": "Gympass component library",
-  "main": "./cjs",
+  "main": "./cjs/index.js",
   "sideEffects": false,
   "keywords": [
     "Gympass",
@@ -25,12 +25,12 @@
     "url": "https://github.com/Gympass/yoga/issues"
   },
   "dependencies": {
-    "@gympass/yoga-common": "^1.1.2",
+    "@gympass/yoga-common": "^1.2.0",
     "@gympass/yoga-helpers": "^1.0.3",
     "@gympass/yoga-icons": "^1.13.0",
     "@gympass/yoga-illustrations": "^0.5.1",
     "@gympass/yoga-system": "^0.11.0",
-    "@gympass/yoga-tokens": "^3.1.5",
+    "@gympass/yoga-tokens": "^3.2.0",
     "@ptomasroos/react-native-multi-slider": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
     "date-fns": "^2.29.2",
@@ -53,8 +53,15 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "463ab24d95ca452369523da8d13ef2fd26579903",
-  "module": "./esm",
+  "gitHead": "1f89be931db0275465816110925ab3f5177580b0",
+  "module": "./esm/index.js",
+  "types": "./typings/index.d.ts",
   "private": false,
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./esm/index.js"
+    }
+  },
   "react-native": "./cjs/index.native.js"
 }