@gympass/yoga 7.87.1 → 7.88.0

package/cjs/Stepper/native/Stepper.js

@@ -1 +1,125 @@
-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;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Stepper_exports = {};
+__export(Stepper_exports, {
+  default: () => Stepper_default
+});
+module.exports = __toCommonJS(Stepper_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_shared = require("../../shared");
+var import_Line = __toESM(require("./Line"));
+var import_Dots = __toESM(require("./Dots"));
+var import_Step = __toESM(require("./Step"));
+const Wrapper = import_styled_components.default.View`
+  width: 100%;
+`;
+const LineWrapper = import_styled_components.default.View(
+  ({
+    theme: {
+      yoga: {
+        components: { stepper }
+      }
+    }
+  }) => `
+  width: 100%;
+  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__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues({}, rest), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LineWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Line.default,
+        {
+          activeStep,
+          totalSteps: import_react.default.Children.count(children) - 1,
+          secondary
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Dots.default,
+        {
+          activeStep,
+          labels: import_react.default.Children.map(children, (child) => child.props.label),
+          secondary
+        }
+      )
+    ] }),
+    import_react.default.Children.toArray(children)[activeStep]
+  ] }));
+}
+Stepper.displayName = "Stepper";
+Stepper.propTypes = {
+  /** Must be a Stepper.Step component. */
+  children: (0, import_shared.typeOf)(import_Step.default),
+  /** Controls the active step, it receive the index value for showing some
+   * step. Starting from 0. */
+  activeStep: import_shared.limitChildren,
+  /** Use secondary color */
+  secondary: import_prop_types.bool
+};
+Stepper.defaultProps = {
+  children: void 0,
+  activeStep: 0,
+  secondary: false
+};
+var Stepper_default = Stepper;

package/cjs/Stepper/native/Stepper.test.js

@@ -0,0 +1,87 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
+var import_react_native2 = require("@testing-library/react-native");
+var import_Theme = __toESM(require("../../Theme"));
+var import__ = __toESM(require(".."));
+describe("<Stepper />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot with first step active", () => {
+      const { toJSON } = (0, import_react_native2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.default, { activeStep: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step one", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step one content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step two", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step two content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step three", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step three content" }) })
+        ] }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with first step active and secondary color", () => {
+      const { toJSON } = (0, import_react_native2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.default, { activeStep: 0, secondary: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step one", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step one content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step two", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step two content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step three", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step three content" }) })
+        ] }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with second step active", () => {
+      const { toJSON } = (0, import_react_native2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.default, { activeStep: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step one", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step one content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step two", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step two content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step three", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step three content" }) })
+        ] }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+  describe("Steps", () => {
+    it("should change the active step", () => {
+      const { queryByText, rerender } = (0, import_react_native2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.default, { activeStep: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step one", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step one content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step two", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step two content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step three", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step three content" }) })
+        ] }) })
+      );
+      expect(queryByText("step one content")).toBeTruthy();
+      expect(queryByText("step two content")).toBeFalsy();
+      expect(queryByText("step three content")).toBeFalsy();
+      rerender(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.default, { activeStep: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step one", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step one content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step two", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step two content" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default.Step, { label: "step three", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "step three content" }) })
+        ] }) })
+      );
+      expect(queryByText("step one content")).toBeFalsy();
+      expect(queryByText("step two content")).toBeTruthy();
+      expect(queryByText("step three content")).toBeFalsy();
+    });
+  });
+});

package/cjs/Stepper/native/index.js

@@ -1 +1,41 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Step",{enumerable:true,get:function get(){return _Step["default"];}});Object.defineProperty(exports,"Stepper",{enumerable:true,get:function get(){return _Stepper["default"];}});var _Stepper=_interopRequireDefault(require("./Stepper"));var _Step=_interopRequireDefault(require("./Step"));
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var native_exports = {};
+__export(native_exports, {
+  Step: () => import_Step.default,
+  Stepper: () => import_Stepper.default
+});
+module.exports = __toCommonJS(native_exports);
+var import_Stepper = __toESM(require("./Stepper"));
+var import_Step = __toESM(require("./Step"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Step,
+  Stepper
+});

package/cjs/Stepper/web/Dots.js

@@ -1,72 +1,131 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _activeDot = _interopRequireDefault(require("../activeDot"));
-
-var _Text = _interopRequireDefault(require("../../Text"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Dot = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var stepper = _ref.theme.yoga.components.stepper;
-  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    width: 15px;\n    height: 15px;\n\n    border-radius: ", "px;\n  "])), stepper.dot.radius);
-});
-
-var Label = (0, _styledComponents["default"])(_Text["default"].Bold)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var stepper = _ref2.theme.yoga.components.stepper;
-  return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    width: 95px;\n\n    font-size: ", "px;\n\n    transform: translateX(-50%);\n  "])), stepper.label.font.size);
-});
-
-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;
-  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 __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dots_exports = {};
+__export(Dots_exports, {
+  default: () => Dots_default
 });
-
-var Wrapper = _styledComponents["default"].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["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));
-  }));
+module.exports = __toCommonJS(Dots_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+var import_activeDot = __toESM(require("../activeDot"));
+var import_Text = __toESM(require("../../Text"));
+const Dot = import_styled_components.default.div`
+  ${({
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => import_styled_components.css`
+    width: 15px;
+    height: 15px;
+
+    border-radius: ${stepper.dot.radius}px;
+  `}
+`;
+const Label = (0, import_styled_components.default)(import_Text.default.Bold)`
+  ${({
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => import_styled_components.css`
+    width: 95px;
+
+    font-size: ${stepper.label.font.size}px;
+
+    transform: translateX(-50%);
+  `}
+`;
+const DotWrapper = import_styled_components.default.div`
+  ${({
+  active,
+  secondary,
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => {
+  const state = secondary ? "secondary" : "active";
+  return import_styled_components.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 = import_styled_components.default.div`
+  display: flex;
+  justify-content: space-between;
+`;
+function Dots({ activeStep, labels, secondary }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    DotWrapper,
+    {
+      active: (0, import_activeDot.default)(index, activeStep),
+      secondary,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dot, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { as: "span", children: label })
+      ]
+    },
+    label
+  )) });
 }
-
 Dots.propTypes = {
-  activeStep: _propTypes.number,
-  labels: (0, _propTypes.arrayOf)(_propTypes.string),
-  secondary: _propTypes.bool
+  activeStep: import_prop_types.number,
+  labels: (0, import_prop_types.arrayOf)(import_prop_types.string),
+  secondary: import_prop_types.bool
 };
 Dots.defaultProps = {
   activeStep: 0,
   labels: [],
   secondary: false
 };
-var _default = Dots;
-exports["default"] = _default;
+var Dots_default = Dots;

package/cjs/Stepper/web/Line.js

@@ -1,34 +1,70 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Line_exports = {};
+__export(Line_exports, {
+  default: () => Line_default
+});
+module.exports = __toCommonJS(Line_exports);
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+const Line = import_styled_components.default.div`
+  ${({
+  width,
+  secondary,
+  theme: {
+    yoga: {
+      components: { stepper }
+    }
+  }
+}) => import_styled_components.css`
+    width: 100%;
+    height: 4px;
 
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _propTypes = require("prop-types");
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _templateObject, _templateObject2;
-
-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; }
+    background-color: ${stepper.line.backgroundColor.inactive};
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+    &:after {
+      display: block;
+      content: '';
 
-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, secondary ? stepper.line.backgroundColor.secondary : stepper.line.backgroundColor.active);
-});
+      width: ${width}%;
+      height: 4px;
 
+      background-color: ${secondary ? stepper.line.backgroundColor.secondary : stepper.line.backgroundColor.active};
+    }
+  `}
+`;
 Line.propTypes = {
-  activeStep: _propTypes.number,
-  totalSteps: _propTypes.number
+  activeStep: import_prop_types.number,
+  totalSteps: import_prop_types.number
 };
 Line.defaultProps = {
   activeStep: 0,
   totalSteps: 0
 };
-var _default = Line;
-exports["default"] = _default;
+var Line_default = Line;

package/cjs/Stepper/web/Step.js

@@ -1,30 +1,61 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-
-var Step = function Step(props) {
-  return /*#__PURE__*/_react["default"].createElement(Wrapper, props);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Step_exports = {};
+__export(Step_exports, {
+  default: () => Step_default
+});
+module.exports = __toCommonJS(Step_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+const Wrapper = import_styled_components.default.div`
+  width: 100%;
+`;
+const Step = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, __spreadValues({}, props));
 Step.propTypes = {
   /** Label to be displayed below the stepper dot. */
-  label: _propTypes.string.isRequired
+  label: import_prop_types.string.isRequired
 };
-Step.displayName = 'Stepper.Step';
-var _default = Step;
-exports["default"] = _default;
+Step.displayName = "Stepper.Step";
+var Step_default = Step;