@gympass/yoga 7.87.1 → 7.88.0

package/esm/Card/web/EventCard/EventCard.js

@@ -1,61 +1,175 @@
-var _excluded = ["event", "date", "theme"];
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled, { withTheme, css } from "styled-components";
+import { shape, string } from "prop-types";
+import { Time } from "@gympass/yoga-icons";
+import Card from "../Card";
+import { TextRenderer, Text } from "../../../Text/web/Text";
+const Event = styled(Card)`
+  display: flex;
+  flex-direction: row;
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+`;
+const EventInfo = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        card: { event }
+      }
+    }
+  }
+}) => css`
+    padding: ${event.info.padding.top}px ${event.info.padding.right}px
+      ${event.info.padding.bottom}px ${event.info.padding.left}px;
 
-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; }
+    ${TextRenderer}, ${Text.Small} {
+      display: -webkit-inline-box;
+      overflow: hidden;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      text-overflow: -o-ellipsis-lastline;
+    }
+
+    ${TextRenderer} {
+      height: ${event.info.name.height}px;
+      margin-bottom: ${event.info.name.marginBottom}px;
 
-import React from 'react';
-import styled, { withTheme, css } from 'styled-components';
-import { shape, string } from 'prop-types';
-import { Time } from '@gympass/yoga-icons';
-import Card from '../Card';
-import { TextRenderer, Text } from '../../../Text/web/Text';
-var Event = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n\n  width: 100%;\n  padding: 0;\n  overflow: hidden;\n"])));
-var EventInfo = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var event = _ref.theme.yoga.components.card.event;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    padding: ", "px ", "px\n      ", "px ", "px;\n\n    ", ", ", " {\n      display: -webkit-inline-box;\n      overflow: hidden;\n\n      -webkit-line-clamp: 1;\n      -webkit-box-orient: vertical;\n      text-overflow: ellipsis;\n      text-overflow: -o-ellipsis-lastline;\n    }\n\n    ", " {\n      height: ", "px;\n      margin-bottom: ", "px;\n\n      font-weight: ", ";\n      font-size: ", "px;\n    }\n\n    ", " {\n      height: ", "px;\n      margin-bottom: ", "px;\n\n      color: ", ";\n      font-weight: ", ";\n    }\n  "])), event.info.padding.top, event.info.padding.right, event.info.padding.bottom, event.info.padding.left, TextRenderer, Text.Small, TextRenderer, event.info.name.height, event.info.name.marginBottom, event.info.name.fontWeight, event.info.name.fontSize, Text.Small, event.info.place.height, event.info.place.marginBottom, event.info.place.color, event.info.name.fontWeight);
-});
-var EventTime = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var DateInfo = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var event = _ref2.theme.yoga.components.card.event;
-  return "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    width: 56px;\n    background-color: " + event.date.backgroundColor + ";\n  ";
-});
-var DayOfWeek = styled(Text.Small)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var event = _ref3.theme.yoga.components.card.event;
-  return "\n    margin-bottom: " + event.date.dayOfWeek.marginBottom + "px;\n\n    font-weight: " + event.date.dayOfWeek.fontWeight + ";\n  ";
-});
-var Month = styled(Text.Small)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
-  var event = _ref4.theme.yoga.components.card.event;
-  return "\n    font-weight: " + event.date.month.fontWeight + ";\n  ";
-});
+      font-weight: ${event.info.name.fontWeight};
+      font-size: ${event.info.name.fontSize}px;
+    }
 
-var EventCard = function EventCard(_ref5) {
-  var event = _ref5.event,
-      date = _ref5.date,
-      icon = _ref5.theme.yoga.components.card.event.icon,
-      rest = _objectWithoutPropertiesLoose(_ref5, _excluded);
+    ${Text.Small} {
+      height: ${event.info.place.height}px;
+      margin-bottom: ${event.info.place.marginBottom}px;
 
-  return /*#__PURE__*/React.createElement(Event, rest, /*#__PURE__*/React.createElement(DateInfo, null, /*#__PURE__*/React.createElement(DayOfWeek, {
-    inverted: true
-  }, date.dayOfWeek), /*#__PURE__*/React.createElement(Text.H5, {
-    inverted: true
-  }, date.day), /*#__PURE__*/React.createElement(Month, {
-    inverted: true
-  }, date.month)), /*#__PURE__*/React.createElement(EventInfo, null, /*#__PURE__*/React.createElement(Text, {
-    as: "h3",
-    title: event.name
-  }, event.name), /*#__PURE__*/React.createElement(Text.Small, {
-    title: event.place
-  }, event.place), /*#__PURE__*/React.createElement(EventTime, null, /*#__PURE__*/React.createElement(Time, {
-    fill: icon.fill,
-    style: {
-      marginRight: 5
+      color: ${event.info.place.color};
+      font-weight: ${event.info.name.fontWeight};
     }
-  }), /*#__PURE__*/React.createElement(Text.Tiny, null, event.time))));
-};
+  `}
+`;
+const EventTime = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const DateInfo = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        card: { event }
+      }
+    }
+  }
+}) => `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    width: 56px;
+    background-color: ${event.date.backgroundColor};
+  `}
+`;
+const DayOfWeek = styled(Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        card: { event }
+      }
+    }
+  }
+}) => `
+    margin-bottom: ${event.date.dayOfWeek.marginBottom}px;
 
+    font-weight: ${event.date.dayOfWeek.fontWeight};
+  `}
+`;
+const Month = styled(Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        card: { event }
+      }
+    }
+  }
+}) => `
+    font-weight: ${event.date.month.fontWeight};
+  `}
+`;
+const EventCard = (_a) => {
+  var _b = _a, {
+    event,
+    date,
+    theme: {
+      yoga: {
+        components: {
+          card: {
+            event: { icon }
+          }
+        }
+      }
+    }
+  } = _b, rest = __objRest(_b, [
+    "event",
+    "date",
+    "theme"
+  ]);
+  return /* @__PURE__ */ jsxs(Event, __spreadProps(__spreadValues({}, rest), { children: [
+    /* @__PURE__ */ jsxs(DateInfo, { children: [
+      /* @__PURE__ */ jsx(DayOfWeek, { inverted: true, children: date.dayOfWeek }),
+      /* @__PURE__ */ jsx(Text.H5, { inverted: true, children: date.day }),
+      /* @__PURE__ */ jsx(Month, { inverted: true, children: date.month })
+    ] }),
+    /* @__PURE__ */ jsxs(EventInfo, { children: [
+      /* @__PURE__ */ jsx(Text, { as: "h3", title: event.name, children: event.name }),
+      /* @__PURE__ */ jsx(Text.Small, { title: event.place, children: event.place }),
+      /* @__PURE__ */ jsxs(EventTime, { children: [
+        /* @__PURE__ */ jsx(Time, { fill: icon.fill, style: { marginRight: 5 } }),
+        /* @__PURE__ */ jsx(Text.Tiny, { children: event.time })
+      ] })
+    ] })
+  ] }));
+};
 EventCard.propTypes = {
   /** event information: { name (string), place (string), time (string) } */
   event: shape({
@@ -63,7 +177,6 @@ EventCard.propTypes = {
     place: string,
     time: string
   }).isRequired,
-
   /** date information: { day (string), dayOfWeek (string), month (string) } */
   date: shape({
     day: string,
@@ -71,5 +184,8 @@ EventCard.propTypes = {
     month: string
   }).isRequired
 };
-EventCard.displayName = 'EventCard';
-export default withTheme(EventCard);
+EventCard.displayName = "EventCard";
+var EventCard_default = withTheme(EventCard);
+export {
+  EventCard_default as default
+};

package/esm/Card/web/EventCard/EventCard.test.js

@@ -1,27 +1,25 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '../../..';
-import EventCard from '.';
-var event = {
-  name: 'Yoga Class',
-  place: 'Gympass',
-  time: '19 am'
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import { ThemeProvider } from "../../..";
+import EventCard from ".";
+const event = {
+  name: "Yoga Class",
+  place: "Gympass",
+  time: "19 am"
 };
-var date = {
-  day: '19',
-  weekday: 'thu',
-  month: 'dec'
+const date = {
+  day: "19",
+  weekday: "thu",
+  month: "dec"
 };
-describe('<Card />', function () {
-  describe('Snapshots', function () {
-    it('should match snapshot with default EventCard', function () {
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(EventCard, {
-        event: event,
-        date: date
-      }))),
-          container = _render.container;
-
+describe("<Card />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot with default EventCard", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(EventCard, { event, date }) })
+      );
       expect(container).toMatchSnapshot();
     });
   });
-});
+});

