@gympass/yoga 7.88.0 → 7.88.2

package/esm/Card/native/GymCard/CheckIn/CheckIn.test.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import ThemeProvider from "../../../../Theme";
+import GymCard from "..";
+describe("<GymCard.CheckIn />", () => {
+  describe("Snapshots", () => {
+    const data = {
+      name: "Foo",
+      distance: "100 m",
+      rating: 5,
+      address: "Bar"
+    };
+    it("should match snapshot without avatar", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          GymCard.CheckIn,
+          {
+            name: data.name,
+            distance: data.distance,
+            rating: data.rating,
+            address: data.address
+          }
+        ) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with avatar", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          GymCard.CheckIn,
+          {
+            avatar: {
+              uri: "data:image/png;base64,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"
+            },
+            name: data.name,
+            distance: data.distance,
+            rating: data.rating,
+            address: data.address
+          }
+        ) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/native/GymCard/CheckIn/Content.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import Card from "../../Card";
+const Content = styled(Card.Content)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        card: {
+          gym: { checkIn }
+        }
+      }
+    }
+  }
+}) => `
+    margin-top: ${checkIn.content.margin.top}px;
+  `}
+`;
+var Content_default = Content;
+export {
+  Content_default as default
+};

package/esm/Card/native/GymCard/CheckIn/Header.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import Card from "../../Card";
+const Header = styled(Card.Header)`
+  flex-direction: row;
+  justify-content: space-between;
+
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        card: {
+          gym: { checkIn }
+        }
+      }
+    }
+  }
+}) => `
+    margin-bottom: ${checkIn.header.margin.bottom}px;
+  `}
+`;
+var Header_default = Header;
+export {
+  Header_default as default
+};

package/esm/Card/native/GymCard/CheckIn/index.js

@@ -0,0 +1,5 @@
+import CheckIn from "./CheckIn";
+var CheckIn_default = CheckIn;
+export {
+  CheckIn_default as default
+};

package/esm/Card/native/GymCard/index.js

@@ -0,0 +1,8 @@
+import CheckIn from "./CheckIn";
+const GymCard = {
+  CheckIn
+};
+var GymCard_default = GymCard;
+export {
+  GymCard_default as default
+};

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

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import Actions from "../Card/Actions";
+import Button from "../../../Button";
+import theme from "../../../Theme/helpers/themeReader";
+const {
+  components: { cardnative, card }
+} = theme;
+const PlanCardButton = styled(Button).attrs({
+  full: true
+})``;
+const PlanCardButtonText = styled(Button.Text).attrs({
+  full: true
+})`
+  margin-top: ${cardnative.plan.actions.buttonText.margin.top}px;
+  margin-bottom: ${card.plan.actions.buttonText.margin.bottom}px;
+`;
+const PlanCardActions = styled(Actions)`
+  margin-top: ${cardnative.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/native/PlanCard/Content.js

@@ -0,0 +1,134 @@
+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 Content from "../Card/Content";
+import Text from "../../../Text";
+import theme from "../../../Theme/helpers/themeReader";
+import Subtitle from "./Subtitle";
+import Divider from "../../../Divider";
+const Title = styled(Text.Medium)`
+  ${(props) => {
+  const {
+    components: { cardnative, card }
+  } = theme(props);
+  return css`
+      color: ${card.plan.title.color};
+      margin-bottom: ${cardnative.plan.title.margin.bottom}px;
+      line-height: ${cardnative.plan.title.lineHeight}px;
+    `;
+}}
+`;
+const Description = styled(Text.Small)`
+  height: 40px;
+
+  color: ${theme.components.card.plan.description.color};
+`;
+const Price = styled.View`
+  flex-direction: row;
+
+  ${(props) => {
+  const {
+    components: {
+      cardnative: { plan }
+    }
+  } = theme(props);
+  return css`
+      margin-bottom: ${plan.price.margin.bottom}px;
+    `;
+}}
+`;
+const EnhancePrice = styled.View`
+  align-self: center;
+`;
+const PlanCardContent = (_a) => {
+  var _b = _a, {
+    title,
+    subtitle,
+    description,
+    currency,
+    suffix,
+    price,
+    period,
+    children
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "subtitle",
+    "description",
+    "currency",
+    "suffix",
+    "price",
+    "period",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(Content, __spreadProps(__spreadValues({}, rest), { children: [
+    subtitle && /* @__PURE__ */ jsx(Subtitle, { children: subtitle }),
+    title && /* @__PURE__ */ jsx(Title, { children: title }),
+    description && /* @__PURE__ */ jsx(Description, { numberOfLines: 2, children: description }),
+    /* @__PURE__ */ jsxs(Price, { children: [
+      currency && /* @__PURE__ */ jsx(Text.H4, { children: currency }),
+      price && /* @__PURE__ */ jsx(Text.H4, { children: price }),
+      suffix && /* @__PURE__ */ jsx(Text.H4, { children: suffix }),
+      period && /* @__PURE__ */ jsx(EnhancePrice, { children: /* @__PURE__ */ jsx(Text.Medium, { children: `${period}` }) })
+    ] }),
+    /* @__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.isRequired,
+  /** period that this price will be charged  */
+  period: string.isRequired,
+  description: string,
+  subtitle: string,
+  children: node
+};
+PlanCardContent.defaultProps = {
+  children: null,
+  description: null,
+  subtitle: null,
+  currency: null,
+  suffix: null
+};
+PlanCardContent.displayName = "PlanCard.Content";
+var Content_default = PlanCardContent;
+export {
+  Content_default as default
+};

package/esm/Card/native/PlanCard/List.js

@@ -0,0 +1,113 @@
+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, { isValidElement } from "react";
+import styled, { withTheme } from "styled-components";
+import { TouchableWithoutFeedback } from "react-native";
+import { string, node, shape, oneOfType, func } from "prop-types";
+import get from "lodash.get";
+import Text from "../../../Text";
+import Icon from "../../../Icon";
+import theme from "../../../Theme/helpers/themeReader";
+const { card, cardnative } = theme.components;
+const List = styled.View`
+  margin-top: ${cardnative.plan.list.margin.top}px;
+`;
+const Item = styled.View`
+  margin-bottom: ${card.plan.list.item.margin.bottom}px;
+`;
+const Wrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+const IconWrapper = styled.View`
+  margin-right: ${cardnative.plan.list.item.icon.margin.right}px;
+`;
+const Button = styled.View`
+  margin-top: ${card.plan.list.button.margin.top}px;
+`;
+const ButtonText = styled(Text.Medium)`
+  font-size: ${card.plan.list.button.font.size}px;
+  color: ${card.plan.list.button.font.color};
+`;
+const ItemText = styled(Text.Small)`
+  color: ${({ color }) => color || card.plan.list.item.font.color};
+`;
+const ListItem = withTheme(
+  (_a) => {
+    var {
+      text,
+      variant,
+      theme: yogaTheme,
+      icon,
+      buttonProps: _b
+    } = _a, _c = _b, { children } = _c, buttonProps = __objRest(_c, ["children"]);
+    const itemColor = get(yogaTheme.yoga.colors, variant);
+    if (variant && !itemColor)
+      console.warn(
+        `Invalid token ${variant}, you can use ${JSON.stringify(
+          Object.keys(yogaTheme.yoga.colors)
+        )}`
+      );
+    return /* @__PURE__ */ jsxs(Item, { children: [
+      /* @__PURE__ */ jsxs(Wrapper, { children: [
+        icon && /* @__PURE__ */ jsx(IconWrapper, { children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { as: icon, size: "small", fill: variant || "text.primary" }) }),
+        /* @__PURE__ */ jsx(ItemText, { color: itemColor, children: text })
+      ] }),
+      Boolean(Object.keys(buttonProps).length) && /* @__PURE__ */ jsx(TouchableWithoutFeedback, __spreadProps(__spreadValues({}, buttonProps), { children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(ButtonText, { children }) }) }))
+    ] });
+  }
+);
+List.displayName = "PlanCard.List";
+ListItem.displayName = "PlanCard.ListItem";
+Button.displayName = "PlanCard.ListButton";
+ListItem.propTypes = {
+  text: string.isRequired,
+  /** an icon to be displayed on the begin of the item */
+  icon: oneOfType([node, func]),
+  /** if provided displays a button below the item text. It accepts all button
+   * element props */
+  buttonProps: shape({}),
+  /** if provided a color variant, like "vibin", "hope", "energy" the icon and
+   * the item text will be rendered on this color.
+   */
+  variant: string
+};
+ListItem.defaultProps = {
+  icon: void 0,
+  buttonProps: {},
+  variant: void 0
+};
+export {
+  List,
+  ListItem
+};

package/esm/Card/native/PlanCard/PlanCard.js

@@ -0,0 +1,114 @@
+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 { node, oneOf } from "prop-types";
+import Box from "../../../Box";
+const PLAN_LINE_HEIGHT = 8;
+const Plan = styled(Box)`
+  max-width: 312px;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  ${(props) => {
+  const theme = props.theme.yoga;
+  const { plan } = theme.components.card;
+  return css`
+      padding: ${plan.padding.top}px ${plan.padding.right}px
+        ${plan.padding.bottom}px ${plan.padding.left}px;
+      border: ${theme.borders.small}px solid ${theme.colors.light};
+      border-radius: ${plan.radius}px;
+
+      background-color: ${theme.colors.white};
+    `;
+}}
+`;
+const Border = styled.View`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  height: 8px;
+  background-color: ${({
+  variant,
+  theme: {
+    yoga: {
+      colors: { deepPurple, [variant]: color = deepPurple }
+    }
+  }
+}) => color};
+`;
+const PlanCard = (_a) => {
+  var _b = _a, { children, variant } = _b, rest = __objRest(_b, ["children", "variant"]);
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Plan, __spreadProps(__spreadValues({}, rest), { children: [
+    /* @__PURE__ */ jsx(Border, { variant }),
+    children
+  ] })) });
+};
+PlanCard.propTypes = {
+  children: node,
+  /** style the card border top color following the theme (primary, secondary,
+   * vibin, hope, energy, relax, peace, verve, uplift, deepPurple, deep,
+   * stamina, dark, medium, light, clear, white) */
+  variant: oneOf([
+    "primary",
+    "secondary",
+    "vibin",
+    "hope",
+    "energy",
+    "relax",
+    "peace",
+    "verve",
+    "uplift",
+    "deepPurple",
+    "stamina",
+    "dark",
+    "medium",
+    "deep",
+    "light",
+    "clear",
+    "white"
+  ])
+};
+PlanCard.defaultProps = {
+  children: void 0,
+  variant: "deepPurple"
+};
+PlanCard.displayName = "PlanCard";
+var PlanCard_default = PlanCard;
+export {
+  PLAN_LINE_HEIGHT,
+  PlanCard_default as default
+};

