@gympass/yoga 7.87.1 → 7.88.0

package/cjs/Card/web/PlanCard/Content.js

@@ -1,108 +1,187 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = require("prop-types");
-
-var _themeReader = _interopRequireDefault(require("../../../Theme/helpers/themeReader"));
-
-var _Text = _interopRequireDefault(require("../../../Text"));
-
-var _Content = _interopRequireDefault(require("../Card/Content"));
-
-var _Subtitle = _interopRequireDefault(require("./Subtitle"));
-
-var _Divider = _interopRequireDefault(require("../../../Divider"));
-
-var _excluded = ["title", "badgeColor", "subtitle", "description", "currency", "suffix", "price", "period", "extra", "children"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Wrapper = (0, _styledComponents["default"])(_Content["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
-var Title = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
-  var _theme = (0, _themeReader["default"])(props),
-      _theme$components = _theme.components,
-      card = _theme$components.card,
-      cardweb = _theme$components.cardweb,
-      colors = _theme.colors,
-      radii = _theme.radii;
-
-  var badgeColor = props.badgeColor;
-  var badgeStyle = badgeColor && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ::before {\n          position: absolute;\n          left: 0;\n          content: '';\n          height: 24px;\n          width: 4px;\n          background-color: ", ";\n          border-top-right-radius: ", "px;\n          border-bottom-right-radius: ", "px;\n        }\n      "])), colors[props.badgeColor], radii.xsmall, radii.xsmall);
-  return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      margin-bottom: ", "px;\n      line-height: ", "px;\n      ", "\n    "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight, badgeStyle);
-});
-var Description = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  color: ", ";\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-overflow: -o-ellipsis-lastline;\n"])), _themeReader["default"].components.card.plan.description.color);
-
-var Price = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", "\n"])), function (props) {
-  var _theme2 = (0, _themeReader["default"])(props),
-      cardweb = _theme2.components.cardweb;
-
-  return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", "px;\n    "])), cardweb.plan.price.margin.bottom);
+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 Content_exports = {};
+__export(Content_exports, {
+  default: () => Content_default
 });
-
-var EnhancePrice = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  align-self: center;\n"])));
-
-var PlanCardContent = function PlanCardContent(_ref) {
-  var title = _ref.title,
-      badgeColor = _ref.badgeColor,
-      subtitle = _ref.subtitle,
-      description = _ref.description,
-      currency = _ref.currency,
-      suffix = _ref.suffix,
-      price = _ref.price,
-      period = _ref.period,
-      extra = _ref.extra,
-      children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement(Wrapper, rest, subtitle && /*#__PURE__*/_react["default"].createElement(_Subtitle["default"], null, subtitle), title && /*#__PURE__*/_react["default"].createElement(Title, {
-    badgeColor: badgeColor
-  }, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description), !!price && /*#__PURE__*/_react["default"].createElement(Price, null, currency && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
-    as: "sup"
-  }, currency), price && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
-    as: "strong"
-  }, price), suffix && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
-    as: "sup"
-  }, suffix), period && /*#__PURE__*/_react["default"].createElement(EnhancePrice, {
-    as: "sub"
-  }, period)), extra, /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), children);
+module.exports = __toCommonJS(Content_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_themeReader = __toESM(require("../../../Theme/helpers/themeReader"));
+var import_Text = __toESM(require("../../../Text"));
+var import_Content = __toESM(require("../Card/Content"));
+var import_Subtitle = __toESM(require("./Subtitle"));
+var import_Divider = __toESM(require("../../../Divider"));
+const Wrapper = (0, import_styled_components.default)(import_Content.default)`
+  flex: 1;
+`;
+const Title = (0, import_styled_components.default)(import_Text.default.Medium)`
+  ${(props) => {
+  const {
+    components: { card, cardweb },
+    colors,
+    radii
+  } = (0, import_themeReader.default)(props);
+  const { badgeColor } = props;
+  const badgeStyle = badgeColor && import_styled_components.css`
+        ::before {
+          position: absolute;
+          left: 0;
+          content: '';
+          height: 24px;
+          width: 4px;
+          background-color: ${colors[props.badgeColor]};
+          border-top-right-radius: ${radii.xsmall}px;
+          border-bottom-right-radius: ${radii.xsmall}px;
+        }
+      `;
+  return import_styled_components.css`
+      color: ${card.plan.title.color};
+      margin-bottom: ${cardweb.plan.title.margin.bottom}px;
+      line-height: ${cardweb.plan.title.lineHeight}px;
+      ${badgeStyle}
+    `;
+}}
+`;
+const Description = (0, import_styled_components.default)(import_Text.default.Small)`
+  height: 40px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  color: ${import_themeReader.default.components.card.plan.description.color};
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-overflow: -o-ellipsis-lastline;
+`;
+const Price = import_styled_components.default.div`
+  display: flex;
+
+  ${(props) => {
+  const {
+    components: { cardweb }
+  } = (0, import_themeReader.default)(props);
+  return import_styled_components.css`
+      margin-bottom: ${cardweb.plan.price.margin.bottom}px;
+    `;
+}}
+`;
+const EnhancePrice = (0, import_styled_components.default)(import_Text.default.Medium)`
+  align-self: center;
+`;
+const PlanCardContent = (_a) => {
+  var _b = _a, {
+    title,
+    badgeColor,
+    subtitle,
+    description,
+    currency,
+    suffix,
+    price,
+    period,
+    extra,
+    children
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "badgeColor",
+    "subtitle",
+    "description",
+    "currency",
+    "suffix",
+    "price",
+    "period",
+    "extra",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues({}, rest), { children: [
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Subtitle.default, { children: subtitle }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { badgeColor, children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, { children: description }),
+    !!price && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Price, { children: [
+      currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, { as: "sup", children: currency }),
+      price && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, { as: "strong", children: price }),
+      suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.H4, { as: "sup", children: suffix }),
+      period && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EnhancePrice, { as: "sub", children: period })
+    ] }),
+    extra,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.default, {}),
+    children
+  ] }));
 };
