import{j as e,p as o}from"./docsPage-CrCNk6vV.js";import{useMDXComponents as n}from"./index-CswL0fy2.js";import{M as i}from"./index-B9I9zz1X.js";import"./index-DwChlhAQ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./iframe-D4q2UGE4.js";import"../sb-preview/runtime.js";import"./index-DxKRhftL.js";import"./index-DrFu-skq.js";function r(t){const s={code:"code",h1:"h1",h3:"h3",img:"img",p:"p",pre:"pre",...n(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Styles/Intro",parameters:{...o}}),`
`,e.jsx(s.p,{children:e.jsx(s.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
`,e.jsx(s.h1,{id:"styles",children:"Styles"}),`
`,e.jsx(s.p,{children:"This library also includes our main SCSS stylesheets with pre-defined classes you can use to style your page."}),`
`,e.jsx(s.h3,{id:"importing-our-main-stylesheet",children:"Importing our main stylesheet"}),`
`,e.jsx(s.p,{children:"Import the SCSS directly in your top-level component. (This is done for you in the Graphics Kit.)"}),`
`,e.jsx(s.pre,{children:e.jsx(s.code,{className:"language-svelte",children:`<!-- pages/index.svelte -->
<script>
  // other imports and stuffs ...

  import '@reuters-graphics/graphics-components/scss/main.scss';
<\/script>
`})})]})}function y(t={}){const{wrapper:s}={...n(),...t.components};return s?e.jsx(s,{...t,children:e.jsx(r,{...t})}):r(t)}export{y as default};