{"version":3,"sources":["webpack:///./src/pages/mt/components/text-content/develop.js"],"names":["site","data","slug","state","title","exclusive","class","className","language","code"],"mappings":"mbAAA,yGAYe,qBACb,OACE,oCACE,kBAAC,IAAD,CACEA,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,YAClBC,MAAM,UACNC,MAAOH,EAAKG,MACZC,WAAW,IAEb,kBAAC,IAAD,CACEL,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,YAClBC,MAAM,UACNC,MAAOH,EAAKG,OAEZ,kBAAC,IAAD,KACE,4MAGkD,IAChD,0BAAME,MAAM,gBAAgB,OAJ9B,eAOF,6BACA,kBAAC,IAAD,iBACA,yBAAKC,UAAU,yCAAf,kBAGA,sKAIA,2BAAOD,MAAM,wCACX,+BACE,iCACA,sCACA,qCACA,2CACA,sCAEF,+BACE,wBAAIA,MAAM,6BACR,4BACE,uBAAGA,MAAM,+BAAT,2BAIF,6CACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,+CAMN,kBAAC,IAAD,CACEN,KAAMC,EAAKD,KACXQ,SAAS,QAFX,mEAIA,2BAAOF,MAAM,yCACX,+BACE,wBAAIA,MAAM,4BACR,4BACE,uBAAGA,MAAM,8BAAT,0BAEF,6CACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,+DAMN,kBAAC,IAAD,CACEN,KAAMC,EAAKD,KACXQ,SAAS,QAFX,kEAIA,yBAAKD,UAAU,yCAAf,QACA,0DACA,2BAAOD,MAAM,wCACX,+BACE,wBAAIA,MAAM,6BACR,4BACE,uBAAGA,MAAM,+BAAT,kBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,yCAMN,kBAAC,IAAD,CACEN,KAAMC,EAAKD,KACXQ,SAAS,QAFX,mEAIA,2BAAOF,MAAM,wCACX,+BACE,wBAAIA,MAAM,4BACR,4BACE,uBAAGA,MAAM,8BAAT,iBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,yDAMN,kBAAC,IAAD,CACEN,KAAMC,EAAKD,KACXQ,SAAS,QAFX,kEAIA,yBAAKD,UAAU,yCAAf,WACA,wHAIA,2BAAOD,MAAM,wCACX,+BACE,wBAAIA,MAAM,6BACR,4BACE,uBAAGA,MAAM,kCAAT,qBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,wCAMN,kBAAC,IAAD,CACEN,KAAMC,EAAKD,KACXQ,SAAS,QAFX,sEAIA,2BAAOF,MAAM,wCACX,+BACE,wBAAIA,MAAM,4BACR,4BACE,uBAAGA,MAAM,kCAAT,qBAEF,wCACA,uCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,uCAMN,kBAAC,IAAD,CACEN,KAAMC,EAAKD,KACXQ,SAAS,QAFX,sEAIA,2BAAOF,MAAM,wCACX,+BACE,wBAAIA,MAAM,8BACR,4BACE,uBAAGA,MAAM,iCAAT,oBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,wDAMN,kBAAC,IAAD,CACEN,KAAMC,EAAKD,KACXQ,SAAS,QAFX,wEASD,IAAMC,EAAO,I","file":"component---src-pages-mt-components-text-content-develop-js-4cb99408c8d189981a83.js","sourcesContent":["import React from 'react'\nimport {\n  Layout,\n  SectionTitle,\n  Header,\n  Code,\n  Intro,\n} from '../../../../components'\n\nimport './style.scss'\nimport data from './data.json'\n\nexport default () => {\n  return (\n    <>\n      <Header\n        site={data.site}\n        slug={data.slug + '/develop/'}\n        state=\"develop\"\n        title={data.title}\n        exclusive={true}\n      />\n      <Layout\n        site={data.site}\n        slug={data.slug + '/develop/'}\n        state=\"develop\"\n        title={data.title}\n      >\n        <Intro>\n          <p>\n            Text content communicates the main information in any given layout.\n            It can be used for anything from a couple of words to long\n            description fields. Use these classes only with{' '}\n            <span class=\"inline__code\">{'<p>'}</span> elements.\n          </p>\n        </Intro>\n        <hr />\n        <SectionTitle>Variants</SectionTitle>\n        <div className=\"showcase__title l-margin-top--xxlarge\">\n          Lead Paragraph\n        </div>\n        <p>\n          Use to emphasize the opening paragraph of a page that summarizes its\n          main ideas. Appears only once per page, in the Intro Area pattern.\n        </p>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <thead>\n            <th> </th>\n            <th>Weight</th>\n            <th>Color</th>\n            <th>Font Values</th>\n            <th>Usage</th>\n          </thead>\n          <tbody>\n            <tr class=\"showcase-table__white-row\">\n              <td>\n                <p class=\"c-text-content-lead--normal\">\n                  LeadParagraph / Normal\n                </p>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#333</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>20px</strong>\n                <br />\n                line-height: <strong>30px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For lead paragraphs on light backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <Code\n          site={data.site}\n          language=\"html\"\n        >{`<p class=“c-text-content-lead--normal”>Lorem ipsum dolor...</p>`}</Code>\n        <table class=\"showcase-table  l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__dark-row\">\n              <td>\n                <p class=\"c-text-content-lead--light\">LeadParagraph / Light</p>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>20px</strong>\n                <br />\n                line-height: <strong>30px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For lead paragraphs on dark or primary green backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <Code\n          site={data.site}\n          language=\"html\"\n        >{`<p class=“c-text-content-lead--light”>Lorem ipsum dolor...</p>`}</Code>\n        <div className=\"showcase__title l-margin-top--xxlarge\">Body</div>\n        <p>Use for standard body copy.</p>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__white-row\">\n              <td>\n                <p class=\"c-text-content-body--normal\">Body / Normal</p>\n              </td>\n              <td>Book 300</td>\n              <td>#333</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>16px</strong>\n                <br />\n                line-height: <strong>24px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For body copy on light backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <Code\n          site={data.site}\n          language=\"html\"\n        >{`<p class=“c-text-content-body--normal”>Lorem ipsum dolor...</p>`}</Code>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__dark-row\">\n              <td>\n                <p class=\"c-text-content-body--light\">Body / Light</p>\n              </td>\n              <td>Book 300</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>16px</strong>\n                <br />\n                line-height: <strong>24px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For body copy on dark or primary green backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <Code\n          site={data.site}\n          language=\"html\"\n        >{`<p class=“c-text-content-body--light”>Lorem ipsum dolor...</p>`}</Code>\n        <div className=\"showcase__title l-margin-top--xxlarge\">Caption</div>\n        <p>\n          Use for styling secondary or supporting information, especially in\n          forms and disclaimers.\n        </p>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__white-row\">\n              <td>\n                <p class=\"c-text-content-caption--normal\">Caption / Normal</p>\n              </td>\n              <td>Book 300</td>\n              <td>#333</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For captions on light backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <Code\n          site={data.site}\n          language=\"html\"\n        >{`<p class=“c-text-content-caption--normal”>Lorem ipsum dolor...</p>`}</Code>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__dark-row\">\n              <td>\n                <p class=\"c-text-content-caption--subtle\">Caption / Subtle</p>\n              </td>\n              <td>Book 300</td>\n              <td>#D7D7D7</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For captions on dark backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <Code\n          site={data.site}\n          language=\"html\"\n        >{`<p class=“c-text-content-caption--subtle”>Lorem ipsum dolor...</p>`}</Code>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__darker-row\">\n              <td>\n                <p class=\"c-text-content-caption--light\">Caption / Light</p>\n              </td>\n              <td>Book 300</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For captions on dark or primary green backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <Code\n          site={data.site}\n          language=\"html\"\n        >{`<p class=“c-text-content-caption--light”>Lorem ipsum dolor...</p>`}</Code>\n      </Layout>\n    </>\n  )\n}\n\nexport const code = {\n  /*\n  text: `<p class=\"c-text-content\">Lorem ipsum dolor ...</p>\n`,\n  subtle: `<p class=\"c-text-content--subtle\">Lorem ipsum dolor ...</p>\n`,\n  attention: `<p class=\"c-text-content--attention\">Lorem ipsum dolor ...</p>\n`,\n  disclaimer: `<p class=\"c-text-content--disclaimer\">Lorem ipsum dolor ...</p>\n`,*/\n}\n"],"sourceRoot":""}