{"version":3,"file":"SelectPlan-CRS1ltIr.js","sources":["../../../app/javascript/components/HomepageHero/HeroComponents/SelectPlan.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Flex,\n  Card,\n  SelectableCard,\n  Title,\n  Caption,\n  Currency,\n} from \"playbook-ui\";\n\nconst SelectPlanCard = () => {\n  const plans = [\n    {\n      planName: \"Standard\",\n      current: \"\",\n      subCopy: \"$29 month x 10 seats\",\n      price: \"290\",\n    },\n    {\n      planName: \"Business\",\n      current: \"(current)\",\n      subCopy: \"$39 month x 10 seats\",\n      price: \"390\",\n    },\n    {\n      planName: \"Enterprise\",\n      current: \"\",\n      subCopy: \"$60 month x 10 seats\",\n      price: \"600\",\n    },\n  ];\n  const [selected, setSelected] = useState(plans[1].planName);\n  const handleSelect = (event) => {\n    setSelected(event.target.value);\n  };\n\n  return (\n    <Flex\n      className=\"select_plan component_example\"\n      cursor=\"pointer\"\n      hover={{ scale: \"sm\" }}\n    >\n      <Card borderNone borderRadius=\"xl\" shadow=\"deepest\">\n        <Flex orientation=\"column\" gap=\"sm\" align=\"stretch\">\n          {plans.map((plan, i) => {\n            return (\n              <SelectableCard\n                checked={selected === plan.planName}\n                key={`selectable-plan-card-${i}`}\n                icon\n                inputId={plan.planName}\n                multi={false}\n                name=\"Plan\"\n                onChange={handleSelect}\n                value={plan.planName}\n                shadow={selected === plan.planName ? \"deep\" : \"none\"}\n                margin=\"none\"\n              >\n                <Flex justify=\"between\">\n                  <Flex orientation=\"column\">\n                    <Flex gap=\"xs\" paddingRight=\"xl\">\n                      <Title size={4} text={plan.planName} />\n                      <Title size={4} color=\"light\" text={plan.current} />\n                    </Flex>\n                    <Caption size=\"xs\" text={plan.subCopy} />\n                  </Flex>\n                  <Currency\n                    amount={plan.price}\n                    unit=\"/month\"\n                    size=\"md\"\n                    symbol=\"$\"\n                  />\n                </Flex>\n              </SelectableCard>\n            );\n          })}\n        </Flex>\n      </Card>\n    </Flex>\n  );\n};\n\nexport default SelectPlanCard;\n"],"names":["SelectPlanCard","plans","selected","setSelected","useState","handleSelect","event","jsx","Flex","Card","plan","i","SelectableCard","jsxs","Title","Caption","Currency"],"mappings":"qMAUA,MAAMA,EAAiB,IAAM,CAC3B,MAAMC,EAAQ,CACZ,CACE,SAAU,WACV,QAAS,GACT,QAAS,uBACT,MAAO,KACT,EACA,CACE,SAAU,WACV,QAAS,YACT,QAAS,uBACT,MAAO,KACT,EACA,CACE,SAAU,aACV,QAAS,GACT,QAAS,uBACT,MAAO,KACT,CAAA,EAEI,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAASH,EAAM,CAAC,EAAE,QAAQ,EACpDI,EAAgBC,GAAU,CAClBH,EAAAG,EAAM,OAAO,KAAK,CAAA,EAI9B,OAAAC,EAAA,IAACC,EAAA,CACC,UAAU,gCACV,OAAO,UACP,MAAO,CAAE,MAAO,IAAK,EAErB,SAAAD,EAAA,IAACE,GAAK,WAAU,GAAC,aAAa,KAAK,OAAO,UACxC,SAACF,EAAAA,IAAAC,EAAA,CAAK,YAAY,SAAS,IAAI,KAAK,MAAM,UACvC,WAAM,IAAI,CAACE,EAAMC,IAEdJ,EAAA,IAACK,EAAA,CACC,QAASV,IAAaQ,EAAK,SAE3B,KAAI,GACJ,QAASA,EAAK,SACd,MAAO,GACP,KAAK,OACL,SAAUL,EACV,MAAOK,EAAK,SACZ,OAAQR,IAAaQ,EAAK,SAAW,OAAS,OAC9C,OAAO,OAEP,SAAAG,EAAA,KAACL,EAAK,CAAA,QAAQ,UACZ,SAAA,CAACK,EAAAA,KAAAL,EAAA,CAAK,YAAY,SAChB,SAAA,CAAAK,EAAA,KAACL,EAAK,CAAA,IAAI,KAAK,aAAa,KAC1B,SAAA,CAAAD,EAAA,IAACO,EAAM,CAAA,KAAM,EAAG,KAAMJ,EAAK,SAAU,EACrCH,MAACO,GAAM,KAAM,EAAG,MAAM,QAAQ,KAAMJ,EAAK,QAAS,CAAA,EACpD,QACCK,EAAQ,CAAA,KAAK,KAAK,KAAML,EAAK,QAAS,CAAA,EACzC,EACAH,EAAA,IAACS,EAAA,CACC,OAAQN,EAAK,MACb,KAAK,SACL,KAAK,KACL,OAAO,GAAA,CACT,CAAA,EACF,CAAA,EAxBK,wBAAwBC,CAAC,EAAA,CA2BnC,EACH,CACF,CAAA,CAAA,CAAA,CAGN"}