-
 PlanCardContent.propTypes = {
   /** plan name */
-  title: _propTypes.string.isRequired,
-
+  title: import_prop_types.string.isRequired,
   /** currency of the current country */
-  currency: _propTypes.string,
-
+  currency: import_prop_types.string,
   /** suffix currency of the current country */
-  suffix: _propTypes.string,
-  price: _propTypes.string,
-
+  suffix: import_prop_types.string,
+  price: import_prop_types.string,
   /** period that this price will be charged  */
-  period: _propTypes.string,
-  description: _propTypes.string,
-  subtitle: _propTypes.string,
-  extra: _propTypes.node,
-  children: _propTypes.node,
-
+  period: import_prop_types.string,
+  description: import_prop_types.string,
+  subtitle: import_prop_types.string,
+  extra: import_prop_types.node,
+  children: import_prop_types.node,
   /** color of the badge attached to the title  */
-  badgeColor: _propTypes.string
+  badgeColor: import_prop_types.string
 };
 PlanCardContent.defaultProps = {
   children: null,
@@ -115,6 +194,5 @@ PlanCardContent.defaultProps = {
   extra: null,
   badgeColor: null
 };
-PlanCardContent.displayName = 'PlanCard.Content';
-var _default = PlanCardContent;
-exports["default"] = _default;
+PlanCardContent.displayName = "PlanCard.Content";
+var Content_default = PlanCardContent;

package/cjs/Card/web/PlanCard/List.js

@@ -1,103 +1,187 @@
 "use strict";
-
-exports.__esModule = true;
-exports.ListItem = exports.List = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = require("prop-types");
-
-var _Text = _interopRequireDefault(require("../../../Text"));
-
-var _themeReader = _interopRequireDefault(require("../../../Theme/helpers/themeReader"));
-
-var _Box = _interopRequireDefault(require("../../../Box"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var _theme$components = _themeReader["default"].components,
-    card = _theme$components.card,
-    cardweb = _theme$components.cardweb;
-var truncateStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-
-var List = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin: ", "px 0 0;\n  padding: 0;\n\n  list-style: none;\n"])), cardweb.plan.list.margin.top);
-
-exports.List = List;
-
-var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n  min-height: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right, function (props) {
-  return props.theme.yoga.spacing.medium;
-});
-
-var Item = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  :not(:last-child) {\n    margin-bottom: ", "px;\n  }\n"])), card.plan.list.item.margin.bottom);
-
-var Wrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  ", "\n\n  svg {\n    flex-shrink: 0;\n  }\n"])), function (props) {
-  return props.as === 'button' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: none;\n      padding: 0;\n      background: transparent;\n      cursor: pointer;\n      text-align: start;\n    "])));
+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 __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 List_exports = {};
+__export(List_exports, {
+  List: () => List,
+  ListItem: () => ListItem
 });
-var ItemText = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  height: 100%;\n  vertical-align: middle;\n\n  color: ", ";\n\n  ", "\n"])), card.plan.list.item.font.color, function (props) {
-  return props.truncate && truncateStyle;
+module.exports = __toCommonJS(List_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_Text = __toESM(require("../../../Text"));
+var import_themeReader = __toESM(require("../../../Theme/helpers/themeReader"));
+var import_Box = __toESM(require("../../../Box"));
+const { card, cardweb } = import_themeReader.default.components;
+const truncateStyle = import_styled_components.css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const List = import_styled_components.default.ul`
+  margin: ${cardweb.plan.list.margin.top}px 0 0;
+  padding: 0;
+
+  list-style: none;
+`;
+const IconWrapper = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${cardweb.plan.list.item.icon.margin.right}px;
+  min-height: ${(props) => props.theme.yoga.spacing.medium}px;
+`;
+const Item = import_styled_components.default.li`
+  :not(:last-child) {
+    margin-bottom: ${card.plan.list.item.margin.bottom}px;
+  }
+`;
+const Wrapper = (0, import_styled_components.default)(import_Box.default)`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  ${(props) => props.as === "button" && import_styled_components.css`
+      border: none;
+      padding: 0;
+      background: transparent;
+      cursor: pointer;
+      text-align: start;
+    `}
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+const ItemText = (0, import_styled_components.default)(import_Text.default.Small)`
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+
+  color: ${card.plan.list.item.font.color};
+
+  ${(props) => props.truncate && truncateStyle}
+`;
+const Button = import_styled_components.default.button`
+  display: block;
+  padding: 0;
+  margin-top: ${card.plan.list.button.margin.top}px;
+
+  width: 100%;
+
+  letter-spacing: normal;
+
+  background-color: transparent;
+  border: none;
+
+  font-family: ${import_themeReader.default.baseFont.family};
+  font-size: ${card.plan.list.button.font.size}px;
+  font-weight: ${card.plan.list.button.font.weight};
+  color: ${card.plan.list.button.font.color};
+
+  cursor: pointer;
+  text-decoration: none;
+  text-align: left;
+  outline: none;
+
+  ${truncateStyle}
+`;
+const ListItem = (0, import_styled_components.withTheme)((props) => {
+  const {
+    text,
+    truncate,
+    icon: Icon,
+    buttonProps,
+    theme: yogaTheme,
+    children,
+    onClick
+  } = props;
+  const wrapperProps = onClick ? { as: "button", type: "button", onClick } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Item, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues({}, wrapperProps), { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Box.default, { display: "flex", alignItems: "flex-start", width: "100%", children: [
+        Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { children: (0, import_react.isValidElement)(Icon) ? Icon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Icon,
+          {
+            width: 16,
+            height: 16,
+            fill: yogaTheme.yoga.colors.text.primary
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemText, { as: "span", truncate, children: text })
+      ] }),
+      children
+    ] })),
+    Boolean(Object.keys(buttonProps).length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, __spreadValues({}, buttonProps))
+  ] });
 });