package/esm/Card/native/PlanCard/PlanCard.test.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Star, MapPin } from "@gympass/yoga-icons";
+import { ThemeProvider, Button, Icon } from "../../..";
+import PlanCard from ".";
+describe("<PlanCard />", () => {
+  const buttonOnPressMock = jest.fn();
+  const renderPlan = () => render(
+    /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(PlanCard, { children: [
+      /* @__PURE__ */ jsx(PlanCard.Tag, { variant: "informative", children: "Recommended Plan" }),
+      /* @__PURE__ */ jsxs(
+        PlanCard.Content,
+        {
+          subtitle: "plan",
+          title: "Basic",
+          currency: "$",
+          price: "99.90",
+          period: "/month",
+          children: [
+            /* @__PURE__ */ jsx(PlanCard.Subtitle, { children: "Get access to" }),
+            /* @__PURE__ */ jsxs(PlanCard.List, { children: [
+              /* @__PURE__ */ jsx(
+                PlanCard.ListItem,
+                {
+                  icon: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      as: MapPin,
+                      height: "small",
+                      width: "small",
+                      stroke: "medium"
+                    }
+                  ),
+                  text: "gyms and studios"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PlanCard.ListItem,
+                {
+                  icon: Star,
+                  text: "list item",
+                  buttonProps: {
+                    children: "button",
+                    onPress: buttonOnPressMock
+                  }
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(PlanCard.Actions, { children: /* @__PURE__ */ jsx(Button, { full: true, children: "Select this plan" }) })
+    ] }) })
+  );
+  describe("Events", () => {
+    it("should call onPress when ListItem has a button", () => {
+      const { getByText } = renderPlan();
+      fireEvent.press(getByText("button"));
+      expect(buttonOnPressMock).toHaveBeenCalled();
+    });
+  });
+  describe("Snapshots", () => {
+    it("should match snapshot with default PlanCard", () => {
+      const { toJSON } = renderPlan();
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with variant", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "hope", children: /* @__PURE__ */ jsx(
+          PlanCard.Content,
+          {
+            subtitle: "plan",
+            title: "Basic",
+            currency: "$",
+            price: "99.90",
+            period: "/month"
+          }
+        ) }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with suffix", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "hope", children: /* @__PURE__ */ jsx(
+          PlanCard.Content,
+          {
+            subtitle: "plan",
+            title: "Basic",
+            currency: "$",
+            suffix: "MXN",
+            price: "99.90",
+            period: "/month"
+          }
+        ) }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/native/PlanCard/Subtitle.js

@@ -0,0 +1,25 @@
+import styled, { css } from "styled-components";
+import theme from "../../../Theme/helpers/themeReader";
+import Text from "../../../Text";
+const Subtitle = styled(Text.Medium)`
+  text-transform: uppercase;
+
+  ${(props) => {
+  const {
+    components: {
+      card: { plan }
+    }
+  } = theme(props);
+  return css`
+      margin-bottom: ${plan.subtitle.margin.bottom}px;
+
+      color: ${plan.subtitle.font.color};
+      font-size: ${plan.subtitle.font.size}px;
+    `;
+}}
+`;
+Subtitle.displayName = "PlanCard.Subtitle";
+var Subtitle_default = Subtitle;
+export {
+  Subtitle_default as default
+};

package/esm/Card/native/PlanCard/Tag.js

@@ -0,0 +1,62 @@
+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 } from "react/jsx-runtime";
+import React from "react";
+import styled, { css } from "styled-components";
+import { node } from "prop-types";
+import { PLAN_LINE_HEIGHT } from "./PlanCard";
+import Tag from "../../../Tag";
+const StyledTag = styled(Tag.Informative).attrs(() => ({ small: true }))`
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+
+  ${(props) => {
+  const { plan } = props.theme.yoga.components.card;
+  return css`
+      top: ${plan.tag.position.top + PLAN_LINE_HEIGHT}px;
+      left: ${plan.tag.position.left}px;
+    `;
+}}
+`;
+const PlanCardTag = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(StyledTag, __spreadProps(__spreadValues({}, rest), { children }));
+};
+PlanCardTag.displayName = "PlanCard.Tag";
+PlanCardTag.propTypes = {
+  children: node.isRequired
+};
+var Tag_default = PlanCardTag;
+export {
+  Tag_default as default
+};