{"version":3,"sources":["webpack:///./src/pages/procedures/mole-removal.tsx","webpack:///./src/components/Hero.tsx"],"names":["content","backgroundTitle","subtitle","title","otherOptions","text","to","data","header","bgImage","moleRemoval","childImageSharp","height","color","small","outline","inverted","image","otherBreast","darkness","style","fontSize","margin","map","mr","mb","float","Container","styled","div","Content","props","BgImage","Img","FormContainer","Hero","children","noForm","fluid","showMessage"],"mappings":"4FAAA,mIAmBMA,EAAU,CACdC,gBAAiB,6BACjBC,SAAU,oFACVC,MAAO,eACPC,aAAc,CAKZ,CACEC,KAAM,8BACNC,GAAI,0BAEN,CACED,KAAM,sBACNC,GAAI,mCAEN,CACED,KAAM,gBACNC,GAAI,6BAEN,CACED,KAAM,eACNC,GAAI,8BAKK,0BAAGC,EAAI,EAAJA,KAAI,OACpB,gBAAC,IAAU,CAACC,OAAO,SACjB,gBAAC,SAAM,KACL,6BAAQR,EAAQG,MAAK,8BAGvB,gBAAC,IAAI,CAACM,QAASF,EAAKG,YAAYC,gBAAiBC,OAAO,SACtD,0BAAKZ,EAAQG,OACb,yBAAIH,EAAQE,UACZ,gBAAC,OAAI,KACH,gBAAC,IAAM,CAACW,MAAM,OAAOC,OAAO,EAAMC,SAAS,GAAK,gBAMpD,gBAAC,IAAO,KACN,0CACA,yHAIA,umBAWA,0BACA,kNAKA,sNAKA,yMAKA,qJAIA,iGAIA,oEACA,0BACE,6CACA,iDACA,oCACA,qHACA,+DACA,0DACA,0CACA,2DACA,wGACA,+EAGF,gBAAC,IAAI,CAACT,GAAG,aACP,gBAAC,IAAM,CAACU,UAAU,GAAK,uBAI3B,gBAAC,IAAiB,CAChBC,MAAOV,EAAKW,YAAYP,gBACxBR,MAAOH,EAAQC,gBACfW,OAAO,QACPO,SAAS,OAET,qBAAGC,MAAO,CAAEC,SAAU,GAAIC,OAAQ,iBAAiB,kFAIlDtB,EAAQI,aAAamB,KAAI,gBAAGjB,EAAE,EAAFA,GAAID,EAAI,EAAJA,KAAI,OACnC,gBAAC,OAAI,CAACmB,GAAI,EAAGC,GAAI,EAAGL,MAAO,CAAEM,MAAO,SAClC,gBAAC,IAAI,CAACpB,GAAIA,GACR,gBAAC,IAAM,CAACQ,OAAO,EAAMD,MAAM,OAAOE,SAAS,GACxCV,SAOX,gBAAC,eAAY,CAACE,KAAMA,O,kCChJxB,sEAMMoB,EAAYC,UAAOC,IAAG,sEAAVD,CAAU,wDAUtBE,EAAUF,kBAA2B,WAAU,oEAArCA,CAAqC,qfAIzC,SAAAG,GAAK,OAAIA,EAAMnB,QAAU,UA2C/BoB,EAAUJ,kBAA2BK,KAAI,oEAA/BL,CAA+B,+GAMnC,SAAAG,GAAK,OAAIA,EAAMnB,QAAU,UAO/BsB,EAAgBN,UAAOC,IAAG,0EAAVD,CAAU,khBAiEjBO,IAZF,SAAH,OAAMvB,EAAM,EAANA,OAAQH,EAAO,EAAPA,QAAS2B,EAAQ,EAARA,SAAUC,EAAM,EAANA,OAAM,OAC/C,kBAACV,EAAS,KACR,kBAACG,EAAO,CAAClB,OAAQA,GAASwB,GACzB3B,GAAW,kBAACuB,EAAO,CAACpB,OAAQA,EAAQ0B,MAAO7B,EAAQ6B,SAClDD,GACA,kBAACH,EAAa,KACZ,kBAAC,IAAI,CAAC/B,MAAM,oBAAoBoC,aAAa","file":"component---src-pages-procedures-mole-removal-tsx-6f1d2329851c4aab7c68.js","sourcesContent":["import * as React from 'react'\nimport { Flex } from 'grid-styled'\nimport { Link } from 'gatsby'\nimport Img from 'gatsby-image'\nimport { Helmet } from 'react-helmet'\nimport Hero from '../../components/Hero'\nimport Button from '../../components/Button'\nimport BackgroundSection from '../../components/BackgroundSection'\nimport MainLayout from '../../components/Layout'\nimport { AboutContact } from '..'\nimport {\n  BeforeAfter,\n  StyledTabs,\n  StyledTabList,\n  StyledTab,\n  Content,\n} from '../../components/procedures'\nimport { TabPanel } from 'react-tabs'\n\nconst content = {\n  backgroundTitle: 'Other Body Surgery Options',\n  subtitle: `Trusted, Experienced & Ethical. Boutique plastic surgery on Sydney's North Shore.`,\n  title: 'Mole Removal',\n  otherOptions: [\n    // {\n    //   text: 'Liposuction',\n    //   to: '/procedures/liposuction',\n    // },\n    {\n      text: 'Abdominoplasty (Tummy Tuck)',\n      to: '/procedures/tummy-tuck',\n    },\n    {\n      text: 'Skin Cancer Surgery',\n      to: '/procedures/skin-cancer-surgery',\n    },\n    {\n      text: 'Scar Revision',\n      to: '/procedures/scar-revision',\n    },\n    {\n      text: 'Mole Removal',\n      to: '/procedures/mole-removal',\n    },\n  ],\n}\n\nexport default ({ data }) => (\n  <MainLayout header=\"light\">\n    <Helmet>\n      <title>{content.title} - Plastic Surgery Sydney</title>\n    </Helmet>\n\n    <Hero bgImage={data.moleRemoval.childImageSharp} height=\"600px\">\n      <h1>{content.title}</h1>\n      <p>{content.subtitle}</p>\n      <Flex>\n        <Button color=\"#fff\" small={true} outline={true}>\n          Learn more\n        </Button>\n      </Flex>\n    </Hero>\n\n    <Content>\n      <h2>Mole Removal</h2>\n      <h4>\n        Dr Sellars performs a range of surgical excision procedures including\n        mole removal surgery.\n      </h4>\n      <p>\n        As a Specialist Plastic Surgeon, Dr Sellars has been trained in surgical\n        techniques that minimize scarring and give optimal aesthetic results. Dr\n        Sellars takes great care to provide an excellent cosmetic result,\n        whether it be a large cosmetic procedure or a simple lesion excision.\n        Many procedures can be performed in the consulting rooms under local\n        anaesthetic. However more complex procedures that require skin flaps or\n        skin grafts will be done under sedation or general anaesthetic in\n        hospital. Most children under the age of 12 will not be done with local\n        anaesthetic in the rooms.\n      </p>\n      <p></p>\n      <h4>\n        For skin cancers and mole removal - The initial appointment will be a\n        consultation only, and no extra time for any procedure can be allocated\n        at this time, (eg excision of lesion).\n      </h4>\n      <p>\n        Once Dr Sellars has assessed the area of concern, another appointment\n        for excision can be made. This will depend on the site and size of\n        lesion and age and medical condition of patient.\n      </p>\n      <p>\n        Other factors to consider are - can it be done in the rooms under local\n        anaesthetic or is a sedation or general anaesthetic required, which\n        would mean a hospital admission.\n      </p>\n      <h4>\n        Please note Dr Sellars does not perform routine skin checks. These are\n        done by the patient’s local GP or dermatologist.\n      </h4>\n      <p>\n        Dr Sellars can perform biopsies at time of consultation if required.\n      </p>\n\n      <h4>Possible risks of any surgery include:</h4>\n      <ul>\n        <li>Wound infection</li>\n        <li>Pain and discomfort</li>\n        <li>Nausea</li>\n        <li>Haematoma (an accumulation of blood around the surgical site that may require drainage)</li>\n        <li>Heavy bleeding from the incisions</li>\n        <li>Keloid or hypertrophic scars</li>\n        <li>Slow healing</li>\n        <li>Separation of the wound edges</li>\n        <li>Allergies to anaesthetic agents, antiseptics, suture material or dressings</li>\n        <li>Deep vein thrombosis DVT (blood clot in the leg)</li>\n      </ul>\n      \n      <Link to=\"/contact/\">\n        <Button inverted={true}>Contact us today!</Button>\n      </Link>\n    </Content>\n\n    <BackgroundSection\n      image={data.otherBreast.childImageSharp}\n      title={content.backgroundTitle}\n      height=\"500px\"\n      darkness=\"0.4\"\n    >\n      <p style={{ fontSize: 18, margin: '-1rem 0 2rem' }}>\n        Browse Dr. Graham Sellars' full range of surgical and non-surgical\n        procedures.\n      </p>\n      {content.otherOptions.map(({ to, text }) => (\n        <Flex mr={2} mb={3} style={{ float: 'left' }}>\n          <Link to={to}>\n            <Button small={true} color=\"#fff\" outline={true}>\n              {text}\n            </Button>\n          </Link>\n        </Flex>\n      ))}\n    </BackgroundSection>\n\n    <AboutContact data={data} />\n  </MainLayout>\n)\nexport const query = graphql`\n  query MoleRemovalQuery {\n    moleRemoval: file(relativePath: { eq: \"mole-removal.jpg\" }) {\n      childImageSharp {\n        fluid(maxWidth: 3000, quality: 90) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    otherBreast: file(relativePath: { eq: \"water-body-woman.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    asaps: file(relativePath: { eq: \"ASAPS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    asps: file(relativePath: { eq: \"ASPS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    drSellars: file(relativePath: { eq: \"dr-graham-sellars.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    fracs: file(relativePath: { eq: \"FRACS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`\n","import React from 'react'\nimport Img, { GatsbyImageProps } from 'gatsby-image'\nimport styled from 'styled-components'\nimport Form from './Form'\nimport { Container as FormWrapper } from './Contact'\n\nconst Container = styled.div`\n  max-width: 100vw;\n  overflow: hidden;\n  position: relative;\n`\n\ninterface IBgImageProps {\n  height: string\n}\n\nconst Content = styled<IBgImageProps, any>('section')`\n  position: absolute;\n  margin: 0 10%;\n  z-index: 99;\n  height: ${props => props.height || 'auto'};\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  text-align: left;\n\n  @media (max-width: 900px) {\n    text-align: center;\n    margin: 0;\n    width: 100%;\n    height: auto;\n    margin-top: 80px;\n\n    p,\n    button {\n      display: none;\n    }\n  }\n\n  @media (max-width: 500px) {\n    align-items: center;\n    p,\n    button {\n      display: block;\n    }\n  }\n\n  h1,\n  h2,\n  h3 {\n    font-size: 30px;\n    margin: 1rem 0;\n    color: #fff;\n    text-shadow: 0 1px 55px rgba(0, 0, 0, 0.7);\n  }\n  p {\n    color: #fff;\n    font-size: 18px;\n    max-width: 420px;\n    width: auto;\n    text-shadow: 0 1px 35px rgba(0, 0, 0, 0.7);\n  }\n`\nconst BgImage = styled<IBgImageProps, any>(Img)`\n  position: absolute;\n  top: 0;\n  left: -5%;\n  width: 110%;\n  z-index: -1;\n  height: ${props => props.height || 'auto'};\n\n  @media (max-width: 500px) {\n    height: 450px;\n  }\n`\n\nconst FormContainer = styled.div`\n  width: 320px;\n  background: #fff;\n  border-radius: 4px;\n  padding: 1.5rem 2rem;\n  position: absolute;\n  right: 10%;\n  top: calc(50% + 30px);\n  transform: translateY(-50%);\n\n  @media (max-width: 900px) {\n    left: 50%;\n    right: auto;\n    bottom: 20px;\n    top: auto;\n    transform: translateX(-50%);\n    width: 90%;\n    max-width: 340px;\n  }\n\n  @media (max-width: 500px) {\n    display: none;\n  }\n\n  input {\n    padding: 0.75rem 1rem;\n  }\n\n  h2 {\n    color: #333 !important;\n    font-size: 1.75rem;\n    margin-bottom: 0.5rem;\n    font-weight: 400;\n    text-align: center;\n    text-shadow: none;\n  }\n\n  @media (max-width: 900px) {\n    margin-top: 2rem;\n  }\n\n  @media (max-width: 480px) {\n    width: 105%;\n  }\n`\n\ninterface IHeroProps {\n  height: string\n  bgImage: GatsbyImageProps\n  children: React.ReactChild\n  noForm: boolean\n}\n\nconst Hero = ({ height, bgImage, children, noForm }: IHeroProps) => (\n  <Container>\n    <Content height={height}>{children}</Content>\n    {bgImage && <BgImage height={height} fluid={bgImage.fluid} />}\n    {!noForm && (\n      <FormContainer>\n        <Form title=\"Contact us today!\" showMessage={false} />\n      </FormContainer>\n    )}\n  </Container>\n)\n\nexport default Hero\n"],"sourceRoot":""}