-
-var Button = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  display: block;\n  padding: 0;\n  margin-top: ", "px;\n\n  width: 100%;\n\n  letter-spacing: normal;\n\n  background-color: transparent;\n  border: none;\n\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  color: ", ";\n\n  cursor: pointer;\n  text-decoration: none;\n  text-align: left;\n  outline: none;\n\n  ", "\n"])), card.plan.list.button.margin.top, _themeReader["default"].baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);
-
-var ListItem = (0, _styledComponents.withTheme)(function (props) {
-  var text = props.text,
-      truncate = props.truncate,
-      Icon = props.icon,
-      buttonProps = props.buttonProps,
-      yogaTheme = props.theme,
-      children = props.children,
-      onClick = props.onClick;
-  var wrapperProps = onClick ? {
-    as: 'button',
-    type: 'button',
-    onClick: onClick
-  } : {};
-  return /*#__PURE__*/_react["default"].createElement(Item, null, /*#__PURE__*/_react["default"].createElement(Wrapper, wrapperProps, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    display: "flex",
-    alignItems: "flex-start",
-    width: "100%"
-  }, Icon && /*#__PURE__*/_react["default"].createElement(IconWrapper, null, /*#__PURE__*/(0, _react.isValidElement)(Icon) ? Icon : /*#__PURE__*/_react["default"].createElement(Icon, {
-    width: 16,
-    height: 16,
-    fill: yogaTheme.yoga.colors.text.primary
-  })), /*#__PURE__*/_react["default"].createElement(ItemText, {
-    as: "span",
-    truncate: truncate
-  }, text)), children), Boolean(Object.keys(buttonProps).length) && /*#__PURE__*/_react["default"].createElement(Button, buttonProps));
-});
-exports.ListItem = ListItem;
-List.displayName = 'PlanCard.List';
-ListItem.displayName = 'PlanCard.ListItem';
-Button.displayName = 'PlanCard.ListButton';
+List.displayName = "PlanCard.List";
+ListItem.displayName = "PlanCard.ListItem";
+Button.displayName = "PlanCard.ListButton";
 ListItem.propTypes = {
-  text: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]).isRequired,
-
+  text: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.node]).isRequired,
   /** an icon to be displayed on the begin of the item */
