@gympass/yoga 7.87.0 → 7.88.0

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

@@ -1,68 +1,141 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { isValidElement } from "react";
+import styled, { css, withTheme } from "styled-components";
+import { string, node, shape, oneOfType, func, bool } from "prop-types";
+import Text from "../../../Text";
+import theme from "../../../Theme/helpers/themeReader";
+import Box from "../../../Box";
+const { card, cardweb } = theme.components;
+const truncateStyle = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const List = styled.ul`
+  margin: ${cardweb.plan.list.margin.top}px 0 0;
+  padding: 0;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  list-style: none;
+`;
+const IconWrapper = styled.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 = styled.li`
+  :not(:last-child) {
+    margin-bottom: ${card.plan.list.item.margin.bottom}px;
+  }
+`;
+const Wrapper = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
-import React, { isValidElement } from 'react';
-import styled, { css, withTheme } from 'styled-components';
-import { string, node, shape, oneOfType, func, bool } from 'prop-types';
-import Text from '../../../Text';
-import theme from '../../../Theme/helpers/themeReader';
-import Box from '../../../Box';
-var _theme$components = theme.components,
-    card = _theme$components.card,
-    cardweb = _theme$components.cardweb;
-var truncateStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var List = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin: ", "px 0 0;\n  padding: 0;\n\n  list-style: none;\n"])), cardweb.plan.list.margin.top);
-var IconWrapper = styled.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 = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  :not(:last-child) {\n    margin-bottom: ", "px;\n  }\n"])), card.plan.list.item.margin.bottom);
-var Wrapper = styled(Box)(_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' && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: none;\n      padding: 0;\n      background: transparent;\n      cursor: pointer;\n      text-align: start;\n    "])));
-});
-var ItemText = styled(Text.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;
-});
-var Button = styled.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, theme.baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);
-var ListItem = 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.createElement(Item, null, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    alignItems: "flex-start",
-    width: "100%"
-  }, Icon && /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/isValidElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, {
-    width: 16,
-    height: 16,
-    fill: yogaTheme.yoga.colors.text.primary
-  })), /*#__PURE__*/React.createElement(ItemText, {
-    as: "span",
-    truncate: truncate
-  }, text)), children), Boolean(Object.keys(buttonProps).length) && /*#__PURE__*/React.createElement(Button, buttonProps));
+  ${(props) => props.as === "button" && css`
+      border: none;
+      padding: 0;
+      background: transparent;
+      cursor: pointer;
+      text-align: start;
+    `}
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+const ItemText = styled(Text.Small)`
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+
+  color: ${card.plan.list.item.font.color};
+
+  ${(props) => props.truncate && truncateStyle}
+`;
+const Button = styled.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: ${theme.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 = withTheme((props) => {
+  const {
+    text,
+    truncate,
+    icon: Icon,
+    buttonProps,
+    theme: yogaTheme,
+    children,
+    onClick
+  } = props;
+  const wrapperProps = onClick ? { as: "button", type: "button", onClick } : {};
+  return /* @__PURE__ */ jsxs(Item, { children: [
+    /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues({}, wrapperProps), { children: [
+      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "flex-start", width: "100%", children: [
+        Icon && /* @__PURE__ */ jsx(IconWrapper, { children: isValidElement(Icon) ? Icon : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            width: 16,
+            height: 16,
+            fill: yogaTheme.yoga.colors.text.primary
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ItemText, { as: "span", truncate, children: text })
+      ] }),
+      children
+    ] })),
+    Boolean(Object.keys(buttonProps).length) && /* @__PURE__ */ jsx(Button, __spreadValues({}, buttonProps))
+  ] });
 });
-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: oneOfType([string, node]).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 makes the item clickable */
   onClick: func,
   children: node,
@@ -70,9 +143,12 @@ ListItem.propTypes = {
 };
 ListItem.defaultProps = {
   truncate: true,
-  icon: undefined,
+  icon: void 0,
   buttonProps: {},
-  onClick: undefined,
-  children: undefined
+  onClick: void 0,
+  children: void 0
+};
+export {
+  List,
+  ListItem
 };
-export { List, ListItem };

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

@@ -1,32 +1,41 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import ThemeProvider from '../../../Theme';
-import { ListItem } from './List';
-var text = '2.900 gyms and studios';
-
+var __defProp = Object.defineProperty;
+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;
+};
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ThemeProvider from "../../../Theme";
+import { ListItem } from "./List";
+const text = "2.900 gyms and studios";
 function setup(props) {
-  render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ListItem, _extends({
-    text: text
-  }, props))));
+  render(
+    /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ListItem, __spreadValues({ text }, props)) })
+  );
 }
-
-describe('<ListItem />', function () {
-  it('should display text truncated', function () {
+describe("<ListItem />", () => {
+  it("should display text truncated", () => {
     setup();
     expect(screen.getByText(text)).toMatchSnapshot();
   });
-  it('should not display text truncated when truncate prop is false', function () {
-    setup({
-      truncate: false
-    });
+  it("should not display text truncated when truncate prop is false", () => {
+    setup({ truncate: false });
     expect(screen.getByText(text)).toMatchSnapshot();
   });
-  it('should display children element', function () {
-    setup({
-      children: /*#__PURE__*/React.createElement("ul", null)
-    });
-    expect(screen.getByRole('list')).toBeInTheDocument();
+  it("should display children element", () => {
+    setup({ children: /* @__PURE__ */ jsx("ul", {}) });
+    expect(screen.getByRole("list")).toBeInTheDocument();
   });
-});
+});

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;