package/esm/Card/web/EventCard/index.js

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

package/esm/Card/web/PlanCard/Actions.js

@@ -1,22 +1,27 @@
-var _templateObject, _templateObject2, _templateObject3;
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import styled from 'styled-components';
-import Actions from '../Card/Actions';
-import Button from '../../../Button';
-import theme from '../../../Theme/helpers/themeReader';
-var _theme$components = theme.components,
-    card = _theme$components.card,
-    cardweb = _theme$components.cardweb;
-var PlanCardButton = styled(Button).attrs({
+import styled from "styled-components";
+import Actions from "../Card/Actions";
+import Button from "../../../Button";
+import theme from "../../../Theme/helpers/themeReader";
+const {
+  components: { card, cardweb }
+} = theme;
+const PlanCardButton = styled(Button).attrs({
   full: true
-})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
-var PlanCardButtonText = styled(Button.Text).attrs({
+})``;
+const PlanCardButtonText = styled(Button.Text).attrs({
   full: true
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"])), cardweb.plan.actions.buttonText.margin.top, card.plan.actions.buttonText.margin.bottom);
-var PlanCardActions = styled(Actions)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n"])), theme.components.cardweb.plan.actions.margin.top);
-PlanCardActions.displayName = 'PlanCard.Actions';
-PlanCardButton.displayName = 'PlanCard.Button';
-PlanCardButtonText.displayName = 'PlanCard.ButtonText';
-export { PlanCardActions as Actions, PlanCardButton as Button, PlanCardButtonText as ButtonText };
+})`
+  margin-top: ${cardweb.plan.actions.buttonText.margin.top}px;
+  margin-bottom: ${card.plan.actions.buttonText.margin.bottom}px;
+`;
+const PlanCardActions = styled(Actions)`
+  margin-top: ${theme.components.cardweb.plan.actions.margin.top}px;
+`;
+PlanCardActions.displayName = "PlanCard.Actions";
+PlanCardButton.displayName = "PlanCard.Button";
+PlanCardButtonText.displayName = "PlanCard.ButtonText";
+export {
+  PlanCardActions as Actions,
+  PlanCardButton as Button,
+  PlanCardButtonText as ButtonText
+};

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

@@ -1,85 +1,154 @@
-var _excluded = ["title", "badgeColor", "subtitle", "description", "currency", "suffix", "price", "period", "extra", "children"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { string, node } from 'prop-types';
-import theme from '../../../Theme/helpers/themeReader';
-import Text from '../../../Text';
-import Content from '../Card/Content';
-import Subtitle from './Subtitle';
-import Divider from '../../../Divider';
-var Wrapper = styled(Content)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
-var Title = styled(Text.Medium)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
-  var _theme = theme(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 && 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 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 = styled(Text.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"])), theme.components.card.plan.description.color);
-var Price = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", "\n"])), function (props) {
-  var _theme2 = theme(props),
-      cardweb = _theme2.components.cardweb;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled, { css } from "styled-components";
+import { string, node } from "prop-types";
+import theme from "../../../Theme/helpers/themeReader";
+import Text from "../../../Text";
+import Content from "../Card/Content";
+import Subtitle from "./Subtitle";
+import Divider from "../../../Divider";
+const Wrapper = styled(Content)`
+  flex: 1;
+`;
+const Title = styled(Text.Medium)`
+  ${(props) => {
+  const {
+    components: { card, cardweb },
+    colors,
+    radii
+  } = theme(props);
+  const { badgeColor } = props;
+  const badgeStyle = badgeColor && 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 css`
+      color: ${card.plan.title.color};
+      margin-bottom: ${cardweb.plan.title.margin.bottom}px;
+      line-height: ${cardweb.plan.title.lineHeight}px;
+      ${badgeStyle}
+    `;
+}}
+`;
+const Description = styled(Text.Small)`
+  height: 40px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", "px;\n    "])), cardweb.plan.price.margin.bottom);
-});
-var EnhancePrice = styled(Text.Medium)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  align-self: center;\n"])));
+  color: ${theme.components.card.plan.description.color};
 
-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);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-overflow: -o-ellipsis-lastline;
+`;
+const Price = styled.div`
+  display: flex;
 
-  return /*#__PURE__*/React.createElement(Wrapper, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, {
-    badgeColor: badgeColor
-  }, title), description && /*#__PURE__*/React.createElement(Description, null, description), !!price && /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Text.H4, {
-    as: "sup"
-  }, currency), price && /*#__PURE__*/React.createElement(Text.H4, {
-    as: "strong"
-  }, price), suffix && /*#__PURE__*/React.createElement(Text.H4, {
-    as: "sup"
-  }, suffix), period && /*#__PURE__*/React.createElement(EnhancePrice, {
-    as: "sub"
-  }, period)), extra, /*#__PURE__*/React.createElement(Divider, null), children);
+  ${(props) => {
+  const {
+    components: { cardweb }
+  } = theme(props);
+  return css`
+      margin-bottom: ${cardweb.plan.price.margin.bottom}px;
+    `;
+}}
+`;
+const EnhancePrice = styled(Text.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__ */ jsxs(Wrapper, __spreadProps(__spreadValues({}, rest), { children: [
+    subtitle && /* @__PURE__ */ jsx(Subtitle, { children: subtitle }),
+    title && /* @__PURE__ */ jsx(Title, { badgeColor, children: title }),
+    description && /* @__PURE__ */ jsx(Description, { children: description }),
+    !!price && /* @__PURE__ */ jsxs(Price, { children: [
+      currency && /* @__PURE__ */ jsx(Text.H4, { as: "sup", children: currency }),
+      price && /* @__PURE__ */ jsx(Text.H4, { as: "strong", children: price }),
+      suffix && /* @__PURE__ */ jsx(Text.H4, { as: "sup", children: suffix }),
+      period && /* @__PURE__ */ jsx(EnhancePrice, { as: "sub", children: period })
+    ] }),
+    extra,
+    /* @__PURE__ */ jsx(Divider, {}),
+    children
+  ] }));
 };
-
 PlanCardContent.propTypes = {
   /** plan name */
   title: string.isRequired,
-
   /** currency of the current country */
   currency: string,
-
   /** suffix currency of the current country */
   suffix: string,
   price: string,
-
   /** period that this price will be charged  */
   period: string,
   description: string,
   subtitle: string,
   extra: node,
   children: node,
-
   /** color of the badge attached to the title  */
   badgeColor: string
 };
@@ -94,5 +163,8 @@ PlanCardContent.defaultProps = {
   extra: null,
   badgeColor: null
 };
-PlanCardContent.displayName = 'PlanCard.Content';
-export default PlanCardContent;
+PlanCardContent.displayName = "PlanCard.Content";
+var Content_default = PlanCardContent;
+export {
+  Content_default as default
+};