-  icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func]),
-
+  icon: (0, import_prop_types.oneOfType)([import_prop_types.node, import_prop_types.func]),
   /** if provided displays a button below the item text. It accepts all button
    * element props */
-  buttonProps: (0, _propTypes.shape)({}),
-
+  buttonProps: (0, import_prop_types.shape)({}),
   /** if provided makes the item clickable */
-  onClick: _propTypes.func,
-  children: _propTypes.node,
-  truncate: _propTypes.bool
+  onClick: import_prop_types.func,
+  children: import_prop_types.node,
+  truncate: import_prop_types.bool
 };
 ListItem.defaultProps = {
   truncate: true,
-  icon: undefined,
+  icon: void 0,
   buttonProps: {},
-  onClick: undefined,
-  children: undefined
-};
+  onClick: void 0,
+  children: void 0
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  List,
+  ListItem
+});

package/cjs/Card/web/PlanCard/List.test.js

@@ -0,0 +1,62 @@
+"use strict";
+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 __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_react2 = require("@testing-library/react");
+var import_Theme = __toESM(require("../../../Theme"));
+var import_List = require("./List");
+const text = "2.900 gyms and studios";
+function setup(props) {
+  (0, import_react2.render)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_List.ListItem, __spreadValues({ text }, props)) })
+  );
+}
+describe("<ListItem />", () => {
+  it("should display text truncated", () => {
+    setup();
+    expect(import_react2.screen.getByText(text)).toMatchSnapshot();
+  });
+  it("should not display text truncated when truncate prop is false", () => {
+    setup({ truncate: false });
+    expect(import_react2.screen.getByText(text)).toMatchSnapshot();
+  });
+  it("should display children element", () => {
+    setup({ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {}) });
+    expect(import_react2.screen.getByRole("list")).toBeInTheDocument();
+  });
+});