{"version":3,"sources":["webpack:///./src/pages/procedures/earlobe-repair.tsx","webpack:///./src/components/Hero.tsx"],"names":["content","backgroundTitle","subtitle","title","otherOptions","text","to","data","header","name","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":"4FAAA,mIAoBMA,EAAU,CACdC,gBAAiB,uBACjBC,SAAU,oFACVC,MAAO,iBACPC,aAAc,CAKZ,CACEC,KAAM,eACNC,GAAI,4BAEN,CACED,KAAM,iBACNC,GAAI,8BAEN,CACED,KAAM,iBACNC,GAAI,kCAEN,CACED,KAAM,iBACNC,GAAI,gCAKK,0BAAGC,EAAI,EAAJA,KAAI,OACpB,gBAAC,IAAU,CAACC,OAAO,QACjB,gBAAC,SAAM,KACL,6BAAQR,EAAQG,MAAK,6BACrB,wBACEM,KAAK,cACLT,QAAQ,qHAIZ,gBAAC,IAAI,CAACU,QAASH,EAAKI,eAAeC,gBAAiBC,OAAO,UAG3D,gBAAC,IAAO,KACN,4CACA,8EACA,mQAOA,kEAEA,mLAMA,wOAMA,kEAEA,+IAKA,kJAKA,+OAMA,gWAQA,kTAOA,oEACA,0BACE,6CACA,iDACA,oCACA,qHACA,+DACA,0DACA,0CACA,2DACA,wGACA,+EAEF,gBAAC,IAAI,CAACP,GAAG,aACP,gBAAC,IAAM,CAACQ,UAAU,GAAK,uBAI3B,gBAAC,IAAiB,CAChBC,MAAOR,EAAKS,YAAYJ,gBACxBT,MAAOH,EAAQC,gBACfY,OAAO,QACPI,SAAS,OAET,qBAAGC,MAAO,CAAEC,SAAU,GAAIC,OAAQ,iBAAiB,kFAIlDpB,EAAQI,aAAaiB,KAAI,gBAAGf,EAAE,EAAFA,GAAID,EAAI,EAAJA,KAAI,OACnC,gBAAC,OAAI,CAACiB,GAAI,EAAGC,GAAI,EAAGL,MAAO,CAAEM,MAAO,SAClC,gBAAC,IAAI,CAAClB,GAAIA,GACR,gBAAC,IAAM,CAACmB,OAAO,EAAMC,MAAM,OAAOC,SAAS,GACxCtB,SAOX,gBAAC,eAAY,CAACE,KAAMA,O,kCC7JxB,sEAMMqB,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,CAAChC,MAAM,oBAAoByC,aAAa","file":"component---src-pages-procedures-earlobe-repair-tsx-77b1fee46f2686a109c3.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'\n\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 Facial Options',\n  subtitle: `Trusted, Experienced & Ethical. Boutique plastic surgery on Sydney's North Shore.`,\n  title: 'Earlobe Repair',\n  otherOptions: [\n    // {\n    //   text: 'Facelift',\n    //   to: '/procedures/facelift',\n    // },\n    {\n      text: 'Nose Surgery',\n      to: '/procedures/nose-surgery',\n    },\n    {\n      text: 'Ear Correction',\n      to: '/procedures/ear-correction',\n    },\n    {\n      text: 'Earlobe Repair',\n      to: '/procedures/ear-reconstruction',\n    },\n    {\n      text: 'Eyelid Surgery',\n      to: '/procedures/eyelid-surgery',\n    },\n  ],\n}\n\nexport default ({ data }) => (\n  <MainLayout header=\"dark\">\n    <Helmet>\n      <title>{content.title} - Plastic Surgery Sydney</title>\n      <meta\n        name=\"description\"\n        content=\"Dr. Graham Sellars can reconstruct the shape of your damaged ears due to split earlobes and stretched earlobes.\"\n      />\n    </Helmet>\n\n    <Hero bgImage={data.womanWaterfall.childImageSharp} height=\"600px\">\n    </Hero>\n\n    <Content>\n      <h2>Earlobe Repair</h2>\n      <h4>Split Earlobes or Stretched Ear Piercing Defects</h4>\n      <p>\n        Some people experience problems with their earlobes related to ear\n        piercing. This can be due to conventional ear piercing that has become\n        stretched, or from deliberately stretching the earlobe with large ear\n        studs or ear piercing.\n      </p>\n\n      <h4>This can create one of two problems:</h4>\n\n      <p>\n        Heavy earrings can stretch a normal, small ear piercing to a defect that\n        is too large to hold a small ear stud, leading to small earrings falling\n        out.\n      </p>\n\n      <p>\n        Larger ear studs can leave a larger defect in the stretched earlobe\n        which some people may regret and wish to have repaired. This can be a\n        problem for people wishing to join the Defence Force for example.\n      </p>\n\n      <h4>What Can Be Done With Split Earlobes</h4>\n\n      <p>\n        The split earlobe defects and stretched ear piercing defects can be\n        repaired quite simply under local anaesthetic.\n      </p>\n\n      <p>\n        There are two main options which can be employed depending on whether\n        one desires to maintain an ear piercing or not.\n      </p>\n\n      <p>\n        A small flap of skin can be rotated to maintain the piercing whilst\n        repairing the stretched earlobe defect around it. This gives a linear\n        scar which typically extends down to the ear margin and heals very well.\n      </p>\n\n      <p>\n        Alternatively the previous piercing can be excised. This tends to\n        elongate the earlobe which can make it look a little pointy and it may\n        be better to remove a wedge of the earlobe so that it heals with a more\n        normal looking shape. Each situation is slightly different and the\n        technique requires tailoring to the individual.\n      </p>\n\n      <p>\n        The procedure is done under local anaesthetic and typically takes one\n        hour. It can be done in a Day Surgery or as an office procedure. Deep\n        dissolving sutures are used as well as sutures that are removed the\n        following week. Typically one should not wear piercing for six weeks.\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      <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 EarReconstructionQuery {\n    allFile(filter: { relativeDirectory: { eq: \"breast-augmentation\" } }) {\n      edges {\n        node {\n          childImageSharp {\n            resolutions(width: 500, height: 300, toFormat: JPG) {\n              ...GatsbyImageSharpResolutions\n            }\n          }\n        }\n      }\n    }\n    womanWaterfall: file(relativePath: { eq: \"sellars-earlobe.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 3000, quality: 90) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    otherBreast: file(relativePath: { eq: \"flower.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":""}