@gympass/yoga 7.87.1 → 7.88.1

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

@@ -1,78 +1,182 @@
-var _excluded = ["children", "discount", "variant"];
+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, string } from "prop-types";
+import Box from "../../../Box";
+import Text from "../../../Text";
+const PLAN_LINE_HEIGHT = 4;
+const DISCOUNT_HEIGHT = 28;
+const Plan = styled.article`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  max-width: 312px;
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+  overflow: hidden;
 
-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; }
+  ${(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;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+      background-color: ${theme.colors.white};
+    `;
+}}
+`;
+const Border = styled.span`
+  ${({ variant, hasRightMask, theme }) => {
+  const { spacing, colors } = theme.yoga;
+  const color = colors[variant];
+  const MASK_SIZE = 112;
+  const baseMaskStyle = css`
+      position: absolute;
+      height: ${MASK_SIZE}px;
+      width: ${MASK_SIZE}px;
+      content: '';
+      background: radial-gradient(
+        50% 50% at 50% 50%,
+        ${colors.white} 0%,
+        transparent 100%
+      );
+      border-radius: 50%;
+    `;
+  return css`
+      position: absolute;
+      top: 0;
+      left: 0;
 
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { node, oneOf, string } from 'prop-types';
-import Box from '../../../Box';
-import Text from '../../../Text';
-export var PLAN_LINE_HEIGHT = 4;
-var DISCOUNT_HEIGHT = 28;
-var Plan = styled.article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 312px;\n\n  overflow: hidden;\n\n  ", "\n"])), function (props) {
-  var theme = props.theme.yoga;
-  var plan = theme.components.card.plan;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", "px ", "px\n        ", "px ", "px;\n      border: ", "px solid ", ";\n      border-radius: ", "px;\n\n      background-color: ", ";\n    "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, theme.borders.small, theme.colors.light, plan.radius, theme.colors.white);
-});
-var Border = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var variant = _ref.variant,
-      hasRightMask = _ref.hasRightMask,
-      theme = _ref.theme;
-  var _theme$yoga = theme.yoga,
-      spacing = _theme$yoga.spacing,
-      colors = _theme$yoga.colors;
-  var color = colors[variant];
-  var MASK_SIZE = 112;
-  var baseMaskStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      content: '';\n      background: radial-gradient(\n        50% 50% at 50% 50%,\n        ", " 0%,\n        transparent 100%\n      );\n      border-radius: 50%;\n    "])), MASK_SIZE, MASK_SIZE, colors.white);
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      left: 0;\n\n      display: inline-block;\n      width: 100%;\n\n      height: ", "px;\n      background-color: ", ";\n\n      ::before {\n        ", "\n        left: ", "px;\n        top: -", "px;\n        opacity: 0.8;\n      }\n\n      ", "\n    "])), PLAN_LINE_HEIGHT, color, baseMaskStyle, spacing.large, MASK_SIZE - DISCOUNT_HEIGHT, hasRightMask && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        ::after {\n          ", "\n          top: -", "px;\n          right: ", "px;\n          opacity: 0.5;\n        }\n      "])), baseMaskStyle, MASK_SIZE - DISCOUNT_HEIGHT + PLAN_LINE_HEIGHT, spacing.large));
-});
-var DiscountWrapper = styled(Box).attrs({
-  ph: 'xsmall',
-  pv: 'xxxsmall'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var bg = _ref2.bg,
-      theme = _ref2.theme;
-  var _theme$yoga2 = theme.yoga,
-      spacing = _theme$yoga2.spacing,
-      colors = _theme$yoga2.colors;
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      min-height: ", "px;\n      border-bottom-left-radius: ", "px;\n\n      ::before {\n        content: '';\n        position: absolute;\n        left: -", "px;\n        height: ", "px;\n        width: ", "px;\n        top: ", "px;\n        background: transparent;\n        border-top-right-radius: ", "px;\n        box-shadow: ", " ", "px -1px;\n      }\n    "])), DISCOUNT_HEIGHT, spacing.small, DISCOUNT_HEIGHT, DISCOUNT_HEIGHT / 2 - PLAN_LINE_HEIGHT, DISCOUNT_HEIGHT, PLAN_LINE_HEIGHT, spacing.small, colors[bg], spacing.xsmall);
-});
+      display: inline-block;
+      width: 100%;
 
-function PlanCard(_ref3) {
-  var children = _ref3.children,
-      discount = _ref3.discount,
-      variant = _ref3.variant,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+      height: ${PLAN_LINE_HEIGHT}px;
+      background-color: ${color};
 
-  var hasDiscount = !!discount;
-  return /*#__PURE__*/React.createElement(Plan, rest, hasDiscount && /*#__PURE__*/React.createElement(DiscountWrapper, {
-    bg: variant
-  }, /*#__PURE__*/React.createElement(Text.Tiny, {
-    color: "white",
-    fontWeight: "medium"
-  }, discount)), /*#__PURE__*/React.createElement(Border, {
-    variant: variant,
-    hasRightMask: hasDiscount
-  }), children);
-}
+      ::before {
+        ${baseMaskStyle}
+        left: ${spacing.large}px;
+        top: -${MASK_SIZE - DISCOUNT_HEIGHT}px;
+        opacity: 0.8;
+      }
+
+      ${hasRightMask && css`
+        ::after {
+          ${baseMaskStyle}
+          top: -${MASK_SIZE - DISCOUNT_HEIGHT + PLAN_LINE_HEIGHT}px;
+          right: ${spacing.large}px;
+          opacity: 0.5;
+        }
+      `}
+    `;
+}}
+`;
+const DiscountWrapper = styled(Box).attrs({
+  ph: "xsmall",
+  pv: "xxxsmall"
+})`
+  ${({ bg, theme }) => {
+  const { spacing, colors } = theme.yoga;
+  return css`
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      min-height: ${DISCOUNT_HEIGHT}px;
+      border-bottom-left-radius: ${spacing.small}px;
 
+      ::before {
+        content: '';
+        position: absolute;
+        left: -${DISCOUNT_HEIGHT}px;
+        height: ${DISCOUNT_HEIGHT / 2 - PLAN_LINE_HEIGHT}px;
+        width: ${DISCOUNT_HEIGHT}px;
+        top: ${PLAN_LINE_HEIGHT}px;
+        background: transparent;
+        border-top-right-radius: ${spacing.small}px;
+        box-shadow: ${colors[bg]} ${spacing.xsmall}px -1px;
+      }
+    `;
+}}
+`;
+function PlanCard(_a) {
+  var _b = _a, { children, discount, variant } = _b, rest = __objRest(_b, ["children", "discount", "variant"]);
+  const hasDiscount = !!discount;
+  return /* @__PURE__ */ jsxs(Plan, __spreadProps(__spreadValues({}, rest), { children: [
+    hasDiscount && /* @__PURE__ */ jsx(DiscountWrapper, { bg: variant, children: /* @__PURE__ */ jsx(Text.Tiny, { color: "white", fontWeight: "medium", children: discount }) }),
+    /* @__PURE__ */ jsx(Border, { variant, hasRightMask: hasDiscount }),
+    children
+  ] }));
+}
 PlanCard.propTypes = {
   children: node,
   discount: string,
-
   /** 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'])
+  variant: oneOf([
+    "primary",
+    "secondary",
+    "vibin",
+    "hope",
+    "energy",
+    "relax",
+    "peace",
+    "verve",
+    "uplift",
+    "deepPurple",
+    "stamina",
+    "dark",
+    "medium",
+    "deep",
+    "light",
+    "clear",
+    "white"
+  ])
 };
 PlanCard.defaultProps = {
-  children: undefined,
-  discount: undefined,
-  variant: 'deepPurple'
+  children: void 0,
+  discount: void 0,
+  variant: "deepPurple"
+};
+PlanCard.displayName = "PlanCard";
+var PlanCard_default = PlanCard;
+export {
+  PLAN_LINE_HEIGHT,
+  PlanCard_default as default
 };
-PlanCard.displayName = 'PlanCard';
-export default PlanCard;

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

@@ -1,159 +1,154 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { Star, MapPin } from '@gympass/yoga-icons';
-import { ThemeProvider, Button, Icon } from '../../..';
-import PlanCard from '.';
-describe('<PlanCard />', function () {
-  var buttonOnClickMock = jest.fn();
-
-  var renderPlan = function renderPlan(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        clickableItems = _ref.clickableItems;
-
-    return render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Tag, {
-      variant: "informative"
-    }, "Recommended Plan"), /*#__PURE__*/React.createElement(PlanCard.Content, {
-      subtitle: "plan",
-      title: "Basic",
-      currency: "$",
-      price: "99.90",
-      period: "/month"
-    }, /*#__PURE__*/React.createElement(PlanCard.Subtitle, null, "Get access to"), /*#__PURE__*/React.createElement(PlanCard.List, null, /*#__PURE__*/React.createElement(PlanCard.ListItem, {
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        as: MapPin,
-        height: "small",
-        width: "small",
-        stroke: "medium"
-      }),
-      text: "gyms and studios",
-      onClick: clickableItems && jest.fn()
-    }), /*#__PURE__*/React.createElement(PlanCard.ListItem, {
-      icon: Star,
-      text: "list item",
-      buttonProps: {
-        children: 'button',
-        as: 'a',
-        onClick: buttonOnClickMock
-      },
-      onClick: clickableItems && jest.fn()
-    }))), /*#__PURE__*/React.createElement(PlanCard.Actions, null, /*#__PURE__*/React.createElement(Button, {
-      full: true
-    }, "Select this plan")))));
-  };
-
-  describe('Events', function () {
-    it('should call onClick when ListItem has a button', function () {
-      var _renderPlan = renderPlan(),
-          getByText = _renderPlan.getByText;
-
-      fireEvent.click(getByText('button'));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { Star, MapPin } from "@gympass/yoga-icons";
+import { ThemeProvider, Button, Icon } from "../../..";
+import PlanCard from ".";
+describe("<PlanCard />", () => {
+  const buttonOnClickMock = jest.fn();
+  const renderPlan = ({ clickableItems } = {}) => 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",
+                  onClick: clickableItems && jest.fn()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PlanCard.ListItem,
+                {
+                  icon: Star,
+                  text: "list item",
+                  buttonProps: {
+                    children: "button",
+                    as: "a",
+                    onClick: buttonOnClickMock
+                  },
+                  onClick: clickableItems && jest.fn()
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(PlanCard.Actions, { children: /* @__PURE__ */ jsx(Button, { full: true, children: "Select this plan" }) })
+    ] }) })
+  );
+  describe("Events", () => {
+    it("should call onClick when ListItem has a button", () => {
+      const { getByText } = renderPlan();
+      fireEvent.click(getByText("button"));
       expect(buttonOnClickMock).toHaveBeenCalled();
     });
-    it('should make list item clickable', function () {
-      var itemClickMock = jest.fn();
-
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        variant: "energy"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic"
-      }, /*#__PURE__*/React.createElement(PlanCard.List, null, /*#__PURE__*/React.createElement(PlanCard.ListItem, {
-        icon: /*#__PURE__*/React.createElement(Icon, {
-          as: MapPin,
-          height: "small",
-          width: "small",
-          stroke: "medium"
-        }),
-        text: "gyms and studios",
-        onClick: itemClickMock
-      })))))),
-          getByRole = _render.getByRole;
-
-      fireEvent.click(getByRole('button', {
-        label: 'gyms and studios'
-      }));
+    it("should make list item clickable", () => {
+      const itemClickMock = jest.fn();
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "energy", children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", children: /* @__PURE__ */ jsx(PlanCard.List, { children: /* @__PURE__ */ jsx(
+          PlanCard.ListItem,
+          {
+            icon: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                as: MapPin,
+                height: "small",
+                width: "small",
+                stroke: "medium"
+              }
+            ),
+            text: "gyms and studios",
+            onClick: itemClickMock
+          }
+        ) }) }) }) })
+      );
+      fireEvent.click(getByRole("button", { label: "gyms and studios" }));
       expect(itemClickMock).toHaveBeenCalled();
     });
   });
-  describe('Snapshots', function () {
-    it('should match snapshot with default PlanCard', function () {
-      var _renderPlan2 = renderPlan(),
-          planCard = _renderPlan2.container;
-
+  describe("Snapshots", () => {
+    it("should match snapshot with default PlanCard", () => {
+      const { container: planCard } = renderPlan();
       expect(planCard).toMatchSnapshot();
     });
-    it('should match snapshot with variant', function () {
-      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        variant: "hope"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        subtitle: "plan",
-        title: "Basic",
-        currency: "$",
-        price: "99.90",
-        period: "/month"
-      })))),
-          container = _render2.container;
-
+    it("should match snapshot with variant", () => {
+      const { container } = 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(container).toMatchSnapshot();
     });
-    it('should match snapshot with suffix', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        variant: "hope"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        subtitle: "plan",
-        title: "Basic",
-        currency: "$",
-        suffix: "MXN",
-        price: "99.90",
-        period: "/month"
-      })))),
-          container = _render3.container;
-
+    it("should match snapshot with suffix", () => {
+      const { container } = 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(container).toMatchSnapshot();
     });
-    it('should render the extra content', function () {
-      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic",
-        extra: /*#__PURE__*/React.createElement("p", null, "Hello")
-      })))),
-          container = _render4.container;
-
+    it("should render the extra content", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", extra: /* @__PURE__ */ jsx("p", { children: "Hello" }) }) }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should render the title without a colored badge', function () {
-      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic"
-      })))),
-          getByText = _render5.getByText;
-
-      expect(getByText('Basic')).toMatchSnapshot();
+    it("should render the title without a colored badge", () => {
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic" }) }) })
+      );
+      expect(getByText("Basic")).toMatchSnapshot();
     });
-    it('should render the title with a colored badge', function () {
-      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic",
-        badgeColor: "energy"
-      })))),
-          getByText = _render6.getByText;
-
-      expect(getByText('Basic')).toMatchSnapshot();
+    it("should render the title with a colored badge", () => {
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", badgeColor: "energy" }) }) })
+      );
+      expect(getByText("Basic")).toMatchSnapshot();
     });
-    it('should render the discount', function () {
-      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        discount: "SAVE 40%",
-        variant: "energy"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic"
-      })))),
-          container = _render7.container;
-
+    it("should render the discount", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { discount: "SAVE 40%", variant: "energy", children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic" }) }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should render list item content as button', function () {
-      var _renderPlan3 = renderPlan({
-        clickableItems: true
-      }),
-          container = _renderPlan3.container;
-
+    it("should render list item content as button", () => {
+      const { container } = renderPlan({ clickableItems: true });
       expect(container).toMatchSnapshot();
     });
   });
-});
+});

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

@@ -1,15 +1,25 @@
-var _templateObject, _templateObject2;
+import styled, { css } from "styled-components";
+import theme from "../../../Theme/helpers/themeReader";
+import Text from "../../../Text";
+const Subtitle = styled(Text.Tiny)`
+  text-transform: uppercase;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  ${(props) => {
+  const {
+    components: {
+      card: { plan }
+    }
+  } = theme(props);
+  return css`
+      margin-bottom: ${plan.subtitle.margin.bottom}px;
 
-import styled, { css } from 'styled-components';
-import theme from '../../../Theme/helpers/themeReader';
-import Text from '../../../Text';
-var Subtitle = styled(Text.Tiny)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
-  var _theme = theme(props),
-      plan = _theme.components.card.plan;
-
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", "px;\n\n      color: ", ";\n      font-weight: ", ";\n    "])), plan.subtitle.margin.bottom, plan.subtitle.font.color, plan.subtitle.font.weight);
-});
-Subtitle.displayName = 'PlanCard.Subtitle';
-export default Subtitle;
+      color: ${plan.subtitle.font.color};
+      font-weight: ${plan.subtitle.font.weight};
+    `;
+}}
+`;
+Subtitle.displayName = "PlanCard.Subtitle";
+var Subtitle_default = Subtitle;
+export {
+  Subtitle_default as default
+};

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

@@ -1,17 +1,22 @@
-var _templateObject, _templateObject2;
+import styled, { css } from "styled-components";
+import { PLAN_LINE_HEIGHT } from "./PlanCard";
+import Tag from "../../../Tag";
+const StyledTag = styled(Tag.Informative).attrs(() => ({ small: true }))`
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import styled, { css } from 'styled-components';
-import { PLAN_LINE_HEIGHT } from './PlanCard';
-import Tag from '../../../Tag';
-var StyledTag = styled(Tag.Informative).attrs(function () {
-  return {
-    small: true
-  };
-})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n"])), function (props) {
-  var plan = props.theme.yoga.components.card.plan;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      top: ", "px;\n      left: ", "px;\n    "])), plan.tag.position.top + PLAN_LINE_HEIGHT, plan.tag.position.left);
-});
-StyledTag.displayName = 'PlanCard.Tag';
-export default StyledTag;
+  ${(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;
+    `;
+}}
+`;
+StyledTag.displayName = "PlanCard.Tag";
+var Tag_default = StyledTag;
+export {
+  Tag_default as default
+};

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

@@ -1,9 +1,9 @@
-import { Actions, Button, ButtonText } from './Actions';
-import Content from './Content';
-import PlanCard from './PlanCard';
-import Subtitle from './Subtitle';
-import Tag from './Tag';
-import { List, ListItem } from './List';
+import { Actions, Button, ButtonText } from "./Actions";
+import Content from "./Content";
+import PlanCard from "./PlanCard";
+import Subtitle from "./Subtitle";
+import Tag from "./Tag";
+import { List, ListItem } from "./List";
 PlanCard.Actions = Actions;
 PlanCard.Button = Button;
 PlanCard.ButtonText = ButtonText;
@@ -12,4 +12,7 @@ PlanCard.List = List;
 PlanCard.ListItem = ListItem;
 PlanCard.Subtitle = Subtitle;
 PlanCard.Tag = Tag;
-export default PlanCard;
+var PlanCard_default = PlanCard;
+export {
+  PlanCard_default as default
+};