{"version":3,"sources":["webpack:///./src/pages/procedures/scar-revision.tsx","webpack:///./src/components/Hero.tsx"],"names":["content","backgroundTitle","subtitle","title","otherOptions","text","to","data","header","bgImage","womanWaterfall","childImageSharp","height","inverted","image","otherBreast","darkness","style","fontSize","margin","map","mr","mb","float","small","color","outline","Container","styled","div","Content","props","BgImage","Img","old","css","FormContainer","Hero","children","noForm","console","log","fluid","showMessage"],"mappings":"8FAAA,mIAmBMA,EAAU,CACdC,gBAAiB,6BACjBC,SAAU,oFACVC,MAAO,gBACPC,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,QACjB,gBAAC,SAAM,KACL,6BAAQR,EAAQG,MAAK,8BAGvB,gBAAC,IAAI,CAACM,QAASF,EAAKG,eAAeC,gBAAiBC,OAAO,UAG3D,gBAAC,IAAO,KACN,2CACA,wPAMA,qHAIA,0EACA,kCAEE,8CACA,8CACA,uCACA,yCAEF,sKAIA,sIAKA,oEACA,0BACE,6CACA,iDACA,oCACA,qHACA,+DACA,0DACA,0CACA,2DACA,wGACA,+EAGF,gBAAC,IAAI,CAACN,GAAG,aACP,gBAAC,IAAM,CAACO,UAAU,GAAK,uBAI3B,gBAAC,IAAiB,CAChBC,MAAOP,EAAKQ,YAAYJ,gBACxBR,MAAOH,EAAQC,gBACfW,OAAO,QACPI,SAAS,OAET,qBAAGC,MAAO,CAAEC,SAAU,GAAIC,OAAQ,iBAAiB,kFAIlDnB,EAAQI,aAAagB,KAAI,gBAAGd,EAAE,EAAFA,GAAID,EAAI,EAAJA,KAAI,OACnC,gBAAC,OAAI,CAACgB,GAAI,EAAGC,GAAI,EAAGL,MAAO,CAAEM,MAAO,SAClC,gBAAC,IAAI,CAACjB,GAAIA,GACR,gBAAC,IAAM,CAACkB,OAAO,EAAMC,MAAM,OAAOC,SAAS,GACxCrB,SAOX,gBAAC,eAAY,CAACE,KAAMA,O,kCC7HxB,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,2EAMnC,SAAAG,GAAK,OAAIA,EAAMnB,QAAU,UAEjC,SAAAmB,GAAK,OAAIA,EAAMG,IAAMC,cAAG,kFAEX,SAAAJ,GAAK,OAAIA,EAAMnB,QAAU,UAMpCuB,cAAG,uFAYHC,EAAgBR,UAAOC,IAAG,0EAAVD,CAAU,ocAa1B,SAAAG,GAAK,OAAIA,EAAMG,KAAOC,cAAG,6EA2BzB,SAAAJ,GAAK,OAAIA,EAAMG,IAAMC,cAAG,sBAAsBA,cAAG,yBA6BxCE,IAbF,SAAH,OAAMzB,EAAM,EAANA,OAAQH,EAAO,EAAPA,QAAS6B,EAAQ,EAARA,SAAUC,EAAM,EAANA,OAAQL,EAAG,EAAHA,IAAG,OACpD,kBAACP,EAAS,KACPa,QAAQC,IAAI,SAAUP,GACvB,kBAACJ,EAAO,CAAClB,OAAQA,GAAS0B,GACzB7B,GAAW,kBAACuB,EAAO,CAACE,IAAKA,WAActB,OAAQA,EAAQ8B,MAAOjC,EAAQiC,SACrEH,GACA,kBAACH,EAAa,CAACF,IAAKA,YAClB,kBAAC,IAAI,CAAC/B,MAAM,oBAAoBwC,aAAa","file":"component---src-pages-procedures-scar-revision-tsx-6c62072aec7eeae88201.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: 'Scar Revision',\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=\"dark\">\n    <Helmet>\n      <title>{content.title} - Plastic Surgery Sydney</title>\n    </Helmet>\n\n    <Hero bgImage={data.womanWaterfall.childImageSharp} height=\"600px\">\n    </Hero>\n\n    <Content>\n      <h2>Scar Revision</h2>\n      <p>\n        Dr Sellars performs scar revision surgery. Depending on the site, size\n        and reason for the scar, these can be treated with revision surgery\n        under local anaesthetic in the rooms or sedation/general anesthetic in\n        hospital.\n      </p>\n      <p>\n        Some scars may be treated with steroid injections such as hypertrophic\n        and keloid scars.\n      </p>\n      <h4>Scars can be caused by many factors such as:</h4>\n      <ul>\n        Burns\n        <li>Previous surgery</li>\n        <li>Traumatic injury</li>\n        <li>Piercings</li>\n        <li>Infections</li>\n      </ul>\n      <p>\n        Some scars may cause not only an aesthetic issue but can sometimes cause\n        functional problems, such as tethering and contractures of skin.\n      </p>\n      <p>\n        Patients must have realistic expectations that not all scars can be\n        improved, even with revision surgery.\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 ScarRevisionQuery {\n    womanWaterfall: file(relativePath: { eq: \"sellars-scar.png\" }) {\n      childImageSharp {\n        fluid(quality: 98, maxWidth: 3000) {\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, { css } 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  ${props => props.old ? css`\n      @media (max-width: 900px) {\n        height:${props => props.height || 'auto'};\n      }\n\n      @media (max-width: 500px) {\n        height: 450px;\n      }\n  ` : css`\n  @media (max-width: 900px) {\n    height: 520px;\n  }\n\n  @media (max-width: 500px) {\n    height: 250px;\n  }\n  `}\n\n`\n\nconst FormContainer = styled.div`\n  width: 420px;\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    width: 90%;\n    max-width: 340px;\n    ${props => props.old && css`\n        left: 50%;\n      right: auto;\n      bottom: 20px;\n      top: auto;\n      transform: translateX(-50%);\n    `}\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    ${props => props.old ? css`margin-top: 2rem;` : css`margin-top: 1rem;`}\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  old?: boolean\n}\n\nconst Hero = ({ height, bgImage, children, noForm, old }: IHeroProps) => (\n  <Container >\n    {console.log('oldold', old)}\n    <Content height={height}>{children}</Content>\n    {bgImage && <BgImage old={old ?? false} height={height} fluid={bgImage.fluid} />}\n    {!noForm && (\n      <FormContainer old={old ?? false}>\n        <Form title=\"Contact us today!\" showMessage={false} />\n      </FormContainer>\n    )}\n  </Container>\n)\n\nexport default Hero\n"],"sourceRoot":""}